@webiny/app-aco 5.43.2-beta.0 → 6.0.0-alpha.0

package/components/FolderTree/Node/Node.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { Text, Tree } from "@webiny/admin-ui";
+import { ReactComponent as Folder } from "@webiny/icons/folder.svg";
+import { ReactComponent as FolderShared } from "@webiny/icons/folder_shared.svg";
+import { ReactComponent as HomeIcon } from "@webiny/icons/home.svg";
+import { MenuActions } from "../MenuActions";
+import { ROOT_FOLDER } from "../../../constants";
+import { useFolder } from "../../../hooks";
+export const FolderNode = ({
+  isRoot,
+  hasNonInheritedPermissions,
+  canManagePermissions,
+  text
+}) => {
+  let icon = /*#__PURE__*/React.createElement(HomeIcon, null);
+  if (!isRoot) {
+    if (hasNonInheritedPermissions && canManagePermissions) {
+      icon = /*#__PURE__*/React.createElement(FolderShared, null);
+    } else {
+      icon = /*#__PURE__*/React.createElement(Folder, null);
+    }
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tree.Item.Icon, {
+    label: "Folder",
+    element: icon
+  }), /*#__PURE__*/React.createElement(Text, {
+    as: "div",
+    className: "wby-truncate"
+  }, text));
+};
+export const Node = ({
+  enableActions
+}) => {
+  const {
+    folder
+  } = useFolder();
+  const {
+    hasNonInheritedPermissions,
+    canManagePermissions,
+    title,
+    id
+  } = folder || {};
+  const isRoot = id === ROOT_FOLDER;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FolderNode, {
+    isRoot: isRoot,
+    text: title,
+    hasNonInheritedPermissions: hasNonInheritedPermissions,
+    canManagePermissions: canManagePermissions
+  }), enableActions && !isRoot && /*#__PURE__*/React.createElement(MenuActions, null));
+};
+
+//# sourceMappingURL=Node.js.map

package/components/FolderTree/Node/Node.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","Tree","ReactComponent","Folder","FolderShared","HomeIcon","MenuActions","ROOT_FOLDER","useFolder","FolderNode","isRoot","hasNonInheritedPermissions","canManagePermissions","text","icon","createElement","Fragment","Item","Icon","label","element","as","className","Node","enableActions","folder","title","id"],"sources":["Node.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text, Tree } from \"@webiny/admin-ui\";\nimport { ReactComponent as Folder } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as FolderShared } from \"@webiny/icons/folder_shared.svg\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { MenuActions } from \"../MenuActions\";\nimport { ROOT_FOLDER } from \"~/constants\";\nimport { useFolder } from \"~/hooks\";\n\ninterface FolderProps {\n    text: string;\n    isRoot: boolean;\n    hasNonInheritedPermissions?: boolean;\n    canManagePermissions?: boolean;\n}\n\nexport const FolderNode = ({\n    isRoot,\n    hasNonInheritedPermissions,\n    canManagePermissions,\n    text\n}: FolderProps) => {\n    let icon = <HomeIcon />;\n\n    if (!isRoot) {\n        if (hasNonInheritedPermissions && canManagePermissions) {\n            icon = <FolderShared />;\n        } else {\n            icon = <Folder />;\n        }\n    }\n\n    return (\n        <>\n            <Tree.Item.Icon label={\"Folder\"} element={icon} />\n            <Text as={\"div\"} className={\"wby-truncate\"}>\n                {text}\n            </Text>\n        </>\n    );\n};\n\ntype NodeProps = {\n    enableActions?: boolean;\n};\n\nexport const Node = ({ enableActions }: NodeProps) => {\n    const { folder } = useFolder();\n\n    const { hasNonInheritedPermissions, canManagePermissions, title, id } = folder || {};\n    const isRoot = id === ROOT_FOLDER;\n\n    return (\n        <>\n            <FolderNode\n                isRoot={isRoot}\n                text={title}\n                hasNonInheritedPermissions={hasNonInheritedPermissions}\n                canManagePermissions={canManagePermissions}\n            />\n            {enableActions && !isRoot && <MenuActions />}\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,cAAc,IAAIC,MAAM,QAAQ,0BAA0B;AACnE,SAASD,cAAc,IAAIE,YAAY,QAAQ,iCAAiC;AAChF,SAASF,cAAc,IAAIG,QAAQ,QAAQ,wBAAwB;AACnE,SAASC,WAAW;AACpB,SAASC,WAAW;AACpB,SAASC,SAAS;AASlB,OAAO,MAAMC,UAAU,GAAGA,CAAC;EACvBC,MAAM;EACNC,0BAA0B;EAC1BC,oBAAoB;EACpBC;AACS,CAAC,KAAK;EACf,IAAIC,IAAI,gBAAGf,KAAA,CAAAgB,aAAA,CAACV,QAAQ,MAAE,CAAC;EAEvB,IAAI,CAACK,MAAM,EAAE;IACT,IAAIC,0BAA0B,IAAIC,oBAAoB,EAAE;MACpDE,IAAI,gBAAGf,KAAA,CAAAgB,aAAA,CAACX,YAAY,MAAE,CAAC;IAC3B,CAAC,MAAM;MACHU,IAAI,gBAAGf,KAAA,CAAAgB,aAAA,CAACZ,MAAM,MAAE,CAAC;IACrB;EACJ;EAEA,oBACIJ,KAAA,CAAAgB,aAAA,CAAAhB,KAAA,CAAAiB,QAAA,qBACIjB,KAAA,CAAAgB,aAAA,CAACd,IAAI,CAACgB,IAAI,CAACC,IAAI;IAACC,KAAK,EAAE,QAAS;IAACC,OAAO,EAAEN;EAAK,CAAE,CAAC,eAClDf,KAAA,CAAAgB,aAAA,CAACf,IAAI;IAACqB,EAAE,EAAE,KAAM;IAACC,SAAS,EAAE;EAAe,GACtCT,IACC,CACR,CAAC;AAEX,CAAC;AAMD,OAAO,MAAMU,IAAI,GAAGA,CAAC;EAAEC;AAAyB,CAAC,KAAK;EAClD,MAAM;IAAEC;EAAO,CAAC,GAAGjB,SAAS,CAAC,CAAC;EAE9B,MAAM;IAAEG,0BAA0B;IAAEC,oBAAoB;IAAEc,KAAK;IAAEC;EAAG,CAAC,GAAGF,MAAM,IAAI,CAAC,CAAC;EACpF,MAAMf,MAAM,GAAGiB,EAAE,KAAKpB,WAAW;EAEjC,oBACIR,KAAA,CAAAgB,aAAA,CAAAhB,KAAA,CAAAiB,QAAA,qBACIjB,KAAA,CAAAgB,aAAA,CAACN,UAAU;IACPC,MAAM,EAAEA,MAAO;IACfG,IAAI,EAAEa,KAAM;IACZf,0BAA0B,EAAEA,0BAA2B;IACvDC,oBAAoB,EAAEA;EAAqB,CAC9C,CAAC,EACDY,aAAa,IAAI,CAACd,MAAM,iBAAIX,KAAA,CAAAgB,aAAA,CAACT,WAAW,MAAE,CAC7C,CAAC;AAEX,CAAC","ignoreList":[]}

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

