@webiny/admin-ui 6.4.0-beta.2 → 6.4.0-beta.4

package/Select/primitives/SelectPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select/primitives/SelectPrimitive.stories.js","sources":["../../../src/Select/primitives/SelectPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { ReactComponent as ChevronRight } from \"@webiny/icons/chevron_right.svg\";\nimport { SelectPrimitive } from \"./SelectPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof SelectPrimitive> = {\n    title: \"Components/Form Primitives/Select\",\n    component: SelectPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        variant: { control: \"select\", options: [\"primary\", \"secondary\", \"ghost\"] },\n        size: { control: \"select\", options: [\"md\", \"lg\", \"xl\"] },\n        disabled: { control: \"boolean\" },\n        invalid: { control: \"boolean\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <SelectPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof SelectPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <SearchIcon />\n    }\n};\n\nexport const WithEndIconIcon: Story = {\n    args: {\n        ...Default.args,\n        endIcon: <SearchIcon />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <SearchIcon />,\n        endIcon: <ChevronRight />\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithOptionGroups: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"North America\",\n                options: [\n                    { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n                    { label: \"Central Standard Time (CST)\", value: \"cst\" },\n                    { label: \"Pacific Standard Time (PST)\", value: \"pst\" }\n                ]\n            },\n            {\n                label: \"Europe & Africa\",\n                options: [\n                    { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n                    { label: \"Central European Time (CET)\", value: \"cet\" },\n                    { label: \"Central Africa Time (CAT)\", value: \"cat\" }\n                ]\n            },\n            {\n                label: \"Asia\",\n                options: [\n                    { label: \"India Standard Time (IST)\", value: \"ist\" },\n                    { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n                    { label: \"Japan Standard Time (JST)\", value: \"jst\" }\n                ]\n            },\n            {\n                label: \"Australia & Pacific\",\n                options: [\n                    { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n                    { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n                    { label: \"Fiji Time (FJT)\", value: \"fjt\" }\n                ]\n            },\n            {\n                label: \"South America\",\n                options: [\n                    { label: \"Argentina Time (ART)\", value: \"art\" },\n                    { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n                    { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n                ]\n            }\n        ]\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <SelectPrimitive {...args} value={value} onChange={value => setValue(value)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(undefined)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","SelectPrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithCustomPlaceholder","WithStartIcon","SearchIcon","WithEndIconIcon","WithStartAndEndIcons","ChevronRight","WithoutResetAction","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithFormattedOptions","WithOptionGroups","WithSeparators","WithDisabledOptions","WithExternalValueControl","Button","undefined"],"mappings":"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"}
+{"version":3,"file":"Select/primitives/SelectPrimitive.stories.js","sources":["../../../src/Select/primitives/SelectPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { ReactComponent as ChevronRight } from \"@webiny/icons/chevron_right.svg\";\nimport { SelectPrimitive } from \"./SelectPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof SelectPrimitive> = {\n    title: \"Components/Form Primitives/Select\",\n    component: SelectPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        variant: { control: \"select\", options: [\"primary\", \"secondary\", \"ghost\"] },\n        size: { control: \"select\", options: [\"md\", \"lg\", \"xl\"] },\n        disabled: { control: \"boolean\" },\n        invalid: { control: \"boolean\" }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <SelectPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof SelectPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <SearchIcon />\n    }\n};\n\nexport const WithEndIconIcon: Story = {\n    args: {\n        ...Default.args,\n        endIcon: <SearchIcon />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <SearchIcon />,\n        endIcon: <ChevronRight />\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithOptionGroups: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"North America\",\n                options: [\n                    { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n                    { label: \"Central Standard Time (CST)\", value: \"cst\" },\n                    { label: \"Pacific Standard Time (PST)\", value: \"pst\" }\n                ]\n            },\n            {\n                label: \"Europe & Africa\",\n                options: [\n                    { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n                    { label: \"Central European Time (CET)\", value: \"cet\" },\n                    { label: \"Central Africa Time (CAT)\", value: \"cat\" }\n                ]\n            },\n            {\n                label: \"Asia\",\n                options: [\n                    { label: \"India Standard Time (IST)\", value: \"ist\" },\n                    { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n                    { label: \"Japan Standard Time (JST)\", value: \"jst\" }\n                ]\n            },\n            {\n                label: \"Australia & Pacific\",\n                options: [\n                    { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n                    { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n                    { label: \"Fiji Time (FJT)\", value: \"fjt\" }\n                ]\n            },\n            {\n                label: \"South America\",\n                options: [\n                    { label: \"Argentina Time (ART)\", value: \"art\" },\n                    { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n                    { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n                ]\n            }\n        ]\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <SelectPrimitive {...args} value={value} onChange={value => setValue(value)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(undefined)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","SelectPrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithCustomPlaceholder","WithStartIcon","SearchIcon","WithEndIconIcon","WithStartAndEndIcons","ChevronRight","WithoutResetAction","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithFormattedOptions","WithOptionGroups","WithSeparators","WithDisabledOptions","WithExternalValueControl","Button","undefined"],"mappings":"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"}

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

