@webiny/admin-ui 6.4.0-beta.3 → 6.4.0-beta.5

package/Widget/Widget.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Widget/Widget.stories.js","sources":["../../src/Widget/Widget.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Widget } from \"./Widget.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { List } from \"~/List/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { ReactComponent as ArrowForwardIcon } from \"@webiny/icons/arrow_forward.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { ReactComponent as HistoryIcon } from \"@webiny/icons/history.svg\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as ManageSearchIcon } from \"@webiny/icons/manage_search.svg\";\nimport { ReactComponent as MoreIcon } from \"@webiny/icons/more_vert.svg\";\n\nconst meta: Meta<typeof Widget> = {\n    title: \"Components/Widget\",\n    component: Widget,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f9fafa] p-[50px] rounded-[5px] max-w-[800px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Widget>;\n\nexport const Default: Story = {\n    args: {\n        icon: <Widget.Icon icon={<HistoryIcon />} label={\"Pages icon\"} />,\n        title: \"Widget Title\",\n        variant: \"accent\",\n        children: (\n            <>\n                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const PaddingSmall: Story = {\n    args: {\n        ...Default.args,\n        padding: \"sm\"\n    }\n};\n\nexport const PaddingMedium: Story = {\n    args: {\n        ...Default.args,\n        padding: \"md\"\n    }\n};\n\nexport const WithOutline: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true\n    }\n};\n\nexport const WithFooterStartActions: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true,\n        footerStartActions: (\n            <>\n                <Widget.Action icon={<PlusIcon />}>New Page</Widget.Action>\n                <Widget.Action icon={<PlusIcon />}>New Template</Widget.Action>\n            </>\n        )\n    }\n};\n\nexport const WithFooterEndActions: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true,\n        footerStartActions: undefined,\n        footerEndActions: <Widget.Action>View All</Widget.Action>\n    }\n};\n\nexport const WithBothFooterActions: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true,\n        footerStartActions: (\n            <>\n                <Widget.Action icon={<PlusIcon />}>New Page</Widget.Action>\n                <Widget.Action icon={<PlusIcon />}>New Template</Widget.Action>\n            </>\n        ),\n        footerEndActions: <Widget.Action>View All</Widget.Action>\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        className: \"w-[406px]\",\n        variant: \"accent\",\n        title: \"Pages\",\n        icon: <Widget.Icon icon={<HistoryIcon />} label={\"Pages icon\"} />,\n        description: null,\n        children: <>Build stunning landing pages with an easy-to-use drag and drop editor.</>,\n        footerStartActions: (\n            <>\n                <Widget.Action icon={<PlusIcon />}>New Page</Widget.Action>\n                <Widget.Action icon={<PlusIcon />}>New Template</Widget.Action>\n            </>\n        )\n    }\n};\n\nexport const LightVariant: Story = {\n    args: {\n        variant: \"light\",\n        className: \"w-[406px]\",\n        title: \"Need some assistance?\",\n        icon: <Widget.Icon icon={<NotificationIcon />} label={\"Help icon\"} />,\n        padding: \"md\",\n        children: (\n            <List variant=\"container\" background={\"base\"} className=\"flex flex-col gap-y-sm\">\n                <List.Item\n                    title=\"Start Webiny tour\"\n                    description=\"Let us show you around. You pick what you...\"\n                    actions={<List.Item.Action icon={<ArrowForwardIcon />} />}\n                />\n                <List.Item\n                    title=\"Documentation\"\n                    description=\"Explore the Webiny documentation, learn a...\"\n                    actions={<List.Item.Action icon={<ArrowForwardIcon />} />}\n                />\n                <List.Item\n                    title=\"Contact us\"\n                    description=\"Contact Sales, Explore Partnerships or Sla...\"\n                    actions={<List.Item.Action icon={<ArrowForwardIcon />} />}\n                />\n            </List>\n        )\n    }\n};\n\nexport const BaseVariant: Story = {\n    args: {\n        variant: \"base\",\n        className: \"w-[657px]\",\n        title: \"Review Requests\",\n        icon: <Widget.Icon icon={<ManageSearchIcon />} label={\"Review icon\"} />,\n        headerActions: <Widget.Action>View All</Widget.Action>,\n        padding: \"md\",\n        bodyPadding: false,\n        outline: true,\n        children: (\n            <Tabs\n                separator={true}\n                spacing={\"lg\"}\n                tabs={[\n                    <Tabs.Tab\n                        key={\"inReview\"}\n                        value={\"inReview\"}\n                        trigger={\"In Review (8)\"}\n                        content={\n                            <>\n                                <List\n                                    variant=\"container\"\n                                    background={\"light\"}\n                                    className=\"flex flex-col gap-y-sm\"\n                                >\n                                    <List.Item\n                                        title=\"Page: Product Group\"\n                                        description=\"Marketing review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#ef4444\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Article: Region\"\n                                        description=\"Legal review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#ef4444\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Article: Organization\"\n                                        description=\"Specialist review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#3b82f6\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Product Group: Products\"\n                                        description=\"Marketing review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#eab308\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Page: Product Group\"\n                                        description=\"Marketing review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#eab308\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                </List>\n                            </>\n                        }\n                    />,\n                    <Tabs.Tab\n                        key={\"approved\"}\n                        value={\"approved\"}\n                        trigger={\"Approved\"}\n                        content={<>No review requests approved yet.</>}\n                    />\n                ]}\n            />\n        )\n    }\n};\n\nexport const WithSmallElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"sm\"\n    }\n};\n\nexport const WithMediumElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"md\"\n    }\n};\n\nexport const WithLargeElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"lg\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Widget.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const WithoutIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: undefined\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <Widget {...args} />;\n    },\n    args: {\n        title: \"Widget title goes here\",\n        description: \"Widget description goes here\",\n        children: <>This is widget content. Anything can go in here.</>,\n        footerStartActions: (\n            <>\n                <Button variant={\"secondary\"} text={\"Cancel\"} />\n                <Button variant={\"primary\"} text={\"Confirm\"} />\n            </>\n        ),\n        padding: \"sm\",\n        elevation: \"sm\"\n    },\n    argTypes: {\n        title: {\n            description: \"The title displayed at the top of the widget\",\n            control: \"text\"\n        },\n        description: {\n            description: \"A description displayed below the title\",\n            control: \"text\"\n        },\n        children: {\n            description:\n                \"The main content of the widget. Please refer to the example code for details on usage.\"\n        },\n        footerEndActions: {\n            description:\n                \"Buttons or other interactive elements displayed at the bottom of the widget. Please refer to the example code for details on usage.\"\n        },\n        padding: {\n            description: \"Controls the amount of padding inside the widget\",\n            control: \"select\",\n            options: [\"none\", \"standard\", \"comfortable\"]\n        },\n        elevation: {\n            description: \"Controls the shadow depth of the widget\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        }\n    }\n};\n"],"names":["meta","Widget","Story","Default","HistoryIcon","PaddingSmall","PaddingMedium","WithOutline","WithFooterStartActions","PlusIcon","WithFooterEndActions","undefined","WithBothFooterActions","AccentVariant","LightVariant","NotificationIcon","List","ArrowForwardIcon","BaseVariant","ManageSearchIcon","Tabs","MoreIcon","WithSmallElevation","WithMediumElevation","WithLargeElevation","WithIcon","WithoutIcon","Documentation","args","Button"],"mappings":"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"}
+{"version":3,"file":"Widget/Widget.stories.js","sources":["../../src/Widget/Widget.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Widget } from \"./Widget.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { List } from \"~/List/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { ReactComponent as ArrowForwardIcon } from \"@webiny/icons/arrow_forward.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { ReactComponent as HistoryIcon } from \"@webiny/icons/history.svg\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as ManageSearchIcon } from \"@webiny/icons/manage_search.svg\";\nimport { ReactComponent as MoreIcon } from \"@webiny/icons/more_vert.svg\";\n\nconst meta: Meta<typeof Widget> = {\n    title: \"Components/Widget\",\n    component: Widget,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f9fafa] p-[50px] rounded-[5px] max-w-[800px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Widget>;\n\nexport const Default: Story = {\n    args: {\n        icon: <Widget.Icon icon={<HistoryIcon />} label={\"Pages icon\"} />,\n        title: \"Widget Title\",\n        variant: \"accent\",\n        children: (\n            <>\n                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const PaddingSmall: Story = {\n    args: {\n        ...Default.args,\n        padding: \"sm\"\n    }\n};\n\nexport const PaddingMedium: Story = {\n    args: {\n        ...Default.args,\n        padding: \"md\"\n    }\n};\n\nexport const WithOutline: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true\n    }\n};\n\nexport const WithFooterStartActions: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true,\n        footerStartActions: (\n            <>\n                <Widget.Action icon={<PlusIcon />}>New Page</Widget.Action>\n                <Widget.Action icon={<PlusIcon />}>New Template</Widget.Action>\n            </>\n        )\n    }\n};\n\nexport const WithFooterEndActions: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true,\n        footerStartActions: undefined,\n        footerEndActions: <Widget.Action>View All</Widget.Action>\n    }\n};\n\nexport const WithBothFooterActions: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true,\n        footerStartActions: (\n            <>\n                <Widget.Action icon={<PlusIcon />}>New Page</Widget.Action>\n                <Widget.Action icon={<PlusIcon />}>New Template</Widget.Action>\n            </>\n        ),\n        footerEndActions: <Widget.Action>View All</Widget.Action>\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        className: \"w-[406px]\",\n        variant: \"accent\",\n        title: \"Pages\",\n        icon: <Widget.Icon icon={<HistoryIcon />} label={\"Pages icon\"} />,\n        description: null,\n        children: <>Build stunning landing pages with an easy-to-use drag and drop editor.</>,\n        footerStartActions: (\n            <>\n                <Widget.Action icon={<PlusIcon />}>New Page</Widget.Action>\n                <Widget.Action icon={<PlusIcon />}>New Template</Widget.Action>\n            </>\n        )\n    }\n};\n\nexport const LightVariant: Story = {\n    args: {\n        variant: \"light\",\n        className: \"w-[406px]\",\n        title: \"Need some assistance?\",\n        icon: <Widget.Icon icon={<NotificationIcon />} label={\"Help icon\"} />,\n        padding: \"md\",\n        children: (\n            <List variant=\"container\" background={\"base\"} className=\"flex flex-col gap-y-sm\">\n                <List.Item\n                    title=\"Start Webiny tour\"\n                    description=\"Let us show you around. You pick what you...\"\n                    actions={<List.Item.Action icon={<ArrowForwardIcon />} />}\n                />\n                <List.Item\n                    title=\"Documentation\"\n                    description=\"Explore the Webiny documentation, learn a...\"\n                    actions={<List.Item.Action icon={<ArrowForwardIcon />} />}\n                />\n                <List.Item\n                    title=\"Contact us\"\n                    description=\"Contact Sales, Explore Partnerships or Sla...\"\n                    actions={<List.Item.Action icon={<ArrowForwardIcon />} />}\n                />\n            </List>\n        )\n    }\n};\n\nexport const BaseVariant: Story = {\n    args: {\n        variant: \"base\",\n        className: \"w-[657px]\",\n        title: \"Review Requests\",\n        icon: <Widget.Icon icon={<ManageSearchIcon />} label={\"Review icon\"} />,\n        headerActions: <Widget.Action>View All</Widget.Action>,\n        padding: \"md\",\n        bodyPadding: false,\n        outline: true,\n        children: (\n            <Tabs\n                separator={true}\n                spacing={\"lg\"}\n                tabs={[\n                    <Tabs.Tab\n                        key={\"inReview\"}\n                        value={\"inReview\"}\n                        trigger={\"In Review (8)\"}\n                        content={\n                            <>\n                                <List\n                                    variant=\"container\"\n                                    background={\"light\"}\n                                    className=\"flex flex-col gap-y-sm\"\n                                >\n                                    <List.Item\n                                        title=\"Page: Product Group\"\n                                        description=\"Marketing review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#ef4444\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Article: Region\"\n                                        description=\"Legal review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#ef4444\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Article: Organization\"\n                                        description=\"Specialist review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#3b82f6\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Product Group: Products\"\n                                        description=\"Marketing review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#eab308\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Page: Product Group\"\n                                        description=\"Marketing review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#eab308\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                </List>\n                            </>\n                        }\n                    />,\n                    <Tabs.Tab\n                        key={\"approved\"}\n                        value={\"approved\"}\n                        trigger={\"Approved\"}\n                        content={<>No review requests approved yet.</>}\n                    />\n                ]}\n            />\n        )\n    }\n};\n\nexport const WithSmallElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"sm\"\n    }\n};\n\nexport const WithMediumElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"md\"\n    }\n};\n\nexport const WithLargeElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"lg\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Widget.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const WithoutIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: undefined\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <Widget {...args} />;\n    },\n    args: {\n        title: \"Widget title goes here\",\n        description: \"Widget description goes here\",\n        children: <>This is widget content. Anything can go in here.</>,\n        footerStartActions: (\n            <>\n                <Button variant={\"secondary\"} text={\"Cancel\"} />\n                <Button variant={\"primary\"} text={\"Confirm\"} />\n            </>\n        ),\n        padding: \"sm\",\n        elevation: \"sm\"\n    },\n    argTypes: {\n        title: {\n            description: \"The title displayed at the top of the widget\",\n            control: \"text\"\n        },\n        description: {\n            description: \"A description displayed below the title\",\n            control: \"text\"\n        },\n        children: {\n            description:\n                \"The main content of the widget. Please refer to the example code for details on usage.\"\n        },\n        footerEndActions: {\n            description:\n                \"Buttons or other interactive elements displayed at the bottom of the widget. Please refer to the example code for details on usage.\"\n        },\n        padding: {\n            description: \"Controls the amount of padding inside the widget\",\n            control: \"select\",\n            options: [\"none\", \"standard\", \"comfortable\"]\n        },\n        elevation: {\n            description: \"Controls the shadow depth of the widget\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        }\n    }\n};\n"],"names":["meta","Widget","Story","Default","HistoryIcon","PaddingSmall","PaddingMedium","WithOutline","WithFooterStartActions","PlusIcon","WithFooterEndActions","undefined","WithBothFooterActions","AccentVariant","LightVariant","NotificationIcon","List","ArrowForwardIcon","BaseVariant","ManageSearchIcon","Tabs","MoreIcon","WithSmallElevation","WithMediumElevation","WithLargeElevation","WithIcon","WithoutIcon","Documentation","args","Button"],"mappings":"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"}

