@codezee/sixtify-brahma 0.2.134 → 0.2.136

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codezee/sixtify-brahma",
-  "version": "0.2.134",
+  "version": "0.2.136",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hardikranpariya/sixtify-brahma.git"

package/packages/shared-components/dist/ActionButtons/ActionButtons.js

@@ -9,7 +9,7 @@ const material_1 = require("@mui/material");
 const noop_1 = __importDefault(require("lodash/noop"));
 const react_1 = require("react");
 const utils_1 = require("../utils");
-function ActionButtons({ buttons, justifyContent = "end", sx, buttonSx, shouldOpenMenuOnShortcut = false, shortcutKey = "a", }) {
+function ActionButtons({ buttons, justifyContent = "end", sx, buttonSx, shouldOpenMenuOnShortcut = false, shortcutKey = "n", }) {
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const [openMenuKey, setOpenMenuKey] = (0, react_1.useState)(null);
     const buttonRefs = (0, react_1.useRef)({});

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,aAAa,CAAC;AAIrB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAE/D,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAe,EACf,QAAQ,EACR,UAAU,EACV,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,IAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAA6B,EAC7B,WAAsD,EACtD,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAwHpB"}
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,aAAa,CAAC;AAIrB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAE/D,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAe,EACf,QAAQ,EACR,UAAU,EACV,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,IAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAA6B,EAC7B,WAAsD,EACtD,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA6RpB"}

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.js

@@ -1,10 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.error_with_transaltion = void 0;
 exports.FileUpload = FileUpload;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const lodash_1 = require("lodash");
+const isFunction_1 = __importDefault(require("lodash/isFunction"));
+const isNull_1 = __importDefault(require("lodash/isNull"));
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const PadBox_1 = require("../../PadBox");
@@ -15,53 +19,162 @@ const Skeleton_1 = require("./Skeleton");
 exports.error_with_transaltion = "error_with_transaltion";
 function FileUpload({ loading = false, onChange, isDisabled, multiple = false, required = false, error, helperText, label, fileNames, size = 10, name, setError, accept = utils_1.SUPPORTED_FILE_TYPES, acceptTitle = "Only JPG, PNG, PDF files are accepted.", ...restProps }) {
     const theme = (0, material_1.useTheme)();
-    const { red, iron } = theme.palette.app.color;
+    const { red, iron, black } = theme.palette.app.color;
     const { t } = (0, react_i18next_1.useTranslation)();
     const inputRef = (0, react_1.useRef)(null);
-    // eslint-disable-next-line sonarjs/cognitive-complexity
-    const handleFileChange = (event) => {
-        if (event.target.files) {
-            const files = Array.from(event.target.files);
-            const uploadFiles = [];
-            const inValidFiles = [];
-            let isShowError = false;
-            for (const element of files) {
-                if (!(0, utils_1.isFileSizeValid)(element, size)) {
-                    isShowError = true;
-                    inValidFiles.push(t("fileUpload.fileSize.error.message", {
-                        fileName: element.name,
-                        fileSize: size,
-                    }));
-                }
-                else if (accept.length && !(0, utils_1.isFileTypeValid)(element, accept)) {
-                    isShowError = true;
-                    inValidFiles.push(t("fileUpload.fileType.error.message", {
-                        fileName: element.name,
-                    }));
-                }
-                else {
-                    uploadFiles.push(element);
-                }
+    const dragCounter = (0, react_1.useRef)(0);
+    const rafRef = (0, react_1.useRef)(null);
+    const animStartRef = (0, react_1.useRef)(null);
+    const animFromRef = (0, react_1.useRef)(0);
+    const animToRef = (0, react_1.useRef)(0);
+    const [dragProgress, setDragProgress] = (0, react_1.useState)(0);
+    const easeOutCubic = (x) => 1 - Math.pow(1 - x, 3);
+    const processFiles = (files) => {
+        const result = files.reduce((acc, currentFile) => {
+            const { name } = currentFile;
+            if (!(0, utils_1.isFileSizeValid)(currentFile, size)) {
+                acc.errors.push(t("fileUpload.fileSize.error.message", {
+                    fileName: name,
+                    fileSize: size,
+                }));
+                return acc;
             }
-            if (isShowError) {
-                if ((0, lodash_1.isFunction)(setError)) {
-                    setError(name, {
-                        type: exports.error_with_transaltion,
-                        message: inValidFiles.join("\n"),
-                    });
-                }
-                return;
+            if (accept.length && !(0, utils_1.isFileTypeValid)(currentFile, accept)) {
+                acc.errors.push(t("fileUpload.fileType.error.message", {
+                    fileName: name,
+                }));
+                return acc;
             }
-            if (uploadFiles?.length > 0) {
-                onChange(uploadFiles);
-                event.target.value = "";
+            acc.validFiles.push(currentFile);
+            return acc;
+        }, { validFiles: [], errors: [] });
+        const { errors, validFiles } = result;
+        if (errors.length && (0, isFunction_1.default)(setError)) {
+            setError(name, {
+                type: exports.error_with_transaltion,
+                message: errors.join("\n"),
+            });
+            return;
+        }
+        if (!validFiles.length) {
+            return;
+        }
+        onChange(validFiles);
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+    };
+    const handleFileChange = (event) => {
+        const files = event.target.files;
+        if (files) {
+            processFiles(Array.from(files));
+            event.target.value = "";
+        }
+    };
+    const animate = (timestamp) => {
+        if ((0, isNull_1.default)(animStartRef.current)) {
+            animStartRef.current = timestamp;
+        }
+        const duration = 220;
+        const elapsed = Math.min(timestamp - animStartRef.current, duration);
+        const tNorm = !duration ? 1 : elapsed / duration;
+        const eased = easeOutCubic(tNorm);
+        const value = animFromRef.current + (animToRef.current - animFromRef.current) * eased;
+        setDragProgress(Number(value.toFixed(3)));
+        if (elapsed < duration) {
+            rafRef.current = requestAnimationFrame(animate);
+            return;
+        }
+        setDragProgress(animToRef.current);
+        animStartRef.current = null;
+        rafRef.current = null;
+    };
+    const animateTo = (target) => {
+        const clamped = Math.max(0, Math.min(1, target));
+        if (rafRef.current) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+        animFromRef.current = dragProgress;
+        animToRef.current = clamped;
+        animStartRef.current = null;
+        rafRef.current = requestAnimationFrame(animate);
+    };
+    (0, react_1.useEffect)(() => {
+        // useEffect ensures RAF cleanup happens when the component unmounts
+        return () => {
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
             }
+        };
+    }, []);
+    const handleDragEnter = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDisabled) {
+            return;
+        }
+        dragCounter.current += 1;
+        if (dragCounter.current) {
+            animateTo(1);
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDisabled) {
+            return;
+        }
+        if (e.dataTransfer) {
+            e.dataTransfer.dropEffect = "copy";
+        }
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDisabled) {
+            return;
+        }
+        dragCounter.current -= 1;
+        if (dragCounter.current <= 0) {
+            dragCounter.current = 0;
+            animateTo(0);
+        }
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDisabled) {
+            return;
+        }
+        dragCounter.current = 0;
+        animateTo(0);
+        const dt = e.dataTransfer;
+        if (!dt) {
+            return;
+        }
+        const { files } = dt;
+        if (!files?.length) {
+            return;
+        }
+        const fileArray = Array.from(files);
+        processFiles(fileArray);
+        if (inputRef.current) {
+            inputRef.current.value = "";
         }
     };
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { disabled: isDisabled, required: required, children: label }), (0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileUploadContainer, { onClick: () => inputRef.current?.click(), error: error, disabled: isDisabled, ...restProps, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "20px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", alignItems: "center", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileInput, { disabled: isDisabled, type: "file", accept: accept.toString(), ref: inputRef, onChange: handleFileChange, multiple: multiple }), (0, jsx_runtime_1.jsx)(Svgs_1.SvgDrop, { disabled: isDisabled }), (0, jsx_runtime_1.jsx)(material_1.Typography, { color: isDisabled ? iron[800] : "revert-layer", children: "Drag & drop files or Browse" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: isDisabled ? iron[800] : "revert-layer", children: acceptTitle })] }) }) }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: {
+    const boxShadowIntensity = 0.08 + 0.12 * dragProgress;
+    const scale = 1 + 0.02 * dragProgress;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { disabled: isDisabled, required: required, children: label }), (0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileUploadContainer, { onClick: () => inputRef.current?.click(), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, error: error, disabled: isDisabled, sx: {
+                    transform: `scale(${scale})`,
+                    transition: "transform 30ms linear",
+                    boxShadow: `0 0px ${12 * dragProgress}px ${(0, material_1.alpha)(black[900], boxShadowIntensity)}`,
+                    cursor: isDisabled ? "not-allowed" : "pointer",
+                }, ...restProps, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "20px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", alignItems: "center", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileInput, { disabled: isDisabled, type: "file", accept: accept.toString(), ref: inputRef, onChange: handleFileChange, multiple: multiple }), (0, jsx_runtime_1.jsx)(Svgs_1.SvgDrop, { disabled: isDisabled }), (0, jsx_runtime_1.jsx)(material_1.Typography, { color: isDisabled ? iron[800] : "revert-layer", children: "Drag & drop files or Browse" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: isDisabled ? iron[800] : "revert-layer", children: acceptTitle })] }) }) }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: {
                     color: `${red[900]}`,
                     whiteSpace: "pre",
                     textWrap: "wrap",

package/packages/shared-components/dist/FormFields/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAWzB,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,eAAe,GACf,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,QAAQ,CAAC;AAEb,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAY7D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,IAAI,CAAC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,eAAe,CAAC,EAAE;QAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,YAAoB,EACpB,mBAA2B,EAC3B,IAAI,EACJ,aAAuC,EACvC,UAAoB,EACpB,QAAQ,EACR,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,eAGC,EACD,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAmJnB"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAWzB,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,eAAe,GACf,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,QAAQ,CAAC;AAEb,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAY7D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,IAAI,CAAC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,eAAe,CAAC,EAAE;QAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,YAAoB,EACpB,mBAA2B,EAC3B,IAAI,EACJ,aAAuC,EACvC,UAAoB,EACpB,QAAQ,EACR,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,eAGC,EACD,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAoJnB"}