@@ -65,6 +65,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 +106,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/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 { 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;
@@ -63,5 +65,6 @@ declare const SidebarMenuItem: ((props: SidebarMenuItemProps) => React.JSX.Eleme
         }>) => (props: unknown) => React.JSX.Element;
     };
     Action: ({ element, showOnHover, className, ...props }: SidebarMenuItemActionProps) => React.JSX.Element | null;
+    Badge: ({ text }: SidebarMenuItemBadgeProps) => React.JSX.Element;
 };
-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 };

package/Sidebar/components/items/SidebarMenuItem.js

@@ -2,6 +2,7 @@ import react from "react";
 import { makeDecoratable, withStaticProps } from "../../../utils.js";
 import { SidebarMenuItemIcon } from "./SidebarMenuItemIcon.js";
 import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
+import { SidebarMenuItemBadge } from "./SidebarMenuItemBadge.js";
 import { SidebarMenuSubItem } from "./SidebarMenuSubItem.js";
 import { useSidebarMenu } from "./SidebarMenuProvider.js";
 import { SidebarMenuRootItem } from "./SidebarMenuRootItem.js";
@@ -13,7 +14,8 @@ const SidebarMenuItemBase = (props)=>{
 const DecoratableSidebarMenuItem = makeDecoratable("SidebarMenuItem", SidebarMenuItemBase);
 const SidebarMenuItem = withStaticProps(DecoratableSidebarMenuItem, {
     Icon: SidebarMenuItemIcon,
-    Action: SidebarMenuItemAction
+    Action: SidebarMenuItemAction,
+    Badge: SidebarMenuItemBadge
 });
 export { SidebarMenuItem };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/items/SidebarMenuItem.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { SidebarMenuItemIcon, type SidebarMenuItemIconProps } from \"./SidebarMenuItemIcon.js\";\nimport { SidebarMenuItemAction, type SidebarMenuItemActionProps } from \"./SidebarMenuItemAction.js\";\nimport { SidebarMenuSubItem } from \"./SidebarMenuSubItem.js\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider.js\";\nimport { SidebarMenuRootItem } from \"~/Sidebar/components/items/SidebarMenuRootItem.js\";\nimport { LinkProps } from \"~/index.js\";\n\nexport interface SidebarMenuItemBaseProps {\n    text: React.ReactNode;\n    className?: string;\n    collapsible?: boolean;\n    children?: React.ReactNode;\n    onClick?: React.MouseEventHandler;\n    icon?: React.ReactNode;\n    action?: React.ReactNode;\n    variant?: \"group-label\";\n    active?: boolean;\n    disabled?: boolean;\n    pinnable?: boolean;\n    pinnedIcon?: React.ReactNode;\n}\n\ntype SidebarMenuItemButtonProps = SidebarMenuItemBaseProps & {\n    to?: never;\n    route?: never;\n    params?: never;\n};\n\ntype SidebarMenuItemGroupProps = SidebarMenuItemButtonProps;\ntype SidebarMenuItemLinkProps = SidebarMenuItemBaseProps & LinkProps;\n\ntype SidebarMenuItemProps = SidebarMenuItemButtonProps | SidebarMenuItemLinkProps;\n\nconst SidebarMenuItemBase = (props: SidebarMenuItemProps) => {\n    const { currentLevel } = useSidebarMenu();\n\n    if (currentLevel === 0) {\n        return <SidebarMenuRootItem {...props} />;\n    }\n\n    return <SidebarMenuSubItem {...props} />;\n};\n\nconst DecoratableSidebarMenuItem = makeDecoratable(\"SidebarMenuItem\", SidebarMenuItemBase);\n\nconst SidebarMenuItem = withStaticProps(DecoratableSidebarMenuItem, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport {\n    SidebarMenuItem,\n    type SidebarMenuItemProps,\n    type SidebarMenuItemButtonProps,\n    type SidebarMenuItemLinkProps,\n    type SidebarMenuItemGroupProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps\n};\n"],"names":["SidebarMenuItemBase","props","currentLevel","useSidebarMenu","SidebarMenuRootItem","SidebarMenuSubItem","DecoratableSidebarMenuItem","makeDecoratable","SidebarMenuItem","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction"],"mappings":";;;;;;;AAmCA,MAAMA,sBAAsB,CAACC;IACzB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,IAAID,AAAiB,MAAjBA,cACA,OAAO,WAAP,GAAO,oBAACE,qBAAwBH;IAGpC,OAAO,WAAP,GAAO,oBAACI,oBAAuBJ;AACnC;AAEA,MAAMK,6BAA6BC,gBAAgB,mBAAmBP;AAEtE,MAAMQ,kBAAkBC,gBAAgBH,4BAA4B;IAChE,MAAMI;IACN,QAAQC;AACZ"}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuItem.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { SidebarMenuItemIcon, type SidebarMenuItemIconProps } from \"./SidebarMenuItemIcon.js\";\nimport { SidebarMenuItemAction, type SidebarMenuItemActionProps } from \"./SidebarMenuItemAction.js\";\nimport { SidebarMenuItemBadge, type SidebarMenuItemBadgeProps } from \"./SidebarMenuItemBadge.js\";\nimport { SidebarMenuSubItem } from \"./SidebarMenuSubItem.js\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider.js\";\nimport { SidebarMenuRootItem } from \"~/Sidebar/components/items/SidebarMenuRootItem.js\";\nimport { LinkProps } from \"~/index.js\";\n\nexport interface SidebarMenuItemBaseProps {\n    text: React.ReactNode;\n    className?: string;\n    collapsible?: boolean;\n    children?: React.ReactNode;\n    onClick?: React.MouseEventHandler;\n    icon?: React.ReactNode;\n    action?: React.ReactNode;\n    variant?: \"group-label\";\n    active?: boolean;\n    disabled?: boolean;\n    pinnable?: boolean;\n    pinnedIcon?: React.ReactNode;\n    badge?: React.ReactNode;\n}\n\ntype SidebarMenuItemButtonProps = SidebarMenuItemBaseProps & {\n    to?: never;\n    route?: never;\n    params?: never;\n};\n\ntype SidebarMenuItemGroupProps = SidebarMenuItemButtonProps;\ntype SidebarMenuItemLinkProps = SidebarMenuItemBaseProps & LinkProps;\n\ntype SidebarMenuItemProps = SidebarMenuItemButtonProps | SidebarMenuItemLinkProps;\n\nconst SidebarMenuItemBase = (props: SidebarMenuItemProps) => {\n    const { currentLevel } = useSidebarMenu();\n\n    if (currentLevel === 0) {\n        return <SidebarMenuRootItem {...props} />;\n    }\n\n    return <SidebarMenuSubItem {...props} />;\n};\n\nconst DecoratableSidebarMenuItem = makeDecoratable(\"SidebarMenuItem\", SidebarMenuItemBase);\n\nconst SidebarMenuItem = withStaticProps(DecoratableSidebarMenuItem, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction,\n    Badge: SidebarMenuItemBadge\n});\n\nexport {\n    SidebarMenuItem,\n    type SidebarMenuItemProps,\n    type SidebarMenuItemButtonProps,\n    type SidebarMenuItemLinkProps,\n    type SidebarMenuItemGroupProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps,\n    type SidebarMenuItemBadgeProps\n};\n"],"names":["SidebarMenuItemBase","props","currentLevel","useSidebarMenu","SidebarMenuRootItem","SidebarMenuSubItem","DecoratableSidebarMenuItem","makeDecoratable","SidebarMenuItem","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction","SidebarMenuItemBadge"],"mappings":";;;;;;;;AAqCA,MAAMA,sBAAsB,CAACC;IACzB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,IAAID,AAAiB,MAAjBA,cACA,OAAO,WAAP,GAAO,oBAACE,qBAAwBH;IAGpC,OAAO,WAAP,GAAO,oBAACI,oBAAuBJ;AACnC;AAEA,MAAMK,6BAA6BC,gBAAgB,mBAAmBP;AAEtE,MAAMQ,kBAAkBC,gBAAgBH,4BAA4B;IAChE,MAAMI;IACN,QAAQC;IACR,OAAOC;AACX"}

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface SidebarMenuItemBadgeProps {
+    text: React.ReactNode;
+}
+declare const SidebarMenuItemBadge: ({ text }: SidebarMenuItemBadgeProps) => React.JSX.Element;
+export { SidebarMenuItemBadge, type SidebarMenuItemBadgeProps };

