@webiny/admin-ui 0.0.0-unstable.06b2ede40f

package/Separator/Separator.js

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { cva, makeDecoratable } from "../utils";
+const separatorVariants = cva("wby-shrink-0", {
+  variants: {
+    margin: {
+      none: "",
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: ""
+    },
+    orientation: {
+      horizontal: "wby-h-px wby-w-full",
+      vertical: "wby-h-full wby-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"
+    }
+  },
+  compoundVariants: [{
+    orientation: "horizontal",
+    margin: "xs",
+    className: "wby-my-px"
+  }, {
+    orientation: "horizontal",
+    margin: "sm",
+    className: "wby-my-xxs"
+  }, {
+    orientation: "horizontal",
+    margin: "md",
+    className: "wby-my-xs"
+  }, {
+    orientation: "horizontal",
+    margin: "lg",
+    className: "wby-my-sm"
+  }, {
+    orientation: "horizontal",
+    margin: "xl",
+    className: "wby-my-md"
+  }, {
+    orientation: "vertical",
+    margin: "xs",
+    className: "wby-mx-px"
+  }, {
+    orientation: "vertical",
+    margin: "sm",
+    className: "wby-mx-xxs"
+  }, {
+    orientation: "vertical",
+    margin: "md",
+    className: "wby-mx-xs"
+  }, {
+    orientation: "vertical",
+    margin: "lg",
+    className: "wby-mx-sm"
+  }, {
+    orientation: "vertical",
+    margin: "xl",
+    className: "wby-mx-md"
+  }],
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "dimmed",
+    margin: "none"
+  }
+});
+const SeparatorBase = ({
+  className,
+  orientation,
+  margin,
+  variant,
+  decorative = true,
+  ...props
+}) => /*#__PURE__*/React.createElement(SeparatorPrimitive.Root, Object.assign({
+  decorative: decorative,
+  orientation: orientation,
+  className: separatorVariants({
+    orientation,
+    margin,
+    variant,
+    className
+  })
+}, props));
+const Separator = makeDecoratable("Separator", SeparatorBase);
+export { Separator };
+
+//# sourceMappingURL=Separator.js.map

package/Separator/Separator.js.map

@@ -0,0 +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":[]}

package/Separator/Separator.mdx

