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

package/List/List.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { List } from "./List";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { List } from "./List.js";
 declare const meta: Meta<typeof List>;
 export default meta;
 type Story = StoryObj<typeof List>;

package/List/List.stories.js

@@ -7,8 +7,8 @@ import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
 import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
 import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
 import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
-import { List } from "./List";
-import { Avatar } from "../Avatar";
+import { List } from "./List.js";
+import { Avatar } from "../Avatar/index.js";
 const meta = {
   title: "Components/List",
   component: List,
@@ -51,7 +51,7 @@ export const WithTransparentBackground = {
     }))
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-light wby-p-md"
+    className: "bg-neutral-light p-md"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const WithBaseBackground = {
@@ -102,7 +102,7 @@ export const WithContainerVariant = {
     }))
   },
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-neutral-light wby-p-md"
+    className: "bg-neutral-light p-md"
   }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export const WithDescription = {
@@ -336,8 +336,7 @@ export const Documentation = {
       description: "The background color of the list"
     },
     children: {
-      description: "The content of the list. Please refer to the example code for details.",
-      control: "none"
+      description: "The content of the list. Please refer to the example code for details."
     }
   },
   parameters: {

package/List/List.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","ChartIcon","MoreIcon","OpenIcon","EditIcon","TrashIcon","UserIcon","SettingsIcon","HelpIcon","List","Avatar","meta","title","component","parameters","layout","ListItem","props","createElement","Item","Object","assign","index","Default","args","children","Fragment","WithTransparentBackground","background","icon","description","decorators","Story","className","WithBaseBackground","WithLightBackground","WithUnderlineVariant","variant","WithContainerVariant","WithDescription","WithIcon","WithIconsAndDescriptions","WithAvatar","image","Image","src","alt","fallback","Fallback","WithHandle","handle","Handle","WithActions","Icon","label","actions","Action","Separator","WithDisabled","onClick","alert","disabled","WithActivated","activated","console","log","WithClickHandlers","WithSelectedItem","render","selectedIndex","setSelectedIndex","useState","selected","Documentation","argTypes","control","options","docs","story"],"sources":["List.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ChartIcon } from \"@webiny/icons/insert_chart.svg\";\nimport { ReactComponent as MoreIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as OpenIcon } from \"@webiny/icons/visibility.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as UserIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { List, type ListItemProps as BaseListItemProps } from \"./List\";\nimport { Avatar } from \"~/Avatar\";\n\nconst meta: Meta<typeof List> = {\n    title: \"Components/List\",\n    component: List,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof List>;\n\ninterface ListItemProps extends Omit<BaseListItemProps, \"title\"> {\n    index: number;\n}\n\nconst ListItem = (props: ListItemProps) => {\n    return <List.Item title={`List item ${props.index}`} {...props} />;\n};\n\nexport const Default: Story = {\n    args: {\n        children: (\n            <>\n                <ListItem index={1} />\n                <ListItem index={2} />\n                <ListItem index={3} />\n            </>\n        )\n    }\n};\n\nexport const WithTransparentBackground: Story = {\n    args: {\n        background: \"transparent\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-light wby-p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithBaseBackground: Story = {\n    args: {\n        ...Default.args,\n        background: \"base\"\n    }\n};\n\nexport const WithLightBackground: Story = {\n    args: {\n        background: \"light\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithUnderlineVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"underline\"\n    }\n};\n\nexport const WithContainerVariant: Story = {\n    args: {\n        variant: \"container\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-light wby-p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithDescription: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item title=\"Settings\" description=\"Configure application settings\" />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item icon={<UserIcon />} title=\"User Profile\" />\n                <List.Item icon={<SettingsIcon />} title=\"Settings\" />\n                <List.Item icon={<HelpIcon />} title=\"Help & Support\" />\n            </>\n        )\n    }\n};\n\nexport const WithIconsAndDescriptions: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithAvatar: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=1\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=2\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithHandle: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithDisabled: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    disabled={true}\n                    onClick={() => alert(\"This alert won't show because the item is disabled\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActivated: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    activated={true}\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithClickHandlers: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => alert(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithSelectedItem: Story = {\n    render: () => {\n        // Using render function to handle state\n        const [selectedIndex, setSelectedIndex] = React.useState(0);\n\n        return (\n            <List>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    selected={selectedIndex === 0}\n                    onClick={() => setSelectedIndex(0)}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    selected={selectedIndex === 1}\n                    onClick={() => setSelectedIndex(1)}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    selected={selectedIndex === 2}\n                    onClick={() => setSelectedIndex(2)}\n                />\n            </List>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"underline\",\n        background: \"base\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"underline\", \"container\"],\n            description: \"The visual style of the list\"\n        },\n        background: {\n            control: \"select\",\n            options: [\"base\", \"light\", \"transparent\"],\n            description: \"The background color of the list\"\n        },\n        children: {\n            description: \"The content of the list. Please refer to the example code for details.\",\n            control: \"none\"\n        }\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a List with icons, titles, descriptions, and click handlers.\"\n            }\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","ChartIcon","MoreIcon","OpenIcon","EditIcon","TrashIcon","UserIcon","SettingsIcon","HelpIcon","List","Avatar","meta","title","component","parameters","layout","ListItem","props","createElement","Item","Object","assign","index","Default","args","children","Fragment","WithTransparentBackground","background","icon","description","decorators","Story","className","WithBaseBackground","WithLightBackground","WithUnderlineVariant","variant","WithContainerVariant","WithDescription","WithIcon","WithIconsAndDescriptions","WithAvatar","image","Image","src","alt","fallback","Fallback","WithHandle","handle","Handle","WithActions","Icon","label","actions","Action","Separator","WithDisabled","onClick","alert","disabled","WithActivated","activated","console","log","WithClickHandlers","WithSelectedItem","render","selectedIndex","setSelectedIndex","useState","selected","Documentation","argTypes","control","options","docs","story"],"sources":["List.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ChartIcon } from \"@webiny/icons/insert_chart.svg\";\nimport { ReactComponent as MoreIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as OpenIcon } from \"@webiny/icons/visibility.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as UserIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { List, type ListItemProps as BaseListItemProps } from \"./List.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\n\nconst meta: Meta<typeof List> = {\n    title: \"Components/List\",\n    component: List,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof List>;\n\ninterface ListItemProps extends Omit<BaseListItemProps, \"title\"> {\n    index: number;\n}\n\nconst ListItem = (props: ListItemProps) => {\n    return <List.Item title={`List item ${props.index}`} {...props} />;\n};\n\nexport const Default: Story = {\n    args: {\n        children: (\n            <>\n                <ListItem index={1} />\n                <ListItem index={2} />\n                <ListItem index={3} />\n            </>\n        )\n    }\n};\n\nexport const WithTransparentBackground: Story = {\n    args: {\n        background: \"transparent\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-light p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithBaseBackground: Story = {\n    args: {\n        ...Default.args,\n        background: \"base\"\n    }\n};\n\nexport const WithLightBackground: Story = {\n    args: {\n        background: \"light\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithUnderlineVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"underline\"\n    }\n};\n\nexport const WithContainerVariant: Story = {\n    args: {\n        variant: \"container\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-light p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithDescription: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item title=\"Settings\" description=\"Configure application settings\" />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item icon={<UserIcon />} title=\"User Profile\" />\n                <List.Item icon={<SettingsIcon />} title=\"Settings\" />\n                <List.Item icon={<HelpIcon />} title=\"Help & Support\" />\n            </>\n        )\n    }\n};\n\nexport const WithIconsAndDescriptions: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithAvatar: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=1\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=2\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithHandle: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithDisabled: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    disabled={true}\n                    onClick={() => alert(\"This alert won't show because the item is disabled\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActivated: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    activated={true}\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithClickHandlers: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => alert(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithSelectedItem: Story = {\n    render: () => {\n        // Using render function to handle state\n        const [selectedIndex, setSelectedIndex] = React.useState(0);\n\n        return (\n            <List>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    selected={selectedIndex === 0}\n                    onClick={() => setSelectedIndex(0)}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    selected={selectedIndex === 1}\n                    onClick={() => setSelectedIndex(1)}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    selected={selectedIndex === 2}\n                    onClick={() => setSelectedIndex(2)}\n                />\n            </List>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"underline\",\n        background: \"base\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"underline\", \"container\"],\n            description: \"The visual style of the list\"\n        },\n        background: {\n            control: \"select\",\n            options: [\"base\", \"light\", \"transparent\"],\n            description: \"The background color of the list\"\n        },\n        children: {\n            description: \"The content of the list. Please refer to the example code for details.\"\n        }\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a List with icons, titles, descriptions, and click handlers.\"\n            }\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/List/components/ListItem.d.ts

@@ -1,110 +1,112 @@
 import * as React from "react";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const listItemVariant: (props?: ({
     disabled?: boolean | null | undefined;
     activated?: boolean | null | undefined;
     selected?: boolean | null | undefined;
     clickable?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof listItemVariant> {
     title: React.ReactNode;
     actions?: React.ReactNode;
     description?: React.ReactNode;
     handle?: React.ReactNode;
     icon?: React.ReactNode;
+    colorMark?: string;
+    sidePadding?: "md" | "lg";
 }
-declare const ListItem: (({ 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;
+declare const ListItem: (({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
+    original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, 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;
+    original: (({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
+        original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, 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;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
+        original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, 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;
+    Action: ((props: import("./ListItemAction.js").ListItemActionProps) => React.JSX.Element) & {
+        original: (props: import("./ListItemAction.js").ListItemActionProps) => 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;
+        original: ((props: import("./ListItemAction.js").ListItemActionProps) => React.JSX.Element) & {
+            original: (props: import("./ListItemAction.js").ListItemActionProps) => 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;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./ListItemAction.js").ListItemActionProps) => React.JSX.Element) & {
+            original: (props: import("./ListItemAction.js").ListItemActionProps) => 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;
+        Separator: ((props: import("./ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element) & {
+            original: (props: import("./ListItemSeparator.js").ListItemSeparatorProps) => 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;
+            original: ((props: import("./ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element) & {
+                original: (props: import("./ListItemSeparator.js").ListItemSeparatorProps) => 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;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element) & {
+                original: (props: import("./ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
     };
-    Handle: ((props: import("./ListItemHandle").ListItemHandleProps) => React.JSX.Element) & {
-        original: (props: import("./ListItemHandle").ListItemHandleProps) => React.JSX.Element;
+    Handle: ((props: import("./ListItemHandle.js").ListItemHandleProps) => React.JSX.Element) & {
+        original: (props: import("./ListItemHandle.js").ListItemHandleProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: ((props: import("./ListItemHandle").ListItemHandleProps) => React.JSX.Element) & {
-            original: (props: import("./ListItemHandle").ListItemHandleProps) => React.JSX.Element;
+        original: ((props: import("./ListItemHandle.js").ListItemHandleProps) => React.JSX.Element) & {
+            original: (props: import("./ListItemHandle.js").ListItemHandleProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./ListItemHandle").ListItemHandleProps) => React.JSX.Element) & {
-            original: (props: import("./ListItemHandle").ListItemHandleProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./ListItemHandle.js").ListItemHandleProps) => React.JSX.Element) & {
+            original: (props: import("./ListItemHandle.js").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;
+    Icon: ((props: import("../../index.js").IconProps) => React.JSX.Element) & {
+        original: (props: import("../../index.js").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;
+        original: ((props: import("../../index.js").IconProps) => React.JSX.Element) & {
+            original: (props: import("../../index.js").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;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("../../index.js").IconProps) => React.JSX.Element) & {
+            original: (props: import("../../index.js").IconProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;

package/List/components/ListItem.js

@@ -1,22 +1,22 @@
 import * as React from "react";
-import { cn, cva, makeDecoratable, withStaticProps } from "../../utils";
-import { Text } from "../../Text";
-import { ListItemAction } from "./ListItemAction";
-import { ListItemHandle } from "./ListItemHandle";
-import { ListItemIcon } from "./ListItemIcon";
-const listItemVariant = cva(["wby-w-full wby-flex wby-items-center", "group-[.wby-list-background-base]:wby-bg-neutral-base", "group-[.wby-list-background-light]:wby-bg-neutral-light", "group-[.wby-list-variant-container]:wby-rounded-sm", "group-[.wby-list-variant-underline]:wby-border-b-sm group-[.wby-list-variant-underline]:wby-border-b-neutral-dimmed", "hover:!wby-bg-neutral-dimmed", "focus-visible:wby-outline-none focus-visible:wby-ring-sm focus-visible:wby-ring-inset focus-visible:wby-ring-primary-dimmed"], {
+import { cn, cva, makeDecoratable, withStaticProps } from "../../utils.js";
+import { Text } from "../../Text/index.js";
+import { ListItemAction } from "./ListItemAction.js";
+import { ListItemHandle } from "./ListItemHandle.js";
+import { ListItemIcon } from "./ListItemIcon.js";
+const listItemVariant = cva(["w-full flex items-center", "group-[.list-background-base]:bg-neutral-base", "group-[.list-background-light]:bg-neutral-light", "group-[.list-variant-container]:rounded-lg", "group-[.list-variant-underline]:border-b-sm group-[.list-variant-underline]:border-b-neutral-dimmed", "hover:bg-neutral-dimmed!", "focus-visible:outline-none focus-visible:ring-sm focus-visible:ring-inset focus-visible:ring-primary-dimmed"], {
   variants: {
     disabled: {
-      true: "wby-pointer-events-none wby-opacity-50"
+      true: "pointer-events-none opacity-50"
     },
     activated: {
-      true: "!wby-bg-neutral-light"
+      true: "bg-neutral-light!"
     },
     selected: {
-      true: "!wby-bg-neutral-light"
+      true: "bg-neutral-light!"
     },
     clickable: {
-      true: "wby-cursor-pointer"
+      true: "cursor-pointer"
     }
   }
 });
@@ -30,10 +30,13 @@ const DecoratableListItem = ({
   selected,
   handle,
   icon,
+  colorMark,
+  sidePadding = "md",
   onClick,
   title,
   ...props
 }) => {
+  const paddingClasses = sidePadding === "md" ? "px-md" : "pl-lg pr-md";
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     tabIndex: 0,
     className: cn(listItemVariant({
@@ -42,23 +45,28 @@ const DecoratableListItem = ({
       selected,
       clickable: Boolean(onClick)
     }), className)
-  }), handle, /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full wby-flex wby-justify-between wby-items-center wby-pl-lg wby-pr-md wby-py-sm-extra"
+  }), handle, colorMark && /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: colorMark
+    },
+    className: "block w-[4px] h-[48px] rounded-lg ml-sm flex-shrink-0"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn("w-full flex justify-between items-center py-sm-extra", paddingClasses)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full wby-flex wby-items-center wby-gap-md",
+    className: "w-full flex items-center gap-md",
     onClick: onClick
   }, icon && /*#__PURE__*/React.createElement("div", null, icon), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-col wby-gap-xxs wby-flex-grow wby-text-left"
+    className: "flex flex-col gap-xxs grow text-left"
   }, /*#__PURE__*/React.createElement(Text, {
     size: "md",
     as: "div",
-    className: "wby-font-semibold wby-text-neutral-primary"
+    className: "font-semibold text-neutral-primary"
   }, title), /*#__PURE__*/React.createElement(Text, {
     size: "sm",
     as: "div",
-    className: "wby-text-neutral-strong"
+    className: "text-neutral-strong"
   }, description))), actions && /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-items-center wby-gap-xs-plus"
+    className: "flex items-center gap-xs-plus"
   }, actions)), children);
 };
 const ListItem = withStaticProps(makeDecoratable("ListItem", DecoratableListItem), {

package/List/components/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","makeDecoratable","withStaticProps","Text","ListItemAction","ListItemHandle","ListItemIcon","listItemVariant","variants","disabled","true","activated","selected","clickable","DecoratableListItem","actions","children","className","description","handle","icon","onClick","title","props","createElement","Object","assign","tabIndex","Boolean","size","as","ListItem","Action","Handle","Icon"],"sources":["ListItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, makeDecoratable, withStaticProps, type VariantProps } from \"~/utils\";\nimport { Text } from \"~/Text\";\nimport { ListItemAction } from \"./ListItemAction\";\nimport { ListItemHandle } from \"./ListItemHandle\";\nimport { ListItemIcon } from \"./ListItemIcon\";\n\nconst listItemVariant = cva(\n    [\n        \"wby-w-full wby-flex wby-items-center\",\n        \"group-[.wby-list-background-base]:wby-bg-neutral-base\",\n        \"group-[.wby-list-background-light]:wby-bg-neutral-light\",\n        \"group-[.wby-list-variant-container]:wby-rounded-sm\",\n        \"group-[.wby-list-variant-underline]:wby-border-b-sm group-[.wby-list-variant-underline]:wby-border-b-neutral-dimmed\",\n        \"hover:!wby-bg-neutral-dimmed\",\n        \"focus-visible:wby-outline-none focus-visible:wby-ring-sm focus-visible:wby-ring-inset focus-visible:wby-ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            disabled: {\n                true: \"wby-pointer-events-none wby-opacity-50\"\n            },\n            activated: {\n                true: \"!wby-bg-neutral-light\"\n            },\n            selected: {\n                true: \"!wby-bg-neutral-light\"\n            },\n            clickable: {\n                true: \"wby-cursor-pointer\"\n            }\n        }\n    }\n);\n\ninterface ListItemProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\">,\n        VariantProps<typeof listItemVariant> {\n    title: React.ReactNode;\n    actions?: React.ReactNode;\n    description?: React.ReactNode;\n    handle?: React.ReactNode;\n    icon?: React.ReactNode;\n}\n\nconst DecoratableListItem = ({\n    actions,\n    children,\n    className,\n    description,\n    activated,\n    disabled,\n    selected,\n    handle,\n    icon,\n    onClick,\n    title,\n    ...props\n}: ListItemProps) => {\n    return (\n        <div\n            {...props}\n            tabIndex={0}\n            className={cn(\n                listItemVariant({ disabled, activated, selected, clickable: Boolean(onClick) }),\n                className\n            )}\n        >\n            {handle}\n            <div\n                className={\n                    \"wby-w-full wby-flex wby-justify-between wby-items-center wby-pl-lg wby-pr-md wby-py-sm-extra\"\n                }\n            >\n                <div\n                    className={\"wby-w-full wby-flex wby-items-center wby-gap-md\"}\n                    onClick={onClick}\n                >\n                    {icon && <div>{icon}</div>}\n                    <div\n                        className={\"wby-flex wby-flex-col wby-gap-xxs wby-flex-grow wby-text-left\"}\n                    >\n                        <Text\n                            size={\"md\"}\n                            as={\"div\"}\n                            className={\"wby-font-semibold wby-text-neutral-primary\"}\n                        >\n                            {title}\n                        </Text>\n                        <Text size={\"sm\"} as={\"div\"} className={\"wby-text-neutral-strong\"}>\n                            {description}\n                        </Text>\n                    </div>\n                </div>\n                {actions && (\n                    <div className={\"wby-flex wby-items-center wby-gap-xs-plus\"}>{actions}</div>\n                )}\n            </div>\n            {children}\n        </div>\n    );\n};\n\nconst ListItem = withStaticProps(makeDecoratable(\"ListItem\", DecoratableListItem), {\n    Action: ListItemAction,\n    Handle: ListItemHandle,\n    Icon: ListItemIcon\n});\n\nexport { ListItem, type ListItemProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe,EAAEC,eAAe;AAClD,SAASC,IAAI;AACb,SAASC,cAAc;AACvB,SAASC,cAAc;AACvB,SAASC,YAAY;AAErB,MAAMC,eAAe,GAAGP,GAAG,CACvB,CACI,sCAAsC,EACtC,uDAAuD,EACvD,yDAAyD,EACzD,oDAAoD,EACpD,qHAAqH,EACrH,8BAA8B,EAC9B,6HAA6H,CAChI,EACD;EACIQ,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV,CAAC;IACDC,SAAS,EAAE;MACPD,IAAI,EAAE;IACV,CAAC;IACDE,QAAQ,EAAE;MACNF,IAAI,EAAE;IACV,CAAC;IACDG,SAAS,EAAE;MACPH,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAYD,MAAMI,mBAAmB,GAAGA,CAAC;EACzBC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXP,SAAS;EACTF,QAAQ;EACRG,QAAQ;EACRO,MAAM;EACNC,IAAI;EACJC,OAAO;EACPC,KAAK;EACL,GAAGC;AACQ,CAAC,KAAK;EACjB,oBACIzB,KAAA,CAAA0B,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQH,KAAK;IACTI,QAAQ,EAAE,CAAE;IACZV,SAAS,EAAElB,EAAE,CACTQ,eAAe,CAAC;MAAEE,QAAQ;MAAEE,SAAS;MAAEC,QAAQ;MAAEC,SAAS,EAAEe,OAAO,CAACP,OAAO;IAAE,CAAC,CAAC,EAC/EJ,SACJ;EAAE,IAEDE,MAAM,eACPrB,KAAA,CAAA0B,aAAA;IACIP,SAAS,EACL;EACH,gBAEDnB,KAAA,CAAA0B,aAAA;IACIP,SAAS,EAAE,iDAAkD;IAC7DI,OAAO,EAAEA;EAAQ,GAEhBD,IAAI,iBAAItB,KAAA,CAAA0B,aAAA,cAAMJ,IAAU,CAAC,eAC1BtB,KAAA,CAAA0B,aAAA;IACIP,SAAS,EAAE;EAAgE,gBAE3EnB,KAAA,CAAA0B,aAAA,CAACrB,IAAI;IACD0B,IAAI,EAAE,IAAK;IACXC,EAAE,EAAE,KAAM;IACVb,SAAS,EAAE;EAA6C,GAEvDK,KACC,CAAC,eACPxB,KAAA,CAAA0B,aAAA,CAACrB,IAAI;IAAC0B,IAAI,EAAE,IAAK;IAACC,EAAE,EAAE,KAAM;IAACb,SAAS,EAAE;EAA0B,GAC7DC,WACC,CACL,CACJ,CAAC,EACLH,OAAO,iBACJjB,KAAA,CAAA0B,aAAA;IAAKP,SAAS,EAAE;EAA4C,GAAEF,OAAa,CAE9E,CAAC,EACLC,QACA,CAAC;AAEd,CAAC;AAED,MAAMe,QAAQ,GAAG7B,eAAe,CAACD,eAAe,CAAC,UAAU,EAAEa,mBAAmB,CAAC,EAAE;EAC/EkB,MAAM,EAAE5B,cAAc;EACtB6B,MAAM,EAAE5B,cAAc;EACtB6B,IAAI,EAAE5B;AACV,CAAC,CAAC;AAEF,SAASyB,QAAQ","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","makeDecoratable","withStaticProps","Text","ListItemAction","ListItemHandle","ListItemIcon","listItemVariant","variants","disabled","true","activated","selected","clickable","DecoratableListItem","actions","children","className","description","handle","icon","colorMark","sidePadding","onClick","title","props","paddingClasses","createElement","Object","assign","tabIndex","Boolean","style","backgroundColor","size","as","ListItem","Action","Handle","Icon"],"sources":["ListItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, makeDecoratable, withStaticProps, type VariantProps } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { ListItemAction } from \"./ListItemAction.js\";\nimport { ListItemHandle } from \"./ListItemHandle.js\";\nimport { ListItemIcon } from \"./ListItemIcon.js\";\n\nconst listItemVariant = cva(\n    [\n        \"w-full flex items-center\",\n        \"group-[.list-background-base]:bg-neutral-base\",\n        \"group-[.list-background-light]:bg-neutral-light\",\n        \"group-[.list-variant-container]:rounded-lg\",\n        \"group-[.list-variant-underline]:border-b-sm group-[.list-variant-underline]:border-b-neutral-dimmed\",\n        \"hover:bg-neutral-dimmed!\",\n        \"focus-visible:outline-none focus-visible:ring-sm focus-visible:ring-inset focus-visible:ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            disabled: {\n                true: \"pointer-events-none opacity-50\"\n            },\n            activated: {\n                true: \"bg-neutral-light!\"\n            },\n            selected: {\n                true: \"bg-neutral-light!\"\n            },\n            clickable: {\n                true: \"cursor-pointer\"\n            }\n        }\n    }\n);\n\ninterface ListItemProps\n    extends\n        Omit<React.HTMLAttributes<HTMLDivElement>, \"title\">,\n        VariantProps<typeof listItemVariant> {\n    title: React.ReactNode;\n    actions?: React.ReactNode;\n    description?: React.ReactNode;\n    handle?: React.ReactNode;\n    icon?: React.ReactNode;\n    colorMark?: string;\n    sidePadding?: \"md\" | \"lg\";\n}\n\nconst DecoratableListItem = ({\n    actions,\n    children,\n    className,\n    description,\n    activated,\n    disabled,\n    selected,\n    handle,\n    icon,\n    colorMark,\n    sidePadding = \"md\",\n    onClick,\n    title,\n    ...props\n}: ListItemProps) => {\n    const paddingClasses = sidePadding === \"md\" ? \"px-md\" : \"pl-lg pr-md\";\n\n    return (\n        <div\n            {...props}\n            tabIndex={0}\n            className={cn(\n                listItemVariant({\n                    disabled,\n                    activated,\n                    selected,\n                    clickable: Boolean(onClick)\n                }),\n                className\n            )}\n        >\n            {handle}\n            {colorMark && (\n                <div\n                    style={{ backgroundColor: colorMark }}\n                    className={\"block w-[4px] h-[48px] rounded-lg ml-sm flex-shrink-0\"}\n                />\n            )}\n            <div\n                className={cn(\n                    \"w-full flex justify-between items-center py-sm-extra\",\n                    paddingClasses\n                )}\n            >\n                <div className={\"w-full flex items-center gap-md\"} onClick={onClick}>\n                    {icon && <div>{icon}</div>}\n                    <div className={\"flex flex-col gap-xxs grow text-left\"}>\n                        <Text\n                            size={\"md\"}\n                            as={\"div\"}\n                            className={\"font-semibold text-neutral-primary\"}\n                        >\n                            {title}\n                        </Text>\n                        <Text size={\"sm\"} as={\"div\"} className={\"text-neutral-strong\"}>\n                            {description}\n                        </Text>\n                    </div>\n                </div>\n                {actions && <div className={\"flex items-center gap-xs-plus\"}>{actions}</div>}\n            </div>\n            {children}\n        </div>\n    );\n};\n\nconst ListItem = withStaticProps(makeDecoratable(\"ListItem\", DecoratableListItem), {\n    Action: ListItemAction,\n    Handle: ListItemHandle,\n    Icon: ListItemIcon\n});\n\nexport { ListItem, type ListItemProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe,EAAEC,eAAe;AAClD,SAASC,IAAI;AACb,SAASC,cAAc;AACvB,SAASC,cAAc;AACvB,SAASC,YAAY;AAErB,MAAMC,eAAe,GAAGP,GAAG,CACvB,CACI,0BAA0B,EAC1B,+CAA+C,EAC/C,iDAAiD,EACjD,4CAA4C,EAC5C,qGAAqG,EACrG,0BAA0B,EAC1B,6GAA6G,CAChH,EACD;EACIQ,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV,CAAC;IACDC,SAAS,EAAE;MACPD,IAAI,EAAE;IACV,CAAC;IACDE,QAAQ,EAAE;MACNF,IAAI,EAAE;IACV,CAAC;IACDG,SAAS,EAAE;MACPH,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAeD,MAAMI,mBAAmB,GAAGA,CAAC;EACzBC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXP,SAAS;EACTF,QAAQ;EACRG,QAAQ;EACRO,MAAM;EACNC,IAAI;EACJC,SAAS;EACTC,WAAW,GAAG,IAAI;EAClBC,OAAO;EACPC,KAAK;EACL,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAMC,cAAc,GAAGJ,WAAW,KAAK,IAAI,GAAG,OAAO,GAAG,aAAa;EAErE,oBACIxB,KAAA,CAAA6B,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQJ,KAAK;IACTK,QAAQ,EAAE,CAAE;IACZb,SAAS,EAAElB,EAAE,CACTQ,eAAe,CAAC;MACZE,QAAQ;MACRE,SAAS;MACTC,QAAQ;MACRC,SAAS,EAAEkB,OAAO,CAACR,OAAO;IAC9B,CAAC,CAAC,EACFN,SACJ;EAAE,IAEDE,MAAM,EACNE,SAAS,iBACNvB,KAAA,CAAA6B,aAAA;IACIK,KAAK,EAAE;MAAEC,eAAe,EAAEZ;IAAU,CAAE;IACtCJ,SAAS,EAAE;EAAwD,CACtE,CACJ,eACDnB,KAAA,CAAA6B,aAAA;IACIV,SAAS,EAAElB,EAAE,CACT,sDAAsD,EACtD2B,cACJ;EAAE,gBAEF5B,KAAA,CAAA6B,aAAA;IAAKV,SAAS,EAAE,iCAAkC;IAACM,OAAO,EAAEA;EAAQ,GAC/DH,IAAI,iBAAItB,KAAA,CAAA6B,aAAA,cAAMP,IAAU,CAAC,eAC1BtB,KAAA,CAAA6B,aAAA;IAAKV,SAAS,EAAE;EAAuC,gBACnDnB,KAAA,CAAA6B,aAAA,CAACxB,IAAI;IACD+B,IAAI,EAAE,IAAK;IACXC,EAAE,EAAE,KAAM;IACVlB,SAAS,EAAE;EAAqC,GAE/CO,KACC,CAAC,eACP1B,KAAA,CAAA6B,aAAA,CAACxB,IAAI;IAAC+B,IAAI,EAAE,IAAK;IAACC,EAAE,EAAE,KAAM;IAAClB,SAAS,EAAE;EAAsB,GACzDC,WACC,CACL,CACJ,CAAC,EACLH,OAAO,iBAAIjB,KAAA,CAAA6B,aAAA;IAAKV,SAAS,EAAE;EAAgC,GAAEF,OAAa,CAC1E,CAAC,EACLC,QACA,CAAC;AAEd,CAAC;AAED,MAAMoB,QAAQ,GAAGlC,eAAe,CAACD,eAAe,CAAC,UAAU,EAAEa,mBAAmB,CAAC,EAAE;EAC/EuB,MAAM,EAAEjC,cAAc;EACtBkC,MAAM,EAAEjC,cAAc;EACtBkC,IAAI,EAAEjC;AACV,CAAC,CAAC;AAEF,SAAS8B,QAAQ","ignoreList":[]}

package/List/components/ListItemAction.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { IconButtonProps as IconButtonProps } from "../../Button";
+import type { IconButtonProps } from "../../Button/index.js";
 type ListItemActionProps = IconButtonProps;
 declare const ListItemAction: ((props: ListItemActionProps) => React.JSX.Element) & {
     original: (props: ListItemActionProps) => React.JSX.Element;
@@ -14,27 +14,27 @@ declare const ListItemAction: ((props: ListItemActionProps) => React.JSX.Element
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: ListItemActionProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ListItemActionProps) => React.JSX.Element) & {
         original: (props: ListItemActionProps) => 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;
+    Separator: ((props: import("./ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element) & {
+        original: (props: import("./ListItemSeparator.js").ListItemSeparatorProps) => 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;
+        original: ((props: import("./ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element) & {
+            original: (props: import("./ListItemSeparator.js").ListItemSeparatorProps) => 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;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element) & {
+            original: (props: import("./ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;

package/List/components/ListItemAction.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { makeDecoratable, withStaticProps } from "../../utils";
-import { IconButton } from "../../Button";
-import { ListItemSeparator } from "./ListItemSeparator";
+import { makeDecoratable, withStaticProps } from "../../utils.js";
+import { IconButton } from "../../Button/index.js";
+import { ListItemSeparator } from "./ListItemSeparator.js";
 const DecoratableListItemAction = props => {
   return /*#__PURE__*/React.createElement(IconButton, Object.assign({
     variant: "ghost",

package/List/components/ListItemAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","withStaticProps","IconButton","ListItemSeparator","DecoratableListItemAction","props","createElement","Object","assign","variant","size","ListItemAction","Separator"],"sources":["ListItemAction.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport type { IconButtonProps as IconButtonProps } from \"~/Button\";\nimport { IconButton } from \"~/Button\";\nimport { ListItemSeparator } from \"./ListItemSeparator\";\n\ntype ListItemActionProps = IconButtonProps;\n\nconst DecoratableListItemAction = (props: ListItemActionProps) => {\n    return <IconButton variant={\"ghost\"} size={\"sm\"} {...props} />;\n};\n\nconst ListItemAction = withStaticProps(\n    makeDecoratable(\"ListItemAction\", DecoratableListItemAction),\n    {\n        Separator: ListItemSeparator\n    }\n);\n\nexport { ListItemAction, type ListItemActionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;AAEzC,SAASC,UAAU;AACnB,SAASC,iBAAiB;AAI1B,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBAAON,KAAA,CAAAO,aAAA,CAACJ,UAAU,EAAAK,MAAA,CAAAC,MAAA;IAACC,OAAO,EAAE,OAAQ;IAACC,IAAI,EAAE;EAAK,GAAKL,KAAK,CAAG,CAAC;AAClE,CAAC;AAED,MAAMM,cAAc,GAAGV,eAAe,CAClCD,eAAe,CAAC,gBAAgB,EAAEI,yBAAyB,CAAC,EAC5D;EACIQ,SAAS,EAAET;AACf,CACJ,CAAC;AAED,SAASQ,cAAc","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","withStaticProps","IconButton","ListItemSeparator","DecoratableListItemAction","props","createElement","Object","assign","variant","size","ListItemAction","Separator"],"sources":["ListItemAction.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport type { IconButtonProps } from \"~/Button/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { ListItemSeparator } from \"./ListItemSeparator.js\";\n\ntype ListItemActionProps = IconButtonProps;\n\nconst DecoratableListItemAction = (props: ListItemActionProps) => {\n    return <IconButton variant={\"ghost\"} size={\"sm\"} {...props} />;\n};\n\nconst ListItemAction = withStaticProps(\n    makeDecoratable(\"ListItemAction\", DecoratableListItemAction),\n    {\n        Separator: ListItemSeparator\n    }\n);\n\nexport { ListItemAction, type ListItemActionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;AAEzC,SAASC,UAAU;AACnB,SAASC,iBAAiB;AAI1B,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBAAON,KAAA,CAAAO,aAAA,CAACJ,UAAU,EAAAK,MAAA,CAAAC,MAAA;IAACC,OAAO,EAAE,OAAQ;IAACC,IAAI,EAAE;EAAK,GAAKL,KAAK,CAAG,CAAC;AAClE,CAAC;AAED,MAAMM,cAAc,GAAGV,eAAe,CAClCD,eAAe,CAAC,gBAAgB,EAAEI,yBAAyB,CAAC,EAC5D;EACIQ,SAAS,EAAET;AACf,CACJ,CAAC;AAED,SAASQ,cAAc","ignoreList":[]}

package/List/components/ListItemHandle.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { IconProps as IconProps } from "../../Icon";
+import type { IconProps } from "../../Icon/index.js";
 interface ListItemHandleProps extends Omit<IconProps, "icon" | "label"> {
     icon?: React.ReactElement;
     label?: string;
@@ -17,7 +17,7 @@ declare const ListItemHandle: ((props: ListItemHandleProps) => React.JSX.Element
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: ListItemHandleProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: ListItemHandleProps) => React.JSX.Element) & {
         original: (props: ListItemHandleProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/List/components/ListItemHandle.js

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { ReactComponent as DragHandleIcon } from "@webiny/icons/drag_indicator.svg";
-import { makeDecoratable } from "../../utils";
-import { Icon } from "../../Icon";
+import { makeDecoratable } from "../../utils.js";
+import { Icon } from "../../Icon/index.js";
 const DecoratableListItemHandle = props => {
   return /*#__PURE__*/React.createElement(Icon, Object.assign({
     size: "md",
     color: "neutral-light",
-    className: "wby-mx-xxs wby-cursor-grab",
+    className: "mx-xxs cursor-grab",
     icon: /*#__PURE__*/React.createElement(DragHandleIcon, null),
     label: "Drag handle"
   }, props));

package/List/components/ListItemHandle.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","DragHandleIcon","makeDecoratable","Icon","DecoratableListItemHandle","props","createElement","Object","assign","size","color","className","icon","label","ListItemHandle"],"sources":["ListItemHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as DragHandleIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { IconProps as IconProps } from \"~/Icon\";\nimport { Icon } from \"~/Icon\";\n\ninterface ListItemHandleProps extends Omit<IconProps, \"icon\" | \"label\"> {\n    icon?: React.ReactElement;\n    label?: string;\n}\n\nconst DecoratableListItemHandle = (props: ListItemHandleProps) => {\n    return (\n        <Icon\n            size={\"md\"}\n            color={\"neutral-light\"}\n            className={\"wby-mx-xxs wby-cursor-grab\"}\n            icon={<DragHandleIcon />}\n            label={\"Drag handle\"}\n            {...props}\n        />\n    );\n};\n\nconst ListItemHandle = makeDecoratable(\"ListItemHandle\", DecoratableListItemHandle);\n\nexport { ListItemHandle, type ListItemHandleProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,cAAc,QAAQ,kCAAkC;AACnF,SAASC,eAAe;AAExB,SAASC,IAAI;AAOb,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBACIN,KAAA,CAAAO,aAAA,CAACH,IAAI,EAAAI,MAAA,CAAAC,MAAA;IACDC,IAAI,EAAE,IAAK;IACXC,KAAK,EAAE,eAAgB;IACvBC,SAAS,EAAE,4BAA6B;IACxCC,IAAI,eAAEb,KAAA,CAAAO,aAAA,CAACL,cAAc,MAAE,CAAE;IACzBY,KAAK,EAAE;EAAc,GACjBR,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,MAAMS,cAAc,GAAGZ,eAAe,CAAC,gBAAgB,EAAEE,yBAAyB,CAAC;AAEnF,SAASU,cAAc","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","DragHandleIcon","makeDecoratable","Icon","DecoratableListItemHandle","props","createElement","Object","assign","size","color","className","icon","label","ListItemHandle"],"sources":["ListItemHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as DragHandleIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { IconProps } from \"~/Icon/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\ninterface ListItemHandleProps extends Omit<IconProps, \"icon\" | \"label\"> {\n    icon?: React.ReactElement;\n    label?: string;\n}\n\nconst DecoratableListItemHandle = (props: ListItemHandleProps) => {\n    return (\n        <Icon\n            size={\"md\"}\n            color={\"neutral-light\"}\n            className={\"mx-xxs cursor-grab\"}\n            icon={<DragHandleIcon />}\n            label={\"Drag handle\"}\n            {...props}\n        />\n    );\n};\n\nconst ListItemHandle = makeDecoratable(\"ListItemHandle\", DecoratableListItemHandle);\n\nexport { ListItemHandle, type ListItemHandleProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,cAAc,QAAQ,kCAAkC;AACnF,SAASC,eAAe;AAExB,SAASC,IAAI;AAOb,MAAMC,yBAAyB,GAAIC,KAA0B,IAAK;EAC9D,oBACIN,KAAA,CAAAO,aAAA,CAACH,IAAI,EAAAI,MAAA,CAAAC,MAAA;IACDC,IAAI,EAAE,IAAK;IACXC,KAAK,EAAE,eAAgB;IACvBC,SAAS,EAAE,oBAAqB;IAChCC,IAAI,eAAEb,KAAA,CAAAO,aAAA,CAACL,cAAc,MAAE,CAAE;IACzBY,KAAK,EAAE;EAAc,GACjBR,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,MAAMS,cAAc,GAAGZ,eAAe,CAAC,gBAAgB,EAAEE,yBAAyB,CAAC;AAEnF,SAASU,cAAc","ignoreList":[]}

package/List/components/ListItemIcon.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { IconProps as IconComponentProps } from "../../Icon";
+import type { IconProps as IconComponentProps } from "../../Icon/index.js";
 type ListItemIconProps = IconComponentProps;
 export declare const ListItemIcon: ((props: ListItemIconProps) => React.JSX.Element) & {
     original: (props: ListItemIconProps) => React.JSX.Element;
@@ -14,7 +14,7 @@ export declare const ListItemIcon: ((props: ListItemIconProps) => React.JSX.Elem
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: ListItemIconProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: ListItemIconProps) => React.JSX.Element) & {
         original: (props: ListItemIconProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/List/components/ListItemIcon.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { makeDecoratable } from "../../utils";
-import { Icon as IconComponent } from "../../Icon";
+import { makeDecoratable } from "../../utils.js";
+import { Icon as IconComponent } from "../../Icon/index.js";
 const DecoratableListItemIcon = props => {
   return /*#__PURE__*/React.createElement(IconComponent, Object.assign({
     size: "md",