@webiny/app-aco 0.0.0-ee-vpcs.549378cf03

package/components/Tree/MenuActions/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Container = styled(\"div\")`\n    position: absolute;\n    right: 8px;\n    visibility: hidden;\n    cursor: pointer;\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAEO,IAAMA,SAAS,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,mEAAf"}

package/components/Tree/Node/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { NodeModel } from "@minoru/react-dnd-treeview";
+import { DndItemData } from "../../../types";
+declare type Props = {
+    node: NodeModel<DndItemData>;
+    depth: number;
+    isOpen: boolean;
+    onToggle: (id: NodeModel<DndItemData>["id"]) => void;
+    onClick: (data: NodeModel<DndItemData>["data"]) => void;
+    onUpdateFolder: (data: NodeModel<DndItemData>["data"]) => void;
+    onDeleteFolder: (data: NodeModel<DndItemData>["data"]) => void;
+};
+declare type FolderProps = {
+    text: string;
+    isOpen: boolean;
+};
+export declare const FolderNode: ({ isOpen, text }: FolderProps) => JSX.Element;
+export declare const Node: ({ node, depth, isOpen, onToggle, onClick, onUpdateFolder, onDeleteFolder }: Props) => JSX.Element;
+export {};

package/components/Tree/Node/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Node = exports.FolderNode = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _arrow_right = require("@material-symbols/svg-400/outlined/arrow_right.svg");
+
+var _folderFill = require("@material-symbols/svg-400/outlined/folder-fill.svg");
+
+var _folder_openFill = require("@material-symbols/svg-400/outlined/folder_open-fill.svg");
+
+var _reactDndTreeview = require("@minoru/react-dnd-treeview");
+
+var _MenuActions = require("../MenuActions");
+
+var _styled = require("./styled");
+
+var FolderNode = function FolderNode(_ref) {
+  var isOpen = _ref.isOpen,
+      text = _ref.text;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.FolderIcon, null, isOpen ? /*#__PURE__*/_react.default.createElement(_folder_openFill.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_folderFill.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_styled.Text, {
+    use: "body2"
+  }, text));
+};
+
+exports.FolderNode = FolderNode;
+
+var Node = function Node(_ref2) {
+  var _node$data;
+
+  var node = _ref2.node,
+      depth = _ref2.depth,
+      isOpen = _ref2.isOpen,
+      onToggle = _ref2.onToggle,
+      onClick = _ref2.onClick,
+      onUpdateFolder = _ref2.onUpdateFolder,
+      onDeleteFolder = _ref2.onDeleteFolder;
+  // Move the placeholder line to the left based on the element depth within the tree.
+  // Let's add some pixels so that the element is detached from the container but takes up the whole length while it's highlighted during dnd.
+  var indent = depth * 24 + 8;
+  var dragOverProps = (0, _reactDndTreeview.useDragOver)(node.id, isOpen, onToggle);
+
+  var handleToggle = function handleToggle(e) {
+    e.stopPropagation();
+    onToggle(node.id);
+  };
+
+  var handleClick = function handleClick(e) {
+    e.stopPropagation();
+    onClick(node.data);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_styled.Container, Object.assign({
+    isFocused: !!((_node$data = node.data) !== null && _node$data !== void 0 && _node$data.isFocused),
+    style: {
+      paddingInlineStart: indent
+    }
+  }, dragOverProps), /*#__PURE__*/_react.default.createElement(_styled.ArrowIcon, {
+    isOpen: isOpen,
+    onClick: handleToggle
+  }, /*#__PURE__*/_react.default.createElement(_arrow_right.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_styled.Content, {
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(FolderNode, {
+    text: node.text,
+    isOpen: isOpen
+  })), node.data && /*#__PURE__*/_react.default.createElement(_MenuActions.MenuActions, {
+    folder: node.data,
+    onUpdateFolder: onUpdateFolder,
+    onDeleteFolder: onDeleteFolder
+  }));
+};
+
+exports.Node = Node;

package/components/Tree/Node/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FolderNode","isOpen","text","Node","node","depth","onToggle","onClick","onUpdateFolder","onDeleteFolder","indent","dragOverProps","useDragOver","id","handleToggle","e","stopPropagation","handleClick","data","isFocused","paddingInlineStart"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ArrowRight } from \"@material-symbols/svg-400/outlined/arrow_right.svg\";\nimport { ReactComponent as Folder } from \"@material-symbols/svg-400/outlined/folder-fill.svg\";\nimport { ReactComponent as FolderOpen } from \"@material-symbols/svg-400/outlined/folder_open-fill.svg\";\nimport { NodeModel, useDragOver } from \"@minoru/react-dnd-treeview\";\n\nimport { MenuActions } from \"~/components/Tree/MenuActions\";\n\nimport { Container, ArrowIcon, FolderIcon, Text, Content } from \"./styled\";\n\nimport { DndItemData } from \"~/types\";\n\ntype Props = {\n    node: NodeModel<DndItemData>;\n    depth: number;\n    isOpen: boolean;\n    onToggle: (id: NodeModel<DndItemData>[\"id\"]) => void;\n    onClick: (data: NodeModel<DndItemData>[\"data\"]) => void;\n    onUpdateFolder: (data: NodeModel<DndItemData>[\"data\"]) => void;\n    onDeleteFolder: (data: NodeModel<DndItemData>[\"data\"]) => void;\n};\n\ntype FolderProps = {\n    text: string;\n    isOpen: boolean;\n};\n\nexport const FolderNode = ({ isOpen, text }: FolderProps) => {\n    return (\n        <>\n            <FolderIcon>{isOpen ? <FolderOpen /> : <Folder />}</FolderIcon>\n            <Text use={\"body2\"}>{text}</Text>\n        </>\n    );\n};\n\nexport const Node = ({\n    node,\n    depth,\n    isOpen,\n    onToggle,\n    onClick,\n    onUpdateFolder,\n    onDeleteFolder\n}: Props) => {\n    // Move the placeholder line to the left based on the element depth within the tree.\n    // Let's add some pixels so that the element is detached from the container but takes up the whole length while it's highlighted during dnd.\n    const indent = depth * 24 + 8;\n\n    const dragOverProps = useDragOver(node.id, isOpen, onToggle);\n\n    const handleToggle = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        onToggle(node.id);\n    };\n\n    const handleClick = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        onClick(node.data);\n    };\n\n    return (\n        <Container\n            isFocused={!!node.data?.isFocused}\n            style={{ paddingInlineStart: indent }}\n            {...dragOverProps}\n        >\n            <ArrowIcon isOpen={isOpen} onClick={handleToggle}>\n                <ArrowRight />\n            </ArrowIcon>\n            <Content onClick={handleClick}>\n                <FolderNode text={node.text} isOpen={isOpen} />\n            </Content>\n            {node.data && (\n                <MenuActions\n                    folder={node.data}\n                    onUpdateFolder={onUpdateFolder}\n                    onDeleteFolder={onDeleteFolder}\n                />\n            )}\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA;;AAmBO,IAAMA,UAAU,GAAG,SAAbA,UAAa,OAAmC;EAAA,IAAhCC,MAAgC,QAAhCA,MAAgC;EAAA,IAAxBC,IAAwB,QAAxBA,IAAwB;EACzD,oBACI,yEACI,6BAAC,kBAAD,QAAaD,MAAM,gBAAG,6BAAC,+BAAD,OAAH,gBAAoB,6BAAC,0BAAD,OAAvC,CADJ,eAEI,6BAAC,YAAD;IAAM,GAAG,EAAE;EAAX,GAAqBC,IAArB,CAFJ,CADJ;AAMH,CAPM;;;;AASA,IAAMC,IAAI,GAAG,SAAPA,IAAO,QAQP;EAAA;;EAAA,IAPTC,IAOS,SAPTA,IAOS;EAAA,IANTC,KAMS,SANTA,KAMS;EAAA,IALTJ,MAKS,SALTA,MAKS;EAAA,IAJTK,QAIS,SAJTA,QAIS;EAAA,IAHTC,OAGS,SAHTA,OAGS;EAAA,IAFTC,cAES,SAFTA,cAES;EAAA,IADTC,cACS,SADTA,cACS;EACT;EACA;EACA,IAAMC,MAAM,GAAGL,KAAK,GAAG,EAAR,GAAa,CAA5B;EAEA,IAAMM,aAAa,GAAG,IAAAC,6BAAA,EAAYR,IAAI,CAACS,EAAjB,EAAqBZ,MAArB,EAA6BK,QAA7B,CAAtB;;EAEA,IAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,CAAD,EAAyB;IAC1CA,CAAC,CAACC,eAAF;IACAV,QAAQ,CAACF,IAAI,CAACS,EAAN,CAAR;EACH,CAHD;;EAKA,IAAMI,WAAW,GAAG,SAAdA,WAAc,CAACF,CAAD,EAAyB;IACzCA,CAAC,CAACC,eAAF;IACAT,OAAO,CAACH,IAAI,CAACc,IAAN,CAAP;EACH,CAHD;;EAKA,oBACI,6BAAC,iBAAD;IACI,SAAS,EAAE,CAAC,gBAACd,IAAI,CAACc,IAAN,uCAAC,WAAWC,SAAZ,CADhB;IAEI,KAAK,EAAE;MAAEC,kBAAkB,EAAEV;IAAtB;EAFX,GAGQC,aAHR,gBAKI,6BAAC,iBAAD;IAAW,MAAM,EAAEV,MAAnB;IAA2B,OAAO,EAAEa;EAApC,gBACI,6BAAC,2BAAD,OADJ,CALJ,eAQI,6BAAC,eAAD;IAAS,OAAO,EAAEG;EAAlB,gBACI,6BAAC,UAAD;IAAY,IAAI,EAAEb,IAAI,CAACF,IAAvB;IAA6B,MAAM,EAAED;EAArC,EADJ,CARJ,EAWKG,IAAI,CAACc,IAAL,iBACG,6BAAC,wBAAD;IACI,MAAM,EAAEd,IAAI,CAACc,IADjB;IAEI,cAAc,EAAEV,cAFpB;IAGI,cAAc,EAAEC;EAHpB,EAZR,CADJ;AAqBH,CA9CM"}

package/components/Tree/Node/styled.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+/// <reference types="web" />
+/// <reference types="react" />
+declare type ContainerProps = {
+    isFocused: boolean;
+};
+declare type ArrowIconContainerProps = {
+    isOpen: boolean;
+};
+export declare const Container: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerProps, object>;
+export declare const Icon: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const ArrowIcon: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    theme?: object | undefined;
+} & {
+    children?: import("react").ReactNode;
+}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, ArrowIconContainerProps, object>;
+export declare const FolderIcon: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    theme?: object | undefined;
+} & {
+    children?: import("react").ReactNode;
+}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    theme?: object | undefined;
+} & {
+    children?: import("react").ReactNode;
+}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const Content: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const Text: import("@emotion/styled-base").StyledComponent<import("@webiny/ui/Typography/Typography").TypographyProps & {
+    children?: import("react").ReactNode;
+}, Pick<import("@webiny/ui/Typography/Typography").TypographyProps & {
+    children?: import("react").ReactNode;
+}, keyof import("@webiny/ui/Typography/Typography").TypographyProps>, object>;
+export {};

