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

package/Dialog/Dialog.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","library","fas","Dialog","Button","DropdownMenu","ReactComponent","NotificationIcon","Tabs","IconPicker","add","meta","title","component","argTypes","Default","args","size","trigger","createElement","variant","text","description","info","Fragment","href","children","onOpenChange","opened","console","log","actions","CancelButton","ConfirmButton","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SizeFullScreen","ControlledVisibility","render","props","open","setOpen","onClick","Object","assign","WithOpenCloseEventHandler","onClose","onOpen","WithDropdownMenu","Item","content","WithoutCloseButton","showCloseButton","AlertDialog","DropdownMenuInDialog","DropdownIconPickerInDialog","value","setValue","icons","prefix","name","onChange","WithIcon","icon","Icon","label","PreventOutsideDismiss","dismissible","WithTabs","bodyPadding","spacing","tabs","Tab","key","Documentation","control","options","defaultValue"],"sources":["Dialog.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Dialog } from \"./Dialog\";\nimport { Button } from \"~/Button\";\nimport { DropdownMenu } from \"~/DropdownMenu\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs\";\nimport { IconPicker } from \"~/IconPicker\";\n\n// @ts-expect-error\nlibrary.add(fas);\n\nconst meta: Meta<typeof Dialog> = {\n    title: \"Components/Dialog\",\n    component: Dialog,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Dialog>;\n\nexport const Default: Story = {\n    args: {\n        size: \"md\",\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        title: \"Dialog Title\",\n        description: \"A short dialog description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\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        onOpenChange: opened => {\n            console.log(`Dialog is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        actions: (\n            <>\n                <Dialog.CancelButton />\n                <Dialog.ConfirmButton />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SizeFullScreen: Story = {\n    args: {\n        ...Default.args,\n        size: \"full\"\n    }\n};\n\nexport const ControlledVisibility: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text={\"Open\"} onClick={() => setOpen(true)} />\n                <Dialog\n                    {...props}\n                    open={open}\n                    onOpenChange={open => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                    }}\n                />\n            </>\n        );\n    },\n    args: { ...Default.args, trigger: null }\n};\n\nexport const WithOpenCloseEventHandler: Story = {\n    args: {\n        ...Default.args,\n        onClose: () => {\n            console.log(\"onClose triggered\");\n        },\n        onOpen: () => {\n            console.log(\"onOpen triggered\");\n        }\n    }\n};\n\nexport const WithDropdownMenu: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item\n                        text={\"Open Dialog\"}\n                        content={\"Open Dialog\"}\n                        onClick={() => setOpen(true)}\n                    />\n                </DropdownMenu>\n\n                <Dialog {...props} open={open} onOpenChange={() => setOpen(false)} />\n            </>\n        );\n    },\n    args: { ...Default.args, trigger: null }\n};\n\nexport const WithoutCloseButton: Story = {\n    args: { ...Default.args, showCloseButton: false }\n};\n\nexport const AlertDialog: Story = {\n    args: {\n        ...Default.args,\n        info: null,\n        showCloseButton: false,\n        title: \"Confirm Action\",\n        description: \"Are you sure you want to delete this item?\",\n        children: (\n            <>\n                <p>This action cannot be undone.</p>\n                <p>Deleted items cannot be recovered.</p>\n            </>\n        )\n    }\n};\n\nexport const DropdownMenuInDialog: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item content={\"Billing\"} />\n                    <DropdownMenu.Item content={\"Settings\"} />\n                    <DropdownMenu.Item content={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\n\nexport const DropdownIconPickerInDialog: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        return (\n            <Dialog {...args}>\n                <IconPicker\n                    icons={[\n                        { prefix: \"fas\", name: \"trash-restore-alt\" },\n                        { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n                        { prefix: \"fas\", name: \"naira-sign\" },\n                        { prefix: \"fas\", name: \"cart-arrow-down\" },\n                        { prefix: \"fas\", name: \"walkie-talkie\" },\n                        { prefix: \"fas\", name: \"file-edit\" },\n                        { prefix: \"fas\", name: \"file-pen\" },\n                        { prefix: \"fas\", name: \"receipt\" },\n                        { prefix: \"fas\", name: \"pen-square\" },\n                        { prefix: \"fas\", name: \"pencil-square\" },\n                        { prefix: \"fas\", name: \"square-pen\" },\n                        { prefix: \"fas\", name: \"suitcase-rolling\" },\n                        { prefix: \"fas\", name: \"person-circle-exclamation\" },\n                        { prefix: \"fas\", name: \"chevron-down\" },\n                        { prefix: \"fas\", name: \"battery\" },\n                        { prefix: \"fas\", name: \"battery-5\" },\n                        { prefix: \"fas\", name: \"battery-full\" },\n                        { prefix: \"fas\", name: \"skull-crossbones\" },\n                        { prefix: \"fas\", name: \"code-compare\" },\n                        { prefix: \"fas\", name: \"list-dots\" },\n                        { prefix: \"fas\", name: \"list-ul\" },\n                        { prefix: \"fas\", name: \"school-lock\" },\n                        { prefix: \"fas\", name: \"tower-cell\" },\n                        { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n                        { prefix: \"fas\", name: \"down-long\" },\n                        { prefix: \"fas\", name: \"ranking-star\" },\n                        { prefix: \"fas\", name: \"chess-king\" },\n                        { prefix: \"fas\", name: \"person-harassing\" },\n                        { prefix: \"fas\", name: \"brazilian-real-sign\" },\n                        { prefix: \"fas\", name: \"landmark-alt\" }\n                    ]}\n                    value={value}\n                    onChange={value => {\n                        console.log(\"Selected icon:\", value);\n                        setValue(value);\n                    }}\n                />\n            </Dialog>\n        );\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Dialog.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const PreventOutsideDismiss: Story = {\n    args: {\n        ...Default.args,\n        dismissible: false\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        children: (\n            <>\n                <Tabs\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key={\"account\"}\n                            value={\"account\"}\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"company\"}\n                            value={\"company\"}\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"security\"}\n                            value={\"security\"}\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"development\"}\n                            value={\"development\"}\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [open, setOpen] = useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text=\"Open Dialog\" onClick={() => setOpen(true)} />\n\n                <Dialog {...args} open={open} onOpenChange={open => setOpen(open)} />\n            </>\n        );\n    },\n    args: {\n        title: \"Dialog Title\",\n        description: \"A short dialog description.\",\n        showCloseButton: true,\n        dismissible: true,\n        bodyPadding: true,\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                This is the dialog content area. You can place any content here including forms,\n                text, images, or other components.\n            </>\n        ),\n        actions: (\n            <>\n                <Dialog.CancelButton />\n                <Dialog.ConfirmButton />\n            </>\n        )\n    },\n    argTypes: {\n        title: {\n            description: \"Title displayed in the header\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Description displayed below the title\",\n            control: \"text\"\n        },\n        size: {\n            description: \"Controls the size of the dialog\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\", \"full\"]\n        },\n        showCloseButton: {\n            description:\n                \"Show close button, please refer to the 'Without Close Button' example below for details.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        dismissible: {\n            description:\n                \"Allow dialog to be dismissed by clicking outside or pressing Escape, please refer to the 'Prevent Outside Dismiss' example below for details.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        bodyPadding: {\n            description: \"Add padding to the Dialog body.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        info: {\n            description:\n                \"Additional info displayed below the description, please refer to the example below for details.\",\n            control: \"none\"\n        },\n        children: {\n            description:\n                \"Content of the dialog, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.\",\n            control: \"none\"\n        },\n        actions: {\n            description:\n                \"Actions displayed in the footer, please refer to the code example for details.\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","library","fas","Dialog","Button","DropdownMenu","ReactComponent","NotificationIcon","Tabs","IconPicker","add","meta","title","component","argTypes","Default","args","size","trigger","createElement","variant","text","description","info","Fragment","href","children","onOpenChange","opened","console","log","actions","CancelAction","ConfirmAction","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SizeFullScreen","ControlledVisibility","render","props","open","setOpen","onClick","Object","assign","WithOpenCloseEventHandler","onClose","onOpen","WithDropdownMenu","Item","content","WithoutCloseButton","showCloseButton","AlertDialog","DropdownMenuInDialog","DropdownIconPickerInDialog","value","setValue","icons","prefix","name","onChange","WithIcon","icon","Icon","label","PreventOutsideDismiss","dismissible","WithTabs","bodyPadding","separator","spacing","tabs","Tab","key","Documentation","control","options","defaultValue"],"sources":["Dialog.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Dialog } from \"./Dialog.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { IconPicker } from \"~/IconPicker/index.js\";\n\nlibrary.add(fas);\n\nconst meta: Meta<typeof Dialog> = {\n    title: \"Components/Dialog\",\n    component: Dialog,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Dialog>;\n\nexport const Default: Story = {\n    args: {\n        size: \"md\",\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        title: \"Dialog Title\",\n        description: \"A short dialog description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\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        onOpenChange: opened => {\n            console.log(`Dialog is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        actions: (\n            <>\n                <Dialog.CancelAction />\n                <Dialog.ConfirmAction />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SizeFullScreen: Story = {\n    args: {\n        ...Default.args,\n        size: \"full\"\n    }\n};\n\nexport const ControlledVisibility: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text={\"Open\"} onClick={() => setOpen(true)} />\n                <Dialog\n                    {...props}\n                    open={open}\n                    onOpenChange={open => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                    }}\n                />\n            </>\n        );\n    },\n    args: { ...Default.args, trigger: null }\n};\n\nexport const WithOpenCloseEventHandler: Story = {\n    args: {\n        ...Default.args,\n        onClose: () => {\n            console.log(\"onClose triggered\");\n        },\n        onOpen: () => {\n            console.log(\"onOpen triggered\");\n        }\n    }\n};\n\nexport const WithDropdownMenu: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item\n                        text={\"Open Dialog\"}\n                        content={\"Open Dialog\"}\n                        onClick={() => setOpen(true)}\n                    />\n                </DropdownMenu>\n\n                <Dialog {...props} open={open} onOpenChange={() => setOpen(false)} />\n            </>\n        );\n    },\n    args: { ...Default.args, trigger: null }\n};\n\nexport const WithoutCloseButton: Story = {\n    args: { ...Default.args, showCloseButton: false }\n};\n\nexport const AlertDialog: Story = {\n    args: {\n        ...Default.args,\n        info: null,\n        showCloseButton: false,\n        title: \"Confirm Action\",\n        description: \"Are you sure you want to delete this item?\",\n        children: (\n            <>\n                <p>This action cannot be undone.</p>\n                <p>Deleted items cannot be recovered.</p>\n            </>\n        )\n    }\n};\n\nexport const DropdownMenuInDialog: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item text={\"Billing\"} />\n                    <DropdownMenu.Item text={\"Settings\"} />\n                    <DropdownMenu.Item text={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\n\nexport const DropdownIconPickerInDialog: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        return (\n            <Dialog {...args}>\n                <IconPicker\n                    icons={[\n                        { prefix: \"fas\", name: \"trash-restore-alt\" },\n                        { prefix: \"fas\", name: \"trash-can-arrow-up\" },\n                        { prefix: \"fas\", name: \"naira-sign\" },\n                        { prefix: \"fas\", name: \"cart-arrow-down\" },\n                        { prefix: \"fas\", name: \"walkie-talkie\" },\n                        { prefix: \"fas\", name: \"file-edit\" },\n                        { prefix: \"fas\", name: \"file-pen\" },\n                        { prefix: \"fas\", name: \"receipt\" },\n                        { prefix: \"fas\", name: \"pen-square\" },\n                        { prefix: \"fas\", name: \"pencil-square\" },\n                        { prefix: \"fas\", name: \"square-pen\" },\n                        { prefix: \"fas\", name: \"suitcase-rolling\" },\n                        { prefix: \"fas\", name: \"person-circle-exclamation\" },\n                        { prefix: \"fas\", name: \"chevron-down\" },\n                        { prefix: \"fas\", name: \"battery\" },\n                        { prefix: \"fas\", name: \"battery-5\" },\n                        { prefix: \"fas\", name: \"battery-full\" },\n                        { prefix: \"fas\", name: \"skull-crossbones\" },\n                        { prefix: \"fas\", name: \"code-compare\" },\n                        { prefix: \"fas\", name: \"list-dots\" },\n                        { prefix: \"fas\", name: \"list-ul\" },\n                        { prefix: \"fas\", name: \"school-lock\" },\n                        { prefix: \"fas\", name: \"tower-cell\" },\n                        { prefix: \"fas\", name: \"long-arrow-alt-down\" },\n                        { prefix: \"fas\", name: \"down-long\" },\n                        { prefix: \"fas\", name: \"ranking-star\" },\n                        { prefix: \"fas\", name: \"chess-king\" },\n                        { prefix: \"fas\", name: \"person-harassing\" },\n                        { prefix: \"fas\", name: \"brazilian-real-sign\" },\n                        { prefix: \"fas\", name: \"landmark-alt\" }\n                    ]}\n                    value={value}\n                    onChange={value => {\n                        console.log(\"Selected icon:\", value);\n                        setValue(value);\n                    }}\n                />\n            </Dialog>\n        );\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Dialog.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const PreventOutsideDismiss: Story = {\n    args: {\n        ...Default.args,\n        dismissible: false\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        children: (\n            <>\n                <Tabs\n                    separator={true}\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key={\"account\"}\n                            value={\"account\"}\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"company\"}\n                            value={\"company\"}\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"security\"}\n                            value={\"security\"}\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"development\"}\n                            value={\"development\"}\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [open, setOpen] = useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text=\"Open Dialog\" onClick={() => setOpen(true)} />\n\n                <Dialog {...args} open={open} onOpenChange={open => setOpen(open)} />\n            </>\n        );\n    },\n    args: {\n        title: \"Dialog Title\",\n        description: \"A short dialog description.\",\n        showCloseButton: true,\n        dismissible: true,\n        bodyPadding: true,\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                This is the dialog content area. You can place any content here including forms,\n                text, images, or other components.\n            </>\n        ),\n        actions: (\n            <>\n                <Dialog.CancelAction />\n                <Dialog.ConfirmAction />\n            </>\n        )\n    },\n    argTypes: {\n        title: {\n            description: \"Title displayed in the header\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Description displayed below the title\",\n            control: \"text\"\n        },\n        size: {\n            description: \"Controls the size of the dialog\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\", \"full\"]\n        },\n        showCloseButton: {\n            description:\n                \"Show close button, please refer to the 'Without Close Button' example below for details.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        dismissible: {\n            description:\n                \"Allow dialog to be dismissed by clicking outside or pressing Escape, please refer to the 'Prevent Outside Dismiss' example below for details.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        bodyPadding: {\n            description: \"Add padding to the Dialog body.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        info: {\n            description:\n                \"Additional info displayed below the description, please refer to the example below for details.\"\n        },\n        children: {\n            description:\n                \"Content of the dialog, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.\"\n        },\n        actions: {\n            description:\n                \"Actions displayed in the footer, please refer to the code example for details.\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Dialog/components/CancelAction.d.ts

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

package/Dialog/components/CancelAction.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { makeDecoratable } from "../../utils.js";
+import { DialogClose } from "./DialogClose.js";
+import { Button } from "../../Button/index.js";
+const CancelActionBase = props => /*#__PURE__*/React.createElement(DialogClose, {
+  asChild: true
+}, /*#__PURE__*/React.createElement(Button, Object.assign({
+  text: "Cancel"
+}, props, {
+  variant: "secondary"
+})));
+export const CancelAction = makeDecoratable("CancelAction", CancelActionBase);
+
+//# sourceMappingURL=CancelAction.js.map

package/Dialog/components/CancelAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","DialogClose","Button","CancelActionBase","props","createElement","asChild","Object","assign","text","variant","CancelAction"],"sources":["CancelAction.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport { DialogClose } from \"./DialogClose.js\";\nimport type { ButtonProps } from \"~/Button/index.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst CancelActionBase = (props: ButtonProps) => (\n    <DialogClose asChild>\n        <Button text={\"Cancel\"} {...props} variant=\"secondary\" />\n    </DialogClose>\n);\n\nexport const CancelAction = makeDecoratable(\"CancelAction\", CancelActionBase);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AACxB,SAASC,WAAW;AAEpB,SAASC,MAAM;AAEf,MAAMC,gBAAgB,GAAIC,KAAkB,iBACxCL,KAAA,CAAAM,aAAA,CAACJ,WAAW;EAACK,OAAO;AAAA,gBAChBP,KAAA,CAAAM,aAAA,CAACH,MAAM,EAAAK,MAAA,CAAAC,MAAA;EAACC,IAAI,EAAE;AAAS,GAAKL,KAAK;EAAEM,OAAO,EAAC;AAAW,EAAE,CAC/C,CAChB;AAED,OAAO,MAAMC,YAAY,GAAGX,eAAe,CAAC,cAAc,EAAEG,gBAAgB,CAAC","ignoreList":[]}

