@webiny/admin-ui 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/Select/primitives/components/SelectContent.js

@@ -1,22 +1,20 @@
 import { Select } from "radix-ui";
 import { cn } from "../../../utils.js";
-import { SelectScrollUpButton } from "./SelectScrollUpButton.js";
-import { SelectScrollDownButton } from "./SelectScrollDownButton.js";
 import * as __rspack_external_react from "react";
 const SelectContent = ({ className, children, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Select.Portal, null, /*#__PURE__*/ __rspack_external_react.createElement(Select.Content, {
         className: cn([
-            "relative z-popover max-h-96 min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong",
+            "relative z-popover max-h-[250px] min-w-56 shadow-lg overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong",
             "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
         ], className),
         position: "popper",
         ...props
-    }, /*#__PURE__*/ __rspack_external_react.createElement(SelectScrollUpButton, null), /*#__PURE__*/ __rspack_external_react.createElement(Select.Viewport, {
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Select.Viewport, {
         className: cn([
-            "py-xs",
+            "py-sm",
             "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
         ])
-    }, children), /*#__PURE__*/ __rspack_external_react.createElement(SelectScrollDownButton, null)));
+    }, children)));
 export { SelectContent };
 
 //# sourceMappingURL=SelectContent.js.map

package/Select/primitives/components/SelectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select/primitives/components/SelectContent.js","sources":["../../../../src/Select/primitives/components/SelectContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select as SelectPrimitives } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { SelectScrollUpButton } from \"./SelectScrollUpButton.js\";\nimport { SelectScrollDownButton } from \"./SelectScrollDownButton.js\";\n\ntype SelectContentProps = SelectPrimitives.SelectContentProps;\n\nconst SelectContent = ({ className, children, ...props }: SelectContentProps) => (\n    <SelectPrimitives.Portal>\n        <SelectPrimitives.Content\n            className={cn(\n                [\n                    \"relative z-popover max-h-96 min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\"\n                ],\n                className\n            )}\n            position={\"popper\"}\n            {...props}\n        >\n            <SelectScrollUpButton />\n            <SelectPrimitives.Viewport\n                className={cn([\n                    \"py-xs\",\n                    \"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)\"\n                ])}\n            >\n                {children}\n            </SelectPrimitives.Viewport>\n            <SelectScrollDownButton />\n        </SelectPrimitives.Content>\n    </SelectPrimitives.Portal>\n);\n\nexport { SelectContent, type SelectContentProps };\n"],"names":["SelectContent","className","children","props","SelectPrimitives","cn","SelectScrollUpButton","SelectScrollDownButton"],"mappings":";;;;;AAQA,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAA2B,iBACxE,sCAACC,OAAAA,MAAuB,sBACpB,sCAACA,OAAAA,OAAwB;QACrB,WAAWC,GACP;YACI;YACA;YACA;SACH,EACDJ;QAEJ,UAAU;QACT,GAAGE,KAAK;qBAET,sCAACG,sBAAoBA,OAAAA,WAAAA,GACrB,sCAACF,OAAAA,QAAyB;QACtB,WAAWC,GAAG;YACV;YACA;SACH;OAEAH,WAAAA,WAAAA,GAEL,sCAACK,wBAAsBA"}
+{"version":3,"file":"Select/primitives/components/SelectContent.js","sources":["../../../../src/Select/primitives/components/SelectContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select as SelectPrimitives } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\n\ntype SelectContentProps = SelectPrimitives.SelectContentProps;\n\nconst SelectContent = ({ className, children, ...props }: SelectContentProps) => (\n    <SelectPrimitives.Portal>\n        <SelectPrimitives.Content\n            className={cn(\n                [\n                    \"relative z-popover max-h-[250px] min-w-56 shadow-lg overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\"\n                ],\n                className\n            )}\n            position={\"popper\"}\n            {...props}\n        >\n            {/* Two things keep this scrollbar in line with the one in the autocomplete popovers.\n                No scroll buttons, because they come and go with the scroll position, taking the\n                viewport height and the size of the thumb with them. And the padding on the\n                viewport rather than around it, so the scrollbar runs the full height of the list. */}\n            <SelectPrimitives.Viewport\n                className={cn([\n                    \"py-sm\",\n                    \"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)\"\n                ])}\n            >\n                {children}\n            </SelectPrimitives.Viewport>\n        </SelectPrimitives.Content>\n    </SelectPrimitives.Portal>\n);\n\nexport { SelectContent, type SelectContentProps };\n"],"names":["SelectContent","className","children","props","SelectPrimitives","cn"],"mappings":";;;AAMA,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAA2B,iBACxE,sCAACC,OAAAA,MAAuB,sBACpB,sCAACA,OAAAA,OAAwB;QACrB,WAAWC,GACP;YACI;YACA;YACA;SACH,EACDJ;QAEJ,UAAU;QACT,GAAGE,KAAK;qBAMT,sCAACC,OAAAA,QAAyB;QACtB,WAAWC,GAAG;YACV;YACA;SACH;OAEAH"}

