@webiny/admin-ui 6.0.0-alpha.5 → 6.0.0-rc.0

package/Drawer/Drawer.js

@@ -1,16 +1,16 @@
 import * as React from "react";
-import { makeDecoratable, withStaticProps } from "../utils";
-import { DrawerContent } from "./components/DrawerContent";
-import { DrawerFooter } from "./components/DrawerFooter";
-import { DrawerHeader } from "./components/DrawerHeader";
-import { DrawerOverlay } from "./components/DrawerOverlay";
-import { DrawerPortal } from "./components/DrawerPortal";
-import { DrawerRoot } from "./components/DrawerRoot";
-import { DrawerTrigger } from "./components/DrawerTrigger";
-import { DrawerBody } from "./components/DrawerBody";
-import { Icon } from "./components/Icon";
-import { ConfirmButton } from "./components/ConfirmButton";
-import { CancelButton } from "./components/CancelButton";
+import { makeDecoratable, withStaticProps } from "../utils.js";
+import { DrawerContent } from "./components/DrawerContent.js";
+import { DrawerFooter } from "./components/DrawerFooter.js";
+import { DrawerHeader } from "./components/DrawerHeader.js";
+import { DrawerOverlay } from "./components/DrawerOverlay.js";
+import { DrawerPortal } from "./components/DrawerPortal.js";
+import { DrawerRoot } from "./components/DrawerRoot.js";
+import { DrawerTrigger } from "./components/DrawerTrigger.js";
+import { DrawerBody } from "./components/DrawerBody.js";
+import { Icon } from "./components/Icon.js";
+import { ConfirmButton } from "./components/ConfirmButton.js";
+import { CancelButton } from "./components/CancelButton.js";
 const DrawerBase = props => {
   const {
     rootProps,
@@ -93,9 +93,12 @@ const DrawerBase = props => {
   }, [props]);
   return /*#__PURE__*/React.createElement(DrawerRoot, rootProps, triggerProps.children && /*#__PURE__*/React.createElement(DrawerTrigger, Object.assign({}, triggerProps, {
     asChild: true
-  })), /*#__PURE__*/React.createElement(DrawerPortal, null, rootProps.modal && /*#__PURE__*/React.createElement(DrawerOverlay, null), /*#__PURE__*/React.createElement(DrawerContent, Object.assign({}, contentProps, {
+  })), /*#__PURE__*/React.createElement(DrawerPortal, null, /*#__PURE__*/React.createElement("div", {
+    "data-role": "drawer",
+    className: "absolute z-overlay"
+  }, rootProps.modal && /*#__PURE__*/React.createElement(DrawerOverlay, null), /*#__PURE__*/React.createElement(DrawerContent, Object.assign({}, contentProps, {
     modal: rootProps.modal
-  }), /*#__PURE__*/React.createElement(DrawerHeader, headerProps), /*#__PURE__*/React.createElement(DrawerBody, bodyProps), /*#__PURE__*/React.createElement(DrawerFooter, footerProps))));
+  }), /*#__PURE__*/React.createElement(DrawerHeader, headerProps), /*#__PURE__*/React.createElement(DrawerBody, bodyProps), /*#__PURE__*/React.createElement(DrawerFooter, footerProps)))));
 };
 DrawerBase.displayName = "Drawer";
 const DecoratableDrawer = makeDecoratable("Drawer", DrawerBase);

