@bigbinary/neeto-folders-frontend 1.2.0 → 2.0.1

package/dist/cjs/components.js

@@ -1,25 +1,33 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var shallow = require('zustand/shallow');
+var reactQuery = require('@tanstack/react-query');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
 var Alert = require('@bigbinary/neetoui/Alert');
 var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
-var useFolderActions = require('../useFolderActions-BaDwQAdE.js');
-var pathUtils = require('../pathUtils-CHuLm_t6.js');
+var useFolderActions = require('../useFolderActions-D8xGNhk0.js');
+var constants = require('./constants.js');
+var utils = require('../index-BFO1zYNo.js');
+var internal = require('../internal-CS6_tPWL.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Pane = require('@bigbinary/neetoui/Pane');
-var react = require('react');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var React = require('react');
 var formik = require('formik');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var i18next = require('i18next');
+var yup = require('yup');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var Switch = require('@bigbinary/neetoui/formik/Switch');
+var Textarea = require('@bigbinary/neetoui/formik/Textarea');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var antd = require('antd');
 var classNames = require('classnames');
 var Down = require('@bigbinary/neeto-icons/Down');
@@ -28,21 +36,30 @@ var ramda = require('ramda');
 var Button = require('@bigbinary/neetoui/Button');
 var neetoCist = require('@bigbinary/neeto-cist');
 var Radio = require('@bigbinary/neetoui/Radio');
-var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var core = require('@dnd-kit/core');
-var Folder = require('@bigbinary/neeto-icons/Folder');
+var Reorder = require('@bigbinary/neeto-icons/Reorder');
 var Toastr = require('@bigbinary/neetoui/Toastr');
 var reactDom = require('react-dom');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var Tree = require('@bigbinary/neetoui/Tree');
-require('i18next');
-require('@tanstack/react-query');
-require('./constants.js');
 require('zustand');
 
-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), !0).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; }
+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), !0).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 useTranslation = function useTranslation(config) {
+  var _useDefaultTranslatio = reactI18next.useTranslation(),
+    t = _useDefaultTranslatio.t;
+  var modT = function modT(key, options) {
+    return config !== null && config !== void 0 && config.labels ? t(key, _objectSpread$e(_objectSpread$e({}, config.labels), options)) : t(key, options);
+  };
+  return {
+    t: modT
+  };
+};
+
+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), !0).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 FoldersAlerts = function FoldersAlerts(_ref) {
   var config = _ref.config;
   var _useFolderStore = useFolderActions.useFolderStore(function (store) {
@@ -54,8 +71,9 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
   var queryParams = reactUtils.useQueryParams({
     toCamelCase: false
   });
+  var queryClient = reactQuery.useQueryClient();
   var history = reactRouterDom.useHistory();
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFolderStore2 = useFolderActions.useFolderStore(function (store) {
       var _store$alertState, _store$alertState2;
@@ -68,7 +86,7 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
     item = _useFolderStore2.item;
   var _useDestroyFolder = useFolderActions.useDestroyFolder(config),
     destroyFolder = _useDestroyFolder.mutateAsync,
-    isLoading = _useDestroyFolder.isLoading;
+    isPending = _useDestroyFolder.isPending;
   var _useFolders = useFolderActions.useFolders(config),
     folders = _useFolders.folders;
   var onClose = function onClose() {
@@ -78,46 +96,33 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
   };
   var alertProps = {
     isOpen: !!type,
-    isSubmitting: isLoading,
+    isSubmitting: isPending,
     onClose: onClose
   };
-  var onConfirmDelete = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var path, parent;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return destroyFolder(item.id);
-          case 2:
-            onClose();
-            if (!(!useFolderActions.isActiveFolder(item.sid) || !folders)) {
-              _context.next = 5;
-              break;
-            }
-            return _context.abrupt("return");
-          case 5:
-            path = pathUtils.pathToFolder(folders, item.id);
-            parent = path[path.length - 2];
-            if (parent) {
-              _context.next = 9;
-              break;
-            }
-            return _context.abrupt("return");
-          case 9:
-            history.replace(utils.buildUrl(config.folderPath, _objectSpread$a(_objectSpread$a({}, queryParams), {}, {
-              folderId: parent.sid
-            })));
-          case 10:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function onConfirmDelete() {
-      return _ref2.apply(this, arguments);
+  var onConfirmDelete = function onConfirmDelete() {
+    var onSuccess = function onSuccess() {
+      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];
+        history.replace(utils$1.buildUrl(config.folderPath, _objectSpread$d(_objectSpread$d({}, queryParams), {}, {
+          folderId: parent ? parent.sid : ""
+        })));
+      }
     };
-  }();
+    destroyFolder(item.id, {
+      onSuccess: onSuccess,
+      onSettled: onClose
+    });
+  };
   if (type === "delete") {
     alertProps.title = t("deleteFolder.title");
     alertProps.message = /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
@@ -127,13 +132,41 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
     if (config.customizeAlerts) config.customizeAlerts(type, item, alertProps);
     alertProps.onSubmit = onConfirmDelete;
   }
-  return /*#__PURE__*/jsxRuntime.jsx(Alert, _objectSpread$a({}, alertProps));
+  return /*#__PURE__*/jsxRuntime.jsx(Alert, _objectSpread$d({}, alertProps));
 };
 
-var _excluded$4 = ["className", "disabled", "fieldNames", "label", "loading", "name", "placeholder", "required", "showSearch", "size", "treeData"];
-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), !0).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 TreeSelect = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+var FORM_VALIDATION_SCHEMA = yup.object().shape({
+  name: yup.string().required(i18next.t("errors.blank", {
+    entity: i18next.t("common.name")
+  }))
+});
+
+var _excluded$6 = ["type"];
+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), !0).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 typeComponentMap = {
+  string: Input,
+  "boolean": Switch,
+  textarea: 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$6);
+    var Component = typeComponentMap[type];
+    if (!Component) return null;
+    return /*#__PURE__*/React.createElement(Component, _objectSpread$c(_objectSpread$c({}, rest), {}, {
+      key: rest.name
+    }));
+  });
+};
+
+var _excluded$5 = ["className", "disabled", "fieldNames", "label", "loading", "name", "placeholder", "required", "showSearch", "size", "treeData"];
+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), !0).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 TreeSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _fieldNames$label;
   var className = _ref.className,
     _ref$disabled = _ref.disabled,