@@ -1,24 +1 @@
-import React from "react";
-import { NodeModel } from "@minoru/react-dnd-treeview";
-import { DndFolderItemData, FolderItem } from "../../../types";
-type NodeProps = {
-    node: NodeModel<DndFolderItemData>;
-    depth: number;
-    isOpen: boolean;
-    isLoading?: boolean;
-    enableActions?: boolean;
-    onToggle: (id: string | number) => void;
-    onClick: (data: FolderItem) => void;
-};
-type FolderProps = {
-    text: string;
-    isRoot: boolean;
-    isOpen: boolean;
-    isFocused?: boolean;
-    isLoading?: boolean;
-    hasNonInheritedPermissions?: boolean;
-    canManagePermissions?: boolean;
-};
-export declare const FolderNode: ({ isRoot, isFocused, hasNonInheritedPermissions, canManagePermissions, text }: FolderProps) => React.JSX.Element;
-export declare const Node: ({ node, depth, isOpen, enableActions, onToggle, onClick, isLoading }: NodeProps) => React.JSX.Element;
-export {};
+export * from "./Node";

package/components/FolderTree/Node/index.js

@@ -1,121 +1,3 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Node = exports.FolderNode = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _arrow_right = require("@material-symbols/svg-400/rounded/arrow_right.svg");
-var _folderFill = require("@material-symbols/svg-400/rounded/folder-fill.svg");
-var _folder_sharedFill = require("@material-symbols/svg-400/rounded/folder_shared-fill.svg");
-var _home = require("@material-design-icons/svg/filled/home.svg");
-var _reactDndTreeview = require("@minoru/react-dnd-treeview");
-var _MenuActions = require("../MenuActions");
-var _styled = require("./styled");
-var _utils = require("@webiny/utils");
-var _constants = require("../../../constants");
-var _hooks = require("../../../hooks");
-var _Progress = require("@webiny/ui/Progress");
-var FolderNode = exports.FolderNode = function FolderNode(_ref) {
-  var isRoot = _ref.isRoot,
-    isFocused = _ref.isFocused,
-    hasNonInheritedPermissions = _ref.hasNonInheritedPermissions,
-    canManagePermissions = _ref.canManagePermissions,
-    text = _ref.text;
-  var icon = /*#__PURE__*/_react.default.createElement(_home.ReactComponent, null);
-  if (!isRoot) {
-    if (hasNonInheritedPermissions && canManagePermissions) {
-      icon = /*#__PURE__*/_react.default.createElement(_folder_sharedFill.ReactComponent, null);
-    } else {
-      icon = /*#__PURE__*/_react.default.createElement(_folderFill.ReactComponent, null);
-    }
-  }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.FolderIcon, null, icon), /*#__PURE__*/_react.default.createElement(_styled.Text, {
-    className: isFocused ? "focused" : "",
-    use: "body2"
-  }, text));
-};
-var FolderIndicator = function FolderIndicator(_ref2) {
-  var isLoading = _ref2.isLoading,
-    isOpen = _ref2.isOpen,
-    onToggle = _ref2.onToggle;
-  var _useFolder = (0, _hooks.useFolder)(),
-    folder = _useFolder.folder;
-  var isRoot = folder.id === _constants.ROOT_FOLDER;
-  var handleToggle = function handleToggle(e) {
-    e.stopPropagation();
-    onToggle(folder.id);
-  };
-  if (isRoot) {
-    return null;
-  }
-  if (isLoading) {
-    return /*#__PURE__*/_react.default.createElement(_styled.LoaderContainer, null, /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
-      size: 12,
-      spinnerWidth: 2,
-      spinnerColor: "#d9d9d9",
-      style: {
-        background: "transparent"
-      }
-    }));
-  }
-  return /*#__PURE__*/_react.default.createElement(_styled.ArrowIcon, {
-    isOpen: isOpen,
-    onClick: handleToggle
-  }, /*#__PURE__*/_react.default.createElement(_arrow_right.ReactComponent, null));
-};
-var Node = exports.Node = function Node(_ref3) {
-  var node = _ref3.node,
-    depth = _ref3.depth,
-    isOpen = _ref3.isOpen,
-    enableActions = _ref3.enableActions,
-    onToggle = _ref3.onToggle,
-    onClick = _ref3.onClick,
-    isLoading = _ref3.isLoading;
-  var _useFolder2 = (0, _hooks.useFolder)(),
-    folder = _useFolder2.folder;
-  var isRoot = folder.id === _constants.ROOT_FOLDER;
-  // 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 === 1 ? 4 : (depth - 1) * 20 + 8;
-  var dragOverProps = (0, _reactDndTreeview.useDragOver)(folder.id, isOpen, onToggle);
-  var handleClick = function handleClick(e) {
-    e.stopPropagation();
-    if (folder.id !== _constants.ROOT_FOLDER) {
-      onToggle(folder.id);
-    }
-    onClick(folder);
-  };
-  var id = (0, _react.useMemo)(function () {
-    var _parseIdentifier = (0, _utils.parseIdentifier)(String(folder.id)),
-      id = _parseIdentifier.id;
-    return id;
-  }, [folder.id]);
-  var _ref4 = folder || {},
-    hasNonInheritedPermissions = _ref4.hasNonInheritedPermissions,
-    canManagePermissions = _ref4.canManagePermissions;
-  return /*#__PURE__*/_react.default.createElement(_styled.Container, Object.assign({
-    isFocused: !!node.data?.isFocused,
-    isLoading: isLoading,
-    style: {
-      paddingInlineStart: indent
-    }
-  }, dragOverProps), /*#__PURE__*/_react.default.createElement(FolderIndicator, {
-    isLoading: isLoading,
-    isOpen: isOpen,
-    onToggle: onToggle
-  }), /*#__PURE__*/_react.default.createElement(_styled.Content, {
-    onClick: handleClick,
-    className: "aco-folder-".concat(id)
-  }, /*#__PURE__*/_react.default.createElement(FolderNode, {
-    isRoot: isRoot,
-    text: node.text,
-    hasNonInheritedPermissions: hasNonInheritedPermissions,
-    canManagePermissions: canManagePermissions,
-    isOpen: isRoot ? true : isOpen,
-    isFocused: !!node.data?.isFocused
-  })), enableActions && !isRoot && /*#__PURE__*/_react.default.createElement(_MenuActions.MenuActions, null));
-};
+export * from "./Node";
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_arrow_right","_folderFill","_folder_sharedFill","_home","_reactDndTreeview","_MenuActions","_styled","_utils","_constants","_hooks","_Progress","FolderNode","exports","_ref","isRoot","isFocused","hasNonInheritedPermissions","canManagePermissions","text","icon","default","createElement","ReactComponent","Fragment","FolderIcon","Text","className","use","FolderIndicator","_ref2","isLoading","isOpen","onToggle","_useFolder","useFolder","folder","id","ROOT_FOLDER","handleToggle","e","stopPropagation","LoaderContainer","CircularProgress","size","spinnerWidth","spinnerColor","style","background","ArrowIcon","onClick","Node","_ref3","node","depth","enableActions","_useFolder2","indent","dragOverProps","useDragOver","handleClick","useMemo","_parseIdentifier","parseIdentifier","String","_ref4","Container","Object","assign","data","paddingInlineStart","Content","concat","MenuActions"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ReactComponent as ArrowRight } from \"@material-symbols/svg-400/rounded/arrow_right.svg\";\nimport { ReactComponent as Folder } from \"@material-symbols/svg-400/rounded/folder-fill.svg\";\nimport { ReactComponent as FolderShared } from \"@material-symbols/svg-400/rounded/folder_shared-fill.svg\";\nimport { ReactComponent as HomeIcon } from \"@material-design-icons/svg/filled/home.svg\";\nimport { NodeModel, useDragOver } from \"@minoru/react-dnd-treeview\";\nimport { MenuActions } from \"../MenuActions\";\nimport { Container, ArrowIcon, FolderIcon, Text, Content, LoaderContainer } from \"./styled\";\nimport { DndFolderItemData, FolderItem } from \"~/types\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport { ROOT_FOLDER } from \"~/constants\";\nimport { useFolder } from \"~/hooks\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\n\ntype NodeProps = {\n    node: NodeModel<DndFolderItemData>;\n    depth: number;\n    isOpen: boolean;\n    isLoading?: boolean;\n    enableActions?: boolean;\n    onToggle: (id: string | number) => void;\n    onClick: (data: FolderItem) => void;\n};\n\ntype FolderProps = {\n    text: string;\n    isRoot: boolean;\n    isOpen: boolean;\n    isFocused?: boolean;\n    isLoading?: boolean;\n    hasNonInheritedPermissions?: boolean;\n    canManagePermissions?: boolean;\n};\n\nexport const FolderNode = ({\n    isRoot,\n    isFocused,\n    hasNonInheritedPermissions,\n    canManagePermissions,\n    text\n}: FolderProps) => {\n    let icon = <HomeIcon />;\n\n    if (!isRoot) {\n        if (hasNonInheritedPermissions && canManagePermissions) {\n            icon = <FolderShared />;\n        } else {\n            icon = <Folder />;\n        }\n    }\n\n    return (\n        <>\n            <FolderIcon>{icon}</FolderIcon>\n            <Text className={isFocused ? \"focused\" : \"\"} use={\"body2\"}>\n                {text}\n            </Text>\n        </>\n    );\n};\n\ntype FolderIndicatorProps = Pick<NodeProps, \"isLoading\" | \"isOpen\" | \"onToggle\">;\n\nconst FolderIndicator = ({ isLoading, isOpen, onToggle }: FolderIndicatorProps) => {\n    const { folder } = useFolder();\n    const isRoot = folder.id === ROOT_FOLDER;\n\n    const handleToggle = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        onToggle(folder.id);\n    };\n\n    if (isRoot) {\n        return null;\n    }\n\n    if (isLoading) {\n        return (\n            <LoaderContainer>\n                <CircularProgress\n                    size={12}\n                    spinnerWidth={2}\n                    spinnerColor={\"#d9d9d9\"}\n                    style={{ background: \"transparent\" }}\n                />\n            </LoaderContainer>\n        );\n    }\n\n    return (\n        <ArrowIcon isOpen={isOpen} onClick={handleToggle}>\n            <ArrowRight />\n        </ArrowIcon>\n    );\n};\n\nexport const Node = ({\n    node,\n    depth,\n    isOpen,\n    enableActions,\n    onToggle,\n    onClick,\n    isLoading\n}: NodeProps) => {\n    const { folder } = useFolder();\n    const isRoot = folder.id === ROOT_FOLDER;\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 === 1 ? 4 : (depth - 1) * 20 + 8;\n\n    const dragOverProps = useDragOver(folder.id, isOpen, onToggle);\n\n    const handleClick = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        if (folder.id !== ROOT_FOLDER) {\n            onToggle(folder.id);\n        }\n        onClick(folder);\n    };\n\n    const id = useMemo(() => {\n        const { id } = parseIdentifier(String(folder.id));\n        return id;\n    }, [folder.id]);\n\n    const { hasNonInheritedPermissions, canManagePermissions } = folder || {};\n\n    return (\n        <Container\n            isFocused={!!node.data?.isFocused}\n            isLoading={isLoading}\n            style={{ paddingInlineStart: indent }}\n            {...dragOverProps}\n        >\n            <FolderIndicator isLoading={isLoading} isOpen={isOpen} onToggle={onToggle} />\n            <Content onClick={handleClick} className={`aco-folder-${id}`}>\n                <FolderNode\n                    isRoot={isRoot}\n                    text={node.text}\n                    hasNonInheritedPermissions={hasNonInheritedPermissions}\n                    canManagePermissions={canManagePermissions}\n                    isOpen={isRoot ? true : isOpen}\n                    isFocused={!!node.data?.isFocused}\n                />\n            </Content>\n            {enableActions && !isRoot && <MenuActions />}\n        </Container>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Node\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/FolderTree/NodePreview/NodePreview.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type NodePreviewProps = {
+    text: string;
+};
+export declare const NodePreview: ({ text }: NodePreviewProps) => React.JSX.Element;
+export {};