package/exports/admin/ui.d.ts

@@ -17,6 +17,7 @@ export { Drawer } from "../../Drawer/index.js";
 export { DropdownMenu } from "../../DropdownMenu/index.js";
 export { DynamicFieldset } from "../../DynamicFieldset/index.js";
 export { FilePicker } from "../../FilePicker/index.js";
+export { FillViewportHeight, FillViewportWidth, FillViewport } from "../../FillViewport/index.js";
 export { Grid } from "../../Grid/index.js";
 export { HeaderBar } from "../../HeaderBar/index.js";
 export { Heading } from "../../Heading/index.js";

package/exports/admin/ui.js

@@ -17,6 +17,7 @@ export { Drawer } from "../../Drawer/index.js";
 export { DropdownMenu } from "../../DropdownMenu/index.js";
 export { DynamicFieldset } from "../../DynamicFieldset/index.js";
 export { FilePicker } from "../../FilePicker/index.js";
+export { FillViewport, FillViewportHeight, FillViewportWidth } from "../../FillViewport/index.js";
 export { Grid } from "../../Grid/index.js";
 export { HeaderBar } from "../../HeaderBar/index.js";
 export { Heading } from "../../Heading/index.js";

package/index.d.ts

@@ -10,6 +10,7 @@ export * from "./CodeEditor/index.js";
 export * from "./ColorPicker/index.js";
 export * from "./Calendar/index.js";
 export * from "./DataList/index.js";