@@ -153,7 +186,7 @@ var TreeSelect = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "middle" : _ref$size,
     treeData = _ref.treeData,
-    otherProps = _objectWithoutProperties(_ref, _excluded$4);
+    otherProps = _objectWithoutProperties(_ref, _excluded$5);
   var _useField = formik.useField(name),
     _useField2 = _slicedToArray(_useField, 3),
     field = _useField2[0],
@@ -171,13 +204,40 @@ var TreeSelect = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       children: label
     }), /*#__PURE__*/jsxRuntime.jsx(antd.ConfigProvider, {
       theme: {
+        token: {
+          colorBgContainer: "rgb(var(--neeto-ui-white))",
+          colorBorder: "rgb(var(--neeto-ui-gray-300))",
+          colorBorderSecondary: "rgb(var(--neeto-ui-gray-200))",
+          colorFillAlter: "rgb(var(--neeto-ui-gray-100))",
+          colorFillContent: "rgb(var(--neeto-ui-gray-100))",
+          colorFillSecondary: "rgb(var(--neeto-ui-gray-100))",
+          colorIcon: "rgb(var(--neeto-ui-gray-700))",
+          colorIconHover: "rgb(var(--neeto-ui-gray-800))",
+          colorLink: "rgb(var(--neeto-ui-primary-500))",
+          colorLinkActive: "rgb(var(--neeto-ui-primary-800))",
+          colorLinkHover: "rgb(var(--neeto-ui-primary-600))",
+          colorPrimary: "rgb(var(--neeto-ui-primary-500))",
+          colorSplit: "rgb(var(--neeto-ui-gray-100))",
+          colorText: "rgb(var(--neeto-ui-gray-800))",
+          colorTextDescription: "rgb(var(--neeto-ui-gray-700))",
+          colorTextDisabled: "rgb(var(--neeto-ui-gray-600))",
+          colorTextHeading: "rgb(var(--neeto-ui-black))",
+          colorTextPlaceholder: "rgb(var(--neeto-ui-gray-500))",
+          controlItemBgActive: "rgb(var(--neeto-ui-primary-100))",
+          controlItemBgActiveHover: "rgb(var(--neeto-ui-pastel-purple))",
+          controlItemBgHover: "rgb(var(--neeto-ui-gray-100))"
+        },
         components: {
           TreeSelect: {
-            titleHeight: 28
+            titleHeight: 28,
+            indentSize: 28,
+            nodeHoverBg: "rgb(var(--neeto-ui-gray-100))",
+            nodeSelectedBg: "rgb(var(--neeto-ui-primary-500))",
+            colorBgElevated: "rgb(var(--neeto-ui-white))"
           }
         }
       },
-      children: /*#__PURE__*/jsxRuntime.jsx(antd.TreeSelect, _objectSpread$9(_objectSpread$9({
+      children: /*#__PURE__*/jsxRuntime.jsx(antd.TreeSelect, _objectSpread$b(_objectSpread$b({
         treeDataSimpleMode: true,
         "data-cy": "nui-select-container-wrapper",
         dropdownStyle: {
@@ -192,8 +252,10 @@ var TreeSelect = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
           "neeto-ui-tree-select__error": meta.error
         }),
         switcherIcon: function switcherIcon(props) {
-          return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$9(_objectSpread$9({}, props), {}, {
-            children: /*#__PURE__*/jsxRuntime.jsx(Down, {})
+          return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$b(_objectSpread$b({}, props), {}, {
+            children: /*#__PURE__*/jsxRuntime.jsx(Down, {
+              className: "relative"
+            })
           }));
         },
         onBlur: function onBlur() {
@@ -202,7 +264,7 @@ var TreeSelect = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
         onChange: function onChange(value) {
           return setValue(value);
         }
-      }, _objectSpread$9({
+      }, _objectSpread$b({
         disabled: disabled,
         fieldNames: fieldNames,
         loading: loading,
@@ -239,12 +301,35 @@ var createFolderOptions = function createFolderOptions(foldersMap, config) {
     };
   });
 };
+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 AddEditPane = function AddEditPane(_ref) {
   var setFocusField = _ref.setFocusField,
     config = _ref.config,
     onClose = _ref.onClose;
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFolderStore = useFolderActions.useFolderStore(function (store) {
       var _store$paneState, _store$paneState2;
@@ -262,32 +347,29 @@ var AddEditPane = function AddEditPane(_ref) {
   var _useUpdateFolder = useFolderActions.useUpdateFolder(config),
     updateFolder = _useUpdateFolder.mutateAsync;
   var isEditing = type === "edit" && item;
-  var foldersMap = react.useMemo(function () {
-    return pathUtils.treeToMap(folders, "sid");
+  var foldersMap = React.useMemo(function () {
+    return utils.treeToMap(folders, "sid");
   }, [folders]);
-  var folderOptions = react.useMemo(function () {
+  var folderOptions = React.useMemo(function () {
     return createFolderOptions(foldersMap, config);
   }, [foldersMap]);
-  var activeFolderSid = useFolderActions.getActiveFolderId(config);
+  var activeFolderSid = 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;
-  var initialValues = react.useMemo(function () {
-    return isEditing ? item : {
-      name: "",
+  var extraAttributes = config.extraAttributes;
+  var initialValues = React.useMemo(function () {
+    return isEditing ? item : createInitialValues({
       parentId: parentId
-    };
-  }, [isEditing, item, parentId]);
+    }, extraAttributes);
+  }, [isEditing, item, parentId, extraAttributes]);
   var onSubmitForm = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
       var payload;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            payload = {
-              name: values.name,
-              parent_id: values.parentId
-            };
+            payload = createPayload(values, extraAttributes);
             if (!isEditing) {
               _context.next = 6;
               break;
@@ -324,16 +406,21 @@ var AddEditPane = function AddEditPane(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(formik.Formik, {
       initialValues: initialValues,
       enableReinitialize: true,
+      validationSchema: FORM_VALIDATION_SCHEMA,
       onSubmit: onSubmitForm,
       children: function children() {
         return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+            className: "pb-6",
             children: /*#__PURE__*/jsxRuntime.jsxs(formik.Form, {
               className: "w-full space-y-5",
               children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+                required: true,
                 label: t("folders.name"),
                 name: "name",
                 ref: setFocusField
+              }), /*#__PURE__*/jsxRuntime.jsx(ExtraAttributes, {
+                attributes: extraAttributes
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                 children: [/*#__PURE__*/jsxRuntime.jsx(TreeSelect, {
                   allowClear: true,
@@ -342,7 +429,8 @@ var AddEditPane = function AddEditPane(_ref) {
                   name: "parentId",
                   treeData: folderOptions
                 }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-                  style: "nano",
+                  className: "mt-1",
+                  style: "body3",
                   children: t("createFolder.parentInfo")
                 })]
               })]
@@ -360,10 +448,11 @@ var AddEditPane = function AddEditPane(_ref) {
   });
 };
 
-var _excluded$3 = ["icon", "itemLabel", "folder", "depth", "className", "onClick"];
-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), !0).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 indentSize = 30;
+var REORDER_TREE_INDENT_WIDTH = 30;
+
+var _excluded$4 = ["icon", "itemLabel", "folder", "depth", "className", "onClick"];
+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), !0).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 Node = function Node(_ref, ref) {
   var _folder$children$leng, _folder$children;
   var _ref$icon = _ref.icon,
@@ -373,7 +462,7 @@ var Node = function Node(_ref, ref) {
     depth = _ref.depth,
     className = _ref.className,
     onClick = _ref.onClick,
-    rest = _objectWithoutProperties(_ref, _excluded$3);
+    rest = _objectWithoutProperties(_ref, _excluded$4);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var metaInfo = [];
@@ -383,18 +472,18 @@ var Node = function Node(_ref, ref) {
   }));
   folder.itemCount > 0 && metaInfo.push("".concat(folder.itemCount, " ").concat(itemLabel));
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex",
+    className: "flex w-full min-w-0",
     children: [Array.from({
       length: depth
     }).map(function (_, index) {
       return /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "relative border-l",
+        className: "neeto-ui-border-gray-300 relative h-full flex-shrink-0 border-l",
         style: {
-          width: indentSize,
-          left: Math.round(indentSize / 2)
+          width: REORDER_TREE_INDENT_WIDTH,
+          left: Math.round(REORDER_TREE_INDENT_WIDTH / 2)
         }
       }, index);
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$8(_objectSpread$8({}, _objectSpread$8(_objectSpread$8({}, rest), {}, {
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$a(_objectSpread$a({}, _objectSpread$a(_objectSpread$a({}, rest), {}, {
       onClick: onClick,
       ref: ref
     })), {}, {
@@ -402,12 +491,14 @@ var Node = function Node(_ref, ref) {
       children: [icon, /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "ml-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-          style: "body3",
+          lineHeight: "snug",
+          style: "body1",
           weight: "medium",
           children: folder.name
         }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-          className: "relative -top-0.5",
-          style: "nano",
+          className: "relative mt-0.5",
+          lineHeight: "snug",
+          style: "body3",
           weight: "normal",
           children: metaInfo.join(" . ")
         })]
@@ -415,11 +506,11 @@ var Node = function Node(_ref, ref) {
     }))]
   });
 };
-var Node$1 = /*#__PURE__*/react.forwardRef(Node);
+var Node$1 = /*#__PURE__*/React.forwardRef(Node);
 
-var _excluded$2 = ["folder", "item", "depth", "maxDepth", "disabled"];
-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), !0).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 _excluded$3 = ["folder", "item", "depth", "maxDepth", "disabled", "config"];
+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), !0).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 _SelectableNode = function SelectableNode(_ref) {
   var folder = _ref.folder,
     item = _ref.item,
@@ -427,16 +518,18 @@ var _SelectableNode = function SelectableNode(_ref) {
     depth = _ref$depth === void 0 ? 0 : _ref$depth,
     maxDepth = _ref.maxDepth,
     disabled = _ref.disabled,
-    rest = _objectWithoutProperties(_ref, _excluded$2);
+    config = _ref.config,
+    rest = _objectWithoutProperties(_ref, _excluded$3);
   var selection = rest.selection,
     onSelect = rest.onSelect;
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var isDisabled = disabled || (item === null || item === void 0 ? void 0 : item.id) === folder.id || depth > maxDepth;
   var renderChildren = function renderChildren() {
     if (neetoCist.isNotPresent(folder.children)) return null;
     return folder.children.map(function (child) {
-      return /*#__PURE__*/react.createElement(_SelectableNode, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+      return /*#__PURE__*/React.createElement(_SelectableNode, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, rest), {}, {
+        config: config,
         item: item,
         maxDepth: maxDepth
       })), {}, {
@@ -447,33 +540,31 @@ var _SelectableNode = function SelectableNode(_ref) {
       }));
     });
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
-    content: t("moveToFolder.notAllowed"),
-    disabled: !isDisabled,
-    position: "top",
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames({
-        "opacity-40": isDisabled
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    "aria-disabled": isDisabled,
+    className: classNames({
+      "opacity-60": isDisabled
+    }),
+    title: isDisabled ? t("moveToFolder.notAllowed") : undefined,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, rest), {}, {
+      depth: depth,
+      folder: folder
+    })), {}, {
+      icon: /*#__PURE__*/jsxRuntime.jsx(Radio.Item, {
+        readOnly: true,
+        checked: selection === folder.id,
+        className: "neeto-ui-radio__container",
+        name: "move-folder-option"
       }),
-      children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
-        depth: depth,
-        folder: folder
-      })), {}, {
-        icon: /*#__PURE__*/jsxRuntime.jsx(Radio.Item, {
-          readOnly: true,
-          checked: selection === folder.id,
-          name: "move-folder-option"
-        }),
-        onClick: isDisabled ? neetoCist.noop : function () {
-          return onSelect(folder);
-        }
-      })), renderChildren()]
-    })
+      onClick: isDisabled ? neetoCist.noop : function () {
+        return onSelect(folder);
+      }
+    })), renderChildren()]
   });
 };
 
