@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

package/Tree/Tree.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","FolderIcon","ArticleIcon","Tree","meta","title","component","argTypes","parameters","layout","Default","args","nodes","id","parentId","label","WithRootId","rootId","WithDefaultOpenNodesIds","defaultOpenNodeIds","WithActiveNodes","active","WithLoadingNodes","loading","WithCustomData","data","foo","bar","onDrop","newTree","options","console","log","WithOnDropCallback","WithOnChangeOpenCallback","onChangeOpen","newOpenNodes","WithCanDrag","canDrag","node","WithCanDrop","canDrop","_","dropTargetId","WithCustomNodeRenderer","icon","createElement","renderer","Item","Content","Icon","element","WithCustomSortCallback","order","sort","a","b"],"sources":["Tree.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as ArticleIcon } from \"@webiny/icons/article.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Tree } from \"./Tree.js\";\n\nconst meta: Meta<typeof Tree> = {\n    title: \"Components/Tree\",\n    component: Tree,\n    argTypes: {},\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tree>;\n\nexport const Default: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithRootId: Story = {\n    args: {\n        ...Default.args,\n        rootId: \"1\"\n    }\n};\n\nexport const WithDefaultOpenNodesIds: Story = {\n    args: {\n        ...Default.args,\n        defaultOpenNodeIds: [\"1\"]\n    }\n};\n\nexport const WithActiveNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                active: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithLoadingNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                loading: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\n// Example custom data type\ninterface CustomData {\n    foo: string;\n    bar: number;\n}\n\ntype StoryWithCustomData = StoryObj<typeof Tree<CustomData>>;\n\nexport const WithCustomData: StoryWithCustomData = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { foo: \"bar\", bar: 42 }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { foo: \"baz\", bar: 99 }\n            }\n        ],\n        onDrop: async (newTree, options) => {\n            // newTree and options are fully typed with CustomData\n            console.log(\"Custom data tree:\", newTree);\n            console.log(\"Custom data drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnDropCallback: Story = {\n    args: {\n        ...Default.args,\n        onDrop: async (newTree, options) => {\n            console.log(\"New tree structure:\", newTree);\n            console.log(\"Drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnChangeOpenCallback: Story = {\n    args: {\n        ...Default.args,\n        onChangeOpen: newOpenNodes => {\n            console.log(\"New open nodes:\", newOpenNodes);\n        }\n    }\n};\n\nexport const WithCanDrag: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drag this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrag: node => node?.id !== \"1\"\n    }\n};\n\nexport const WithCanDrop: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drop on this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrop: (_, options) => {\n            const { dropTargetId } = options;\n\n            if (dropTargetId === \"1\") {\n                return false; // Prevent dropping on Node 1\n            }\n\n            return true;\n        }\n    }\n};\n\n// Example custom data type\ninterface CustomRenderData {\n    icon: React.ReactElement;\n}\n\ntype StoryWithCustomNodeRenderer = StoryObj<typeof Tree<CustomRenderData>>;\n\nexport const WithCustomNodeRenderer: StoryWithCustomNodeRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"4\",\n                parentId: \"0\",\n                label: \"Node 4\",\n                data: { icon: <ArticleIcon /> }\n            }\n        ],\n        renderer: node => (\n            <Tree.Item.Content>\n                <Tree.Item.Icon label={node.label} element={node.icon} />\n                {node.label}\n            </Tree.Item.Content>\n        )\n    }\n};\n\n// Example custom sorting by `order` property\ninterface CustomSortCallbackData {\n    order: number;\n}\n\ntype WithCustomSortCallbackRenderer = StoryObj<typeof Tree<CustomSortCallbackData>>;\n\nexport const WithCustomSortCallback: WithCustomSortCallbackRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: {\n                    order: 3\n                }\n            },\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: {\n                    order: 1\n                }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: {\n                    order: 2\n                }\n            },\n            {\n                id: \"5\",\n                parentId: \"1\",\n                label: \"Node 5\",\n                data: {\n                    order: 5\n                }\n            },\n            {\n                id: \"4\",\n                parentId: \"1\",\n                label: \"Node 4\",\n                data: {\n                    order: 4\n                }\n            },\n            {\n                id: \"6\",\n                parentId: \"1\",\n                label: \"Node 6\",\n                data: {\n                    order: 6\n                }\n            }\n        ],\n        sort: (a, b) => (a.data?.order ?? 0) - (b.data?.order ?? 0)\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tree/Tree.stories.js","sources":["../../src/Tree/Tree.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as ArticleIcon } from \"@webiny/icons/article.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Tree } from \"./Tree.js\";\n\nconst meta: Meta<typeof Tree> = {\n    title: \"Components/Tree\",\n    component: Tree,\n    argTypes: {},\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tree>;\n\nexport const Default: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithRootId: Story = {\n    args: {\n        ...Default.args,\n        rootId: \"1\"\n    }\n};\n\nexport const WithDefaultOpenNodesIds: Story = {\n    args: {\n        ...Default.args,\n        defaultOpenNodeIds: [\"1\"]\n    }\n};\n\nexport const WithActiveNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                active: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithLoadingNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                loading: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\n// Example custom data type\ninterface CustomData {\n    foo: string;\n    bar: number;\n}\n\ntype StoryWithCustomData = StoryObj<typeof Tree<CustomData>>;\n\nexport const WithCustomData: StoryWithCustomData = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { foo: \"bar\", bar: 42 }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { foo: \"baz\", bar: 99 }\n            }\n        ],\n        onDrop: async (newTree, options) => {\n            // newTree and options are fully typed with CustomData\n            console.log(\"Custom data tree:\", newTree);\n            console.log(\"Custom data drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnDropCallback: Story = {\n    args: {\n        ...Default.args,\n        onDrop: async (newTree, options) => {\n            console.log(\"New tree structure:\", newTree);\n            console.log(\"Drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnChangeOpenCallback: Story = {\n    args: {\n        ...Default.args,\n        onChangeOpen: newOpenNodes => {\n            console.log(\"New open nodes:\", newOpenNodes);\n        }\n    }\n};\n\nexport const WithCanDrag: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drag this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrag: node => node?.id !== \"1\"\n    }\n};\n\nexport const WithCanDrop: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drop on this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrop: (_, options) => {\n            const { dropTargetId } = options;\n\n            if (dropTargetId === \"1\") {\n                return false; // Prevent dropping on Node 1\n            }\n\n            return true;\n        }\n    }\n};\n\n// Example custom data type\ninterface CustomRenderData {\n    icon: React.ReactElement;\n}\n\ntype StoryWithCustomNodeRenderer = StoryObj<typeof Tree<CustomRenderData>>;\n\nexport const WithCustomNodeRenderer: StoryWithCustomNodeRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"4\",\n                parentId: \"0\",\n                label: \"Node 4\",\n                data: { icon: <ArticleIcon /> }\n            }\n        ],\n        renderer: node => (\n            <Tree.Item.Content>\n                <Tree.Item.Icon label={node.label} element={node.icon} />\n                {node.label}\n            </Tree.Item.Content>\n        )\n    }\n};\n\n// Example custom sorting by `order` property\ninterface CustomSortCallbackData {\n    order: number;\n}\n\ntype WithCustomSortCallbackRenderer = StoryObj<typeof Tree<CustomSortCallbackData>>;\n\nexport const WithCustomSortCallback: WithCustomSortCallbackRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: {\n                    order: 3\n                }\n            },\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: {\n                    order: 1\n                }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: {\n                    order: 2\n                }\n            },\n            {\n                id: \"5\",\n                parentId: \"1\",\n                label: \"Node 5\",\n                data: {\n                    order: 5\n                }\n            },\n            {\n                id: \"4\",\n                parentId: \"1\",\n                label: \"Node 4\",\n                data: {\n                    order: 4\n                }\n            },\n            {\n                id: \"6\",\n                parentId: \"1\",\n                label: \"Node 6\",\n                data: {\n                    order: 6\n                }\n            }\n        ],\n        sort: (a, b) => (a.data?.order ?? 0) - (b.data?.order ?? 0)\n    }\n};\n"],"names":["meta","Tree","Default","WithRootId","WithDefaultOpenNodesIds","WithActiveNodes","WithLoadingNodes","WithCustomData","newTree","options","console","WithOnDropCallback","WithOnChangeOpenCallback","newOpenNodes","WithCanDrag","node","WithCanDrop","_","dropTargetId","WithCustomNodeRenderer","FolderIcon","ArticleIcon","WithCustomSortCallback","a","b"],"mappings":"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"}