package/components/Tree/Node/styled.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Text = exports.Icon = exports.FolderIcon = exports.Content = exports.Container = exports.ArrowIcon = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Typography = require("@webiny/ui/Typography");
+
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Container",
+  target: "e12afjno0"
+})("display:flex;align-items:center;padding:4px 32px 4px 0;background:", function (props) {
+  return props.isFocused && "var(--mdc-theme-background)";
+}, ";color:var(--webiny-theme-color-text-secondary);fill:currentColor;position:relative;&:hover .folder-tree-menu-action{visibility:visible;}");
+exports.Container = Container;
+var Icon = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Icon",
+  target: "e12afjno1"
+})("display:flex;align-items:center;justify-content:center;height:24px;width:24px;cursor:pointer;");
+exports.Icon = Icon;
+var ArrowIcon = /*#__PURE__*/(0, _styled.default)(Icon, {
+  label: "ArrowIcon",
+  target: "e12afjno2"
+})("transition:transform linear 0.1s;transform:", function (props) {
+  return props.isOpen ? "rotate(90deg)" : "rotate(0deg)";
+}, ";");
+exports.ArrowIcon = ArrowIcon;
+var FolderIcon = /*#__PURE__*/(0, _styled.default)(Icon, {
+  label: "FolderIcon",
+  target: "e12afjno3"
+})("margin-right:4px;");
+exports.FolderIcon = FolderIcon;
+var Content = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Content",
+  target: "e12afjno4"
+})("display:flex;align-items:center;cursor:pointer;white-space:nowrap;overflow:hidden;");
+exports.Content = Content;
+var Text = /*#__PURE__*/(0, _styled.default)(_Typography.Typography, {
+  label: "Text",
+  target: "e12afjno5"
+})("white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px;");
+exports.Text = Text;

