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

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;

package/Separator/Separator.stories.js

@@ -1,13 +1,13 @@
-import { Separator } from "./Separator";
+import { Separator } from "./Separator.js";
 import React from "react";
-import { Heading } from "../Heading";
-import { Text } from "../Text";
+import { Heading } from "../Heading/index.js";
+import { Text } from "../Text/index.js";
 const meta = {
   title: "Components/Separator",
   component: Separator,
   argTypes: {},
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-[700px]"
+    className: "w-[700px]"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export default meta;
@@ -16,7 +16,9 @@ export const Documentation = {
     variant: "dimmed",
     margin: "none",
     orientation: "horizontal",
-    decorative: true
+    decorative: true,
+    children: undefined,
+    labelPosition: "middle"
   },
   argTypes: {
     margin: {
@@ -27,7 +29,7 @@ export const Documentation = {
     variant: {
       description: "The visual style variant of the separator.",
       control: "select",
-      options: ["transparent", "base", "dimmed", "muted", "strong"]
+      options: ["transparent", "base", "dimmed", "muted", "strong", "accent"]
     },
     orientation: {
       description: "The orientation of the separator.",
@@ -37,23 +39,32 @@ export const Documentation = {
     decorative: {
       description: "Whether the separator is purely decorative and should be hidden from screen readers.",
       control: "boolean"
+    },
+    children: {
+      description: "Optional label text to display with the separator. Text will use text-neutral-primary text-md font-semibold styles.",
+      control: "text"
+    },
+    labelPosition: {
+      description: "Position of the label when children are provided.",
+      control: "select",
+      options: ["start", "middle", "end"]
     }
   },
   render: props => {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "wby-space-y-1"
+      className: "space-y-1"
     }, /*#__PURE__*/React.createElement(Heading, {
       level: 6
     }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
       size: "sm",
-      className: "wby-text-neutral-strong"
+      className: "text-neutral-strong"
     }, "This is a short description here")), /*#__PURE__*/React.createElement(Separator, {
       margin: props.margin,
       variant: props.variant,
       orientation: props.orientation,
       decorative: props.decorative
     }), /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-items-center wby-h-6 wby-text-sm"
+      className: "flex items-center h-6 text-sm"
     }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
   }
 };
@@ -64,17 +75,17 @@ export const Default = {
   },
   render: props => {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "wby-space-y-1"
+      className: "space-y-1"
     }, /*#__PURE__*/React.createElement(Heading, {
       level: 6
     }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
       size: "sm",
-      className: "wby-text-neutral-strong"
+      className: "text-neutral-strong"
     }, "This is a short description here")), /*#__PURE__*/React.createElement(Separator, {
       margin: props.margin,
       variant: props.variant
     }), /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-items-center wby-h-6 wby-text-sm"
+      className: "flex items-center h-6 text-sm"
     }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
   },
   argTypes: {
@@ -84,23 +95,23 @@ export const Default = {
     },
     variant: {
       control: "select",
-      options: ["transparent", "base", "dimmed", "muted", "strong"]
+      options: ["transparent", "base", "dimmed", "muted", "strong", "accent"]
     }
   }
 };
 export const VerticalAndHorizontal = {
   render: () => {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "wby-space-y-1"
+      className: "space-y-1"
     }, /*#__PURE__*/React.createElement(Heading, {
       level: 6
     }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
       size: "sm",
-      className: "wby-text-neutral-strong"
+      className: "text-neutral-strong"
     }, "This is a short description here")), /*#__PURE__*/React.createElement(Separator, {
       margin: "lg"
     }), /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-items-center wby-h-6 wby-text-sm"
+      className: "flex items-center h-6 text-sm"
     }, /*#__PURE__*/React.createElement(Text, null, "This is text 1."), /*#__PURE__*/React.createElement(Separator, {
       orientation: "vertical",
       margin: "lg"
@@ -116,16 +127,16 @@ export const HorizontalOrientation = {
   },
   render: () => {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "wby-space-y-1"
+      className: "space-y-1"
     }, /*#__PURE__*/React.createElement(Heading, {
       level: 6
     }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
       size: "sm",
-      className: "wby-text-neutral-strong"
+      className: "text-neutral-strong"
     }, "This is a short description here")), /*#__PURE__*/React.createElement(Separator, {
       margin: "lg"
     }), /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-items-center wby-h-6 wby-text-sm"
+      className: "flex items-center h-6 text-sm"
     }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
   }
 };