package/Sidebar/components/items/SidebarMenuItemBadge.js

@@ -0,0 +1,7 @@
+import react from "react";
+const SidebarMenuItemBadge = ({ text })=>/*#__PURE__*/ react.createElement("span", {
+        className: "inline-flex items-center rounded-sm bg-primary/50 px-xs text-[10px] font-semibold text-neutral-light leading-none h-md shrink-0"
+    }, text);
+export { SidebarMenuItemBadge };
+
+//# sourceMappingURL=SidebarMenuItemBadge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar/components/items/SidebarMenuItemBadge.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuItemBadge.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface SidebarMenuItemBadgeProps {\n    text: React.ReactNode;\n}\n\nconst SidebarMenuItemBadge = ({ text }: SidebarMenuItemBadgeProps) => {\n    return (\n        <span\n            className={\n                \"inline-flex items-center rounded-sm bg-primary/50 px-xs text-[10px] font-semibold text-neutral-light leading-none h-md shrink-0\"\n            }\n        >\n            {text}\n        </span>\n    );\n};\n\nexport { SidebarMenuItemBadge, type SidebarMenuItemBadgeProps };\n"],"names":["SidebarMenuItemBadge","text"],"mappings":";AAMA,MAAMA,uBAAuB,CAAC,EAAEC,IAAI,EAA6B,GACtD,WAAP,GACI,oBAAC;QACG,WACI;OAGHA"}

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