package/Dialog/components/CloseDialogIconButton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type CloseDialogIconButtonProps = {
+    size: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+};
+export declare const CloseDialogIconButton: ({ size }: CloseDialogIconButtonProps) => React.JSX.Element;
+export {};

package/Dialog/components/CloseDialogIconButton.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { ReactComponent as XIcon } from "@webiny/icons/close.svg";
+import { IconButton } from "../../Button/index.js";
+import { DialogClose } from "./DialogClose.js";
+export const CloseDialogIconButton = ({
+  size
+}) => {
+  const buttonSize = React.useMemo(() => {
+    return size && ["lg", "xl", "full"].includes(size) ? "md" : "sm";
+  }, [size]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-md right-md"
+  }, /*#__PURE__*/React.createElement(DialogClose, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: buttonSize,
+    iconSize: "lg",
+    variant: "ghost",
+    icon: /*#__PURE__*/React.createElement(XIcon, null)
+  })));
+};
+
+//# sourceMappingURL=CloseDialogIconButton.js.map

package/Dialog/components/CloseDialogIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","XIcon","IconButton","DialogClose","CloseDialogIconButton","size","buttonSize","useMemo","includes","createElement","className","asChild","iconSize","variant","icon"],"sources":["CloseDialogIconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { DialogClose } from \"./DialogClose.js\";\n\ntype CloseDialogIconButtonProps = {\n    size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | null | undefined;\n};\n\nexport const CloseDialogIconButton = ({ size }: CloseDialogIconButtonProps) => {\n    const buttonSize = React.useMemo(() => {\n        return size && [\"lg\", \"xl\", \"full\"].includes(size) ? \"md\" : \"sm\";\n    }, [size]);\n\n    return (\n        <div className={\"absolute top-md right-md\"}>\n            <DialogClose asChild>\n                <IconButton size={buttonSize} iconSize=\"lg\" variant={\"ghost\"} icon={<XIcon />} />\n            </DialogClose>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,KAAK,QAAQ,yBAAyB;AACjE,SAASC,UAAU;AACnB,SAASC,WAAW;AAMpB,OAAO,MAAMC,qBAAqB,GAAGA,CAAC;EAAEC;AAAiC,CAAC,KAAK;EAC3E,MAAMC,UAAU,GAAGP,KAAK,CAACQ,OAAO,CAAC,MAAM;IACnC,OAAOF,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAACG,QAAQ,CAACH,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI;EACpE,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACIN,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAE;EAA2B,gBACvCX,KAAA,CAAAU,aAAA,CAACN,WAAW;IAACQ,OAAO;EAAA,gBAChBZ,KAAA,CAAAU,aAAA,CAACP,UAAU;IAACG,IAAI,EAAEC,UAAW;IAACM,QAAQ,EAAC,IAAI;IAACC,OAAO,EAAE,OAAQ;IAACC,IAAI,eAAEf,KAAA,CAAAU,aAAA,CAACR,KAAK,MAAE;EAAE,CAAE,CACvE,CACZ,CAAC;AAEd,CAAC","ignoreList":[]}