package/components/Tree/Node/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","props","isFocused","Icon","ArrowIcon","isOpen","FolderIcon","Content","Text","Typography"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\ntype ContainerProps = {\n    isFocused: boolean;\n};\n\ntype ArrowIconContainerProps = {\n    isOpen: boolean;\n};\n\nexport const Container = styled(\"div\")<ContainerProps>`\n    display: flex;\n    align-items: center;\n    padding: 4px 32px 4px 0;\n    background: ${props => props.isFocused && \"var(--mdc-theme-background)\"};\n    color: var(--webiny-theme-color-text-secondary);\n    fill: currentColor;\n    position: relative;\n\n    &:hover .folder-tree-menu-action {\n        visibility: visible;\n    }\n`;\n\nexport const Icon = styled(\"div\")`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 24px;\n    width: 24px;\n    cursor: pointer;\n`;\n\nexport const ArrowIcon = styled(Icon)<ArrowIconContainerProps>`\n    transition: transform linear 0.1s;\n    transform: ${props => (props.isOpen ? \"rotate(90deg)\" : \"rotate(0deg)\")};\n`;\n\nexport const FolderIcon = styled(Icon)`\n    margin-right: 4px;\n`;\n\nexport const Content = styled(\"div\")`\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    white-space: nowrap;\n    overflow: hidden;\n`;\n\nexport const Text = styled(Typography)`\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 24px;\n`;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAUO,IAAMA,SAAS,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,yEAIJ,UAAAC,KAAK;EAAA,OAAIA,KAAK,CAACC,SAAN,IAAmB,6BAAvB;AAAA,CAJD,8IAAf;;AAcA,IAAMC,IAAI,oBAAGH,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,mGAAV;;AASA,IAAMI,SAAS,oBAAGJ,eAAH,EAAUG,IAAV;EAAA;EAAA;AAAA,kDAEL,UAAAF,KAAK;EAAA,OAAKA,KAAK,CAACI,MAAN,GAAe,eAAf,GAAiC,cAAtC;AAAA,CAFA,MAAf;;AAKA,IAAMC,UAAU,oBAAGN,eAAH,EAAUG,IAAV;EAAA;EAAA;AAAA,uBAAhB;;AAIA,IAAMI,OAAO,oBAAGP,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,wFAAb;;AAQA,IAAMQ,IAAI,oBAAGR,eAAH,EAAUS,sBAAV;EAAA;EAAA;AAAA,iFAAV"}