package/components/FolderTree/NodePreview/NodePreview.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Tree } from "@webiny/admin-ui";
+import { FolderNode } from "../Node";
+export const NodePreview = ({
+  text
+}) => {
+  return /*#__PURE__*/React.createElement(Tree.Item, {
+    className: "wby-bg-neutral-dark/10 wby-absolute wby-z-[100]",
+    style: {
+      maxWidth: 256
+    }
+  }, /*#__PURE__*/React.createElement(FolderNode, {
+    text: text,
+    isRoot: false
+  }));
+};
+
+//# sourceMappingURL=NodePreview.js.map

package/components/FolderTree/NodePreview/NodePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Tree","FolderNode","NodePreview","text","createElement","Item","className","style","maxWidth","isRoot"],"sources":["NodePreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tree } from \"@webiny/admin-ui\";\nimport { FolderNode } from \"../Node\";\n\ntype NodePreviewProps = {\n    text: string;\n};\n\nexport const NodePreview = ({ text }: NodePreviewProps) => {\n    return (\n        <Tree.Item\n            className={\"wby-bg-neutral-dark/10 wby-absolute wby-z-[100]\"}\n            style={{ maxWidth: 256 }}\n        >\n            <FolderNode text={text} isRoot={false} />\n        </Tree.Item>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,UAAU;AAMnB,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EACvD,oBACIJ,KAAA,CAAAK,aAAA,CAACJ,IAAI,CAACK,IAAI;IACNC,SAAS,EAAE,iDAAkD;IAC7DC,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAEzBT,KAAA,CAAAK,aAAA,CAACH,UAAU;IAACE,IAAI,EAAEA,IAAK;IAACM,MAAM,EAAE;EAAM,CAAE,CACjC,CAAC;AAEpB,CAAC","ignoreList":[]}

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