package/packages/shared-components/dist/FormFields/TextField/TextField.js

@@ -73,7 +73,8 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
                             } }) }))] })), (0, jsx_runtime_1.jsx)(material_1.TextField, { disabled: disabled, required: required, fullWidth: true, onKeyDown: handleKeyDown, placeholder: styling === "default" ? placeholder : placeholder || label, type: type, label: styling === "default" ? label : undefined, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), inputProps: {
                     min: 0,
                 }, error: Boolean(error), helperText: error?.message, onChange: (event) => {
-                    const { selectionStart, selectionEnd, setSelectionRange } = event.target;
+                    const input = event.target;
+                    const { selectionStart, selectionEnd } = input;
                     let value = event.target.value || null;
                     if (typeof value === "string" && value.trim() === "") {
                         value = null;
@@ -97,8 +98,8 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
                     else {
                         onChange(cleanedVal);
                     }
-                    setTimeout(() => {
-                        setSelectionRange(selectionStart, selectionEnd);
-                    }, 0);
+                    requestAnimationFrame(() => {
+                        input.setSelectionRange(selectionStart, selectionEnd);
+                    });
                 }, value: typeof value === "string" ? value.trimStart() : (value ?? ""), ...restField, ...inputFieldProps })] }));
 }

package/packages/shared-components/dist/Svgs/SvgBranches.d.ts