package/Tree/components/Item.js

@@ -1,4 +1,4 @@
-import React from "react";
+import react from "react";
 import { cn, cva, makeDecoratable, withStaticProps } from "../../utils.js";
 import { ItemCollapseTrigger } from "./ItemCollapseTrigger.js";
 import { ItemContent } from "./ItemContent.js";
@@ -6,40 +6,41 @@ import { ItemDragHandle } from "./ItemDragHandle.js";
 import { ItemIcon } from "./ItemIcon.js";
 import { ItemSubIndentation } from "./ItemSubIndentation.js";
 import { ItemPlaceholder } from "./ItemPlaceholder.js";
-const itemVariants = cva(["group", "relative", "flex items-center justify-start gap-xs", "px-sm-plus py-xs-plus rounded-md", "text-neutral-primary", "cursor-pointer", "hover:bg-neutral-dark/5"], {
-  variants: {
-    active: {
-      true: "bg-neutral-dark/5 font-semibold"
-    },
-    loading: {
-      true: "text-neutral-disabled! fill-neutral-disabled! pointer-events-none!"
+const itemVariants = cva([
+    "group",
+    "relative",
+    "flex items-center justify-start gap-xs",
+    "px-sm-plus py-xs-plus rounded-md",
+    "text-neutral-primary",
+    "cursor-pointer",
+    "hover:bg-neutral-dark/5"
+], {
+    variants: {
+        active: {
+            true: "bg-neutral-dark/5 font-semibold"
+        },
+        loading: {
+            true: "text-neutral-disabled! fill-neutral-disabled! pointer-events-none!"
+        }
     }
-  }
 });
-const BaseItem = ({
-  children,
-  className,
-  active,
-  loading,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "mb-xs px-sm"
-  }, /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: cn(itemVariants({
-      active,
-      loading
-    }), className)
-  }), children));
-};
+const BaseItem = ({ children, className, active, loading, ...props })=>/*#__PURE__*/ react.createElement("div", {
+        className: "mb-xs px-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        ...props,
+        className: cn(itemVariants({
+            active,
+            loading
+        }), className)
+    }, children));
 const DecoratableItem = makeDecoratable("TreeItem", BaseItem);
 const Item = withStaticProps(DecoratableItem, {
-  CollapseTrigger: ItemCollapseTrigger,
-  Content: ItemContent,
-  DragHandle: ItemDragHandle,
-  Icon: ItemIcon,
-  SubIndentation: ItemSubIndentation,
-  Placeholder: ItemPlaceholder
+    CollapseTrigger: ItemCollapseTrigger,
+    Content: ItemContent,
+    DragHandle: ItemDragHandle,
+    Icon: ItemIcon,
+    SubIndentation: ItemSubIndentation,
+    Placeholder: ItemPlaceholder
 });
 export { Item };
 