@@ -1,8 +1 @@
-import React from "react";
-import { DragLayerMonitorProps } from "@minoru/react-dnd-treeview";
-import { DndFolderItemData } from "../../../types";
-type NodePreviewProps = {
-    monitorProps: DragLayerMonitorProps<DndFolderItemData>;
-};
-export declare const NodePreview: (props: NodePreviewProps) => React.JSX.Element;
-export {};
+export * from "./NodePreview";

package/components/FolderTree/NodePreview/index.js

@@ -1,20 +1,3 @@
-"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 = exports.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,
-    isRoot: false
-  }));
-};
+export * from "./NodePreview";
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Node","_styled","NodePreview","exports","props","item","monitorProps","default","createElement","Container","FolderNode","text","isOpen","isRoot"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { DragLayerMonitorProps } from \"@minoru/react-dnd-treeview\";\n\nimport { FolderNode } from \"../Node\";\nimport { Container } from \"./styled\";\n\nimport { DndFolderItemData } from \"~/types\";\n\ntype NodePreviewProps = {\n    monitorProps: DragLayerMonitorProps<DndFolderItemData>;\n};\n\nexport const NodePreview = (props: NodePreviewProps) => {\n    const item = props.monitorProps.item;\n\n    return (\n        <Container>\n            <FolderNode text={item.text} isOpen={false} isRoot={false} />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAQO,IAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAIE,KAAuB,EAAK;EACpD,IAAMC,IAAI,GAAGD,KAAK,CAACE,YAAY,CAACD,IAAI;EAEpC,oBACIR,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,OAAA,CAAAQ,SAAS,qBACNZ,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,KAAA,CAAAU,UAAU;IAACC,IAAI,EAAEN,IAAI,CAACM,IAAK;IAACC,MAAM,EAAE,KAAM;IAACC,MAAM,EAAE;EAAM,CAAE,CACrD,CAAC;AAEpB,CAAC","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./NodePreview\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/FolderTree/index.js