+export * from "./DragCursor/index.js";
 export * from "./DataTable/index.js";
 export * from "./DatePicker/index.js";
 export * from "./DelayedOnChange/index.js";
@@ -18,6 +19,7 @@ export * from "./Drawer/index.js";
 export * from "./DropdownMenu/index.js";
 export * from "./DynamicFieldset/index.js";
 export * from "./FilePicker/index.js";
+export * from "./FillViewport/index.js";
 export * from "./FormComponent/index.js";
 export * from "./Grid/index.js";
 export * from "./HeaderBar/index.js";

package/index.js

@@ -10,6 +10,7 @@ export * from "./CodeEditor/index.js";
 export * from "./ColorPicker/index.js";
 export * from "./Calendar/index.js";
 export * from "./DataList/index.js";
+export * from "./DragCursor/index.js";
 export * from "./DataTable/index.js";
 export * from "./DatePicker/index.js";
 export * from "./DelayedOnChange/index.js";
@@ -18,6 +19,7 @@ export * from "./Drawer/index.js";
 export * from "./DropdownMenu/index.js";
 export * from "./DynamicFieldset/index.js";
 export * from "./FilePicker/index.js";
+export * from "./FillViewport/index.js";
 export * from "./FormComponent/index.js";
 export * from "./Grid/index.js";
 export * from "./HeaderBar/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/admin-ui",