package/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","withStaticProps","DrawerContent","DrawerFooter","DrawerHeader","DrawerOverlay","DrawerPortal","DrawerRoot","DrawerTrigger","DrawerBody","Icon","ConfirmButton","CancelButton","DrawerBase","props","rootProps","triggerProps","contentProps","headerProps","bodyProps","footerProps","useMemo","defaultOpen","open","onOpenChange","originalOnOpenChange","onClose","onOpen","modal","dir","trigger","title","icon","description","showCloseButton","headerSeparator","children","bodyPadding","actions","info","footerSeparator","rest","createElement","separator","Object","assign","asChild","displayName","DecoratableDrawer","Drawer"],"sources":["Drawer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport { DrawerContent } from \"./components/DrawerContent\";\nimport { DrawerFooter } from \"./components/DrawerFooter\";\nimport { DrawerHeader } from \"./components/DrawerHeader\";\nimport { DrawerOverlay } from \"./components/DrawerOverlay\";\nimport { DrawerPortal } from \"./components/DrawerPortal\";\nimport { DrawerRoot } from \"./components/DrawerRoot\";\nimport { DrawerTrigger } from \"./components/DrawerTrigger\";\nimport { DrawerBody } from \"~/Drawer/components/DrawerBody\";\nimport { Icon } from \"./components/Icon\";\nimport { ConfirmButton } from \"./components/ConfirmButton\";\nimport { CancelButton } from \"./components/CancelButton\";\n\ninterface DrawerProps\n    extends React.ComponentPropsWithoutRef<typeof DrawerRoot>,\n        Omit<React.ComponentPropsWithoutRef<typeof DrawerContent>, \"title\"> {\n    trigger?: React.ReactNode;\n    title?: React.ReactNode;\n    icon?: React.ReactElement;\n    modal?: boolean;\n    showCloseButton?: boolean;\n    bodyPadding?: boolean;\n    headerSeparator?: boolean;\n    footerSeparator?: boolean;\n    description?: React.ReactNode;\n    children: React.ReactNode;\n    actions?: React.ReactNode;\n    info?: React.ReactNode;\n    width?: React.CSSProperties[\"width\"];\n    onClose?: () => void;\n    onOpen?: () => void;\n}\n\nconst DrawerBase = (props: DrawerProps) => {\n    const { rootProps, triggerProps, contentProps, headerProps, bodyProps, footerProps } =\n        React.useMemo(() => {\n            const {\n                // Root props.\n                defaultOpen,\n                open,\n                onOpenChange: originalOnOpenChange,\n                onClose,\n                onOpen,\n\n                // We want the drawer to always allow interaction with the outside elements.\n                modal = false,\n                dir,\n\n                // Trigger props.\n                trigger,\n\n                // Header props.\n                title,\n                icon,\n                description,\n                showCloseButton,\n                headerSeparator,\n\n                // Body props.\n                children,\n                bodyPadding,\n\n                // Footer props.\n                actions,\n                info,\n                footerSeparator,\n\n                // Content props.\n                ...rest\n            } = props;\n\n            // Handles dialog open state changes, calling original and onClose / onOpen callbacks as needed\n            const onOpenChange = (open: boolean) => {\n                originalOnOpenChange && originalOnOpenChange(open);\n\n                if (onClose && !open) {\n                    onClose();\n                }\n\n                if (onOpen && open) {\n                    onOpen();\n                }\n            };\n\n            return {\n                rootProps: {\n                    defaultOpen,\n                    open,\n                    onOpenChange,\n                    modal,\n                    dir\n                },\n                triggerProps: {\n                    // Temporary fix. We need this because `ref` doesn't get passed to components\n                    // that are decorated with `makeDecoratable`. This will be fixed in the future.\n                    children: <div>{trigger}</div>\n                },\n                headerProps: {\n                    title,\n                    icon,\n                    description,\n                    showCloseButton,\n                    separator: headerSeparator\n                },\n                bodyProps: { children, bodyPadding },\n                footerProps: { info, actions, separator: footerSeparator },\n                contentProps: rest\n            };\n        }, [props]);\n\n    return (\n        <DrawerRoot {...rootProps}>\n            {triggerProps.children && <DrawerTrigger {...triggerProps} asChild />}\n            <DrawerPortal>\n                {rootProps.modal && <DrawerOverlay />}\n                <DrawerContent {...contentProps} modal={rootProps.modal}>\n                    <DrawerHeader {...headerProps} />\n                    <DrawerBody {...bodyProps} />\n                    <DrawerFooter {...footerProps} />\n                </DrawerContent>\n            </DrawerPortal>\n        </DrawerRoot>\n    );\n};\n\nDrawerBase.displayName = \"Drawer\";\n\nconst DecoratableDrawer = makeDecoratable(\"Drawer\", DrawerBase);\n\nconst Drawer = withStaticProps(DecoratableDrawer, {\n    ConfirmButton,\n    CancelButton,\n    Icon\n});\n\nexport { Drawer, type DrawerProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;AACzC,SAASC,aAAa;AACtB,SAASC,YAAY;AACrB,SAASC,YAAY;AACrB,SAASC,aAAa;AACtB,SAASC,YAAY;AACrB,SAASC,UAAU;AACnB,SAASC,aAAa;AACtB,SAASC,UAAU;AACnB,SAASC,IAAI;AACb,SAASC,aAAa;AACtB,SAASC,YAAY;AAsBrB,MAAMC,UAAU,GAAIC,KAAkB,IAAK;EACvC,MAAM;IAAEC,SAAS;IAAEC,YAAY;IAAEC,YAAY;IAAEC,WAAW;IAAEC,SAAS;IAAEC;EAAY,CAAC,GAChFrB,KAAK,CAACsB,OAAO,CAAC,MAAM;IAChB,MAAM;MACF;MACAC,WAAW;MACXC,IAAI;MACJC,YAAY,EAAEC,oBAAoB;MAClCC,OAAO;MACPC,MAAM;MAEN;MACAC,KAAK,GAAG,KAAK;MACbC,GAAG;MAEH;MACAC,OAAO;MAEP;MACAC,KAAK;MACLC,IAAI;MACJC,WAAW;MACXC,eAAe;MACfC,eAAe;MAEf;MACAC,QAAQ;MACRC,WAAW;MAEX;MACAC,OAAO;MACPC,IAAI;MACJC,eAAe;MAEf;MACA,GAAGC;IACP,CAAC,GAAG3B,KAAK;;IAET;IACA,MAAMU,YAAY,GAAID,IAAa,IAAK;MACpCE,oBAAoB,IAAIA,oBAAoB,CAACF,IAAI,CAAC;MAElD,IAAIG,OAAO,IAAI,CAACH,IAAI,EAAE;QAClBG,OAAO,CAAC,CAAC;MACb;MAEA,IAAIC,MAAM,IAAIJ,IAAI,EAAE;QAChBI,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC;IAED,OAAO;MACHZ,SAAS,EAAE;QACPO,WAAW;QACXC,IAAI;QACJC,YAAY;QACZI,KAAK;QACLC;MACJ,CAAC;MACDb,YAAY,EAAE;QACV;QACA;QACAoB,QAAQ,eAAErC,KAAA,CAAA2C,aAAA,cAAMZ,OAAa;MACjC,CAAC;MACDZ,WAAW,EAAE;QACTa,KAAK;QACLC,IAAI;QACJC,WAAW;QACXC,eAAe;QACfS,SAAS,EAAER;MACf,CAAC;MACDhB,SAAS,EAAE;QAAEiB,QAAQ;QAAEC;MAAY,CAAC;MACpCjB,WAAW,EAAE;QAAEmB,IAAI;QAAED,OAAO;QAAEK,SAAS,EAAEH;MAAgB,CAAC;MAC1DvB,YAAY,EAAEwB;IAClB,CAAC;EACL,CAAC,EAAE,CAAC3B,KAAK,CAAC,CAAC;EAEf,oBACIf,KAAA,CAAA2C,aAAA,CAACnC,UAAU,EAAKQ,SAAS,EACpBC,YAAY,CAACoB,QAAQ,iBAAIrC,KAAA,CAAA2C,aAAA,CAAClC,aAAa,EAAAoC,MAAA,CAAAC,MAAA,KAAK7B,YAAY;IAAE8B,OAAO;EAAA,EAAE,CAAC,eACrE/C,KAAA,CAAA2C,aAAA,CAACpC,YAAY,QACRS,SAAS,CAACa,KAAK,iBAAI7B,KAAA,CAAA2C,aAAA,CAACrC,aAAa,MAAE,CAAC,eACrCN,KAAA,CAAA2C,aAAA,CAACxC,aAAa,EAAA0C,MAAA,CAAAC,MAAA,KAAK5B,YAAY;IAAEW,KAAK,EAAEb,SAAS,CAACa;EAAM,iBACpD7B,KAAA,CAAA2C,aAAA,CAACtC,YAAY,EAAKc,WAAc,CAAC,eACjCnB,KAAA,CAAA2C,aAAA,CAACjC,UAAU,EAAKU,SAAY,CAAC,eAC7BpB,KAAA,CAAA2C,aAAA,CAACvC,YAAY,EAAKiB,WAAc,CACrB,CACL,CACN,CAAC;AAErB,CAAC;AAEDP,UAAU,CAACkC,WAAW,GAAG,QAAQ;AAEjC,MAAMC,iBAAiB,GAAGhD,eAAe,CAAC,QAAQ,EAAEa,UAAU,CAAC;AAE/D,MAAMoC,MAAM,GAAGhD,eAAe,CAAC+C,iBAAiB,EAAE;EAC9CrC,aAAa;EACbC,YAAY;EACZF;AACJ,CAAC,CAAC;AAEF,SAASuC,MAAM","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","withStaticProps","DrawerContent","DrawerFooter","DrawerHeader","DrawerOverlay","DrawerPortal","DrawerRoot","DrawerTrigger","DrawerBody","Icon","ConfirmButton","CancelButton","DrawerBase","props","rootProps","triggerProps","contentProps","headerProps","bodyProps","footerProps","useMemo","defaultOpen","open","onOpenChange","originalOnOpenChange","onClose","onOpen","modal","dir","trigger","title","icon","description","showCloseButton","headerSeparator","children","bodyPadding","actions","info","footerSeparator","rest","createElement","separator","Object","assign","asChild","className","displayName","DecoratableDrawer","Drawer"],"sources":["Drawer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { DrawerContent } from \"./components/DrawerContent.js\";\nimport { DrawerFooter } from \"./components/DrawerFooter.js\";\nimport { DrawerHeader } from \"./components/DrawerHeader.js\";\nimport { DrawerOverlay } from \"./components/DrawerOverlay.js\";\nimport { DrawerPortal } from \"./components/DrawerPortal.js\";\nimport { DrawerRoot } from \"./components/DrawerRoot.js\";\nimport { DrawerTrigger } from \"./components/DrawerTrigger.js\";\nimport { DrawerBody } from \"~/Drawer/components/DrawerBody.js\";\nimport { Icon } from \"./components/Icon.js\";\nimport { ConfirmButton } from \"./components/ConfirmButton.js\";\nimport { CancelButton } from \"./components/CancelButton.js\";\n\ninterface DrawerProps\n    extends React.ComponentPropsWithoutRef<typeof DrawerRoot>,\n        Omit<React.ComponentPropsWithoutRef<typeof DrawerContent>, \"title\"> {\n    trigger?: React.ReactNode;\n    title?: React.ReactNode;\n    icon?: React.ReactElement;\n    modal?: boolean;\n    showCloseButton?: boolean;\n    bodyPadding?: boolean;\n    headerSeparator?: boolean;\n    footerSeparator?: boolean;\n    description?: React.ReactNode;\n    children: React.ReactNode;\n    actions?: React.ReactNode;\n    info?: React.ReactNode;\n    width?: React.CSSProperties[\"width\"];\n    onClose?: () => void;\n    onOpen?: () => void;\n}\n\nconst DrawerBase = (props: DrawerProps) => {\n    const { rootProps, triggerProps, contentProps, headerProps, bodyProps, footerProps } =\n        React.useMemo(() => {\n            const {\n                // Root props.\n                defaultOpen,\n                open,\n                onOpenChange: originalOnOpenChange,\n                onClose,\n                onOpen,\n\n                // We want the drawer to always allow interaction with the outside elements.\n                modal = false,\n                dir,\n\n                // Trigger props.\n                trigger,\n\n                // Header props.\n                title,\n                icon,\n                description,\n                showCloseButton,\n                headerSeparator,\n\n                // Body props.\n                children,\n                bodyPadding,\n\n                // Footer props.\n                actions,\n                info,\n                footerSeparator,\n\n                // Content props.\n                ...rest\n            } = props;\n\n            // Handles dialog open state changes, calling original and onClose / onOpen callbacks as needed\n            const onOpenChange = (open: boolean) => {\n                originalOnOpenChange && originalOnOpenChange(open);\n\n                if (onClose && !open) {\n                    onClose();\n                }\n\n                if (onOpen && open) {\n                    onOpen();\n                }\n            };\n\n            return {\n                rootProps: {\n                    defaultOpen,\n                    open,\n                    onOpenChange,\n                    modal,\n                    dir\n                },\n                triggerProps: {\n                    // Temporary fix. We need this because `ref` doesn't get passed to components\n                    // that are decorated with `makeDecoratable`. This will be fixed in the future.\n                    children: <div>{trigger}</div>\n                },\n                headerProps: {\n                    title,\n                    icon,\n                    description,\n                    showCloseButton,\n                    separator: headerSeparator\n                },\n                bodyProps: { children, bodyPadding },\n                footerProps: { info, actions, separator: footerSeparator },\n                contentProps: rest\n            };\n        }, [props]);\n\n    return (\n        <DrawerRoot {...rootProps}>\n            {triggerProps.children && <DrawerTrigger {...triggerProps} asChild />}\n            <DrawerPortal>\n                <div data-role=\"drawer\" className={\"absolute z-overlay\"}>\n                    {rootProps.modal && <DrawerOverlay />}\n                    <DrawerContent {...contentProps} modal={rootProps.modal}>\n                        <DrawerHeader {...headerProps} />\n                        <DrawerBody {...bodyProps} />\n                        <DrawerFooter {...footerProps} />\n                    </DrawerContent>\n                </div>\n            </DrawerPortal>\n        </DrawerRoot>\n    );\n};\n\nDrawerBase.displayName = \"Drawer\";\n\nconst DecoratableDrawer = makeDecoratable(\"Drawer\", DrawerBase);\n\nconst Drawer = withStaticProps(DecoratableDrawer, {\n    ConfirmButton,\n    CancelButton,\n    Icon\n});\n\nexport { Drawer, type DrawerProps };\n"],"mappings":"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","ignoreList":[]}

