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

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-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":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,SAAS,QAAQ,gCAAgC;AAC5E,SAASD,cAAc,IAAIE,QAAQ,QAAQ,6BAA6B;AACxE,SAASF,cAAc,IAAIG,QAAQ,QAAQ,8BAA8B;AACzE,SAASH,cAAc,IAAII,QAAQ,QAAQ,wBAAwB;AACnE,SAASJ,cAAc,IAAIK,SAAS,QAAQ,0BAA0B;AACtE,SAASL,cAAc,IAAIM,QAAQ,QAAQ,0BAA0B;AACrE,SAASN,cAAc,IAAIO,YAAY,QAAQ,4BAA4B;AAC3E,SAASP,cAAc,IAAIQ,QAAQ,QAAQ,wBAAwB;AAEnE,SAASC,IAAI;AACb,SAASC,MAAM;AAEf,MAAMC,IAAuB,GAAG;EAC5BC,KAAK,EAAE,iBAAiB;EACxBC,SAAS,EAAEJ,IAAI;EACfK,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ;AACJ,CAAC;AAED,eAAeJ,IAAI;AAQnB,MAAMK,QAAQ,GAAIC,KAAoB,IAAK;EACvC,oBAAOlB,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,EAAAC,MAAA,CAAAC,MAAA;IAACT,KAAK,EAAE,aAAaK,KAAK,CAACK,KAAK;EAAG,GAAKL,KAAK,CAAG,CAAC;AACtE,CAAC;AAED,OAAO,MAAMM,OAAc,GAAG;EAC1BC,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MAACM,KAAK,EAAE;IAAE,CAAE,CAAC,eACtBvB,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MAACM,KAAK,EAAE;IAAE,CAAE,CAAC,eACtBvB,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MAACM,KAAK,EAAE;IAAE,CAAE,CACvB;EAEV;AACJ,CAAC;AAED,OAAO,MAAMK,yBAAgC,GAAG;EAC5CH,IAAI,EAAE;IACFI,UAAU,EAAE,aAAa;IACzBH,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACZ,QAAQ,MAAE,CAAE;MACnBM,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC;IAAwC,CACvD,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACX,YAAY,MAAE,CAAE;MACvBK,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC;IAAgC,CAC/C,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACV,QAAQ,MAAE,CAAE;MACnBI,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC;IAAuC,CACtD,CACH;EAEV,CAAC;EACDC,UAAU,EAAE,CACRC,KAAK,iBACDjC,KAAA,CAAAmB,aAAA;IAAKe,SAAS,EAAC;EAAuB,gBAClClC,KAAA,CAAAmB,aAAA,CAACc,KAAK,MAAE,CACP,CACR;AAET,CAAC;AAED,OAAO,MAAME,kBAAyB,GAAG;EACrCV,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfI,UAAU,EAAE;EAChB;AACJ,CAAC;AAED,OAAO,MAAMO,mBAA0B,GAAG;EACtCX,IAAI,EAAE;IACFI,UAAU,EAAE,OAAO;IACnBH,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACZ,QAAQ,MAAE,CAAE;MACnBM,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC;IAAwC,CACvD,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACX,YAAY,MAAE,CAAE;MACvBK,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC;IAAgC,CAC/C,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACV,QAAQ,MAAE,CAAE;MACnBI,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC;IAAuC,CACtD,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMM,oBAA2B,GAAG;EACvCZ,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfa,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMC,oBAA2B,GAAG;EACvCd,IAAI,EAAE;IACFa,OAAO,EAAE,WAAW;IACpBZ,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACZ,QAAQ,MAAE,CAAE;MACnBM,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC;IAAwC,CACvD,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACX,YAAY,MAAE,CAAE;MACvBK,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC;IAAgC,CAC/C,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACV,QAAQ,MAAE,CAAE;MACnBI,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC;IAAuC,CACtD,CACH;EAEV,CAAC;EACDC,UAAU,EAAE,CACRC,KAAK,iBACDjC,KAAA,CAAAmB,aAAA;IAAKe,SAAS,EAAC;EAAuB,gBAClClC,KAAA,CAAAmB,aAAA,CAACc,KAAK,MAAE,CACP,CACR;AAET,CAAC;AAED,OAAO,MAAMO,eAAsB,GAAG;EAClCf,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC;IAAwC,CACvD,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MAACP,KAAK,EAAC,UAAU;MAACkB,WAAW,EAAC;IAAgC,CAAE,CAAC,eAC3E/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC;IAAuC,CACtD,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMU,QAAe,GAAG;EAC3BhB,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MAACU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACZ,QAAQ,MAAE,CAAE;MAACM,KAAK,EAAC;IAAc,CAAE,CAAC,eACtDb,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MAACU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACX,YAAY,MAAE,CAAE;MAACK,KAAK,EAAC;IAAU,CAAE,CAAC,eACtDb,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MAACU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACV,QAAQ,MAAE,CAAE;MAACI,KAAK,EAAC;IAAgB,CAAE,CACzD;EAEV;AACJ,CAAC;AAED,OAAO,MAAM6B,wBAA+B,GAAG;EAC3CjB,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACZ,QAAQ,MAAE,CAAE;MACnBM,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC;IAAwC,CACvD,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACX,YAAY,MAAE,CAAE;MACvBK,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC;IAAgC,CAC/C,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACV,QAAQ,MAAE,CAAE;MACnBI,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC;IAAuC,CACtD,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMY,UAAiB,GAAG;EAC7BlB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MACLM,KAAK,EAAE,CAAE;MACTQ,WAAW,EAAC,0DAA0D;MACtED,IAAI,eACA9B,KAAA,CAAAmB,aAAA,CAACR,MAAM;QACHiC,KAAK,eACD5C,KAAA,CAAAmB,aAAA,CAACR,MAAM,CAACkC,KAAK;UAACC,GAAG,EAAC,iCAAiC;UAACC,GAAG,EAAC;QAAS,CAAE,CACtE;QACDC,QAAQ,eAAEhD,KAAA,CAAAmB,aAAA,CAACR,MAAM,CAACsC,QAAQ,QAAC,GAAkB;MAAE,CAClD;IACJ,CACJ,CAAC,eACFjD,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MACLM,KAAK,EAAE,CAAE;MACTQ,WAAW,EAAC,0DAA0D;MACtED,IAAI,eACA9B,KAAA,CAAAmB,aAAA,CAACR,MAAM;QACHiC,KAAK,eACD5C,KAAA,CAAAmB,aAAA,CAACR,MAAM,CAACkC,KAAK;UAACC,GAAG,EAAC,iCAAiC;UAACC,GAAG,EAAC;QAAS,CAAE,CACtE;QACDC,QAAQ,eAAEhD,KAAA,CAAAmB,aAAA,CAACR,MAAM,CAACsC,QAAQ,QAAC,GAAkB;MAAE,CAClD;IACJ,CACJ,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMC,UAAiB,GAAG;EAC7BzB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MACLM,KAAK,EAAE,CAAE;MACTQ,WAAW,EAAC,0DAA0D;MACtEoB,MAAM,eAAEnD,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACgC,MAAM,MAAE;IAAE,CAChC,CAAC,eACFpD,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MACLM,KAAK,EAAE,CAAE;MACTQ,WAAW,EAAC,0DAA0D;MACtEoB,MAAM,eAAEnD,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACgC,MAAM,MAAE;IAAE,CAChC,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMC,WAAkB,GAAG;EAC9B,GAAG7B,OAAO;EACVC,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MACLM,KAAK,EAAE,CAAE;MACTQ,WAAW,EAAC,0DAA0D;MACtED,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACkC,IAAI;QAACxB,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACjB,SAAS,MAAE,CAAE;QAACqD,KAAK,EAAE;MAAQ,CAAE,CAAE;MAC9DC,OAAO,eACHxD,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACd,QAAQ,MAAE;MAAE,CAAE,CAAC,eACxCL,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACb,SAAS,MAAE;MAAE,CAAE,CAAC,eACzCN,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM,CAACC,SAAS,MAAE,CAAC,eAC9B1D,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACf,QAAQ,MAAE;MAAE,CAAE,CAAC,eACxCJ,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAAChB,QAAQ,MAAE;MAAE,CAAE,CACzC;IACL,CACJ,CAAC,eACFH,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MACLM,KAAK,EAAE,CAAE;MACTQ,WAAW,EAAC,0DAA0D;MACtED,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACkC,IAAI;QAACxB,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACjB,SAAS,MAAE,CAAE;QAACqD,KAAK,EAAE;MAAQ,CAAE,CAAE;MAC9DC,OAAO,eACHxD,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACd,QAAQ,MAAE;MAAE,CAAE,CAAC,eACxCL,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACb,SAAS,MAAE;MAAE,CAAE,CAAC,eACzCN,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM,CAACC,SAAS,MAAE,CAAC,eAC9B1D,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACf,QAAQ,MAAE;MAAE,CAAE,CAAC,eACxCJ,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAAChB,QAAQ,MAAE;MAAE,CAAE,CACzC;IACL,CACJ,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMwD,YAAmB,GAAG;EAC/BlC,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC,wCAAwC;MACpD6B,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,sBAAsB;IAAE,CAChD,CAAC,eACF7D,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC,gCAAgC;MAC5C+B,QAAQ,EAAE,IAAK;MACfF,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,oDAAoD;IAAE,CAC9E,CAAC,eACF7D,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC,uCAAuC;MACnD6B,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,wBAAwB;IAAE,CAClD,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAME,aAAoB,GAAG;EAChCtC,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC,wCAAwC;MACpDiC,SAAS,EAAE,IAAK;MAChBJ,OAAO,EAAEA,CAAA,KAAMK,OAAO,CAACC,GAAG,CAAC,sBAAsB;IAAE,CACtD,CAAC,eACFlE,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC,gCAAgC;MAC5C6B,OAAO,EAAEA,CAAA,KAAMK,OAAO,CAACC,GAAG,CAAC,kBAAkB;IAAE,CAClD,CAAC,eACFlE,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC,uCAAuC;MACnD6B,OAAO,EAAEA,CAAA,KAAMK,OAAO,CAACC,GAAG,CAAC,wBAAwB;IAAE,CACxD,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMC,iBAAwB,GAAG;EACpC1C,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC,wCAAwC;MACpD6B,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,sBAAsB;IAAE,CAChD,CAAC,eACF7D,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC,gCAAgC;MAC5C6B,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,kBAAkB;IAAE,CAC5C,CAAC,eACF7D,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC,uCAAuC;MACnD6B,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,wBAAwB;IAAE,CAClD,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMO,gBAAuB,GAAG;EACnCC,MAAM,EAAEA,CAAA,KAAM;IACV;IACA,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGvE,KAAK,CAACwE,QAAQ,CAAC,CAAC,CAAC;IAE3D,oBACIxE,KAAA,CAAAmB,aAAA,CAACT,IAAI,qBACDV,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC,wCAAwC;MACpD0C,QAAQ,EAAEH,aAAa,KAAK,CAAE;MAC9BV,OAAO,EAAEA,CAAA,KAAMW,gBAAgB,CAAC,CAAC;IAAE,CACtC,CAAC,eACFvE,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC,gCAAgC;MAC5C0C,QAAQ,EAAEH,aAAa,KAAK,CAAE;MAC9BV,OAAO,EAAEA,CAAA,KAAMW,gBAAgB,CAAC,CAAC;IAAE,CACtC,CAAC,eACFvE,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC,uCAAuC;MACnD0C,QAAQ,EAAEH,aAAa,KAAK,CAAE;MAC9BV,OAAO,EAAEA,CAAA,KAAMW,gBAAgB,CAAC,CAAC;IAAE,CACtC,CACC,CAAC;EAEf;AACJ,CAAC;AAED,OAAO,MAAMG,aAAoB,GAAG;EAChCjD,IAAI,EAAE;IACFa,OAAO,EAAE,WAAW;IACpBT,UAAU,EAAE,MAAM;IAClBH,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACZ,QAAQ,MAAE,CAAE;MACnBM,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC,wCAAwC;MACpD6B,OAAO,EAAEA,CAAA,KAAMK,OAAO,CAACC,GAAG,CAAC,sBAAsB;IAAE,CACtD,CAAC,eACFlE,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACX,YAAY,MAAE,CAAE;MACvBK,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC,gCAAgC;MAC5C6B,OAAO,EAAEA,CAAA,KAAMK,OAAO,CAACC,GAAG,CAAC,kBAAkB;IAAE,CAClD,CAAC,eACFlE,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACV,QAAQ,MAAE,CAAE;MACnBI,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC,uCAAuC;MACnD6B,OAAO,EAAEA,CAAA,KAAMK,OAAO,CAACC,GAAG,CAAC,wBAAwB;IAAE,CACxD,CACH;EAEV,CAAC;EACDS,QAAQ,EAAE;IACNrC,OAAO,EAAE;MACLsC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC;MACnC9C,WAAW,EAAE;IACjB,CAAC;IACDF,UAAU,EAAE;MACR+C,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,aAAa,CAAC;MACzC9C,WAAW,EAAE;IACjB,CAAC;IACDL,QAAQ,EAAE;MACNK,WAAW,EAAE;IACjB;EACJ,CAAC;EACDhB,UAAU,EAAE;IACR+D,IAAI,EAAE;MACF/C,WAAW,EAAE;QACTgD,KAAK,EAAE;MACX;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"List/List.stories.js","sources":["../../src/List/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.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"],"names":["meta","List","ListItem","props","Default","WithTransparentBackground","UserIcon","SettingsIcon","HelpIcon","Story","WithBaseBackground","WithLightBackground","WithUnderlineVariant","WithContainerVariant","WithDescription","WithIcon","WithIconsAndDescriptions","WithAvatar","Avatar","WithHandle","WithActions","ChartIcon","EditIcon","TrashIcon","OpenIcon","MoreIcon","WithDisabled","alert","WithActivated","console","WithClickHandlers","WithSelectedItem","selectedIndex","setSelectedIndex","React","Documentation"],"mappings":"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"}