@@ -0,0 +1,8 @@
+export type PathDefinition = {
+    definition: string;
+};
+export declare const SvgBranches: import("react").ForwardRefExoticComponent<Readonly<{
+    paths: PathDefinition[];
+    strokeColor?: string;
+}> & import("react").RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=SvgBranches.d.ts.map

package/packages/shared-components/dist/Svgs/SvgBranches.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgBranches.d.ts","sourceRoot":"","sources":["../../src/Svgs/SvgBranches.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GAAG;IAC3B,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAOF,eAAO,MAAM,WAAW;WAJf,cAAc,EAAE;kBACT,MAAM;kDAqCrB,CAAC"}

package/packages/shared-components/dist/Svgs/SvgBranches.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgBranches = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const map_1 = __importDefault(require("lodash/map"));
+const react_1 = require("react");
+exports.SvgBranches = (0, react_1.forwardRef)(({ paths, strokeColor }, ref) => {
+    const theme = (0, material_1.useTheme)();
+    const { butterflyBlue } = theme.palette.app.color;
+    const color = strokeColor ?? butterflyBlue[900];
+    return ((0, jsx_runtime_1.jsx)("svg", { ref: ref, style: {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            pointerEvents: "none",
+            overflow: "visible",
+        }, children: (0, map_1.default)(paths, ({ definition }) => ((0, jsx_runtime_1.jsx)("path", { d: definition, stroke: color, strokeWidth: 2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.95 }, definition))) }));
+});
+exports.SvgBranches.displayName = "SvgBranches";