package/Dialog/components/ConfirmAction.d.ts

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

package/Dialog/components/ConfirmAction.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { makeDecoratable } from "../../utils.js";
+import { Button } from "../../Button/index.js";
+const ConfirmActionBase = props => /*#__PURE__*/React.createElement(Button, Object.assign({}, props, {
+  variant: "primary"
+}));
+export const ConfirmAction = makeDecoratable("ConfirmAction", ConfirmActionBase);
+
+//# sourceMappingURL=ConfirmAction.js.map

package/Dialog/components/ConfirmAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","Button","ConfirmActionBase","props","createElement","Object","assign","variant","ConfirmAction"],"sources":["ConfirmAction.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { ButtonProps } from \"~/Button/index.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst ConfirmActionBase = (props: ButtonProps) => <Button {...props} variant=\"primary\" />;\n\nexport const ConfirmAction = makeDecoratable(\"ConfirmAction\", ConfirmActionBase);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AAExB,SAASC,MAAM;AAEf,MAAMC,iBAAiB,GAAIC,KAAkB,iBAAKJ,KAAA,CAAAK,aAAA,CAACH,MAAM,EAAAI,MAAA,CAAAC,MAAA,KAAKH,KAAK;EAAEI,OAAO,EAAC;AAAS,EAAE,CAAC;AAEzF,OAAO,MAAMC,aAAa,GAAGR,eAAe,CAAC,eAAe,EAAEE,iBAAiB,CAAC","ignoreList":[]}