@@ -2,6 +2,7 @@ import React from "react";
 import { type SidebarMenuItemLinkProps } from "./SidebarMenuItem.js";
 import { type SidebarMenuItemIconProps } from "../../../Sidebar/components/items/SidebarMenuItemIcon.js";
 import { type SidebarMenuItemActionProps } from "../../../Sidebar/components/items/SidebarMenuItemAction.js";
+import { type SidebarMenuItemBadgeProps } from "../../../Sidebar/components/items/SidebarMenuItemBadge.js";
 declare const SidebarMenuLink: ((props: SidebarMenuItemLinkProps) => React.JSX.Element) & {
     original: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
     originalName: string;
@@ -41,5 +42,6 @@ declare const SidebarMenuLink: ((props: SidebarMenuItemLinkProps) => React.JSX.E
         }>) => (props: unknown) => React.JSX.Element;
     };
     Action: ({ element, showOnHover, className, ...props }: SidebarMenuItemActionProps) => React.JSX.Element | null;
+    Badge: ({ text }: SidebarMenuItemBadgeProps) => React.JSX.Element;
 };
-export { SidebarMenuLink, type SidebarMenuItemLinkProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps };
+export { SidebarMenuLink, type SidebarMenuItemLinkProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps, type SidebarMenuItemBadgeProps };

package/Sidebar/components/items/SidebarMenuLink.js

@@ -3,11 +3,13 @@ import { SidebarMenuItem } from "./SidebarMenuItem.js";
 import { makeDecoratable, withStaticProps } from "../../../utils.js";
 import { SidebarMenuItemIcon } from "./SidebarMenuItemIcon.js";
 import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