package/components/Tree/NodePreview/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { DragLayerMonitorProps } from "@minoru/react-dnd-treeview";
+import { DndItemData } from "../../../types";
+declare type Props = {
+    monitorProps: DragLayerMonitorProps<DndItemData>;
+};
+export declare const NodePreview: React.FC<Props>;
+export {};

package/components/Tree/NodePreview/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NodePreview = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Node = require("../Node");
+
+var _styled = require("./styled");
+
+var NodePreview = function NodePreview(props) {
+  var item = props.monitorProps.item;
+  return /*#__PURE__*/_react.default.createElement(_styled.Container, null, /*#__PURE__*/_react.default.createElement(_Node.FolderNode, {
+    text: item.text,
+    isOpen: false
+  }));
+};
+
+exports.NodePreview = NodePreview;

package/components/Tree/NodePreview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["NodePreview","props","item","monitorProps","text"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { DragLayerMonitorProps } from \"@minoru/react-dnd-treeview\";\n\nimport { FolderNode } from \"~/components/Tree/Node\";\nimport { Container } from \"./styled\";\n\nimport { DndItemData } from \"~/types\";\n\ntype Props = {\n    monitorProps: DragLayerMonitorProps<DndItemData>;\n};\n\nexport const NodePreview: React.FC<Props> = props => {\n    const item = props.monitorProps.item;\n\n    return (\n        <Container>\n            <FolderNode text={item.text} isOpen={false} />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AAGA;;AACA;;AAQO,IAAMA,WAA4B,GAAG,SAA/BA,WAA+B,CAAAC,KAAK,EAAI;EACjD,IAAMC,IAAI,GAAGD,KAAK,CAACE,YAAN,CAAmBD,IAAhC;EAEA,oBACI,6BAAC,iBAAD,qBACI,6BAAC,gBAAD;IAAY,IAAI,EAAEA,IAAI,CAACE,IAAvB;IAA6B,MAAM,EAAE;EAArC,EADJ,CADJ;AAKH,CARM"}

package/components/Tree/NodePreview/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+/// <reference types="web" />
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;

package/components/Tree/NodePreview/styled.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Container",
+  target: "e2my8y90"
+})("background-color:var(--webiny-theme-color-primary);border-radius:var(--webiny-theme-border-radius);color:var(--webiny-theme-color-on-primary);fill:currentColor;display:inline-grid;grid-template-columns:auto auto;align-items:center;padding:4px 8px;pointer-events:none;");
+exports.Container = Container;