package/packages/shared-components/dist/Svgs/index.d.ts

@@ -33,6 +33,8 @@ export * from "./SvgPageNotFound";
 export * from "./SvgProfile";
 export * from "./SvgReGenerate";
 export * from "./SvgView";
+export * from "./SvgKeyBoard";
+export * from "./SvgBranches";
 export * from "./SvgEmail";
 export * from "./SvgIndicator";
 export * from "./SvgPhone";

package/packages/shared-components/dist/Svgs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Svgs/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Svgs/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}

package/packages/shared-components/dist/Svgs/index.js

@@ -49,6 +49,8 @@ __exportStar(require("./SvgPageNotFound"), exports);
 __exportStar(require("./SvgProfile"), exports);
 __exportStar(require("./SvgReGenerate"), exports);
 __exportStar(require("./SvgView"), exports);
+__exportStar(require("./SvgKeyBoard"), exports);
+__exportStar(require("./SvgBranches"), exports);
 __exportStar(require("./SvgEmail"), exports);
 __exportStar(require("./SvgIndicator"), exports);
 __exportStar(require("./SvgPhone"), exports);

package/packages/shared-components/dist/Tree/DesktopTreeNode.d.ts

@@ -0,0 +1,10 @@
+import type { Nodes } from "./Tree";
+type DesktopTreeNodeProps = Readonly<{
+    node: Nodes;
+    setRef: (id: string, element: HTMLDivElement | null) => void;
+    themeColor?: string;
+    itemWidth: string;
+}>;
+export declare const DesktopTreeNode: ({ node, setRef, themeColor, itemWidth, }: DesktopTreeNodeProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DesktopTreeNode.d.ts.map

package/packages/shared-components/dist/Tree/DesktopTreeNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopTreeNode.d.ts","sourceRoot":"","sources":["../../src/Tree/DesktopTreeNode.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEpC,KAAK,oBAAoB,GAAG,QAAQ,CAAC;IACnC,IAAI,EAAE,KAAK,CAAC;IACZ,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,eAAO,MAAM,eAAe,GAAI,0CAK7B,oBAAoB,4CAqCtB,CAAC"}

package/packages/shared-components/dist/Tree/DesktopTreeNode.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopTreeNode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const map_1 = __importDefault(require("lodash/map"));
+const Node_1 = require("./Node");
+const DesktopTreeNode = ({ node, setRef, themeColor, itemWidth, }) => {
+    const { id, children } = node;
+    const hasChildren = !!children?.length;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: "flex",
+            gap: 3,
+            alignItems: "flex-start",
+            flex: `1 0 ${itemWidth}`,
+        }, children: [(0, jsx_runtime_1.jsx)(Node_1.Node, { node: node, isParent: hasChildren, innerRef: (el) => setRef(id, el), themeColor: themeColor }), hasChildren && ((0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 1, sx: { mt: 0.5 }, children: (0, map_1.default)(children, (child) => ((0, jsx_runtime_1.jsx)(exports.DesktopTreeNode, { node: child, setRef: setRef, themeColor: themeColor, itemWidth: itemWidth }, child.id))) }))] }, id));
+};
+exports.DesktopTreeNode = DesktopTreeNode;

package/packages/shared-components/dist/Tree/MobileTreeNode.d.ts