-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), !0).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; }
+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), !0).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 PaneBody = function PaneBody(_ref) {
   var item = _ref.item,
     config = _ref.config,
@@ -483,7 +574,7 @@ var PaneBody = function PaneBody(_ref) {
     onSubmit = _ref.onSubmit,
     onClose = _ref.onClose,
     onRemove = _ref.onRemove;
-  var _useState = react.useState(null),
+  var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     selection = _useState2[0],
     setSelection = _useState2[1];
@@ -496,14 +587,14 @@ var PaneBody = function PaneBody(_ref) {
   var _useFetchFolders = useFolderActions.useFetchFolders(config),
     _useFetchFolders$data = _useFetchFolders.data,
     folders = _useFetchFolders$data === void 0 ? [] : _useFetchFolders$data;
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var folderDepth = 0;
   if (item) {
     // If item is a folder, measure the current depth from current folder to longest leaf.
-    var foldersMap = pathUtils.treeToMap(folders);
+    var foldersMap = utils.treeToMap(folders);
     var folder = foldersMap[item.id];
-    if (folder) folderDepth = pathUtils.measureDepth(folder);
+    if (folder) folderDepth = utils.measureDepth(folder);
   }
   var maxDepth = config.maxDepth - folderDepth;
   var onAddFolder = function onAddFolder() {
@@ -527,14 +618,16 @@ var PaneBody = function PaneBody(_ref) {
         onClick: onAddFolder
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+      className: "pb-6",
       children: folders.map(function (folder) {
-        return /*#__PURE__*/react.createElement(_SelectableNode, {
+        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,
-          itemLabel: config.itemLabel,
+          itemLabel: config.labels.item,
           key: folder.id,
           onSelect: function onSelect(folder) {
             return setSelection(folder.id);
@@ -545,19 +638,19 @@ var PaneBody = function PaneBody(_ref) {
       className: "space-x-2",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-1 space-x-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$6({
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$8({
           disabled: !selection,
           label: t("common.save"),
           style: "primary",
           onClick: function onClick() {
             return onSubmit(selection);
           }
-        }, submitButtonProps)), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$6({
+        }, submitButtonProps)), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$8({
           label: t("common.cancel"),
           style: "text",
           onClick: onClose
         }, cancelButtonProps))]
-      }), onRemove && /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$6({
+      }), onRemove && /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$8({
         label: t("moveToFolder.remove"),
         style: "tertiary",
         onClick: onRemove
@@ -598,14 +691,14 @@ var MoveFolderPane = function MoveFolderPane(_ref) {
   });
 };
 
-var _excluded$1 = ["folder", "depth"];
-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), !0).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 _DraggableNode = function DraggableNode(_ref) {
+var _excluded$2 = ["folder", "depth"];
+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), !0).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 _DraggableNode$1 = function DraggableNode(_ref) {
   var folder = _ref.folder,
     _ref$depth = _ref.depth,
     depth = _ref$depth === void 0 ? 0 : _ref$depth,
-    rest = _objectWithoutProperties(_ref, _excluded$1);
+    rest = _objectWithoutProperties(_ref, _excluded$2);
   var _useDraggable = core.useDraggable({
       id: "draggable-item--".concat(folder.id),
       data: folder,
@@ -625,21 +718,22 @@ var _DraggableNode = function DraggableNode(_ref) {
   var renderChildren = function renderChildren() {
     if (neetoCist.isNotPresent(folder.children) || isDragging) return null;
     return folder.children.map(function (child) {
-      return /*#__PURE__*/react.createElement(_DraggableNode, _objectSpread$5(_objectSpread$5({}, rest), {}, {
+      return /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$7(_objectSpread$7({}, rest), {}, {
         depth: depth + 1,
         folder: child,
         key: child.id
       }));
     });
   };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$5(_objectSpread$5(_objectSpread$5({}, rest), {}, {
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$7(_objectSpread$7(_objectSpread$7({}, rest), {}, {
       className: classNames({
-        "neeto-ui-bg-gray-100 opacity-50 ": isDragging,
+        "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$5(_objectSpread$5({
+    }, _objectSpread$7(_objectSpread$7({
       depth: depth,
       folder: folder
     }, attributes), listeners)), {}, {
@@ -651,20 +745,20 @@ var _DraggableNode = function DraggableNode(_ref) {
   });
 };
 
-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), !0).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 ReorderFoldersPane = function ReorderFoldersPane(_ref) {
+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), !0).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 RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
   var config = _ref.config,
     onClose = _ref.onClose;
-  var _useState = react.useState(null),
+  var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     dragItem = _useState2[0],
     setDragItem = _useState2[1];
-  var _useState3 = react.useState({}),
+  var _useState3 = React.useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
     changes = _useState4[0],
     setChanges = _useState4[1];
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var _useFetchFolders = useFolderActions.useFetchFolders(config),
     folders = _useFetchFolders.data;
@@ -686,7 +780,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
       over = _ref2.over;
     setDragItem(null);
     if (!over) return;
-    var foldersMap = pathUtils.treeToMap(tree);
+    var foldersMap = utils.treeToMap(tree);
     var activeFolder = foldersMap[active.data.current.id];
     var overFolder = foldersMap[over.data.current.id];
 
@@ -695,7 +789,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
 
     // 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 = pathUtils.measureDepth(activeFolder);
+    var activeDepth = utils.measureDepth(activeFolder);
     var overDepth = overFolder.meta.depth;
     if (activeDepth + overDepth >= config.maxDepth + 1) {
       Toastr.error(t("moveToFolder.depthExceeded", {
@@ -704,7 +798,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
       return;
     }
     activeFolder.meta.parent = overFolder;
-    var newTree = pathUtils.mapToTree(foldersMap);
+    var newTree = utils.mapToTree(foldersMap);
     setTree(newTree);
     setChanges(ramda.assoc(activeFolder.id, overFolder.id));
   };
@@ -717,8 +811,10 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
     });
   };
   var nodeProps = {
-    icon: /*#__PURE__*/jsxRuntime.jsx(Folder, {}),
-    itemLabel: config.itemLabel
+    icon: /*#__PURE__*/jsxRuntime.jsx(Reorder, {
+      className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
+    }),
+    itemLabel: config.labels.item
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
@@ -733,12 +829,13 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
         return setDragItem(active.data.current);
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
-        children: /*#__PURE__*/react.createElement(_DraggableNode, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+        className: "pb-6",
+        children: /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
           folder: tree,
           key: tree.id
         }))
       }), /*#__PURE__*/jsxRuntime.jsxs(Pane.Footer, {
-        className: "space-x-2",
+        className: "gap-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
           disabled: ramda.isEmpty(changes),
           label: t("common.save"),
@@ -751,7 +848,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
         })]
       }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
         zIndex: 99999,
-        children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+        children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
           className: "neeto-ui-bg-gray-200",
           depth: 0,
           folder: dragItem
@@ -761,6 +858,312 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
   });
 };
 
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var distanceBetween = function distanceBetween(p1, p2) {
+  return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+};
+var centerOfRectangle = function centerOfRectangle(rect) {
+  var left = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : rect.left;
+  var top = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : rect.top;
+  return {
+    x: left + rect.width * 0.5,
+    y: top + rect.height * 0.5
+  };
+};
+var closestCenter = function closestCenter(_ref) {
+  var activeItem = _ref.activeItem;
+  return function (_ref2) {
+    var collisionRect = _ref2.collisionRect,
+      droppableRects = _ref2.droppableRects,
+      droppableContainers = _ref2.droppableContainers;
+    var centerRect = centerOfRectangle(collisionRect, collisionRect.left - 30, collisionRect.top - 30);
+    var minDistance = Number.POSITIVE_INFINITY;
+    var collision = {
+      id: undefined
+    };
+
+    // eslint-disable-next-line @bigbinary/neeto/use-array-methods
+    var _iterator = _createForOfIteratorHelper(droppableContainers),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var droppableContainer = _step.value;
+        var rect = droppableRects.get(droppableContainer.id);
+        if (!rect || droppableContainer.id === activeItem.id) continue;
+        var distance = distanceBetween(centerOfRectangle(rect), centerRect);
+        if (distance < minDistance) {
+          minDistance = distance;
+          collision = {
+            id: droppableContainer.id,
+            data: {
+              droppableContainer: droppableContainer,
+              value: distance
+            }
+          };
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return [collision];
+  };
+};
+
+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: REORDER_TREE_INDENT_WIDTH * depth
+      }
+    }), /*#__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$1 = ["folder", "dragState"];
+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), !0).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 _DraggableNode = function DraggableNode(_ref) {
+  var _overItem$meta$parent;
+  var folder = _ref.folder,
+    dragState = _ref.dragState,
+    rest = _objectWithoutProperties(_ref, _excluded$1);
+  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) {
+        return /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$5(_objectSpread$5({}, _objectSpread$5(_objectSpread$5({}, rest), {}, {
+          dragState: dragState
+        })), {}, {
+          depth: child.meta.depth,
+          folder: child,
+          key: child.id
+        }));
+      })]
+    }, "".concat(folder.id, "--container"));
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$5(_objectSpread$5({
+      depth: folder.meta.depth
+    }, _objectSpread$5(_objectSpread$5(_objectSpread$5({}, rest), {}, {
+      folder: folder
+    }, attributes), listeners)), {}, {
+      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$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), !0).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 initialDragState = {
+  activeItem: null,
+  overItem: null
+};
+var sensorConfig = {
+  activationConstraint: {
+    distance: 8
+  }
+};
+var measuringConfig = {
+  droppable: {
+    frequency: 500
+  }
+};
+
+// Reorder with support for position adjustment
+var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
+  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 = useTranslation(config),
+    t = _useTranslation.t;
+  var _useFetchFolders = useFolderActions.useFetchFolders(config),
+    folders = _useFetchFolders.data;
+  var _useReorderFolders = useFolderActions.useReorderFolders(config),
+    reorderFolders = _useReorderFolders.mutate;
+  var sensors = core.useSensors(core.useSensor(core.PointerSensor, sensorConfig));
+  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) {
+      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: onClose
+    });
+  };
+  var nodeProps = {
+    icon: /*#__PURE__*/jsxRuntime.jsx(Reorder, {
+      className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
+    }),
+    itemLabel: config.labels.item
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        style: "h2",
+        children: t("reorderFolder.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, {
+      onDragEnd: onDragEnd,
+      sensors: sensors,
+      collisionDetection: 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(Pane.Body, {
+        className: "pb-6",
+        children: /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$4(_objectSpread$4({}, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+          dragState: dragState
+        })), {}, {
+          folder: tree,
+          key: tree.id
+        }))
+      }), /*#__PURE__*/jsxRuntime.jsxs(Pane.Footer, {
+        className: "gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+          disabled: ramda.isEmpty(changes),
+          label: t("common.save"),
+          style: "primary",
+          onClick: onSubmit
+        }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+          label: t("common.cancel"),
+          style: "text",
+          onClick: onClose
+        })]
+      }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
+        zIndex: 99999,
+        children: dragState && /*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$4(_objectSpread$4({}, nodeProps), {}, {
+          className: "neeto-ui-bg-gray-200 pl-4 pr-12",
+          depth: 0,
+          folder: dragState.activeItem
+        }))
+      }), document.body)]
+    })]
+  });
+};
+
 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), !0).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 FoldersPane = function FoldersPane(_ref) {
@@ -788,6 +1191,7 @@ var FoldersPane = function FoldersPane(_ref) {
     config: config,
     onClose: onClose
   };
+  var ReorderPaneComponent = config.reorderMode === "reorder" ? ReorderFoldersPane : RearrangeFoldersPane;
   return /*#__PURE__*/jsxRuntime.jsx(Pane, {
     onClose: onClose,
     isOpen: !!type,
@@ -796,7 +1200,7 @@ var FoldersPane = function FoldersPane(_ref) {
       return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [(type === "edit" || type === "add") && /*#__PURE__*/jsxRuntime.jsx(AddEditPane, _objectSpread$3({}, _objectSpread$3({
           setFocusField: setFocusField
-        }, commonProps))), type === "move" && /*#__PURE__*/jsxRuntime.jsx(MoveFolderPane, _objectSpread$3({}, commonProps)), type === "reorder" && /*#__PURE__*/jsxRuntime.jsx(ReorderFoldersPane, _objectSpread$3({}, commonProps))]
+        }, commonProps))), type === "move" && /*#__PURE__*/jsxRuntime.jsx(MoveFolderPane, _objectSpread$3({}, commonProps)), type === "reorder" && /*#__PURE__*/jsxRuntime.jsx(ReorderPaneComponent, _objectSpread$3({}, commonProps))]
       });
     }
   });