package/components/Tree/NodePreview/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Container = styled(\"div\")`\n    background-color: var(--webiny-theme-color-primary);\n    border-radius: var(--webiny-theme-border-radius);\n    color: var(--webiny-theme-color-on-primary);\n    fill: currentColor;\n    display: inline-grid;\n    grid-template-columns: auto auto;\n    align-items: center;\n    padding: 4px 8px;\n    pointer-events: none;\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAEO,IAAMA,SAAS,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,iRAAf"}

package/components/Tree/Placeholder/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { NodeModel } from "@minoru/react-dnd-treeview";
+import { DndItemData } from "../../../types";
+interface Props {
+    depth: number;
+    node: NodeModel<DndItemData>;
+}
+export declare const Placeholder: ({ depth }: Props) => JSX.Element;
+export {};

package/components/Tree/Placeholder/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Placeholder = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = require("./styled");
+
+var Placeholder = function Placeholder(_ref) {
+  var depth = _ref.depth;
+  // Move the placeholder line to the left based on the element depth within the tree.
+  // Let's add some pixels so that the element is detached from the container but takes up the whole length while it's highlighted during dnd.
+  var left = depth * 24 + 8;
+  return /*#__PURE__*/_react.default.createElement(_styled.Element, {
+    style: {
+      left: left
+    }
+  });
+};
+
+exports.Placeholder = Placeholder;

package/components/Tree/Placeholder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Placeholder","depth","left"],"sources":["index.tsx"],"sourcesContent":["import { NodeModel } from \"@minoru/react-dnd-treeview\";\nimport React from \"react\";\n\nimport { Element } from \"./styled\";\nimport { DndItemData } from \"~/types\";\n\ninterface Props {\n    depth: number;\n    node: NodeModel<DndItemData>;\n}\n\nexport const Placeholder = ({ depth }: Props) => {\n    // Move the placeholder line to the left based on the element depth within the tree.\n    // Let's add some pixels so that the element is detached from the container but takes up the whole length while it's highlighted during dnd.\n    const left = depth * 24 + 8;\n    return <Element style={{ left }} />;\n};\n"],"mappings":";;;;;;;;;AACA;;AAEA;;AAQO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAAsB;EAAA,IAAnBC,KAAmB,QAAnBA,KAAmB;EAC7C;EACA;EACA,IAAMC,IAAI,GAAGD,KAAK,GAAG,EAAR,GAAa,CAA1B;EACA,oBAAO,6BAAC,eAAD;IAAS,KAAK,EAAE;MAAEC,IAAI,EAAJA;IAAF;EAAhB,EAAP;AACH,CALM"}

package/components/Tree/Placeholder/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+/// <reference types="web" />
+/// <reference types="react" />
+export declare const Element: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;

package/components/Tree/Placeholder/styled.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Element = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var Element = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Element",
+  target: "ehnecm90"
+})("background-color:var(--webiny-theme-color-primary);height:2px;position:absolute;right:0;top:0;transform:translateY(-50%);");
+exports.Element = Element;

package/components/Tree/Placeholder/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Element","styled"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Element = styled(\"div\")`\n    background-color: var(--webiny-theme-color-primary);\n    height: 2px;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateY(-50%);\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAEO,IAAMA,OAAO,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,+HAAb"}

package/components/Tree/Title/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="web" />
+import React from "react";
+declare type Props = {
+    title: string;
+    isDragging: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+};
+export declare const Title: React.FC<Props>;
+export {};

package/components/Tree/Title/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _home = require("@material-design-icons/svg/filled/home.svg");
+
+var _styled = require("./styled");
+
+var _Typography = require("@webiny/ui/Typography");
+
+var Title = function Title(_ref) {
+  var title = _ref.title,
+      onClick = _ref.onClick,
+      isDragging = _ref.isDragging;
+  return /*#__PURE__*/_react.default.createElement(_styled.Container, {
+    onClick: onClick,
+    hasClickAction: Boolean(onClick),
+    isDragging: isDragging
+  }, /*#__PURE__*/_react.default.createElement(_styled.IconContainer, null, /*#__PURE__*/_react.default.createElement(_home.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "subtitle2"
+  }, title));
+};
+
+exports.Title = Title;