package/List/components/ListItem.d.ts

@@ -15,21 +15,22 @@ interface ListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "titl
     colorMark?: string;
     sidePadding?: "md" | "lg";
 }
-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;
+declare const DecoratableListItem: ({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+declare const ListItem: typeof DecoratableListItem & {
+    original: typeof DecoratableListItem;
     originalName: string;
     displayName: string;
 } & {
-    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;
+    original: typeof DecoratableListItem & {
+        original: typeof DecoratableListItem;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    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;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableListItem & {
+        original: typeof DecoratableListItem;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/List/components/ListItem.js

@@ -1,78 +1,72 @@
-import * as React from "react";
 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: "pointer-events-none opacity-50"
-    },
-    activated: {
-      true: "bg-neutral-light!"
-    },
-    selected: {
-      true: "bg-neutral-light!"
-    },
-    clickable: {
-      true: "cursor-pointer"
+import * as __rspack_external_react from "react";
+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: "pointer-events-none opacity-50"
+        },
+        activated: {
+            true: "bg-neutral-light!"
+        },
+        selected: {
+            true: "bg-neutral-light!"
+        },
+        clickable: {
+            true: "cursor-pointer"
+        }
     }
-  }
 });
-const DecoratableListItem = ({
-  actions,
-  children,
-  className,
-  description,
-  activated,
-  disabled,
-  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({
-      disabled,
-      activated,
-      selected,
-      clickable: Boolean(onClick)
-    }), className)
-  }), 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: "w-full flex items-center gap-md",
-    onClick: onClick
-  }, icon && /*#__PURE__*/React.createElement("div", null, icon), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-xxs grow text-left"
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: "md",
-    as: "div",
-    className: "font-semibold text-neutral-primary"
-  }, title), /*#__PURE__*/React.createElement(Text, {
-    size: "sm",
-    as: "div",
-    className: "text-neutral-strong"
-  }, description))), actions && /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-xs-plus"
-  }, actions)), children);
+const DecoratableListItem = ({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding = "md", onClick, title, ...props })=>{
+    const paddingClasses = "md" === sidePadding ? "px-md" : "pl-lg pr-md";
+    return /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        ...props,
+        tabIndex: 0,
+        className: cn(listItemVariant({
+            disabled,
+            activated,
+            selected,
+            clickable: Boolean(onClick)
+        }), className)
+    }, handle, colorMark && /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        style: {
+            backgroundColor: colorMark
+        },
+        className: "block w-[4px] h-[48px] rounded-lg ml-sm flex-shrink-0"
+    }), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: cn("w-full flex justify-between items-center py-sm-extra", paddingClasses)
+    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "w-full flex items-center gap-md",
+        onClick: onClick
+    }, icon && /*#__PURE__*/ __rspack_external_react.createElement("div", null, icon), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "flex flex-col gap-xxs grow text-left"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Text, {
+        size: "md",
+        as: "div",
+        className: "font-semibold text-neutral-primary"
+    }, title), /*#__PURE__*/ __rspack_external_react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "text-neutral-strong"
+    }, description))), actions && /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "flex items-center gap-xs-plus"
+    }, actions)), children);
 };
 const ListItem = withStaticProps(makeDecoratable("ListItem", DecoratableListItem), {
-  Action: ListItemAction,
-  Handle: ListItemHandle,
-  Icon: ListItemIcon
+    Action: ListItemAction,
+    Handle: ListItemHandle,
+    Icon: ListItemIcon
 });
 export { ListItem };
 

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","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":[]}
+{"version":3,"file":"List/components/ListItem.js","sources":["../../../src/List/components/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"],"names":["listItemVariant","cva","DecoratableListItem","actions","children","className","description","activated","disabled","selected","handle","icon","colorMark","sidePadding","onClick","title","props","paddingClasses","cn","Boolean","Text","ListItem","withStaticProps","makeDecoratable","ListItemAction","ListItemHandle","ListItemIcon"],"mappings":";;;;;;AAOA,MAAMA,kBAAkBC,IACpB;IACI;IACA;IACA;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,UAAU;YACN,MAAM;QACV;QACA,WAAW;YACP,MAAM;QACV;QACA,UAAU;YACN,MAAM;QACV;QACA,WAAW;YACP,MAAM;QACV;IACJ;AACJ;AAgBJ,MAAMC,sBAAsB,CAAC,EACzBC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,WAAW,EACXC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,IAAI,EACJC,SAAS,EACTC,cAAc,IAAI,EAClBC,OAAO,EACPC,KAAK,EACL,GAAGC,OACS;IACZ,MAAMC,iBAAiBJ,AAAgB,SAAhBA,cAAuB,UAAU;IAExD,OAAO,WAAP,GACI,sCAAC;QACI,GAAGG,KAAK;QACT,UAAU;QACV,WAAWE,GACPlB,gBAAgB;YACZQ;YACAD;YACAE;YACA,WAAWU,QAAQL;QACvB,IACAT;OAGHK,QACAE,aAAa,WAAbA,GACG,sCAAC;QACG,OAAO;YAAE,iBAAiBA;QAAU;QACpC,WAAW;sBAGnB,sCAAC;QACG,WAAWM,GACP,wDACAD;qBAGJ,sCAAC;QAAI,WAAW;QAAmC,SAASH;OACvDH,QAAQ,WAARA,GAAQ,sCAAC,aAAKA,OAAAA,WAAAA,GACf,sCAAC;QAAI,WAAW;qBACZ,sCAACS,MAAIA;QACD,MAAM;QACN,IAAI;QACJ,WAAW;OAEVL,QAAAA,WAAAA,GAEL,sCAACK,MAAIA;QAAC,MAAM;QAAM,IAAI;QAAO,WAAW;OACnCd,gBAIZH,WAAW,WAAXA,GAAW,sCAAC;QAAI,WAAW;OAAkCA,WAEjEC;AAGb;AAEA,MAAMiB,WAAWC,gBAAgBC,gBAAgB,YAAYrB,sBAAsB;IAC/E,QAAQsB;IACR,QAAQC;IACR,MAAMC;AACV"}