-	"version": "6.4.0-beta.3",
+	"version": "6.4.0-beta.5",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -19,14 +19,14 @@
 		"@monaco-editor/react": "4.7.0",
 		"@radix-ui/react-scroll-area": "1.2.10",
 		"@tanstack/react-table": "8.21.3",
-		"@webiny/icons": "6.4.0-beta.3",
-		"@webiny/react-composition": "6.4.0-beta.3",
-		"@webiny/utils": "6.4.0-beta.3",
+		"@webiny/icons": "6.4.0-beta.5",
+		"@webiny/react-composition": "6.4.0-beta.5",
+		"@webiny/utils": "6.4.0-beta.5",
 		"bytes": "3.1.2",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",
 		"cmdk": "1.1.1",
-		"date-fns": "4.2.1",
+		"date-fns": "4.3.0",
 		"lodash": "4.18.1",
 		"minimatch": "10.2.5",
 		"mobx": "6.15.3",
@@ -35,7 +35,7 @@
 		"react": "18.3.1",
 		"react-color": "2.19.3",
 		"react-custom-scrollbars": "4.2.1",
-		"react-day-picker": "9.14.0",
+		"react-day-picker": "10.0.1",
 		"react-dnd": "16.0.1",
 		"react-virtualized": "9.22.6",
 		"sonner": "2.0.7",