package/components/Tree/Title/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Title","title","onClick","isDragging","Boolean"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ReactComponent as Dashboard } from \"@material-design-icons/svg/filled/home.svg\";\n\nimport { Container, IconContainer } from \"./styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\ntype Props = {\n    title: string;\n    isDragging: boolean;\n    onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n};\n\nexport const Title: React.FC<Props> = ({ title, onClick, isDragging }) => {\n    return (\n        <Container onClick={onClick} hasClickAction={Boolean(onClick)} isDragging={isDragging}>\n            <IconContainer>\n                <Dashboard />\n            </IconContainer>\n            <Typography use={\"subtitle2\"}>{title}</Typography>\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AAQO,IAAMA,KAAsB,GAAG,SAAzBA,KAAyB,OAAoC;EAAA,IAAjCC,KAAiC,QAAjCA,KAAiC;EAAA,IAA1BC,OAA0B,QAA1BA,OAA0B;EAAA,IAAjBC,UAAiB,QAAjBA,UAAiB;EACtE,oBACI,6BAAC,iBAAD;IAAW,OAAO,EAAED,OAApB;IAA6B,cAAc,EAAEE,OAAO,CAACF,OAAD,CAApD;IAA+D,UAAU,EAAEC;EAA3E,gBACI,6BAAC,qBAAD,qBACI,6BAAC,oBAAD,OADJ,CADJ,eAII,6BAAC,sBAAD;IAAY,GAAG,EAAE;EAAjB,GAA+BF,KAA/B,CAJJ,CADJ;AAQH,CATM"}

package/components/Tree/Title/styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/// <reference types="web" />
+/// <reference types="react" />
+declare type ContainerProps = {
+    hasClickAction: boolean;
+    isDragging: boolean;
+};
+export declare const Container: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerProps, object>;
+export declare const IconContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export {};

package/components/Tree/Title/styled.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconContainer = exports.Container = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Container",
+  target: "eteslgk0"
+})("position:absolute;top:8px;left:0;display:flex;align-items:center;color:var(--webiny-theme-color-text-secondary);fill:currentColor;padding:0 8px 0;cursor:", function (_ref) {
+  var hasClickAction = _ref.hasClickAction;
+  return hasClickAction && "pointer";
+}, ";pointer-events:", function (_ref2) {
+  var isDragging = _ref2.isDragging;
+  return isDragging ? "none" : "auto";
+}, ";");
+exports.Container = Container;
+var IconContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "IconContainer",
+  target: "eteslgk1"
+})("margin-right:4px;height:24px;width:24px;");
+exports.IconContainer = IconContainer;

package/components/Tree/Title/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","hasClickAction","isDragging","IconContainer"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\ntype ContainerProps = {\n    hasClickAction: boolean;\n    isDragging: boolean;\n};\n\nexport const Container = styled(\"div\")<ContainerProps>`\n    position: absolute;\n    top: 8px;\n    left: 0;\n    display: flex;\n    align-items: center;\n    color: var(--webiny-theme-color-text-secondary);\n    fill: currentColor;\n    padding: 0 8px 0;\n    cursor: ${({ hasClickAction }) => hasClickAction && \"pointer\"};\n    // The title acts like is not there, so user can drag a folder over the title and move it to the root.\n    pointer-events: ${({ isDragging }) => (isDragging ? \"none\" : \"auto\")};\n`;\n\nexport const IconContainer = styled.div`\n    margin-right: 4px;\n    height: 24px;\n    width: 24px;\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAOO,IAAMA,SAAS,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,gKASR;EAAA,IAAGC,cAAH,QAAGA,cAAH;EAAA,OAAwBA,cAAc,IAAI,SAA1C;AAAA,CATQ,sBAWA;EAAA,IAAGC,UAAH,SAAGA,UAAH;EAAA,OAAqBA,UAAU,GAAG,MAAH,GAAY,MAA3C;AAAA,CAXA,MAAf;;AAcA,IAAMC,aAAa,oBAAGH,eAAH;EAAA;EAAA;AAAA,8CAAnB"}

package/components/Tree/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="web" />
+import React from "react";
+import { NodeModel } from "@minoru/react-dnd-treeview";
+import { DndItemData } from "../../types";
+declare type Props = {
+    type: string;
+    title: string;
+    onFolderClick: (data: NodeModel<DndItemData>["data"]) => void;
+    onTitleClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    focusedFolderId?: string;
+};
+export declare const FolderTree: React.FC<Props>;
+export {};

