@webiny/admin-ui 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

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-lg 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-lg 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,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as SeparatorStories from './Separator.stories';
+import * as SeparatorStories from "./Separator.stories";
 
 <Meta of={SeparatorStories} />
 
@@ -15,41 +15,36 @@ import React from "react";
 import { Separator, Heading, Text } from "@webiny/admin-ui";
 
 const SeparatorExample = () => {
-    return (
-        <div>
-            <div className="wby-space-y-1">
-                <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-text-neutral-strong"}>
-                    {"This is a short description here"}
-                </Text>
-            </div>
-            <Separator
-                margin="lg"
-                variant="subtle"
-                orientation="horizontal"
-                decorative={true}
-            />
-            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
-                <Text>{"This is text 1."}</Text>
-            </div>
-        </div>
-    );
-};
+return (
+
+<div>
+  <div className="space-y-1">
+    <Heading level={6}>{"This is a heading."}</Heading>
+    <Text size="sm" className={"text-neutral-strong"}>
+      {"This is a short description here"}
+    </Text>
+  </div>
+  <Separator margin="lg" variant="subtle" orientation="horizontal" decorative={true} />
+  <div className="flex items-center h-6 text-sm">
+    <Text>{"This is text 1."}</Text>
+  </div>
+</div>
+); };
 
 export default SeparatorExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Separator/Separator.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Separator/Separator.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={SeparatorStories.Documentation} />
@@ -59,31 +54,25 @@ import React from "react";
 import { Separator, Heading, Text } from "@webiny/admin-ui";
 
 const SeparatorExample = () => {
-    return (
-        <div>
-            <div className="wby-space-y-1">
-                <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-text-neutral-strong"}>
-                    {"This is a short description here"}
-                </Text>
-            </div>
-            <Separator
-                margin="lg"
-                variant="subtle"
-                orientation="horizontal"
-                decorative={true}
-            />
-            <div className="wby-flex wby-items-center wby-h-6 wby-text-sm">
-                <Text>{"This is text 1."}</Text>
-            </div>
-        </div>
-    );
+  return (
+    <div>
+      <div className="space-y-1">
+        <Heading level={6}>{"This is a heading."}</Heading>
+        <Text size="sm" className={"text-neutral-strong"}>
+          {"This is a short description here"}
+        </Text>
+      </div>
+      <Separator margin="lg" variant="subtle" orientation="horizontal" decorative={true} />
+      <div className="flex items-center h-6 text-sm">
+        <Text>{"This is text 1."}</Text>
+      </div>
+    </div>
+  );
 };
 
 export default SeparatorExample;
 ```
 
-
 ## Examples
 
 ### Default
@@ -95,21 +84,21 @@ import React from "react";
 import { Separator, Heading, Text } from "@webiny/admin-ui";
 
 const DefaultSeparatorExample = () => {
-    return (
-        <div>
-            <div className="wby-space-y-1">
-                <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-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">
-                <Text>{"This is text 1."}</Text>
-            </div>
-        </div>
-    );
-};
+return (
+
+<div>
+  <div className="space-y-1">
+    <Heading level={6}>{"This is a heading."}</Heading>
+    <Text size="sm" className={"text-neutral-strong"}>
+      {"This is a short description here"}
+    </Text>
+  </div>
+  <Separator margin="lg" variant="subtle" />
+  <div className="flex items-center h-6 text-sm">
+    <Text>{"This is text 1."}</Text>
+  </div>
+</div>
+); };
 
 export default DefaultSeparatorExample;
 ` } } />