package/Tree/components/Item.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","makeDecoratable","withStaticProps","ItemCollapseTrigger","ItemContent","ItemDragHandle","ItemIcon","ItemSubIndentation","ItemPlaceholder","itemVariants","variants","active","true","loading","BaseItem","children","className","props","createElement","Object","assign","DecoratableItem","Item","CollapseTrigger","Content","DragHandle","Icon","SubIndentation","Placeholder"],"sources":["Item.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { ItemCollapseTrigger } from \"./ItemCollapseTrigger.js\";\nimport { ItemContent } from \"./ItemContent.js\";\nimport { ItemDragHandle } from \"./ItemDragHandle.js\";\nimport { ItemIcon } from \"./ItemIcon.js\";\nimport { ItemSubIndentation } from \"./ItemSubIndentation.js\";\nimport { ItemPlaceholder } from \"./ItemPlaceholder.js\";\n\nconst itemVariants = cva(\n    [\n        \"group\",\n        \"relative\",\n        \"flex items-center justify-start gap-xs\",\n        \"px-sm-plus py-xs-plus rounded-md\",\n        \"text-neutral-primary\",\n        \"cursor-pointer\",\n        \"hover:bg-neutral-dark/5\"\n    ],\n    {\n        variants: {\n            active: {\n                true: \"bg-neutral-dark/5 font-semibold\"\n            },\n            loading: {\n                true: \"text-neutral-disabled! fill-neutral-disabled! pointer-events-none!\"\n            }\n        }\n    }\n);\n\ntype ItemProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof itemVariants>;\n\nconst BaseItem = ({ children, className, active, loading, ...props }: ItemProps) => {\n    return (\n        <div className={\"mb-xs px-sm\"}>\n            <div {...props} className={cn(itemVariants({ active, loading }), className)}>\n                {children}\n            </div>\n        </div>\n    );\n};\n\nconst DecoratableItem = makeDecoratable(\"TreeItem\", BaseItem);\n\nconst Item = withStaticProps(DecoratableItem, {\n    CollapseTrigger: ItemCollapseTrigger,\n    Content: ItemContent,\n    DragHandle: ItemDragHandle,\n    Icon: ItemIcon,\n    SubIndentation: ItemSubIndentation,\n    Placeholder: ItemPlaceholder\n});\n\nexport { Item, type ItemProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAqBC,eAAe,EAAEC,eAAe;AACrE,SAASC,mBAAmB;AAC5B,SAASC,WAAW;AACpB,SAASC,cAAc;AACvB,SAASC,QAAQ;AACjB,SAASC,kBAAkB;AAC3B,SAASC,eAAe;AAExB,MAAMC,YAAY,GAAGT,GAAG,CACpB,CACI,OAAO,EACP,UAAU,EACV,wCAAwC,EACxC,kCAAkC,EAClC,sBAAsB,EACtB,gBAAgB,EAChB,yBAAyB,CAC5B,EACD;EACIU,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,IAAI,EAAE;IACV,CAAC;IACDC,OAAO,EAAE;MACLD,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAID,MAAME,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAEL,MAAM;EAAEE,OAAO;EAAE,GAAGI;AAAiB,CAAC,KAAK;EAChF,oBACInB,KAAA,CAAAoB,aAAA;IAAKF,SAAS,EAAE;EAAc,gBAC1BlB,KAAA,CAAAoB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEjB,EAAE,CAACU,YAAY,CAAC;MAAEE,MAAM;MAAEE;IAAQ,CAAC,CAAC,EAAEG,SAAS;EAAE,IACvED,QACA,CACJ,CAAC;AAEd,CAAC;AAED,MAAMM,eAAe,GAAGpB,eAAe,CAAC,UAAU,EAAEa,QAAQ,CAAC;AAE7D,MAAMQ,IAAI,GAAGpB,eAAe,CAACmB,eAAe,EAAE;EAC1CE,eAAe,EAAEpB,mBAAmB;EACpCqB,OAAO,EAAEpB,WAAW;EACpBqB,UAAU,EAAEpB,cAAc;EAC1BqB,IAAI,EAAEpB,QAAQ;EACdqB,cAAc,EAAEpB,kBAAkB;EAClCqB,WAAW,EAAEpB;AACjB,CAAC,CAAC;AAEF,SAASc,IAAI","ignoreList":[]}
+{"version":3,"file":"Tree/components/Item.js","sources":["../../../src/Tree/components/Item.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { ItemCollapseTrigger } from \"./ItemCollapseTrigger.js\";\nimport { ItemContent } from \"./ItemContent.js\";\nimport { ItemDragHandle } from \"./ItemDragHandle.js\";\nimport { ItemIcon } from \"./ItemIcon.js\";\nimport { ItemSubIndentation } from \"./ItemSubIndentation.js\";\nimport { ItemPlaceholder } from \"./ItemPlaceholder.js\";\n\nconst itemVariants = cva(\n    [\n        \"group\",\n        \"relative\",\n        \"flex items-center justify-start gap-xs\",\n        \"px-sm-plus py-xs-plus rounded-md\",\n        \"text-neutral-primary\",\n        \"cursor-pointer\",\n        \"hover:bg-neutral-dark/5\"\n    ],\n    {\n        variants: {\n            active: {\n                true: \"bg-neutral-dark/5 font-semibold\"\n            },\n            loading: {\n                true: \"text-neutral-disabled! fill-neutral-disabled! pointer-events-none!\"\n            }\n        }\n    }\n);\n\ntype ItemProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof itemVariants>;\n\nconst BaseItem = ({ children, className, active, loading, ...props }: ItemProps) => {\n    return (\n        <div className={\"mb-xs px-sm\"}>\n            <div {...props} className={cn(itemVariants({ active, loading }), className)}>\n                {children}\n            </div>\n        </div>\n    );\n};\n\nconst DecoratableItem = makeDecoratable(\"TreeItem\", BaseItem);\n\nconst Item = withStaticProps(DecoratableItem, {\n    CollapseTrigger: ItemCollapseTrigger,\n    Content: ItemContent,\n    DragHandle: ItemDragHandle,\n    Icon: ItemIcon,\n    SubIndentation: ItemSubIndentation,\n    Placeholder: ItemPlaceholder\n});\n\nexport { Item, type ItemProps };\n"],"names":["itemVariants","cva","BaseItem","children","className","active","loading","props","cn","DecoratableItem","makeDecoratable","Item","withStaticProps","ItemCollapseTrigger","ItemContent","ItemDragHandle","ItemIcon","ItemSubIndentation","ItemPlaceholder"],"mappings":";;;;;;;;AASA,MAAMA,eAAeC,IACjB;IACI;IACA;IACA;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,QAAQ;YACJ,MAAM;QACV;QACA,SAAS;YACL,MAAM;QACV;IACJ;AACJ;AAKJ,MAAMC,WAAW,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGC,OAAkB,GACpE,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAGR,aAAa;YAAEK;YAAQC;QAAQ,IAAIF;OAC5DD;AAMjB,MAAMM,kBAAkBC,gBAAgB,YAAYR;AAEpD,MAAMS,OAAOC,gBAAgBH,iBAAiB;IAC1C,iBAAiBI;IACjB,SAASC;IACT,YAAYC;IACZ,MAAMC;IACN,gBAAgBC;IAChB,aAAaC;AACjB"}

package/Tree/components/ItemCollapseTrigger.js

@@ -1,31 +1,26 @@
-import React from "react";
-import { ReactComponent as ChevronRight } from "@webiny/icons/chevron_right.svg";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/chevron_right.svg";
 import { IconButton } from "../../Button/index.js";
 import { Loader } from "../../Loader/index.js";
 import { Icon } from "../../Icon/index.js";
-import { makeDecoratable, cn } from "../../utils.js";
-const BaseItemCollapseTrigger = ({
-  open,
-  loading,
-  ...props
-}) => {
-  if (loading) {
-    return /*#__PURE__*/React.createElement(Loader, {
-      size: "xs",
-      variant: "subtle"
+import { cn, makeDecoratable } from "../../utils.js";
+const BaseItemCollapseTrigger = ({ open, loading, ...props })=>{
+    if (loading) return /*#__PURE__*/ react.createElement(Loader, {
+        size: "xs",
+        variant: "subtle"
+    });
+    return /*#__PURE__*/ react.createElement(IconButton, {
+        ...props,
+        size: "xs",
+        variant: "ghost",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            label: "Open / Close tree item",
+            color: "neutral-strong",
+            className: cn("transition transform duration-100 ease-linear", open ? "rotate-90" : "rotate-0")
+        })
     });
-  }
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({}, props, {
-    size: "xs",
-    variant: "ghost",
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(ChevronRight, null),
-      size: "sm",
-      label: "Open / Close tree item",
-      color: "neutral-strong",
-      className: cn("transition transform duration-100 ease-linear", open ? "rotate-90" : "rotate-0")
-    })
-  }));
 };
 const ItemCollapseTrigger = makeDecoratable("TreeItemCollapseTrigger", BaseItemCollapseTrigger);
 export { ItemCollapseTrigger };