package/List/components/ListItemAction.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import type { IconButtonProps } from "../../Button/index.js";
 type ListItemActionProps = IconButtonProps;
-declare const ListItemAction: ((props: ListItemActionProps) => React.JSX.Element) & {
-    original: (props: ListItemActionProps) => React.JSX.Element;
+declare const DecoratableListItemAction: (props: ListItemActionProps) => React.JSX.Element;
+declare const ListItemAction: typeof DecoratableListItemAction & {
+    original: typeof DecoratableListItemAction;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ListItemActionProps) => React.JSX.Element) & {
-        original: (props: ListItemActionProps) => React.JSX.Element;
+    original: typeof DecoratableListItemAction & {
+        original: typeof DecoratableListItemAction;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ListItemActionProps) => React.JSX.Element) & {
-        original: (props: ListItemActionProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableListItemAction & {
+        original: typeof DecoratableListItemAction;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/List/components/ListItemAction.js

@@ -1,15 +1,14 @@
-import * as React from "react";
 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",
-    size: "sm"
-  }, props));
-};
+import * as __rspack_external_react from "react";
+const DecoratableListItemAction = (props)=>/*#__PURE__*/ __rspack_external_react.createElement(IconButton, {
+        variant: "ghost",
+        size: "sm",
+        ...props
+    });
 const ListItemAction = withStaticProps(makeDecoratable("ListItemAction", DecoratableListItemAction), {
-  Separator: ListItemSeparator
+    Separator: ListItemSeparator
 });
 export { ListItemAction };
 

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.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":[]}
+{"version":3,"file":"List/components/ListItemAction.js","sources":["../../../src/List/components/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"],"names":["DecoratableListItemAction","props","IconButton","ListItemAction","withStaticProps","makeDecoratable","ListItemSeparator"],"mappings":";;;;AAQA,MAAMA,4BAA4B,CAACC,QACxB,WAAP,GAAO,sCAACC,YAAUA;QAAC,SAAS;QAAS,MAAM;QAAO,GAAGD,KAAK;;AAG9D,MAAME,iBAAiBC,gBACnBC,gBAAgB,kBAAkBL,4BAClC;IACI,WAAWM;AACf"}