@@ -46,32 +46,29 @@
 	},
 	"devDependencies": {
 		"@fortawesome/free-solid-svg-icons": "7.2.0",
-		"@storybook/addon-a11y": "10.4.0",
-		"@storybook/addon-docs": "10.4.0",
-		"@storybook/addon-webpack5-compiler-swc": "4.0.3",
-		"@storybook/react-webpack5": "10.4.0",
-		"@svgr/webpack": "8.1.0",
+		"@rsbuild/core": "2.0.7",
+		"@rsbuild/plugin-svgr": "2.0.2",
+		"@storybook/addon-a11y": "10.4.1",
+		"@storybook/addon-docs": "10.4.1",
+		"@storybook/react": "10.4.1",
 		"@tailwindcss/postcss": "4.3.0",
-		"@types/react": "18.3.28",
+		"@types/react": "18.3.29",
 		"@types/react-color": "3.0.13",
 		"@types/react-custom-scrollbars": "4.0.13",
 		"@types/react-virtualized": "9.22.3",
-		"@webiny/build-tools": "6.4.0-beta.3",
-		"@webiny/project": "6.4.0-beta.3",
+		"@webiny/build-tools": "6.4.0-beta.5",
+		"@webiny/project": "6.4.0-beta.5",
 		"chalk": "5.6.2",
-		"css-loader": "7.1.4",
-		"file-loader": "6.2.0",
 		"oxfmt": "0.51.0",
-		"postcss-loader": "8.2.1",
 		"rimraf": "6.1.3",
-		"sass": "1.99.0",
-		"storybook": "10.4.0",
+		"sass": "1.100.0",
+		"storybook": "10.4.1",
+		"storybook-react-rsbuild": "3.3.4",
 		"typescript": "6.0.3",
-		"vitest": "4.1.6"
+		"vitest": "4.1.7"
 	},
 	"publishConfig": {
-		"access": "public",
-		"directory": "dist"
+		"access": "public"
 	},
 	"scripts": {
 		"storybook": "storybook dev -p 6006",
@@ -87,5 +84,7 @@
 			]
 		}
 	},
-	"gitHead": "2e58681d4344024bfb60e6180338e2f154ec87f0"
+	"webiny": {
+		"publishFrom": "dist"
+	}
 }

package/theme.css

@@ -231,6 +231,8 @@
   --spacing-sidebar-collapsed: 44px;
   --spacing-sidebar-expanded: 256px;
   --spacing-header: 45px;
