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

package/Tooltip/Tooltip.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as TooltipStories from './Tooltip.stories';
 
@@ -226,7 +226,7 @@ import { Tooltip } from "@webiny/admin-ui";
 const PositioningExample = () => {
     return (
         <Tooltip.Provider>
-            <div className="wby-flex wby-justify-center wby-items-center wby-h-48">
+            <div className="flex justify-center items-center h-48">
                 <Tooltip
                     trigger={<p>&nbsp;&nbsp;Top&nbsp;&nbsp;</p>}
                     content={<div>Tooltip on top</div>}
@@ -266,7 +266,7 @@ import { Tooltip } from "@webiny/admin-ui";
 const AlignmentExample = () => {
     return (
         <Tooltip.Provider>
-            <div className="wby-flex wby-justify-center wby-items-center wby-h-48">
+            <div className="flex justify-center items-center h-48">
                 <Tooltip
                     trigger={<p>&nbsp;&nbsp;Start&nbsp;&nbsp;</p>}
                     content={<div>Aligned to start</div>}
@@ -326,8 +326,8 @@ const WithFormattedContentExample = () => {
             <Tooltip
                 trigger={<p>Hover for more info</p>}
                 content={
-                    <div className="wby-flex wby-flex-col wby-gap-xs">
-                        <Text size="sm" className="wby-font-bold">Important Information</Text>
+                    <div className="flex flex-col gap-xs">
+                        <Text size="sm" className="font-bold">Important Information</Text>
                         <Text size="sm">This tooltip contains formatted content with multiple paragraphs.</Text>
                         <Text size="sm">You can include various elements inside tooltips.</Text>
                     </div>

package/Tooltip/Tooltip.stories.d.ts

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

package/Tooltip/Tooltip.stories.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { Tooltip } from "./";
-import { Button } from "../Button";
-import { Text } from "../Text";
-import { Icon } from "../Icon";
+import { Tooltip } from "./index.js";
+import { Button } from "../Button/index.js";
+import { Text } from "../Text/index.js";
+import { Icon } from "../Icon/index.js";
 import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
 import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
 const meta = {
@@ -30,7 +30,7 @@ const meta = {
     }
   },
   decorators: [Story => /*#__PURE__*/React.createElement(Tooltip.Provider, null, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-justify-center wby-items-center wby-h-48"
+    className: "flex justify-center items-center h-48"
   }, /*#__PURE__*/React.createElement(Story, null)))]
 };
 export default meta;
@@ -52,7 +52,7 @@ export const SubtleVariant = {
     variant: "subtle"
   },
   decorators: [Story => /*#__PURE__*/React.createElement(Tooltip.Provider, null, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-justify-center wby-items-center wby-bg-neutral-dark wby-text-neutral-light wby-w-full wby-h-48"
+    className: "flex justify-center items-center bg-neutral-dark text-neutral-light w-full h-48"
   }, /*#__PURE__*/React.createElement(Story, null)))]
 };
 export const WithoutArrow = {
@@ -81,12 +81,10 @@ export const Documentation = {
   },
   argTypes: {
     trigger: {
-      description: "The element that triggers the tooltip when hovered. Please refer to the example code for details.",
-      control: "none"
+      description: "The element that triggers the tooltip when hovered. Please refer to the example code for details."
     },
     content: {
-      description: "The content to display inside the tooltip. Please refer to the example code for details.",
-      control: "none"
+      description: "The content to display inside the tooltip. Please refer to the example code for details."
     },
     side: {
       description: "The side of the trigger where the tooltip appears.",
@@ -111,7 +109,7 @@ export const Documentation = {
 };
 export const Positioning = {
   render: () => /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-gap-md"
+    className: "flex gap-md"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     trigger: /*#__PURE__*/React.createElement("p", null, "Top"),
     content: /*#__PURE__*/React.createElement("div", null, "Tooltip on top"),
@@ -132,7 +130,7 @@ export const Positioning = {
 };
 export const Alignment = {
   render: () => /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-gap-md"
+    className: "flex gap-md"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     trigger: /*#__PURE__*/React.createElement("p", null, "Start"),
     content: /*#__PURE__*/React.createElement("div", null, "Aligned to start"),
@@ -159,10 +157,10 @@ export const WithFormattedContent = {
   args: {
     trigger: /*#__PURE__*/React.createElement("p", null, "Hover for more info"),
     content: /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-flex-col wby-gap-xs"
+      className: "flex flex-col gap-xs"
     }, /*#__PURE__*/React.createElement(Text, {
       size: "sm",
-      className: "wby-font-bold"
+      className: "font-bold"
     }, "Important Information"), /*#__PURE__*/React.createElement(Text, {
       size: "sm"
     }, "This tooltip contains formatted content with multiple paragraphs."), /*#__PURE__*/React.createElement(Text, {

package/Tooltip/Tooltip.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tooltip","Button","Text","Icon","ReactComponent","InfoIcon","HelpIcon","meta","title","component","parameters","layout","argTypes","variant","control","options","align","side","showArrow","defaultValue","decorators","Story","createElement","Provider","className","Default","args","trigger","content","Fragment","AccentVariant","SubtleVariant","WithoutArrow","WithIconTrigger","icon","label","Documentation","description","Positioning","render","Alignment","WithButtonTrigger","text","WithFormattedContent","size","WithHelpIcon"],"sources":["Tooltip.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { Button } from \"~/Button\";\nimport { Text } from \"~/Text\";\nimport { Icon } from \"~/Icon\";\n\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\n\nconst meta: Meta<typeof Tooltip> = {\n    title: \"Components/Tooltip\",\n    component: Tooltip,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        showArrow: {\n            control: \"boolean\",\n            defaultValue: true\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"wby-flex wby-justify-center wby-items-center wby-h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Tooltip>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"wby-flex wby-justify-center wby-items-center wby-bg-neutral-dark wby-text-neutral-light wby-w-full wby-h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport const WithoutArrow: Story = {\n    args: {\n        ...Default.args,\n        showArrow: false\n    }\n};\n\nexport const WithIconTrigger: Story = {\n    args: {\n        trigger: <Icon icon={<InfoIcon />} label=\"Information\" />,\n        content: \"This is a helpful tooltip\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"top\",\n        variant: \"accent\",\n        showArrow: true,\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the tooltip when hovered. Please refer to the example code for details.\",\n            control: \"none\"\n        },\n        content: {\n            description:\n                \"The content to display inside the tooltip. Please refer to the example code for details.\",\n            control: \"none\"\n        },\n        side: {\n            description: \"The side of the trigger where the tooltip appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the tooltip relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the tooltip.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        showArrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Positioning: Story = {\n    render: () => (\n        <div className=\"wby-flex wby-gap-md\">\n            <Tooltip trigger={<p>Top</p>} content={<div>Tooltip on top</div>} side=\"top\" />\n            <Tooltip trigger={<p>Right</p>} content={<div>Tooltip on right</div>} side=\"right\" />\n            <Tooltip trigger={<p>Bottom</p>} content={<div>Tooltip on bottom</div>} side=\"bottom\" />\n            <Tooltip trigger={<p>Left</p>} content={<div>Tooltip on left</div>} side=\"left\" />\n        </div>\n    )\n};\n\nexport const Alignment: Story = {\n    render: () => (\n        <div className=\"wby-flex wby-gap-md\">\n            <Tooltip trigger={<p>Start</p>} content={<div>Aligned to start</div>} align=\"start\" />\n            <Tooltip\n                trigger={<p>Center</p>}\n                content={<div>Aligned to center</div>}\n                align=\"center\"\n            />\n            <Tooltip trigger={<p>End</p>} content={<div>Aligned to end</div>} align=\"end\" />\n        </div>\n    )\n};\n\nexport const WithButtonTrigger: Story = {\n    args: {\n        trigger: <Button text=\"Hover me\" />,\n        content: \"This tooltip is triggered by a button\"\n    }\n};\n\nexport const WithFormattedContent: Story = {\n    args: {\n        trigger: <p>Hover for more info</p>,\n        content: (\n            <div className=\"wby-flex wby-flex-col wby-gap-xs\">\n                <Text size=\"sm\" className=\"wby-font-bold\">\n                    Important Information\n                </Text>\n                <Text size=\"sm\">\n                    This tooltip contains formatted content with multiple paragraphs.\n                </Text>\n                <Text size=\"sm\">You can include various elements inside tooltips.</Text>\n            </div>\n        )\n    }\n};\n\nexport const WithHelpIcon: Story = {\n    args: {\n        trigger: <Icon icon={<HelpIcon />} label=\"Help\" />,\n        content: \"Need help? Contact support at support@example.com\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Tooltip","Button","Text","Icon","ReactComponent","InfoIcon","HelpIcon","meta","title","component","parameters","layout","argTypes","variant","control","options","align","side","showArrow","defaultValue","decorators","Story","createElement","Provider","className","Default","args","trigger","content","Fragment","AccentVariant","SubtleVariant","WithoutArrow","WithIconTrigger","icon","label","Documentation","description","Positioning","render","Alignment","WithButtonTrigger","text","WithFormattedContent","size","WithHelpIcon"],"sources":["Tooltip.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\n\nconst meta: Meta<typeof Tooltip> = {\n    title: \"Components/Tooltip\",\n    component: Tooltip,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        showArrow: {\n            control: \"boolean\",\n            defaultValue: true\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Tooltip>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center bg-neutral-dark text-neutral-light w-full h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport const WithoutArrow: Story = {\n    args: {\n        ...Default.args,\n        showArrow: false\n    }\n};\n\nexport const WithIconTrigger: Story = {\n    args: {\n        trigger: <Icon icon={<InfoIcon />} label=\"Information\" />,\n        content: \"This is a helpful tooltip\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"top\",\n        variant: \"accent\",\n        showArrow: true,\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the tooltip when hovered. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the tooltip. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the tooltip appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the tooltip relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the tooltip.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        showArrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Positioning: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Top</p>} content={<div>Tooltip on top</div>} side=\"top\" />\n            <Tooltip trigger={<p>Right</p>} content={<div>Tooltip on right</div>} side=\"right\" />\n            <Tooltip trigger={<p>Bottom</p>} content={<div>Tooltip on bottom</div>} side=\"bottom\" />\n            <Tooltip trigger={<p>Left</p>} content={<div>Tooltip on left</div>} side=\"left\" />\n        </div>\n    )\n};\n\nexport const Alignment: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Start</p>} content={<div>Aligned to start</div>} align=\"start\" />\n            <Tooltip\n                trigger={<p>Center</p>}\n                content={<div>Aligned to center</div>}\n                align=\"center\"\n            />\n            <Tooltip trigger={<p>End</p>} content={<div>Aligned to end</div>} align=\"end\" />\n        </div>\n    )\n};\n\nexport const WithButtonTrigger: Story = {\n    args: {\n        trigger: <Button text=\"Hover me\" />,\n        content: \"This tooltip is triggered by a button\"\n    }\n};\n\nexport const WithFormattedContent: Story = {\n    args: {\n        trigger: <p>Hover for more info</p>,\n        content: (\n            <div className=\"flex flex-col gap-xs\">\n                <Text size=\"sm\" className=\"font-bold\">\n                    Important Information\n                </Text>\n                <Text size=\"sm\">\n                    This tooltip contains formatted content with multiple paragraphs.\n                </Text>\n                <Text size=\"sm\">You can include various elements inside tooltips.</Text>\n            </div>\n        )\n    }\n};\n\nexport const WithHelpIcon: Story = {\n    args: {\n        trigger: <Icon icon={<HelpIcon />} label=\"Help\" />,\n        content: \"Need help? Contact support at support@example.com\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Tooltip/components/TooltipArrow.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const tooltipArrowVariants: (props?: ({
     variant?: "accent" | "subtle" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/Tooltip/components/TooltipArrow.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { cn, cva } from "../../utils";
+import { cn, cva } from "../../utils.js";
 const tooltipArrowVariants = cva("", {
   variants: {
     variant: {
-      accent: "wby-fill-bg-neutral-dark",
-      subtle: "wby-fill-neutral-base"
+      accent: "fill-bg-neutral-dark",
+      subtle: "fill-neutral-base"
     }
   },
   defaultVariants: {

package/Tooltip/components/TooltipArrow.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tooltip","TooltipPrimitive","cn","cva","tooltipArrowVariants","variants","variant","accent","subtle","defaultVariants","TooltipArrow","className","props","createElement","Arrow","Object","assign","width","height"],"sources":["TooltipArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst tooltipArrowVariants = cva(\"\", {\n    variants: {\n        variant: {\n            accent: \"wby-fill-bg-neutral-dark\",\n            subtle: \"wby-fill-neutral-base\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\ntype TooltipArrowProps = TooltipPrimitive.TooltipArrowProps &\n    VariantProps<typeof tooltipArrowVariants>;\n\nconst TooltipArrow = ({ variant, className, ...props }: TooltipArrowProps) => (\n    <TooltipPrimitive.Arrow\n        {...props}\n        width={12}\n        height={6}\n        className={cn(tooltipArrowVariants({ variant }), className)}\n    />\n);\n\nexport { TooltipArrow, type TooltipArrowProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,UAAU;AACtD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,EAAE,EAAE;EACjCE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,MAAM,EAAE,0BAA0B;MAClCC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,eAAe,EAAE;IACbH,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAKF,MAAMI,YAAY,GAAGA,CAAC;EAAEJ,OAAO;EAAEK,SAAS;EAAE,GAAGC;AAAyB,CAAC,kBACrEb,KAAA,CAAAc,aAAA,CAACZ,gBAAgB,CAACa,KAAK,EAAAC,MAAA,CAAAC,MAAA,KACfJ,KAAK;EACTK,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,CAAE;EACVP,SAAS,EAAET,EAAE,CAACE,oBAAoB,CAAC;IAAEE;EAAQ,CAAC,CAAC,EAAEK,SAAS;AAAE,EAC/D,CACJ;AAED,SAASD,YAAY","ignoreList":[]}
+{"version":3,"names":["React","Tooltip","TooltipPrimitive","cn","cva","tooltipArrowVariants","variants","variant","accent","subtle","defaultVariants","TooltipArrow","className","props","createElement","Arrow","Object","assign","width","height"],"sources":["TooltipArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst tooltipArrowVariants = cva(\"\", {\n    variants: {\n        variant: {\n            accent: \"fill-bg-neutral-dark\",\n            subtle: \"fill-neutral-base\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\ntype TooltipArrowProps = TooltipPrimitive.TooltipArrowProps &\n    VariantProps<typeof tooltipArrowVariants>;\n\nconst TooltipArrow = ({ variant, className, ...props }: TooltipArrowProps) => (\n    <TooltipPrimitive.Arrow\n        {...props}\n        width={12}\n        height={6}\n        className={cn(tooltipArrowVariants({ variant }), className)}\n    />\n);\n\nexport { TooltipArrow, type TooltipArrowProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,UAAU;AACtD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,EAAE,EAAE;EACjCE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,MAAM,EAAE,sBAAsB;MAC9BC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,eAAe,EAAE;IACbH,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAKF,MAAMI,YAAY,GAAGA,CAAC;EAAEJ,OAAO;EAAEK,SAAS;EAAE,GAAGC;AAAyB,CAAC,kBACrEb,KAAA,CAAAc,aAAA,CAACZ,gBAAgB,CAACa,KAAK,EAAAC,MAAA,CAAAC,MAAA,KACfJ,KAAK;EACTK,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,CAAE;EACVP,SAAS,EAAET,EAAE,CAACE,oBAAoB,CAAC;IAAEE;EAAQ,CAAC,CAAC,EAAEK,SAAS;AAAE,EAC/D,CACJ;AAED,SAASD,YAAY","ignoreList":[]}

package/Tooltip/components/TooltipContent.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const tooltipContentVariants: (props?: ({
     variant?: "accent" | "subtle" | null | undefined;
     hiddenArrow?: boolean | null | undefined;

package/Tooltip/components/TooltipContent.js

@@ -1,14 +1,14 @@
 import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { cn, cva } from "../../utils";
-const tooltipContentVariants = cva(["wby-px-sm-extra wby-py-sm wby-max-w-64 wby-rounded-md wby-text-sm wby-font-normal wby-animate-in wby-fade-in-0 wby-zoom-in-95", "data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=closed]:wby-zoom-out-95", "data-[side=bottom]:wby-slide-in-from-top-2 data-[side=left]:wby-slide-in-from-right-2 data-[side=right]:wby-slide-in-from-left-2 data-[side=top]:wby-slide-in-from-bottom-2"], {
+import { cn, cva } from "../../utils.js";
+const tooltipContentVariants = cva(["z-[var(--z-index-tooltip)] px-sm-extra py-sm max-w-64 rounded-md text-sm font-normal animate-in fade-in-0 zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"], {
   variants: {
     variant: {
-      accent: "wby-bg-neutral-dark wby-text-neutral-light",
-      subtle: "wby-bg-neutral-base wby-text-neutral-primary wby-shadow-md"
+      accent: "bg-neutral-dark text-neutral-light",
+      subtle: "bg-neutral-base text-neutral-primary shadow-md"
     },
     hiddenArrow: {
-      true: ["data-[side=top]:wby-mb-xs-plus", "data-[side=bottom]:wby-mt-xs-plus", "data-[side=left]:wby-mr-xs-plus", "data-[side=right]:wby-ml-xs-plus"]
+      true: ["data-[side=top]:mb-xs-plus", "data-[side=bottom]:mt-xs-plus", "data-[side=left]:mr-xs-plus", "data-[side=right]:ml-xs-plus"]
     }
   },
   defaultVariants: {

package/Tooltip/components/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tooltip","TooltipPrimitive","cn","cva","tooltipContentVariants","variants","variant","accent","subtle","hiddenArrow","true","defaultVariants","TooltipContent","className","props","createElement","Portal","Content","Object","assign","collisionPadding","sideOffset"],"sources":["TooltipContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst tooltipContentVariants = cva(\n    [\n        \"wby-px-sm-extra wby-py-sm wby-max-w-64 wby-rounded-md wby-text-sm wby-font-normal wby-animate-in wby-fade-in-0 wby-zoom-in-95\",\n        \"data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=closed]:wby-zoom-out-95\",\n        \"data-[side=bottom]:wby-slide-in-from-top-2 data-[side=left]:wby-slide-in-from-right-2 data-[side=right]:wby-slide-in-from-left-2 data-[side=top]:wby-slide-in-from-bottom-2\"\n    ],\n    {\n        variants: {\n            variant: {\n                accent: \"wby-bg-neutral-dark wby-text-neutral-light\",\n                subtle: \"wby-bg-neutral-base wby-text-neutral-primary wby-shadow-md\"\n            },\n            hiddenArrow: {\n                true: [\n                    \"data-[side=top]:wby-mb-xs-plus\",\n                    \"data-[side=bottom]:wby-mt-xs-plus\",\n                    \"data-[side=left]:wby-mr-xs-plus\",\n                    \"data-[side=right]:wby-ml-xs-plus\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"accent\"\n        }\n    }\n);\n\ntype TooltipContentProps = TooltipPrimitive.TooltipContentProps &\n    VariantProps<typeof tooltipContentVariants>;\n\nconst TooltipContent = ({ className, variant, hiddenArrow, ...props }: TooltipContentProps) => (\n    <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n            collisionPadding={8}\n            sideOffset={4}\n            className={cn(tooltipContentVariants({ variant, hiddenArrow }), className)}\n            {...props}\n        />\n    </TooltipPrimitive.Portal>\n);\n\nexport { TooltipContent, type TooltipContentProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,UAAU;AACtD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,sBAAsB,GAAGD,GAAG,CAC9B,CACI,+HAA+H,EAC/H,4GAA4G,EAC5G,6KAA6K,CAChL,EACD;EACIE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,MAAM,EAAE,4CAA4C;MACpDC,MAAM,EAAE;IACZ,CAAC;IACDC,WAAW,EAAE;MACTC,IAAI,EAAE,CACF,gCAAgC,EAChC,mCAAmC,EACnC,iCAAiC,EACjC,kCAAkC;IAE1C;EACJ,CAAC;EACDC,eAAe,EAAE;IACbL,OAAO,EAAE;EACb;AACJ,CACJ,CAAC;AAKD,MAAMM,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAEP,OAAO;EAAEG,WAAW;EAAE,GAAGK;AAA2B,CAAC,kBACtFf,KAAA,CAAAgB,aAAA,CAACd,gBAAgB,CAACe,MAAM,qBACpBjB,KAAA,CAAAgB,aAAA,CAACd,gBAAgB,CAACgB,OAAO,EAAAC,MAAA,CAAAC,MAAA;EACrBC,gBAAgB,EAAE,CAAE;EACpBC,UAAU,EAAE,CAAE;EACdR,SAAS,EAAEX,EAAE,CAACE,sBAAsB,CAAC;IAAEE,OAAO;IAAEG;EAAY,CAAC,CAAC,EAAEI,SAAS;AAAE,GACvEC,KAAK,CACZ,CACoB,CAC5B;AAED,SAASF,cAAc","ignoreList":[]}
+{"version":3,"names":["React","Tooltip","TooltipPrimitive","cn","cva","tooltipContentVariants","variants","variant","accent","subtle","hiddenArrow","true","defaultVariants","TooltipContent","className","props","createElement","Portal","Content","Object","assign","collisionPadding","sideOffset"],"sources":["TooltipContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst tooltipContentVariants = cva(\n    [\n        \"z-[var(--z-index-tooltip)] px-sm-extra py-sm max-w-64 rounded-md text-sm font-normal animate-in fade-in-0 zoom-in-95\",\n        \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n    ],\n    {\n        variants: {\n            variant: {\n                accent: \"bg-neutral-dark text-neutral-light\",\n                subtle: \"bg-neutral-base text-neutral-primary shadow-md\"\n            },\n            hiddenArrow: {\n                true: [\n                    \"data-[side=top]:mb-xs-plus\",\n                    \"data-[side=bottom]:mt-xs-plus\",\n                    \"data-[side=left]:mr-xs-plus\",\n                    \"data-[side=right]:ml-xs-plus\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"accent\"\n        }\n    }\n);\n\ntype TooltipContentProps = TooltipPrimitive.TooltipContentProps &\n    VariantProps<typeof tooltipContentVariants>;\n\nconst TooltipContent = ({ className, variant, hiddenArrow, ...props }: TooltipContentProps) => (\n    <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n            collisionPadding={8}\n            sideOffset={4}\n            className={cn(tooltipContentVariants({ variant, hiddenArrow }), className)}\n            {...props}\n        />\n    </TooltipPrimitive.Portal>\n);\n\nexport { TooltipContent, type TooltipContentProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,UAAU;AACtD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,sBAAsB,GAAGD,GAAG,CAC9B,CACI,sHAAsH,EACtH,gGAAgG,EAChG,6JAA6J,CAChK,EACD;EACIE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,MAAM,EAAE,oCAAoC;MAC5CC,MAAM,EAAE;IACZ,CAAC;IACDC,WAAW,EAAE;MACTC,IAAI,EAAE,CACF,4BAA4B,EAC5B,+BAA+B,EAC/B,6BAA6B,EAC7B,8BAA8B;IAEtC;EACJ,CAAC;EACDC,eAAe,EAAE;IACbL,OAAO,EAAE;EACb;AACJ,CACJ,CAAC;AAKD,MAAMM,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAEP,OAAO;EAAEG,WAAW;EAAE,GAAGK;AAA2B,CAAC,kBACtFf,KAAA,CAAAgB,aAAA,CAACd,gBAAgB,CAACe,MAAM,qBACpBjB,KAAA,CAAAgB,aAAA,CAACd,gBAAgB,CAACgB,OAAO,EAAAC,MAAA,CAAAC,MAAA;EACrBC,gBAAgB,EAAE,CAAE;EACpBC,UAAU,EAAE,CAAE;EACdR,SAAS,EAAEX,EAAE,CAACE,sBAAsB,CAAC;IAAEE,OAAO;IAAEG;EAAY,CAAC,CAAC,EAAEI,SAAS;AAAE,GACvEC,KAAK,CACZ,CACoB,CAC5B;AAED,SAASF,cAAc","ignoreList":[]}

package/Tooltip/components/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./TooltipArrow";
-export * from "./TooltipContent";
+export * from "./TooltipArrow.js";
+export * from "./TooltipContent.js";

package/Tooltip/components/index.js

@@ -1,4 +1,4 @@
-export * from "./TooltipArrow";
-export * from "./TooltipContent";
+export * from "./TooltipArrow.js";
+export * from "./TooltipContent.js";
 
 //# sourceMappingURL=index.js.map

package/Tooltip/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./TooltipArrow\";\nexport * from \"./TooltipContent\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./TooltipArrow.js\";\nexport * from \"./TooltipContent.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/Tooltip/index.d.ts

@@ -1 +1 @@
-export * from "./Tooltip";
+export * from "./Tooltip.js";

package/Tooltip/index.js

@@ -1,3 +1,3 @@
-export * from "./Tooltip";
+export * from "./Tooltip.js";
 
 //# sourceMappingURL=index.js.map

package/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Tooltip\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Tooltip.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Tree/Tree.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type PlaceholderRender, type NodeModel, type RenderParams } from "@minoru/react-dnd-treeview";
 import { type DragSourceMonitor } from "react-dnd";
-import type { NodeDto, WithDefaultNodeData } from "./domains";
+import type { NodeDto, WithDefaultNodeData } from "./domains/index.js";
 export interface DropOptions<TData = Record<string, any>> {
     dragSourceId?: NodeDto<TData>["id"];
     dropTargetId: NodeDto<TData>["id"];
@@ -40,145 +40,145 @@ declare const Tree: (<TData>(props: TreeProps<TData>) => React.JSX.Element) & {
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(<TData>(props: TreeProps<TData>) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(<TData>(props: TreeProps<TData>) => React.JSX.Element) & {
         original: <TData>(props: TreeProps<TData>) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    Item: (({ children, className, active, loading, ...props }: import("./components/Item").ItemProps) => React.JSX.Element) & {
-        original: ({ children, className, active, loading, ...props }: import("./components/Item").ItemProps) => React.JSX.Element;
+    Item: (({ children, className, active, loading, ...props }: import("./components/Item.js").ItemProps) => React.JSX.Element) & {
+        original: ({ children, className, active, loading, ...props }: import("./components/Item.js").ItemProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: (({ children, className, active, loading, ...props }: import("./components/Item").ItemProps) => React.JSX.Element) & {
-            original: ({ children, className, active, loading, ...props }: import("./components/Item").ItemProps) => React.JSX.Element;
+        original: (({ children, className, active, loading, ...props }: import("./components/Item.js").ItemProps) => React.JSX.Element) & {
+            original: ({ children, className, active, loading, ...props }: import("./components/Item.js").ItemProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, className, active, loading, ...props }: import("./components/Item").ItemProps) => React.JSX.Element) & {
-            original: ({ children, className, active, loading, ...props }: import("./components/Item").ItemProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ children, className, active, loading, ...props }: import("./components/Item.js").ItemProps) => React.JSX.Element) & {
+            original: ({ children, className, active, loading, ...props }: import("./components/Item.js").ItemProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        CollapseTrigger: (({ open, loading, ...props }: import("./components/ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element) & {
-            original: ({ open, loading, ...props }: import("./components/ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element;
+        CollapseTrigger: (({ open, loading, ...props }: import("./components/ItemCollapseTrigger.js").ItemCollapseTriggerProps) => React.JSX.Element) & {
+            original: ({ open, loading, ...props }: import("./components/ItemCollapseTrigger.js").ItemCollapseTriggerProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ open, loading, ...props }: import("./components/ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element) & {
-                original: ({ open, loading, ...props }: import("./components/ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element;
+            original: (({ open, loading, ...props }: import("./components/ItemCollapseTrigger.js").ItemCollapseTriggerProps) => React.JSX.Element) & {
+                original: ({ open, loading, ...props }: import("./components/ItemCollapseTrigger.js").ItemCollapseTriggerProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ open, loading, ...props }: import("./components/ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element) & {
-                original: ({ open, loading, ...props }: import("./components/ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ open, loading, ...props }: import("./components/ItemCollapseTrigger.js").ItemCollapseTriggerProps) => React.JSX.Element) & {
+                original: ({ open, loading, ...props }: import("./components/ItemCollapseTrigger.js").ItemCollapseTriggerProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Content: (({ children, className, ...props }: import("./components/ItemContent").ItemContentProps) => React.JSX.Element) & {
-            original: ({ children, className, ...props }: import("./components/ItemContent").ItemContentProps) => React.JSX.Element;
+        Content: (({ children, className, ...props }: import("./components/ItemContent.js").ItemContentProps) => React.JSX.Element) & {
+            original: ({ children, className, ...props }: import("./components/ItemContent.js").ItemContentProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ children, className, ...props }: import("./components/ItemContent").ItemContentProps) => React.JSX.Element) & {
-                original: ({ children, className, ...props }: import("./components/ItemContent").ItemContentProps) => React.JSX.Element;
+            original: (({ children, className, ...props }: import("./components/ItemContent.js").ItemContentProps) => React.JSX.Element) & {
+                original: ({ children, className, ...props }: import("./components/ItemContent.js").ItemContentProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, className, ...props }: import("./components/ItemContent").ItemContentProps) => React.JSX.Element) & {
-                original: ({ children, className, ...props }: import("./components/ItemContent").ItemContentProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ children, className, ...props }: import("./components/ItemContent.js").ItemContentProps) => React.JSX.Element) & {
+                original: ({ children, className, ...props }: import("./components/ItemContent.js").ItemContentProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        DragHandle: (({ handleRef }: import("./components/ItemDragHandle").ItemDragHandleProps) => React.JSX.Element) & {
-            original: ({ handleRef }: import("./components/ItemDragHandle").ItemDragHandleProps) => React.JSX.Element;
+        DragHandle: (({ handleRef }: import("./components/ItemDragHandle.js").ItemDragHandleProps) => React.JSX.Element) & {
+            original: ({ handleRef }: import("./components/ItemDragHandle.js").ItemDragHandleProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ handleRef }: import("./components/ItemDragHandle").ItemDragHandleProps) => React.JSX.Element) & {
-                original: ({ handleRef }: import("./components/ItemDragHandle").ItemDragHandleProps) => React.JSX.Element;
+            original: (({ handleRef }: import("./components/ItemDragHandle.js").ItemDragHandleProps) => React.JSX.Element) & {
+                original: ({ handleRef }: import("./components/ItemDragHandle.js").ItemDragHandleProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ handleRef }: import("./components/ItemDragHandle").ItemDragHandleProps) => React.JSX.Element) & {
-                original: ({ handleRef }: import("./components/ItemDragHandle").ItemDragHandleProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ handleRef }: import("./components/ItemDragHandle.js").ItemDragHandleProps) => React.JSX.Element) & {
+                original: ({ handleRef }: import("./components/ItemDragHandle.js").ItemDragHandleProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Icon: (({ element, active, ...props }: import("./components/ItemIcon").ItemIconProps) => React.JSX.Element) & {
-            original: ({ element, active, ...props }: import("./components/ItemIcon").ItemIconProps) => React.JSX.Element;
+        Icon: (({ element, active, ...props }: import("./components/ItemIcon.js").ItemIconProps) => React.JSX.Element) & {
+            original: ({ element, active, ...props }: import("./components/ItemIcon.js").ItemIconProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ element, active, ...props }: import("./components/ItemIcon").ItemIconProps) => React.JSX.Element) & {
-                original: ({ element, active, ...props }: import("./components/ItemIcon").ItemIconProps) => React.JSX.Element;
+            original: (({ element, active, ...props }: import("./components/ItemIcon.js").ItemIconProps) => React.JSX.Element) & {
+                original: ({ element, active, ...props }: import("./components/ItemIcon.js").ItemIconProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, active, ...props }: import("./components/ItemIcon").ItemIconProps) => React.JSX.Element) & {
-                original: ({ element, active, ...props }: import("./components/ItemIcon").ItemIconProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ element, active, ...props }: import("./components/ItemIcon.js").ItemIconProps) => React.JSX.Element) & {
+                original: ({ element, active, ...props }: import("./components/ItemIcon.js").ItemIconProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        SubIndentation: (({ level }: import("./components/ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element) & {
-            original: ({ level }: import("./components/ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element;
+        SubIndentation: (({ level }: import("./components/ItemSubIndentation.js").ItemSubIndentationProps) => React.JSX.Element) & {
+            original: ({ level }: import("./components/ItemSubIndentation.js").ItemSubIndentationProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ level }: import("./components/ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element) & {
-                original: ({ level }: import("./components/ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element;
+            original: (({ level }: import("./components/ItemSubIndentation.js").ItemSubIndentationProps) => React.JSX.Element) & {
+                original: ({ level }: import("./components/ItemSubIndentation.js").ItemSubIndentationProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ level }: import("./components/ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element) & {
-                original: ({ level }: import("./components/ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ level }: import("./components/ItemSubIndentation.js").ItemSubIndentationProps) => React.JSX.Element) & {
+                original: ({ level }: import("./components/ItemSubIndentation.js").ItemSubIndentationProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Placeholder: (({ depth }: import("./components/ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element) & {
-            original: ({ depth }: import("./components/ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element;
+        Placeholder: (({ depth }: import("./components/ItemPlaceholder.js").ItemPlaceholderProps) => React.JSX.Element) & {
+            original: ({ depth }: import("./components/ItemPlaceholder.js").ItemPlaceholderProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ depth }: import("./components/ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element) & {
-                original: ({ depth }: import("./components/ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element;
+            original: (({ depth }: import("./components/ItemPlaceholder.js").ItemPlaceholderProps) => React.JSX.Element) & {
+                original: ({ depth }: import("./components/ItemPlaceholder.js").ItemPlaceholderProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ depth }: import("./components/ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element) & {
-                original: ({ depth }: import("./components/ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ depth }: import("./components/ItemPlaceholder.js").ItemPlaceholderProps) => React.JSX.Element) & {
+                original: ({ depth }: import("./components/ItemPlaceholder.js").ItemPlaceholderProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
     };
 };
-export { Tree };
+export { Tree, type NodeModel };

package/Tree/Tree.js

@@ -1,15 +1,15 @@
 import React from "react";
 import { getBackendOptions, MultiBackend, Tree as DndTree, useDragOver } from "@minoru/react-dnd-treeview";
 import { DndProvider } from "react-dnd";
-import { makeDecoratable, withStaticProps } from "../utils";
-import { Item } from "./components";
-import { useTree } from "./useTree";
+import { makeDecoratable, withStaticProps } from "../utils.js";
+import { Item } from "./components/index.js";
+import { useTree } from "./useTree.js";
 const ListComponent = /*#__PURE__*/React.forwardRef(({
   children,
   className = "",
   ...props
 }, ref) => {
-  const classNames = [...className.split(" "), "wby-pt-1"].join(" ");
+  const classNames = [...className.split(" "), "pt-1"].join(" ");
   return /*#__PURE__*/React.createElement("ul", Object.assign({
     ref: ref
   }, props, {
@@ -97,9 +97,9 @@ const BaseTree = props => {
     canDrop: canDrop,
     placeholderRender: props.placeholderRender,
     classes: {
-      dropTarget: "wby-bg-neutral-dark/5",
-      draggingSource: "wby-opacity-50 wby-bg-neutral-dimmed",
-      placeholder: "wby-relative"
+      dropTarget: "bg-neutral-dark/5",
+      draggingSource: "opacity-50 bg-neutral-dimmed",
+      placeholder: "relative"
     },
     sort: typeof props.sort === "function" ? sort : props.sort
   }));