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

package/Separator/Separator.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["Separator","React","Heading","Text","meta","title","component","argTypes","decorators","Story","createElement","className","Documentation","args","variant","margin","orientation","decorative","children","undefined","labelPosition","description","control","options","render","props","level","size","Default","VerticalAndHorizontal","HorizontalOrientation","VerticalOrientation","LessMargin","MoreMargin","Transparent","Base","Muted","Strong","Accent","AllVariants","WithLabelMiddle","WithLabelStart","WithLabelEnd","WithLabelVertical","style","height"],"sources":["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"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Separator/Separator.stories.js","sources":["../../src/Separator/Separator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-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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"}

package/Separator/index.js

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

package/Sidebar/Sidebar.js

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

package/Sidebar/Sidebar.js.map

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

package/Sidebar/Sidebar.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as SidebarStories from './Sidebar.stories';
+import * as SidebarStories from "./Sidebar.stories";
 
 <Meta of={SidebarStories} />
 
@@ -17,55 +17,44 @@ import { ReactComponent as CmsIcon } from "@webiny/icons/web.svg";
 import { ReactComponent as PageBuilderIcon } from "@webiny/icons/table_chart.svg";
 
 const SidebarExample = () => {
-    return (
-        <SidebarProvider>
-            <Sidebar
-                title={"Webiny"}
-                icon={
-                    <Sidebar.Icon
-                        element={<img src="/logo.png" alt="Webiny" />}
-                        label={"Webiny"}
-                    />
-                }
-            >
-                <Sidebar.Link
-                    text={"Headless CMS"}
-                    to={"/cms"}
-                    icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
-                />
-                <Sidebar.Item
-                    text={"Page Builder"}
-                    icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
-                >
-                    <Sidebar.Group text={"Pages"} />
-                    <Sidebar.Link
-                        to={"/page-builder/pages"}
-                        text={"Pages"}
-                    />
-                    <Sidebar.Link
-                        to={"/page-builder/templates"}
-                        text={"Templates"}
-                    />
-                </Sidebar.Item>
-            </Sidebar>
-        </SidebarProvider>
-    );
-};
+return (
+
+<SidebarProvider>
+  <Sidebar
+    title={"Webiny"}
+    icon={<Sidebar.Icon element={<img src="/logo.png" alt="Webiny" />} label={"Webiny"} />}
+  >
+    <Sidebar.Link
+      text={"Headless CMS"}
+      to={"/cms"}
+      icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
+    />
+    <Sidebar.Item
+      text={"Page Builder"}
+      icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
+    >
+      <Sidebar.Group text={"Pages"} />
+      <Sidebar.Link to={"/page-builder/pages"} text={"Pages"} />
+      <Sidebar.Link to={"/page-builder/templates"} text={"Templates"} />
+    </Sidebar.Item>
+  </Sidebar>
+</SidebarProvider>
+); };
 
 export default SidebarExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Sidebar/Sidebar.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Sidebar/Sidebar.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 ```tsx
@@ -75,39 +64,28 @@ import { ReactComponent as CmsIcon } from "@webiny/icons/web.svg";
 import { ReactComponent as PageBuilderIcon } from "@webiny/icons/table_chart.svg";
 
 const SidebarExample = () => {
-    return (
-        <SidebarProvider>
-            <Sidebar
-                title={"Webiny"}
-                icon={
-                    <Sidebar.Icon
-                        element={<img src="/logo.png" alt="Webiny" />}
-                        label={"Webiny"}
-                    />
-                }
-            >
-                <Sidebar.Link
-                    text={"Headless CMS"}
-                    to={"/cms"}
-                    icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
-                />
-                <Sidebar.Item
-                    text={"Page Builder"}
-                    icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
-                >
-                    <Sidebar.Group text={"Pages"} />
-                    <Sidebar.Link
-                        to={"/page-builder/pages"}
-                        text={"Pages"}
-                    />
-                    <Sidebar.Link
-                        to={"/page-builder/templates"}
-                        text={"Templates"}
-                    />
-                </Sidebar.Item>
-            </Sidebar>
-        </SidebarProvider>
-    );
+  return (
+    <SidebarProvider>
+      <Sidebar
+        title={"Webiny"}
+        icon={<Sidebar.Icon element={<img src="/logo.png" alt="Webiny" />} label={"Webiny"} />}
+      >
+        <Sidebar.Link
+          text={"Headless CMS"}
+          to={"/cms"}
+          icon={<Sidebar.Item.Icon label="Headless CMS" element={<CmsIcon />} />}
+        />
+        <Sidebar.Item
+          text={"Page Builder"}
+          icon={<Sidebar.Item.Icon label="Page Builder" element={<PageBuilderIcon />} />}
+        >
+          <Sidebar.Group text={"Pages"} />
+          <Sidebar.Link to={"/page-builder/pages"} text={"Pages"} />
+          <Sidebar.Link to={"/page-builder/templates"} text={"Templates"} />
+        </Sidebar.Item>
+      </Sidebar>
+    </SidebarProvider>
+  );
 };
 
 export default SidebarExample;
@@ -123,11 +101,11 @@ The main container component that holds the entire sidebar structure.
 
 ```jsx
 <Sidebar
-    title="Application Title"
-    icon={<Sidebar.Icon element={<Logo />} label="Logo" />}
-    footer={<FooterContent />}
+  title="Application Title"
+  icon={<Sidebar.Icon element={<Logo />} label="Logo" />}
+  footer={<FooterContent />}
 >
-    {/* Menu items */}
+  {/* Menu items */}
 </Sidebar>
 ```
 
@@ -158,10 +136,10 @@ Used to create menu items that link to different routes in the application.
 
 ```jsx
 <Sidebar.Link
-    text="Dashboard"
-    to="/dashboard"
-    icon={<Sidebar.Item.Icon label="Dashboard" element={<DashboardIcon />} />}
-    active={currentPath === "/dashboard"}
+  text="Dashboard"
+  to="/dashboard"
+  icon={<Sidebar.Item.Icon label="Dashboard" element={<DashboardIcon />} />}
+  active={currentPath === "/dashboard"}
 />
 ```