package/Drawer/Drawer.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as DrawerStories from './Drawer.stories';
 
@@ -43,11 +43,11 @@ const DrawerExample = () => {
                     </>
                 }
             >
-                <p className={"wby-mb-md, wby-mt-md"}>
+                <p className={"mb-md, mt-md"}>
                     This is the drawer content area. You can place any content here including
                     forms, text, images, or other components.
                 </p>
-                <p className={"wby-mb-md"}>
+                <p className={"mb-md"}>
                     Drawers are useful for displaying additional information or actions
                     without navigating away from the current page.
                 </p>
@@ -107,11 +107,11 @@ const DrawerExample = () => {
                     </>
                 }
             >
-                <p className={"wby-mb-md, wby-mt-md"}>
+                <p className={"mb-md, mt-md"}>
                     This is the drawer content area. You can place any content here including
                     forms, text, images, or other components.
                 </p>
-                <p className={"wby-mb-md"}>
+                <p className={"mb-md"}>
                     Drawers are useful for displaying additional information or actions
                     without navigating away from the current page.
                 </p>
@@ -166,7 +166,7 @@ const ControlledVisibilityExample = () => {
                     </>
                 }
             >
-                <p className={"wby-mb-md, wby-mt-md"}>
+                <p className={"mb-md, mt-md"}>
                   This drawer&apos;s visibility is controlled by the open state.
                  </p>
             </Drawer>

package/Drawer/Drawer.stories.d.ts

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

package/Drawer/Drawer.stories.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { Drawer } from "./Drawer";
-import { Button } from "../Button";
-import { DropdownMenu } from "../DropdownMenu";
-import { Tabs } from "../Tabs";
+import { Drawer } from "./Drawer.js";
+import { Button } from "../Button/index.js";
+import { DropdownMenu } from "../DropdownMenu/index.js";
+import { Tabs } from "../Tabs/index.js";
 import { ReactComponent as DoorbellIcon } from "@webiny/icons/ring_volume.svg";
 const meta = {
   title: "Components/Drawer",
@@ -22,13 +22,13 @@ export const Default = {
       href: "#"
     }, "here"), "."),
     children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-      className: "wby-mb-md"
+      className: "mb-md"
     }, "The amazing, splendid, and most useful umbrella, resistant to rain and friendly to winds, is something that deserves all admiration. Crafted with perfect textures, it bravely withstands storms and gently shades the rays of the sun. A remarkable innovation, with an ergonomically designed grip most suited to the hand, it remains stable even in the fiercest weather."), /*#__PURE__*/React.createElement("p", {
-      className: "wby-mb-md"
+      className: "mb-md"
     }, "Its fabric, woven from the highest quality materials, ensures that you stay dry, no matter the intensity of the rain. With a frame engineered for strength yet lightweight enough to carry with ease, this umbrella is a marvel of modern design. Not just a shield against the elements, but a companion in your everyday journey, it provides peace of mind, knowing you\u2019re prepared for whatever the skies may bring."), /*#__PURE__*/React.createElement("p", {
-      className: "wby-mb-md"
+      className: "mb-md"
     }, "The sleek, stylish design complements any outfit, making it not only a practical accessory but also a fashion statement. With its smooth opening mechanism, you can effortlessly transition from a sunny day to a rainy one without missing a beat. Whether you are navigating through a busy city street or enjoying a quiet stroll in the park, this umbrella offers unmatched comfort and protection."), /*#__PURE__*/React.createElement("p", {
-      className: "wby-mb-md"
+      className: "mb-md"
     }, "Indeed, it is not just an umbrella \u2014 it is an experience. One that elevates your daily routine, making every step in both sun and storm feel just a little bit brighter.")),
     onOpenChange: opened => {
       console.log(`Drawer is ${opened ? "opened" : "closed"}.`);
@@ -224,9 +224,9 @@ export const Documentation = {
       href: "#"
     }, "here"), "."),
     children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-      className: "wby-mb-md, wby-mt-md"
+      className: "mb-md, mt-md"
     }, "This is the drawer content area. You can place any content here including forms, text, images, or other components."), /*#__PURE__*/React.createElement("p", {
-      className: "wby-mb-md"
+      className: "mb-md"
     }, "Drawers are useful for displaying additional information or actions without navigating away from the current page.")),
     actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawer.CancelButton, null), /*#__PURE__*/React.createElement(Drawer.ConfirmButton, null)),
     width: undefined
@@ -278,20 +278,16 @@ export const Documentation = {
       defaultValue: true
     },
     width: {
-      description: 'Width defines the horizontal size of the Drawer and accepts any valid CSS width value. You can pass a number (interpreted as pixels) or a string like "80%", "50vw", "auto", etc., following React.CSSProperties["width"] types.',
-      control: "none"
+      description: 'Width defines the horizontal size of the Drawer and accepts any valid CSS width value. You can pass a number (interpreted as pixels) or a string like "80%", "50vw", "auto", etc., following React.CSSProperties["width"] types.'
     },
     info: {
-      description: "Additional info displayed below the description, please refer to the example below for details.",
-      control: "none"
+      description: "Additional info displayed below the description, please refer to the example below for details."
     },
     children: {
-      description: "Content of the Drawer, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.",
-      control: "none"
+      description: "Content of the Drawer, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details."
     },
     actions: {
-      description: "Actions displayed in the footer, please refer to the code example for details.",
-      control: "none"
+      description: "Actions displayed in the footer, please refer to the code example for details."
     }
   }
 };