@@ -1,78 +1,63 @@
-"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;
-Object.defineProperty(exports, "Loader", {
-  enumerable: true,
-  get: function get() {
-    return _Loader.Loader;
-  }
-});
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _Tooltip = require("@webiny/ui/Tooltip");
-var _features = require("../../features");
-var _ButtonCreate = require("./ButtonCreate");
-var _Loader = require("./Loader");
-var _List = require("./List");
-var _styled = require("./styled");
-var _constants = require("../../constants");
-var _config = require("../../config");
-var FolderTree = exports.FolderTree = function FolderTree(_ref) {
-  var focusedFolderId = _ref.focusedFolderId,
-    hiddenFolderIds = _ref.hiddenFolderIds,
-    enableActions = _ref.enableActions,
-    enableCreate = _ref.enableCreate,
-    onFolderClick = _ref.onFolderClick,
-    rootFolderLabel = _ref.rootFolderLabel;
-  var _useGetFolderHierarch = (0, _features.useGetFolderHierarchy)(),
-    folders = _useGetFolderHierarch.folders,
-    getIsFolderLoading = _useGetFolderHierarch.getIsFolderLoading;
-  var _useGetFolderLevelPer = (0, _features.useGetFolderLevelPermission)("canManageStructure"),
-    canManageStructure = _useGetFolderLevelPer.getFolderLevelPermission;
-  var localFolders = (0, _react.useMemo)(function () {
+import React, { useMemo } from "react";
+import { Tooltip } from "@webiny/admin-ui";
+import { useGetFolderHierarchy, useGetFolderLevelPermission } from "../../features";
+import { ButtonCreate } from "./ButtonCreate";
+import { Loader } from "./Loader";
+import { List } from "./List";
+import { ROOT_FOLDER } from "../../constants";
+import { AcoWithConfig } from "../../config";
+export { Loader };
+export const FolderTree = ({
+  focusedFolderId,
+  hiddenFolderIds,
+  enableActions,
+  enableCreate,
+  onFolderClick,
+  rootFolderLabel
+}) => {
+  const {
+    folders,
+    getIsFolderLoading
+  } = useGetFolderHierarchy();
+  const {
+    getFolderLevelPermission: canManageStructure
+  } = useGetFolderLevelPermission("canManageStructure");
+  const localFolders = useMemo(() => {
     if (!folders) {
       return [];
     }
-    return folders.reduce(function (acc, item) {
-      if (item.id === _constants.ROOT_FOLDER && rootFolderLabel) {
-        return [].concat((0, _toConsumableArray2.default)(acc), [(0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-          title: rootFolderLabel
-        })]);
-      }
-      return [].concat((0, _toConsumableArray2.default)(acc), [item]);
-    }, []);
-  }, [folders]);
-  var renderList = function renderList() {
-    if (getIsFolderLoading()) {
-      return /*#__PURE__*/_react.default.createElement(_Loader.Loader, null);
+    return folders.map(item => item.id === ROOT_FOLDER && rootFolderLabel ? {
+      ...item,
+      title: rootFolderLabel
+    } : item);
+  }, [folders, rootFolderLabel]);
+  const createButton = useMemo(() => {
+    if (!enableCreate) {
+      return null;
     }
-    var createButton = null;
-    if (enableCreate) {
-      var canCreate = canManageStructure(focusedFolderId);
-      createButton = /*#__PURE__*/_react.default.createElement(_ButtonCreate.CreateButton, {
-        disabled: !canCreate
-      });
-      if (!canCreate) {
-        createButton = /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-          content: "Cannot create folder because you're not an owner."
-        }, createButton);
-      }
-    }
-    return /*#__PURE__*/_react.default.createElement(_config.AcoWithConfig, null, /*#__PURE__*/_react.default.createElement(_List.List, {
-      folders: localFolders,
-      onFolderClick: onFolderClick,
-      focusedFolderId: focusedFolderId,
-      hiddenFolderIds: hiddenFolderIds,
-      enableActions: enableActions
-    }), enableCreate && createButton);
-  };
-  return /*#__PURE__*/_react.default.createElement(_styled.Container, null, renderList());
+    const canCreate = canManageStructure(focusedFolderId);
+    const button = /*#__PURE__*/React.createElement(ButtonCreate, {
+      disabled: !canCreate
+    });
+    return canCreate ? button : /*#__PURE__*/React.createElement(Tooltip, {
+      content: `Cannot create folder because you're not an owner.`,
+      trigger: button
+    });
+  }, [enableCreate, canManageStructure, focusedFolderId, localFolders]);
+  if (getIsFolderLoading()) {
+    return /*#__PURE__*/React.createElement(Loader, null);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-my-xs"
+  }, /*#__PURE__*/React.createElement(AcoWithConfig, null, /*#__PURE__*/React.createElement(List, {
+    folders: localFolders,
+    onFolderClick: onFolderClick,
+    focusedFolderId: focusedFolderId,
+    hiddenFolderIds: hiddenFolderIds,
+    enableActions: enableActions
+  }), enableCreate && /*#__PURE__*/React.createElement("div", {
+    className: "wby-m-xs-plus wby-mt-sm-plus wby-mb-lg wby-pl-sm-extra"
+  }, createButton)));
 };
 
 //# sourceMappingURL=index.js.map