package/List/components/ListItemHandle.d.ts

@@ -4,21 +4,22 @@ interface ListItemHandleProps extends Omit<IconProps, "icon" | "label"> {
     icon?: React.ReactElement;
     label?: string;
 }
-declare const ListItemHandle: ((props: ListItemHandleProps) => React.JSX.Element) & {
-    original: (props: ListItemHandleProps) => React.JSX.Element;
+declare const DecoratableListItemHandle: (props: ListItemHandleProps) => React.JSX.Element;
+declare const ListItemHandle: typeof DecoratableListItemHandle & {
+    original: typeof DecoratableListItemHandle;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ListItemHandleProps) => React.JSX.Element) & {
-        original: (props: ListItemHandleProps) => React.JSX.Element;
+    original: typeof DecoratableListItemHandle & {
+        original: typeof DecoratableListItemHandle;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: ListItemHandleProps) => React.JSX.Element) & {
-        original: (props: ListItemHandleProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableListItemHandle & {
+        original: typeof DecoratableListItemHandle;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/List/components/ListItemHandle.js

@@ -1,16 +1,15 @@
-import * as React from "react";
-import { ReactComponent as DragHandleIcon } from "@webiny/icons/drag_indicator.svg";
+import { ReactComponent } from "@webiny/icons/drag_indicator.svg";
 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: "mx-xxs cursor-grab",
-    icon: /*#__PURE__*/React.createElement(DragHandleIcon, null),
-    label: "Drag handle"
-  }, props));
-};
+import * as __rspack_external_react from "react";
+const DecoratableListItemHandle = (props)=>/*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+        size: "md",
+        color: "neutral-light",
+        className: "mx-xxs cursor-grab",
+        icon: /*#__PURE__*/ __rspack_external_react.createElement(ReactComponent, null),
+        label: "Drag handle",
+        ...props
+    });
 const ListItemHandle = makeDecoratable("ListItemHandle", DecoratableListItemHandle);
 export { ListItemHandle };
 

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.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":[]}
+{"version":3,"file":"List/components/ListItemHandle.js","sources":["../../../src/List/components/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"],"names":["DecoratableListItemHandle","props","Icon","DragHandleIcon","ListItemHandle","makeDecoratable"],"mappings":";;;;AAWA,MAAMA,4BAA4B,CAACC,QACxB,WAAP,GACI,sCAACC,MAAIA;QACD,MAAM;QACN,OAAO;QACP,WAAW;QACX,oBAAM,sCAACC,gBAAcA;QACrB,OAAO;QACN,GAAGF,KAAK;;AAKrB,MAAMG,iBAAiBC,gBAAgB,kBAAkBL"}