package/Tree/components/ItemCollapseTrigger.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","ChevronRight","IconButton","Loader","Icon","makeDecoratable","cn","BaseItemCollapseTrigger","open","loading","props","createElement","size","variant","Object","assign","icon","label","color","className","ItemCollapseTrigger"],"sources":["ItemCollapseTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ChevronRight } from \"@webiny/icons/chevron_right.svg\";\nimport { IconButton, type IconButtonProps } from \"~/Button/index.js\";\nimport { Loader } from \"~/Loader/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { makeDecoratable, cn } from \"~/utils.js\";\n\ninterface ItemCollapseTriggerProps extends IconButtonProps {\n    open?: boolean;\n    loading?: boolean;\n}\n\nconst BaseItemCollapseTrigger = ({ open, loading, ...props }: ItemCollapseTriggerProps) => {\n    if (loading) {\n        return <Loader size={\"xs\"} variant={\"subtle\"} />;\n    }\n\n    return (\n        <IconButton\n            {...props}\n            size={\"xs\"}\n            variant={\"ghost\"}\n            icon={\n                <Icon\n                    icon={<ChevronRight />}\n                    size=\"sm\"\n                    label={\"Open / Close tree item\"}\n                    color={\"neutral-strong\"}\n                    className={cn(\n                        \"transition transform duration-100 ease-linear\",\n                        open ? \"rotate-90\" : \"rotate-0\"\n                    )}\n                />\n            }\n        />\n    );\n};\n\nconst ItemCollapseTrigger = makeDecoratable(\"TreeItemCollapseTrigger\", BaseItemCollapseTrigger);\n\nexport { ItemCollapseTrigger, type ItemCollapseTriggerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,YAAY,QAAQ,iCAAiC;AAChF,SAASC,UAAU;AACnB,SAASC,MAAM;AACf,SAASC,IAAI;AACb,SAASC,eAAe,EAAEC,EAAE;AAO5B,MAAMC,uBAAuB,GAAGA,CAAC;EAAEC,IAAI;EAAEC,OAAO;EAAE,GAAGC;AAAgC,CAAC,KAAK;EACvF,IAAID,OAAO,EAAE;IACT,oBAAOV,KAAA,CAAAY,aAAA,CAACR,MAAM;MAACS,IAAI,EAAE,IAAK;MAACC,OAAO,EAAE;IAAS,CAAE,CAAC;EACpD;EAEA,oBACId,KAAA,CAAAY,aAAA,CAACT,UAAU,EAAAY,MAAA,CAAAC,MAAA,KACHL,KAAK;IACTE,IAAI,EAAE,IAAK;IACXC,OAAO,EAAE,OAAQ;IACjBG,IAAI,eACAjB,KAAA,CAAAY,aAAA,CAACP,IAAI;MACDY,IAAI,eAAEjB,KAAA,CAAAY,aAAA,CAACV,YAAY,MAAE,CAAE;MACvBW,IAAI,EAAC,IAAI;MACTK,KAAK,EAAE,wBAAyB;MAChCC,KAAK,EAAE,gBAAiB;MACxBC,SAAS,EAAEb,EAAE,CACT,+CAA+C,EAC/CE,IAAI,GAAG,WAAW,GAAG,UACzB;IAAE,CACL;EACJ,EACJ,CAAC;AAEV,CAAC;AAED,MAAMY,mBAAmB,GAAGf,eAAe,CAAC,yBAAyB,EAAEE,uBAAuB,CAAC;AAE/F,SAASa,mBAAmB","ignoreList":[]}
+{"version":3,"file":"Tree/components/ItemCollapseTrigger.js","sources":["../../../src/Tree/components/ItemCollapseTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ChevronRight } from \"@webiny/icons/chevron_right.svg\";\nimport { IconButton, type IconButtonProps } from \"~/Button/index.js\";\nimport { Loader } from \"~/Loader/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { makeDecoratable, cn } from \"~/utils.js\";\n\ninterface ItemCollapseTriggerProps extends IconButtonProps {\n    open?: boolean;\n    loading?: boolean;\n}\n\nconst BaseItemCollapseTrigger = ({ open, loading, ...props }: ItemCollapseTriggerProps) => {\n    if (loading) {\n        return <Loader size={\"xs\"} variant={\"subtle\"} />;\n    }\n\n    return (\n        <IconButton\n            {...props}\n            size={\"xs\"}\n            variant={\"ghost\"}\n            icon={\n                <Icon\n                    icon={<ChevronRight />}\n                    size=\"sm\"\n                    label={\"Open / Close tree item\"}\n                    color={\"neutral-strong\"}\n                    className={cn(\n                        \"transition transform duration-100 ease-linear\",\n                        open ? \"rotate-90\" : \"rotate-0\"\n                    )}\n                />\n            }\n        />\n    );\n};\n\nconst ItemCollapseTrigger = makeDecoratable(\"TreeItemCollapseTrigger\", BaseItemCollapseTrigger);\n\nexport { ItemCollapseTrigger, type ItemCollapseTriggerProps };\n"],"names":["BaseItemCollapseTrigger","open","loading","props","Loader","IconButton","Icon","ChevronRight","cn","ItemCollapseTrigger","makeDecoratable"],"mappings":";;;;;;AAYA,MAAMA,0BAA0B,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC,OAAiC;IAClF,IAAID,SACA,OAAO,WAAP,GAAO,oBAACE,QAAMA;QAAC,MAAM;QAAM,SAAS;;IAGxC,OAAO,WAAP,GACI,oBAACC,YAAUA;QACN,GAAGF,KAAK;QACT,MAAM;QACN,SAAS;QACT,oBACI,oBAACG,MAAIA;YACD,oBAAM,oBAACC,gBAAYA;YACnB,MAAK;YACL,OAAO;YACP,OAAO;YACP,WAAWC,GACP,iDACAP,OAAO,cAAc;;;AAM7C;AAEA,MAAMQ,sBAAsBC,gBAAgB,2BAA2BV"}

package/Tree/components/ItemContent.js

@@ -1,14 +1,10 @@
-import React from "react";
+import react from "react";
 import { cn, makeDecoratable } from "../../utils.js";
-const BaseItemContent = ({
-  children,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: cn("flex items-center w-full gap-x-sm truncate", className)
-  }, props), children);
-};
-export const ItemContent = makeDecoratable("TreeItemContent", BaseItemContent);
+const BaseItemContent = ({ children, className, ...props })=>/*#__PURE__*/ react.createElement("div", {
+        className: cn("flex items-center w-full gap-x-sm truncate", className),
+        ...props
+    }, children);
+const ItemContent = makeDecoratable("TreeItemContent", BaseItemContent);
+export { ItemContent };
 
 //# sourceMappingURL=ItemContent.js.map