package/components/FolderTree/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_Tooltip","_features","_ButtonCreate","_Loader","_List","_styled","_constants","_config","FolderTree","exports","_ref","focusedFolderId","hiddenFolderIds","enableActions","enableCreate","onFolderClick","rootFolderLabel","_useGetFolderHierarch","useGetFolderHierarchy","folders","getIsFolderLoading","_useGetFolderLevelPer","useGetFolderLevelPermission","canManageStructure","getFolderLevelPermission","localFolders","useMemo","reduce","acc","item","id","ROOT_FOLDER","concat","_toConsumableArray2","default","_objectSpread2","title","renderList","createElement","Loader","createButton","canCreate","CreateButton","disabled","Tooltip","content","AcoWithConfig","List","Container"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { useGetFolderHierarchy, useGetFolderLevelPermission } from \"~/features\";\nimport { CreateButton } from \"./ButtonCreate\";\nimport { Loader } from \"./Loader\";\nimport { List } from \"./List\";\nimport { Container } from \"./styled\";\nimport { FolderItem } from \"~/types\";\nimport { ROOT_FOLDER } from \"~/constants\";\nimport { AcoWithConfig } from \"~/config\";\n\nexport { Loader };\n\nexport interface FolderTreeProps {\n    onFolderClick: (data: FolderItem) => void;\n    enableCreate?: boolean;\n    rootFolderLabel?: string;\n    enableActions?: boolean;\n    focusedFolderId?: string;\n    hiddenFolderIds?: string[];\n}\n\nexport const FolderTree = ({\n    focusedFolderId,\n    hiddenFolderIds,\n    enableActions,\n    enableCreate,\n    onFolderClick,\n    rootFolderLabel\n}: FolderTreeProps) => {\n    const { folders, getIsFolderLoading } = useGetFolderHierarchy();\n    const { getFolderLevelPermission: canManageStructure } =\n        useGetFolderLevelPermission(\"canManageStructure\");\n\n    const localFolders = useMemo(() => {\n        if (!folders) {\n            return [];\n        }\n\n        return folders.reduce<FolderItem[]>((acc, item) => {\n            if (item.id === ROOT_FOLDER && rootFolderLabel) {\n                return [...acc, { ...item, title: rootFolderLabel }];\n            }\n            return [...acc, item];\n        }, []);\n    }, [folders]);\n\n    const renderList = () => {\n        if (getIsFolderLoading()) {\n            return <Loader />;\n        }\n\n        let createButton = null;\n        if (enableCreate) {\n            const canCreate = canManageStructure(focusedFolderId!);\n\n            createButton = <CreateButton disabled={!canCreate} />;\n\n            if (!canCreate) {\n                createButton = (\n                    <Tooltip content={`Cannot create folder because you're not an owner.`}>\n                        {createButton}\n                    </Tooltip>\n                );\n            }\n        }\n\n        return (\n            <AcoWithConfig>\n                <List\n                    folders={localFolders}\n                    onFolderClick={onFolderClick}\n                    focusedFolderId={focusedFolderId}\n                    hiddenFolderIds={hiddenFolderIds}\n                    enableActions={enableActions}\n                />\n                {enableCreate && createButton}\n            </AcoWithConfig>\n        );\n    };\n    return <Container>{renderList()}</Container>;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","Tooltip","useGetFolderHierarchy","useGetFolderLevelPermission","ButtonCreate","Loader","List","ROOT_FOLDER","AcoWithConfig","FolderTree","focusedFolderId","hiddenFolderIds","enableActions","enableCreate","onFolderClick","rootFolderLabel","folders","getIsFolderLoading","getFolderLevelPermission","canManageStructure","localFolders","map","item","id","title","createButton","canCreate","button","createElement","disabled","content","trigger","className"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Tooltip } from \"@webiny/admin-ui\";\nimport { useGetFolderHierarchy, useGetFolderLevelPermission } from \"~/features\";\nimport { ButtonCreate } from \"./ButtonCreate\";\nimport { Loader } from \"./Loader\";\nimport { List } from \"./List\";\nimport { FolderItem } from \"~/types\";\nimport { ROOT_FOLDER } from \"~/constants\";\nimport { AcoWithConfig } from \"~/config\";\n\nexport { Loader };\n\nexport interface FolderTreeProps {\n    onFolderClick: (data: FolderItem) => void;\n    enableCreate?: boolean;\n    rootFolderLabel?: string;\n    enableActions?: boolean;\n    focusedFolderId?: string;\n    hiddenFolderIds?: string[];\n}\n\nexport const FolderTree = ({\n    focusedFolderId,\n    hiddenFolderIds,\n    enableActions,\n    enableCreate,\n    onFolderClick,\n    rootFolderLabel\n}: FolderTreeProps) => {\n    const { folders, getIsFolderLoading } = useGetFolderHierarchy();\n    const { getFolderLevelPermission: canManageStructure } =\n        useGetFolderLevelPermission(\"canManageStructure\");\n\n    const localFolders = useMemo(() => {\n        if (!folders) {\n            return [];\n        }\n\n        return folders.map(item =>\n            item.id === ROOT_FOLDER && rootFolderLabel ? { ...item, title: rootFolderLabel } : item\n        );\n    }, [folders, rootFolderLabel]);\n\n    const createButton = useMemo(() => {\n        if (!enableCreate) {\n            return null;\n        }\n\n        const canCreate = canManageStructure(focusedFolderId!);\n        const button = <ButtonCreate disabled={!canCreate} />;\n\n        return canCreate ? (\n            button\n        ) : (\n            <Tooltip\n                content={`Cannot create folder because you're not an owner.`}\n                trigger={button}\n            />\n        );\n    }, [enableCreate, canManageStructure, focusedFolderId, localFolders]);\n\n    if (getIsFolderLoading()) {\n        return <Loader />;\n    }\n\n    return (\n        <div className=\"wby-my-xs\">\n            <AcoWithConfig>\n                <List\n                    folders={localFolders}\n                    onFolderClick={onFolderClick}\n                    focusedFolderId={focusedFolderId}\n                    hiddenFolderIds={hiddenFolderIds}\n                    enableActions={enableActions}\n                />\n                {enableCreate && (\n                    <div className={\"wby-m-xs-plus wby-mt-sm-plus wby-mb-lg wby-pl-sm-extra\"}>\n                        {createButton}\n                    </div>\n                )}\n            </AcoWithConfig>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,qBAAqB,EAAEC,2BAA2B;AAC3D,SAASC,YAAY;AACrB,SAASC,MAAM;AACf,SAASC,IAAI;AAEb,SAASC,WAAW;AACpB,SAASC,aAAa;AAEtB,SAASH,MAAM;AAWf,OAAO,MAAMI,UAAU,GAAGA,CAAC;EACvBC,eAAe;EACfC,eAAe;EACfC,aAAa;EACbC,YAAY;EACZC,aAAa;EACbC;AACa,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO;IAAEC;EAAmB,CAAC,GAAGf,qBAAqB,CAAC,CAAC;EAC/D,MAAM;IAAEgB,wBAAwB,EAAEC;EAAmB,CAAC,GAClDhB,2BAA2B,CAAC,oBAAoB,CAAC;EAErD,MAAMiB,YAAY,GAAGpB,OAAO,CAAC,MAAM;IAC/B,IAAI,CAACgB,OAAO,EAAE;MACV,OAAO,EAAE;IACb;IAEA,OAAOA,OAAO,CAACK,GAAG,CAACC,IAAI,IACnBA,IAAI,CAACC,EAAE,KAAKhB,WAAW,IAAIQ,eAAe,GAAG;MAAE,GAAGO,IAAI;MAAEE,KAAK,EAAET;IAAgB,CAAC,GAAGO,IACvF,CAAC;EACL,CAAC,EAAE,CAACN,OAAO,EAAED,eAAe,CAAC,CAAC;EAE9B,MAAMU,YAAY,GAAGzB,OAAO,CAAC,MAAM;IAC/B,IAAI,CAACa,YAAY,EAAE;MACf,OAAO,IAAI;IACf;IAEA,MAAMa,SAAS,GAAGP,kBAAkB,CAACT,eAAgB,CAAC;IACtD,MAAMiB,MAAM,gBAAG5B,KAAA,CAAA6B,aAAA,CAACxB,YAAY;MAACyB,QAAQ,EAAE,CAACH;IAAU,CAAE,CAAC;IAErD,OAAOA,SAAS,GACZC,MAAM,gBAEN5B,KAAA,CAAA6B,aAAA,CAAC3B,OAAO;MACJ6B,OAAO,EAAE,mDAAoD;MAC7DC,OAAO,EAAEJ;IAAO,CACnB,CACJ;EACL,CAAC,EAAE,CAACd,YAAY,EAAEM,kBAAkB,EAAET,eAAe,EAAEU,YAAY,CAAC,CAAC;EAErE,IAAIH,kBAAkB,CAAC,CAAC,EAAE;IACtB,oBAAOlB,KAAA,CAAA6B,aAAA,CAACvB,MAAM,MAAE,CAAC;EACrB;EAEA,oBACIN,KAAA,CAAA6B,aAAA;IAAKI,SAAS,EAAC;EAAW,gBACtBjC,KAAA,CAAA6B,aAAA,CAACpB,aAAa,qBACVT,KAAA,CAAA6B,aAAA,CAACtB,IAAI;IACDU,OAAO,EAAEI,YAAa;IACtBN,aAAa,EAAEA,aAAc;IAC7BJ,eAAe,EAAEA,eAAgB;IACjCC,eAAe,EAAEA,eAAgB;IACjCC,aAAa,EAAEA;EAAc,CAChC,CAAC,EACDC,YAAY,iBACTd,KAAA,CAAA6B,aAAA;IAAKI,SAAS,EAAE;EAAyD,GACpEP,YACA,CAEE,CACd,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/Search/Search.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 interface SearchProps {
     value: string;
     onChange: (value: string) => void;