+import { SidebarMenuItemBadge } from "./SidebarMenuItemBadge.js";
 const SidebarMenuLinkBase = (props)=>/*#__PURE__*/ react.createElement(SidebarMenuItem, props);
 const DecoratableSidebarMenuLink = makeDecoratable("SidebarMenuLink", SidebarMenuLinkBase);
 const SidebarMenuLink = withStaticProps(DecoratableSidebarMenuLink, {
     Icon: SidebarMenuItemIcon,
-    Action: SidebarMenuItemAction
+    Action: SidebarMenuItemAction,
+    Badge: SidebarMenuItemBadge
 });
 export { SidebarMenuLink };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/items/SidebarMenuLink.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuLink.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarMenuItem, type SidebarMenuItemLinkProps } from \"./SidebarMenuItem.js\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport {\n    SidebarMenuItemIcon,\n    type SidebarMenuItemIconProps\n} from \"~/Sidebar/components/items/SidebarMenuItemIcon.js\";\nimport {\n    SidebarMenuItemAction,\n    type SidebarMenuItemActionProps\n} from \"~/Sidebar/components/items/SidebarMenuItemAction.js\";\n\nconst SidebarMenuLinkBase = (props: SidebarMenuItemLinkProps) => {\n    return <SidebarMenuItem {...props} />;\n};\n\nconst DecoratableSidebarMenuLink = makeDecoratable(\"SidebarMenuLink\", SidebarMenuLinkBase);\n\nconst SidebarMenuLink = withStaticProps(DecoratableSidebarMenuLink, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction\n});\n\nexport {\n    SidebarMenuLink,\n    type SidebarMenuItemLinkProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps\n};\n"],"names":["SidebarMenuLinkBase","props","SidebarMenuItem","DecoratableSidebarMenuLink","makeDecoratable","SidebarMenuLink","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction"],"mappings":";;;;;AAYA,MAAMA,sBAAsB,CAACC,QAClB,WAAP,GAAO,oBAACC,iBAAoBD;AAGhC,MAAME,6BAA6BC,gBAAgB,mBAAmBJ;AAEtE,MAAMK,kBAAkBC,gBAAgBH,4BAA4B;IAChE,MAAMI;IACN,QAAQC;AACZ"}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuLink.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuLink.tsx"],"sourcesContent":["import React from \"react\";\nimport { SidebarMenuItem, type SidebarMenuItemLinkProps } from \"./SidebarMenuItem.js\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport {\n    SidebarMenuItemIcon,\n    type SidebarMenuItemIconProps\n} from \"~/Sidebar/components/items/SidebarMenuItemIcon.js\";\nimport {\n    SidebarMenuItemAction,\n    type SidebarMenuItemActionProps\n} from \"~/Sidebar/components/items/SidebarMenuItemAction.js\";\nimport {\n    SidebarMenuItemBadge,\n    type SidebarMenuItemBadgeProps\n} from \"~/Sidebar/components/items/SidebarMenuItemBadge.js\";\n\nconst SidebarMenuLinkBase = (props: SidebarMenuItemLinkProps) => {\n    return <SidebarMenuItem {...props} />;\n};\n\nconst DecoratableSidebarMenuLink = makeDecoratable(\"SidebarMenuLink\", SidebarMenuLinkBase);\n\nconst SidebarMenuLink = withStaticProps(DecoratableSidebarMenuLink, {\n    Icon: SidebarMenuItemIcon,\n    Action: SidebarMenuItemAction,\n    Badge: SidebarMenuItemBadge\n});\n\nexport {\n    SidebarMenuLink,\n    type SidebarMenuItemLinkProps,\n    type SidebarMenuItemIconProps,\n    type SidebarMenuItemActionProps,\n    type SidebarMenuItemBadgeProps\n};\n"],"names":["SidebarMenuLinkBase","props","SidebarMenuItem","DecoratableSidebarMenuLink","makeDecoratable","SidebarMenuLink","withStaticProps","SidebarMenuItemIcon","SidebarMenuItemAction","SidebarMenuItemBadge"],"mappings":";;;;;;AAgBA,MAAMA,sBAAsB,CAACC,QAClB,WAAP,GAAO,oBAACC,iBAAoBD;AAGhC,MAAME,6BAA6BC,gBAAgB,mBAAmBJ;AAEtE,MAAMK,kBAAkBC,gBAAgBH,4BAA4B;IAChE,MAAMI;IACN,QAAQC;IACR,OAAOC;AACX"}

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

