@webiny/admin-ui 6.0.0-alpha.0

package/Link/Link.mdx

@@ -0,0 +1,264 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as LinkStories from './Link.stories';
+
+<Meta of={LinkStories} />
+
+# Link
+
+The purpose of the Link component is to enable seamless navigation by connecting users to other pages, sections, or resources. It provides a consistent, accessible, and visually recognizable way to interact with content, ensuring clarity and usability while maintaining the design system's cohesion.
+
+## Usage
+
+<Canvas of={LinkStories.Documentation} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const LinkExample = () => {
+    return (
+        <div>
+            <p>
+                This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
+            </p>
+            <p>
+                <Link to="/settings" variant="secondary" size="lg">
+                    This is a large secondary link
+                </Link>
+            </p>
+            <p>
+                <Link to="/help" underline={true}>
+                    This link is underlined by default
+                </Link>
+            </p>
+        </div>
+    );
+};
+
+export default LinkExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Link/Link.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={LinkStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const LinkExample = () => {
+    return (
+        <div>
+            <p>
+                This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
+            </p>
+            <p>
+                <Link to="/settings" variant="secondary" size="lg">
+                    This is a large secondary link
+                </Link>
+            </p>
+            <p>
+                <Link to="/help" underline={true}>
+                    This link is underlined by default
+                </Link>
+            </p>
+        </div>
+    );
+};
+
+export default LinkExample;
+```
+
+## Examples
+
+### Default
+
+<Canvas of={LinkStories.Default} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const DefaultLinkExample = () => {
+    return (
+        <Link to="#">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Link>
+    );
+};
+
+export default DefaultLinkExample;
+` } } />
+
+### Size Variants
+
+#### Extra Large (XL)
+
+<Canvas of={LinkStories.LinkXl} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const XlLinkExample = () => {
+    return (
+        <Link to="#" size="xl">
+            Extra large link
+        </Link>
+    );
+};
+
+export default XlLinkExample;
+` } } />
+
+#### Large (LG)
+
+<Canvas of={LinkStories.LinkLg} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const LgLinkExample = () => {
+    return (
+        <Link to="#" size="lg">
+            Large link
+        </Link>
+    );
+};
+
+export default LgLinkExample;
+` } } />
+
+#### Medium (MD)
+
+<Canvas of={LinkStories.LinkMd} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const MdLinkExample = () => {
+    return (
+        <Link to="#" size="md">
+            Medium link
+        </Link>
+    );
+};
+
+export default MdLinkExample;
+` } } />
+
+#### Small (SM)
+
+<Canvas of={LinkStories.LinkSm} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const SmLinkExample = () => {
+    return (
+        <Link to="#" size="sm">
+            Small link
+        </Link>
+    );
+};
+
+export default SmLinkExample;
+` } } />
+
+### Inherited Size
+
+<Canvas of={LinkStories.InheritedSize} source={ { code: `
+import React from "react";
+import { Link, Text } from "@webiny/admin-ui";
+
+const InheritedSizeLinkExample = () => {
+    return (
+        <Text>
+            <Text size="lg">
+                Size of this text is set to large, so,&nbsp;
+                <Link to="#">this link's</Link> size is also automatically set to large.
+            </Text>
+        </Text>
+    );
+};
+
+export default InheritedSizeLinkExample;
+` } } />
+
+### With Underline
+
+<Canvas of={LinkStories.WithUnderline} source={ { code: `
+import React from "react";
+import { Link } from "@webiny/admin-ui";
+
+const UnderlinedLinkExample = () => {
+    return (
+        <Link to="#" underline={true}>
+            This link is underlined by default
+        </Link>
+    );
+};
+
+export default UnderlinedLinkExample;
+` } } />
+
+### Primary Negative
+
+<Canvas of={LinkStories.PrimaryNegative} source={ { code: `
+import React from "react";
+import { Link, Text } from "@webiny/admin-ui";
+
+const PrimaryNegativeLinkExample = () => {
+    return (
+        <div className="wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed">
+            <Text>
+                Lorem <Link to="#" variant="primary-negative">ipsum dolor sit amet</Link>, consectetur adipiscing elit.
+                Fusce tempus tortor eu sapien interdum rhoncus.
+            </Text>
+        </div>
+    );
+};
+
+export default PrimaryNegativeLinkExample;
+` } } />
+
+### Secondary Negative
+
+<Canvas of={LinkStories.SecondaryNegative} source={ { code: `
+import React from "react";
+import { Link, Text } from "@webiny/admin-ui";
+
+const SecondaryNegativeLinkExample = () => {
+    return (
+        <div className="wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed">
+            <Text>
+                Lorem <Link to="#" variant="secondary-negative">ipsum dolor sit amet</Link>, consectetur adipiscing elit.
+                Fusce tempus tortor eu sapien interdum rhoncus.
+            </Text>
+        </div>
+    );
+};
+
+export default SecondaryNegativeLinkExample;
+` } } />
+
+## Anatomy
+
+### Primary
+<img src="/images/storybook/link/primary.png" alt="Primary"/>
+
+### Secondary
+<img src="/images/storybook/link/secondary.png" alt="Secondary"/>
+
+### Sizing
+Links inherit font styles of surrounding text.
+<img src="/images/storybook/link/sizing.png" alt="Sizing"/>
+
+### State
+<img src="/images/storybook/link/states.png" alt="State"/>
+
+## Usage
+<img src="/images/storybook/link/usage.png" alt="Usage"/>