package/components/Tree/index.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FolderTree = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useFolders2 = require("../../hooks/useFolders");
+
+var _ButtonCreate = require("./ButtonCreate");
+
+var _Empty = require("./Empty");
+
+var _Loader = require("./Loader");
+
+var _List = require("./List");
+
+var _Title = require("./Title");
+
+var _ = require("./..");
+
+var _styled = require("./styled");
+
+var FolderTree = function FolderTree(_ref) {
+  var type = _ref.type,
+      title = _ref.title,
+      focusedFolderId = _ref.focusedFolderId,
+      onFolderClick = _ref.onFolderClick,
+      onTitleClick = _ref.onTitleClick;
+
+  var _useFolders = (0, _useFolders2.useFolders)(type),
+      folders = _useFolders.folders;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      createDialogOpen = _useState2[0],
+      setCreateDialogOpen = _useState2[1]; // Little CSS trick here: since the folder title has absolute position, user can drag a folder over it and move it to root folder.
+  // While we are moving folders around we disable any title pointer event.
+
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isDragging = _useState4[0],
+      setIsDragging = _useState4[1];
+
+  var renderList = function renderList() {
+    if (!folders) {
+      return /*#__PURE__*/_react.default.createElement(_Loader.Loader, null);
+    }
+
+    if (folders.length > 0) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_List.List, {
+        type: type,
+        folders: folders,
+        onFolderClick: onFolderClick,
+        focusedFolderId: focusedFolderId,
+        onDragStart: function onDragStart() {
+          return setIsDragging(true);
+        },
+        onDragEnd: function onDragEnd() {
+          return setIsDragging(false);
+        }
+      }), /*#__PURE__*/_react.default.createElement(_ButtonCreate.CreateButton, {
+        onClick: function onClick() {
+          return setCreateDialogOpen(true);
+        }
+      }));
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Empty.Empty, null), /*#__PURE__*/_react.default.createElement(_ButtonCreate.CreateButton, {
+      onClick: function onClick() {
+        return setCreateDialogOpen(true);
+      }
+    }));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_styled.Container, null, /*#__PURE__*/_react.default.createElement(_Title.Title, {
+    title: title,
+    onClick: onTitleClick,
+    isDragging: isDragging
+  }), renderList(), /*#__PURE__*/_react.default.createElement(_.FolderDialogCreate, {
+    type: type,
+    open: createDialogOpen,
+    onClose: function onClose() {
+      return setCreateDialogOpen(false);
+    },
+    parentId: undefined
+  }));
+};
+
+exports.FolderTree = FolderTree;