@@ -821,8 +1225,9 @@ var FolderTile = function FolderTile(_ref) {
     itemLabel = _ref.itemLabel,
     folder = _ref.folder,
     actions = _ref.actions,
+    config = _ref.config,
     onSelect = _ref.onSelect;
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var actionCallback = function actionCallback(callback) {
     return function (event) {
@@ -850,44 +1255,42 @@ var FolderTile = function FolderTile(_ref) {
   }));
   metaInfo.push("".concat(folder.itemCount || 0, " ").concat(itemLabel));
   return /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Link, {
-    className: "neeto-ui-bg-gray-100 neeto-ui-rounded-md m-2 w-64 border p-3",
+    className: "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",
     to: link,
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "mb-1 flex items-center justify-between",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex items-center",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Checkbox, {
-          checked: isSelected,
-          className: "mr-2",
-          name: folder.id,
-          onChange: function onChange(event) {
-            return onSelect(folder, event.target.checked);
-          },
-          onClick: function onClick(event) {
-            return event.stopPropagation();
-          }
-        }), /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
-          content: folder.name,
-          delay: [300, 0],
-          children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-            className: "line-clamp-1",
-            style: "body1",
-            weight: "medium",
-            children: folder.name
-          })
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
-        menuItems: menuItems,
-        dropdownProps: {
-          onClick: function onClick(event) {
-            return event.preventDefault();
-          }
-        }
+    children: [/*#__PURE__*/jsxRuntime.jsx(Checkbox, {
+      checked: isSelected,
+      className: "m-0 flex-shrink-0 flex-grow-0 pt-0.5",
+      name: folder.id,
+      onChange: function onChange(event) {
+        return onSelect(folder, event.target.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(Typography, {
+        className: "-mt-0.5 line-clamp-2 break-words pr-8",
+        lineHeight: "snug",
+        style: "body1",
+        title: folder.name,
+        weight: "medium",
+        children: folder.name
+      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "neeto-ui-text-gray-600",
+        style: "body3",
+        children: metaInfo.join(" . ")
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-      className: "ml-6",
-      style: "body3",
-      children: metaInfo.join(" . ")
+    }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+      menuItems: menuItems,
+      dropdownButtonProps: {
+        className: "absolute right-2 top-2"
+      },
+      dropdownProps: {
+        onClick: function onClick(event) {
+          return event.preventDefault();
+        }
+      }
     })]
   });
 };