package/Tree/components/ItemContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","makeDecoratable","BaseItemContent","children","className","props","createElement","Object","assign","ItemContent"],"sources":["ItemContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\nexport type ItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst BaseItemContent = ({ children, className, ...props }: ItemContentProps) => {\n    return (\n        <div className={cn(\"flex items-center w-full gap-x-sm truncate\", className)} {...props}>\n            {children}\n        </div>\n    );\n};\n\nexport const ItemContent = makeDecoratable(\"TreeItemContent\", BaseItemContent);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,eAAe,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAAwB,CAAC,KAAK;EAC7E,oBACIN,KAAA,CAAAO,aAAA,QAAAC,MAAA,CAAAC,MAAA;IAAKJ,SAAS,EAAEJ,EAAE,CAAC,4CAA4C,EAAEI,SAAS;EAAE,GAAKC,KAAK,GACjFF,QACA,CAAC;AAEd,CAAC;AAED,OAAO,MAAMM,WAAW,GAAGR,eAAe,CAAC,iBAAiB,EAAEC,eAAe,CAAC","ignoreList":[]}
+{"version":3,"file":"Tree/components/ItemContent.js","sources":["../../../src/Tree/components/ItemContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\nexport type ItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst BaseItemContent = ({ children, className, ...props }: ItemContentProps) => {\n    return (\n        <div className={cn(\"flex items-center w-full gap-x-sm truncate\", className)} {...props}>\n            {children}\n        </div>\n    );\n};\n\nexport const ItemContent = makeDecoratable(\"TreeItemContent\", BaseItemContent);\n"],"names":["BaseItemContent","children","className","props","cn","ItemContent","makeDecoratable"],"mappings":";;AAKA,MAAMA,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,OAAyB,GACjE,WAAP,GACI,oBAAC;QAAI,WAAWC,GAAG,8CAA8CF;QAAa,GAAGC,KAAK;OACjFF;AAKN,MAAMI,cAAcC,gBAAgB,mBAAmBN"}

package/Tree/components/ItemDragHandle.js

@@ -1,27 +1,30 @@
-import React from "react";
-import { ReactComponent as DragIndicator } from "@webiny/icons/drag_indicator.svg";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/drag_indicator.svg";
 import { IconButton } from "../../Button/index.js";
 import { Icon } from "../../Icon/index.js";
 import { cn, makeDecoratable } from "../../utils.js";
-const BaseItemDragHandle = ({
-  handleRef
-}) => {
-  const [isDragging, setIsDragging] = React.useState(false);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: handleRef
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    size: "xs",
-    variant: "secondary",
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(DragIndicator, null),
-      size: "sm",
-      label: "Drag to reorder"
-    }),
-    onMouseDown: () => setIsDragging(true),
-    onMouseUp: () => setIsDragging(false),
-    onMouseLeave: () => setIsDragging(false),
-    className: cn(["absolute top-sm -left-sm", "invisible group-hover:visible", "size-md", isDragging ? "cursor-grabbing" : "cursor-grab"])
-  }));
+const BaseItemDragHandle = ({ handleRef })=>{
+    const [isDragging, setIsDragging] = react.useState(false);
+    return /*#__PURE__*/ react.createElement("div", {
+        ref: handleRef
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        size: "xs",
+        variant: "secondary",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            label: "Drag to reorder"
+        }),
+        onMouseDown: ()=>setIsDragging(true),
+        onMouseUp: ()=>setIsDragging(false),
+        onMouseLeave: ()=>setIsDragging(false),
+        className: cn([
+            "absolute top-sm -left-sm",
+            "invisible group-hover:visible",
+            "size-md",
+            isDragging ? "cursor-grabbing" : "cursor-grab"
+        ])
+    }));
 };
 const ItemDragHandle = makeDecoratable("TreeItemDragHandle", BaseItemDragHandle);
 export { ItemDragHandle };

package/Tree/components/ItemDragHandle.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","DragIndicator","IconButton","Icon","cn","makeDecoratable","BaseItemDragHandle","handleRef","isDragging","setIsDragging","useState","createElement","ref","size","variant","icon","label","onMouseDown","onMouseUp","onMouseLeave","className","ItemDragHandle"],"sources":["ItemDragHandle.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport React from \"react\";\nimport { ReactComponent as DragIndicator } from \"@webiny/icons/drag_indicator.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ntype ItemDragHandleProps = {\n    handleRef?: RefObject<HTMLDivElement | null>;\n};\n\nconst BaseItemDragHandle = ({ handleRef }: ItemDragHandleProps) => {\n    const [isDragging, setIsDragging] = React.useState(false);\n\n    return (\n        <div ref={handleRef as React.LegacyRef<HTMLDivElement>}>\n            <IconButton\n                size={\"xs\"}\n                variant={\"secondary\"}\n                icon={<Icon icon={<DragIndicator />} size=\"sm\" label={\"Drag to reorder\"} />}\n                onMouseDown={() => setIsDragging(true)}\n                onMouseUp={() => setIsDragging(false)}\n                onMouseLeave={() => setIsDragging(false)}\n                className={cn([\n                    \"absolute top-sm -left-sm\",\n                    \"invisible group-hover:visible\",\n                    \"size-md\",\n                    isDragging ? \"cursor-grabbing\" : \"cursor-grab\"\n                ])}\n            />\n        </div>\n    );\n};\n\nconst ItemDragHandle = makeDecoratable(\"TreeItemDragHandle\", BaseItemDragHandle);\n\nexport { ItemDragHandle, type ItemDragHandleProps };\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,aAAa,QAAQ,kCAAkC;AAClF,SAASC,UAAU;AACnB,SAASC,IAAI;AACb,SAASC,EAAE,EAAEC,eAAe;AAM5B,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAK;EAC/D,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGV,KAAK,CAACW,QAAQ,CAAC,KAAK,CAAC;EAEzD,oBACIX,KAAA,CAAAY,aAAA;IAAKC,GAAG,EAAEL;EAA6C,gBACnDR,KAAA,CAAAY,aAAA,CAACT,UAAU;IACPW,IAAI,EAAE,IAAK;IACXC,OAAO,EAAE,WAAY;IACrBC,IAAI,eAAEhB,KAAA,CAAAY,aAAA,CAACR,IAAI;MAACY,IAAI,eAAEhB,KAAA,CAAAY,aAAA,CAACV,aAAa,MAAE,CAAE;MAACY,IAAI,EAAC,IAAI;MAACG,KAAK,EAAE;IAAkB,CAAE,CAAE;IAC5EC,WAAW,EAAEA,CAAA,KAAMR,aAAa,CAAC,IAAI,CAAE;IACvCS,SAAS,EAAEA,CAAA,KAAMT,aAAa,CAAC,KAAK,CAAE;IACtCU,YAAY,EAAEA,CAAA,KAAMV,aAAa,CAAC,KAAK,CAAE;IACzCW,SAAS,EAAEhB,EAAE,CAAC,CACV,0BAA0B,EAC1B,+BAA+B,EAC/B,SAAS,EACTI,UAAU,GAAG,iBAAiB,GAAG,aAAa,CACjD;EAAE,CACN,CACA,CAAC;AAEd,CAAC;AAED,MAAMa,cAAc,GAAGhB,eAAe,CAAC,oBAAoB,EAAEC,kBAAkB,CAAC;AAEhF,SAASe,cAAc","ignoreList":[]}
+{"version":3,"file":"Tree/components/ItemDragHandle.js","sources":["../../../src/Tree/components/ItemDragHandle.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport React from \"react\";\nimport { ReactComponent as DragIndicator } from \"@webiny/icons/drag_indicator.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ntype ItemDragHandleProps = {\n    handleRef?: RefObject<HTMLDivElement | null>;\n};\n\nconst BaseItemDragHandle = ({ handleRef }: ItemDragHandleProps) => {\n    const [isDragging, setIsDragging] = React.useState(false);\n\n    return (\n        <div ref={handleRef as React.LegacyRef<HTMLDivElement>}>\n            <IconButton\n                size={\"xs\"}\n                variant={\"secondary\"}\n                icon={<Icon icon={<DragIndicator />} size=\"sm\" label={\"Drag to reorder\"} />}\n                onMouseDown={() => setIsDragging(true)}\n                onMouseUp={() => setIsDragging(false)}\n                onMouseLeave={() => setIsDragging(false)}\n                className={cn([\n                    \"absolute top-sm -left-sm\",\n                    \"invisible group-hover:visible\",\n                    \"size-md\",\n                    isDragging ? \"cursor-grabbing\" : \"cursor-grab\"\n                ])}\n            />\n        </div>\n    );\n};\n\nconst ItemDragHandle = makeDecoratable(\"TreeItemDragHandle\", BaseItemDragHandle);\n\nexport { ItemDragHandle, type ItemDragHandleProps };\n"],"names":["BaseItemDragHandle","handleRef","isDragging","setIsDragging","React","IconButton","Icon","DragIndicator","cn","ItemDragHandle","makeDecoratable"],"mappings":";;;;;AAWA,MAAMA,qBAAqB,CAAC,EAAEC,SAAS,EAAuB;IAC1D,MAAM,CAACC,YAAYC,cAAc,GAAGC,MAAAA,QAAc,CAAC;IAEnD,OAAO,WAAP,GACI,oBAAC;QAAI,KAAKH;qBACN,oBAACI,YAAUA;QACP,MAAM;QACN,SAAS;QACT,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAaA;YAAK,MAAK;YAAK,OAAO;;QACtD,aAAa,IAAMJ,cAAc;QACjC,WAAW,IAAMA,cAAc;QAC/B,cAAc,IAAMA,cAAc;QAClC,WAAWK,GAAG;YACV;YACA;YACA;YACAN,aAAa,oBAAoB;SACpC;;AAIjB;AAEA,MAAMO,iBAAiBC,gBAAgB,sBAAsBV"}