package/components/Tree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FolderTree","type","title","focusedFolderId","onFolderClick","onTitleClick","useFolders","folders","useState","createDialogOpen","setCreateDialogOpen","isDragging","setIsDragging","renderList","length","undefined"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { NodeModel } from \"@minoru/react-dnd-treeview\";\n\nimport { useFolders } from \"~/hooks/useFolders\";\n\nimport { CreateButton } from \"./ButtonCreate\";\nimport { Empty } from \"~/components/Tree/Empty\";\nimport { Loader } from \"./Loader\";\nimport { List } from \"./List\";\nimport { Title } from \"./Title\";\nimport { FolderDialogCreate } from \"~/components\";\n\nimport { Container } from \"./styled\";\n\nimport { DndItemData } from \"~/types\";\n\ntype Props = {\n    type: string;\n    title: string;\n    onFolderClick: (data: NodeModel<DndItemData>[\"data\"]) => void;\n    onTitleClick?: (event: React.MouseEvent<HTMLElement>) => void;\n    focusedFolderId?: string;\n};\n\nexport const FolderTree: React.FC<Props> = ({\n    type,\n    title,\n    focusedFolderId,\n    onFolderClick,\n    onTitleClick\n}) => {\n    const { folders } = useFolders(type);\n    const [createDialogOpen, setCreateDialogOpen] = useState<boolean>(false);\n\n    // Little CSS trick here: since the folder title has absolute position, user can drag a folder over it and move it to root folder.\n    // While we are moving folders around we disable any title pointer event.\n    const [isDragging, setIsDragging] = useState<boolean>(false);\n\n    const renderList = () => {\n        if (!folders) {\n            return <Loader />;\n        }\n\n        if (folders.length > 0) {\n            return (\n                <>\n                    <List\n                        type={type}\n                        folders={folders}\n                        onFolderClick={onFolderClick}\n                        focusedFolderId={focusedFolderId}\n                        onDragStart={() => setIsDragging(true)}\n                        onDragEnd={() => setIsDragging(false)}\n                    />\n                    <CreateButton onClick={() => setCreateDialogOpen(true)} />\n                </>\n            );\n        }\n\n        return (\n            <>\n                <Empty />\n                <CreateButton onClick={() => setCreateDialogOpen(true)} />\n            </>\n        );\n    };\n\n    return (\n        <Container>\n            <Title title={title} onClick={onTitleClick} isDragging={isDragging} />\n            {renderList()}\n            <FolderDialogCreate\n                type={type}\n                open={createDialogOpen}\n                onClose={() => setCreateDialogOpen(false)}\n                parentId={undefined}\n            />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AAIA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAYO,IAAMA,UAA2B,GAAG,SAA9BA,UAA8B,OAMrC;EAAA,IALFC,IAKE,QALFA,IAKE;EAAA,IAJFC,KAIE,QAJFA,KAIE;EAAA,IAHFC,eAGE,QAHFA,eAGE;EAAA,IAFFC,aAEE,QAFFA,aAEE;EAAA,IADFC,YACE,QADFA,YACE;;EACF,kBAAoB,IAAAC,uBAAA,EAAWL,IAAX,CAApB;EAAA,IAAQM,OAAR,eAAQA,OAAR;;EACA,gBAAgD,IAAAC,eAAA,EAAkB,KAAlB,CAAhD;EAAA;EAAA,IAAOC,gBAAP;EAAA,IAAyBC,mBAAzB,iBAFE,CAIF;EACA;;;EACA,iBAAoC,IAAAF,eAAA,EAAkB,KAAlB,CAApC;EAAA;EAAA,IAAOG,UAAP;EAAA,IAAmBC,aAAnB;;EAEA,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;IACrB,IAAI,CAACN,OAAL,EAAc;MACV,oBAAO,6BAAC,cAAD,OAAP;IACH;;IAED,IAAIA,OAAO,CAACO,MAAR,GAAiB,CAArB,EAAwB;MACpB,oBACI,yEACI,6BAAC,UAAD;QACI,IAAI,EAAEb,IADV;QAEI,OAAO,EAAEM,OAFb;QAGI,aAAa,EAAEH,aAHnB;QAII,eAAe,EAAED,eAJrB;QAKI,WAAW,EAAE;UAAA,OAAMS,aAAa,CAAC,IAAD,CAAnB;QAAA,CALjB;QAMI,SAAS,EAAE;UAAA,OAAMA,aAAa,CAAC,KAAD,CAAnB;QAAA;MANf,EADJ,eASI,6BAAC,0BAAD;QAAc,OAAO,EAAE;UAAA,OAAMF,mBAAmB,CAAC,IAAD,CAAzB;QAAA;MAAvB,EATJ,CADJ;IAaH;;IAED,oBACI,yEACI,6BAAC,YAAD,OADJ,eAEI,6BAAC,0BAAD;MAAc,OAAO,EAAE;QAAA,OAAMA,mBAAmB,CAAC,IAAD,CAAzB;MAAA;IAAvB,EAFJ,CADJ;EAMH,CA3BD;;EA6BA,oBACI,6BAAC,iBAAD,qBACI,6BAAC,YAAD;IAAO,KAAK,EAAER,KAAd;IAAqB,OAAO,EAAEG,YAA9B;IAA4C,UAAU,EAAEM;EAAxD,EADJ,EAEKE,UAAU,EAFf,eAGI,6BAAC,oBAAD;IACI,IAAI,EAAEZ,IADV;IAEI,IAAI,EAAEQ,gBAFV;IAGI,OAAO,EAAE;MAAA,OAAMC,mBAAmB,CAAC,KAAD,CAAzB;IAAA,CAHb;IAII,QAAQ,EAAEK;EAJd,EAHJ,CADJ;AAYH,CAvDM"}

package/components/Tree/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+/// <reference types="web" />
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;

package/components/Tree/styled.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Container",
+  target: "ee41tcw0"
+})("position:relative;margin:0 0 32px;& .treeRoot{box-sizing:border-box;padding:36px 0 0;min-width:200px;}& .dropTarget{background:var(--mdc-theme-background);}& .draggingSource{opacity:0.5;}& .placeholderContainer{position:relative;}");
+exports.Container = Container;

package/components/Tree/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Container = styled(\"div\")`\n    position: relative;\n    margin: 0 0 32px;\n\n    & .treeRoot {\n        box-sizing: border-box;\n        padding: 36px 0 0;\n        min-width: 200px;\n    }\n\n    & .dropTarget {\n        background: var(--mdc-theme-background);\n    }\n\n    & .draggingSource {\n        opacity: 0.5;\n    }\n\n    & .placeholderContainer {\n        position: relative;\n    }\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAEO,IAAMA,SAAS,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,4OAAf"}

package/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Dialogs";
+export * from "./Tree";