@@ -0,0 +1,262 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SeparatorStories from './Separator.stories';
+
+<Meta of={SeparatorStories} />
+
+# Separator
+
+The Separator component is a visual divider that creates a clear distinction between different sections of content. It helps organize and structure information, making interfaces more scannable and easier to navigate.
+
+## Usage
+
+<Canvas of={SeparatorStories.Documentation} source={ { code: `
+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>
+    );
+};
+
+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'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={SeparatorStories.Documentation} />
+
+```tsx
+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>
+    );
+};
+
+export default SeparatorExample;
+```
+
+
+## Examples
+
+### Default
+
+A basic horizontal separator with subtle styling and large margin.
+
+<Canvas of={SeparatorStories.Default} source={ { code: `
+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>
+    );
+};
+
+export default DefaultSeparatorExample;
+` } } />
+
+### Vertical and Horizontal
+
+Using both vertical and horizontal separators to create a structured layout.
+
+<Canvas of={SeparatorStories.VerticalAndHorizontal} source={ { code: `
+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>
+    );
+};
+
+export default VerticalAndHorizontalExample;
+` } } />
+
+### Horizontal Orientation
+
+A separator with horizontal orientation, which is the default.
+
+<Canvas of={SeparatorStories.HorizontalOrientation} source={ { code: `
+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>
+    );
+};
+
+export default HorizontalOrientationExample;
+` } } />
+
+### Vertical Orientation
+
+A separator with vertical orientation, useful for creating columns or dividing inline elements.
+
+<Canvas of={SeparatorStories.VerticalOrientation} source={ { code: `
+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>
+    );
+};
+
+export default VerticalOrientationExample;
+` } } />
+
+### Less Margin
+
+A separator with medium margin, creating a tighter layout.
+
+<Canvas of={SeparatorStories.LessMargin} source={ { code: `
+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>
+    );
+};
+
+export default LessMarginExample;
+` } } />
+
+### More Margin
+
+A separator with extra large margin, creating more space between sections.
+
+<Canvas of={SeparatorStories.MoreMargin} source={ { code: `
+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>
+    );
+};
+
+export default MoreMarginExample;
+` } } />

package/Separator/Separator.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "./Separator";
+declare const meta: Meta<typeof Separator>;
+export default meta;
+type Story = StoryObj<typeof Separator>;
+export declare const Documentation: Story;
+export declare const Default: Story;
+export declare const VerticalAndHorizontal: Story;
+export declare const HorizontalOrientation: Story;
+export declare const VerticalOrientation: Story;
+export declare const LessMargin: Story;
+export declare const MoreMargin: Story;

package/Separator/Separator.stories.js

@@ -0,0 +1,193 @@
+import { Separator } from "./Separator";
+import React from "react";
+import { Heading } from "../Heading";
+import { Text } from "../Text";
+const meta = {
+  title: "Components/Separator",
+  component: Separator,
+  argTypes: {},
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-[700px]"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export default meta;
+export const Documentation = {
+  args: {
+    variant: "dimmed",
+    margin: "none",
+    orientation: "horizontal",
+    decorative: true
+  },
+  argTypes: {
+    margin: {
+      description: "The margin around the separator.",
+      control: "select",
+      options: ["none", "xs", "sm", "md", "lg", "xl"]
+    },
+    variant: {
+      description: "The visual style variant of the separator.",
+      control: "select",
+      options: ["transparent", "base", "dimmed", "muted", "strong"]
+    },
+    orientation: {
+      description: "The orientation of the separator.",
+      control: "select",
+      options: ["horizontal", "vertical"]
+    },
+    decorative: {
+      description: "Whether the separator is purely decorative and should be hidden from screen readers.",
+      control: "boolean"
+    }
+  },
+  render: props => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-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"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
+  }
+};
+export const Default = {
+  args: {
+    variant: "dimmed",
+    margin: "lg"
+  },
+  render: props => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-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"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
+  },
+  argTypes: {
+    margin: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"]
+    },
+    variant: {
+      control: "select",
+      options: ["transparent", "base", "dimmed", "muted", "strong"]
+    }
+  }
+};
+export const VerticalAndHorizontal = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-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"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "lg"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 2."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "lg"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 3.")));
+  }
+};
+export const HorizontalOrientation = {
+  args: {
+    orientation: "horizontal"
+  },
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-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"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
+  }
+};
+export const VerticalOrientation = {
+  args: {
+    orientation: "vertical"
+  },
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-justify-center wby-h-6 wby-text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "lg"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 2."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "lg"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 3."));
+  }
+};
+export const LessMargin = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-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"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "md"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 2."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "md"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 3.")));
+  }
+};
+export const MoreMargin = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-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"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "xl"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 2."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "xl"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 3.")));
+  }
+};
+
+//# sourceMappingURL=Separator.stories.js.map

package/Separator/Separator.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Separator","React","Heading","Text","meta","title","component","argTypes","decorators","Story","createElement","className","Documentation","args","variant","margin","orientation","decorative","description","control","options","render","props","level","size","Default","VerticalAndHorizontal","HorizontalOrientation","VerticalOrientation","LessMargin","MoreMargin"],"sources":["Separator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Separator } from \"./Separator\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading\";\nimport { Text } from \"~/Text\";\n\nconst meta: Meta<typeof Separator> = {\n    title: \"Components/Separator\",\n    component: Separator,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"wby-w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Separator>;\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"dimmed\",\n        margin: \"none\",\n        orientation: \"horizontal\",\n        decorative: true\n    },\n    argTypes: {\n        margin: {\n            description: \"The margin around the separator.\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        variant: {\n            description: \"The visual style variant of the separator.\",\n            control: \"select\",\n            options: [\"transparent\", \"base\", \"dimmed\", \"muted\", \"strong\"]\n        },\n        orientation: {\n            description: \"The orientation of the separator.\",\n            control: \"select\",\n            options: [\"horizontal\", \"vertical\"]\n        },\n        decorative: {\n            description:\n                \"Whether the separator is purely decorative and should be hidden from screen readers.\",\n            control: \"boolean\"\n        }\n    },\n    render: props => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator\n                    margin={props.margin}\n                    variant={props.variant}\n                    orientation={props.orientation}\n                    decorative={props.decorative}\n                />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        variant: \"dimmed\",\n        margin: \"lg\"\n    },\n    render: props => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={props.margin} variant={props.variant} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    },\n    argTypes: {\n        margin: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        variant: {\n            control: \"select\",\n            options: [\"transparent\", \"base\", \"dimmed\", \"muted\", \"strong\"]\n        }\n    }\n};\n\nexport const VerticalAndHorizontal: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"lg\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"lg\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const HorizontalOrientation: Story = {\n    args: {\n        orientation: \"horizontal\"\n    },\n    render: () => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const VerticalOrientation: Story = {\n    args: {\n        orientation: \"vertical\"\n    },\n    render: () => {\n        return (\n            <div className=\"wby-flex wby-justify-center wby-h-6 wby-text-sm\">\n                <Text>{\"This is text 1.\"}</Text>\n                <Separator orientation=\"vertical\" margin={\"lg\"} />\n                <Text>{\"This is text 2.\"}</Text>\n                <Separator orientation=\"vertical\" margin={\"lg\"} />\n                <Text>{\"This is text 3.\"}</Text>\n            </div>\n        );\n    }\n};\n\nexport const LessMargin: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"md\"} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"md\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"md\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const MoreMargin: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"xl\"} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"xl\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"xl\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Separator/index.d.ts

@@ -0,0 +1 @@
+export * from "./Separator";

package/Separator/index.js

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

package/Separator/index.js.map

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