package/Tree/components/ItemIcon.js

@@ -1,17 +1,12 @@
-import React from "react";
+import react from "react";
 import { Icon } from "../../Icon/index.js";
 import { makeDecoratable } from "../../utils.js";
-const BaseItemIcon = ({
-  element,
-  active,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement(Icon, Object.assign({
-    icon: element,
-    size: "sm",
-    color: active ? "neutral-strong" : "neutral-light"
-  }, props));
-};
+const BaseItemIcon = ({ element, active, ...props })=>/*#__PURE__*/ react.createElement(Icon, {
+        icon: element,
+        size: "sm",
+        color: active ? "neutral-strong" : "neutral-light",
+        ...props
+    });
 const ItemIcon = makeDecoratable("TreeItemIcon", BaseItemIcon);
 export { ItemIcon };
 

package/Tree/components/ItemIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Icon","makeDecoratable","BaseItemIcon","element","active","props","createElement","Object","assign","icon","size","color","ItemIcon"],"sources":["ItemIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconProps } from \"~/Icon/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface ItemIconProps extends Omit<IconProps, \"icon\"> {\n    element?: React.ReactNode;\n    active?: boolean;\n}\n\nconst BaseItemIcon = ({ element, active, ...props }: ItemIconProps) => {\n    return (\n        <Icon\n            icon={element}\n            size={\"sm\"}\n            color={active ? \"neutral-strong\" : \"neutral-light\"}\n            {...props}\n        />\n    );\n};\n\nconst ItemIcon = makeDecoratable(\"TreeItemIcon\", BaseItemIcon);\n\nexport { ItemIcon, type ItemIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,eAAe;AAOxB,MAAMC,YAAY,GAAGA,CAAC;EAAEC,OAAO;EAAEC,MAAM;EAAE,GAAGC;AAAqB,CAAC,KAAK;EACnE,oBACIN,KAAA,CAAAO,aAAA,CAACN,IAAI,EAAAO,MAAA,CAAAC,MAAA;IACDC,IAAI,EAAEN,OAAQ;IACdO,IAAI,EAAE,IAAK;IACXC,KAAK,EAAEP,MAAM,GAAG,gBAAgB,GAAG;EAAgB,GAC/CC,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,MAAMO,QAAQ,GAAGX,eAAe,CAAC,cAAc,EAAEC,YAAY,CAAC;AAE9D,SAASU,QAAQ","ignoreList":[]}
+{"version":3,"file":"Tree/components/ItemIcon.js","sources":["../../../src/Tree/components/ItemIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconProps } from \"~/Icon/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface ItemIconProps extends Omit<IconProps, \"icon\"> {\n    element?: React.ReactNode;\n    active?: boolean;\n}\n\nconst BaseItemIcon = ({ element, active, ...props }: ItemIconProps) => {\n    return (\n        <Icon\n            icon={element}\n            size={\"sm\"}\n            color={active ? \"neutral-strong\" : \"neutral-light\"}\n            {...props}\n        />\n    );\n};\n\nconst ItemIcon = makeDecoratable(\"TreeItemIcon\", BaseItemIcon);\n\nexport { ItemIcon, type ItemIconProps };\n"],"names":["BaseItemIcon","element","active","props","Icon","ItemIcon","makeDecoratable"],"mappings":";;;AASA,MAAMA,eAAe,CAAC,EAAEC,OAAO,EAAEC,MAAM,EAAE,GAAGC,OAAsB,GACvD,WAAP,GACI,oBAACC,MAAIA;QACD,MAAMH;QACN,MAAM;QACN,OAAOC,SAAS,mBAAmB;QAClC,GAAGC,KAAK;;AAKrB,MAAME,WAAWC,gBAAgB,gBAAgBN"}

package/Tree/components/ItemPlaceholder.js

@@ -1,15 +1,13 @@
-import React from "react";
+import react from "react";
 import { makeDecoratable } from "../../utils.js";
-const BaseItemPlaceholder = ({
-  depth
-}) => {
-  const left = depth * 20 + 20;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full h-xxs bg-primary-muted absolute top-0 right-0",
-    style: {
-      left
-    }
-  });
+const BaseItemPlaceholder = ({ depth })=>{
+    const left = 20 * depth + 20;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full h-xxs bg-primary-muted absolute top-0 right-0",
+        style: {
+            left
+        }
+    });
 };
 const ItemPlaceholder = makeDecoratable("TreeItemPlaceholder", BaseItemPlaceholder);
 export { ItemPlaceholder };