@@ -123,25 +112,25 @@ import React from "react";
 import { Separator, Heading, Text } from "@webiny/admin-ui";
 
 const VerticalAndHorizontalExample = () => {
-    return (
-        <div>
-            <div className="wby-space-y-1">
-                <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-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">
-                <Text>{"This is text 1."}</Text>
-                <Separator orientation="vertical" margin={"lg"} />
-                <Text>{"This is text 2."}</Text>
-                <Separator orientation="vertical" margin={"lg"} />
-                <Text>{"This is text 3."}</Text>
-            </div>
-        </div>
-    );
-};
+return (
+
+<div>
+  <div className="space-y-1">
+    <Heading level={6}>{"This is a heading."}</Heading>
+    <Text size="sm" className={"text-neutral-strong"}>
+      {"This is a short description here"}
+    </Text>
+  </div>
+  <Separator margin={"lg"} />
+  <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>
+    <Separator orientation="vertical" margin={"lg"} />
+    <Text>{"This is text 3."}</Text>
+  </div>
+</div>
+); };
 
 export default VerticalAndHorizontalExample;
 ` } } />
@@ -155,21 +144,21 @@ import React from "react";
 import { Separator, Heading, Text } from "@webiny/admin-ui";
 
 const HorizontalOrientationExample = () => {
-    return (
-        <div>
-            <div className="wby-space-y-1">
-                <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-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">
-                <Text>{"This is text 1."}</Text>
-            </div>
-        </div>
-    );
-};
+return (
+
+<div>
+  <div className="space-y-1">
+    <Heading level={6}>{"This is a heading."}</Heading>
+    <Text size="sm" className={"text-neutral-strong"}>
+      {"This is a short description here"}
+    </Text>
+  </div>
+  <Separator margin={"lg"} orientation="horizontal" />
+  <div className="flex items-center h-6 text-sm">
+    <Text>{"This is text 1."}</Text>
+  </div>
+</div>
+); };
 
 export default HorizontalOrientationExample;
 ` } } />
@@ -183,16 +172,16 @@ import React from "react";
 import { Separator, Text } from "@webiny/admin-ui";
 
 const VerticalOrientationExample = () => {
-    return (
-        <div className="wby-flex wby-justify-center wby-h-6 wby-text-sm">
-            <Text>{"This is text 1."}</Text>
-            <Separator orientation="vertical" margin={"lg"} />
-            <Text>{"This is text 2."}</Text>
-            <Separator orientation="vertical" margin={"lg"} />
-            <Text>{"This is text 3."}</Text>
-        </div>
-    );
-};
+return (
+
+<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>
+  <Separator orientation="vertical" margin={"lg"} />
+  <Text>{"This is text 3."}</Text>
+</div>
+); };
 
 export default VerticalOrientationExample;
 ` } } />
@@ -206,25 +195,25 @@ import React from "react";
 import { Separator, Heading, Text } from "@webiny/admin-ui";
 
 const LessMarginExample = () => {
-    return (
-        <div>
-            <div className="wby-space-y-1">
-                <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-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">
-                <Text>{"This is text 1."}</Text>
-                <Separator orientation="vertical" margin={"md"} />
-                <Text>{"This is text 2."}</Text>
-                <Separator orientation="vertical" margin={"md"} />
-                <Text>{"This is text 3."}</Text>
-            </div>
-        </div>
-    );
-};
+return (
+
+<div>
+  <div className="space-y-1">
+    <Heading level={6}>{"This is a heading."}</Heading>
+    <Text size="sm" className={"text-neutral-strong"}>
+      {"This is a short description here"}
+    </Text>
+  </div>
+  <Separator margin={"md"} />
+  <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>
+    <Separator orientation="vertical" margin={"md"} />
+    <Text>{"This is text 3."}</Text>
+  </div>
+</div>
+); };
 
 export default LessMarginExample;
 ` } } />
@@ -238,25 +227,25 @@ import React from "react";
 import { Separator, Heading, Text } from "@webiny/admin-ui";
 
 const MoreMarginExample = () => {
-    return (
-        <div>
-            <div className="wby-space-y-1">
-                <Heading level={6}>{"This is a heading."}</Heading>
-                <Text size="sm" className={"wby-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">
-                <Text>{"This is text 1."}</Text>
-                <Separator orientation="vertical" margin={"xl"} />
-                <Text>{"This is text 2."}</Text>
-                <Separator orientation="vertical" margin={"xl"} />
-                <Text>{"This is text 3."}</Text>
-            </div>
-        </div>
-    );
-};
+return (
+
+<div>
+  <div className="space-y-1">
+    <Heading level={6}>{"This is a heading."}</Heading>
+    <Text size="sm" className={"text-neutral-strong"}>
+      {"This is a short description here"}
+    </Text>
+  </div>
+  <Separator margin={"xl"} />
+  <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>
+    <Separator orientation="vertical" margin={"xl"} />
+    <Text>{"This is text 3."}</Text>
+  </div>
+</div>
+); };
 
 export default MoreMarginExample;
 ` } } />

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;