+    placeholder?: string;
 }
-export declare const Search: ({ value, onChange }: SearchProps) => React.JSX.Element;
+export declare const Search: ({ value, onChange, placeholder }: SearchProps) => React.JSX.Element;
 export {};

package/components/Search/Search.js

@@ -1,20 +1,23 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Search = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _SearchUI = _interopRequireDefault(require("@webiny/app-admin/components/SearchUI"));
-var _styled = require("./styled");
-var Search = exports.Search = function Search(_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange;
-  return /*#__PURE__*/_react.default.createElement(_styled.SearchWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchUI.default, {
+import React from "react";
+import { Icon, Input } from "@webiny/admin-ui";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+export const Search = ({
+  value,
+  onChange,
+  placeholder
+}) => {
+  return /*#__PURE__*/React.createElement(Input, {
     value: value,
-    onChange: onChange
-  }));
+    onChange: onChange,
+    placeholder: placeholder,
+    size: "md",
+    variant: "ghost",
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      label: "Search",
+      icon: /*#__PURE__*/React.createElement(SearchIcon, null)
+    }),
+    className: "wby-w-full"
+  });
 };
 
 //# sourceMappingURL=Search.js.map

package/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_SearchUI","_styled","Search","exports","_ref","value","onChange","default","createElement","SearchWrapper"],"sources":["Search.tsx"],"sourcesContent":["import React from \"react\";\nimport SearchUI from \"@webiny/app-admin/components/SearchUI\";\n\nimport { SearchWrapper } from \"./styled\";\n\ninterface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n}\n\nexport const Search = ({ value, onChange }: SearchProps) => {\n    return (\n        <SearchWrapper>\n            <SearchUI value={value} onChange={onChange} />\n        </SearchWrapper>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AAOO,IAAMG,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,SAATA,MAAMA,CAAAE,IAAA,EAAyC;EAAA,IAAnCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EACpC,oBACIT,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,OAAA,CAAAQ,aAAa,qBACVZ,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,SAAA,CAAAO,OAAQ;IAACF,KAAK,EAAEA,KAAM;IAACC,QAAQ,EAAEA;EAAS,CAAE,CAClC,CAAC;AAExB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Icon","Input","ReactComponent","SearchIcon","Search","value","onChange","placeholder","createElement","size","variant","startIcon","label","icon","className"],"sources":["Search.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Input } from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\n\ninterface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    placeholder?: string;\n}\n\nexport const Search = ({ value, onChange, placeholder }: SearchProps) => {\n    return (\n        <Input\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            size={\"md\"}\n            variant={\"ghost\"}\n            startIcon={<Icon label={\"Search\"} icon={<SearchIcon />} />}\n            className={\"wby-w-full\"}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAC9C,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AAQvE,OAAO,MAAMC,MAAM,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAyB,CAAC,KAAK;EACrE,oBACIR,KAAA,CAAAS,aAAA,CAACP,KAAK;IACFI,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBC,WAAW,EAAEA,WAAY;IACzBE,IAAI,EAAE,IAAK;IACXC,OAAO,EAAE,OAAQ;IACjBC,SAAS,eAAEZ,KAAA,CAAAS,aAAA,CAACR,IAAI;MAACY,KAAK,EAAE,QAAS;MAACC,IAAI,eAAEd,KAAA,CAAAS,aAAA,CAACL,UAAU,MAAE;IAAE,CAAE,CAAE;IAC3DW,SAAS,EAAE;EAAa,CAC3B,CAAC;AAEV,CAAC","ignoreList":[]}

package/components/Search/index.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Search = require("./Search");
-Object.keys(_Search).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Search[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Search[key];
-    }
-  });
-});
+export * from "./Search";
 
 //# sourceMappingURL=index.js.map

package/components/Search/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Search","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.tsx"],"sourcesContent":["export * from \"./Search\";\n"],"mappings":";;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./Search\";\n"],"mappings":"AAAA","ignoreList":[]}