package/Tree/components/ItemPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","BaseItemPlaceholder","depth","left","createElement","className","style","ItemPlaceholder"],"sources":["ItemPlaceholder.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface ItemPlaceholderProps {\n    depth: number;\n}\n\nconst BaseItemPlaceholder = ({ depth }: ItemPlaceholderProps) => {\n    const left = depth * 20 + 20;\n\n    return (\n        <div className=\"w-full h-xxs bg-primary-muted absolute top-0 right-0\" style={{ left }} />\n    );\n};\n\nconst ItemPlaceholder = makeDecoratable(\"TreeItemPlaceholder\", BaseItemPlaceholder);\n\nexport { ItemPlaceholder, type ItemPlaceholderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAMxB,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC;AAA4B,CAAC,KAAK;EAC7D,MAAMC,IAAI,GAAGD,KAAK,GAAG,EAAE,GAAG,EAAE;EAE5B,oBACIH,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC,sDAAsD;IAACC,KAAK,EAAE;MAAEH;IAAK;EAAE,CAAE,CAAC;AAEjG,CAAC;AAED,MAAMI,eAAe,GAAGP,eAAe,CAAC,qBAAqB,EAAEC,mBAAmB,CAAC;AAEnF,SAASM,eAAe","ignoreList":[]}
+{"version":3,"file":"Tree/components/ItemPlaceholder.js","sources":["../../../src/Tree/components/ItemPlaceholder.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface ItemPlaceholderProps {\n    depth: number;\n}\n\nconst BaseItemPlaceholder = ({ depth }: ItemPlaceholderProps) => {\n    const left = depth * 20 + 20;\n\n    return (\n        <div className=\"w-full h-xxs bg-primary-muted absolute top-0 right-0\" style={{ left }} />\n    );\n};\n\nconst ItemPlaceholder = makeDecoratable(\"TreeItemPlaceholder\", BaseItemPlaceholder);\n\nexport { ItemPlaceholder, type ItemPlaceholderProps };\n"],"names":["BaseItemPlaceholder","depth","left","ItemPlaceholder","makeDecoratable"],"mappings":";;AAOA,MAAMA,sBAAsB,CAAC,EAAEC,KAAK,EAAwB;IACxD,MAAMC,OAAOD,AAAQ,KAARA,QAAa;IAE1B,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;QAAuD,OAAO;YAAEC;QAAK;;AAE5F;AAEA,MAAMC,kBAAkBC,gBAAgB,uBAAuBJ"}

package/Tree/components/ItemSubIndentation.js

@@ -1,23 +1,19 @@
-import React from "react";
+import react from "react";
 import { Separator } from "../../Separator/index.js";
 import { makeDecoratable } from "../../utils.js";
-const BaseItemSubIndentation = ({
-  level
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "gap-x-xs flex mr-sm"
-  }, Array.from({
-    length: level
-  }, (_, index) => /*#__PURE__*/React.createElement("div", {
-    className: "ml-md",
-    key: `sub-indentation-${level + index}`
-  }, /*#__PURE__*/React.createElement(Separator, {
-    orientation: "vertical",
-    margin: "none",
-    variant: "strong",
-    className: "h-xl ml-px"
-  }))));
-};
+const BaseItemSubIndentation = ({ level })=>/*#__PURE__*/ react.createElement("div", {
+        className: "gap-x-xs flex mr-sm"
+    }, Array.from({
+        length: level
+    }, (_, index)=>/*#__PURE__*/ react.createElement("div", {
+            className: "ml-md",
+            key: `sub-indentation-${level + index}`
+        }, /*#__PURE__*/ react.createElement(Separator, {
+            orientation: "vertical",
+            margin: "none",
+            variant: "strong",
+            className: "h-xl ml-px"
+        }))));
 const ItemSubIndentation = makeDecoratable("TreeItemSubIndentation", BaseItemSubIndentation);
 export { ItemSubIndentation };
 

package/Tree/components/ItemSubIndentation.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Separator","makeDecoratable","BaseItemSubIndentation","level","createElement","className","Array","from","length","_","index","key","orientation","margin","variant","ItemSubIndentation"],"sources":["ItemSubIndentation.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface ItemSubIndentationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"content\"> {\n    level: number;\n}\n\nconst BaseItemSubIndentation = ({ level }: ItemSubIndentationProps) => {\n    return (\n        <div className={\"gap-x-xs flex mr-sm\"}>\n            {Array.from({ length: level }, (_, index) => (\n                <div className={\"ml-md\"} key={`sub-indentation-${level + index}`}>\n                    <Separator\n                        orientation={\"vertical\"}\n                        margin={\"none\"}\n                        variant={\"strong\"}\n                        className={\"h-xl ml-px\"}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\n\nconst ItemSubIndentation = makeDecoratable(\"TreeItemSubIndentation\", BaseItemSubIndentation);\n\nexport { ItemSubIndentation, type ItemSubIndentationProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAClB,SAASC,eAAe;AAMxB,MAAMC,sBAAsB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAK;EACnE,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAsB,GACjCC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEL;EAAM,CAAC,EAAE,CAACM,CAAC,EAAEC,KAAK,kBACpCX,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE,OAAQ;IAACM,GAAG,EAAE,mBAAmBR,KAAK,GAAGO,KAAK;EAAG,gBAC7DX,KAAA,CAAAK,aAAA,CAACJ,SAAS;IACNY,WAAW,EAAE,UAAW;IACxBC,MAAM,EAAE,MAAO;IACfC,OAAO,EAAE,QAAS;IAClBT,SAAS,EAAE;EAAa,CAC3B,CACA,CACR,CACA,CAAC;AAEd,CAAC;AAED,MAAMU,kBAAkB,GAAGd,eAAe,CAAC,wBAAwB,EAAEC,sBAAsB,CAAC;AAE5F,SAASa,kBAAkB","ignoreList":[]}
+{"version":3,"file":"Tree/components/ItemSubIndentation.js","sources":["../../../src/Tree/components/ItemSubIndentation.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface ItemSubIndentationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"content\"> {\n    level: number;\n}\n\nconst BaseItemSubIndentation = ({ level }: ItemSubIndentationProps) => {\n    return (\n        <div className={\"gap-x-xs flex mr-sm\"}>\n            {Array.from({ length: level }, (_, index) => (\n                <div className={\"ml-md\"} key={`sub-indentation-${level + index}`}>\n                    <Separator\n                        orientation={\"vertical\"}\n                        margin={\"none\"}\n                        variant={\"strong\"}\n                        className={\"h-xl ml-px\"}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\n\nconst ItemSubIndentation = makeDecoratable(\"TreeItemSubIndentation\", BaseItemSubIndentation);\n\nexport { ItemSubIndentation, type ItemSubIndentationProps };\n"],"names":["BaseItemSubIndentation","level","Array","_","index","Separator","ItemSubIndentation","makeDecoratable"],"mappings":";;;AAQA,MAAMA,yBAAyB,CAAC,EAAEC,KAAK,EAA2B,GACvD,WAAP,GACI,oBAAC;QAAI,WAAW;OACXC,MAAM,IAAI,CAAC;QAAE,QAAQD;IAAM,GAAG,CAACE,GAAGC,QAAAA,WAAAA,GAC/B,oBAAC;YAAI,WAAW;YAAS,KAAK,CAAC,gBAAgB,EAAEH,QAAQG,OAAO;yBAC5D,oBAACC,WAASA;YACN,aAAa;YACb,QAAQ;YACR,SAAS;YACT,WAAW;;AAQnC,MAAMC,qBAAqBC,gBAAgB,0BAA0BP"}

package/Tree/components/index.js

@@ -5,5 +5,3 @@ export * from "./ItemDragHandle.js";
 export * from "./ItemIcon.js";
 export * from "./ItemPlaceholder.js";
 export * from "./ItemSubIndentation.js";
-
-//# sourceMappingURL=index.js.map

package/Tree/domains/Node.js