+  --wb-spacing-toolbar: 329px;
+  --wb-spacing-sidebar: 329px;
   --spacing-main-content: calc(100vh - var(--spacing-header));
 
   /* With TW4, `leading-none` maps to `--spacing-none`, which is 0px. So, we
@@ -349,7 +351,7 @@
 @utility fill-grid {
   background-image: radial-gradient(var(--color-neutral-strong) 1px, transparent 0px);
   background-size: 15px 15px;
-  @apply bg-neutral-light;
+  @apply bg-neutral-subtle;
 }
 
 @layer base {

package/utils.js

@@ -27,6 +27,7 @@ const twMerge = extendTailwindMerge({
                 "border-neutral-black",
                 "border-neutral-dark",
                 "border-neutral-dimmed",
+                "border-neutral-dimmed-darker",
                 "border-neutral-muted",
                 "border-neutral-strong",
                 "border-neutral-subtle",

package/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/utils.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { generateId as baseGenerateId } from \"@webiny/utils/generateId.js\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nexport { makeDecoratable } from \"@webiny/react-composition\";\n\nconst twMerge = extendTailwindMerge({\n    override: {\n        theme: {\n            borderWidth: [\"sm\", \"md\", \"none\"]\n        },\n        classGroups: {\n            \"border-color\": [\n                \"border-transparent\",\n                \"border-white\",\n                \"border-accent\",\n                \"border-accent-default\",\n                \"border-accent-dimmed\",\n                \"border-accent-subtle\",\n                \"border-destructive\",\n                \"border-destructive-default\",\n                \"border-destructive-subtle\",\n                \"border-neutral\",\n                \"border-neutral-base\",\n                \"border-neutral-black\",\n                \"border-neutral-dark\",\n                \"border-neutral-dimmed\",\n                \"border-neutral-muted\",\n                \"border-neutral-strong\",\n                \"border-neutral-subtle\",\n                \"border-success\",\n                \"border-success-default\",\n                \"border-success-subtle\"\n            ],\n            \"border-style\": [\"border-solid\", \"border-dashed\", \"border-dotted\"],\n            \"ring-color\": [\n                \"ring-primary\",\n                \"ring-primary-dimmed\",\n                \"ring-primary-strong\",\n                \"ring-primary-subtle\",\n                \"ring-success\",\n                \"ring-success-dimmed\",\n                \"ring-success-strong\",\n                \"ring-success-subtle\"\n            ],\n            \"ring-w\": [\"ring-sm\", \"ring-md\", \"ring-lg\"],\n            \"font-size\": [\n                \"text-h1\",\n                \"text-h2\",\n                \"text-h3\",\n                \"text-h4\",\n                \"text-h5\",\n                \"text-h6\",\n                \"text-sm\",\n                \"text-md\",\n                \"text-lg\",\n                \"text-xl\",\n                \"text-xxl\",\n                \"text-3xl\",\n                \"text-4xl\"\n            ]\n        }\n    },\n    extend: {\n        theme: {\n            padding: [\n                \"lg\",\n                \"md\",\n                \"md-extra\",\n                \"none\",\n                \"sm\",\n                \"sm-extra\",\n                \"sm-plus\",\n                \"xl\",\n                \"xs\",\n                \"xs-plus\",\n                \"xxl\",\n                \"xxs\"\n            ],\n            margin: [\n                \"lg\",\n                \"md\",\n                \"md-plus\",\n                \"none\",\n                \"sm\",\n                \"sm-extra\",\n                \"sm-plus\",\n                \"xl\",\n                \"xs\",\n                \"xs-plus\",\n                \"xxl\",\n                \"xxs\"\n            ],\n            spacing: [\n                \"3xl\",\n                \"lg\",\n                \"md\",\n                \"md-plus\",\n                \"none\",\n                \"sm\",\n                \"sm-extra\",\n                \"sm-plus\",\n                \"xl\",\n                \"xs\",\n                \"xs-plus\",\n                \"xxl\",\n                \"xxs\",\n                \"sidebar-collapsed\",\n                \"sidebar-expanded\"\n            ]\n        }\n    }\n});\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n\nexport const generateId = (initialId?: string) => {\n    if (initialId) {\n        return initialId;\n    }\n    return \"\" + baseGenerateId(4);\n};\n\nexport const withStaticProps = <TComponent extends React.ComponentType<any>, TProps>(\n    component: TComponent,\n    props: TProps\n) => {\n    return Object.assign(component, props) as TComponent & TProps;\n};\n\nexport function createComponentPropsProvider<TProps extends Record<string, any>>() {\n    const PropsContext = React.createContext<TProps>({} as TProps);\n\n    type PropsProviderProps = {\n        props: TProps;\n        children: React.ReactNode;\n    };\n\n    const PropsProvider: React.ComponentType<PropsProviderProps> = ({\n        props,\n        children\n    }: PropsProviderProps) => {\n        return <PropsContext.Provider value={props}>{children}</PropsContext.Provider>;\n    };\n\n    const useProps = () => {\n        return React.useContext(PropsContext);\n    };\n\n    return [PropsProvider, useProps] as const;\n}\n\nexport function omit<T extends object, K extends keyof T>(obj: T, keys: K[]): Omit<T, K> {\n    const result = { ...obj };\n    keys.forEach(key => delete result[key]);\n    return result;\n}\n\nexport { cva, type VariantProps };\n"],"names":["twMerge","extendTailwindMerge","cn","inputs","clsx","generateId","initialId","baseGenerateId","withStaticProps","component","props","Object","createComponentPropsProvider","PropsContext","React","PropsProvider","children","useProps","omit","obj","keys","result","key"],"mappings":";;;;AAOA,MAAMA,UAAUC,oBAAoB;IAChC,UAAU;QACN,OAAO;YACH,aAAa;gBAAC;gBAAM;gBAAM;aAAO;QACrC;QACA,aAAa;YACT,gBAAgB;gBACZ;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,gBAAgB;gBAAC;gBAAgB;gBAAiB;aAAgB;YAClE,cAAc;gBACV;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,UAAU;gBAAC;gBAAW;gBAAW;aAAU;YAC3C,aAAa;gBACT;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;IACJ;IACA,QAAQ;QACJ,OAAO;YACH,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,QAAQ;gBACJ;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;IACJ;AACJ;AAEO,SAASC,GAAG,GAAGC,MAAoB;IACtC,OAAOH,QAAQI,KAAKD;AACxB;AAEO,MAAME,mBAAa,CAACC;IACvB,IAAIA,WACA,OAAOA;IAEX,OAAO,KAAKC,WAAe;AAC/B;AAEO,MAAMC,kBAAkB,CAC3BC,WACAC,QAEOC,OAAO,MAAM,CAACF,WAAWC;AAG7B,SAASE;IACZ,MAAMC,eAAe,WAAfA,GAAeC,MAAAA,aAAmB,CAAS,CAAC;IAOlD,MAAMC,gBAAyD,CAAC,EAC5DL,KAAK,EACLM,QAAQ,EACS,GACV,WAAP,GAAO,oBAACH,aAAa,QAAQ;YAAC,OAAOH;WAAQM;IAGjD,MAAMC,WAAW,IACNH,MAAAA,UAAgB,CAACD;IAG5B,OAAO;QAACE;QAAeE;KAAS;AACpC;AAEO,SAASC,KAA0CC,GAAM,EAAEC,IAAS;IACvE,MAAMC,SAAS;QAAE,GAAGF,GAAG;IAAC;IACxBC,KAAK,OAAO,CAACE,CAAAA,MAAO,OAAOD,MAAM,CAACC,IAAI;IACtC,OAAOD;AACX"}
+{"version":3,"file":"utils.js","sources":["../src/utils.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { generateId as baseGenerateId } from \"@webiny/utils/generateId.js\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nexport { makeDecoratable } from \"@webiny/react-composition\";\n\nconst twMerge = extendTailwindMerge({\n    override: {\n        theme: {\n            borderWidth: [\"sm\", \"md\", \"none\"]\n        },\n        classGroups: {\n            \"border-color\": [\n                \"border-transparent\",\n                \"border-white\",\n                \"border-accent\",\n                \"border-accent-default\",\n                \"border-accent-dimmed\",\n                \"border-accent-subtle\",\n                \"border-destructive\",\n                \"border-destructive-default\",\n                \"border-destructive-subtle\",\n                \"border-neutral\",\n                \"border-neutral-base\",\n                \"border-neutral-black\",\n                \"border-neutral-dark\",\n                \"border-neutral-dimmed\",\n                \"border-neutral-dimmed-darker\",\n                \"border-neutral-muted\",\n                \"border-neutral-strong\",\n                \"border-neutral-subtle\",\n                \"border-success\",\n                \"border-success-default\",\n                \"border-success-subtle\"\n            ],\n            \"border-style\": [\"border-solid\", \"border-dashed\", \"border-dotted\"],\n            \"ring-color\": [\n                \"ring-primary\",\n                \"ring-primary-dimmed\",\n                \"ring-primary-strong\",\n                \"ring-primary-subtle\",\n                \"ring-success\",\n                \"ring-success-dimmed\",\n                \"ring-success-strong\",\n                \"ring-success-subtle\"\n            ],\n            \"ring-w\": [\"ring-sm\", \"ring-md\", \"ring-lg\"],\n            \"font-size\": [\n                \"text-h1\",\n                \"text-h2\",\n                \"text-h3\",\n                \"text-h4\",\n                \"text-h5\",\n                \"text-h6\",\n                \"text-sm\",\n                \"text-md\",\n                \"text-lg\",\n                \"text-xl\",\n                \"text-xxl\",\n                \"text-3xl\",\n                \"text-4xl\"\n            ]\n        }\n    },\n    extend: {\n        theme: {\n            padding: [\n                \"lg\",\n                \"md\",\n                \"md-extra\",\n                \"none\",\n                \"sm\",\n                \"sm-extra\",\n                \"sm-plus\",\n                \"xl\",\n                \"xs\",\n                \"xs-plus\",\n                \"xxl\",\n                \"xxs\"\n            ],\n            margin: [\n                \"lg\",\n                \"md\",\n                \"md-plus\",\n                \"none\",\n                \"sm\",\n                \"sm-extra\",\n                \"sm-plus\",\n                \"xl\",\n                \"xs\",\n                \"xs-plus\",\n                \"xxl\",\n                \"xxs\"\n            ],\n            spacing: [\n                \"3xl\",\n                \"lg\",\n                \"md\",\n                \"md-plus\",\n                \"none\",\n                \"sm\",\n                \"sm-extra\",\n                \"sm-plus\",\n                \"xl\",\n                \"xs\",\n                \"xs-plus\",\n                \"xxl\",\n                \"xxs\",\n                \"sidebar-collapsed\",\n                \"sidebar-expanded\"\n            ]\n        }\n    }\n});\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n\nexport const generateId = (initialId?: string) => {\n    if (initialId) {\n        return initialId;\n    }\n    return \"\" + baseGenerateId(4);\n};\n\nexport const withStaticProps = <TComponent extends React.ComponentType<any>, TProps>(\n    component: TComponent,\n    props: TProps\n) => {\n    return Object.assign(component, props) as TComponent & TProps;\n};\n\nexport function createComponentPropsProvider<TProps extends Record<string, any>>() {\n    const PropsContext = React.createContext<TProps>({} as TProps);\n\n    type PropsProviderProps = {\n        props: TProps;\n        children: React.ReactNode;\n    };\n\n    const PropsProvider: React.ComponentType<PropsProviderProps> = ({\n        props,\n        children\n    }: PropsProviderProps) => {\n        return <PropsContext.Provider value={props}>{children}</PropsContext.Provider>;\n    };\n\n    const useProps = () => {\n        return React.useContext(PropsContext);\n    };\n\n    return [PropsProvider, useProps] as const;\n}\n\nexport function omit<T extends object, K extends keyof T>(obj: T, keys: K[]): Omit<T, K> {\n    const result = { ...obj };\n    keys.forEach(key => delete result[key]);\n    return result;\n}\n\nexport { cva, type VariantProps };\n"],"names":["twMerge","extendTailwindMerge","cn","inputs","clsx","generateId","initialId","baseGenerateId","withStaticProps","component","props","Object","createComponentPropsProvider","PropsContext","React","PropsProvider","children","useProps","omit","obj","keys","result","key"],"mappings":";;;;AAOA,MAAMA,UAAUC,oBAAoB;IAChC,UAAU;QACN,OAAO;YACH,aAAa;gBAAC;gBAAM;gBAAM;aAAO;QACrC;QACA,aAAa;YACT,gBAAgB;gBACZ;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,gBAAgB;gBAAC;gBAAgB;gBAAiB;aAAgB;YAClE,cAAc;gBACV;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,UAAU;gBAAC;gBAAW;gBAAW;aAAU;YAC3C,aAAa;gBACT;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;IACJ;IACA,QAAQ;QACJ,OAAO;YACH,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,QAAQ;gBACJ;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;IACJ;AACJ;AAEO,SAASC,GAAG,GAAGC,MAAoB;IACtC,OAAOH,QAAQI,KAAKD;AACxB;AAEO,MAAME,mBAAa,CAACC;IACvB,IAAIA,WACA,OAAOA;IAEX,OAAO,KAAKC,WAAe;AAC/B;AAEO,MAAMC,kBAAkB,CAC3BC,WACAC,QAEOC,OAAO,MAAM,CAACF,WAAWC;AAG7B,SAASE;IACZ,MAAMC,eAAe,WAAfA,GAAeC,MAAAA,aAAmB,CAAS,CAAC;IAOlD,MAAMC,gBAAyD,CAAC,EAC5DL,KAAK,EACLM,QAAQ,EACS,GACV,WAAP,GAAO,oBAACH,aAAa,QAAQ;YAAC,OAAOH;WAAQM;IAGjD,MAAMC,WAAW,IACNH,MAAAA,UAAgB,CAACD;IAG5B,OAAO;QAACE;QAAeE;KAAS;AACpC;AAEO,SAASC,KAA0CC,GAAM,EAAEC,IAAS;IACvE,MAAMC,SAAS;QAAE,GAAGF,GAAG;IAAC;IACxBC,KAAK,OAAO,CAACE,CAAAA,MAAO,OAAOD,MAAM,CAACC,IAAI;IACtC,OAAOD;AACX"}