@@ -135,7 +146,7 @@ export const VerticalOrientation = {
   },
   render: () => {
     return /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-justify-center wby-h-6 wby-text-sm"
+      className: "flex justify-center h-6 text-sm"
     }, /*#__PURE__*/React.createElement(Text, null, "This is text 1."), /*#__PURE__*/React.createElement(Separator, {
       orientation: "vertical",
       margin: "lg"
@@ -148,16 +159,16 @@ export const VerticalOrientation = {
 export const LessMargin = {
   render: () => {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "wby-space-y-1"
+      className: "space-y-1"
     }, /*#__PURE__*/React.createElement(Heading, {
       level: 6
     }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
       size: "sm",
-      className: "wby-text-neutral-strong"
+      className: "text-neutral-strong"
     }, "This is a short description here")), /*#__PURE__*/React.createElement(Separator, {
       margin: "md"
     }), /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-items-center wby-h-6 wby-text-sm"
+      className: "flex items-center h-6 text-sm"
     }, /*#__PURE__*/React.createElement(Text, null, "This is text 1."), /*#__PURE__*/React.createElement(Separator, {
       orientation: "vertical",
       margin: "md"
@@ -170,16 +181,16 @@ export const LessMargin = {
 export const MoreMargin = {
   render: () => {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      className: "wby-space-y-1"
+      className: "space-y-1"
     }, /*#__PURE__*/React.createElement(Heading, {
       level: 6
     }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
       size: "sm",
-      className: "wby-text-neutral-strong"
+      className: "text-neutral-strong"
     }, "This is a short description here")), /*#__PURE__*/React.createElement(Separator, {
       margin: "xl"
     }), /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-items-center wby-h-6 wby-text-sm"
+      className: "flex items-center h-6 text-sm"
     }, /*#__PURE__*/React.createElement(Text, null, "This is text 1."), /*#__PURE__*/React.createElement(Separator, {
       orientation: "vertical",
       margin: "xl"
@@ -189,5 +200,242 @@ export const MoreMargin = {
     }), /*#__PURE__*/React.createElement(Text, null, "This is text 3.")));
   }
 };
+export const Transparent = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Transparent Variant"), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "text-neutral-strong"
+    }, "This separator is transparent and not visible")), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg",
+      variant: "transparent"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center h-6 text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
+  }
+};
+export const Base = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Base Variant"), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "text-neutral-strong"
+    }, "This separator uses bg-white")), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg",
+      variant: "base"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center h-6 text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
+  }
+};
+export const Muted = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Muted Variant"), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "text-neutral-strong"
+    }, "This separator uses bg-neutral-muted")), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg",
+      variant: "muted"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center h-6 text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
+  }
+};
+export const Strong = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Strong Variant"), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "text-neutral-strong"
+    }, "This separator uses bg-neutral-strong")), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg",
+      variant: "strong"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center h-6 text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
+  }
+};
+export const Accent = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Accent Variant"), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "text-neutral-strong"
+    }, "This separator uses bg-primary")), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg",
+      variant: "accent"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center h-6 text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
+  }
+};
+export const AllVariants = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "space-y-8"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Transparent"), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg",
+      variant: "transparent"
+    }), /*#__PURE__*/React.createElement(Text, {
+      size: "sm"
+    }, "Not visible")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Base"), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg",
+      variant: "base"
+    }), /*#__PURE__*/React.createElement(Text, {
+      size: "sm"
+    }, "bg-white")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Dimmed (default)"), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg",
+      variant: "dimmed"
+    }), /*#__PURE__*/React.createElement(Text, {
+      size: "sm"
+    }, "bg-neutral-dimmed")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Muted"), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg",
+      variant: "muted"
+    }), /*#__PURE__*/React.createElement(Text, {
+      size: "sm"
+    }, "bg-neutral-muted")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Strong"), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg",
+      variant: "strong"
+    }), /*#__PURE__*/React.createElement(Text, {
+      size: "sm"
+    }, "bg-neutral-strong")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Accent"), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg",
+      variant: "accent"
+    }), /*#__PURE__*/React.createElement(Text, {
+      size: "sm"
+    }, "bg-primary")));
+  }
+};
+export const WithLabelMiddle = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "space-y-8"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Separator with label in the middle"), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "text-neutral-strong mb-4"
+    }, "Label is positioned in the center (default)"), /*#__PURE__*/React.createElement(Separator, {
+      variant: "dimmed",
+      labelPosition: "middle"
+    }, "OR")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Separator, {
+      variant: "muted",
+      labelPosition: "middle"
+    }, "Section Title")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Separator, {
+      variant: "accent",
+      labelPosition: "middle"
+    }, "Important")));
+  }
+};
+export const WithLabelStart = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "space-y-8"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Separator with label at start"), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "text-neutral-strong mb-4"
+    }, "Label is positioned at the beginning"), /*#__PURE__*/React.createElement(Separator, {
+      variant: "dimmed",
+      labelPosition: "start"
+    }, "Start")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Separator, {
+      variant: "muted",
+      labelPosition: "start"
+    }, "Section 1")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Separator, {
+      variant: "accent",
+      labelPosition: "start"
+    }, "New Feature")));
+  }
+};
+export const WithLabelEnd = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "space-y-8"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "Separator with label at end"), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "text-neutral-strong mb-4"
+    }, "Label is positioned at the end"), /*#__PURE__*/React.createElement(Separator, {
+      variant: "dimmed",
+      labelPosition: "end"
+    }, "End")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Separator, {
+      variant: "muted",
+      labelPosition: "end"
+    }, "See More")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Separator, {
+      variant: "accent",
+      labelPosition: "end"
+    }, "Continue")));
+  }
+};
+export const WithLabelVertical = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+      level: 6,
+      className: "mb-4"
+    }, "Vertical separator with labels"), /*#__PURE__*/React.createElement("div", {
+      className: "flex gap-8",
+      style: {
+        height: "200px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col items-center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "text-neutral-strong mb-2"
+    }, "Start"), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      variant: "dimmed",
+      labelPosition: "start"
+    }, "Top")), /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col items-center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "text-neutral-strong mb-2"
+    }, "Middle"), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      variant: "muted",
+      labelPosition: "middle"
+    }, "Center")), /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col items-center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "text-neutral-strong mb-2"
+    }, "End"), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      variant: "accent",
+      labelPosition: "end"
+    }, "Bottom"))));
+  }
+};
 
 //# sourceMappingURL=Separator.stories.js.map