@@ -1,5 +1,5 @@
 import React from "react";
 import type { SidebarMenuItemProps } from "./SidebarMenuRootItem.js";
 type SidebarMenuButtonBaseProps = Omit<SidebarMenuItemProps, "children">;
-declare const SidebarMenuRootButton: ({ className, onClick, variant, active, disabled, icon, pinnedIcon, action, text, to, ...linkProps }: SidebarMenuButtonBaseProps) => React.JSX.Element;
+declare const SidebarMenuRootButton: ({ className, onClick, variant, active, disabled, icon, pinnedIcon, action, text, badge, to, ...linkProps }: SidebarMenuButtonBaseProps) => React.JSX.Element;
 export { SidebarMenuRootButton };

package/Sidebar/components/items/SidebarMenuRootButton.js

@@ -1,6 +1,7 @@
 import react from "react";
 import { cn, cva } from "../../../utils.js";
 import { DivButton } from "./DivButton.js";
+import { SidebarMenuItemBadge } from "./SidebarMenuItemBadge.js";
 import { useAdminUi } from "../../../index.js";
 const variants = cva([
     "flex w-full items-center gap-sm rounded-md",
@@ -22,7 +23,7 @@ const variants = cva([
         }
     }
 });
-const SidebarMenuRootButton = ({ className, onClick, variant, active, disabled, icon, pinnedIcon, action, text, to, ...linkProps })=>{
+const SidebarMenuRootButton = ({ className, onClick, variant, active, disabled, icon, pinnedIcon, action, text, badge, to, ...linkProps })=>{
     const sharedProps = {
         "data-sidebar": "menu-button",
         "data-active": active,
@@ -37,11 +38,15 @@ const SidebarMenuRootButton = ({ className, onClick, variant, active, disabled,
         ...sharedProps,
         to: to,
         ...linkProps
-    }, icon, text) : /*#__PURE__*/ react.createElement(DivButton, {
+    }, icon, text, badge && ("string" == typeof badge ? /*#__PURE__*/ react.createElement(SidebarMenuItemBadge, {
+        text: badge
+    }) : badge)) : /*#__PURE__*/ react.createElement(DivButton, {
         ...sharedProps,
         disabled: disabled,
         tabIndex: "group-label" === variant ? -1 : void 0
-    }, icon, text);
+    }, icon, text, badge && ("string" == typeof badge ? /*#__PURE__*/ react.createElement(SidebarMenuItemBadge, {
+        text: badge
+    }) : badge));
     return /*#__PURE__*/ react.createElement("div", {
         className: cn("flex items-center w-full relative group/menu-root-button", className)
     }, content, action && /*#__PURE__*/ react.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar/components/items/SidebarMenuRootButton.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuRootButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem.js\";\nimport { DivButton } from \"./DivButton.js\";\nimport { useAdminUi } from \"~/index.js\";\n\nconst variants = cva(\n    [\n        \"flex w-full items-center gap-sm rounded-md\",\n        \"no-underline! text-neutral-primary cursor-pointer px-sm py-xs-plus text-left\",\n        \"text-md outline-none transition-[width,height,padding]\",\n        \"whitespace-nowrap overflow-hidden\",\n        \"hover:bg-neutral-dark/5\",\n        \"group-hover/menu-root-button:bg-neutral-dark/5\",\n        \"focus:bg-neutral-dark/5 focus:ring-none focus:ring-transparent\",\n        \"data-[active=true]:bg-neutral-dark/5 data-[active=true]:font-semibold data-[active=true]:pointer-events-none\",\n        \"group-data-[state=open]/menu-item-collapsible:font-semibold!\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\":\n                    \"text-neutral-muted! uppercase hover:bg-transparent! group-hover/menu-root-button:bg-transparent! focus:bg-transparent! cursor-default!\"\n            },\n            disabled: {\n                true: \"pointer-events-none text-neutral-disabled!\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuButtonBaseProps = Omit<SidebarMenuItemProps, \"children\">;\n\nconst SidebarMenuRootButton = ({\n    className,\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n\n    // oxlint-disable-next-line\n    pinnedIcon,\n\n    action,\n    text,\n    to,\n    ...linkProps\n}: SidebarMenuButtonBaseProps) => {\n    const sharedProps = {\n        \"data-sidebar\": \"menu-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled }),\n        onClick\n    };\n\n    const { linkComponent: LinkComponent } = useAdminUi();\n\n    const content = to ? (\n        <LinkComponent {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {text}\n        </LinkComponent>\n    ) : (\n        <DivButton\n            {...sharedProps}\n            disabled={disabled}\n            tabIndex={variant === \"group-label\" ? -1 : undefined}\n        >\n            {icon}\n            {text}\n        </DivButton>\n    );\n\n    return (\n        <div className={cn(\"flex items-center w-full relative group/menu-root-button\", className)}>\n            {content}\n            {action && (\n                <div className=\"absolute top-0 right-0 mr-sm h-full flex items-center\">\n                    {action}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport { SidebarMenuRootButton };\n"],"names":["variants","cva","SidebarMenuRootButton","className","onClick","variant","active","disabled","icon","pinnedIcon","action","text","to","linkProps","sharedProps","LinkComponent","useAdminUi","content","DivButton","undefined","cn"],"mappings":";;;;AAMA,MAAMA,WAAWC,IACb;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,eACI;QACR;QACA,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAKJ,MAAMC,wBAAwB,CAAC,EAC3BC,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,IAAI,EAGJC,UAAU,EAEVC,MAAM,EACNC,IAAI,EACJC,EAAE,EACF,GAAGC,WACsB;IACzB,MAAMC,cAAc;QAChB,gBAAgB;QAChB,eAAeR;QACf,WAAWN,SAAS;YAAEK;YAASE;QAAS;QACxCH;IACJ;IAEA,MAAM,EAAE,eAAeW,aAAa,EAAE,GAAGC;IAEzC,MAAMC,UAAUL,KAAK,WAALA,GACZ,oBAACG,eAAAA;QAAe,GAAGD,WAAW;QAAE,IAAIF;QAAK,GAAGC,SAAS;OAChDL,MACAG,QAAAA,WAAAA,GAGL,oBAACO,WAASA;QACL,GAAGJ,WAAW;QACf,UAAUP;QACV,UAAUF,AAAY,kBAAZA,UAA4B,KAAKc;OAE1CX,MACAG;IAIT,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWS,GAAG,4DAA4DjB;OAC1Ec,SACAP,UAAU,WAAVA,GACG,oBAAC;QAAI,WAAU;OACVA;AAKrB"}