package/Drawer/Drawer.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Drawer","Button","DropdownMenu","Tabs","ReactComponent","DoorbellIcon","meta","title","component","argTypes","Default","args","trigger","createElement","variant","text","description","info","Fragment","href","children","className","onOpenChange","opened","console","log","actions","CancelButton","ConfirmButton","bodyPadding","headerSeparator","footerSeparator","SizeSmall","size","SizeMedium","SizeLarge","SizeExtraLarge","ControlledVisibility","render","props","open","setOpen","useState","onClick","Object","assign","WithOpenCloseEventHandler","onClose","onOpen","WithDropdownMenu","Item","content","WithoutCloseButton","showCloseButton","CustomWidth","width","WithTabs","spacing","tabs","Tab","key","value","DropdownMenuInDrawer","WithIcon","icon","Icon","label","AsModal","modal","Documentation","side","undefined","control","options","defaultValue"],"sources":["Drawer.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Drawer } from \"./Drawer\";\nimport { Button } from \"~/Button\";\nimport { DropdownMenu } from \"~/DropdownMenu\";\nimport { Tabs } from \"~/Tabs\";\nimport { ReactComponent as DoorbellIcon } from \"@webiny/icons/ring_volume.svg\";\n\nconst meta: Meta<typeof Drawer> = {\n    title: \"Components/Drawer\",\n    component: Drawer,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Drawer>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        title: \"Drawer 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                <p className={\"wby-mb-md\"}>\n                    The amazing, splendid, and most useful umbrella, resistant to rain and friendly\n                    to winds, is something that deserves all admiration. Crafted with perfect\n                    textures, it bravely withstands storms and gently shades the rays of the sun. A\n                    remarkable innovation, with an ergonomically designed grip most suited to the\n                    hand, it remains stable even in the fiercest weather.\n                </p>\n                <p className={\"wby-mb-md\"}>\n                    Its fabric, woven from the highest quality materials, ensures that you stay dry,\n                    no matter the intensity of the rain. With a frame engineered for strength yet\n                    lightweight enough to carry with ease, this umbrella is a marvel of modern\n                    design. Not just a shield against the elements, but a companion in your everyday\n                    journey, it provides peace of mind, knowing you’re prepared for whatever the\n                    skies may bring.\n                </p>\n                <p className={\"wby-mb-md\"}>\n                    The sleek, stylish design complements any outfit, making it not only a practical\n                    accessory but also a fashion statement. With its smooth opening mechanism, you\n                    can effortlessly transition from a sunny day to a rainy one without missing a\n                    beat. Whether you are navigating through a busy city street or enjoying a quiet\n                    stroll in the park, this umbrella offers unmatched comfort and protection.\n                </p>\n                <p className={\"wby-mb-md\"}>\n                    Indeed, it is not just an umbrella — it is an experience. One that elevates your\n                    daily routine, making every step in both sun and storm feel just a little bit\n                    brighter.\n                </p>\n            </>\n        ),\n        onOpenChange: opened => {\n            console.log(`Drawer is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        actions: (\n            <>\n                <Drawer.CancelButton />\n                <Drawer.ConfirmButton />\n            </>\n        ),\n        bodyPadding: true,\n        headerSeparator: true,\n        footerSeparator: true\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 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                <Drawer\n                    {...props}\n                    open={open}\n                    onOpenChange={open => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                    }}\n                />\n            </>\n        );\n    },\n    args: {\n        ...Default.args,\n        trigger: null,\n        children: <>This drawer&apos;s visibility is controlled by the open state.</>\n    }\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 Drawer\"}\n                        content={\"Open Drawer\"}\n                        onClick={() => setOpen(true)}\n                    />\n                </DropdownMenu>\n\n                <Drawer {...props} open={open} onOpenChange={() => setOpen(false)} />\n            </>\n        );\n    },\n    args: {\n        ...Default.args,\n        trigger: null,\n        children: <>This drawer is opened from a dropdown menu item.</>\n    }\n};\n\nexport const WithoutCloseButton: Story = {\n    args: {\n        ...Default.args,\n        showCloseButton: false,\n        children: <>This drawer is opened from a dropdown menu item.</>\n    }\n};\n\nexport const CustomWidth: Story = {\n    args: {\n        ...Default.args,\n        width: 1000,\n        children: <>This drawer has a custom width of 1000px, making it wider than the default.</>\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        headerSeparator: 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 DropdownMenuInDrawer: 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 WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Drawer.Icon icon={<DoorbellIcon />} label={\"Icon label...\"} />,\n        children: <>The icon helps to visually identify the purpose of this drawer.</>\n    }\n};\n\nexport const AsModal: Story = {\n    args: {\n        ...Default.args,\n        modal: true,\n        children: (\n            <>\n                This drawer has modal=true, which means it will show an overlay behind it and\n                prevent interaction with the content underneath.\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text=\"Open Drawer\" onClick={() => setOpen(true)} />\n\n                <Drawer {...args} open={open} onOpenChange={open => setOpen(open)} />\n            </>\n        );\n    },\n    args: {\n        title: \"Drawer Title\",\n        description: \"A short drawer description.\",\n        showCloseButton: true,\n        bodyPadding: true,\n        headerSeparator: true,\n        footerSeparator: true,\n        side: \"right\",\n        modal: false,\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                <p className={\"wby-mb-md, wby-mt-md\"}>\n                    This is the drawer content area. You can place any content here including forms,\n                    text, images, or other components.\n                </p>\n                <p className={\"wby-mb-md\"}>\n                    Drawers are useful for displaying additional information or actions without\n                    navigating away from the current page.\n                </p>\n            </>\n        ),\n        actions: (\n            <>\n                <Drawer.CancelButton />\n                <Drawer.ConfirmButton />\n            </>\n        ),\n        width: undefined\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        side: {\n            description: \"Side from which the drawer appears\",\n            control: \"select\",\n            options: [\"left\", \"right\"],\n            defaultValue: \"right\"\n        },\n        size: {\n            description: \"Controls the size of the drawer\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        showCloseButton: {\n            description: \"Show close button in the top-right corner\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        modal: {\n            description: \"Whether the drawer should behave as a modal\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        bodyPadding: {\n            description: \"Add padding to the drawer body\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        headerSeparator: {\n            description: \"Show separator below the header\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        footerSeparator: {\n            description: \"Show separator above the footer\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        width: {\n            description:\n                'Width defines the horizontal size of the Drawer and accepts any valid CSS width value. You can pass a number (interpreted as pixels) or a string like \"80%\", \"50vw\", \"auto\", etc., following React.CSSProperties[\"width\"] types.',\n            control: \"none\"\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 Drawer, 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","Drawer","Button","DropdownMenu","Tabs","ReactComponent","DoorbellIcon","meta","title","component","argTypes","Default","args","trigger","createElement","variant","text","description","info","Fragment","href","children","className","onOpenChange","opened","console","log","actions","CancelButton","ConfirmButton","bodyPadding","headerSeparator","footerSeparator","SizeSmall","size","SizeMedium","SizeLarge","SizeExtraLarge","ControlledVisibility","render","props","open","setOpen","useState","onClick","Object","assign","WithOpenCloseEventHandler","onClose","onOpen","WithDropdownMenu","Item","content","WithoutCloseButton","showCloseButton","CustomWidth","width","WithTabs","spacing","tabs","Tab","key","value","DropdownMenuInDrawer","WithIcon","icon","Icon","label","AsModal","modal","Documentation","side","undefined","control","options","defaultValue"],"sources":["Drawer.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Drawer } from \"./Drawer.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { ReactComponent as DoorbellIcon } from \"@webiny/icons/ring_volume.svg\";\n\nconst meta: Meta<typeof Drawer> = {\n    title: \"Components/Drawer\",\n    component: Drawer,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Drawer>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        title: \"Drawer 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                <p className={\"mb-md\"}>\n                    The amazing, splendid, and most useful umbrella, resistant to rain and friendly\n                    to winds, is something that deserves all admiration. Crafted with perfect\n                    textures, it bravely withstands storms and gently shades the rays of the sun. A\n                    remarkable innovation, with an ergonomically designed grip most suited to the\n                    hand, it remains stable even in the fiercest weather.\n                </p>\n                <p className={\"mb-md\"}>\n                    Its fabric, woven from the highest quality materials, ensures that you stay dry,\n                    no matter the intensity of the rain. With a frame engineered for strength yet\n                    lightweight enough to carry with ease, this umbrella is a marvel of modern\n                    design. Not just a shield against the elements, but a companion in your everyday\n                    journey, it provides peace of mind, knowing you’re prepared for whatever the\n                    skies may bring.\n                </p>\n                <p className={\"mb-md\"}>\n                    The sleek, stylish design complements any outfit, making it not only a practical\n                    accessory but also a fashion statement. With its smooth opening mechanism, you\n                    can effortlessly transition from a sunny day to a rainy one without missing a\n                    beat. Whether you are navigating through a busy city street or enjoying a quiet\n                    stroll in the park, this umbrella offers unmatched comfort and protection.\n                </p>\n                <p className={\"mb-md\"}>\n                    Indeed, it is not just an umbrella — it is an experience. One that elevates your\n                    daily routine, making every step in both sun and storm feel just a little bit\n                    brighter.\n                </p>\n            </>\n        ),\n        onOpenChange: opened => {\n            console.log(`Drawer is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        actions: (\n            <>\n                <Drawer.CancelButton />\n                <Drawer.ConfirmButton />\n            </>\n        ),\n        bodyPadding: true,\n        headerSeparator: true,\n        footerSeparator: true\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 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                <Drawer\n                    {...props}\n                    open={open}\n                    onOpenChange={open => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                    }}\n                />\n            </>\n        );\n    },\n    args: {\n        ...Default.args,\n        trigger: null,\n        children: <>This drawer&apos;s visibility is controlled by the open state.</>\n    }\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 Drawer\"}\n                        content={\"Open Drawer\"}\n                        onClick={() => setOpen(true)}\n                    />\n                </DropdownMenu>\n\n                <Drawer {...props} open={open} onOpenChange={() => setOpen(false)} />\n            </>\n        );\n    },\n    args: {\n        ...Default.args,\n        trigger: null,\n        children: <>This drawer is opened from a dropdown menu item.</>\n    }\n};\n\nexport const WithoutCloseButton: Story = {\n    args: {\n        ...Default.args,\n        showCloseButton: false,\n        children: <>This drawer is opened from a dropdown menu item.</>\n    }\n};\n\nexport const CustomWidth: Story = {\n    args: {\n        ...Default.args,\n        width: 1000,\n        children: <>This drawer has a custom width of 1000px, making it wider than the default.</>\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        headerSeparator: 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 DropdownMenuInDrawer: 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 WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Drawer.Icon icon={<DoorbellIcon />} label={\"Icon label...\"} />,\n        children: <>The icon helps to visually identify the purpose of this drawer.</>\n    }\n};\n\nexport const AsModal: Story = {\n    args: {\n        ...Default.args,\n        modal: true,\n        children: (\n            <>\n                This drawer has modal=true, which means it will show an overlay behind it and\n                prevent interaction with the content underneath.\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text=\"Open Drawer\" onClick={() => setOpen(true)} />\n\n                <Drawer {...args} open={open} onOpenChange={open => setOpen(open)} />\n            </>\n        );\n    },\n    args: {\n        title: \"Drawer Title\",\n        description: \"A short drawer description.\",\n        showCloseButton: true,\n        bodyPadding: true,\n        headerSeparator: true,\n        footerSeparator: true,\n        side: \"right\",\n        modal: false,\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                <p className={\"mb-md, mt-md\"}>\n                    This is the drawer content area. You can place any content here including forms,\n                    text, images, or other components.\n                </p>\n                <p className={\"mb-md\"}>\n                    Drawers are useful for displaying additional information or actions without\n                    navigating away from the current page.\n                </p>\n            </>\n        ),\n        actions: (\n            <>\n                <Drawer.CancelButton />\n                <Drawer.ConfirmButton />\n            </>\n        ),\n        width: undefined\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        side: {\n            description: \"Side from which the drawer appears\",\n            control: \"select\",\n            options: [\"left\", \"right\"],\n            defaultValue: \"right\"\n        },\n        size: {\n            description: \"Controls the size of the drawer\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        showCloseButton: {\n            description: \"Show close button in the top-right corner\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        modal: {\n            description: \"Whether the drawer should behave as a modal\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        bodyPadding: {\n            description: \"Add padding to the drawer body\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        headerSeparator: {\n            description: \"Show separator below the header\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        footerSeparator: {\n            description: \"Show separator above the footer\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        width: {\n            description:\n                'Width defines the horizontal size of the Drawer and accepts any valid CSS width value. You can pass a number (interpreted as pixels) or a string like \"80%\", \"50vw\", \"auto\", etc., following React.CSSProperties[\"width\"] types.'\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 Drawer, 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/Drawer/components/CancelButton.d.ts

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

package/Drawer/components/CancelButton.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { makeDecoratable } from "../../utils";
-import { DrawerClose } from "./DrawerClose";
-import { Button } from "../../Button";
+import { makeDecoratable } from "../../utils.js";
+import { DrawerClose } from "./DrawerClose.js";
+import { Button } from "../../Button/index.js";
 const CancelButtonBase = props => /*#__PURE__*/React.createElement(DrawerClose, {
   asChild: true
 }, /*#__PURE__*/React.createElement(Button, Object.assign({

package/Drawer/components/CancelButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","DrawerClose","Button","CancelButtonBase","props","createElement","asChild","Object","assign","text","variant","CancelButton"],"sources":["CancelButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport { DrawerClose } from \"./DrawerClose\";\nimport type { ButtonProps } from \"~/Button\";\nimport { Button } from \"~/Button\";\n\nconst CancelButtonBase = (props: ButtonProps) => (\n    <DrawerClose asChild>\n        <Button text={\"Cancel\"} {...props} variant=\"secondary\" />\n    </DrawerClose>\n);\n\nexport const CancelButton = makeDecoratable(\"CancelButton\", CancelButtonBase);\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":[]}
+{"version":3,"names":["React","makeDecoratable","DrawerClose","Button","CancelButtonBase","props","createElement","asChild","Object","assign","text","variant","CancelButton"],"sources":["CancelButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport { DrawerClose } from \"./DrawerClose.js\";\nimport type { ButtonProps } from \"~/Button/index.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst CancelButtonBase = (props: ButtonProps) => (\n    <DrawerClose asChild>\n        <Button text={\"Cancel\"} {...props} variant=\"secondary\" />\n    </DrawerClose>\n);\n\nexport const CancelButton = makeDecoratable(\"CancelButton\", CancelButtonBase);\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/Drawer/components/ConfirmButton.d.ts

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

package/Drawer/components/ConfirmButton.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { makeDecoratable } from "../../utils";
-import { Button } from "../../Button";
+import { makeDecoratable } from "../../utils.js";
+import { Button } from "../../Button/index.js";
 const ConfirmButtonBase = props => /*#__PURE__*/React.createElement(Button, Object.assign({
   text: "Confirm"
 }, props, {

package/Drawer/components/ConfirmButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","Button","ConfirmButtonBase","props","createElement","Object","assign","text","variant","ConfirmButton"],"sources":["ConfirmButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { ButtonProps } from \"~/Button\";\nimport { Button } from \"~/Button\";\n\nconst ConfirmButtonBase = (props: ButtonProps) => (\n    <Button text={\"Confirm\"} {...props} variant=\"primary\" />\n);\n\nexport const ConfirmButton = makeDecoratable(\"ConfirmButton\", ConfirmButtonBase);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AAExB,SAASC,MAAM;AAEf,MAAMC,iBAAiB,GAAIC,KAAkB,iBACzCJ,KAAA,CAAAK,aAAA,CAACH,MAAM,EAAAI,MAAA,CAAAC,MAAA;EAACC,IAAI,EAAE;AAAU,GAAKJ,KAAK;EAAEK,OAAO,EAAC;AAAS,EAAE,CAC1D;AAED,OAAO,MAAMC,aAAa,GAAGT,eAAe,CAAC,eAAe,EAAEE,iBAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","Button","ConfirmButtonBase","props","createElement","Object","assign","text","variant","ConfirmButton"],"sources":["ConfirmButton.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 ConfirmButtonBase = (props: ButtonProps) => (\n    <Button text={\"Confirm\"} {...props} variant=\"primary\" />\n);\n\nexport const ConfirmButton = makeDecoratable(\"ConfirmButton\", ConfirmButtonBase);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AAExB,SAASC,MAAM;AAEf,MAAMC,iBAAiB,GAAIC,KAAkB,iBACzCJ,KAAA,CAAAK,aAAA,CAACH,MAAM,EAAAI,MAAA,CAAAC,MAAA;EAACC,IAAI,EAAE;AAAU,GAAKJ,KAAK;EAAEK,OAAO,EAAC;AAAS,EAAE,CAC1D;AAED,OAAO,MAAMC,aAAa,GAAGT,eAAe,CAAC,eAAe,EAAEE,iBAAiB,CAAC","ignoreList":[]}

package/Drawer/components/DrawerBody.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
-import type { DrawerProps } from "..";
+import type { DrawerProps } from "../../Drawer/index.js";
 export type DrawerBodyProps = Pick<DrawerProps, "children" | "bodyPadding">;
 export declare const DrawerBody: ({ bodyPadding, children }: DrawerBodyProps) => React.JSX.Element;

package/Drawer/components/DrawerBody.js

@@ -1,12 +1,12 @@
 import * as React from "react";
-import { cn } from "../../utils";
+import { cn } from "../../utils.js";
 export const DrawerBody = ({
   bodyPadding,
   children
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: cn("wby-h-full wby-overflow-auto", {
-      "wby-px-lg": bodyPadding !== false
+    className: cn("h-full overflow-auto", {
+      "px-lg": bodyPadding !== false
     })
   }, children);
 };

package/Drawer/components/DrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","DrawerBody","bodyPadding","children","createElement","className"],"sources":["DrawerBody.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"~/utils\";\nimport type { DrawerProps } from \"~/Drawer\";\n\nexport type DrawerBodyProps = Pick<DrawerProps, \"children\" | \"bodyPadding\">;\n\nexport const DrawerBody = ({ bodyPadding, children }: DrawerBodyProps) => {\n    return (\n        <div\n            className={cn(\"wby-h-full wby-overflow-auto\", {\n                \"wby-px-lg\": bodyPadding !== false\n            })}\n        >\n            {children}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE;AAKX,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEC,WAAW;EAAEC;AAA0B,CAAC,KAAK;EACtE,oBACIJ,KAAA,CAAAK,aAAA;IACIC,SAAS,EAAEL,EAAE,CAAC,8BAA8B,EAAE;MAC1C,WAAW,EAAEE,WAAW,KAAK;IACjC,CAAC;EAAE,GAEFC,QACA,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","cn","DrawerBody","bodyPadding","children","createElement","className"],"sources":["DrawerBody.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport type { DrawerProps } from \"~/Drawer/index.js\";\n\nexport type DrawerBodyProps = Pick<DrawerProps, \"children\" | \"bodyPadding\">;\n\nexport const DrawerBody = ({ bodyPadding, children }: DrawerBodyProps) => {\n    return (\n        <div\n            className={cn(\"h-full overflow-auto\", {\n                \"px-lg\": bodyPadding !== false\n            })}\n        >\n            {children}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE;AAKX,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEC,WAAW;EAAEC;AAA0B,CAAC,KAAK;EACtE,oBACIJ,KAAA,CAAAK,aAAA;IACIC,SAAS,EAAEL,EAAE,CAAC,sBAAsB,EAAE;MAClC,OAAO,EAAEE,WAAW,KAAK;IAC7B,CAAC;EAAE,GAEFC,QACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/Drawer/components/DrawerClose.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { Dialog as DrawerPrimitive } from "radix-ui";
 export declare const DrawerClose: import("react").ForwardRefExoticComponent<DrawerPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;

package/Drawer/components/DrawerContent.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Dialog as DrawerPrimitive } from "radix-ui";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 export interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>, VariantProps<typeof drawerVariants> {
     width?: React.CSSProperties["width"];
     modal?: boolean;

package/Drawer/components/DrawerContent.js

@@ -1,17 +1,17 @@
 import * as React from "react";
 import { Dialog as DrawerPrimitive } from "radix-ui";
-import { cn, cva } from "../../utils";
-const drawerVariants = cva(["wby-fixed wby-gap-4 wby-bg-neutral-base wby-text-md wby-text-neutral-strong focus-visible:outline-none wby-shadow-lg", "wby-transition wby-ease-in-out data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-duration-300 data-[state=open]:wby-duration-500", "wby-max-w-full wby-h-full"], {
+import { cn, cva } from "../../utils.js";
+const drawerVariants = cva(["fixed gap-4 bg-neutral-base text-md text-neutral-strong focus-visible:outline-none shadow-lg", "transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", "max-w-full h-full z-drawer"], {
   variants: {
     size: {
-      sm: "wby-w-[384px]",
-      md: "wby-w-[520px]",
-      lg: "wby-w-[640px]",
-      xl: "wby-w-[1024px]"
+      sm: "w-[384px]",
+      md: "w-[520px]",
+      lg: "w-[640px]",
+      xl: "w-[1024px]"
     },
     side: {
-      left: ["wby-inset-y-0 wby-left-0", "data-[state=closed]:wby-slide-out-to-left data-[state=open]:wby-slide-in-from-left"],
-      right: ["wby-inset-y-0 wby-right-0", "data-[state=closed]:wby-slide-out-to-right data-[state=open]:wby-slide-in-from-right"]
+      left: ["inset-y-0 left-0", "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"],
+      right: ["inset-y-0 right-0", "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"]
     }
   },
   defaultVariants: {
@@ -53,7 +53,7 @@ const DrawerContent = /*#__PURE__*/React.forwardRef(({
     ,
     "aria-describedby": undefined
   }), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-flex-col wby-justify-between wby-h-full"
+    className: "flex flex-col justify-between h-full"
   }, children));
 });
 DrawerContent.displayName = DrawerPrimitive.Content.displayName;

package/Drawer/components/DrawerContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Dialog","DrawerPrimitive","cn","cva","drawerVariants","variants","size","sm","md","lg","xl","side","left","right","defaultVariants","DrawerContent","forwardRef","modal","width","className","style","children","props","ref","modalProps","useMemo","onInteractOutside","event","preventDefault","createElement","Content","Object","assign","undefined","displayName"],"sources":["DrawerContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Dialog as DrawerPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nexport interface DrawerContentProps\n    extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>,\n        VariantProps<typeof drawerVariants> {\n    width?: React.CSSProperties[\"width\"];\n    modal?: boolean;\n}\n\nconst drawerVariants = cva(\n    [\n        \"wby-fixed wby-gap-4 wby-bg-neutral-base wby-text-md wby-text-neutral-strong focus-visible:outline-none wby-shadow-lg\",\n        \"wby-transition wby-ease-in-out data-[state=open]:wby-animate-in data-[state=closed]:wby-animate-out data-[state=closed]:wby-duration-300 data-[state=open]:wby-duration-500\",\n        \"wby-max-w-full wby-h-full\"\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-[1024px]\"\n            },\n            side: {\n                left: [\n                    \"wby-inset-y-0 wby-left-0\",\n                    \"data-[state=closed]:wby-slide-out-to-left data-[state=open]:wby-slide-in-from-left\"\n                ],\n                right: [\n                    \"wby-inset-y-0 wby-right-0\",\n                    \"data-[state=closed]:wby-slide-out-to-right data-[state=open]:wby-slide-in-from-right\"\n                ]\n            }\n        },\n        defaultVariants: {\n            size: \"md\",\n            side: \"right\"\n        }\n    }\n);\n\nconst DrawerContent = React.forwardRef<\n    React.ElementRef<typeof DrawerPrimitive.Content>,\n    DrawerContentProps\n>(({ side, size, modal, width, className, style = {}, children, ...props }, ref) => {\n    // When modal is set to false, we want to prevent the user from closing the drawer by clicking outside of it.\n    // Only by clicking on \"X\" icon or by pressing the escape key should the drawer be closed.\n    const modalProps = React.useMemo<\n        Pick<DrawerPrimitive.DialogContentProps, \"onInteractOutside\">\n    >(() => {\n        if (modal === false) {\n            return {\n                onInteractOutside: event => event.preventDefault()\n            };\n        }\n\n        return {};\n    }, [modal]);\n\n    return (\n        <DrawerPrimitive.Content\n            {...modalProps}\n            {...props}\n            ref={ref}\n            className={cn(drawerVariants({ side, size }), className)}\n            style={{ width, ...style }}\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 className={\"wby-flex wby-flex-col wby-justify-between wby-h-full\"}>{children}</div>\n        </DrawerPrimitive.Content>\n    );\n});\n\nDrawerContent.displayName = DrawerPrimitive.Content.displayName;\n\nexport { DrawerContent };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,EAAE,EAAEC,GAAG;AAShB,MAAMC,cAAc,GAAGD,GAAG,CACtB,CACI,sHAAsH,EACtH,6KAA6K,EAC7K,2BAA2B,CAC9B,EACD;EACIE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE;IACR,CAAC;IACDC,IAAI,EAAE;MACFC,IAAI,EAAE,CACF,0BAA0B,EAC1B,oFAAoF,CACvF;MACDC,KAAK,EAAE,CACH,2BAA2B,EAC3B,sFAAsF;IAE9F;EACJ,CAAC;EACDC,eAAe,EAAE;IACbR,IAAI,EAAE,IAAI;IACVK,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AAED,MAAMI,aAAa,gBAAGhB,KAAK,CAACiB,UAAU,CAGpC,CAAC;EAAEL,IAAI;EAAEL,IAAI;EAAEW,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC,KAAK,GAAG,CAAC,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAChF;EACA;EACA,MAAMC,UAAU,GAAGzB,KAAK,CAAC0B,OAAO,CAE9B,MAAM;IACJ,IAAIR,KAAK,KAAK,KAAK,EAAE;MACjB,OAAO;QACHS,iBAAiB,EAAEC,KAAK,IAAIA,KAAK,CAACC,cAAc,CAAC;MACrD,CAAC;IACL;IAEA,OAAO,CAAC,CAAC;EACb,CAAC,EAAE,CAACX,KAAK,CAAC,CAAC;EAEX,oBACIlB,KAAA,CAAA8B,aAAA,CAAC5B,eAAe,CAAC6B,OAAO,EAAAC,MAAA,CAAAC,MAAA,KAChBR,UAAU,EACVF,KAAK;IACTC,GAAG,EAAEA,GAAI;IACTJ,SAAS,EAAEjB,EAAE,CAACE,cAAc,CAAC;MAAEO,IAAI;MAAEL;IAAK,CAAC,CAAC,EAAEa,SAAS,CAAE;IACzDC,KAAK,EAAE;MAAEF,KAAK;MAAE,GAAGE;IAAM;IACzB;IAAA;IACA,oBAAkBa;EAAU,iBAE5BlC,KAAA,CAAA8B,aAAA;IAAKV,SAAS,EAAE;EAAuD,GAAEE,QAAc,CAClE,CAAC;AAElC,CAAC,CAAC;AAEFN,aAAa,CAACmB,WAAW,GAAGjC,eAAe,CAAC6B,OAAO,CAACI,WAAW;AAE/D,SAASnB,aAAa","ignoreList":[]}
+{"version":3,"names":["React","Dialog","DrawerPrimitive","cn","cva","drawerVariants","variants","size","sm","md","lg","xl","side","left","right","defaultVariants","DrawerContent","forwardRef","modal","width","className","style","children","props","ref","modalProps","useMemo","onInteractOutside","event","preventDefault","createElement","Content","Object","assign","undefined","displayName"],"sources":["DrawerContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Dialog as DrawerPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nexport interface DrawerContentProps\n    extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>,\n        VariantProps<typeof drawerVariants> {\n    width?: React.CSSProperties[\"width\"];\n    modal?: boolean;\n}\n\nconst drawerVariants = cva(\n    [\n        \"fixed gap-4 bg-neutral-base text-md text-neutral-strong focus-visible:outline-none shadow-lg\",\n        \"transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n        \"max-w-full h-full z-drawer\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"w-[384px]\",\n                md: \"w-[520px]\",\n                lg: \"w-[640px]\",\n                xl: \"w-[1024px]\"\n            },\n            side: {\n                left: [\n                    \"inset-y-0 left-0\",\n                    \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left\"\n                ],\n                right: [\n                    \"inset-y-0 right-0\",\n                    \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right\"\n                ]\n            }\n        },\n        defaultVariants: {\n            size: \"md\",\n            side: \"right\"\n        }\n    }\n);\n\nconst DrawerContent = React.forwardRef<\n    React.ElementRef<typeof DrawerPrimitive.Content>,\n    DrawerContentProps\n>(({ side, size, modal, width, className, style = {}, children, ...props }, ref) => {\n    // When modal is set to false, we want to prevent the user from closing the drawer by clicking outside of it.\n    // Only by clicking on \"X\" icon or by pressing the escape key should the drawer be closed.\n    const modalProps = React.useMemo<\n        Pick<DrawerPrimitive.DialogContentProps, \"onInteractOutside\">\n    >(() => {\n        if (modal === false) {\n            return {\n                onInteractOutside: event => event.preventDefault()\n            };\n        }\n\n        return {};\n    }, [modal]);\n\n    return (\n        <DrawerPrimitive.Content\n            {...modalProps}\n            {...props}\n            ref={ref}\n            className={cn(drawerVariants({ side, size }), className)}\n            style={{ width, ...style }}\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 className={\"flex flex-col justify-between h-full\"}>{children}</div>\n        </DrawerPrimitive.Content>\n    );\n});\n\nDrawerContent.displayName = DrawerPrimitive.Content.displayName;\n\nexport { DrawerContent };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,IAAIC,eAAe,QAAQ,UAAU;AACpD,SAASC,EAAE,EAAEC,GAAG;AAShB,MAAMC,cAAc,GAAGD,GAAG,CACtB,CACI,8FAA8F,EAC9F,qJAAqJ,EACrJ,4BAA4B,CAC/B,EACD;EACIE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE;IACR,CAAC;IACDC,IAAI,EAAE;MACFC,IAAI,EAAE,CACF,kBAAkB,EAClB,4EAA4E,CAC/E;MACDC,KAAK,EAAE,CACH,mBAAmB,EACnB,8EAA8E;IAEtF;EACJ,CAAC;EACDC,eAAe,EAAE;IACbR,IAAI,EAAE,IAAI;IACVK,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AAED,MAAMI,aAAa,gBAAGhB,KAAK,CAACiB,UAAU,CAGpC,CAAC;EAAEL,IAAI;EAAEL,IAAI;EAAEW,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC,KAAK,GAAG,CAAC,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAChF;EACA;EACA,MAAMC,UAAU,GAAGzB,KAAK,CAAC0B,OAAO,CAE9B,MAAM;IACJ,IAAIR,KAAK,KAAK,KAAK,EAAE;MACjB,OAAO;QACHS,iBAAiB,EAAEC,KAAK,IAAIA,KAAK,CAACC,cAAc,CAAC;MACrD,CAAC;IACL;IAEA,OAAO,CAAC,CAAC;EACb,CAAC,EAAE,CAACX,KAAK,CAAC,CAAC;EAEX,oBACIlB,KAAA,CAAA8B,aAAA,CAAC5B,eAAe,CAAC6B,OAAO,EAAAC,MAAA,CAAAC,MAAA,KAChBR,UAAU,EACVF,KAAK;IACTC,GAAG,EAAEA,GAAI;IACTJ,SAAS,EAAEjB,EAAE,CAACE,cAAc,CAAC;MAAEO,IAAI;MAAEL;IAAK,CAAC,CAAC,EAAEa,SAAS,CAAE;IACzDC,KAAK,EAAE;MAAEF,KAAK;MAAE,GAAGE;IAAM;IACzB;IAAA;IACA,oBAAkBa;EAAU,iBAE5BlC,KAAA,CAAA8B,aAAA;IAAKV,SAAS,EAAE;EAAuC,GAAEE,QAAc,CAClD,CAAC;AAElC,CAAC,CAAC;AAEFN,aAAa,CAACmB,WAAW,GAAGjC,eAAe,CAAC6B,OAAO,CAACI,WAAW;AAE/D,SAASnB,aAAa","ignoreList":[]}

package/Drawer/components/DrawerDescription.js

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

package/Drawer/components/DrawerDescription.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Dialog","DrawerPrimitive","cn","DrawerDescription","className","props","createElement","Description","Object","assign"],"sources":["DrawerDescription.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Dialog as DrawerPrimitive } from \"radix-ui\";\nimport { cn } from \"~/utils\";\n\nexport type DrawerDescriptionProps = React.ComponentPropsWithoutRef<\n    typeof DrawerPrimitive.Description\n>;\n\nexport const DrawerDescription = ({ className, ...props }: DrawerDescriptionProps) => (\n    <DrawerPrimitive.Description\n        {...props}\n        className={cn(\"wby-text-sm wby-text-neutral-strong wby-text-left wby-mb-sm\", 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,6DAA6D,EAAEE,SAAS;AAAE,EAC3F,CACJ","ignoreList":[]}
+{"version":3,"names":["React","Dialog","DrawerPrimitive","cn","DrawerDescription","className","props","createElement","Description","Object","assign"],"sources":["DrawerDescription.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Dialog as DrawerPrimitive } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\n\nexport type DrawerDescriptionProps = React.ComponentPropsWithoutRef<\n    typeof DrawerPrimitive.Description\n>;\n\nexport const DrawerDescription = ({ className, ...props }: DrawerDescriptionProps) => (\n    <DrawerPrimitive.Description\n        {...props}\n        className={cn(\"text-sm text-neutral-strong text-left mb-sm\", 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,6CAA6C,EAAEE,SAAS;AAAE,EAC3E,CACJ","ignoreList":[]}

package/Drawer/components/DrawerFooter.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { DrawerProps } from "..";
+import type { DrawerProps } from "../../Drawer/index.js";
 export interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     actions?: React.ReactNode;
     info?: React.ReactNode;

package/Drawer/components/DrawerFooter.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { cn } from "../../utils";
-import { Separator } from "../../Separator";
+import { cn } from "../../utils.js";
+import { Separator } from "../../Separator/index.js";
 export const DrawerFooter = ({
   actions,
   info,
@@ -12,11 +12,11 @@ export const DrawerFooter = ({
     return null;
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, separator && /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: cn("wby-flex wby-justify-between wby-p-lg wby-pt-md-extra", className)
+    className: cn("flex justify-between p-lg pt-md-extra", 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/Drawer/components/DrawerFooter.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","Separator","DrawerFooter","actions","info","className","separator","props","createElement","Fragment","Object","assign"],"sources":["DrawerFooter.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"~/utils\";\nimport { Separator } from \"~/Separator\";\nimport type { DrawerProps } from \"~/Drawer\";\n\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n    actions?: React.ReactNode;\n    info?: React.ReactNode;\n    separator?: DrawerProps[\"footerSeparator\"];\n}\n\nexport const DrawerFooter = ({\n    actions,\n    info,\n    className,\n    separator,\n    ...props\n}: DrawerFooterProps) => {\n    if (!actions && !info) {\n        return null;\n    }\n\n    return (\n        <>\n            {separator && <Separator />}\n            <div\n                {...props}\n                className={cn(\"wby-flex wby-justify-between wby-p-lg wby-pt-md-extra\", className)}\n            >\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};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE;AACX,SAASC,SAAS;AASlB,OAAO,MAAMC,YAAY,GAAGA,CAAC;EACzBC,OAAO;EACPC,IAAI;EACJC,SAAS;EACTC,SAAS;EACT,GAAGC;AACY,CAAC,KAAK;EACrB,IAAI,CAACJ,OAAO,IAAI,CAACC,IAAI,EAAE;IACnB,OAAO,IAAI;EACf;EAEA,oBACIL,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,QACKH,SAAS,iBAAIP,KAAA,CAAAS,aAAA,CAACP,SAAS,MAAE,CAAC,eAC3BF,KAAA,CAAAS,aAAA,QAAAE,MAAA,CAAAC,MAAA,KACQJ,KAAK;IACTF,SAAS,EAAEL,EAAE,CAAC,uDAAuD,EAAEK,SAAS;EAAE,IAEjFD,IAAI,iBACDL,KAAA,CAAAS,aAAA;IAAKH,SAAS,EAAE;EAAwC,gBACpDN,KAAA,CAAAS,aAAA,cAAMJ,IAAU,CACf,CACR,EACAD,OAAO,iBAAIJ,KAAA,CAAAS,aAAA;IAAKH,SAAS,EAAE;EAAoC,GAAEF,OAAa,CAC9E,CACP,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["React","cn","Separator","DrawerFooter","actions","info","className","separator","props","createElement","Fragment","Object","assign"],"sources":["DrawerFooter.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { Separator } from \"~/Separator/index.js\";\nimport type { DrawerProps } from \"~/Drawer/index.js\";\n\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n    actions?: React.ReactNode;\n    info?: React.ReactNode;\n    separator?: DrawerProps[\"footerSeparator\"];\n}\n\nexport const DrawerFooter = ({\n    actions,\n    info,\n    className,\n    separator,\n    ...props\n}: DrawerFooterProps) => {\n    if (!actions && !info) {\n        return null;\n    }\n\n    return (\n        <>\n            {separator && <Separator />}\n            <div {...props} className={cn(\"flex justify-between p-lg pt-md-extra\", 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};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE;AACX,SAASC,SAAS;AASlB,OAAO,MAAMC,YAAY,GAAGA,CAAC;EACzBC,OAAO;EACPC,IAAI;EACJC,SAAS;EACTC,SAAS;EACT,GAAGC;AACY,CAAC,KAAK;EACrB,IAAI,CAACJ,OAAO,IAAI,CAACC,IAAI,EAAE;IACnB,OAAO,IAAI;EACf;EAEA,oBACIL,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,QACKH,SAAS,iBAAIP,KAAA,CAAAS,aAAA,CAACP,SAAS,MAAE,CAAC,eAC3BF,KAAA,CAAAS,aAAA,QAAAE,MAAA,CAAAC,MAAA,KAASJ,KAAK;IAAEF,SAAS,EAAEL,EAAE,CAAC,uCAAuC,EAAEK,SAAS;EAAE,IAC7ED,IAAI,iBACDL,KAAA,CAAAS,aAAA;IAAKH,SAAS,EAAE;EAA4B,gBACxCN,KAAA,CAAAS,aAAA,cAAMJ,IAAU,CACf,CACR,EACAD,OAAO,iBAAIJ,KAAA,CAAAS,aAAA;IAAKH,SAAS,EAAE;EAAwB,GAAEF,OAAa,CAClE,CACP,CAAC;AAEX,CAAC","ignoreList":[]}

package/Drawer/components/DrawerHeader.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type DrawerProps } from "../Drawer";
+import { type DrawerProps } from "../Drawer.js";
 export type DrawerHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & Pick<DrawerProps, "title" | "icon" | "description" | "showCloseButton"> & {
     separator?: DrawerProps["headerSeparator"];
 };