@@ -0,0 +1,9 @@
+import type { Nodes } from "./Tree";
+type MobileTreeNodeProps = Readonly<{
+    node: Nodes;
+    setRef: (id: string, element: HTMLDivElement | null) => void;
+    themeColor?: string;
+}>;
+export declare const MobileTreeNode: ({ node, setRef, themeColor, }: MobileTreeNodeProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MobileTreeNode.d.ts.map

package/packages/shared-components/dist/Tree/MobileTreeNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileTreeNode.d.ts","sourceRoot":"","sources":["../../src/Tree/MobileTreeNode.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEpC,KAAK,mBAAmB,GAAG,QAAQ,CAAC;IAClC,IAAI,EAAE,KAAK,CAAC;IACZ,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,GAAI,+BAI5B,mBAAmB,4CA8BrB,CAAC"}

package/packages/shared-components/dist/Tree/MobileTreeNode.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileTreeNode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const map_1 = __importDefault(require("lodash/map"));
+const PadBox_1 = require("../PadBox");
+const Node_1 = require("./Node");
+const MobileTreeNode = ({ node, setRef, themeColor, }) => {
+    const { id, children } = node;
+    const hasChildren = !!children?.length;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 1, children: [(0, jsx_runtime_1.jsx)(Node_1.Node, { node: node, isParent: hasChildren, innerRef: (el) => setRef(id, el), themeColor: themeColor }), hasChildren && ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { paddingLeft: 3, paddingTop: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 1, children: (0, map_1.default)(children, (child) => ((0, jsx_runtime_1.jsx)(exports.MobileTreeNode, { node: child, setRef: setRef, themeColor: themeColor }, child.id))) }) }))] }, id));
+};
+exports.MobileTreeNode = MobileTreeNode;

package/packages/shared-components/dist/Tree/Node.d.ts

@@ -0,0 +1,9 @@
+import type { Nodes } from "./Tree";
+export type NodeProps = Readonly<{
+    node: Nodes;
+    innerRef?: React.RefCallback<HTMLDivElement>;
+    isParent?: boolean;
+    themeColor?: string;
+}>;
+export declare const Node: ({ node, innerRef, isParent, themeColor, }: NodeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Node.d.ts.map

package/packages/shared-components/dist/Tree/Node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../src/Tree/Node.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;IAC/B,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,IAAI,GAAI,2CAKlB,SAAS,4CA4CX,CAAC"}

package/packages/shared-components/dist/Tree/Node.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Node = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const PadBox_1 = require("../PadBox");
+const Node_styled_1 = require("./Node.styled");
+const Node = ({ node, innerRef, isParent = false, themeColor, }) => {
+    const { id, title, subtitle, value } = node;
+    const theme = (0, material_1.useTheme)();
+    const { butterflyBlue, slate } = theme.palette.app.color;
+    const baseColor = themeColor ?? butterflyBlue[900];
+    const nodeBorderColor = isParent ? baseColor : (0, material_1.alpha)(baseColor, 0.7);
+    const nodeBackgroundColor = isParent ? (0, material_1.alpha)(baseColor, 0.1) : "none";
+    const nodeSubtitleColor = slate[900];
+    return ((0, jsx_runtime_1.jsxs)(Node_styled_1.StyledNodePaper, { elevation: isParent ? 3 : 0, ref: innerRef, isParent: isParent, borderColor: nodeBorderColor, backgroundColor: nodeBackgroundColor, baseColor: baseColor, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", noWrap: true, children: title }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", color: nodeSubtitleColor, noWrap: true, children: subtitle })] }), (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { paddingLeft: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { ml: "auto", textAlign: "right" }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { noWrap: true, variant: "body2", children: value }) }) })] }, id));
+};
+exports.Node = Node;

package/packages/shared-components/dist/Tree/Node.styled.d.ts

@@ -0,0 +1,10 @@
+import type { PaperProps } from "@mui/material";
+import type React from "react";
+export type StyledNodePaperProps = {
+    isParent: boolean;
+    borderColor: string;
+    backgroundColor: string;
+    baseColor: string;
+};
+export declare const StyledNodePaper: React.ComponentType<PaperProps & StyledNodePaperProps>;
+//# sourceMappingURL=Node.styled.d.ts.map

package/packages/shared-components/dist/Tree/Node.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Node.styled.d.ts","sourceRoot":"","sources":["../../src/Tree/Node.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,aAAa,CAC/C,UAAU,GAAG,oBAAoB,CA0BlC,CAAC"}

package/packages/shared-components/dist/Tree/Node.styled.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledNodePaper = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.StyledNodePaper = (0, styles_1.styled)(material_1.Paper, {
+    shouldForwardProp: (prop) => prop !== "$isParent" &&
+        prop !== "$borderColor" &&
+        prop !== "$backgroundColor" &&
+        prop !== "$baseColor",
+})(({ theme, isParent, borderColor, backgroundColor, baseColor }) => ({
+    width: "auto",
+    minWidth: 0,
+    padding: theme.spacing(1),
+    borderRadius: 12,
+    border: `1px solid ${borderColor}`,
+    boxShadow: isParent ? `0 6px 18px ${(0, material_1.alpha)(baseColor, 0.2)}` : "none",
+    backgroundColor,
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    minHeight: 40,
+    overflow: "hidden",
+    flex: "1 1 auto",
+    [theme.breakpoints.down("sm")]: {
+        flex: "1 1 100%",
+    },
+}));