+{"version":3,"file":"Sidebar/components/items/SidebarMenuRootButton.js","sources":["../../../../src/Sidebar/components/items/SidebarMenuRootButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem.js\";\nimport { DivButton } from \"./DivButton.js\";\nimport { SidebarMenuItemBadge } from \"./SidebarMenuItemBadge.js\";\nimport { useAdminUi } from \"~/index.js\";\n\nconst variants = cva(\n    [\n        \"flex w-full items-center gap-sm rounded-md\",\n        \"no-underline! text-neutral-primary cursor-pointer px-sm py-xs-plus text-left\",\n        \"text-md outline-none transition-[width,height,padding]\",\n        \"whitespace-nowrap overflow-hidden\",\n        \"hover:bg-neutral-dark/5\",\n        \"group-hover/menu-root-button:bg-neutral-dark/5\",\n        \"focus:bg-neutral-dark/5 focus:ring-none focus:ring-transparent\",\n        \"data-[active=true]:bg-neutral-dark/5 data-[active=true]:font-semibold data-[active=true]:pointer-events-none\",\n        \"group-data-[state=open]/menu-item-collapsible:font-semibold!\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\":\n                    \"text-neutral-muted! uppercase hover:bg-transparent! group-hover/menu-root-button:bg-transparent! focus:bg-transparent! cursor-default!\"\n            },\n            disabled: {\n                true: \"pointer-events-none text-neutral-disabled!\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuButtonBaseProps = Omit<SidebarMenuItemProps, \"children\">;\n\nconst SidebarMenuRootButton = ({\n    className,\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n\n    // oxlint-disable-next-line\n    pinnedIcon,\n\n    action,\n    text,\n    badge,\n    to,\n    ...linkProps\n}: SidebarMenuButtonBaseProps) => {\n    const sharedProps = {\n        \"data-sidebar\": \"menu-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled }),\n        onClick\n    };\n\n    const { linkComponent: LinkComponent } = useAdminUi();\n\n    const content = to ? (\n        <LinkComponent {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {text}\n            {badge && (typeof badge === \"string\" ? <SidebarMenuItemBadge text={badge} /> : badge)}\n        </LinkComponent>\n    ) : (\n        <DivButton\n            {...sharedProps}\n            disabled={disabled}\n            tabIndex={variant === \"group-label\" ? -1 : undefined}\n        >\n            {icon}\n            {text}\n            {badge && (typeof badge === \"string\" ? <SidebarMenuItemBadge text={badge} /> : badge)}\n        </DivButton>\n    );\n\n    return (\n        <div className={cn(\"flex items-center w-full relative group/menu-root-button\", className)}>\n            {content}\n            {action && (\n                <div className=\"absolute top-0 right-0 mr-sm h-full flex items-center\">\n                    {action}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport { SidebarMenuRootButton };\n"],"names":["variants","cva","SidebarMenuRootButton","className","onClick","variant","active","disabled","icon","pinnedIcon","action","text","badge","to","linkProps","sharedProps","LinkComponent","useAdminUi","content","SidebarMenuItemBadge","DivButton","undefined","cn"],"mappings":";;;;;AAOA,MAAMA,WAAWC,IACb;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,eACI;QACR;QACA,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAKJ,MAAMC,wBAAwB,CAAC,EAC3BC,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,IAAI,EAGJC,UAAU,EAEVC,MAAM,EACNC,IAAI,EACJC,KAAK,EACLC,EAAE,EACF,GAAGC,WACsB;IACzB,MAAMC,cAAc;QAChB,gBAAgB;QAChB,eAAeT;QACf,WAAWN,SAAS;YAAEK;YAASE;QAAS;QACxCH;IACJ;IAEA,MAAM,EAAE,eAAeY,aAAa,EAAE,GAAGC;IAEzC,MAAMC,UAAUL,KAAK,WAALA,GACZ,oBAACG,eAAAA;QAAe,GAAGD,WAAW;QAAE,IAAIF;QAAK,GAAGC,SAAS;OAChDN,MACAG,MACAC,SAAU,CAAiB,YAAjB,OAAOA,QAAqB,WAAX,GAAW,oBAACO,sBAAoBA;QAAC,MAAMP;SAAYA,KAAI,mBAGvF,oBAACQ,WAASA;QACL,GAAGL,WAAW;QACf,UAAUR;QACV,UAAUF,AAAY,kBAAZA,UAA4B,KAAKgB;OAE1Cb,MACAG,MACAC,SAAU,CAAiB,YAAjB,OAAOA,QAAqB,WAAX,GAAW,oBAACO,sBAAoBA;QAAC,MAAMP;SAAYA,KAAI;IAI3F,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWU,GAAG,4DAA4DnB;OAC1Ee,SACAR,UAAU,WAAVA,GACG,oBAAC;QAAI,WAAU;OACVA;AAKrB"}

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

@@ -2,5 +2,5 @@ import React from "react";
 import type { SidebarMenuItemProps } from "./SidebarMenuRootItem.js";
 import { DistributedOmit } from "type-fest";
 type SidebarMenuSubButtonProps = DistributedOmit<SidebarMenuItemProps, "children">;
-declare const SidebarMenuSubButton: ({ onClick, variant, active, disabled, icon, pinnedIcon, action, text, className, to, ...linkProps }: SidebarMenuSubButtonProps) => React.JSX.Element;
+declare const SidebarMenuSubButton: ({ onClick, variant, active, disabled, icon, pinnedIcon, action, text, badge, className, to, ...linkProps }: SidebarMenuSubButtonProps) => React.JSX.Element;
 export { SidebarMenuSubButton };