package/List/components/ListItemIcon.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 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;
+declare const DecoratableListItemIcon: (props: ListItemIconProps) => React.JSX.Element;
+export declare const ListItemIcon: typeof DecoratableListItemIcon & {
+    original: typeof DecoratableListItemIcon;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ListItemIconProps) => React.JSX.Element) & {
-        original: (props: ListItemIconProps) => React.JSX.Element;
+    original: typeof DecoratableListItemIcon & {
+        original: typeof DecoratableListItemIcon;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: ListItemIconProps) => React.JSX.Element) & {
-        original: (props: ListItemIconProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableListItemIcon & {
+        original: typeof DecoratableListItemIcon;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/List/components/ListItemIcon.js

@@ -1,12 +1,12 @@
-import * as React from "react";
 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",
-    color: "inherit"
-  }, props));
-};
-export const ListItemIcon = makeDecoratable("ListItemIcon", DecoratableListItemIcon);
+import { Icon } from "../../Icon/index.js";
+import * as __rspack_external_react from "react";
+const DecoratableListItemIcon = (props)=>/*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+        size: "md",
+        color: "inherit",
+        ...props
+    });
+const ListItemIcon = makeDecoratable("ListItemIcon", DecoratableListItemIcon);
+export { ListItemIcon };
 
 //# sourceMappingURL=ListItemIcon.js.map

package/List/components/ListItemIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Icon","IconComponent","DecoratableListItemIcon","props","createElement","Object","assign","size","color","ListItemIcon"],"sources":["ListItemIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { IconProps as IconComponentProps } from \"~/Icon/index.js\";\nimport { Icon as IconComponent } from \"~/Icon/index.js\";\n\ntype ListItemIconProps = IconComponentProps;\n\nconst DecoratableListItemIcon = (props: ListItemIconProps) => {\n    return <IconComponent size={\"md\"} color={\"inherit\"} {...props} />;\n};\n\nexport const ListItemIcon = makeDecoratable(\"ListItemIcon\", DecoratableListItemIcon);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AAExB,SAASC,IAAI,IAAIC,aAAa;AAI9B,MAAMC,uBAAuB,GAAIC,KAAwB,IAAK;EAC1D,oBAAOL,KAAA,CAAAM,aAAA,CAACH,aAAa,EAAAI,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAE,IAAK;IAACC,KAAK,EAAE;EAAU,GAAKL,KAAK,CAAG,CAAC;AACrE,CAAC;AAED,OAAO,MAAMM,YAAY,GAAGV,eAAe,CAAC,cAAc,EAAEG,uBAAuB,CAAC","ignoreList":[]}
+{"version":3,"file":"List/components/ListItemIcon.js","sources":["../../../src/List/components/ListItemIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { IconProps as IconComponentProps } from \"~/Icon/index.js\";\nimport { Icon as IconComponent } from \"~/Icon/index.js\";\n\ntype ListItemIconProps = IconComponentProps;\n\nconst DecoratableListItemIcon = (props: ListItemIconProps) => {\n    return <IconComponent size={\"md\"} color={\"inherit\"} {...props} />;\n};\n\nexport const ListItemIcon = makeDecoratable(\"ListItemIcon\", DecoratableListItemIcon);\n"],"names":["DecoratableListItemIcon","props","IconComponent","ListItemIcon","makeDecoratable"],"mappings":";;;AAOA,MAAMA,0BAA0B,CAACC,QACtB,WAAP,GAAO,sCAACC,MAAaA;QAAC,MAAM;QAAM,OAAO;QAAY,GAAGD,KAAK;;AAG1D,MAAME,eAAeC,gBAAgB,gBAAgBJ"}

package/List/components/ListItemSeparator.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import { type SeparatorProps } from "../../Separator/index.js";
 type ListItemSeparatorProps = SeparatorProps;
-declare const ListItemSeparator: ((props: ListItemSeparatorProps) => React.JSX.Element) & {
-    original: (props: ListItemSeparatorProps) => React.JSX.Element;
+declare const DecoratableListItemSeparator: (props: ListItemSeparatorProps) => React.JSX.Element;
+declare const ListItemSeparator: typeof DecoratableListItemSeparator & {
+    original: typeof DecoratableListItemSeparator;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ListItemSeparatorProps) => React.JSX.Element) & {
-        original: (props: ListItemSeparatorProps) => React.JSX.Element;
+    original: typeof DecoratableListItemSeparator & {
+        original: typeof DecoratableListItemSeparator;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: ListItemSeparatorProps) => React.JSX.Element) & {
-        original: (props: ListItemSeparatorProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableListItemSeparator & {
+        original: typeof DecoratableListItemSeparator;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/List/components/ListItemSeparator.js

@@ -1,12 +1,11 @@
-import * as React from "react";
 import { makeDecoratable } from "../../utils.js";
 import { Separator } from "../../Separator/index.js";
-const DecoratableListItemSeparator = props => {
-  return /*#__PURE__*/React.createElement(Separator, Object.assign({
-    orientation: "vertical",
-    className: "h-lg mx-sm-plus"
-  }, props));
-};
+import * as __rspack_external_react from "react";
+const DecoratableListItemSeparator = (props)=>/*#__PURE__*/ __rspack_external_react.createElement(Separator, {
+        orientation: "vertical",
+        className: "h-lg mx-sm-plus",
+        ...props
+    });
 const ListItemSeparator = makeDecoratable("ListItemSeparator", DecoratableListItemSeparator);
 export { ListItemSeparator };