@bigbinary/neeto-folders-frontend 2.0.37 → 2.0.38

package/dist/cjs/v2/components.js

@@ -0,0 +1,1855 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var shallow = require('zustand/shallow');
+var neetoAtoms = require('@bigbinary/neeto-atoms');
+var reactQuery = require('@tanstack/react-query');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
+var utils$1 = require('@bigbinary/neeto-commons-frontend/v2/utils');
+var reactI18next = require('react-i18next');
+var reactRouterDom = require('react-router-dom');
+var useFolderActions = require('../../useFolderActions-D7U62Qea.js');
+var injectCss = require('../../inject-css-D3Ee0dJK.js');
+var constants = require('../constants.js');
+var utils = require('../../index-Dn0REquw.js');
+var internal = require('../../internal-DKHdgJas.js');
+var jsxRuntime = require('react/jsx-runtime');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var formik = require('@bigbinary/neeto-atoms/formik');
+var i18next = require('i18next');
+var yup = require('yup');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var useHotkeys = require('@bigbinary/neeto-hotkeys');
+var neetoCist = require('@bigbinary/neeto-cist');
+var ramda = require('ramda');
+var classNames = require('classnames');
+var core = require('@dnd-kit/core');
+var lucideReact = require('lucide-react');
+var reactDom = require('react-dom');
+var modifiers = require('@dnd-kit/modifiers');
+var MoreDropdown = require('@bigbinary/neeto-molecules/v2/MoreDropdown');
+var reactUtils$1 = require('@bigbinary/neeto-commons-frontend/react-utils');
+var utils$2 = require('@bigbinary/neeto-commons-frontend/utils');
+var Tree = require('@bigbinary/neetoui/Tree');
+var Typography = require('@bigbinary/neetoui/Typography');
+var formik$1 = require('formik');
+var NUITreeSelect = require('@bigbinary/neetoui/formik/TreeSelect');
+require('zustand');
+require('@bigbinary/neetoui/Toastr');
+
+function ownKeys$k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FoldersAlerts = function FoldersAlerts(_ref) {
+  var config = _ref.config;
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      return {
+        setFolderState: store["setFolderState"]
+      };
+    }, shallow.shallow),
+    setFolderState = _useFolderStore.setFolderState;
+  var queryParams = reactUtils.useQueryParams({
+    toCamelCase: false
+  });
+  var queryClient = reactQuery.useQueryClient();
+  var history = reactRouterDom.useHistory();
+  var _useTranslation = injectCss.useTranslation(config),
+    t = _useTranslation.t;
+  var _useFolderStore2 = useFolderActions.useFolderStore(function (store) {
+      var _store$alertState, _store$alertState2;
+      return {
+        type: (_store$alertState = store["alertState"]) === null || _store$alertState === void 0 ? void 0 : _store$alertState["type"],
+        item: (_store$alertState2 = store["alertState"]) === null || _store$alertState2 === void 0 ? void 0 : _store$alertState2["item"]
+      };
+    }, shallow.shallow),
+    type = _useFolderStore2.type,
+    item = _useFolderStore2.item;
+  var _useDestroyFolder = useFolderActions.useDestroyFolder(config),
+    destroyFolder = _useDestroyFolder.mutateAsync,
+    isPending = _useDestroyFolder.isPending;
+  var _useFolders = useFolderActions.useFolders(config),
+    folders = _useFolders.folders;
+  var onClose = function onClose() {
+    return setFolderState({
+      alertState: null
+    });
+  };
+  var alertProps = {
+    isOpen: !!type,
+    isSubmitting: isPending,
+    onClose: onClose
+  };
+  var onConfirmDelete = function onConfirmDelete() {
+    var onSuccess = function onSuccess() {
+      var _config$onUpdateSucce;
+      var isActive = internal.isActiveFolder(config, item.sid);
+      // Invalidates items and folder details. Refetch only if not active folder.
+      var invalidationKeys = [].concat(_toConsumableArray(config.invalidationKeys), [[constants.QUERY_KEYS.FOLDERS, config.type, constants.QUERY_KEYS.DETAILS]]);
+      invalidationKeys.forEach(function (queryKey) {
+        queryClient.invalidateQueries({
+          refetchType: isActive ? "none" : "active",
+          queryKey: queryKey
+        });
+      });
+      if (isActive && folders) {
+        var path = utils.pathToFolder(folders, item.id);
+        var parent = path[path.length - 2];
+        var redirectUrl = parent ? utils$1.buildUrl(config.folderPath, _objectSpread$k(_objectSpread$k({}, queryParams), {}, {
+          folderId: parent.sid
+        })) : "/";
+        history.replace(redirectUrl);
+      }
+      (_config$onUpdateSucce = config.onUpdateSuccess) === null || _config$onUpdateSucce === void 0 || _config$onUpdateSucce.call(config);
+    };
+    destroyFolder(item.id, {
+      onSuccess: onSuccess,
+      onSettled: onClose
+    });
+  };
+  if (type === "delete") {
+    alertProps.title = t("deleteFolder.title");
+    alertProps.message = /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+      i18nKey: "deleteFolder.info",
+      values: item
+    });
+    if (config.customizeAlerts) config.customizeAlerts(type, item, alertProps);
+    alertProps.onSubmit = onConfirmDelete;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Alert, _objectSpread$k({}, alertProps));
+};
+
+var FORM_VALIDATION_SCHEMA = yup.object().shape({
+  name: yup.string().required(i18next.t("errors.blank", {
+    entity: i18next.t("common.name")
+  }))
+});
+
+var _excluded$7 = ["type"];
+function ownKeys$j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var typeComponentMap = {
+  string: formik.Input,
+  "boolean": formik.Switch,
+  textarea: formik.Textarea
+};
+var ExtraAttributes = function ExtraAttributes(_ref) {
+  var attributes = _ref.attributes;
+  if (!Array.isArray(attributes)) return null;
+  return attributes.map(function (_ref2) {
+    var type = _ref2.type,
+      rest = _objectWithoutProperties(_ref2, _excluded$7);
+    var Component = typeComponentMap[type];
+    if (!Component) return null;
+    return /*#__PURE__*/React.createElement(Component, _objectSpread$j(_objectSpread$j({}, rest), {}, {
+      key: rest.name
+    }));
+  });
+};
+
+var createInitialValues = function createInitialValues(defaults, extraAttrs) {
+  var values = {
+    name: "",
+    parentId: defaults.parentId || null
+  };
+  extraAttrs === null || extraAttrs === void 0 || extraAttrs.forEach(function (_ref) {
+    var name = _ref.name,
+      defaultValue = _ref.defaultValue;
+    values[name] = defaultValue;
+  });
+  return values;
+};
+var createPayload = function createPayload(values, extraAttrs) {
+  var payload = {
+    name: values.name,
+    parentId: values.parentId || ""
+  };
+  extraAttrs === null || extraAttrs === void 0 || extraAttrs.forEach(function (_ref2) {
+    var name = _ref2.name;
+    payload[name] = values[name];
+  });
+  return payload;
+};
+var filterExtraAttributes = function filterExtraAttributes(attributes, isEditing) {
+  if (!attributes || !Array.isArray(attributes)) return [];
+  return attributes.filter(function (attribute) {
+    if (isEditing) {
+      return attribute.isEditAttribute !== false;
+    }
+    return attribute.isCreateAttribute !== false;
+  });
+};
+
+var AddEditPane = function AddEditPane(_ref) {
+  var _config$addEditValida;
+  var setFocusField = _ref.setFocusField,
+    config = _ref.config,
+    onClose = _ref.onClose,
+    folderSid = _ref.folderSid;
+  var _useTranslation = injectCss.useTranslation(config),
+    t = _useTranslation.t;
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      var _store$paneState, _store$paneState2;
+      return {
+        type: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["type"],
+        item: (_store$paneState2 = store["paneState"]) === null || _store$paneState2 === void 0 ? void 0 : _store$paneState2["item"]
+      };
+    }, shallow.shallow),
+    type = _useFolderStore.type,
+    item = _useFolderStore.item;
+  var _useFolderStore2 = useFolderActions.useFolderStore(function (store) {
+      return {
+        setFolderState: store["setFolderState"]
+      };
+    }, shallow.shallow),
+    setFolderState = _useFolderStore2.setFolderState;
+  var _useFetchFolders = useFolderActions.useFetchFolders(config),
+    isFetching = _useFetchFolders.isFetching;
+  var _useCreateFolder = useFolderActions.useCreateFolder(config),
+    createFolder = _useCreateFolder.mutate;
+  var _useUpdateFolder = useFolderActions.useUpdateFolder(config),
+    updateFolder = _useUpdateFolder.mutateAsync;
+  var isEditing = type === "edit" && item;
+  var activeFolderSid = folderSid || internal.getActiveFolderId(config);
+  var extraAttributes = config.extraAttributes;
+  var filteredExtraAttributes = React.useMemo(function () {
+    return filterExtraAttributes(extraAttributes, isEditing);
+  }, [extraAttributes, isEditing]);
+  var handleError = function handleError(setStatus, error) {
+    var response = error.response;
+    if (response && response.data && response.data.errors) {
+      setStatus(response.data.errors);
+    }
+  };
+  var onSubmitForm = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values, _ref2) {
+      var setStatus, payload, reactQueryOptions, config;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setStatus = _ref2.setStatus;
+            payload = createPayload(values, filteredExtraAttributes);
+            reactQueryOptions = {
+              onSuccess: function onSuccess(_ref4) {
+                var id = _ref4.id,
+                  sid = _ref4.sid;
+                if (isEditing && sid !== item.sid) {
+                  var newPath = window.location.pathname.replace(activeFolderSid, sid);
+                  window.location.href = newPath;
+                } else if (!isEditing) {
+                  setFolderState({
+                    lastCreatedFolderId: id
+                  });
+                }
+                utils$1.showThumbsUpToastr();
+                onClose();
+              },
+              onError: function onError(error) {
+                return handleError(setStatus, error);
+              }
+            };
+            config = {
+              showToastr: false
+            };
+            if (!isEditing) {
+              _context.next = 9;
+              break;
+            }
+            _context.next = 7;
+            return updateFolder({
+              id: item.id,
+              payload: payload,
+              config: config,
+              initialSlug: item.sid
+            }, reactQueryOptions);
+          case 7:
+            _context.next = 11;
+            break;
+          case 9:
+            _context.next = 11;
+            return createFolder({
+              payload: payload,
+              config: config
+            }, reactQueryOptions);
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onSubmitForm(_x, _x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var initialValues = React.useMemo(function () {
+    return isEditing ? item : createInitialValues({}, filteredExtraAttributes);
+  }, [isEditing, item, filteredExtraAttributes]);
+  if (isFetching) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Title, {
+        children: isEditing ? t("folders.edit") : t("folders.add")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(formik.Form, {
+      className: "flex flex-grow flex-col",
+      formikProps: {
+        initialValues: initialValues,
+        enableReinitialize: true,
+        validationSchema: ((_config$addEditValida = config.addEditValidationSchema) === null || _config$addEditValida === void 0 ? void 0 : _config$addEditValida.call(config, isEditing)) || FORM_VALIDATION_SCHEMA,
+        onSubmit: onSubmitForm
+      },
+      children: function children(_ref5) {
+        var dirty = _ref5.dirty;
+        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+            className: "pb-6",
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "w-full space-y-5",
+              children: [/*#__PURE__*/jsxRuntime.jsx(formik.Input, {
+                required: true,
+                label: t("folders.name"),
+                name: "name",
+                ref: setFocusField
+              }), /*#__PURE__*/jsxRuntime.jsx(ExtraAttributes, {
+                attributes: filteredExtraAttributes
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                children: [/*#__PURE__*/jsxRuntime.jsx(TreeSelect, {
+                  config: config,
+                  allowClear: true,
+                  showSearch: true,
+                  initialValue: folderSid,
+                  label: t("createFolder.parentTitle"),
+                  name: "parentId"
+                }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+                  className: "mt-1",
+                  variant: "body3",
+                  children: t("createFolder.parentInfo")
+                })]
+              })]
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Footer, {
+            children: /*#__PURE__*/jsxRuntime.jsx(formik.ActionBlock, {
+              cancelButtonProps: {
+                onClick: onClose
+              },
+              submitButtonProps: {
+                disabled: !dirty
+              }
+            })
+          })]
+        });
+      }
+    })]
+  });
+};
+
+var _excluded$6 = ["icon", "itemLabel", "folder", "folderLabel", "depth", "hideTreeIndent", "className", "onClick"];
+function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Node$1 = function Node(_ref, ref) {
+  var _folder$children$leng, _folder$children;
+  var _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    itemLabel = _ref.itemLabel,
+    folder = _ref.folder,
+    folderLabel = _ref.folderLabel,
+    depth = _ref.depth,
+    _ref$hideTreeIndent = _ref.hideTreeIndent,
+    hideTreeIndent = _ref$hideTreeIndent === void 0 ? false : _ref$hideTreeIndent,
+    className = _ref.className,
+    onClick = _ref.onClick,
+    rest = _objectWithoutProperties(_ref, _excluded$6);
+  var metaInfo = [];
+  var childCount = (_folder$children$leng = (_folder$children = folder.children) === null || _folder$children === void 0 ? void 0 : _folder$children.length) !== null && _folder$children$leng !== void 0 ? _folder$children$leng : 0;
+  childCount > 0 && metaInfo.push("".concat(childCount, " ").concat(folderLabel).toLowerCase());
+  folder.itemCount > 0 && metaInfo.push("".concat(folder.itemCount, " ").concat(itemLabel).toLowerCase());
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex w-full min-w-0",
+    children: [!hideTreeIndent && Array.from({
+      length: depth + 1
+    }).map(function (_, index) {
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "neeto-ui-border-gray-400 relative h-full flex-shrink-0 border-s",
+        style: {
+          width: injectCss.REORDER_TREE_INDENT_WIDTH,
+          insetInlineStart: Math.round(injectCss.REORDER_TREE_INDENT_WIDTH / 2)
+        },
+        children: index === depth && /*#__PURE__*/jsxRuntime.jsx("span", {
+          "aria-hidden": true,
+          className: "neeto-ui-border-gray-400 absolute border-t",
+          style: {
+            insetInlineStart: 0,
+            top: "50%",
+            width: Math.round(injectCss.REORDER_TREE_INDENT_WIDTH / 2)
+          }
+        })
+      }, index);
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$i(_objectSpread$i({}, _objectSpread$i(_objectSpread$i({}, rest), {}, {
+      onClick: onClick,
+      ref: ref
+    })), {}, {
+      "data-testid": "".concat(neetoCist.hyphenate(folder.name), "-folder-node"),
+      className: classNames("relative my-1 flex cursor-pointer items-center px-2 py-1", className),
+      children: [icon, /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "ms-2 flex items-baseline gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          variant: "body1",
+          weight: "medium",
+          children: folder.name
+        }), metaInfo.length > 0 && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          className: "neeto-ui-text-gray-500",
+          variant: "body3",
+          weight: "normal",
+          children: metaInfo.join(" . ")
+        })]
+      })]
+    }))]
+  });
+};
+var Node$2 = /*#__PURE__*/React.forwardRef(Node$1);
+
+var _excluded$5 = ["folder", "item", "depth", "maxDepth", "disabled", "config"];
+function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _SelectableNode = function SelectableNode(_ref) {
+  var _folder$children$leng, _folder$children;
+  var folder = _ref.folder,
+    item = _ref.item,
+    _ref$depth = _ref.depth,
+    depth = _ref$depth === void 0 ? 0 : _ref$depth,
+    maxDepth = _ref.maxDepth,
+    disabled = _ref.disabled,
+    config = _ref.config,
+    rest = _objectWithoutProperties(_ref, _excluded$5);
+  var selection = rest.selection,
+    onSelect = rest.onSelect;
+  var _useTranslation = injectCss.useTranslation(config),
+    t = _useTranslation.t;
+  var isDisabled = disabled || (item === null || item === void 0 ? void 0 : item.id) === folder.id || depth >= maxDepth;
+  var itemLabel = config.labels[folder.itemCount > 1 ? "items" : "item"];
+  var folderLabel = config.labels[((_folder$children$leng = (_folder$children = folder.children) === null || _folder$children === void 0 ? void 0 : _folder$children.length) !== null && _folder$children$leng !== void 0 ? _folder$children$leng : 0) > 1 ? "folders" : "folder"];
+  var renderChildren = function renderChildren() {
+    if (neetoCist.isNotPresent(folder.children)) return null;
+    return folder.children.map(function (child) {
+      return /*#__PURE__*/React.createElement(_SelectableNode, _objectSpread$h(_objectSpread$h({}, _objectSpread$h(_objectSpread$h({}, rest), {}, {
+        config: config,
+        item: item,
+        maxDepth: maxDepth
+      })), {}, {
+        depth: depth + 1,
+        disabled: isDisabled,
+        folder: child,
+        key: child.id
+      }));
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    "aria-disabled": isDisabled,
+    title: isDisabled ? t("moveToFolder.notAllowed") : undefined,
+    className: classNames("flex flex-col w-full min-w-0", {
+      "opacity-60": isDisabled
+    }),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$h(_objectSpread$h({}, _objectSpread$h(_objectSpread$h({}, rest), {}, {
+      depth: depth,
+      folder: folder,
+      folderLabel: folderLabel,
+      itemLabel: itemLabel
+    })), {}, {
+      icon: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.RadioGroup.Item, {
+        readOnly: true,
+        checked: selection === folder.id,
+        className: "neeto-ui-radio__container",
+        "data-testid": "".concat(neetoCist.hyphenate(folder.name), "-folder-option"),
+        name: "move-folder-option"
+      }),
+      onClick: isDisabled ? neetoCist.noop : function () {
+        return onSelect(folder);
+      }
+    })), renderChildren()]
+  });
+};
+
+function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var createTree = function createTree(folders, isRootEnabled) {
+  return isRootEnabled ? [{
+    name: "/",
+    id: null,
+    children: folders
+  }] : folders;
+};
+var PaneBody = function PaneBody(_ref) {
+  var _ref$isRootEnabled = _ref.isRootEnabled,
+    isRootEnabled = _ref$isRootEnabled === void 0 ? true : _ref$isRootEnabled,
+    item = _ref.item,
+    config = _ref.config,
+    submitButtonProps = _ref.submitButtonProps,
+    cancelButtonProps = _ref.cancelButtonProps,
+    removeButtonProps = _ref.removeButtonProps,
+    onSubmit = _ref.onSubmit,
+    onClose = _ref.onClose,
+    onRemove = _ref.onRemove,
+    parentId = _ref.parentId;
+  var parent = (item === null || item === void 0 ? void 0 : item.parentId) || parentId || null;
+  var _useState = React.useState(parent),
+    _useState2 = _slicedToArray(_useState, 2),
+    selection = _useState2[0],
+    setSelection = _useState2[1];
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      return {
+        setFolderState: store["setFolderState"]
+      };
+    }, shallow.shallow),
+    setFolderState = _useFolderStore.setFolderState;
+  var _useFetchFolders = useFolderActions.useFetchFolders(config),
+    _useFetchFolders$data = _useFetchFolders.data,
+    folders = _useFetchFolders$data === void 0 ? [] : _useFetchFolders$data,
+    isFetching = _useFetchFolders.isFetching;
+  var _useTranslation = injectCss.useTranslation(config),
+    t = _useTranslation.t;
+  var _useFolderStore2 = useFolderActions.useFolderStore(function (store) {
+      var _store$paneState;
+      return {
+        type: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["type"]
+      };
+    }, shallow.shallow),
+    type = _useFolderStore2.type;
+  var tree = React.useMemo(function () {
+    return createTree(folders, isRootEnabled);
+  }, [folders, isRootEnabled]);
+  var maxDepth = Number.POSITIVE_INFINITY;
+  if (item) {
+    // If item is a folder, measure the current depth from current folder to longest leaf.
+    var foldersMap = utils.treeToMap(folders);
+    var folder = foldersMap[item.id];
+    if (folder) {
+      var folderDepth = utils.measureDepth(folder) + 1; // +1 for own depth;
+      maxDepth = config.maxDepth - folderDepth;
+      if (isRootEnabled) maxDepth += 1; // +1 for root folder.
+    }
+  }
+  var onAddFolder = function onAddFolder() {
+    setFolderState({
+      paneState: {
+        type: "add",
+        item: null
+      }
+    });
+  };
+  var _useFolderStore3 = useFolderActions.useFolderStore(function (store) {
+      var _store$lastCreatedFol;
+      return {
+        lastCreatedFolderId: (_store$lastCreatedFol = store["lastCreatedFolderId"]) === null || _store$lastCreatedFol === void 0 ? void 0 : _store$lastCreatedFol["lastCreatedFolderId"]
+      };
+    }, shallow.shallow),
+    lastCreatedFolderId = _useFolderStore3.lastCreatedFolderId;
+  React.useEffect(function () {
+    if (lastCreatedFolderId == null) return;
+    setSelection(lastCreatedFolderId);
+    setFolderState({
+      lastCreatedFolderId: null
+    });
+  }, [lastCreatedFolderId]);
+  useHotkeys(["command+enter", "enter"], function () {
+    return onSubmit(selection);
+  }, {
+    mode: "global",
+    enabled: !!type
+  });
+  if (isFetching) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet.Header, {
+      className: "flex items-center justify-between",
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Title, {
+        children: t("moveToFolder.title")
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        className: "me-2",
+        "data-testid": "add-new-folder-button",
+        label: t("folders.add"),
+        variant: "link",
+        onClick: onAddFolder
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+      className: "pb-6",
+      children: tree.map(function (folder) {
+        return /*#__PURE__*/React.createElement(_SelectableNode, {
+          config: config,
+          folder: folder,
+          item: item,
+          maxDepth: maxDepth,
+          selection: selection,
+          disabled: (item === null || item === void 0 ? void 0 : item.id) === folder.id || maxDepth <= 0,
+          key: folder.id,
+          onSelect: function onSelect(folder) {
+            return setSelection(folder.id);
+          }
+        });
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet.Footer, {
+      className: "space-x-2",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-1 space-x-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, _objectSpread$g(_objectSpread$g({
+          label: t("common.save"),
+          variant: "default",
+          onClick: function onClick() {
+            return onSubmit(selection);
+          }
+        }, submitButtonProps), {}, {
+          "data-testid": "save-changes-button",
+          disabled: selection === parent || (submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disabled)
+        })), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, _objectSpread$g(_objectSpread$g({
+          label: t("common.cancel"),
+          variant: "ghost",
+          onClick: onClose
+        }, cancelButtonProps), {}, {
+          "data-testid": "cancel-button"
+        }))]
+      }), onRemove && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, _objectSpread$g(_objectSpread$g({
+        label: t("moveToFolder.remove"),
+        variant: "outline",
+        onClick: onRemove
+      }, removeButtonProps), {}, {
+        "data-testid": "remove-from-folder-button"
+      }))]
+    })]
+  });
+};
+
+var MoveFolderPane = function MoveFolderPane(_ref) {
+  var config = _ref.config,
+    onClose = _ref.onClose;
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      var _store$paneState;
+      return {
+        item: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["item"]
+      };
+    }, shallow.shallow),
+    item = _useFolderStore.item;
+  var _useUpdateFolder = useFolderActions.useUpdateFolder(config),
+    isPending = _useUpdateFolder.isPending,
+    updateFolder = _useUpdateFolder.mutate;
+  var onSaveSelection = function onSaveSelection(parentId) {
+    var payload = {
+      id: item.id,
+      parentId: parentId
+    };
+    updateFolder({
+      id: item.id,
+      payload: payload,
+      config: {
+        showToastr: false
+      }
+    }, {
+      onSuccess: function onSuccess() {
+        var _config$onUpdateSucce;
+        onClose();
+        (_config$onUpdateSucce = config.onUpdateSuccess) === null || _config$onUpdateSucce === void 0 || _config$onUpdateSucce.call(config);
+      },
+      onError: internal.toastApiError
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(PaneBody, {
+    config: config,
+    item: item,
+    onClose: onClose,
+    submitButtonProps: {
+      loading: isPending,
+      disabled: isPending
+    },
+    onSubmit: onSaveSelection
+  });
+};
+
+var _excluded$4 = ["folder", "depth", "config", "folderLabel", "itemLabel"];
+function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _DraggableNode$1 = function DraggableNode(_ref) {
+  var folder = _ref.folder,
+    _ref$depth = _ref.depth,
+    depth = _ref$depth === void 0 ? 0 : _ref$depth,
+    config = _ref.config,
+    folderLabel = _ref.folderLabel,
+    itemLabel = _ref.itemLabel,
+    rest = _objectWithoutProperties(_ref, _excluded$4);
+  var _useDraggable = core.useDraggable({
+      id: "draggable-item--".concat(folder.id),
+      data: folder,
+      disabled: depth <= 0
+    }),
+    isDragging = _useDraggable.isDragging,
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    setDraggableRef = _useDraggable.setNodeRef;
+  var _useDroppable = core.useDroppable({
+      id: "droppable-item--".concat(folder.id),
+      data: folder,
+      disabled: isDragging
+    }),
+    isOver = _useDroppable.isOver,
+    setDroppableRef = _useDroppable.setNodeRef;
+  var renderChildren = function renderChildren() {
+    if (neetoCist.isNotPresent(folder.children) || isDragging) return null;
+    return folder.children.map(function (child) {
+      var _child$children$lengt, _child$children;
+      return /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$f(_objectSpread$f({}, _objectSpread$f(_objectSpread$f({}, rest), {}, {
+        config: config
+      })), {}, {
+        depth: depth + 1,
+        folder: child,
+        itemLabel: config.labels[(child === null || child === void 0 ? void 0 : child.itemCount) > 1 ? "items" : "item"],
+        key: child.id,
+        folderLabel: config.labels[((_child$children$lengt = child === null || child === void 0 || (_child$children = child.children) === null || _child$children === void 0 ? void 0 : _child$children.length) !== null && _child$children$lengt !== void 0 ? _child$children$lengt : 0) > 1 ? "folders" : "folder"]
+      }));
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$f(_objectSpread$f(_objectSpread$f({}, rest), {}, {
+      className: classNames({
+        "neeto-ui-rounded-lg hover:neeto-ui-bg-gray-100 w-full min-w-0 cursor-move transition-colors": true,
+        "neeto-ui-bg-gray-100 opacity-50": isDragging,
+        "neeto-ui-border-primary-500 border": isOver,
+        "border border-transparent": !isOver
+      })
+    }, _objectSpread$f(_objectSpread$f(_objectSpread$f({
+      depth: depth,
+      folder: folder
+    }, attributes), listeners), {}, {
+      folderLabel: folderLabel,
+      itemLabel: itemLabel
+    })), {}, {
+      ref: function ref(_ref2) {
+        setDroppableRef(_ref2);
+        setDraggableRef(_ref2);
+      }
+    })), renderChildren()]
+  });
+};
+
+function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
+  var _tree$children$length, _tree$children, _dragItem$children$le, _dragItem$children;
+  var config = _ref.config,
+    onClose = _ref.onClose;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragItem = _useState2[0],
+    setDragItem = _useState2[1];
+  var _useState3 = React.useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    changes = _useState4[0],
+    setChanges = _useState4[1];
+  var _useTranslation = injectCss.useTranslation(config),
+    t = _useTranslation.t;
+  var _useFetchFolders = useFolderActions.useFetchFolders(config),
+    folders = _useFetchFolders.data,
+    isFetching = _useFetchFolders.isFetching;
+  var _useReorderFolders = useFolderActions.useReorderFolders(config),
+    reorderFolders = _useReorderFolders.mutate;
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      var _store$paneState;
+      return {
+        type: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["type"]
+      };
+    }, shallow.shallow),
+    type = _useFolderStore.type;
+  var _useStateWithDependen = reactUtils.useStateWithDependency(function () {
+      return {
+        name: "/",
+        id: null,
+        children: folders
+      };
+    }, [folders]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    tree = _useStateWithDependen2[0],
+    setTree = _useStateWithDependen2[1];
+  var onDragEnd = function onDragEnd(_ref2) {
+    var _activeFolder$meta$pa;
+    var active = _ref2.active,
+      over = _ref2.over;
+    setDragItem(null);
+    if (!over) return;
+    var foldersMap = utils.treeToMap(tree);
+    var activeFolder = foldersMap[active.data.current.id];
+    var overFolder = foldersMap[over.data.current.id];
+
+    // Check moving inside same directory
+    if (((_activeFolder$meta$pa = activeFolder.meta.parent) === null || _activeFolder$meta$pa === void 0 ? void 0 : _activeFolder$meta$pa.id) === overFolder.id) return;
+
+    // Check moving to a folder with depth greater than the allowed limit.
+    // maxDepth + 1 due to extra root node added for the tree
+    var activeDepth = utils.measureDepth(activeFolder);
+    var overDepth = overFolder.meta.depth;
+    if (activeDepth + overDepth >= config.maxDepth + 1) {
+      neetoAtoms.Toastr.error(t("moveToFolder.depthExceeded", {
+        maxDepth: config.maxDepth
+      }));
+      return;
+    }
+    activeFolder.meta.parent = overFolder;
+    var newTree = utils.mapToTree(foldersMap);
+    setTree(newTree);
+    setChanges(ramda.assoc(activeFolder.id, overFolder.id));
+  };
+  var onSubmit = function onSubmit() {
+    var payload = {
+      changes: changes
+    };
+    reorderFolders(payload, {
+      onSuccess: function onSuccess() {
+        var _config$onUpdateSucce;
+        onClose();
+        (_config$onUpdateSucce = config.onUpdateSuccess) === null || _config$onUpdateSucce === void 0 || _config$onUpdateSucce.call(config);
+      }
+    });
+  };
+  useHotkeys(["command+enter", "enter"], onSubmit, {
+    mode: "global",
+    enabled: !!type
+  });
+  var nodeProps = {
+    icon: /*#__PURE__*/jsxRuntime.jsx(lucideReact.GripVertical, {
+      className: "neeto-ui-text-gray-500 relative -start-[0.3125rem] flex-shrink-0"
+    })
+  };
+  if (isFetching) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Title, {
+        children: t("reorderFolder.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, {
+      onDragEnd: onDragEnd,
+      onDragStart: function onDragStart(_ref3) {
+        var active = _ref3.active;
+        return setDragItem(active.data.current);
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+        className: "pb-6",
+        children: /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$e(_objectSpread$e({}, _objectSpread$e(_objectSpread$e({}, nodeProps), {}, {
+          config: config
+        })), {}, {
+          folder: tree,
+          itemLabel: config.labels[(tree === null || tree === void 0 ? void 0 : tree.itemCount) > 1 ? "items" : "item"],
+          key: tree.id,
+          folderLabel: config.labels[((_tree$children$length = tree === null || tree === void 0 || (_tree$children = tree.children) === null || _tree$children === void 0 ? void 0 : _tree$children.length) !== null && _tree$children$length !== void 0 ? _tree$children$length : 0) > 1 ? "folders" : "folder"]
+        }))
+      }), /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet.Footer, {
+        className: "gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          disabled: ramda.isEmpty(changes),
+          label: t("common.save"),
+          variant: "default",
+          onClick: onSubmit
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          label: t("common.cancel"),
+          variant: "ghost",
+          onClick: onClose
+        })]
+      }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
+        zIndex: 99999,
+        children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$e(_objectSpread$e({
+          hideTreeIndent: true
+        }, nodeProps), {}, {
+          className: "neeto-ui-bg-gray-200",
+          depth: 0,
+          folder: dragItem,
+          folderLabel: config.labels[((_dragItem$children$le = dragItem === null || dragItem === void 0 || (_dragItem$children = dragItem.children) === null || _dragItem$children === void 0 ? void 0 : _dragItem$children.length) !== null && _dragItem$children$le !== void 0 ? _dragItem$children$le : 0) > 1 ? "folders" : "folder"],
+          itemLabel: config.labels[(dragItem === null || dragItem === void 0 ? void 0 : dragItem.itemCount) > 1 ? "items" : "item"]
+        }))
+      }), document.body)]
+    })]
+  });
+};
+
+var PlaceholderNode = function PlaceholderNode(_ref) {
+  var folder = _ref.folder,
+    dragState = _ref.dragState;
+  var overItem = dragState.overItem;
+  var id = React.useId();
+  var isOver = id === (overItem === null || overItem === void 0 ? void 0 : overItem.id);
+  var depth = folder.meta.depth + 1;
+  var meta = {
+    parent: folder,
+    index: -1,
+    depth: depth
+  };
+  var _useDroppable = core.useDroppable({
+      id: "droppable-placeholder--".concat(folder.name),
+      data: {
+        id: id,
+        meta: meta
+      }
+    }),
+    setDroppableRef = _useDroppable.setNodeRef;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex w-full",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      style: {
+        width: injectCss.REORDER_TREE_INDENT_WIDTH * (depth + 1)
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: setDroppableRef,
+      className: classNames({
+        "min-w-0 flex-1 transition-colors": true,
+        "neeto-ui-border-primary-500 border-b-2": isOver
+      })
+    })]
+  });
+};
+
+var _excluded$3 = ["folder", "config", "dragState", "folderLabel", "itemLabel"];
+function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _DraggableNode = function DraggableNode(_ref) {
+  var _overItem$meta$parent;
+  var folder = _ref.folder,
+    config = _ref.config,
+    dragState = _ref.dragState,
+    folderLabel = _ref.folderLabel,
+    itemLabel = _ref.itemLabel,
+    rest = _objectWithoutProperties(_ref, _excluded$3);
+  var overItem = dragState.overItem;
+  var isOverItem = folder.id === (overItem === null || overItem === void 0 ? void 0 : overItem.id);
+  var isOverParent = folder.id === (overItem === null || overItem === void 0 || (_overItem$meta$parent = overItem.meta.parent) === null || _overItem$meta$parent === void 0 ? void 0 : _overItem$meta$parent.id);
+  var isRoot = folder.meta.depth <= 0;
+  var _useDraggable = core.useDraggable({
+      id: "draggable-item--".concat(folder.id),
+      data: folder,
+      disabled: isRoot
+    }),
+    isDragging = _useDraggable.isDragging,
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    setDraggableRef = _useDraggable.setNodeRef;
+  var _useDroppable = core.useDroppable({
+      id: "droppable-item--".concat(folder.id),
+      data: folder,
+      disabled: isRoot || isDragging
+    }),
+    setDroppableRef = _useDroppable.setNodeRef;
+  var renderChildren = function renderChildren() {
+    if (isDragging) return null;
+    return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(PlaceholderNode, {
+        dragState: dragState,
+        folder: folder
+      }), internal.isArray(folder.children) && folder.children.map(function (child) {
+        var _child$children$lengt, _child$children;
+        return /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$d(_objectSpread$d({}, _objectSpread$d(_objectSpread$d({}, rest), {}, {
+          config: config,
+          dragState: dragState
+        })), {}, {
+          depth: child.meta.depth,
+          folder: child,
+          itemLabel: config.labels[(child === null || child === void 0 ? void 0 : child.itemCount) > 1 ? "items" : "item"],
+          key: child.id,
+          folderLabel: config.labels[((_child$children$lengt = child === null || child === void 0 || (_child$children = child.children) === null || _child$children === void 0 ? void 0 : _child$children.length) !== null && _child$children$lengt !== void 0 ? _child$children$lengt : 0) > 1 ? "folders" : "folder"]
+        }));
+      })]
+    }, "".concat(folder.id, "--container"));
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$d(_objectSpread$d({
+      depth: folder.meta.depth
+    }, _objectSpread$d(_objectSpread$d(_objectSpread$d(_objectSpread$d({}, rest), {}, {
+      folder: folder
+    }, attributes), listeners), {}, {
+      folderLabel: folderLabel,
+      itemLabel: itemLabel
+    })), {}, {
+      className: classNames({
+        "hover:neeto-ui-bg-gray-100 w-full cursor-move transition-colors": true,
+        "neeto-ui-bg-gray-100 opacity-50": isDragging,
+        "neeto-ui-bg-primary-50": isOverParent,
+        "neeto-ui-border-primary-500 border-b-2": isOverItem
+      }),
+      ref: function ref(_ref2) {
+        setDroppableRef(_ref2);
+        setDraggableRef(_ref2);
+      }
+    })), renderChildren()]
+  });
+};
+
+function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var initialDragState = {
+  activeItem: null,
+  overItem: null
+};
+var sensorConfig$1 = {
+  activationConstraint: {
+    distance: 8
+  }
+};
+var measuringConfig = {
+  droppable: {
+    frequency: 500
+  }
+};
+
+// Reorder with support for position adjustment
+var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
+  var _tree$children$length, _tree$children, _dragState$activeItem, _dragState$activeItem2, _dragState$activeItem3;
+  var config = _ref.config,
+    onClose = _ref.onClose;
+  var _useState = React.useState(initialDragState),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragState = _useState2[0],
+    setDragState = _useState2[1];
+  var _useState3 = React.useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    changes = _useState4[0],
+    setChanges = _useState4[1];
+  var _useTranslation = injectCss.useTranslation(config),
+    t = _useTranslation.t;
+  var _useFetchFolders = useFolderActions.useFetchFolders(config),
+    folders = _useFetchFolders.data,
+    isFetching = _useFetchFolders.isFetching;
+  var _useReorderFolders = useFolderActions.useReorderFolders(config),
+    reorderFolders = _useReorderFolders.mutate;
+  var sensors = core.useSensors(core.useSensor(core.PointerSensor, sensorConfig$1));
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      var _store$paneState;
+      return {
+        type: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["type"]
+      };
+    }, shallow.shallow),
+    type = _useFolderStore.type;
+  var _useStateWithDependen = reactUtils.useStateWithDependency(function () {
+      return {
+        name: "/",
+        id: null,
+        children: folders
+      };
+    }, [folders]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    baseTree = _useStateWithDependen2[0],
+    setBaseTree = _useStateWithDependen2[1];
+
+  // Decorates tree with meta info. Can be optimized when needed.
+  var tree = React.useMemo(function () {
+    return utils.mapToSortedTree(utils.treeToMap(baseTree));
+  }, [baseTree]);
+  var onDragEnd = function onDragEnd(_ref2) {
+    var active = _ref2.active,
+      over = _ref2.over;
+    setDragState(initialDragState);
+    if (!over) return;
+    var foldersMap = utils.treeToMap(tree);
+    var activeFolder = foldersMap[active.data.current.id];
+    var targetFolder = foldersMap[over.data.current.meta.parent.id];
+    var targetIndex = over.data.current.meta.index + 1; // `index` starts from -1 with placeholder
+
+    // Guards: Check moving inside invalid directories.
+    if (!targetFolder || activeFolder.id === targetFolder.id) return;
+    if (activeFolder.meta.parent.id === targetFolder.id && activeFolder.meta.index === targetIndex) {
+      return;
+    }
+
+    // Check moving to a folder with depth greater than the allowed limit.
+    // maxDepth + 1 due to extra root node added for the tree
+    var srcDepth = utils.measureDepth(activeFolder);
+    var dstDepth = targetFolder.meta.depth;
+    if (srcDepth + dstDepth >= config.maxDepth + 1) {
+      neetoAtoms.Toastr.error(t("moveToFolder.depthExceeded", {
+        maxDepth: config.maxDepth
+      }));
+      return;
+    }
+    activeFolder.meta.parent = targetFolder;
+    activeFolder.meta.__index = targetIndex;
+    var newTree = utils.mapToSortedTree(foldersMap);
+    setBaseTree(newTree);
+    setChanges(ramda.assoc(activeFolder.id, {
+      parentId: targetFolder.id,
+      index: targetIndex
+    }));
+  };
+  var onSubmit = function onSubmit() {
+    var payload = {
+      changes: changes
+    };
+    reorderFolders(payload, {
+      onSuccess: function onSuccess() {
+        var _config$onUpdateSucce;
+        onClose();
+        (_config$onUpdateSucce = config.onUpdateSuccess) === null || _config$onUpdateSucce === void 0 || _config$onUpdateSucce.call(config);
+      }
+    });
+  };
+  useHotkeys(["command+enter", "enter"], onSubmit, {
+    mode: "global",
+    enabled: !!type
+  });
+  var nodeProps = {
+    icon: /*#__PURE__*/jsxRuntime.jsx(lucideReact.GripVertical, {
+      className: "neeto-ui-text-gray-500 relative -start-[0.3125rem] flex-shrink-0"
+    })
+  };
+  if (isFetching) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+      className: "flex items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Title, {
+        children: t("reorderFolder.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, {
+      onDragEnd: onDragEnd,
+      sensors: sensors,
+      collisionDetection: injectCss.closestCenter(dragState),
+      measuring: measuringConfig,
+      onDragOver: function onDragOver(_ref3) {
+        var over = _ref3.over;
+        setDragState(ramda.assoc("overItem", over === null || over === void 0 ? void 0 : over.data.current));
+      },
+      onDragStart: function onDragStart(_ref4) {
+        var active = _ref4.active;
+        setDragState(ramda.assoc("activeItem", active.data.current));
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+        className: "pb-6",
+        children: /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$c(_objectSpread$c({}, _objectSpread$c(_objectSpread$c({}, nodeProps), {}, {
+          config: config,
+          dragState: dragState
+        })), {}, {
+          folder: tree,
+          itemLabel: config.labels[(tree === null || tree === void 0 ? void 0 : tree.itemCount) > 1 ? "items" : "item"],
+          key: tree.id,
+          folderLabel: config.labels[((_tree$children$length = tree === null || tree === void 0 || (_tree$children = tree.children) === null || _tree$children === void 0 ? void 0 : _tree$children.length) !== null && _tree$children$length !== void 0 ? _tree$children$length : 0) > 1 ? "folders" : "folder"]
+        }))
+      }), /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet.Footer, {
+        className: "gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          disabled: ramda.isEmpty(changes),
+          label: t("common.save"),
+          variant: "default",
+          onClick: onSubmit
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          label: t("common.cancel"),
+          variant: "ghost",
+          onClick: onClose
+        })]
+      }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
+        zIndex: 99999,
+        children: dragState && /*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$c(_objectSpread$c({
+          hideTreeIndent: true
+        }, nodeProps), {}, {
+          className: "neeto-ui-bg-gray-200 ps-4 pe-12",
+          depth: 0,
+          folder: dragState.activeItem,
+          folderLabel: config.labels[((_dragState$activeItem = (_dragState$activeItem2 = dragState.activeItem) === null || _dragState$activeItem2 === void 0 || (_dragState$activeItem2 = _dragState$activeItem2.children) === null || _dragState$activeItem2 === void 0 ? void 0 : _dragState$activeItem2.length) !== null && _dragState$activeItem !== void 0 ? _dragState$activeItem : 0) > 1 ? "folders" : "folder"],
+          itemLabel: config.labels[((_dragState$activeItem3 = dragState.activeItem) === null || _dragState$activeItem3 === void 0 ? void 0 : _dragState$activeItem3.itemCount) > 1 ? "items" : "item"]
+        }))
+      }), document.body)]
+    })]
+  });
+};
+
+var _excluded$2 = ["type"];
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FoldersPane = function FoldersPane(_ref) {
+  var configProps = _ref.config;
+  var config = _objectSpread$b(_objectSpread$b({}, useFolderActions.DEFAULT_CONFIG), configProps);
+  var setFocusField = React.useRef(null);
+  var _useFolderStore = useFolderActions.useFolderStore(function (store) {
+      return {
+        paneState: store["paneState"],
+        setFolderState: store["setFolderState"]
+      };
+    }, shallow.shallow),
+    paneState = _useFolderStore.paneState,
+    setFolderState = _useFolderStore.setFolderState;
+  var _ref2 = paneState || {},
+    type = _ref2.type,
+    rest = _objectWithoutProperties(_ref2, _excluded$2);
+  var onClose = function onClose() {
+    return setFolderState({
+      paneState: null
+    });
+  };
+  var commonProps = _objectSpread$b({
+    config: config,
+    onClose: onClose
+  }, rest);
+  var ReorderPaneComponent = config.reorderMode === "reorder" ? ReorderFoldersPane : RearrangeFoldersPane;
+  return /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet, {
+    onClose: onClose,
+    initialFocusRef: setFocusField,
+    isOpen: !!type,
+    children: [(type === "edit" || type === "add") && /*#__PURE__*/jsxRuntime.jsx(AddEditPane, _objectSpread$b({}, _objectSpread$b({
+      setFocusField: setFocusField
+    }, commonProps))), type === "move" && /*#__PURE__*/jsxRuntime.jsx(MoveFolderPane, _objectSpread$b({}, commonProps)), type === "reorder" && /*#__PURE__*/jsxRuntime.jsx(ReorderPaneComponent, _objectSpread$b({}, commonProps))]
+  });
+};
+
+var FoldersContext = function FoldersContext(_ref) {
+  var config = _ref.config,
+    children = _ref.children;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(FoldersPane, {
+      config: config
+    }), /*#__PURE__*/jsxRuntime.jsx(FoldersAlerts, {
+      config: config
+    })]
+  });
+};
+
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FolderTile = function FolderTile(_ref) {
+  var _folder$children$leng, _folder$children, _folder$children$leng2, _folder$children2;
+  var _ref$isPreview = _ref.isPreview,
+    isPreview = _ref$isPreview === void 0 ? false : _ref$isPreview,
+    isSelected = _ref.isSelected,
+    link = _ref.link,
+    folder = _ref.folder,
+    actions = _ref.actions,
+    config = _ref.config,
+    onSelect = _ref.onSelect;
+  var _useTranslation = injectCss.useTranslation(config),
+    t = _useTranslation.t;
+  var droppable = core.useDroppable({
+    id: "droppable-item--".concat(folder.id),
+    data: folder,
+    disabled: isPreview
+  });
+  var draggable = core.useDraggable({
+    id: "draggable-item--".concat(folder.id),
+    data: _objectSpread$a(_objectSpread$a({}, folder), {}, {
+      type: useFolderActions.DEFAULT_CONFIG.type
+    }),
+    disabled: isPreview
+  });
+  var actionCallback = function actionCallback(callback) {
+    return function (event) {
+      event.preventDefault();
+      callback(folder);
+    };
+  };
+  var menuItems = [{
+    key: "edit",
+    label: t("common.edit"),
+    onClick: actionCallback(actions.onEdit)
+  }, {
+    key: "move",
+    label: t("common.moveToFolder"),
+    onClick: actionCallback(actions.onMove)
+  }, {
+    key: "delete",
+    label: t("common.delete"),
+    onClick: actionCallback(actions.onDelete)
+  }];
+  var metaInfo = [];
+  var childCount = (_folder$children$leng = (_folder$children = folder.children) === null || _folder$children === void 0 ? void 0 : _folder$children.length) !== null && _folder$children$leng !== void 0 ? _folder$children$leng : 0;
+  var itemLabel = config.labels[folder.itemCount > 1 ? "items" : "item"];
+  var folderLabel = config.labels[((_folder$children$leng2 = (_folder$children2 = folder.children) === null || _folder$children2 === void 0 ? void 0 : _folder$children2.length) !== null && _folder$children$leng2 !== void 0 ? _folder$children$leng2 : 0) > 1 ? "folders" : "folder"];
+  childCount > 0 && metaInfo.push("".concat(childCount, " ").concat(folderLabel).toLowerCase());
+  metaInfo.push("".concat(folder.itemCount || 0, " ").concat(itemLabel).toLowerCase());
+  return /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Link, _objectSpread$a(_objectSpread$a(_objectSpread$a(_objectSpread$a(_objectSpread$a({
+    "data-testid": "".concat(neetoCist.hyphenate(folder.name), "-folder-tile"),
+    to: link,
+    className: classNames("neeto-ui-bg-gray-50 neeto-ui-border-gray-200 neeto-ui-rounded-md hover:neeto-ui-border-primary-500 relative flex max-w-full items-start gap-2 border-2 p-3 transition-colors ease-in", {
+      "neeto-ui-bg-primary-100": droppable.isOver,
+      "opacity-50": draggable.isDragging,
+      "scale-75": isPreview
+    })
+  }, droppable.attributes), droppable.listeners), draggable.attributes), draggable.listeners), {}, {
+    ref: function ref(_ref2) {
+      droppable.setNodeRef(_ref2);
+      draggable.setNodeRef(_ref2);
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Checkbox, {
+      checked: isSelected,
+      className: "m-0 flex-shrink-0 flex-grow-0 pt-0.5",
+      name: folder.id,
+      onCheckedChange: function onCheckedChange(checked) {
+        return onSelect(folder, checked);
+      },
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: "flex min-w-0 flex-grow flex-col gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "-mt-0.5 line-clamp-2 break-words pe-8",
+        "data-testid": "folder-name",
+        title: folder.name,
+        variant: "body1",
+        weight: "medium",
+        children: folder.name
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "neeto-ui-text-gray-600",
+        variant: "body3",
+        children: metaInfo.join(" . ")
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+      menuItems: menuItems,
+      dropdownButtonProps: {
+        className: "absolute end-2 top-2"
+      },
+      dropdownProps: {
+        onClick: function onClick(event) {
+          return event.preventDefault();
+        }
+      }
+    })]
+  }));
+};
+
+var sensorConfig = {
+  activationConstraint: {
+    distance: 8
+  }
+};
+var FoldersDnd = function FoldersDnd(_ref) {
+  var config = _ref.config,
+    children = _ref.children,
+    onDropItem = _ref.onDrop,
+    renderItemOverlay = _ref.renderOverlay;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragItem = _useState2[0],
+    setDragItem = _useState2[1];
+  var _useUpdateFolder = useFolderActions.useUpdateFolder(config),
+    updateFolder = _useUpdateFolder.mutate;
+  var sensors = core.useSensors(core.useSensor(core.PointerSensor, sensorConfig));
+  var onDropFolder = function onDropFolder(folder, parent) {
+    if (!folder || !parent || folder.id === parent.id) return;
+    updateFolder({
+      id: folder.id,
+      payload: {
+        id: folder.id,
+        parentId: parent.id
+      },
+      initialSlug: folder.sid,
+      config: {
+        showToastr: false
+      }
+    }, {
+      onError: internal.toastApiError
+    });
+  };
+  var handleDragStart = function handleDragStart(_ref2) {
+    var active = _ref2.active;
+    setDragItem(active.data.current);
+  };
+  var handleDragEnd = function handleDragEnd(_ref3) {
+    var active = _ref3.active,
+      over = _ref3.over;
+    setDragItem(null);
+    if (!active || !over) return;
+    if (active.data.current.type === useFolderActions.DEFAULT_CONFIG.type) {
+      onDropFolder(active.data.current, over.data.current);
+    } else onDropItem(active.data.current, over.data.current);
+  };
+  var renderFolderOverlay = function renderFolderOverlay(dragItem) {
+    return /*#__PURE__*/jsxRuntime.jsx(FolderTile, {
+      config: config,
+      isPreview: true,
+      actions: {},
+      folder: dragItem,
+      onSelect: neetoCist.noop
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, {
+    sensors: sensors,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
+      dropAnimation: null,
+      modifiers: [modifiers.snapCenterToCursor],
+      children: dragItem && (dragItem.type !== useFolderActions.DEFAULT_CONFIG.type ? renderItemOverlay(dragItem) : renderFolderOverlay(dragItem))
+    })]
+  });
+};
+
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FoldersList = function FoldersList(_ref) {
+  var _ref$selection = _ref.selection,
+    selection = _ref$selection === void 0 ? [] : _ref$selection,
+    configProps = _ref.config,
+    onSelect = _ref.onSelect;
+  var config = _objectSpread$9(_objectSpread$9({}, useFolderActions.DEFAULT_CONFIG), configProps);
+  var params = reactUtils.useQueryParams();
+  var _useTranslation = injectCss.useTranslation(config),
+    t = _useTranslation.t;
+  var _useFolders = useFolderActions.useFolders(config),
+    folders = _useFolders.folders;
+  var _useFolder = useFolderActions.useFolder(config),
+    folderId = _useFolder.folderId,
+    folder = _useFolder.folder;
+  var actions = useFolderActions.useFolderActions(config);
+  var subFolders = folderId ? folder === null || folder === void 0 ? void 0 : folder.children : folders;
+  if (neetoCist.isNotPresent(subFolders) || !Array.isArray(subFolders)) return null;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      className: "my-3",
+      variant: "h4",
+      children: t("folders.title")
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-folders-grid-view-wrapper mb-10 grid w-full gap-4",
+      "data-testid": "folders-list",
+      children: subFolders.map(function (folder) {
+        return /*#__PURE__*/React.createElement(FolderTile, {
+          actions: actions,
+          config: config,
+          folder: folder,
+          onSelect: onSelect,
+          isSelected: selection.includes(folder.id),
+          key: folder.id,
+          link: utils$1.buildUrl(config.folderPath, _objectSpread$9(_objectSpread$9({}, params), {}, {
+            folderId: folder.sid
+          }))
+        });
+      })
+    })]
+  });
+};
+
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DraggableWrapper = function DraggableWrapper(_ref) {
+  var data = _ref.data,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? data.id : _ref$id,
+    children = _ref.children;
+  var draggable = core.useDraggable({
+    id: "folders-list-draggable-item--".concat(id),
+    data: data
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$8(_objectSpread$8(_objectSpread$8({
+    className: classNames({
+      "opacity-50": draggable.isDragging
+    })
+  }, draggable.attributes), draggable.listeners), {}, {
+    ref: draggable.setNodeRef,
+    children: children
+  }));
+};
+
+var _excluded$1 = ["isOpen", "onClose"];
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MoveToFolderPane = function MoveToFolderPane(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    rest = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet, {
+    isOpen: isOpen,
+    onClose: onClose,
+    children: /*#__PURE__*/jsxRuntime.jsx(PaneBody, _objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+      onClose: onClose
+    })))
+  });
+};
+
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FolderIcon = function FolderIcon(props) {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$6(_objectSpread$6({
+    fill: "none",
+    height: props.size,
+    viewBox: "0 0 16 16",
+    width: props.size,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M3.202 12.798h9.6c.882 0 1.6-.717 1.6-1.6v-6c0-.882-.718-1.6-1.6-1.6H9.069a.8.8 0 0 1-.48-.16l-.96-.72a1.6 1.6 0 0 0-.96-.32H3.202c-.883 0-1.6.718-1.6 1.6v7.2c0 .883.717 1.6 1.6 1.6",
+      fill: "currentColor"
+    })
+  }));
+};
+
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FolderIconOpen = function FolderIconOpen(props) {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$5(_objectSpread$5({
+    fill: "none",
+    height: props.size,
+    viewBox: "0 0 16 16",
+    width: props.size,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "m2.2 7.24-.59 1.765V4c0-.882.717-1.6 1.6-1.6h3.467c.345 0 .682.113.96.32l.96.72c.137.105.307.16.48.16h2.932c.883 0 1.6.718 1.6 1.6v.4H4.474c-1.032 0-1.95.66-2.277 1.64zm10.544 5.56h-9.47c-.82 0-1.397-.802-1.137-1.58l1.2-3.6c.162-.49.622-.82 1.137-.82h9.47c.82 0 1.398.803 1.138 1.58l-1.2 3.6c-.163.49-.623.82-1.138.82",
+      fill: "currentColor"
+    })
+  }));
+};
+
+var Node = function Node(_ref) {
+  var _isActive = _ref.isActive,
+    isExpanded = _ref.isExpanded,
+    node = _ref.node,
+    link = _ref.link,
+    config = _ref.config;
+  var _useTranslation = injectCss.useTranslation(),
+    t = _useTranslation.t;
+  var isPrivate = node.isPrivate,
+    name = node.name,
+    _node$isFolder = node.isFolder,
+    isFolder = _node$isFolder === void 0 ? true : _node$isFolder;
+  var _ref2 = isFolder ? config.folderActions : config.itemActions,
+    _ref2$getMoreActions = _ref2.getMoreActions,
+    getMoreActions = _ref2$getMoreActions === void 0 ? neetoCist.noop : _ref2$getMoreActions,
+    _ref2$getAddActions = _ref2.getAddActions,
+    getAddActions = _ref2$getAddActions === void 0 ? neetoCist.noop : _ref2$getAddActions;
+  var moreActions = getMoreActions(node) || [];
+  var addActions = getAddActions(node) || [];
+  var hasMoreActions = neetoCist.isNotEmpty(moreActions);
+  var hasAddActions = neetoCist.isNotEmpty(addActions);
+  var hasAnyActions = hasMoreActions || hasAddActions;
+  return /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.NavLink, {
+    activeClassName: "active",
+    className: "neeto-sidebar-folders-tree__folder-node",
+    isActive: function isActive() {
+      return _isActive;
+    },
+    to: link,
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center justify-between w-full group relative",
+      "data-testid": "".concat(neetoCist.hyphenate(name), "-").concat(isFolder ? "folder" : "item", "-sublink"),
+      title: "",
+      children: [isFolder && (isExpanded ? /*#__PURE__*/jsxRuntime.jsx(FolderIconOpen, {
+        className: "flex-shrink-0 me-1",
+        size: 16
+      }) : /*#__PURE__*/jsxRuntime.jsx(FolderIcon, {
+        className: "flex-shrink-0 me-1",
+        size: 16
+      })), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center min-w-0 flex-1",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          as: "span",
+          className: "line-clamp-1 block truncate ps-0.5",
+          title: name,
+          variant: "body2",
+          children: name
+        }), isPrivate && /*#__PURE__*/jsxRuntime.jsx("span", {
+          title: t("common.private"),
+          children: /*#__PURE__*/jsxRuntime.jsx(lucideReact.Lock, {
+            className: "flex-shrink-0 ms-1",
+            size: 16
+          })
+        })]
+      }), hasAnyActions && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-0.5 py-0.5 absolute end-0 top-0 h-full neeto-sidebar-folders-tree__folder-node-actions neeto-ui-rounded-md ps-2",
+        onClick: function onClick(e) {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        children: [hasAddActions && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+          menuItems: addActions,
+          dropdownButtonProps: {
+            icon: lucideReact.Plus,
+            size: "icon",
+            tooltipProps: {
+              content: "Add",
+              position: "top"
+            },
+            className: "opacity-0 group-hover:opacity-100 transition-opacity neeto-sidebar-folders-tree__action-button size-5"
+          }
+        }), hasMoreActions && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+          menuItems: moreActions,
+          dropdownButtonProps: {
+            size: "icon",
+            className: "opacity-0 group-hover:opacity-100 transition-opacity neeto-sidebar-folders-tree__action-button size-5"
+          }
+        })]
+      })]
+    })
+  });
+};
+
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DownIcon = function DownIcon(props) {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$4(_objectSpread$4({
+    fill: "none",
+    height: "6",
+    viewBox: "0 0 6 6",
+    width: "6",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M3.803 5.475a.35.35 0 0 1-.606 0l-2.425-4.2A.35.35 0 0 1 1.075.75h4.85a.35.35 0 0 1 .303.525z",
+      fill: "currentColor"
+    })
+  }));
+};
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var RightIcon = function RightIcon(props) {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$3(_objectSpread$3({
+    fill: "none",
+    height: "6",
+    viewBox: "0 0 6 6",
+    width: "6",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M5.475 2.697a.35.35 0 0 1 0 .606l-4.2 2.425a.35.35 0 0 1-.525-.303V.575a.35.35 0 0 1 .525-.303z",
+      fill: "currentColor"
+    })
+  }));
+};
+
+var SwitcherIcon = function SwitcherIcon(_ref) {
+  var expanded = _ref.expanded;
+  return expanded ? /*#__PURE__*/jsxRuntime.jsx(DownIcon, {
+    className: "neeto-ui-relative",
+    size: 16
+  }) : /*#__PURE__*/jsxRuntime.jsx(RightIcon, {
+    className: "neeto-ui-relative",
+    size: 16
+  });
+};
+
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var splitItemsByFolder = function splitItemsByFolder(items) {
+  return items.reduce(function (acc, item) {
+    var value = _objectSpread$2(_objectSpread$2({}, item), {}, {
+      isFolder: false,
+      isLeaf: true
+    });
+    if (item.folderId) {
+      if (!acc.itemsByFolderId[item.folderId]) {
+        acc.itemsByFolderId[item.folderId] = [];
+      }
+      acc.itemsByFolderId[item.folderId].push(_objectSpread$2({}, value));
+    } else {
+      acc.rootItems.push(value);
+    }
+    return acc;
+  }, {
+    itemsByFolderId: {},
+    rootItems: []
+  });
+};
+var _appendItemsToFolders = function appendItemsToFolders(folders, itemsByFolderId) {
+  return folders.map(function (folder) {
+    return _objectSpread$2(_objectSpread$2({}, folder), {}, {
+      isFolder: true,
+      isLeaf: false,
+      children: [].concat(_toConsumableArray(_appendItemsToFolders(folder.children || [], itemsByFolderId)), _toConsumableArray(itemsByFolderId[folder.id] || []))
+    });
+  });
+};
+var buildTreeWithItems = function buildTreeWithItems(folders, _ref) {
+  var items = _ref.items;
+  if (!items || !folders) return folders;
+  var _splitItemsByFolder = splitItemsByFolder(items),
+    itemsByFolderId = _splitItemsByFolder.itemsByFolderId,
+    rootItems = _splitItemsByFolder.rootItems;
+  var foldersWithItems = _appendItemsToFolders(folders, itemsByFolderId);
+  return [].concat(_toConsumableArray(foldersWithItems), _toConsumableArray(rootItems));
+};
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FoldersTree = function FoldersTree(_ref) {
+  var configProps = _ref.config;
+  var config = _objectSpread$1(_objectSpread$1({}, useFolderActions.DEFAULT_CONFIG), configProps);
+  var _useState = React.useState(new Set()),
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedKeysSet = _useState2[0],
+    setExpandedKeysSet = _useState2[1];
+  var expandedKeys = Array.from(expandedKeysSet);
+  var _useTranslation = injectCss.useTranslation(config),
+    t = _useTranslation.t;
+  var params = reactUtils$1.useQueryParams({
+    toCamelCase: false
+  });
+  var activeFolderSid = internal.getActiveFolderId(config);
+  var _useFetchFolders = useFolderActions.useFetchFolders(config),
+    folders = _useFetchFolders.data;
+  var treeData = React.useMemo(function () {
+    return buildTreeWithItems(folders, config);
+  }, [folders, config.items]);
+  var updateExpandedKeys = function updateExpandedKeys() {
+    var _activeFolder$meta;
+    if (!treeData) return;
+    // When active folder changes from external sources, update expanded keys to auto expand tree.
+    var updatedExpandedKeys = new Set(expandedKeysSet);
+    var map = utils.treeToMap(treeData, "sid");
+    var activeFolder = map[activeFolderSid];
+    var parentSid = activeFolder === null || activeFolder === void 0 || (_activeFolder$meta = activeFolder.meta) === null || _activeFolder$meta === void 0 || (_activeFolder$meta = _activeFolder$meta.parent) === null || _activeFolder$meta === void 0 ? void 0 : _activeFolder$meta.sid;
+    if (parentSid && !expandedKeysSet.has(parentSid)) {
+      updatedExpandedKeys.add(parentSid);
+    }
+  };
+  var handleExpand = function handleExpand(keys, _ref2) {
+    var expanded = _ref2.expanded,
+      node = _ref2.node;
+    var keysSet = new Set(keys);
+    if (!expanded) {
+      var _removeChildKeys = function removeChildKeys() {
+        var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        children.forEach(function (child) {
+          keysSet["delete"](child.sid);
+          _removeChildKeys(child.children);
+        });
+      };
+      _removeChildKeys(node.children);
+    }
+    setExpandedKeysSet(keysSet);
+  };
+  React.useEffect(function () {
+    // Non urgent update.
+    React.startTransition(updateExpandedKeys);
+  }, [activeFolderSid, treeData]);
+  if (neetoCist.isNotPresent(treeData)) {
+    return /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      className: "w-full text-center",
+      style: "body2",
+      weight: "semibold",
+      children: t("folders.noFolders")
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Tree, {
+    expandedKeys: expandedKeys,
+    treeData: treeData,
+    autoExpandParent: true,
+    blockNode: true,
+    className: "neeto-sidebar-folders-tree",
+    componentToken: {
+      titleHeight: 24,
+      indentSize: 20
+    },
+    fieldNames: {
+      key: "sid"
+    },
+    selectedKeys: [activeFolderSid],
+    showLine: false,
+    switcherIcon: SwitcherIcon,
+    titleRender: function titleRender(node) {
+      return /*#__PURE__*/jsxRuntime.jsx(Node, {
+        config: config,
+        node: node,
+        isActive: node.sid === activeFolderSid,
+        isExpanded: expandedKeysSet.has(node.sid),
+        link: node.link || utils$2.buildUrl(config.folderPath, _objectSpread$1(_objectSpread$1({}, params), {}, {
+          folderId: node.sid
+        }))
+      });
+    },
+    onExpand: handleExpand
+  });
+};
+
+var createFolderOptions = function createFolderOptions(foldersMap, config) {
+  return internal.mapObj(foldersMap, function (folder) {
+    var _folder$meta$parent;
+    return {
+      id: folder.id,
+      label: folder.name,
+      value: folder.id,
+      pId: (_folder$meta$parent = folder.meta.parent) === null || _folder$meta$parent === void 0 ? void 0 : _folder$meta$parent.id
+    };
+  }, function (folder) {
+    return folder.meta.depth < config.maxDepth;
+  });
+};
+
+var _excluded = ["label", "name", "placeholder", "disabled", "loading", "required", "showSearch", "size", "fieldNames", "config", "initialValue"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TreeSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _fieldNames$label;
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    name = _ref.name,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$showSearch = _ref.showSearch,
+    showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "middle" : _ref$size,
+    fieldNames = _ref.fieldNames,
+    config = _ref.config,
+    initialValue = _ref.initialValue,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useFetchFolders = useFolderActions.useFetchFolders(config),
+    folders = _useFetchFolders.data;
+  var _useFormikContext = formik$1.useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var foldersMap = React.useMemo(function () {
+    return folders ? utils.treeToMap(folders, "sid") : null;
+  }, [folders]);
+  var activeFolderSid = initialValue || internal.getActiveFolderId(config);
+  var activeFolder = foldersMap[activeFolderSid];
+  var isValidParent = (activeFolder === null || activeFolder === void 0 ? void 0 : activeFolder.meta.depth) < config.maxDepth;
+  var parentId = isValidParent ? activeFolder.id : null;
+  React.useEffect(function () {
+    if (values.name !== "") return;
+    setFieldValue(name, parentId);
+  }, [parentId, name]);
+  var folderOptions = React.useMemo(function () {
+    return createFolderOptions(foldersMap, config);
+  }, [foldersMap]);
+  return /*#__PURE__*/jsxRuntime.jsx(NUITreeSelect, _objectSpread({
+    treeDataSimpleMode: true,
+    "data-testid": "nui-select-container-wrapper",
+    treeData: folderOptions,
+    treeNodeFilterProp: (_fieldNames$label = fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) !== null && _fieldNames$label !== void 0 ? _fieldNames$label : "title"
+  }, _objectSpread({
+    disabled: disabled,
+    fieldNames: fieldNames,
+    label: label,
+    loading: loading,
+    name: name,
+    placeholder: placeholder,
+    ref: ref,
+    required: required,
+    showSearch: showSearch,
+    size: size
+  }, otherProps)));
+});
+TreeSelect.displayName = "TreeSelect";
+
+var css = ".neeto-sidebar-folders-tree__folder-node{color:inherit!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper{min-width:0;padding-inline:2px!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:rgb(var(--neeto-ui-gray-100));color:rgb(var(--neeto-ui-accent-800))!important;font-weight:500}.neeto-sidebar-folders-tree.ant-tree .ant-tree-switcher{margin-inline-end:0}.neeto-sidebar-folders-tree.ant-tree .ant-tree-switcher .ant-tree-switcher-icon{position:relative}.neeto-folders-grid-view-wrapper{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper:hover .neeto-sidebar-folders-tree__folder-node-actions{background-image:linear-gradient(90deg,rgba(var(--neeto-ui-gray-100),.5) 0,rgba(var(--neeto-ui-gray-100),1) 25%)}.neeto-sidebar-folders-tree.ant-tree .ant-tree-treenode{margin-bottom:6px}.neeto-sidebar-folders-tree.ant-tree .ant-tree-treenode:before{height:6px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy92Mi9jb21wb25lbnRzL25lZXRvLWZvbGRlcnMtbmFuby5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlDQUNFLHVCQUNGLENBRUEsb0VBRUUsV0FBQSxDQURBLDRCQUVGLENBRUEsMkZBRUUsOENBQUEsQ0FEQSwrQ0FBQSxDQUVBLGVBQ0YsQ0FFQSx3REFDRSxtQkFDRixDQUVBLGdGQUNFLGlCQUNGLENBRUEsaUNBQ0UseURBQ0YsQ0FFQSwySEFDRSxnSEFDRixDQUVBLHdEQUNFLGlCQUNGLENBRUEsK0RBQ0UsVUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZV9fZm9sZGVyLW5vZGUge1xuICBjb2xvcjogaW5oZXJpdCAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWUgLmFudC10cmVlLW5vZGUtY29udGVudC13cmFwcGVyIHtcbiAgcGFkZGluZy1pbmxpbmU6IDJweCAhaW1wb3J0YW50O1xuICBtaW4td2lkdGg6IDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtbm9kZS1jb250ZW50LXdyYXBwZXIuYW50LXRyZWUtbm9kZS1zZWxlY3RlZCB7XG4gIGNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktYWNjZW50LTgwMCkpICFpbXBvcnRhbnQ7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTEwMCkpO1xuICBmb250LXdlaWdodDogNTAwO1xufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWUgLmFudC10cmVlLXN3aXRjaGVyIHtcbiAgbWFyZ2luLWlubGluZS1lbmQ6IDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtc3dpdGNoZXIgLmFudC10cmVlLXN3aXRjaGVyLWljb24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi5uZWV0by1mb2xkZXJzLWdyaWQtdmlldy13cmFwcGVyIHtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoYXV0by1maWxsLCBtaW5tYXgoMjU2cHgsIDFmcikpO1xufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWUgLmFudC10cmVlLW5vZGUtY29udGVudC13cmFwcGVyOmhvdmVyIC5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZV9fZm9sZGVyLW5vZGUtYWN0aW9ucyB7XG4gIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCg5MGRlZywgcmdiYSh2YXIoLS1uZWV0by11aS1ncmF5LTEwMCksIC41KSAwLCByZ2JhKHZhcigtLW5lZXRvLXVpLWdyYXktMTAwKSwgMSkgMjUlKTtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS10cmVlbm9kZSB7XG4gIG1hcmdpbi1ib3R0b206IDZweDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS10cmVlbm9kZTo6YmVmb3JlIHtcbiAgaGVpZ2h0OiA2cHg7XG59XG4iXX0= */";
+injectCss.n(css,{});
+
+exports.AddEditPane = AddEditPane;
+exports.DraggableWrapper = DraggableWrapper;
+exports.FoldersContext = FoldersContext;
+exports.FoldersDnd = FoldersDnd;
+exports.FoldersList = FoldersList;
+exports.FoldersTree = FoldersTree;
+exports.MoveToFolderPane = MoveToFolderPane;
+exports.TreeSelect = TreeSelect;
+//# sourceMappingURL=components.js.map