package/packages/shared-components/dist/Tree/Tree.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+/**
+ * Nodes type definition.
+ * @property id - Must be unique in Every Nodes, including children nodes.
+ */
+export type Nodes = {
+    id: string;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    value?: string | number;
+    children?: Nodes[];
+};
+export type TreeProps = Readonly<{
+    nodes: Nodes[];
+    direction?: "horizontal" | "vertical";
+    columns?: number;
+    color?: string;
+}>;
+export declare const Tree: ({ nodes, direction, columns, color, }: TreeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tree.d.ts.map

package/packages/shared-components/dist/Tree/Tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../src/Tree/Tree.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpE;;;GAGG;AACH,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;IAC/B,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,eAAO,MAAM,IAAI,GAAI,uCAKlB,SAAS,4CA+QX,CAAC"}

package/packages/shared-components/dist/Tree/Tree.js

@@ -0,0 +1,147 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tree = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const forEach_1 = __importDefault(require("lodash/forEach"));
+const map_1 = __importDefault(require("lodash/map"));
+const omit_1 = __importDefault(require("lodash/omit"));
+const values_1 = __importDefault(require("lodash/values"));
+const react_1 = require("react");
+const PadBox_1 = require("../PadBox");
+const Svgs_1 = require("../Svgs");
+const utils_1 = require("../utils");
+const DesktopTreeNode_1 = require("./DesktopTreeNode");
+const MobileTreeNode_1 = require("./MobileTreeNode");
+const Tree = ({ nodes, direction = "horizontal", columns = 3, color, }) => {
+    const { isMobile } = (0, utils_1.useGetDeviceType)();
+    const refs = (0, react_1.useRef)({});
+    const containerRef = (0, react_1.useRef)(null);
+    const svgRef = (0, react_1.useRef)(null);
+    const resizeObserverRef = (0, react_1.useRef)(null);
+    const [paths, setPaths] = (0, react_1.useState)([]);
+    const setRef = (id, element) => {
+        if (element) {
+            refs.current[id] = element;
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(element);
+            }
+            return;
+        }
+        refs.current = (0, omit_1.default)(refs.current, id);
+    };
+    const getRectangleElementPosition = (element) => {
+        if (!element) {
+            return null;
+        }
+        return element.getBoundingClientRect();
+    };
+    const createMobilePath = (parentRectangle, currentRectangle, svgRect) => {
+        const { left: parentLeft, width: parentWidth, bottom: parentBottom, } = parentRectangle;
+        const { left: currentLeft, width: currentWidth, top: currentTop, } = currentRectangle;
+        const { left: svgLeft, top: svgTop } = svgRect;
+        const startX = parentLeft + parentWidth / 2 - svgLeft;
+        const startY = parentBottom - svgTop;
+        const endX = currentLeft + currentWidth / 2 - svgLeft;
+        const endY = currentTop - svgTop;
+        const midY = startY + Math.max(12, (endY - startY) / 2);
+        return `M ${startX} ${startY} C ${startX} ${midY} ${endX} ${midY} ${endX} ${endY}`;
+    };
+    const createDesktopPath = (parentRectangle, currentRectangle, svgRect) => {
+        const { right: parentRight, top: parentTop, height: parentHeight, } = parentRectangle;
+        const { left: currentLeft, top: currentTop, height: currentHeight, } = currentRectangle;
+        const { left: svgLeft, top: svgTop } = svgRect;
+        const startX = parentRight - svgLeft;
+        const startY = parentTop + parentHeight / 2 - svgTop;
+        const endX = currentLeft - svgLeft;
+        const endY = currentTop + currentHeight / 2 - svgTop;
+        const dx = endX - startX;
+        const absDx = Math.abs(dx);
+        const curvature = Math.min(120, Math.max(24, absDx / 2));
+        const direction = dx >= 0 ? 1 : -1;
+        const c1x = startX + curvature * direction;
+        const c1y = startY;
+        const c2x = endX - curvature * direction;
+        const c2y = endY;
+        return `M ${startX} ${startY} C ${c1x} ${c1y} ${c2x} ${c2y} ${endX} ${endY}`;
+    };
+    const computePathsRecursive = (nodeList, svgRect, paths) => {
+        (0, forEach_1.default)(nodeList, (node) => {
+            const { id, children } = node;
+            if (!children?.length) {
+                return;
+            }
+            const parentElement = refs.current[id];
+            if (!parentElement) {
+                return;
+            }
+            const parentRectangle = getRectangleElementPosition(parentElement);
+            if (!parentRectangle) {
+                return;
+            }
+            (0, forEach_1.default)(children, (child) => {
+                const { id, children } = child;
+                const currentElement = refs.current[id];
+                if (!currentElement) {
+                    return;
+                }
+                const currentRectangle = getRectangleElementPosition(currentElement);
+                if (!currentRectangle) {
+                    return;
+                }
+                const pathData = isMobile || direction === "vertical"
+                    ? createMobilePath(parentRectangle, currentRectangle, svgRect)
+                    : createDesktopPath(parentRectangle, currentRectangle, svgRect);
+                paths.push({ definition: pathData });
+                if (children?.length) {
+                    computePathsRecursive([child], svgRect, paths);
+                }
+            });
+        });
+    };
+    const computePaths = () => {
+        const svg = svgRef.current;
+        const container = containerRef.current;
+        if (!svg || !container) {
+            return;
+        }
+        const width = container.clientWidth;
+        svg.setAttribute("width", String(width));
+        svg.setAttribute("height", "auto");
+        const svgRect = container.getBoundingClientRect();
+        const newPaths = [];
+        computePathsRecursive(nodes, svgRect, newPaths);
+        setPaths(newPaths);
+    };
+    (0, react_1.useEffect)(() => {
+        const scheduleCompute = () => {
+            return requestAnimationFrame(() => {
+                computePaths();
+            });
+        };
+        const initialId = scheduleCompute();
+        const observer = new ResizeObserver(scheduleCompute);
+        resizeObserverRef.current = observer;
+        if (containerRef.current) {
+            observer.observe(containerRef.current);
+        }
+        (0, values_1.default)(refs.current).forEach((el) => observer.observe(el));
+        const handleResize = scheduleCompute;
+        window.addEventListener("resize", handleResize);
+        return () => {
+            cancelAnimationFrame(initialId);
+            observer.disconnect();
+            resizeObserverRef.current = null;
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [nodes, isMobile, direction]);
+    const itemWidth = `calc(${100 / columns}% - 24px)`;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ref: containerRef, variant: "outlined", component: material_1.Paper, position: "relative", sx: {
+            overflowX: "hidden",
+            overflowY: "visible",
+        }, children: [(0, jsx_runtime_1.jsx)(Svgs_1.SvgBranches, { ref: svgRef, paths: paths, strokeColor: color }), isMobile || direction === "vertical" ? ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: 2 }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 3, children: (0, map_1.default)(nodes, (node) => ((0, jsx_runtime_1.jsx)(MobileTreeNode_1.MobileTreeNode, { node: node, setRef: setRef, themeColor: color }, node.id))) }) })) : ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: 2 }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", alignItems: "flex-start", justifyContent: "flex-start", flexWrap: "wrap", gap: 3, children: (0, map_1.default)(nodes, (node) => ((0, jsx_runtime_1.jsx)(DesktopTreeNode_1.DesktopTreeNode, { node: node, setRef: setRef, themeColor: color, itemWidth: itemWidth }, node.id))) }) }))] }));
+};
+exports.Tree = Tree;

package/packages/shared-components/dist/Tree/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Tree";
+export * from "./Node";
+//# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/Tree/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tree/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/packages/shared-components/dist/Tree/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Tree"), exports);
+__exportStar(require("./Node"), exports);

package/packages/shared-components/dist/index.d.ts

@@ -32,4 +32,5 @@ export * from "./Toast";
 export * from "./Tooltip";
 export * from "./UserProfileMenu";
 export * from "./utils";
+export * from "./Tree";
 //# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,sBAAsB,CAAC;AACrC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,sBAAsB,CAAC;AACrC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/packages/shared-components/dist/index.js

@@ -48,3 +48,4 @@ __exportStar(require("./Toast"), exports);
 __exportStar(require("./Tooltip"), exports);
 __exportStar(require("./UserProfileMenu"), exports);
 __exportStar(require("./utils"), exports);
+__exportStar(require("./Tree"), exports);