package/Dialog/components/DialogBody.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
-import type { DialogProps } from "..";
-export type DialogBodyProps = Pick<DialogProps, "children" | "bodyPadding" | "size">;
-export declare const DialogBody: ({ bodyPadding, size, children }: DialogBodyProps) => React.JSX.Element;
+import type { DialogProps } from "../../Dialog/index.js";
+export type DialogBodyProps = Pick<DialogProps, "children" | "bodyPadding" | "scrollable" | "size">;
+export declare const DialogBody: ({ bodyPadding, scrollable, size, children }: DialogBodyProps) => React.JSX.Element;

package/Dialog/components/DialogBody.js

@@ -1,18 +1,18 @@
 import * as React from "react";
-import { cn, cva } from "../../utils";
-const dialogBodyVariants = cva("wby-flex-1", {
-  // Flex grows to fill available space - we need this for the body to expand in case of a "fullscreen" dialog
+import { cn, cva } from "../../utils.js";
+import { ScrollArea } from "../../ScrollArea/index.js";
+const dialogBodyVariants = cva("", {
   variants: {
     size: {
-      sm: "wby-px-md-extra",
-      md: "wby-px-md-extra",
-      lg: "wby-px-lg",
-      xl: "wby-px-lg",
-      full: "wby-px-lg"
+      sm: "px-md-extra",
+      md: "px-md-extra",
+      lg: "px-lg",
+      xl: "px-lg",
+      full: "px-lg"
     },
     bodyPadding: {
       true: "",
-      false: "!wby-px-none"
+      false: "px-none! py-none!"
     }
   },
   defaultVariants: {
@@ -22,15 +22,22 @@ const dialogBodyVariants = cva("wby-flex-1", {
 });
 export const DialogBody = ({
   bodyPadding,
+  scrollable = true,
   size,
   children
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  const content = /*#__PURE__*/React.createElement("div", {
     className: cn(dialogBodyVariants({
       size,
       bodyPadding
     }))
   }, children);
+  if (!scrollable) {
+    return content;
+  }
+  return /*#__PURE__*/React.createElement(ScrollArea, {
+    className: "h-full"
+  }, content);
 };
 
 //# sourceMappingURL=DialogBody.js.map

package/Dialog/components/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","dialogBodyVariants","variants","size","sm","md","lg","xl","full","bodyPadding","true","false","defaultVariants","DialogBody","children","createElement","className"],"sources":["DialogBody.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva } from \"~/utils\";\nimport type { DialogProps } from \"~/Dialog\";\n\nconst dialogBodyVariants = cva(\"wby-flex-1\", {\n    // Flex grows to fill available space - we need this for the body to expand in case of a \"fullscreen\" dialog\n    variants: {\n        size: {\n            sm: \"wby-px-md-extra\",\n            md: \"wby-px-md-extra\",\n            lg: \"wby-px-lg\",\n            xl: \"wby-px-lg\",\n            full: \"wby-px-lg\"\n        },\n        bodyPadding: {\n            true: \"\",\n            false: \"!wby-px-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        bodyPadding: true\n    }\n});\n\nexport type DialogBodyProps = Pick<DialogProps, \"children\" | \"bodyPadding\" | \"size\">;\n\nexport const DialogBody = ({ bodyPadding, size, children }: DialogBodyProps) => {\n    return <div className={cn(dialogBodyVariants({ size, bodyPadding }))}>{children}</div>;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAGhB,MAAMC,kBAAkB,GAAGD,GAAG,CAAC,YAAY,EAAE;EACzC;EACAE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,iBAAiB;MACrBC,EAAE,EAAE,iBAAiB;MACrBC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,IAAI,EAAE;IACV,CAAC;IACDC,WAAW,EAAE;MACTC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,eAAe,EAAE;IACbT,IAAI,EAAE,IAAI;IACVM,WAAW,EAAE;EACjB;AACJ,CAAC,CAAC;AAIF,OAAO,MAAMI,UAAU,GAAGA,CAAC;EAAEJ,WAAW;EAAEN,IAAI;EAAEW;AAA0B,CAAC,KAAK;EAC5E,oBAAOhB,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAEjB,EAAE,CAACE,kBAAkB,CAAC;MAAEE,IAAI;MAAEM;IAAY,CAAC,CAAC;EAAE,GAAEK,QAAc,CAAC;AAC1F,CAAC","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","ScrollArea","dialogBodyVariants","variants","size","sm","md","lg","xl","full","bodyPadding","true","false","defaultVariants","DialogBody","scrollable","children","content","createElement","className"],"sources":["DialogBody.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva } from \"~/utils.js\";\nimport type { DialogProps } from \"~/Dialog/index.js\";\nimport { ScrollArea } from \"~/ScrollArea/index.js\";\n\nconst dialogBodyVariants = cva(\"\", {\n    variants: {\n        size: {\n            sm: \"px-md-extra\",\n            md: \"px-md-extra\",\n            lg: \"px-lg\",\n            xl: \"px-lg\",\n            full: \"px-lg\"\n        },\n        bodyPadding: {\n            true: \"\",\n            false: \"px-none! py-none!\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        bodyPadding: true\n    }\n});\n\nexport type DialogBodyProps = Pick<DialogProps, \"children\" | \"bodyPadding\" | \"scrollable\" | \"size\">;\n\nexport const DialogBody = ({ bodyPadding, scrollable = true, size, children }: DialogBodyProps) => {\n    const content = <div className={cn(dialogBodyVariants({ size, bodyPadding }))}>{children}</div>;\n\n    if (!scrollable) {\n        return content;\n    }\n\n    return <ScrollArea className=\"h-full\">{content}</ScrollArea>;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,SAASC,UAAU;AAEnB,MAAMC,kBAAkB,GAAGF,GAAG,CAAC,EAAE,EAAE;EAC/BG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,OAAO;MACXC,EAAE,EAAE,OAAO;MACXC,IAAI,EAAE;IACV,CAAC;IACDC,WAAW,EAAE;MACTC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,eAAe,EAAE;IACbT,IAAI,EAAE,IAAI;IACVM,WAAW,EAAE;EACjB;AACJ,CAAC,CAAC;AAIF,OAAO,MAAMI,UAAU,GAAGA,CAAC;EAAEJ,WAAW;EAAEK,UAAU,GAAG,IAAI;EAAEX,IAAI;EAAEY;AAA0B,CAAC,KAAK;EAC/F,MAAMC,OAAO,gBAAGnB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAEpB,EAAE,CAACG,kBAAkB,CAAC;MAAEE,IAAI;MAAEM;IAAY,CAAC,CAAC;EAAE,GAAEM,QAAc,CAAC;EAE/F,IAAI,CAACD,UAAU,EAAE;IACb,OAAOE,OAAO;EAClB;EAEA,oBAAOnB,KAAA,CAAAoB,aAAA,CAACjB,UAAU;IAACkB,SAAS,EAAC;EAAQ,GAAEF,OAAoB,CAAC;AAChE,CAAC","ignoreList":[]}

package/Dialog/components/DialogClose.d.ts

@@ -1,8 +1,2 @@
-import React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
-export declare const DialogClosePrimitive: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-type DialogCloseProps = {
-    size: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
-};
-export declare const DialogClose: ({ size }: DialogCloseProps) => React.JSX.Element;
-export {};
+export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;

package/Dialog/components/DialogClose.js

@@ -1,24 +1,4 @@
-import React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
-import { ReactComponent as XIcon } from "@webiny/icons/close.svg";
-import { IconButton } from "../../Button";
-export const DialogClosePrimitive = DialogPrimitive.Close;
-export const DialogClose = ({
-  size
-}) => {
-  const buttonSize = React.useMemo(() => {
-    return size && ["lg", "xl", "full"].includes(size) ? "md" : "sm";
-  }, [size]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "wby-absolute wby-top-md wby-right-md"
-  }, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    size: buttonSize,
-    iconSize: "lg",
-    variant: "ghost",
-    icon: /*#__PURE__*/React.createElement(XIcon, null)
-  })));
-};
+export const DialogClose = DialogPrimitive.Close;
 
 //# sourceMappingURL=DialogClose.js.map