package/Link/Link.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Link } from "./Link";
+declare const meta: Meta<typeof Link>;
+export default meta;
+type Story = StoryObj<typeof Link>;
+export declare const Default: Story;
+export declare const LinkXl: Story;
+export declare const LinkLg: Story;
+export declare const LinkMd: Story;
+export declare const LinkSm: Story;
+export declare const InheritedSize: Story;
+export declare const WithUnderline: Story;
+export declare const PrimaryNegative: Story;
+export declare const SecondaryNegative: Story;
+export declare const Documentation: Story;

package/Link/Link.stories.js

@@ -0,0 +1,143 @@
+import React from "react";
+import { BrowserRouter } from "@webiny/react-router";
+import { Link } from "./Link";
+import { Text } from "../Text";
+const meta = {
+  title: "Components/Link",
+  component: Link,
+  decorators: [Story => /*#__PURE__*/React.createElement(BrowserRouter, null, /*#__PURE__*/React.createElement(Story, null))],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "xl"]
+    },
+    variant: {
+      control: "select",
+      options: ["primary", "secondary"]
+    }
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    to: "#",
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const LinkXl = {
+  args: {
+    size: "xl",
+    to: "#",
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const LinkLg = {
+  args: {
+    size: "lg",
+    to: "#",
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const LinkMd = {
+  args: {
+    size: "md",
+    to: "#",
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const LinkSm = {
+  args: {
+    size: "sm",
+    to: "#",
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const InheritedSize = {
+  name: "Link with inherited size",
+  render: linkProps => {
+    return /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Text, {
+      size: "lg"
+    }, "Size of this text is set to large, so,\xA0", /*#__PURE__*/React.createElement(Link, linkProps, "this link's"), " size is also automatically set to large."));
+  },
+  args: {
+    to: "#",
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const WithUnderline = {
+  args: {
+    underline: true,
+    to: "#",
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const PrimaryNegative = {
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed"
+  }, /*#__PURE__*/React.createElement(Story, null))],
+  render: args => {
+    return /*#__PURE__*/React.createElement(Text, null, "Lorem ", /*#__PURE__*/React.createElement(Link, args, "ipsum dolor sit amet"), ", consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.");
+  },
+  args: {
+    ...Default.args,
+    variant: "primary-negative"
+  }
+};
+export const SecondaryNegative = {
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed"
+  }, /*#__PURE__*/React.createElement(Story, null))],
+  render: args => {
+    return /*#__PURE__*/React.createElement(Text, null, "Lorem ", /*#__PURE__*/React.createElement(Link, args, "ipsum dolor sit amet"), ", consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.");
+  },
+  args: {
+    ...Default.args,
+    variant: "secondary-negative"
+  }
+};
+export const Documentation = {
+  args: {
+    to: "#",
+    variant: "primary",
+    size: "md",
+    underline: false,
+    disabled: false,
+    children: "This is a link"
+  },
+  argTypes: {
+    to: {
+      description: "The URL or path the link points to. If it’s a relative path, you can pass it as-is—it will automatically resolve based on the parent route. For a full URL, be sure to pass the complete address starting with `https://...`",
+      control: "text",
+      defaultValue: "#"
+    },
+    variant: {
+      description: "Visual style of the link",
+      control: "select",
+      options: ["primary", "secondary", "primary-negative", "secondary-negative"],
+      defaultValue: "primary"
+    },
+    size: {
+      description: "Size of the link text",
+      control: "select",
+      options: ["inherit", "sm", "md", "lg", "xl"],
+      defaultValue: "inherit"
+    },
+    underline: {
+      description: "Whether the link should be underlined by default",
+      control: "boolean",
+      defaultValue: false
+    },
+    disabled: {
+      description: "Whether the link is disabled",
+      control: "boolean",
+      defaultValue: false
+    },
+    children: {
+      description: "The content of the link. It can be any valid React node.",
+      control: "text",
+      defaultValue: "This is a link"
+    }
+  }
+};
+
+//# sourceMappingURL=Link.stories.js.map

package/Link/Link.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","BrowserRouter","Link","Text","meta","title","component","decorators","Story","createElement","argTypes","size","control","options","variant","Default","args","to","children","LinkXl","LinkLg","LinkMd","LinkSm","InheritedSize","name","render","linkProps","WithUnderline","underline","PrimaryNegative","className","SecondaryNegative","Documentation","disabled","description","defaultValue"],"sources":["Link.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { BrowserRouter } from \"@webiny/react-router\";\nimport { Link } from \"./Link\";\nimport { Text } from \"~/Text\";\n\nconst meta: Meta<typeof Link> = {\n    title: \"Components/Link\",\n    component: Link,\n    decorators: [\n        (Story: React.ComponentType) => (\n            <BrowserRouter>\n                <Story />\n            </BrowserRouter>\n        )\n    ],\n    argTypes: {\n        size: { control: \"select\", options: [\"sm\", \"md\", \"lg\", \"xl\"] },\n        variant: { control: \"select\", options: [\"primary\", \"secondary\"] }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const Default: Story = {\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkXl: Story = {\n    args: {\n        size: \"xl\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkLg: Story = {\n    args: {\n        size: \"lg\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkMd: Story = {\n    args: {\n        size: \"md\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkSm: Story = {\n    args: {\n        size: \"sm\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const InheritedSize: Story = {\n    name: \"Link with inherited size\",\n    render: linkProps => {\n        return (\n            <Text>\n                <Text size=\"lg\">\n                    Size of this text is set to large, so,&nbsp;\n                    <Link {...linkProps}>this link&apos;s</Link> size is also automatically set to\n                    large.\n                </Text>\n            </Text>\n        );\n    },\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const WithUnderline: Story = {\n    args: {\n        underline: true,\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const PrimaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"primary-negative\"\n    }\n};\n\nexport const SecondaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"secondary-negative\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        to: \"#\",\n        variant: \"primary\",\n        size: \"md\",\n        underline: false,\n        disabled: false,\n        children: \"This is a link\"\n    },\n    argTypes: {\n        to: {\n            description:\n                \"The URL or path the link points to. If it’s a relative path, you can pass it as-is—it will automatically resolve based on the parent route. For a full URL, be sure to pass the complete address starting with `https://...`\",\n            control: \"text\",\n            defaultValue: \"#\"\n        },\n        variant: {\n            description: \"Visual style of the link\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"primary-negative\", \"secondary-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size of the link text\",\n            control: \"select\",\n            options: [\"inherit\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"inherit\"\n        },\n        underline: {\n            description: \"Whether the link should be underlined by default\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        disabled: {\n            description: \"Whether the link is disabled\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        children: {\n            description: \"The content of the link. It can be any valid React node.\",\n            control: \"text\",\n            defaultValue: \"This is a link\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Link/index.d.ts

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

package/Link/index.js

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

package/Link/index.js.map

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

package/List/List.d.ts

@@ -0,0 +1,128 @@
+import * as React from "react";
+import { type VariantProps } from "../utils";
+import { type ListItemProps } from "./components";
+declare const listVariants: (props?: ({
+    variant?: "container" | "underline" | null | undefined;
+    background?: "base" | "transparent" | "light" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface ListProps extends VariantProps<typeof listVariants>, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    children: React.ReactNode;
+}
+declare const List: (({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element) & {
+    original: ({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element) & {
+        original: ({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element) & {
+        original: ({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
+    Item: (({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
+        original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
+            original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
+            original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        Action: ((props: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
+            original: (props: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: ((props: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
+                original: (props: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
+                original: (props: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        } & {
+            Separator: ((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
+                original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            } & {
+                original: ((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
+                    original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                };
+                originalName: string;
+                displayName: string;
+            } & {
+                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
+                    original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                    originalName: string;
+                    displayName: string;
+                }>) => (props: unknown) => React.JSX.Element;
+            };
+        };
+        Handle: ((props: import("./components/ListItemHandle").ListItemHandleProps) => React.JSX.Element) & {
+            original: (props: import("./components/ListItemHandle").ListItemHandleProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: ((props: import("./components/ListItemHandle").ListItemHandleProps) => React.JSX.Element) & {
+                original: (props: import("./components/ListItemHandle").ListItemHandleProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./components/ListItemHandle").ListItemHandleProps) => React.JSX.Element) & {
+                original: (props: import("./components/ListItemHandle").ListItemHandleProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        Icon: ((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
+            original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: ((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
+                original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
+                original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+    };
+};
+export { List, type ListProps, type ListItemProps };

package/List/List.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { makeDecoratable, withStaticProps, cva, cn } from "../utils";
+import { ListItem } from "./components";
+const listVariants = cva("wby-group wby-w-full", {
+  variants: {
+    variant: {
+      container: "wby-list-variant-container",
+      underline: "wby-list-variant-underline"
+    },
+    background: {
+      base: "wby-list-background-base",
+      light: "wby-list-background-light",
+      transparent: "wby-list-background-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "underline",
+    background: "base"
+  }
+});
+const DecoratableList = ({
+  children,
+  variant,
+  background,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: cn(listVariants({
+      variant,
+      background
+    }), className)
+  }), children);
+};
+const List = withStaticProps(makeDecoratable("List", DecoratableList), {
+  Item: ListItem
+});
+export { List };
+
+//# sourceMappingURL=List.js.map

package/List/List.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","withStaticProps","cva","cn","ListItem","listVariants","variants","variant","container","underline","background","base","light","transparent","defaultVariants","DecoratableList","children","className","props","createElement","Object","assign","List","Item"],"sources":["List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps, cva, type VariantProps, cn } from \"~/utils\";\nimport { ListItem, type ListItemProps } from \"./components\";\n\nconst listVariants = cva(\"wby-group wby-w-full\", {\n    variants: {\n        variant: {\n            container: \"wby-list-variant-container\",\n            underline: \"wby-list-variant-underline\"\n        },\n        background: {\n            base: \"wby-list-background-base\",\n            light: \"wby-list-background-light\",\n            transparent: \"wby-list-background-transparent\"\n        }\n    },\n    defaultVariants: {\n        variant: \"underline\",\n        background: \"base\"\n    }\n});\n\ninterface ListProps\n    extends VariantProps<typeof listVariants>,\n        Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    children: React.ReactNode;\n}\n\nconst DecoratableList = ({ children, variant, background, className, ...props }: ListProps) => {\n    return (\n        <div {...props} className={cn(listVariants({ variant, background }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst List = withStaticProps(makeDecoratable(\"List\", DecoratableList), {\n    Item: ListItem\n});\n\nexport { List, type ListProps, type ListItemProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe,EAAEC,GAAG,EAAqBC,EAAE;AACrE,SAASC,QAAQ;AAEjB,MAAMC,YAAY,GAAGH,GAAG,CAAC,sBAAsB,EAAE;EAC7CI,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,SAAS,EAAE,4BAA4B;MACvCC,SAAS,EAAE;IACf,CAAC;IACDC,UAAU,EAAE;MACRC,IAAI,EAAE,0BAA0B;MAChCC,KAAK,EAAE,2BAA2B;MAClCC,WAAW,EAAE;IACjB;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,OAAO,EAAE,WAAW;IACpBG,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AAQF,MAAMK,eAAe,GAAGA,CAAC;EAAEC,QAAQ;EAAET,OAAO;EAAEG,UAAU;EAAEO,SAAS;EAAE,GAAGC;AAAiB,CAAC,KAAK;EAC3F,oBACInB,KAAA,CAAAoB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEd,EAAE,CAACE,YAAY,CAAC;MAAEE,OAAO;MAAEG;IAAW,CAAC,CAAC,EAAEO,SAAS;EAAE,IAC3ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,IAAI,GAAGrB,eAAe,CAACD,eAAe,CAAC,MAAM,EAAEe,eAAe,CAAC,EAAE;EACnEQ,IAAI,EAAEnB;AACV,CAAC,CAAC;AAEF,SAASkB,IAAI","ignoreList":[]}