package/Select/primitives/components/SelectTrigger.d.ts

@@ -2,8 +2,8 @@ import * as React from "react";
 import { Select as SelectPrimitives } from "radix-ui";
 import { type VariantProps } from "../../../utils.js";
 declare const selectTriggerVariants: (props?: ({
-    variant?: "primary" | "secondary" | "ghost" | "ghost-negative" | null | undefined;
-    size?: "md" | "lg" | "xl" | null | undefined;
+    variant?: "ghost" | "ghost-negative" | "primary" | "secondary" | null | undefined;
+    size?: "lg" | "md" | "xl" | null | undefined;
     invalid?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SelectTriggerProps extends SelectPrimitives.SelectTriggerProps, VariantProps<typeof selectTriggerVariants> {

package/Separator/Separator.d.ts

@@ -2,30 +2,31 @@ import * as React from "react";
 import { Separator as SeparatorPrimitive } from "radix-ui";
 import { type VariantProps } from "../utils.js";
 declare const separatorVariants: (props?: ({
-    margin?: "sm" | "md" | "none" | "lg" | "xl" | "xs" | null | undefined;
+    margin?: "lg" | "md" | "none" | "sm" | "xl" | "xs" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
-    variant?: "accent" | "base" | "strong" | "transparent" | "dimmed" | "muted" | null | undefined;
+    variant?: "accent" | "base" | "dimmed" | "muted" | "strong" | "transparent" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SeparatorPosition = "start" | "middle" | "end";
 type SeparatorProps = Omit<SeparatorPrimitive.SeparatorProps, "children"> & VariantProps<typeof separatorVariants> & {
     children?: React.ReactNode;
     labelPosition?: SeparatorPosition;
 };
-declare const Separator: (({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element) & {
-    original: ({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element;
+declare const SeparatorBase: ({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element;
+declare const Separator: typeof SeparatorBase & {
+    original: typeof SeparatorBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element) & {
-        original: ({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element;
+    original: typeof SeparatorBase & {
+        original: typeof SeparatorBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element) & {
-        original: ({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof SeparatorBase & {
+        original: typeof SeparatorBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Separator/Separator.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Separator } from "./Separator.js";
 declare const meta: Meta<typeof Separator>;
 export default meta;

package/Separator/Separator.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator/Separator.stories.js","sources":["../../src/Separator/Separator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\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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"}
+{"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/Sidebar/Sidebar.d.ts

@@ -7,21 +7,22 @@ interface SidebarProps extends Omit<React.ComponentPropsWithoutRef<typeof Sideba
     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/types.js").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;
@@ -65,6 +66,7 @@ declare const Sidebar: ((props: SidebarProps) => React.JSX.Element) & {
             }>) => (props: unknown) => 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.js").SidebarMenuItemLinkProps) => React.JSX.Element) & {
         original: (props: import("./components/items/SidebarMenuItem.js").SidebarMenuItemLinkProps) => React.JSX.Element;
@@ -105,6 +107,7 @@ declare const Sidebar: ((props: SidebarProps) => React.JSX.Element) & {
             }>) => (props: unknown) => 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("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemGroupProps) => React.JSX.Element) & {
         original: (props: import("~/Sidebar/components/items/SidebarMenuGroup.js").SidebarMenuItemGroupProps) => React.JSX.Element;

package/Sidebar/Sidebar.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Sidebar } from "./Sidebar.js";
 declare const meta: Meta<typeof Sidebar>;
 export default meta;

package/Sidebar/Sidebar.stories.js.map

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

package/Sidebar/components/SidebarContent.js

@@ -9,7 +9,7 @@ const SidebarContent = ({ className, children, ...props })=>{
         const { dir, onScroll, ...restProps } = props;
         return /*#__PURE__*/ react.createElement(ScrollArea, {
             "data-sidebar": "content",
-            className: cn("flex text-neutral-primary min-h-0 flex-1 flex-col gap-2", className),
+            className: cn("flex text-neutral-primary min-h-0 flex-1 flex-col gap-2 [&_[data-radix-scroll-area-viewport]>div]:!block", className),
             ...restProps
         }, children);
     }

package/Sidebar/components/SidebarContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/SidebarContent.js","sources":["../../../src/Sidebar/components/SidebarContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { ScrollArea } from \"~/ScrollArea/index.js\";\nimport { useSidebar } from \"./SidebarProvider.js\";\n\nconst SidebarContent = ({ className, children, ...props }: React.ComponentProps<\"div\">) => {\n    const { state } = useSidebar();\n    const isExpanded = state === \"expanded\";\n\n    if (isExpanded) {\n        // Extract dir and onScroll props to avoid type conflicts with ScrollArea.\n        // oxlint-disable-next-line typescript/no-unused-vars\n        const { dir, onScroll, ...restProps } = props;\n        return (\n            <ScrollArea\n                data-sidebar=\"content\"\n                className={cn(\"flex text-neutral-primary min-h-0 flex-1 flex-col gap-2\", className)}\n                {...restProps}\n            >\n                {children}\n            </ScrollArea>\n        );\n    }\n\n    return (\n        <div\n            {...props}\n            data-sidebar=\"content\"\n            className={cn(\n                \"flex text-neutral-primary min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[state=collapsed]:overflow-hidden\",\n                className\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport { SidebarContent };\n"],"names":["SidebarContent","className","children","props","state","useSidebar","isExpanded","dir","onScroll","restProps","ScrollArea","cn"],"mappings":";;;;AAKA,MAAMA,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAAoC;IAClF,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,aAAaF,AAAU,eAAVA;IAEnB,IAAIE,YAAY;QAGZ,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;QACxC,OAAO,WAAP,GACI,oBAACO,YAAUA;YACP,gBAAa;YACb,WAAWC,GAAG,2DAA2DV;YACxE,GAAGQ,SAAS;WAEZP;IAGb;IAEA,OAAO,WAAP,GACI,oBAAC;QACI,GAAGC,KAAK;QACT,gBAAa;QACb,WAAWQ,GACP,0IACAV;OAGHC;AAGb"}
+{"version":3,"file":"Sidebar/components/SidebarContent.js","sources":["../../../src/Sidebar/components/SidebarContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { ScrollArea } from \"~/ScrollArea/index.js\";\nimport { useSidebar } from \"./SidebarProvider.js\";\n\nconst SidebarContent = ({ className, children, ...props }: React.ComponentProps<\"div\">) => {\n    const { state } = useSidebar();\n    const isExpanded = state === \"expanded\";\n\n    if (isExpanded) {\n        // Extract dir and onScroll props to avoid type conflicts with ScrollArea.\n        // oxlint-disable-next-line typescript/no-unused-vars\n        const { dir, onScroll, ...restProps } = props;\n        return (\n            <ScrollArea\n                data-sidebar=\"content\"\n                className={cn(\n                    \"flex text-neutral-primary min-h-0 flex-1 flex-col gap-2 [&_[data-radix-scroll-area-viewport]>div]:!block\",\n                    className\n                )}\n                {...restProps}\n            >\n                {children}\n            </ScrollArea>\n        );\n    }\n\n    return (\n        <div\n            {...props}\n            data-sidebar=\"content\"\n            className={cn(\n                \"flex text-neutral-primary min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[state=collapsed]:overflow-hidden\",\n                className\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport { SidebarContent };\n"],"names":["SidebarContent","className","children","props","state","useSidebar","isExpanded","dir","onScroll","restProps","ScrollArea","cn"],"mappings":";;;;AAKA,MAAMA,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAAoC;IAClF,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,aAAaF,AAAU,eAAVA;IAEnB,IAAIE,YAAY;QAGZ,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;QACxC,OAAO,WAAP,GACI,oBAACO,YAAUA;YACP,gBAAa;YACb,WAAWC,GACP,4GACAV;YAEH,GAAGQ,SAAS;WAEZP;IAGb;IAEA,OAAO,WAAP,GACI,oBAAC;QACI,GAAGC,KAAK;QACT,gBAAa;QACb,WAAWQ,GACP,0IACAV;OAGHC;AAGb"}

package/Sidebar/components/SidebarIcon.d.ts

@@ -3,21 +3,22 @@ import { type IconProps } from "../../Icon/index.js";
 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;
+declare const SidebarIconBase: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+declare const SidebarIcon: typeof SidebarIconBase & {
+    original: typeof SidebarIconBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ element, ...props }: SidebarIconProps) => React.JSX.Element) & {
-        original: ({ element, ...props }: SidebarIconProps) => React.JSX.Element;
+    original: typeof SidebarIconBase & {
+        original: typeof SidebarIconBase;
         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;
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<typeof SidebarIconBase & {
+        original: typeof SidebarIconBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Sidebar/components/SidebarProvider.d.ts

@@ -36,8 +36,8 @@ type SidebarProviderProps = React.HTMLAttributes<HTMLDivElement> & {
     state?: SidebarCachedState;
     onChangeState?: (state: SidebarCachedState) => void;
 };
-declare const SidebarProvider: {
-    ({ className, children, state: cachedState, onChangeState, ...props }: SidebarProviderProps): React.JSX.Element;
-    displayName: string;
-};
+declare function SidebarProvider({ className, children, state: cachedState, onChangeState, ...props }: SidebarProviderProps): React.JSX.Element;
+declare namespace SidebarProvider {
+    var displayName: string;
+}
 export { SidebarProvider, useSidebar, type PinnedItemData };

package/Sidebar/components/SidebarRoot.js

@@ -56,7 +56,7 @@ const SidebarRoot = ({ side = "left", className, children, ...props })=>{
         ...props
     }, /*#__PURE__*/ react.createElement("div", {
         "data-sidebar": "sidebar",
-        className: "flex h-full w-full py-xs flex-col"
+        className: "flex h-full w-full py-xs flex-col overflow-hidden"
     }, children)), /*#__PURE__*/ react.createElement("div", {
         "data-sidebar": "extra-hover-area",
         className: "absolute top-0 left-[theme(spacing.sidebar-collapsed)] h-full w-sm hidden group-data-[state=collapsed]:block"

package/Sidebar/components/SidebarRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/SidebarRoot.js","sources":["../../../src/Sidebar/components/SidebarRoot.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport { useSidebar } from \"./SidebarProvider.js\";\n\ninterface SidebarRootProps extends React.ComponentProps<\"div\"> {\n    side?: \"left\" | \"right\";\n}\n\nconst variants = cva(\"group peer block border-r-sm border-neutral-dimmed bg-neutral-light\", {\n    variants: {\n        pinned: {\n            false: \"fixed top-0 z-sidebar \"\n        }\n    }\n});\n\nconst SidebarRoot = ({ side = \"left\", className, children, ...props }: SidebarRootProps) => {\n    const { state, setExpanded, pinned, expanded } = 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        // Add delay before opening to prevent accidental openings\n        timeoutRef.current = window.setTimeout(() => {\n            // Only set expanded if it's not already expanded\n            if (!expanded) {\n                setExpanded(true);\n            }\n        }, 300);\n    }, [pinned, setExpanded, expanded]);\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        if (timeoutRef.current) {\n            window.clearTimeout(timeoutRef.current);\n            timeoutRef.current = null;\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        }, 300);\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                    \"duration-175 relative h-svh w-sidebar-expanded bg-transparent transition-[width] ease-linear duration-175\",\n                    \"group-data-[side=right]:rotate-180\",\n                    \"group-data-[state=collapsed]:w-sidebar-collapsed\"\n                )}\n            />\n            <div\n                className={cn(\n                    \"duration-175 fixed inset-y-0 z-sidebar h-svh w-sidebar-expanded transition-[width] ease-linear md:flex\",\n                    side === \"left\" ? \"left-0\" : \"right-0\",\n                    \"group-data-[state=collapsed]:w-sidebar-collapsed group-data-[side=left]:border-r-px group-data-[side=right]:border-l-px\",\n                    className\n                )}\n                {...props}\n            >\n                <div data-sidebar=\"sidebar\" className=\"flex h-full w-full py-xs flex-col\">\n                    {children}\n                </div>\n            </div>\n\n            <div\n                data-sidebar={\"extra-hover-area\"}\n                className={\n                    \"absolute top-0 left-[theme(spacing.sidebar-collapsed)] h-full w-sm hidden group-data-[state=collapsed]:block\"\n                }\n            />\n        </div>\n    );\n};\n\nexport { SidebarRoot, type SidebarRootProps };\n"],"names":["variants","cva","SidebarRoot","side","className","children","props","state","setExpanded","pinned","expanded","useSidebar","elementRef","useRef","timeoutRef","onMouseEnter","useCallback","window","onMouseLeave","cn"],"mappings":";;;AAQA,MAAMA,WAAWC,IAAI,uEAAuE;IACxF,UAAU;QACN,QAAQ;YACJ,OAAO;QACX;IACJ;AACJ;AAEA,MAAMC,cAAc,CAAC,EAAEC,OAAO,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAAyB;IACnF,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IAEjD,MAAMC,aAAaC,OAAuB;IAG1C,MAAMC,aAAaD,OAAsB;IAEzC,MAAME,eAAeC,YAAqD;QAEtE,IAAIP,QACA;QAGJ,IAAIK,WAAW,OAAO,EAAE;YACpBG,OAAO,YAAY,CAACH,WAAW,OAAO;YACtCA,WAAW,OAAO,GAAG;QACzB;QAGAA,WAAW,OAAO,GAAGG,OAAO,UAAU,CAAC;YAEnC,IAAI,CAACP,UACDF,YAAY;QAEpB,GAAG;IACP,GAAG;QAACC;QAAQD;QAAaE;KAAS;IAElC,MAAMQ,eAAeF,YAAqD;QAEtE,IAAIP,QACA;QAGJ,IAAIK,WAAW,OAAO,EAAE;YACpBG,OAAO,YAAY,CAACH,WAAW,OAAO;YACtCA,WAAW,OAAO,GAAG;QACzB;QAGAA,WAAW,OAAO,GAAGG,OAAO,UAAU,CAAC;YACnCT,YAAY;QAChB,GAAG;IACP,GAAG;QAACC;QAAQD;KAAY;IAExB,OAAO,WAAP,GACI,oBAAC;QACG,cAAcO;QACd,cAAcG;QACd,KAAKN;QACL,cAAYL;QACZ,gBAAc;QACd,aAAWJ;QACX,WAAWH,SAAS;YAAES;QAAO;qBAE7B,oBAAC;QACG,WAAWU,GACP,6GACA,sCACA;sBAGR,oBAAC;QACG,WAAWA,GACP,0GACAhB,AAAS,WAATA,OAAkB,WAAW,WAC7B,2HACAC;QAEH,GAAGE,KAAK;qBAET,oBAAC;QAAI,gBAAa;QAAU,WAAU;OACjCD,YAAAA,WAAAA,GAIT,oBAAC;QACG,gBAAc;QACd,WACI;;AAKpB"}
+{"version":3,"file":"Sidebar/components/SidebarRoot.js","sources":["../../../src/Sidebar/components/SidebarRoot.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport { useSidebar } from \"./SidebarProvider.js\";\n\ninterface SidebarRootProps extends React.ComponentProps<\"div\"> {\n    side?: \"left\" | \"right\";\n}\n\nconst variants = cva(\"group peer block border-r-sm border-neutral-dimmed bg-neutral-light\", {\n    variants: {\n        pinned: {\n            false: \"fixed top-0 z-sidebar \"\n        }\n    }\n});\n\nconst SidebarRoot = ({ side = \"left\", className, children, ...props }: SidebarRootProps) => {\n    const { state, setExpanded, pinned, expanded } = 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        // Add delay before opening to prevent accidental openings\n        timeoutRef.current = window.setTimeout(() => {\n            // Only set expanded if it's not already expanded\n            if (!expanded) {\n                setExpanded(true);\n            }\n        }, 300);\n    }, [pinned, setExpanded, expanded]);\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        if (timeoutRef.current) {\n            window.clearTimeout(timeoutRef.current);\n            timeoutRef.current = null;\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        }, 300);\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                    \"duration-175 relative h-svh w-sidebar-expanded bg-transparent transition-[width] ease-linear duration-175\",\n                    \"group-data-[side=right]:rotate-180\",\n                    \"group-data-[state=collapsed]:w-sidebar-collapsed\"\n                )}\n            />\n            <div\n                className={cn(\n                    \"duration-175 fixed inset-y-0 z-sidebar h-svh w-sidebar-expanded transition-[width] ease-linear md:flex\",\n                    side === \"left\" ? \"left-0\" : \"right-0\",\n                    \"group-data-[state=collapsed]:w-sidebar-collapsed group-data-[side=left]:border-r-px group-data-[side=right]:border-l-px\",\n                    className\n                )}\n                {...props}\n            >\n                <div\n                    data-sidebar=\"sidebar\"\n                    className=\"flex h-full w-full py-xs flex-col overflow-hidden\"\n                >\n                    {children}\n                </div>\n            </div>\n\n            <div\n                data-sidebar={\"extra-hover-area\"}\n                className={\n                    \"absolute top-0 left-[theme(spacing.sidebar-collapsed)] h-full w-sm hidden group-data-[state=collapsed]:block\"\n                }\n            />\n        </div>\n    );\n};\n\nexport { SidebarRoot, type SidebarRootProps };\n"],"names":["variants","cva","SidebarRoot","side","className","children","props","state","setExpanded","pinned","expanded","useSidebar","elementRef","useRef","timeoutRef","onMouseEnter","useCallback","window","onMouseLeave","cn"],"mappings":";;;AAQA,MAAMA,WAAWC,IAAI,uEAAuE;IACxF,UAAU;QACN,QAAQ;YACJ,OAAO;QACX;IACJ;AACJ;AAEA,MAAMC,cAAc,CAAC,EAAEC,OAAO,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAAyB;IACnF,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IAEjD,MAAMC,aAAaC,OAAuB;IAG1C,MAAMC,aAAaD,OAAsB;IAEzC,MAAME,eAAeC,YAAqD;QAEtE,IAAIP,QACA;QAGJ,IAAIK,WAAW,OAAO,EAAE;YACpBG,OAAO,YAAY,CAACH,WAAW,OAAO;YACtCA,WAAW,OAAO,GAAG;QACzB;QAGAA,WAAW,OAAO,GAAGG,OAAO,UAAU,CAAC;YAEnC,IAAI,CAACP,UACDF,YAAY;QAEpB,GAAG;IACP,GAAG;QAACC;QAAQD;QAAaE;KAAS;IAElC,MAAMQ,eAAeF,YAAqD;QAEtE,IAAIP,QACA;QAGJ,IAAIK,WAAW,OAAO,EAAE;YACpBG,OAAO,YAAY,CAACH,WAAW,OAAO;YACtCA,WAAW,OAAO,GAAG;QACzB;QAGAA,WAAW,OAAO,GAAGG,OAAO,UAAU,CAAC;YACnCT,YAAY;QAChB,GAAG;IACP,GAAG;QAACC;QAAQD;KAAY;IAExB,OAAO,WAAP,GACI,oBAAC;QACG,cAAcO;QACd,cAAcG;QACd,KAAKN;QACL,cAAYL;QACZ,gBAAc;QACd,aAAWJ;QACX,WAAWH,SAAS;YAAES;QAAO;qBAE7B,oBAAC;QACG,WAAWU,GACP,6GACA,sCACA;sBAGR,oBAAC;QACG,WAAWA,GACP,0GACAhB,AAAS,WAATA,OAAkB,WAAW,WAC7B,2HACAC;QAEH,GAAGE,KAAK;qBAET,oBAAC;QACG,gBAAa;QACb,WAAU;OAETD,YAAAA,WAAAA,GAIT,oBAAC;QACG,gBAAc;QACd,WACI;;AAKpB"}

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

@@ -1,22 +1,23 @@
 import React from "react";
 import { type SidebarMenuItemGroupProps } from "./SidebarMenuItem.js";
 import { type SidebarMenuItemIconProps } from "../../../Sidebar/components/items/SidebarMenuItemIcon.js";
-import { type SidebarMenuItemActionProps } from "../../../Sidebar/components/items/SidebarMenuItemAction.js";
-declare const SidebarMenuGroup: ((props: SidebarMenuItemGroupProps) => React.JSX.Element) & {
-    original: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
+import { SidebarMenuItemAction, type SidebarMenuItemActionProps } from "../../../Sidebar/components/items/SidebarMenuItemAction.js";
+declare const SidebarMenuGroupBase: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
+declare const SidebarMenuGroup: typeof SidebarMenuGroupBase & {
+    original: typeof SidebarMenuGroupBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SidebarMenuItemGroupProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
+    original: typeof SidebarMenuGroupBase & {
+        original: typeof SidebarMenuGroupBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SidebarMenuItemGroupProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemGroupProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarMenuGroupBase & {
+        original: typeof SidebarMenuGroupBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -40,6 +41,6 @@ declare const SidebarMenuGroup: ((props: SidebarMenuItemGroupProps) => React.JSX
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Action: ({ element, showOnHover, className, ...props }: SidebarMenuItemActionProps) => React.JSX.Element | null;
+    Action: typeof SidebarMenuItemAction;
 };
 export { SidebarMenuGroup, type SidebarMenuItemGroupProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps };

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { type SidebarMenuItemIconProps } from "./SidebarMenuItemIcon.js";
-import { type SidebarMenuItemActionProps } from "./SidebarMenuItemAction.js";
+import { SidebarMenuItemAction, type SidebarMenuItemActionProps } from "./SidebarMenuItemAction.js";
+import { SidebarMenuItemBadge, type SidebarMenuItemBadgeProps } from "./SidebarMenuItemBadge.js";
 import { LinkProps } from "../../../index.js";
 export interface SidebarMenuItemBaseProps {
     text: React.ReactNode;
@@ -15,6 +16,7 @@ export interface SidebarMenuItemBaseProps {
     disabled?: boolean;
     pinnable?: boolean;
     pinnedIcon?: React.ReactNode;
+    badge?: React.ReactNode;
 }
 type SidebarMenuItemButtonProps = SidebarMenuItemBaseProps & {
     to?: never;
@@ -24,21 +26,22 @@ type SidebarMenuItemButtonProps = SidebarMenuItemBaseProps & {
 type SidebarMenuItemGroupProps = SidebarMenuItemButtonProps;
 type SidebarMenuItemLinkProps = SidebarMenuItemBaseProps & LinkProps;
 type SidebarMenuItemProps = SidebarMenuItemButtonProps | SidebarMenuItemLinkProps;
-declare const SidebarMenuItem: ((props: SidebarMenuItemProps) => React.JSX.Element) & {
-    original: (props: SidebarMenuItemProps) => React.JSX.Element;
+declare const SidebarMenuItemBase: (props: SidebarMenuItemProps) => React.JSX.Element;
+declare const SidebarMenuItem: typeof SidebarMenuItemBase & {
+    original: typeof SidebarMenuItemBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SidebarMenuItemProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemProps) => React.JSX.Element;
+    original: typeof SidebarMenuItemBase & {
+        original: typeof SidebarMenuItemBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SidebarMenuItemProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarMenuItemBase & {
+        original: typeof SidebarMenuItemBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -62,6 +65,7 @@ declare const SidebarMenuItem: ((props: SidebarMenuItemProps) => React.JSX.Eleme
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Action: ({ element, showOnHover, className, ...props }: SidebarMenuItemActionProps) => React.JSX.Element | null;
+    Action: typeof SidebarMenuItemAction;
+    Badge: typeof SidebarMenuItemBadge;
 };
-export { SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuItemButtonProps, type SidebarMenuItemLinkProps, type SidebarMenuItemGroupProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps };
+export { SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuItemButtonProps, type SidebarMenuItemLinkProps, type SidebarMenuItemGroupProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps, type SidebarMenuItemBadgeProps };