@webiny/admin-ui 6.0.0-alpha.5 → 6.0.0-rc.0

package/Select/primitives/presenters/SelectPresenter.test.js

@@ -1,8 +1,9 @@
-import { SelectPresenter } from "./SelectPresenter";
+import { it, describe, expect, vi } from "vitest";
+import { SelectPresenter } from "./SelectPresenter.js";
 describe("SelectPresenter", () => {
-  const onValueChange = jest.fn();
+  const onValueChange = vi.fn();
   it("should return the compatible `vm.selectRoot` based on props", () => {
-    const onValueChange = jest.fn();
+    const onValueChange = vi.fn();
 
     // `value`
     {
@@ -23,7 +24,7 @@ describe("SelectPresenter", () => {
     }
   });
   it("should return the compatible `vm.selectTrigger` based on props", () => {
-    const onValueChange = jest.fn();
+    const onValueChange = vi.fn();
 
     // `placeholder`
     {
@@ -155,7 +156,7 @@ describe("SelectPresenter", () => {
     expect(onValueChange).toHaveBeenCalledWith("value-2");
   });
   it("should call `onValueChange` and `onValueReset` callbacks when `resetValue` is called", () => {
-    const onValueReset = jest.fn();
+    const onValueReset = vi.fn();
     const presenter = new SelectPresenter();
     presenter.init({
       onValueChange,

package/Select/primitives/presenters/SelectPresenter.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["SelectPresenter","describe","onValueChange","jest","fn","it","presenter","init","value","expect","vm","selectRoot","toEqual","placeholder","selectTrigger","displayResetAction","hasValue","options","selectOptions","label","disabled","separator","changeValue","toHaveBeenCalledWith","onValueReset","resetValue","toHaveBeenCalled"],"sources":["SelectPresenter.test.ts"],"sourcesContent":["import { SelectPresenter } from \"./SelectPresenter\";\n\ndescribe(\"SelectPresenter\", () => {\n    const onValueChange = jest.fn();\n\n    it(\"should return the compatible `vm.selectRoot` based on props\", () => {\n        const onValueChange = jest.fn();\n\n        // `value`\n        {\n            const presenter = new SelectPresenter();\n            presenter.init({ onValueChange, value: \"Custom value\" });\n            expect(presenter.vm.selectRoot.value).toEqual(\"Custom value\");\n        }\n\n        {\n            // default: no props\n            const presenter = new SelectPresenter();\n            presenter.init({ onValueChange });\n            expect(presenter.vm.selectRoot.value).toEqual(\"\");\n        }\n    });\n\n    it(\"should return the compatible `vm.selectTrigger` based on props\", () => {\n        const onValueChange = jest.fn();\n\n        // `placeholder`\n        {\n            const presenter = new SelectPresenter();\n            presenter.init({ onValueChange, placeholder: \"Custom placeholder\" });\n            expect(presenter.vm.selectTrigger.placeholder).toEqual(\"Custom placeholder\");\n        }\n\n        // `displayResetAction`\n        {\n            const presenter = new SelectPresenter();\n            presenter.init({ onValueChange, displayResetAction: false });\n            expect(presenter.vm.selectTrigger.displayResetAction).toEqual(false);\n        }\n\n        {\n            // default: no props\n            const presenter = new SelectPresenter();\n            presenter.init({ onValueChange });\n            expect(presenter.vm.selectTrigger.placeholder).toEqual(\"Select an option\");\n            expect(presenter.vm.selectTrigger.hasValue).toEqual(false);\n        }\n    });\n\n    it(\"should return the compatible `vm.selectOptions` based on props\", () => {\n        // with `options` as string\n        {\n            const presenter = new SelectPresenter();\n            presenter.init({ onValueChange, options: [\"Option 1\", \"Option 2\"] });\n            expect(presenter.vm.selectOptions.options).toEqual([\n                {\n                    value: \"Option 1\",\n                    label: \"Option 1\",\n                    options: [],\n                    disabled: false,\n                    separator: false\n                },\n                {\n                    value: \"Option 2\",\n                    label: \"Option 2\",\n                    options: [],\n                    disabled: false,\n                    separator: false\n                }\n            ]);\n        }\n\n        // with `options` as formatted options\n        {\n            const presenter = new SelectPresenter();\n            presenter.init({\n                onValueChange,\n                options: [\n                    {\n                        value: \"option-1\",\n                        label: \"Option 1\"\n                    },\n                    {\n                        value: \"option-2\",\n                        label: \"Option 2\",\n                        options: [\n                            {\n                                value: \"option-3\",\n                                label: \"Option 3\",\n                                options: [{ value: \"option-4\", label: \"Option 4\" }]\n                            }\n                        ]\n                    },\n                    {\n                        value: \"option-5\",\n                        label: \"Option 5\",\n                        disabled: true\n                    },\n                    {\n                        value: \"option-6\",\n                        label: \"Option 6\",\n                        separator: true\n                    }\n                ]\n            });\n            expect(presenter.vm.selectOptions.options).toEqual([\n                {\n                    value: \"option-1\",\n                    label: \"Option 1\",\n                    options: [],\n                    disabled: false,\n                    separator: false\n                },\n                {\n                    value: \"option-2\",\n                    label: \"Option 2\",\n                    options: [\n                        {\n                            value: \"option-3\",\n                            label: \"Option 3\",\n                            options: [\n                                {\n                                    value: \"option-4\",\n                                    label: \"Option 4\",\n                                    options: [],\n                                    disabled: false,\n                                    separator: false\n                                }\n                            ],\n                            disabled: false,\n                            separator: false\n                        }\n                    ],\n                    disabled: false,\n                    separator: false\n                },\n                {\n                    value: \"option-5\",\n                    label: \"Option 5\",\n                    options: [],\n                    disabled: true,\n                    separator: false\n                },\n                {\n                    value: \"option-6\",\n                    label: \"Option 6\",\n                    options: [],\n                    disabled: false,\n                    separator: true\n                }\n            ]);\n        }\n    });\n\n    it(\"should call `onValueChange` callback when `changeValue` is called\", () => {\n        const presenter = new SelectPresenter();\n        presenter.init({ onValueChange, value: \"value\" });\n        presenter.changeValue(\"value-2\");\n        expect(onValueChange).toHaveBeenCalledWith(\"value-2\");\n    });\n\n    it(\"should call `onValueChange` and `onValueReset` callbacks when `resetValue` is called\", () => {\n        const onValueReset = jest.fn();\n        const presenter = new SelectPresenter();\n        presenter.init({ onValueChange, onValueReset, value: \"value\" });\n        presenter.resetValue();\n        expect(onValueChange).toHaveBeenCalledWith(\"\");\n        expect(onValueReset).toHaveBeenCalled();\n    });\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["it","describe","expect","vi","SelectPresenter","onValueChange","fn","presenter","init","value","vm","selectRoot","toEqual","placeholder","selectTrigger","displayResetAction","hasValue","options","selectOptions","label","disabled","separator","changeValue","toHaveBeenCalledWith","onValueReset","resetValue","toHaveBeenCalled"],"sources":["SelectPresenter.test.ts"],"sourcesContent":["import { it, describe, expect, vi } from \"vitest\";\nimport { SelectPresenter } from \"./SelectPresenter.js\";\n\ndescribe(\"SelectPresenter\", () => {\n    const onValueChange = vi.fn();\n\n    it(\"should return the compatible `vm.selectRoot` based on props\", () => {\n        const onValueChange = vi.fn();\n\n        // `value`\n        {\n            const presenter = new SelectPresenter();\n            presenter.init({ onValueChange, value: \"Custom value\" });\n            expect(presenter.vm.selectRoot.value).toEqual(\"Custom value\");\n        }\n\n        {\n            // default: no props\n            const presenter = new SelectPresenter();\n            presenter.init({ onValueChange });\n            expect(presenter.vm.selectRoot.value).toEqual(\"\");\n        }\n    });\n\n    it(\"should return the compatible `vm.selectTrigger` based on props\", () => {\n        const onValueChange = vi.fn();\n\n        // `placeholder`\n        {\n            const presenter = new SelectPresenter();\n            presenter.init({ onValueChange, placeholder: \"Custom placeholder\" });\n            expect(presenter.vm.selectTrigger.placeholder).toEqual(\"Custom placeholder\");\n        }\n\n        // `displayResetAction`\n        {\n            const presenter = new SelectPresenter();\n            presenter.init({ onValueChange, displayResetAction: false });\n            expect(presenter.vm.selectTrigger.displayResetAction).toEqual(false);\n        }\n\n        {\n            // default: no props\n            const presenter = new SelectPresenter();\n            presenter.init({ onValueChange });\n            expect(presenter.vm.selectTrigger.placeholder).toEqual(\"Select an option\");\n            expect(presenter.vm.selectTrigger.hasValue).toEqual(false);\n        }\n    });\n\n    it(\"should return the compatible `vm.selectOptions` based on props\", () => {\n        // with `options` as string\n        {\n            const presenter = new SelectPresenter();\n            presenter.init({ onValueChange, options: [\"Option 1\", \"Option 2\"] });\n            expect(presenter.vm.selectOptions.options).toEqual([\n                {\n                    value: \"Option 1\",\n                    label: \"Option 1\",\n                    options: [],\n                    disabled: false,\n                    separator: false\n                },\n                {\n                    value: \"Option 2\",\n                    label: \"Option 2\",\n                    options: [],\n                    disabled: false,\n                    separator: false\n                }\n            ]);\n        }\n\n        // with `options` as formatted options\n        {\n            const presenter = new SelectPresenter();\n            presenter.init({\n                onValueChange,\n                options: [\n                    {\n                        value: \"option-1\",\n                        label: \"Option 1\"\n                    },\n                    {\n                        value: \"option-2\",\n                        label: \"Option 2\",\n                        options: [\n                            {\n                                value: \"option-3\",\n                                label: \"Option 3\",\n                                options: [{ value: \"option-4\", label: \"Option 4\" }]\n                            }\n                        ]\n                    },\n                    {\n                        value: \"option-5\",\n                        label: \"Option 5\",\n                        disabled: true\n                    },\n                    {\n                        value: \"option-6\",\n                        label: \"Option 6\",\n                        separator: true\n                    }\n                ]\n            });\n            expect(presenter.vm.selectOptions.options).toEqual([\n                {\n                    value: \"option-1\",\n                    label: \"Option 1\",\n                    options: [],\n                    disabled: false,\n                    separator: false\n                },\n                {\n                    value: \"option-2\",\n                    label: \"Option 2\",\n                    options: [\n                        {\n                            value: \"option-3\",\n                            label: \"Option 3\",\n                            options: [\n                                {\n                                    value: \"option-4\",\n                                    label: \"Option 4\",\n                                    options: [],\n                                    disabled: false,\n                                    separator: false\n                                }\n                            ],\n                            disabled: false,\n                            separator: false\n                        }\n                    ],\n                    disabled: false,\n                    separator: false\n                },\n                {\n                    value: \"option-5\",\n                    label: \"Option 5\",\n                    options: [],\n                    disabled: true,\n                    separator: false\n                },\n                {\n                    value: \"option-6\",\n                    label: \"Option 6\",\n                    options: [],\n                    disabled: false,\n                    separator: true\n                }\n            ]);\n        }\n    });\n\n    it(\"should call `onValueChange` callback when `changeValue` is called\", () => {\n        const presenter = new SelectPresenter();\n        presenter.init({ onValueChange, value: \"value\" });\n        presenter.changeValue(\"value-2\");\n        expect(onValueChange).toHaveBeenCalledWith(\"value-2\");\n    });\n\n    it(\"should call `onValueChange` and `onValueReset` callbacks when `resetValue` is called\", () => {\n        const onValueReset = vi.fn();\n        const presenter = new SelectPresenter();\n        presenter.init({ onValueChange, onValueReset, value: \"value\" });\n        presenter.resetValue();\n        expect(onValueChange).toHaveBeenCalledWith(\"\");\n        expect(onValueReset).toHaveBeenCalled();\n    });\n});\n"],"mappings":"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","ignoreList":[]}

package/Select/primitives/presenters/index.d.ts

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

package/Select/primitives/presenters/index.js

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

package/Select/primitives/presenters/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SelectPresenter\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SelectPresenter.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Select/primitives/useSelect.d.ts

@@ -1,4 +1,4 @@
-import type { SelectPrimitiveProps } from "./SelectPrimitive";
+import type { SelectPrimitiveProps } from "./SelectPrimitive.js";
 export declare const useSelect: (props: SelectPrimitiveProps) => {
     vm: {
         selectRoot: {
@@ -10,9 +10,9 @@ export declare const useSelect: (props: SelectPrimitiveProps) => {
             displayResetAction: boolean;
         };
         selectOptions: {
-            options: import("..").SelectOptionFormatted[];
+            options: import("../index.js").SelectOptionFormatted[];
         };
     };
-    changeValue: (value?: string | undefined) => void;
+    changeValue: (value?: string) => void;
     resetValue: () => void;
 };

package/Select/primitives/useSelect.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
-import { SelectPresenter } from "./presenters/SelectPresenter";
+import { SelectPresenter } from "./presenters/SelectPresenter.js";
 export const useSelect = props => {
   const params = useMemo(() => ({
     options: props.options,

package/Select/primitives/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","autorun","SelectPresenter","useSelect","props","params","options","value","placeholder","displayResetAction","onValueChange","onChange","onValueReset","presenter","vm","setVm","init","changeValue","resetValue"],"sources":["useSelect.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { SelectPresenterParams } from \"./presenters/SelectPresenter\";\nimport { SelectPresenter } from \"./presenters/SelectPresenter\";\nimport type { SelectPrimitiveProps } from \"./SelectPrimitive\";\n\nexport const useSelect = (props: SelectPrimitiveProps) => {\n    const params: SelectPresenterParams = useMemo(\n        () => ({\n            options: props.options,\n            value: props.value,\n            placeholder: props.placeholder,\n            displayResetAction: props.displayResetAction,\n            onValueChange: props.onChange,\n            onValueReset: props.onValueReset\n        }),\n        [\n            props.options,\n            props.value,\n            props.placeholder,\n            props.displayResetAction,\n            props.onChange,\n            props.onValueReset\n        ]\n    );\n\n    const presenter = useMemo(() => {\n        return new SelectPresenter();\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        changeValue: presenter.changeValue,\n        resetValue: presenter.resetValue\n    };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAE9B,SAASC,eAAe;AAGxB,OAAO,MAAMC,SAAS,GAAIC,KAA2B,IAAK;EACtD,MAAMC,MAA6B,GAAGN,OAAO,CACzC,OAAO;IACHO,OAAO,EAAEF,KAAK,CAACE,OAAO;IACtBC,KAAK,EAAEH,KAAK,CAACG,KAAK;IAClBC,WAAW,EAAEJ,KAAK,CAACI,WAAW;IAC9BC,kBAAkB,EAAEL,KAAK,CAACK,kBAAkB;IAC5CC,aAAa,EAAEN,KAAK,CAACO,QAAQ;IAC7BC,YAAY,EAAER,KAAK,CAACQ;EACxB,CAAC,CAAC,EACF,CACIR,KAAK,CAACE,OAAO,EACbF,KAAK,CAACG,KAAK,EACXH,KAAK,CAACI,WAAW,EACjBJ,KAAK,CAACK,kBAAkB,EACxBL,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACQ,YAAY,CAE1B,CAAC;EAED,MAAMC,SAAS,GAAGd,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIG,eAAe,CAAC,CAAC;EAChC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACY,EAAE,EAAEC,KAAK,CAAC,GAAGf,QAAQ,CAACa,SAAS,CAACC,EAAE,CAAC;EAE1ChB,SAAS,CAAC,MAAM;IACZe,SAAS,CAACG,IAAI,CAACX,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,EAAEQ,SAAS,CAAC,CAAC;EAEvBf,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBc,KAAK,CAACF,SAAS,CAACC,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACD,SAAS,CAAC,CAAC;EAEf,OAAO;IACHC,EAAE;IACFG,WAAW,EAAEJ,SAAS,CAACI,WAAW;IAClCC,UAAU,EAAEL,SAAS,CAACK;EAC1B,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useMemo","useState","autorun","SelectPresenter","useSelect","props","params","options","value","placeholder","displayResetAction","onValueChange","onChange","onValueReset","presenter","vm","setVm","init","changeValue","resetValue"],"sources":["useSelect.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { SelectPresenterParams } from \"./presenters/SelectPresenter.js\";\nimport { SelectPresenter } from \"./presenters/SelectPresenter.js\";\nimport type { SelectPrimitiveProps } from \"./SelectPrimitive.js\";\n\nexport const useSelect = (props: SelectPrimitiveProps) => {\n    const params: SelectPresenterParams = useMemo(\n        () => ({\n            options: props.options,\n            value: props.value,\n            placeholder: props.placeholder,\n            displayResetAction: props.displayResetAction,\n            onValueChange: props.onChange,\n            onValueReset: props.onValueReset\n        }),\n        [\n            props.options,\n            props.value,\n            props.placeholder,\n            props.displayResetAction,\n            props.onChange,\n            props.onValueReset\n        ]\n    );\n\n    const presenter = useMemo(() => {\n        return new SelectPresenter();\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        changeValue: presenter.changeValue,\n        resetValue: presenter.resetValue\n    };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAE9B,SAASC,eAAe;AAGxB,OAAO,MAAMC,SAAS,GAAIC,KAA2B,IAAK;EACtD,MAAMC,MAA6B,GAAGN,OAAO,CACzC,OAAO;IACHO,OAAO,EAAEF,KAAK,CAACE,OAAO;IACtBC,KAAK,EAAEH,KAAK,CAACG,KAAK;IAClBC,WAAW,EAAEJ,KAAK,CAACI,WAAW;IAC9BC,kBAAkB,EAAEL,KAAK,CAACK,kBAAkB;IAC5CC,aAAa,EAAEN,KAAK,CAACO,QAAQ;IAC7BC,YAAY,EAAER,KAAK,CAACQ;EACxB,CAAC,CAAC,EACF,CACIR,KAAK,CAACE,OAAO,EACbF,KAAK,CAACG,KAAK,EACXH,KAAK,CAACI,WAAW,EACjBJ,KAAK,CAACK,kBAAkB,EACxBL,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACQ,YAAY,CAE1B,CAAC;EAED,MAAMC,SAAS,GAAGd,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIG,eAAe,CAAC,CAAC;EAChC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACY,EAAE,EAAEC,KAAK,CAAC,GAAGf,QAAQ,CAACa,SAAS,CAACC,EAAE,CAAC;EAE1ChB,SAAS,CAAC,MAAM;IACZe,SAAS,CAACG,IAAI,CAACX,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,EAAEQ,SAAS,CAAC,CAAC;EAEvBf,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBc,KAAK,CAACF,SAAS,CAACC,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACD,SAAS,CAAC,CAAC;EAEf,OAAO;IACHC,EAAE;IACFG,WAAW,EAAEJ,SAAS,CAACI,WAAW;IAClCC,UAAU,EAAEL,SAAS,CAACK;EAC1B,CAAC;AACL,CAAC","ignoreList":[]}

package/Separator/Separator.d.ts

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

package/Separator/Separator.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Separator as SeparatorPrimitive } from "radix-ui";
-import { cva, makeDecoratable } from "../utils";
-const separatorVariants = cva("wby-shrink-0", {
+import { cva, makeDecoratable } from "../utils.js";
+const separatorVariants = cva("shrink-0", {
   variants: {
     margin: {
       none: "",
@@ -12,57 +12,58 @@ const separatorVariants = cva("wby-shrink-0", {
       xl: ""
     },
     orientation: {
-      horizontal: "wby-h-px wby-w-full",
-      vertical: "wby-h-full wby-w-px"
+      horizontal: "h-px w-full",
+      vertical: "h-full w-px"
     },
     variant: {
-      transparent: "wby-transparent",
-      base: "wby-bg-white",
-      dimmed: "wby-bg-neutral-dimmed",
-      muted: "wby-bg-neutral-muted",
-      strong: "wby-bg-neutral-strong"
+      transparent: "transparent",
+      base: "bg-white",
+      dimmed: "bg-neutral-dimmed",
+      muted: "bg-neutral-muted",
+      strong: "bg-neutral-strong",
+      accent: "bg-primary"
     }
   },
   compoundVariants: [{
     orientation: "horizontal",
     margin: "xs",
-    className: "wby-my-px"
+    className: "my-px"
   }, {
     orientation: "horizontal",
     margin: "sm",
-    className: "wby-my-xxs"
+    className: "my-xxs"
   }, {
     orientation: "horizontal",
     margin: "md",
-    className: "wby-my-xs"
+    className: "my-xs"
   }, {
     orientation: "horizontal",
     margin: "lg",
-    className: "wby-my-sm"
+    className: "my-sm"
   }, {
     orientation: "horizontal",
     margin: "xl",
-    className: "wby-my-md"
+    className: "my-md"
   }, {
     orientation: "vertical",
     margin: "xs",
-    className: "wby-mx-px"
+    className: "mx-px"
   }, {
     orientation: "vertical",
     margin: "sm",
-    className: "wby-mx-xxs"
+    className: "mx-xxs"
   }, {
     orientation: "vertical",
     margin: "md",
-    className: "wby-mx-xs"
+    className: "mx-xs"
   }, {
     orientation: "vertical",
     margin: "lg",
-    className: "wby-mx-sm"
+    className: "mx-sm"
   }, {
     orientation: "vertical",
     margin: "xl",
-    className: "wby-mx-md"
+    className: "mx-md"
   }],
   defaultVariants: {
     orientation: "horizontal",
@@ -72,21 +73,74 @@ const separatorVariants = cva("wby-shrink-0", {
 });
 const SeparatorBase = ({
   className,
-  orientation,
+  orientation = "horizontal",
   margin,
   variant,
   decorative = true,
+  children,
+  labelPosition = "middle",
   ...props
-}) => /*#__PURE__*/React.createElement(SeparatorPrimitive.Root, Object.assign({
-  decorative: decorative,
-  orientation: orientation,
-  className: separatorVariants({
+}) => {
+  // If no children, render simple separator
+  if (!children) {
+    return /*#__PURE__*/React.createElement(SeparatorPrimitive.Root, Object.assign({
+      decorative: decorative,
+      orientation: orientation,
+      className: separatorVariants({
+        orientation,
+        margin,
+        variant,
+        className
+      })
+    }, props));
+  }
+
+  // With children, render separator with label
+  const isHorizontal = orientation === "horizontal";
+  const containerClass = isHorizontal ? "flex items-center w-full" : "flex flex-col items-center h-full";
+  const separatorClass = separatorVariants({
     orientation,
-    margin,
-    variant,
-    className
-  })
-}, props));
+    variant
+  });
+  const textColor = variant === "accent" ? "text-accent-primary" : "text-neutral-primary";
+  const baseLabelClass = `${textColor} text-md font-semibold`;
+  const renderContent = () => {
+    if (labelPosition === "start") {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: `${baseLabelClass} pr-md`
+      }, children), /*#__PURE__*/React.createElement(SeparatorPrimitive.Root, Object.assign({
+        decorative: decorative,
+        orientation: orientation,
+        className: `${separatorClass} flex-1`
+      }, props)));
+    }
+    if (labelPosition === "end") {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SeparatorPrimitive.Root, Object.assign({
+        decorative: decorative,
+        orientation: orientation,
+        className: `${separatorClass} flex-1`
+      }, props)), /*#__PURE__*/React.createElement("span", {
+        className: `${baseLabelClass} pl-md`
+      }, children));
+    }
+
+    // middle (default)
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SeparatorPrimitive.Root, Object.assign({
+      decorative: decorative,
+      orientation: orientation,
+      className: `${separatorClass} flex-1`
+    }, props)), /*#__PURE__*/React.createElement("span", {
+      className: `${baseLabelClass} px-md`
+    }, children), /*#__PURE__*/React.createElement(SeparatorPrimitive.Root, Object.assign({
+      decorative: decorative,
+      orientation: orientation,
+      className: `${separatorClass} flex-1`
+    }, props)));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${containerClass} ${className || ""}`
+  }, renderContent());
+};
 const Separator = makeDecoratable("Separator", SeparatorBase);
 export { Separator };
 

package/Separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Separator","SeparatorPrimitive","cva","makeDecoratable","separatorVariants","variants","margin","none","xs","sm","md","lg","xl","orientation","horizontal","vertical","variant","transparent","base","dimmed","muted","strong","compoundVariants","className","defaultVariants","SeparatorBase","decorative","props","createElement","Root","Object","assign"],"sources":["Separator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"radix-ui\";\nimport { cva, type VariantProps, makeDecoratable } from \"~/utils\";\n\nconst separatorVariants = cva(\"wby-shrink-0\", {\n    variants: {\n        margin: {\n            none: \"\",\n            xs: \"\",\n            sm: \"\",\n            md: \"\",\n            lg: \"\",\n            xl: \"\"\n        },\n        orientation: {\n            horizontal: \"wby-h-px wby-w-full\",\n            vertical: \"wby-h-full wby-w-px\"\n        },\n        variant: {\n            transparent: \"wby-transparent\",\n            base: \"wby-bg-white\",\n            dimmed: \"wby-bg-neutral-dimmed\",\n            muted: \"wby-bg-neutral-muted\",\n            strong: \"wby-bg-neutral-strong\"\n        }\n    },\n    compoundVariants: [\n        { orientation: \"horizontal\", margin: \"xs\", className: \"wby-my-px\" },\n        { orientation: \"horizontal\", margin: \"sm\", className: \"wby-my-xxs\" },\n        { orientation: \"horizontal\", margin: \"md\", className: \"wby-my-xs\" },\n        { orientation: \"horizontal\", margin: \"lg\", className: \"wby-my-sm\" },\n        { orientation: \"horizontal\", margin: \"xl\", className: \"wby-my-md\" },\n        { orientation: \"vertical\", margin: \"xs\", className: \"wby-mx-px\" },\n        { orientation: \"vertical\", margin: \"sm\", className: \"wby-mx-xxs\" },\n        { orientation: \"vertical\", margin: \"md\", className: \"wby-mx-xs\" },\n        { orientation: \"vertical\", margin: \"lg\", className: \"wby-mx-sm\" },\n        { orientation: \"vertical\", margin: \"xl\", className: \"wby-mx-md\" }\n    ],\n    defaultVariants: {\n        orientation: \"horizontal\",\n        variant: \"dimmed\",\n        margin: \"none\"\n    }\n});\n\ntype SeparatorProps = SeparatorPrimitive.SeparatorProps & VariantProps<typeof separatorVariants>;\n\nconst SeparatorBase = ({\n    className,\n    orientation,\n    margin,\n    variant,\n    decorative = true,\n    ...props\n}: SeparatorProps) => (\n    <SeparatorPrimitive.Root\n        decorative={decorative}\n        orientation={orientation}\n        className={separatorVariants({ orientation, margin, variant, className })}\n        {...props}\n    />\n);\n\nconst Separator = makeDecoratable(\"Separator\", SeparatorBase);\n\nexport { Separator, type SeparatorProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,IAAIC,kBAAkB,QAAQ,UAAU;AAC1D,SAASC,GAAG,EAAqBC,eAAe;AAEhD,MAAMC,iBAAiB,GAAGF,GAAG,CAAC,cAAc,EAAE;EAC1CG,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,IAAI,EAAE,EAAE;MACRC,EAAE,EAAE,EAAE;MACNC,EAAE,EAAE,EAAE;MACNC,EAAE,EAAE,EAAE;MACNC,EAAE,EAAE,EAAE;MACNC,EAAE,EAAE;IACR,CAAC;IACDC,WAAW,EAAE;MACTC,UAAU,EAAE,qBAAqB;MACjCC,QAAQ,EAAE;IACd,CAAC;IACDC,OAAO,EAAE;MACLC,WAAW,EAAE,iBAAiB;MAC9BC,IAAI,EAAE,cAAc;MACpBC,MAAM,EAAE,uBAAuB;MAC/BC,KAAK,EAAE,sBAAsB;MAC7BC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,gBAAgB,EAAE,CACd;IAAET,WAAW,EAAE,YAAY;IAAEP,MAAM,EAAE,IAAI;IAAEiB,SAAS,EAAE;EAAY,CAAC,EACnE;IAAEV,WAAW,EAAE,YAAY;IAAEP,MAAM,EAAE,IAAI;IAAEiB,SAAS,EAAE;EAAa,CAAC,EACpE;IAAEV,WAAW,EAAE,YAAY;IAAEP,MAAM,EAAE,IAAI;IAAEiB,SAAS,EAAE;EAAY,CAAC,EACnE;IAAEV,WAAW,EAAE,YAAY;IAAEP,MAAM,EAAE,IAAI;IAAEiB,SAAS,EAAE;EAAY,CAAC,EACnE;IAAEV,WAAW,EAAE,YAAY;IAAEP,MAAM,EAAE,IAAI;IAAEiB,SAAS,EAAE;EAAY,CAAC,EACnE;IAAEV,WAAW,EAAE,UAAU;IAAEP,MAAM,EAAE,IAAI;IAAEiB,SAAS,EAAE;EAAY,CAAC,EACjE;IAAEV,WAAW,EAAE,UAAU;IAAEP,MAAM,EAAE,IAAI;IAAEiB,SAAS,EAAE;EAAa,CAAC,EAClE;IAAEV,WAAW,EAAE,UAAU;IAAEP,MAAM,EAAE,IAAI;IAAEiB,SAAS,EAAE;EAAY,CAAC,EACjE;IAAEV,WAAW,EAAE,UAAU;IAAEP,MAAM,EAAE,IAAI;IAAEiB,SAAS,EAAE;EAAY,CAAC,EACjE;IAAEV,WAAW,EAAE,UAAU;IAAEP,MAAM,EAAE,IAAI;IAAEiB,SAAS,EAAE;EAAY,CAAC,CACpE;EACDC,eAAe,EAAE;IACbX,WAAW,EAAE,YAAY;IACzBG,OAAO,EAAE,QAAQ;IACjBV,MAAM,EAAE;EACZ;AACJ,CAAC,CAAC;AAIF,MAAMmB,aAAa,GAAGA,CAAC;EACnBF,SAAS;EACTV,WAAW;EACXP,MAAM;EACNU,OAAO;EACPU,UAAU,GAAG,IAAI;EACjB,GAAGC;AACS,CAAC,kBACb5B,KAAA,CAAA6B,aAAA,CAAC3B,kBAAkB,CAAC4B,IAAI,EAAAC,MAAA,CAAAC,MAAA;EACpBL,UAAU,EAAEA,UAAW;EACvBb,WAAW,EAAEA,WAAY;EACzBU,SAAS,EAAEnB,iBAAiB,CAAC;IAAES,WAAW;IAAEP,MAAM;IAAEU,OAAO;IAAEO;EAAU,CAAC;AAAE,GACtEI,KAAK,CACZ,CACJ;AAED,MAAM3B,SAAS,GAAGG,eAAe,CAAC,WAAW,EAAEsB,aAAa,CAAC;AAE7D,SAASzB,SAAS","ignoreList":[]}
+{"version":3,"names":["React","Separator","SeparatorPrimitive","cva","makeDecoratable","separatorVariants","variants","margin","none","xs","sm","md","lg","xl","orientation","horizontal","vertical","variant","transparent","base","dimmed","muted","strong","accent","compoundVariants","className","defaultVariants","SeparatorBase","decorative","children","labelPosition","props","createElement","Root","Object","assign","isHorizontal","containerClass","separatorClass","textColor","baseLabelClass","renderContent","Fragment"],"sources":["Separator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"radix-ui\";\nimport { cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst separatorVariants = cva(\"shrink-0\", {\n    variants: {\n        margin: {\n            none: \"\",\n            xs: \"\",\n            sm: \"\",\n            md: \"\",\n            lg: \"\",\n            xl: \"\"\n        },\n        orientation: {\n            horizontal: \"h-px w-full\",\n            vertical: \"h-full w-px\"\n        },\n        variant: {\n            transparent: \"transparent\",\n            base: \"bg-white\",\n            dimmed: \"bg-neutral-dimmed\",\n            muted: \"bg-neutral-muted\",\n            strong: \"bg-neutral-strong\",\n            accent: \"bg-primary\"\n        }\n    },\n    compoundVariants: [\n        { orientation: \"horizontal\", margin: \"xs\", className: \"my-px\" },\n        { orientation: \"horizontal\", margin: \"sm\", className: \"my-xxs\" },\n        { orientation: \"horizontal\", margin: \"md\", className: \"my-xs\" },\n        { orientation: \"horizontal\", margin: \"lg\", className: \"my-sm\" },\n        { orientation: \"horizontal\", margin: \"xl\", className: \"my-md\" },\n        { orientation: \"vertical\", margin: \"xs\", className: \"mx-px\" },\n        { orientation: \"vertical\", margin: \"sm\", className: \"mx-xxs\" },\n        { orientation: \"vertical\", margin: \"md\", className: \"mx-xs\" },\n        { orientation: \"vertical\", margin: \"lg\", className: \"mx-sm\" },\n        { orientation: \"vertical\", margin: \"xl\", className: \"mx-md\" }\n    ],\n    defaultVariants: {\n        orientation: \"horizontal\",\n        variant: \"dimmed\",\n        margin: \"none\"\n    }\n});\n\ntype SeparatorPosition = \"start\" | \"middle\" | \"end\";\n\ntype SeparatorProps = Omit<SeparatorPrimitive.SeparatorProps, \"children\"> &\n    VariantProps<typeof separatorVariants> & {\n        children?: React.ReactNode;\n        labelPosition?: SeparatorPosition;\n    };\n\nconst SeparatorBase = ({\n    className,\n    orientation = \"horizontal\",\n    margin,\n    variant,\n    decorative = true,\n    children,\n    labelPosition = \"middle\",\n    ...props\n}: SeparatorProps) => {\n    // If no children, render simple separator\n    if (!children) {\n        return (\n            <SeparatorPrimitive.Root\n                decorative={decorative}\n                orientation={orientation}\n                className={separatorVariants({ orientation, margin, variant, className })}\n                {...props}\n            />\n        );\n    }\n\n    // With children, render separator with label\n    const isHorizontal = orientation === \"horizontal\";\n    const containerClass = isHorizontal\n        ? \"flex items-center w-full\"\n        : \"flex flex-col items-center h-full\";\n    const separatorClass = separatorVariants({ orientation, variant });\n    const textColor = variant === \"accent\" ? \"text-accent-primary\" : \"text-neutral-primary\";\n    const baseLabelClass = `${textColor} text-md font-semibold`;\n\n    const renderContent = () => {\n        if (labelPosition === \"start\") {\n            return (\n                <>\n                    <span className={`${baseLabelClass} pr-md`}>{children}</span>\n                    <SeparatorPrimitive.Root\n                        decorative={decorative}\n                        orientation={orientation}\n                        className={`${separatorClass} flex-1`}\n                        {...props}\n                    />\n                </>\n            );\n        }\n\n        if (labelPosition === \"end\") {\n            return (\n                <>\n                    <SeparatorPrimitive.Root\n                        decorative={decorative}\n                        orientation={orientation}\n                        className={`${separatorClass} flex-1`}\n                        {...props}\n                    />\n                    <span className={`${baseLabelClass} pl-md`}>{children}</span>\n                </>\n            );\n        }\n\n        // middle (default)\n        return (\n            <>\n                <SeparatorPrimitive.Root\n                    decorative={decorative}\n                    orientation={orientation}\n                    className={`${separatorClass} flex-1`}\n                    {...props}\n                />\n                <span className={`${baseLabelClass} px-md`}>{children}</span>\n                <SeparatorPrimitive.Root\n                    decorative={decorative}\n                    orientation={orientation}\n                    className={`${separatorClass} flex-1`}\n                    {...props}\n                />\n            </>\n        );\n    };\n\n    return <div className={`${containerClass} ${className || \"\"}`}>{renderContent()}</div>;\n};\n\nconst Separator = makeDecoratable(\"Separator\", SeparatorBase);\n\nexport { Separator, type SeparatorProps };\n"],"mappings":"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","ignoreList":[]}

package/Separator/Separator.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as SeparatorStories from './Separator.stories';
 
@@ -17,9 +17,9 @@ import { Separator, Heading, Text } from "@webiny/admin-ui";
 const SeparatorExample = () => {
     return (
         <div>
-            <div className="wby-space-y-1">
+            <div className="space-y-1">
                 <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-text-neutral-strong"}>
+                <Text size="sm" className={"text-neutral-strong"}>
                     {"This is a short description here"}
                 </Text>
             </div>
@@ -29,7 +29,7 @@ const SeparatorExample = () => {
                 orientation="horizontal"
                 decorative={true}
             />
-            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+            <div className="flex items-center h-6 text-sm">
                 <Text>{"This is text 1."}</Text>
             </div>
         </div>
@@ -61,9 +61,9 @@ import { Separator, Heading, Text } from "@webiny/admin-ui";
 const SeparatorExample = () => {
     return (
         <div>
-            <div className="wby-space-y-1">
+            <div className="space-y-1">
                 <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-text-neutral-strong"}>
+                <Text size="sm" className={"text-neutral-strong"}>
                     {"This is a short description here"}
                 </Text>
             </div>
@@ -73,7 +73,7 @@ const SeparatorExample = () => {
                 orientation="horizontal"
                 decorative={true}
             />
-            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+            <div className="flex items-center h-6 text-sm">
                 <Text>{"This is text 1."}</Text>
             </div>
         </div>
@@ -97,14 +97,14 @@ import { Separator, Heading, Text } from "@webiny/admin-ui";
 const DefaultSeparatorExample = () => {
     return (
         <div>
-            <div className="wby-space-y-1">
+            <div className="space-y-1">
                 <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-text-neutral-strong"}>
+                <Text size="sm" className={"text-neutral-strong"}>
                     {"This is a short description here"}
                 </Text>
             </div>
             <Separator margin="lg" variant="subtle" />
-            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+            <div className="flex items-center h-6 text-sm">
                 <Text>{"This is text 1."}</Text>
             </div>
         </div>
@@ -125,14 +125,14 @@ import { Separator, Heading, Text } from "@webiny/admin-ui";
 const VerticalAndHorizontalExample = () => {
     return (
         <div>
-            <div className="wby-space-y-1">
+            <div className="space-y-1">
                 <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-text-neutral-strong"}>
+                <Text size="sm" className={"text-neutral-strong"}>
                     {"This is a short description here"}
                 </Text>
             </div>
             <Separator margin={"lg"} />
-            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+            <div className="flex items-center h-6 text-sm">
                 <Text>{"This is text 1."}</Text>
                 <Separator orientation="vertical" margin={"lg"} />
                 <Text>{"This is text 2."}</Text>
@@ -157,14 +157,14 @@ import { Separator, Heading, Text } from "@webiny/admin-ui";
 const HorizontalOrientationExample = () => {
     return (
         <div>
-            <div className="wby-space-y-1">
+            <div className="space-y-1">
                 <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-text-neutral-strong"}>
+                <Text size="sm" className={"text-neutral-strong"}>
                     {"This is a short description here"}
                 </Text>
             </div>
             <Separator margin={"lg"} orientation="horizontal" />
-            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+            <div className="flex items-center h-6 text-sm">
                 <Text>{"This is text 1."}</Text>
             </div>
         </div>
@@ -184,7 +184,7 @@ import { Separator, Text } from "@webiny/admin-ui";
 
 const VerticalOrientationExample = () => {
     return (
-        <div className="wby-flex wby-justify-center wby-h-6 wby-text-sm">
+        <div className="flex justify-center h-6 text-sm">
             <Text>{"This is text 1."}</Text>
             <Separator orientation="vertical" margin={"lg"} />
             <Text>{"This is text 2."}</Text>
@@ -208,14 +208,14 @@ import { Separator, Heading, Text } from "@webiny/admin-ui";
 const LessMarginExample = () => {
     return (
         <div>
-            <div className="wby-space-y-1">
+            <div className="space-y-1">
                 <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-text-neutral-strong"}>
+                <Text size="sm" className={"text-neutral-strong"}>
                     {"This is a short description here"}
                 </Text>
             </div>
             <Separator margin={"md"} />
-            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+            <div className="flex items-center h-6 text-sm">
                 <Text>{"This is text 1."}</Text>
                 <Separator orientation="vertical" margin={"md"} />
                 <Text>{"This is text 2."}</Text>
@@ -240,14 +240,14 @@ import { Separator, Heading, Text } from "@webiny/admin-ui";
 const MoreMarginExample = () => {
     return (
         <div>
-            <div className="wby-space-y-1">
+            <div className="space-y-1">
                 <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-text-neutral-strong"}>
+                <Text size="sm" className={"text-neutral-strong"}>
                     {"This is a short description here"}
                 </Text>
             </div>
             <Separator margin={"xl"} />
-            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
+            <div className="flex items-center h-6 text-sm">
                 <Text>{"This is text 1."}</Text>
                 <Separator orientation="vertical" margin={"xl"} />
                 <Text>{"This is text 2."}</Text>

package/Separator/Separator.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Separator } from "./Separator";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { Separator } from "./Separator.js";
 declare const meta: Meta<typeof Separator>;
 export default meta;
 type Story = StoryObj<typeof Separator>;
@@ -10,3 +10,13 @@ export declare const HorizontalOrientation: Story;
 export declare const VerticalOrientation: Story;
 export declare const LessMargin: Story;
 export declare const MoreMargin: Story;
+export declare const Transparent: Story;
+export declare const Base: Story;
+export declare const Muted: Story;
+export declare const Strong: Story;
+export declare const Accent: Story;
+export declare const AllVariants: Story;
+export declare const WithLabelMiddle: Story;
+export declare const WithLabelStart: Story;
+export declare const WithLabelEnd: Story;
+export declare const WithLabelVertical: Story;