package/Dialog/components/DialogClose.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Dialog","DialogPrimitive","ReactComponent","XIcon","IconButton","DialogClosePrimitive","Close","DialogClose","size","buttonSize","useMemo","includes","createElement","className","asChild","iconSize","variant","icon"],"sources":["DialogClose.tsx"],"sourcesContent":["import React from \"react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { IconButton } from \"~/Button\";\n\nexport const DialogClosePrimitive = DialogPrimitive.Close;\n\ntype DialogCloseProps = {\n    size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | null | undefined;\n};\n\nexport const DialogClose = ({ size }: DialogCloseProps) => {\n    const buttonSize = React.useMemo(() => {\n        return size && [\"lg\", \"xl\", \"full\"].includes(size) ? \"md\" : \"sm\";\n    }, [size]);\n\n    return (\n        <div className={\"wby-absolute wby-top-md wby-right-md\"}>\n            <DialogPrimitive.Close asChild>\n                <IconButton size={buttonSize} iconSize=\"lg\" variant={\"ghost\"} icon={<XIcon />} />\n            </DialogPrimitive.Close>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,cAAc,IAAIC,KAAK,QAAQ,yBAAyB;AACjE,SAASC,UAAU;AAEnB,OAAO,MAAMC,oBAAoB,GAAGJ,eAAe,CAACK,KAAK;AAMzD,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EACvD,MAAMC,UAAU,GAAGV,KAAK,CAACW,OAAO,CAAC,MAAM;IACnC,OAAOF,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAACG,QAAQ,CAACH,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI;EACpE,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,oBACIT,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAE;EAAuC,gBACnDd,KAAA,CAAAa,aAAA,CAACX,eAAe,CAACK,KAAK;IAACQ,OAAO;EAAA,gBAC1Bf,KAAA,CAAAa,aAAA,CAACR,UAAU;IAACI,IAAI,EAAEC,UAAW;IAACM,QAAQ,EAAC,IAAI;IAACC,OAAO,EAAE,OAAQ;IAACC,IAAI,eAAElB,KAAA,CAAAa,aAAA,CAACT,KAAK,MAAE;EAAE,CAAE,CAC7D,CACtB,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["Dialog","DialogPrimitive","DialogClose","Close"],"sources":["DialogClose.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from \"radix-ui\";\n\nexport const DialogClose = DialogPrimitive.Close;\n"],"mappings":"AAAA,SAASA,MAAM,IAAIC,eAAe,QAAQ,UAAU;AAEpD,OAAO,MAAMC,WAAW,GAAGD,eAAe,CAACE,KAAK","ignoreList":[]}

package/Dialog/components/DialogContent.d.ts