@@ -901,7 +1304,7 @@ var FoldersList = function FoldersList(_ref) {
     onSelect = _ref.onSelect;
   var config = _objectSpread$2(_objectSpread$2({}, useFolderActions.DEFAULT_CONFIG), configProps);
   var params = reactUtils.useQueryParams();
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var fetchParams = ramda.pick(["sortBy", "orderBy"], params);
   var _useFolders = useFolderActions.useFolders(_objectSpread$2(_objectSpread$2({}, config), {}, {
@@ -917,20 +1320,21 @@ var FoldersList = function FoldersList(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(FoldersContext, {
     config: config,
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      className: "mb-2 mt-2",
+      className: "my-3",
       style: "h4",
       children: t("folders.title")
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "mb-6 flex flex-wrap justify-items-center",
+      className: "neeto-folders-grid-view-wrapper mb-10 grid w-full gap-4",
       children: subFolders.map(function (folder) {
-        return /*#__PURE__*/react.createElement(FolderTile, {
+        return /*#__PURE__*/React.createElement(FolderTile, {
           actions: actions,
+          config: config,
           folder: folder,
           onSelect: onSelect,
           isSelected: selection.includes(folder.id),
-          itemLabel: config.itemLabel,
+          itemLabel: config.labels.item,
           key: folder.id,
-          link: utils.buildUrl(config.folderPath, _objectSpread$2(_objectSpread$2({}, params), {}, {
+          link: utils$1.buildUrl(config.folderPath, _objectSpread$2(_objectSpread$2({}, params), {}, {
             folderId: folder.sid
           }))
         });
@@ -961,20 +1365,17 @@ var FolderNode = function FolderNode(_ref) {
     link = _ref.link;
   return /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.NavLink, {
     activeClassName: "active",
-    className: "block",
+    className: "neeto-sidebar-folders-tree__folder-node block",
     isActive: function isActive() {
       return _isActive;
     },
     to: link,
-    children: /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
-      content: folder.name,
-      delay: [300, 0],
-      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        className: "line-clamp-1",
-        component: "span",
-        style: "body2",
-        children: folder.name
-      })
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      className: "line-clamp-1 block truncate",
+      component: "span",
+      style: "body2",
+      title: folder.name,
+      children: folder.name
     })
   });
 };
@@ -984,16 +1385,16 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var FoldersTree = function FoldersTree(_ref) {
   var configProps = _ref.config;
   var config = _objectSpread(_objectSpread({}, useFolderActions.DEFAULT_CONFIG), configProps);
-  var _useState = react.useState([]),
+  var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     expandedKeys = _useState2[0],
     setExpandedKeys = _useState2[1];
-  var _useTranslation = reactI18next.useTranslation(),
+  var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
   var params = reactUtils.useQueryParams({
     toCamelCase: false
   });
-  var activeFolderSid = useFolderActions.getActiveFolderId(config);
+  var activeFolderSid = internal.getActiveFolderId(config);
   var _useFetchFolders = useFolderActions.useFetchFolders(config),
     folders = _useFetchFolders.data;
   var updateExpandedKeys = function updateExpandedKeys() {
@@ -1001,15 +1402,15 @@ var FoldersTree = function FoldersTree(_ref) {
     if (!folders) return;
     // When active folder changes from external sources, update expanded keys to auto expand tree.
     var expandedKeys = [];
-    var map = pathUtils.treeToMap(folders, "sid");
+    var map = utils.treeToMap(folders, "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) expandedKeys.push(parentSid);
     setExpandedKeys(expandedKeys);
   };
-  react.useEffect(function () {
+  React.useEffect(function () {
     // Non urgent update.
-    react.startTransition(updateExpandedKeys);
+    React.startTransition(updateExpandedKeys);
   }, [activeFolderSid, folders]);
   if (neetoCist.isNotPresent(folders)) {
     return /*#__PURE__*/jsxRuntime.jsx(Typography, {
@@ -1024,9 +1425,10 @@ var FoldersTree = function FoldersTree(_ref) {
     autoExpandParent: true,
     blockNode: true,
     showLine: true,
+    className: "neeto-sidebar-folders-tree",
     componentToken: {
-      titleHeight: 25,
-      indentSize: 25
+      titleHeight: 24,
+      indentSize: 24
     },
     fieldNames: {
       key: "sid"
@@ -1037,7 +1439,7 @@ var FoldersTree = function FoldersTree(_ref) {
       return /*#__PURE__*/jsxRuntime.jsx(FolderNode, {
         folder: folder,
         isActive: folder.sid === activeFolderSid,
-        link: utils.buildUrl(config.folderPath, _objectSpread(_objectSpread({}, params), {}, {
+        link: utils$1.buildUrl(config.folderPath, _objectSpread(_objectSpread({}, params), {}, {
           folderId: folder.sid
         }))
       });
@@ -1046,6 +1448,11 @@ var FoldersTree = function FoldersTree(_ref) {
   });
 };
 
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+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:6px!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:rgb(var(--neeto-ui-white));color:rgb(var(--neeto-ui-accent-800))!important;font-weight:500}.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))}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL25lZXRvLWZvbGRlcnMtbmFuby5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlDQUNFLHVCQUNGLENBRUEsb0VBRUUsV0FBQSxDQURBLDRCQUVGLENBRUEsMkZBRUUsMkNBQUEsQ0FEQSwrQ0FBQSxDQUVBLGVBQ0YsQ0FFQSxnRkFDRSxpQkFDRixDQUVBLGlDQUNFLHlEQUNGIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlX19mb2xkZXItbm9kZSB7XG4gIGNvbG9yOiBpbmhlcml0ICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtbm9kZS1jb250ZW50LXdyYXBwZXIge1xuICBwYWRkaW5nLWlubGluZTogNnB4ICFpbXBvcnRhbnQ7XG4gIG1pbi13aWR0aDogMDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS1ub2RlLWNvbnRlbnQtd3JhcHBlci5hbnQtdHJlZS1ub2RlLXNlbGVjdGVkIHtcbiAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1hY2NlbnQtODAwKSkgIWltcG9ydGFudDtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtc3dpdGNoZXIgLmFudC10cmVlLXN3aXRjaGVyLWljb24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi5uZWV0by1mb2xkZXJzLWdyaWQtdmlldy13cmFwcGVyIHtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoYXV0by1maWxsLCBtaW5tYXgoMjU2cHgsIDFmcikpO1xufSJdfQ== */";
+n(css,{});
+
 exports.FoldersContext = FoldersContext;
 exports.FoldersList = FoldersList;
 exports.FoldersTree = FoldersTree;