@@ -1,37 +1,38 @@
-export class Node {
-  constructor(params) {
-    this._id = params.id;
-    this._parentId = params.parentId;
-    this._droppable = params.droppable ?? true;
-    this._active = params.active ?? false;
-    this._loading = params.loading ?? false;
-    this._label = params.label;
-    this._data = params.data;
-  }
-  static create(data) {
-    return new Node(data);
-  }
-  get id() {
-    return this._id;
-  }
-  get label() {
-    return this._label;
-  }
-  get parentId() {
-    return this._parentId;
-  }
-  get droppable() {
-    return this._droppable;
-  }
-  get active() {
-    return this._active;
-  }
-  get loading() {
-    return this._loading;
-  }
-  get data() {
-    return this._data;
-  }
+class Node {
+    constructor(params){
+        this._id = params.id;
+        this._parentId = params.parentId;
+        this._droppable = params.droppable ?? true;
+        this._active = params.active ?? false;
+        this._loading = params.loading ?? false;
+        this._label = params.label;
+        this._data = params.data;
+    }
+    static create(data) {
+        return new Node(data);
+    }
+    get id() {
+        return this._id;
+    }
+    get label() {
+        return this._label;
+    }
+    get parentId() {
+        return this._parentId;
+    }
+    get droppable() {
+        return this._droppable;
+    }
+    get active() {
+        return this._active;
+    }
+    get loading() {
+        return this._loading;
+    }
+    get data() {
+        return this._data;
+    }
 }
+export { Node };
 
 //# sourceMappingURL=Node.js.map

package/Tree/domains/Node.js.map

@@ -1 +1 @@
-{"version":3,"names":["Node","constructor","params","_id","id","_parentId","parentId","_droppable","droppable","_active","active","_loading","loading","_label","label","_data","data","create"],"sources":["Node.ts"],"sourcesContent":["export interface NodeParams<TData = Record<string, any>> {\n    id: string;\n    parentId: string;\n    droppable?: boolean;\n    active?: boolean;\n    loading?: boolean;\n    label: string;\n    data?: TData;\n}\n\nexport class Node<TData = Record<string, any>> {\n    private readonly _id: string;\n    private readonly _parentId: string;\n    private readonly _droppable: boolean;\n    private readonly _active: boolean;\n    private readonly _loading: boolean;\n    private readonly _label: string;\n    private readonly _data: TData;\n\n    protected constructor(params: NodeParams<TData>) {\n        this._id = params.id;\n        this._parentId = params.parentId;\n        this._droppable = params.droppable ?? true;\n        this._active = params.active ?? false;\n        this._loading = params.loading ?? false;\n        this._label = params.label;\n        this._data = params.data as TData;\n    }\n\n    static create<TData = Record<string, any>>(data: NodeParams<TData>): Node<TData> {\n        return new Node<TData>(data);\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get label() {\n        return this._label;\n    }\n\n    get parentId() {\n        return this._parentId;\n    }\n\n    get droppable() {\n        return this._droppable;\n    }\n\n    get active() {\n        return this._active;\n    }\n\n    get loading() {\n        return this._loading;\n    }\n\n    get data(): TData {\n        return this._data;\n    }\n}\n"],"mappings":"AAUA,OAAO,MAAMA,IAAI,CAA8B;EASjCC,WAAWA,CAACC,MAAyB,EAAE;IAC7C,IAAI,CAACC,GAAG,GAAGD,MAAM,CAACE,EAAE;IACpB,IAAI,CAACC,SAAS,GAAGH,MAAM,CAACI,QAAQ;IAChC,IAAI,CAACC,UAAU,GAAGL,MAAM,CAACM,SAAS,IAAI,IAAI;IAC1C,IAAI,CAACC,OAAO,GAAGP,MAAM,CAACQ,MAAM,IAAI,KAAK;IACrC,IAAI,CAACC,QAAQ,GAAGT,MAAM,CAACU,OAAO,IAAI,KAAK;IACvC,IAAI,CAACC,MAAM,GAAGX,MAAM,CAACY,KAAK;IAC1B,IAAI,CAACC,KAAK,GAAGb,MAAM,CAACc,IAAa;EACrC;EAEA,OAAOC,MAAMA,CAA8BD,IAAuB,EAAe;IAC7E,OAAO,IAAIhB,IAAI,CAAQgB,IAAI,CAAC;EAChC;EAEA,IAAIZ,EAAEA,CAAA,EAAG;IACL,OAAO,IAAI,CAACD,GAAG;EACnB;EAEA,IAAIW,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACD,MAAM;EACtB;EAEA,IAAIP,QAAQA,CAAA,EAAG;IACX,OAAO,IAAI,CAACD,SAAS;EACzB;EAEA,IAAIG,SAASA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACD,UAAU;EAC1B;EAEA,IAAIG,MAAMA,CAAA,EAAG;IACT,OAAO,IAAI,CAACD,OAAO;EACvB;EAEA,IAAIG,OAAOA,CAAA,EAAG;IACV,OAAO,IAAI,CAACD,QAAQ;EACxB;EAEA,IAAIK,IAAIA,CAAA,EAAU;IACd,OAAO,IAAI,CAACD,KAAK;EACrB;AACJ","ignoreList":[]}
+{"version":3,"file":"Tree/domains/Node.js","sources":["../../../src/Tree/domains/Node.ts"],"sourcesContent":["export interface NodeParams<TData = Record<string, any>> {\n    id: string;\n    parentId: string;\n    droppable?: boolean;\n    active?: boolean;\n    loading?: boolean;\n    label: string;\n    data?: TData;\n}\n\nexport class Node<TData = Record<string, any>> {\n    private readonly _id: string;\n    private readonly _parentId: string;\n    private readonly _droppable: boolean;\n    private readonly _active: boolean;\n    private readonly _loading: boolean;\n    private readonly _label: string;\n    private readonly _data: TData;\n\n    protected constructor(params: NodeParams<TData>) {\n        this._id = params.id;\n        this._parentId = params.parentId;\n        this._droppable = params.droppable ?? true;\n        this._active = params.active ?? false;\n        this._loading = params.loading ?? false;\n        this._label = params.label;\n        this._data = params.data as TData;\n    }\n\n    static create<TData = Record<string, any>>(data: NodeParams<TData>): Node<TData> {\n        return new Node<TData>(data);\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get label() {\n        return this._label;\n    }\n\n    get parentId() {\n        return this._parentId;\n    }\n\n    get droppable() {\n        return this._droppable;\n    }\n\n    get active() {\n        return this._active;\n    }\n\n    get loading() {\n        return this._loading;\n    }\n\n    get data(): TData {\n        return this._data;\n    }\n}\n"],"names":["Node","params","data"],"mappings":"AAUO,MAAMA;IAST,YAAsBC,MAAyB,CAAE;QAC7C,IAAI,CAAC,GAAG,GAAGA,OAAO,EAAE;QACpB,IAAI,CAAC,SAAS,GAAGA,OAAO,QAAQ;QAChC,IAAI,CAAC,UAAU,GAAGA,OAAO,SAAS,IAAI;QACtC,IAAI,CAAC,OAAO,GAAGA,OAAO,MAAM,IAAI;QAChC,IAAI,CAAC,QAAQ,GAAGA,OAAO,OAAO,IAAI;QAClC,IAAI,CAAC,MAAM,GAAGA,OAAO,KAAK;QAC1B,IAAI,CAAC,KAAK,GAAGA,OAAO,IAAI;IAC5B;IAEA,OAAO,OAAoCC,IAAuB,EAAe;QAC7E,OAAO,IAAIF,KAAYE;IAC3B;IAEA,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,GAAG;IACnB;IAEA,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,WAAW;QACX,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,IAAI,YAAY;QACZ,OAAO,IAAI,CAAC,UAAU;IAC1B;IAEA,IAAI,SAAS;QACT,OAAO,IAAI,CAAC,OAAO;IACvB;IAEA,IAAI,UAAU;QACV,OAAO,IAAI,CAAC,QAAQ;IACxB;IAEA,IAAI,OAAc;QACd,OAAO,IAAI,CAAC,KAAK;IACrB;AACJ"}

package/Tree/domains/NodeDto.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=NodeDto.js.map

package/Tree/domains/NodeFormatted.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=NodeFormatted.js.map