@@ -1,11 +1,15 @@
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const dialogContentVariants: (props?: ({
-    size?: "full" | "sm" | "md" | "lg" | "xl" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof dialogContentVariants> {
     dismissible?: boolean;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    closeButton?: React.ReactNode;
+    overlay?: React.ReactNode;
 }
 declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
 export { DialogContent };

package/Dialog/components/DialogContent.js

@@ -1,14 +1,14 @@
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
-import { cn, cva } from "../../utils";
-const dialogContentVariants = cva(["wby-fixed wby-left-[50%] wby-top-[50%] wby-border wby-bg-neutral-base wby-shadow-lg focus-visible:outline-none wby-rounded-xl wby-text-md wby-text-neutral-strong wby-overflow-y-scroll wby-max-h-screen", "wby-translate-x-[-50%] wby-translate-y-[-50%] wby-duration-200 data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=open]:wby-fade-in-0 data-[state=closed]:wby-zoom-out-95 data-[state=open]:wby-zoom-in-95 data-[state=closed]:wby-slide-out-to-left-1/2 data-[state=closed]:wby-slide-out-to-top-[48%] data-[state=open]:wby-slide-in-from-left-1/2 data-[state=open]:wby-slide-in-from-top-[48%]", "focus:wby-outline-none focus-visible:wby-outline-none", "wby-max-w-[calc(100vw-theme(spacing.lg))] wby-max-h-[calc(100vh-theme(spacing.lg))]"], {
+import { cn, cva } from "../../utils.js";
+const dialogContentVariants = cva(["fixed left-[50%] top-[50%] border-none bg-neutral-base shadow-lg focus-visible:outline-none rounded-xl text-md text-neutral-strong", "translate-x-[-50%] translate-y-[-50%] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "focus:outline-none focus-visible:outline-none", "max-w-[calc(100vw-var(--spacing-lg))] max-h-[calc(100vh-var(--spacing-lg))] z-dialog", "grid grid-rows-[auto_1fr_auto] overflow-hidden"], {
   variants: {
     size: {
-      sm: "wby-w-[384px]",
-      md: "wby-w-[520px]",
-      lg: "wby-w-[640px]",
-      xl: "wby-w-[800px]",
-      full: "wby-w-[100vw] wby-h-[100vh]"
+      sm: "w-[384px]",
+      md: "w-[520px]",
+      lg: "w-[640px]",
+      xl: "w-[800px]",
+      full: "w-screen h-screen"
     }
   },
   defaultVariants: {
@@ -19,6 +19,10 @@ const DialogContent = /*#__PURE__*/React.forwardRef(({
   className,
   dismissible,
   size,
+  header,
+  footer,
+  closeButton,
+  overlay,
   children,
   ...props
 }, ref) => {
@@ -39,9 +43,13 @@ const DialogContent = /*#__PURE__*/React.forwardRef(({
     // TODO: An optional accessible description to be announced when the dialog is opened. At the moment we skip this.
     ,
     "aria-describedby": undefined
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cn([["wby-flex wby-flex-col wby-justify-between", "wby-w-full wby-max-w-full", "wby-h-full", "wby-relative"]])
-  }, children));
+  }), (header || closeButton) && /*#__PURE__*/React.createElement("div", {
+    className: "row-start-1 relative"
+  }, header, closeButton), /*#__PURE__*/React.createElement("div", {
+    className: "row-start-2 min-h-0 overflow-hidden pr-xs"
+  }, children), footer && /*#__PURE__*/React.createElement("div", {
+    className: "row-start-3"
+  }, footer), overlay);
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 export { DialogContent };

package/Dialog/components/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Dialog","DialogPrimitive","cn","cva","dialogContentVariants","variants","size","sm","md","lg","xl","full","defaultVariants","DialogContent","forwardRef","className","dismissible","children","props","ref","dismissibleProps","useMemo","onInteractOutside","event","preventDefault","onEscapeKeyDown","createElement","Content","Object","assign","undefined","displayName"],"sources":["DialogContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst dialogContentVariants = cva(\n    [\n        \"wby-fixed wby-left-[50%] wby-top-[50%] wby-border wby-bg-neutral-base wby-shadow-lg focus-visible:outline-none wby-rounded-xl wby-text-md wby-text-neutral-strong wby-overflow-y-scroll wby-max-h-screen\",\n        \"wby-translate-x-[-50%] wby-translate-y-[-50%] wby-duration-200 data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=open]:wby-fade-in-0 data-[state=closed]:wby-zoom-out-95 data-[state=open]:wby-zoom-in-95 data-[state=closed]:wby-slide-out-to-left-1/2 data-[state=closed]:wby-slide-out-to-top-[48%] data-[state=open]:wby-slide-in-from-left-1/2 data-[state=open]:wby-slide-in-from-top-[48%]\",\n        \"focus:wby-outline-none focus-visible:wby-outline-none\",\n        \"wby-max-w-[calc(100vw-theme(spacing.lg))] wby-max-h-[calc(100vh-theme(spacing.lg))]\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"wby-w-[384px]\",\n                md: \"wby-w-[520px]\",\n                lg: \"wby-w-[640px]\",\n                xl: \"wby-w-[800px]\",\n                full: \"wby-w-[100vw] wby-h-[100vh]\"\n            }\n        },\n        defaultVariants: {\n            size: \"md\"\n        }\n    }\n);\n\nexport interface DialogContentProps\n    extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n        VariantProps<typeof dialogContentVariants> {\n    dismissible?: boolean;\n}\n\nconst DialogContent = React.forwardRef<\n    React.ElementRef<typeof DialogPrimitive.Content>,\n    DialogContentProps\n>(({ className, dismissible, size, children, ...props }, ref) => {\n    const dismissibleProps = React.useMemo<\n        Pick<DialogPrimitive.DialogContentProps, \"onInteractOutside\" | \"onEscapeKeyDown\">\n    >(() => {\n        if (dismissible === false) {\n            return {\n                onInteractOutside: event => event.preventDefault(),\n                onEscapeKeyDown: event => event.preventDefault()\n            };\n        }\n\n        return {};\n    }, [dismissible]);\n\n    return (\n        <DialogPrimitive.Content\n            {...dismissibleProps}\n            {...props}\n            ref={ref}\n            className={cn(dialogContentVariants({ size }), className)}\n            // TODO: An optional accessible description to be announced when the dialog is opened. At the moment we skip this.\n            aria-describedby={undefined}\n        >\n            <div\n                className={cn([\n                    [\n                        \"wby-flex wby-flex-col wby-justify-between\",\n                        \"wby-w-full wby-max-w-full\",\n                        \"wby-h-full\",\n                        \"wby-relative\"\n                    ]\n                ])}\n            >\n                {children}\n            </div>\n        </DialogPrimitive.Content>\n    );\n});\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nexport { DialogContent };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,qBAAqB,GAAGD,GAAG,CAC7B,CACI,0MAA0M,EAC1M,qcAAqc,EACrc,uDAAuD,EACvD,qFAAqF,CACxF,EACD;EACIE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,eAAe;MACnBC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbN,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AAQD,MAAMO,aAAa,gBAAGd,KAAK,CAACe,UAAU,CAGpC,CAAC;EAAEC,SAAS;EAAEC,WAAW;EAAEV,IAAI;EAAEW,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAC7D,MAAMC,gBAAgB,GAAGrB,KAAK,CAACsB,OAAO,CAEpC,MAAM;IACJ,IAAIL,WAAW,KAAK,KAAK,EAAE;MACvB,OAAO;QACHM,iBAAiB,EAAEC,KAAK,IAAIA,KAAK,CAACC,cAAc,CAAC,CAAC;QAClDC,eAAe,EAAEF,KAAK,IAAIA,KAAK,CAACC,cAAc,CAAC;MACnD,CAAC;IACL;IAEA,OAAO,CAAC,CAAC;EACb,CAAC,EAAE,CAACR,WAAW,CAAC,CAAC;EAEjB,oBACIjB,KAAA,CAAA2B,aAAA,CAACzB,eAAe,CAAC0B,OAAO,EAAAC,MAAA,CAAAC,MAAA,KAChBT,gBAAgB,EAChBF,KAAK;IACTC,GAAG,EAAEA,GAAI;IACTJ,SAAS,EAAEb,EAAE,CAACE,qBAAqB,CAAC;MAAEE;IAAK,CAAC,CAAC,EAAES,SAAS;IACxD;IAAA;IACA,oBAAkBe;EAAU,iBAE5B/B,KAAA,CAAA2B,aAAA;IACIX,SAAS,EAAEb,EAAE,CAAC,CACV,CACI,2CAA2C,EAC3C,2BAA2B,EAC3B,YAAY,EACZ,cAAc,CACjB,CACJ;EAAE,GAEFe,QACA,CACgB,CAAC;AAElC,CAAC,CAAC;AAEFJ,aAAa,CAACkB,WAAW,GAAG9B,eAAe,CAAC0B,OAAO,CAACI,WAAW;AAE/D,SAASlB,aAAa","ignoreList":[]}
+{"version":3,"names":["React","Dialog","DialogPrimitive","cn","cva","dialogContentVariants","variants","size","sm","md","lg","xl","full","defaultVariants","DialogContent","forwardRef","className","dismissible","header","footer","closeButton","overlay","children","props","ref","dismissibleProps","useMemo","onInteractOutside","event","preventDefault","onEscapeKeyDown","createElement","Content","Object","assign","undefined","displayName"],"sources":["DialogContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst dialogContentVariants = cva(\n    [\n        \"fixed left-[50%] top-[50%] border-none bg-neutral-base shadow-lg focus-visible:outline-none rounded-xl text-md text-neutral-strong\",\n        \"translate-x-[-50%] translate-y-[-50%] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"focus:outline-none focus-visible:outline-none\",\n        \"max-w-[calc(100vw-var(--spacing-lg))] max-h-[calc(100vh-var(--spacing-lg))] z-dialog\",\n        \"grid grid-rows-[auto_1fr_auto] overflow-hidden\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"w-[384px]\",\n                md: \"w-[520px]\",\n                lg: \"w-[640px]\",\n                xl: \"w-[800px]\",\n                full: \"w-screen h-screen\"\n            }\n        },\n        defaultVariants: {\n            size: \"md\"\n        }\n    }\n);\n\nexport interface DialogContentProps\n    extends\n        React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n        VariantProps<typeof dialogContentVariants> {\n    dismissible?: boolean;\n    header?: React.ReactNode;\n    footer?: React.ReactNode;\n    closeButton?: React.ReactNode;\n    overlay?: React.ReactNode;\n}\n\nconst DialogContent = React.forwardRef<\n    React.ElementRef<typeof DialogPrimitive.Content>,\n    DialogContentProps\n>(\n    (\n        { className, dismissible, size, header, footer, closeButton, overlay, children, ...props },\n        ref\n    ) => {\n        const dismissibleProps = React.useMemo<\n            Pick<DialogPrimitive.DialogContentProps, \"onInteractOutside\" | \"onEscapeKeyDown\">\n        >(() => {\n            if (dismissible === false) {\n                return {\n                    onInteractOutside: event => event.preventDefault(),\n                    onEscapeKeyDown: event => event.preventDefault()\n                };\n            }\n\n            return {};\n        }, [dismissible]);\n\n        return (\n            <DialogPrimitive.Content\n                {...dismissibleProps}\n                {...props}\n                ref={ref}\n                className={cn(dialogContentVariants({ size }), className)}\n                // TODO: An optional accessible description to be announced when the dialog is opened. At the moment we skip this.\n                aria-describedby={undefined}\n            >\n                {(header || closeButton) && (\n                    <div className=\"row-start-1 relative\">\n                        {header}\n                        {closeButton}\n                    </div>\n                )}\n                <div className=\"row-start-2 min-h-0 overflow-hidden pr-xs\">{children}</div>\n                {footer && <div className=\"row-start-3\">{footer}</div>}\n                {overlay}\n            </DialogPrimitive.Content>\n        );\n    }\n);\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nexport { DialogContent };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,qBAAqB,GAAGD,GAAG,CAC7B,CACI,oIAAoI,EACpI,yOAAyO,EACzO,+CAA+C,EAC/C,sFAAsF,EACtF,gDAAgD,CACnD,EACD;EACIE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbN,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AAaD,MAAMO,aAAa,gBAAGd,KAAK,CAACe,UAAU,CAIlC,CACI;EAAEC,SAAS;EAAEC,WAAW;EAAEV,IAAI;EAAEW,MAAM;EAAEC,MAAM;EAAEC,WAAW;EAAEC,OAAO;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAC1FC,GAAG,KACF;EACD,MAAMC,gBAAgB,GAAGzB,KAAK,CAAC0B,OAAO,CAEpC,MAAM;IACJ,IAAIT,WAAW,KAAK,KAAK,EAAE;MACvB,OAAO;QACHU,iBAAiB,EAAEC,KAAK,IAAIA,KAAK,CAACC,cAAc,CAAC,CAAC;QAClDC,eAAe,EAAEF,KAAK,IAAIA,KAAK,CAACC,cAAc,CAAC;MACnD,CAAC;IACL;IAEA,OAAO,CAAC,CAAC;EACb,CAAC,EAAE,CAACZ,WAAW,CAAC,CAAC;EAEjB,oBACIjB,KAAA,CAAA+B,aAAA,CAAC7B,eAAe,CAAC8B,OAAO,EAAAC,MAAA,CAAAC,MAAA,KAChBT,gBAAgB,EAChBF,KAAK;IACTC,GAAG,EAAEA,GAAI;IACTR,SAAS,EAAEb,EAAE,CAACE,qBAAqB,CAAC;MAAEE;IAAK,CAAC,CAAC,EAAES,SAAS;IACxD;IAAA;IACA,oBAAkBmB;EAAU,IAE3B,CAACjB,MAAM,IAAIE,WAAW,kBACnBpB,KAAA,CAAA+B,aAAA;IAAKf,SAAS,EAAC;EAAsB,GAChCE,MAAM,EACNE,WACA,CACR,eACDpB,KAAA,CAAA+B,aAAA;IAAKf,SAAS,EAAC;EAA2C,GAAEM,QAAc,CAAC,EAC1EH,MAAM,iBAAInB,KAAA,CAAA+B,aAAA;IAAKf,SAAS,EAAC;EAAa,GAAEG,MAAY,CAAC,EACrDE,OACoB,CAAC;AAElC,CACJ,CAAC;AAEDP,aAAa,CAACsB,WAAW,GAAGlC,eAAe,CAAC8B,OAAO,CAACI,WAAW;AAE/D,SAAStB,aAAa","ignoreList":[]}

package/Dialog/components/DialogDescription.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
-import { cn } from "../../utils";
+import { cn } from "../../utils.js";
 export const DialogDescription = ({
   className,
   ...props
 }) => /*#__PURE__*/React.createElement(DialogPrimitive.Description, Object.assign({}, props, {
-  className: cn("wby-text-sm wby-text-neutral-strong wby-text-left", className)
+  className: cn("text-sm text-neutral-strong text-left", className)
 }));
 
 //# sourceMappingURL=DialogDescription.js.map

package/Dialog/components/DialogDescription.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Dialog","DialogPrimitive","cn","DialogDescription","className","props","createElement","Description","Object","assign"],"sources":["DialogDescription.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport { cn } from \"~/utils\";\n\nexport type DialogDescriptionProps = React.ComponentPropsWithoutRef<\n    typeof DialogPrimitive.Description\n>;\n\nexport const DialogDescription = ({ className, ...props }: DialogDescriptionProps) => (\n    <DialogPrimitive.Description\n        {...props}\n        className={cn(\"wby-text-sm wby-text-neutral-strong wby-text-left\", className)}\n    />\n);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,EAAE;AAMX,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAA8B,CAAC,kBAC7EN,KAAA,CAAAO,aAAA,CAACL,eAAe,CAACM,WAAW,EAAAC,MAAA,CAAAC,MAAA,KACpBJ,KAAK;EACTD,SAAS,EAAEF,EAAE,CAAC,mDAAmD,EAAEE,SAAS;AAAE,EACjF,CACJ","ignoreList":[]}
+{"version":3,"names":["React","Dialog","DialogPrimitive","cn","DialogDescription","className","props","createElement","Description","Object","assign"],"sources":["DialogDescription.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\n\nexport type DialogDescriptionProps = React.ComponentPropsWithoutRef<\n    typeof DialogPrimitive.Description\n>;\n\nexport const DialogDescription = ({ className, ...props }: DialogDescriptionProps) => (\n    <DialogPrimitive.Description\n        {...props}\n        className={cn(\"text-sm text-neutral-strong text-left\", className)}\n    />\n);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,EAAE;AAMX,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAA8B,CAAC,kBAC7EN,KAAA,CAAAO,aAAA,CAACL,eAAe,CAACM,WAAW,EAAAC,MAAA,CAAAC,MAAA,KACpBJ,KAAK;EACTD,SAAS,EAAEF,EAAE,CAAC,uCAAuC,EAAEE,SAAS;AAAE,EACrE,CACJ","ignoreList":[]}

package/Dialog/components/DialogFooter.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const dialogFooterVariants: (props?: ({
-    size?: "full" | "sm" | "md" | "lg" | "xl" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dialogFooterVariants> {
     actions?: React.ReactNode;
     info?: React.ReactNode;

package/Dialog/components/DialogFooter.js

@@ -1,13 +1,13 @@
 import * as React from "react";
-import { cn, cva } from "../../utils";
-const dialogFooterVariants = cva("wby-flex wby-justify-between", {
+import { cn, cva } from "../../utils.js";
+const dialogFooterVariants = cva("flex justify-between", {
   variants: {
     size: {
-      sm: "wby-p-md-extra",
-      md: "wby-p-md-extra",
-      lg: "wby-p-lg",
-      xl: "wby-p-lg",
-      full: "wby-p-lg"
+      sm: "p-md-extra",
+      md: "p-md-extra",
+      lg: "p-lg",
+      xl: "p-lg",
+      full: "p-lg"
     }
   },
   defaultVariants: {
@@ -29,9 +29,9 @@ export const DialogFooter = ({
       size
     }), className)
   }), info && /*#__PURE__*/React.createElement("div", {
-    className: "wby-text-sm wby-flex wby-items-center"
+    className: "text-sm flex items-center"
   }, /*#__PURE__*/React.createElement("div", null, info)), actions && /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-gap-x-sm wby-ml-auto"
+    className: "flex gap-x-sm ml-auto"
   }, actions));
 };
 

package/Dialog/components/DialogFooter.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","dialogFooterVariants","variants","size","sm","md","lg","xl","full","defaultVariants","DialogFooter","actions","info","className","props","createElement","Object","assign"],"sources":["DialogFooter.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst dialogFooterVariants = cva(\"wby-flex wby-justify-between\", {\n    variants: {\n        size: {\n            sm: \"wby-p-md-extra\",\n            md: \"wby-p-md-extra\",\n            lg: \"wby-p-lg\",\n            xl: \"wby-p-lg\",\n            full: \"wby-p-lg\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\"\n    }\n});\n\nexport interface DialogFooterProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof dialogFooterVariants> {\n    actions?: React.ReactNode;\n    info?: React.ReactNode;\n}\n\nexport const DialogFooter = ({ actions, info, className, size, ...props }: DialogFooterProps) => {\n    if (!actions && !info) {\n        return null;\n    }\n\n    return (\n        <div {...props} className={cn(dialogFooterVariants({ size }), className)}>\n            {info && (\n                <div className={\"wby-text-sm wby-flex wby-items-center\"}>\n                    <div>{info}</div>\n                </div>\n            )}\n            {actions && <div className={\"wby-flex wby-gap-x-sm wby-ml-auto\"}>{actions}</div>}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,8BAA8B,EAAE;EAC7DE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,gBAAgB;MACpBC,EAAE,EAAE,gBAAgB;MACpBC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbN,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AASF,OAAO,MAAMO,YAAY,GAAGA,CAAC;EAAEC,OAAO;EAAEC,IAAI;EAAEC,SAAS;EAAEV,IAAI;EAAE,GAAGW;AAAyB,CAAC,KAAK;EAC7F,IAAI,CAACH,OAAO,IAAI,CAACC,IAAI,EAAE;IACnB,OAAO,IAAI;EACf;EAEA,oBACId,KAAA,CAAAiB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEd,EAAE,CAACE,oBAAoB,CAAC;MAAEE;IAAK,CAAC,CAAC,EAAEU,SAAS;EAAE,IACpED,IAAI,iBACDd,KAAA,CAAAiB,aAAA;IAAKF,SAAS,EAAE;EAAwC,gBACpDf,KAAA,CAAAiB,aAAA,cAAMH,IAAU,CACf,CACR,EACAD,OAAO,iBAAIb,KAAA,CAAAiB,aAAA;IAAKF,SAAS,EAAE;EAAoC,GAAEF,OAAa,CAC9E,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","dialogFooterVariants","variants","size","sm","md","lg","xl","full","defaultVariants","DialogFooter","actions","info","className","props","createElement","Object","assign"],"sources":["DialogFooter.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst dialogFooterVariants = cva(\"flex justify-between\", {\n    variants: {\n        size: {\n            sm: \"p-md-extra\",\n            md: \"p-md-extra\",\n            lg: \"p-lg\",\n            xl: \"p-lg\",\n            full: \"p-lg\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\"\n    }\n});\n\nexport interface DialogFooterProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dialogFooterVariants> {\n    actions?: React.ReactNode;\n    info?: React.ReactNode;\n}\n\nexport const DialogFooter = ({ actions, info, className, size, ...props }: DialogFooterProps) => {\n    if (!actions && !info) {\n        return null;\n    }\n\n    return (\n        <div {...props} className={cn(dialogFooterVariants({ size }), className)}>\n            {info && (\n                <div className={\"text-sm flex items-center\"}>\n                    <div>{info}</div>\n                </div>\n            )}\n            {actions && <div className={\"flex gap-x-sm ml-auto\"}>{actions}</div>}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,sBAAsB,EAAE;EACrDE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbN,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAQF,OAAO,MAAMO,YAAY,GAAGA,CAAC;EAAEC,OAAO;EAAEC,IAAI;EAAEC,SAAS;EAAEV,IAAI;EAAE,GAAGW;AAAyB,CAAC,KAAK;EAC7F,IAAI,CAACH,OAAO,IAAI,CAACC,IAAI,EAAE;IACnB,OAAO,IAAI;EACf;EAEA,oBACId,KAAA,CAAAiB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEd,EAAE,CAACE,oBAAoB,CAAC;MAAEE;IAAK,CAAC,CAAC,EAAEU,SAAS;EAAE,IACpED,IAAI,iBACDd,KAAA,CAAAiB,aAAA;IAAKF,SAAS,EAAE;EAA4B,gBACxCf,KAAA,CAAAiB,aAAA,cAAMH,IAAU,CACf,CACR,EACAD,OAAO,iBAAIb,KAAA,CAAAiB,aAAA;IAAKF,SAAS,EAAE;EAAwB,GAAEF,OAAa,CAClE,CAAC;AAEd,CAAC","ignoreList":[]}

package/Dialog/components/DialogHeader.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
-import { type DialogProps } from "../Dialog";
+import { type DialogProps } from "../Dialog.js";
 export type DialogHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & Pick<DialogProps, "title" | "icon" | "description" | "size">;
 export declare const DialogHeader: ({ title, icon, description, size, className, ...props }: DialogHeaderProps) => React.JSX.Element | null;

package/Dialog/components/DialogHeader.js

@@ -1,15 +1,15 @@
 import * as React from "react";
-import { cn, cva } from "../../utils";
-import { DialogTitle } from "./DialogTitle";
-import { DialogDescription } from "./DialogDescription";
-const dialogHeaderVariants = cva(["wby-flex wby-flex-col wby-gap-sm", "wby-text-neutral-primary", "wby-sm:text-left"], {
+import { cn, cva } from "../../utils.js";
+import { DialogTitle } from "./DialogTitle.js";
+import { DialogDescription } from "./DialogDescription.js";
+const dialogHeaderVariants = cva(["flex flex-col gap-xs", "text-neutral-primary", "sm:text-left"], {
   variants: {
     size: {
-      sm: "wby-pt-md wby-pb-md-extra wby-px-md-extra wby-mr-xl",
-      md: "wby-pt-md wby-pb-md-extra wby-px-md-extra wby-mr-xl",
-      lg: "wby-pt-md wby-pb-md-extra wby-px-lg wby-mr-xl",
-      xl: "wby-pt-md wby-pb-md-extra wby-px-lg wby-mr-xl",
-      full: "wby-pt-md wby-pb-md-extra wby-px-lg wby-mr-xl"
+      sm: "pt-md pb-md-extra px-md-extra mr-xl",
+      md: "pt-md pb-md-extra px-md-extra mr-xl",
+      lg: "pt-md pb-md-extra px-lg mr-xl",
+      xl: "pt-md pb-md-extra px-lg mr-xl",
+      full: "pt-md pb-md-extra px-lg mr-xl"
     }
   },
   defaultVariants: {