@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/CommonGrid/components/OversizedScroll.js

@@ -1,88 +1,36 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n      overflow-x: ",
-        ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n      width: ",
-        "px;\n    "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  position: sticky;\n  left: 0;\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import "react";
+import styled$1, { css } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styled, { css } from "@xstyled/styled-components";
-var ScrollWrapper = styled.div(_templateObject1(), function(props) {
-    return props.columnLayout !== "no-scroll" && css(_templateObject(), props.columnLayout === "sticky" ? "inherit" : "auto");
-});
-var ScrollSizer = styled.div(_templateObject3(), function(props) {
-    return props.columnLayout !== "no-scroll" && css(_templateObject2(), props.totalColumnsWidth);
-});
-var FloatPosition = styled.div(_templateObject4());
-var OversizedScroll = function OversizedScroll(param) {
-    var columnLayout = param.columnLayout, children = param.children, floatingChildren = param.floatingChildren, totalColumnsWidth = param.totalColumnsWidth, ref = param.ref;
-    return /* @__PURE__ */ jsxs(ScrollWrapper, {
-        columnLayout: columnLayout,
-        className: "gridWrapper",
-        ref: ref,
-        children: [
-            /* @__PURE__ */ jsx(ScrollSizer, {
-                columnLayout: columnLayout,
-                totalColumnsWidth: totalColumnsWidth,
-                children: children
-            }),
-            floatingChildren && /* @__PURE__ */ jsx(FloatPosition, {
-                children: floatingChildren
-            })
-        ]
-    });
+//#region packages/ui/Blocks/CommonGrid/components/OversizedScroll.tsx
+const ScrollWrapper = styled$1.div`
+  ${(props) => props.columnLayout !== "no-scroll" && css`
+      overflow-x: ${props.columnLayout === "sticky" ? "inherit" : "auto"};
+      position: relative;
+      @media (min-width: 1024px) {
+        overflow-x: auto;
+      }
+    `};
+`;
+const ScrollSizer = styled$1.div`
+  ${(props) => props.columnLayout !== "no-scroll" && css`
+      width: ${props.totalColumnsWidth}px;
+    `};
+`;
+const FloatPosition = styled$1.div`
+  position: sticky;
+  left: 0;
+`;
+const OversizedScroll = ({ columnLayout, children, floatingChildren, totalColumnsWidth, ref }) => {
+	return /* @__PURE__ */ jsxs(ScrollWrapper, {
+		columnLayout,
+		className: "gridWrapper",
+		ref,
+		children: [/* @__PURE__ */ jsx(ScrollSizer, {
+			columnLayout,
+			totalColumnsWidth,
+			children
+		}), floatingChildren && /* @__PURE__ */ jsx(FloatPosition, { children: floatingChildren })]
+	});
 };
-var OversizedScroll_default = OversizedScroll;
-export { OversizedScroll_default as default };
+//#endregion
+export { OversizedScroll as default };

package/ui/Blocks/CommonGrid/components/PresetsModalBody/components/TagRemove.js

@@ -1,22 +1,19 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  cursor: pointer;\n  margin-left: 6px;\n  height: fit-content;\n  width: 17px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  &:hover {\n    svg {\n      fill: black;\n    }\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
 import { styled } from "@xstyled/styled-components";
-var TagRemove = styled.div(_templateObject());
+//#region packages/ui/Blocks/CommonGrid/components/PresetsModalBody/components/TagRemove.tsx
+const TagRemove = styled.div`
+  cursor: pointer;
+  margin-left: 6px;
+  height: fit-content;
+  width: 17px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  &:hover {
+    svg {
+      fill: black;
+    }
+  }
+`;
+//#endregion
 export { TagRemove };

package/ui/Blocks/CommonGrid/components/PresetsModalBody/index.js

@@ -1,205 +1,92 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Cancel } from "../../../../Elements/Icon/icons/Cancel.js";
+import Button from "../../../../Elements/Button/Button.js";
+import Tag from "../../../../Elements/Tag/Tag.js";
+import { palettes } from "../../../../Elements/Tag/palettes.js";
+import { H6 } from "../../../../Elements/Typography/Typography.js";
+import { TagRemove } from "./components/TagRemove.js";
 import { useMemo } from "react";
-import Button from "../../../../Elements/Button/Button";
-import { Cancel } from "../../../../Elements/Icon/icons/Cancel";
-import Tag from "../../../../Elements/Tag/Tag";
-import { palettes } from "../../../../Elements/Tag/palettes";
-import { H6 } from "../../../../Elements/Typography/Typography";
-import { TagRemove } from "./components/TagRemove";
-import { Trans } from "@lingui/react";
 import { x } from "@xstyled/styled-components";
-import isEmpty from "lodash/isEmpty";
-var PresetsModalBody = function PresetsModalBody(param) {
-    var onOpenCreatePresetModal = param.onOpenCreatePresetModal, gridPresets = param.gridPresets, handleSelectPreset = param.handleSelectPreset, handleOpenDeletePresetModal = param.handleOpenDeletePresetModal, selectedPresetName = param.selectedPresetName, handleExportPresets = param.handleExportPresets, handleImportButtonClick = param.handleImportButtonClick, handleImportPresets = param.handleImportPresets, fileInputRef = param.fileInputRef, filters = param.filters;
-    var presets = useMemo(function() {
-        return Object.entries(gridPresets || {});
-    }, [
-        gridPresets
-    ]);
-    var hasPresets = !!(presets === null || presets === void 0 ? void 0 : presets.length);
-    return /* @__PURE__ */ jsxs(x.div, {
-        children: [
-            /* @__PURE__ */ jsx(x.div, {
-                display: "flex",
-                rowGap: "12px",
-                flexWrap: "wrap",
-                children: hasPresets ? presets === null || presets === void 0 ? void 0 : presets.map(function(param, index) {
-                    var _param = _sliced_to_array(param, 2), presetName = _param[0], filters2 = _param[1];
-                    var isSelected = presetName === selectedPresetName;
-                    return /* @__PURE__ */ jsxs(Tag, _object_spread_props(_object_spread({
-                        size: "big",
-                        onClick: handleSelectPreset(presetName, filters2)
-                    }, isSelected ? palettes.redWhite : palettes.redRed), {
-                        pointer: true,
-                        children: [
-                            /* @__PURE__ */ jsx(H6, {
-                                mt: 0,
-                                mb: 0,
-                                variant: "semiBold",
-                                children: presetName
-                            }),
-                            /* @__PURE__ */ jsx(TagRemove, {
-                                onClick: handleOpenDeletePresetModal(presetName),
-                                children: /* @__PURE__ */ jsx(Cancel, {
-                                    fill: isSelected ? "white" : "#DB2B19",
-                                    width: "11px",
-                                    height: "11px"
-                                })
-                            })
-                        ]
-                    }), "".concat(presetName, "_").concat(index));
-                }) : /* @__PURE__ */ jsx(Trans, {
-                    id: "dataGrid.noPresets.title",
-                    message: "No presets available"
-                })
-            }),
-            /* @__PURE__ */ jsx(x.input, {
-                type: "file",
-                accept: ".json",
-                onChange: handleImportPresets,
-                ref: fileInputRef,
-                display: "none"
-            }),
-            /* @__PURE__ */ jsxs(x.div, {
-                display: "flex",
-                mt: "34px",
-                gap: "12px",
-                justifyContent: "space-between",
-                children: [
-                    /* @__PURE__ */ jsxs(x.div, {
-                        display: "flex",
-                        gap: "12px",
-                        children: [
-                            hasPresets && /* @__PURE__ */ jsx(Button, {
-                                onClick: handleExportPresets,
-                                type: "button",
-                                appearance: "secondary",
-                                children: /* @__PURE__ */ jsx(Trans, {
-                                    id: "dataGrid.exportPreset.title",
-                                    message: "Export presets"
-                                })
-                            }),
-                            /* @__PURE__ */ jsx(Button, {
-                                onClick: handleImportButtonClick,
-                                type: "button",
-                                appearance: "secondary",
-                                children: /* @__PURE__ */ jsx(Trans, {
-                                    id: "dataGrid.importPreset.title",
-                                    message: "Import presets"
-                                })
-                            })
-                        ]
-                    }),
-                    /* @__PURE__ */ jsx(Button, {
-                        type: "button",
-                        onClick: onOpenCreatePresetModal,
-                        disabled: isEmpty(filters),
-                        children: /* @__PURE__ */ jsx(Trans, {
-                            id: "dataGrid.createNewPreset.title",
-                            message: "Create new preset"
-                        })
-                    })
-                ]
-            })
-        ]
-    });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+import isEmpty from "lodash/isEmpty.js";
+//#region packages/ui/Blocks/CommonGrid/components/PresetsModalBody/index.tsx
+const PresetsModalBody = ({ onOpenCreatePresetModal, gridPresets, handleSelectPreset, handleOpenDeletePresetModal, selectedPresetName, handleExportPresets, handleImportButtonClick, handleImportPresets, fileInputRef, filters }) => {
+	const presets = useMemo(() => Object.entries(gridPresets || {}), [gridPresets]);
+	const hasPresets = !!presets?.length;
+	return /* @__PURE__ */ jsxs(x.div, { children: [
+		/* @__PURE__ */ jsx(x.div, {
+			display: "flex",
+			rowGap: "12px",
+			flexWrap: "wrap",
+			children: hasPresets ? presets?.map(([presetName, filters], index) => {
+				const isSelected = presetName === selectedPresetName;
+				return /* @__PURE__ */ jsxs(Tag, {
+					size: "big",
+					onClick: handleSelectPreset(presetName, filters),
+					...isSelected ? palettes.redWhite : palettes.redRed,
+					pointer: true,
+					children: [/* @__PURE__ */ jsx(H6, {
+						mt: 0,
+						mb: 0,
+						variant: "semiBold",
+						children: presetName
+					}), /* @__PURE__ */ jsx(TagRemove, {
+						onClick: handleOpenDeletePresetModal(presetName),
+						children: /* @__PURE__ */ jsx(Cancel, {
+							fill: isSelected ? "white" : "#DB2B19",
+							width: "11px",
+							height: "11px"
+						})
+					})]
+				}, `${presetName}_${index}`);
+			}) : /* @__PURE__ */ jsx(Trans, {
+				id: "dataGrid.noPresets.title",
+				message: "No presets available"
+			})
+		}),
+		/* @__PURE__ */ jsx(x.input, {
+			type: "file",
+			accept: ".json",
+			onChange: handleImportPresets,
+			ref: fileInputRef,
+			display: "none"
+		}),
+		/* @__PURE__ */ jsxs(x.div, {
+			display: "flex",
+			mt: "34px",
+			gap: "12px",
+			justifyContent: "space-between",
+			children: [/* @__PURE__ */ jsxs(x.div, {
+				display: "flex",
+				gap: "12px",
+				children: [hasPresets && /* @__PURE__ */ jsx(Button, {
+					onClick: handleExportPresets,
+					type: "button",
+					appearance: "secondary",
+					children: /* @__PURE__ */ jsx(Trans, {
+						id: "dataGrid.exportPreset.title",
+						message: "Export presets"
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					onClick: handleImportButtonClick,
+					type: "button",
+					appearance: "secondary",
+					children: /* @__PURE__ */ jsx(Trans, {
+						id: "dataGrid.importPreset.title",
+						message: "Import presets"
+					})
+				})]
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				onClick: onOpenCreatePresetModal,
+				disabled: isEmpty(filters),
+				children: /* @__PURE__ */ jsx(Trans, {
+					id: "dataGrid.createNewPreset.title",
+					message: "Create new preset"
+				})
+			})]
+		})
+	] });
 };
+//#endregion
 export { PresetsModalBody };

package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.js

@@ -1,56 +1,31 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  position: ",
-        ";\n  z-index: ",
-        ";\n  width: auto;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import Button_default from "../../../../Elements/Button/index.js";
+import Input_default from "../../../../Forms/Input/index.js";
+import styled$1, { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
-import Button from "../../../../Elements/Button";
-import Input from "../../../../Forms/Input";
-import styled, { x } from "@xstyled/styled-components";
-var StyledInput = styled(Input)(_templateObject(), function(param) {
-    var isMobileInputView = param.isMobileInputView;
-    return isMobileInputView ? "absolute" : "relative";
-}, function(param) {
-    var isMobileInputView = param.isMobileInputView;
-    return isMobileInputView ? "3" : "1";
+//#region packages/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.tsx
+const StyledInput = styled$1(Input_default)`
+  position: ${({ isMobileInputView }) => isMobileInputView ? "absolute" : "relative"};
+  z-index: ${({ isMobileInputView }) => isMobileInputView ? "3" : "1"};
+  width: auto;
+`;
+const QuickFilter = ({ searchedValue, placeholderText, onChange, onClick, displayInput, onClear, isMobileInputView, alwaysShowClear }) => /* @__PURE__ */ jsx(x.div, {
+	mr: "12px",
+	children: displayInput ? /* @__PURE__ */ jsx(StyledInput, {
+		icon: "search",
+		type: "text",
+		value: searchedValue,
+		placeholder: placeholderText,
+		onChange,
+		variant: "gray",
+		onClear,
+		alwaysShowClear,
+		isMobileInputView
+	}) : /* @__PURE__ */ jsx(Button_default, {
+		variant: "icon",
+		appearance: "secondary",
+		icon: "search",
+		onClick
+	})
 });
-var QuickFilter = function QuickFilter(param) {
-    var searchedValue = param.searchedValue, placeholderText = param.placeholderText, onChange = param.onChange, onClick = param.onClick, displayInput = param.displayInput, onClear = param.onClear, isMobileInputView = param.isMobileInputView, alwaysShowClear = param.alwaysShowClear;
-    return /* @__PURE__ */ jsx(x.div, {
-        mr: "12px",
-        children: displayInput ? /* @__PURE__ */ jsx(StyledInput, {
-            icon: "search",
-            type: "text",
-            value: searchedValue,
-            placeholder: placeholderText,
-            onChange: onChange,
-            variant: "gray",
-            onClear: onClear,
-            alwaysShowClear: alwaysShowClear,
-            isMobileInputView: isMobileInputView
-        }) : /* @__PURE__ */ jsx(Button, {
-            variant: "icon",
-            appearance: "secondary",
-            icon: "search",
-            onClick: onClick
-        })
-    });
-};
-var QuickFilter_default = QuickFilter;
-export { QuickFilter_default as default };
+//#endregion
+export { QuickFilter as default };

package/ui/Blocks/CommonGrid/components/QuickFilter/index.js

@@ -1,3 +1,5 @@
-import QuickFilter from "./QuickFilter";
+import QuickFilter from "./QuickFilter.js";
+//#region packages/ui/Blocks/CommonGrid/components/QuickFilter/index.tsx
 var QuickFilter_default = QuickFilter;
+//#endregion
 export { QuickFilter_default as default };

package/ui/Blocks/CommonGrid/components/Resize.js

@@ -1,55 +1,48 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  height: 100%;\n  width: 7px;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 2;\n  right: 0px;\n  top: 0px;\n  border-left: 1px dotted;\n  border-right: 1px dotted;\n  border-left-color: primary;\n  border-right-color: primary;\n  opacity: 0;\n  transition: opacity 0.6s;\n  &:hover {\n    opacity: 1;\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
-import styled from "@xstyled/styled-components";
-var Resizer = styled.div(_templateObject());
-var Resize = function Resize(param) {
-    var onResize = param.onResize, onResizeOver = param.onResizeOver, onResizeOut = param.onResizeOut;
-    var handleMouseDown = useCallback(function(downEvent) {
-        if ((downEvent === null || downEvent === void 0 ? void 0 : downEvent.button) !== 0) {
-            return;
-        }
-        var initialPosX = downEvent === null || downEvent === void 0 ? void 0 : downEvent.pageX;
-        var handleMouseMove = function handleMouseMove(moveEvent) {
-            onResize(moveEvent.pageX - initialPosX);
-        };
-        var handleMouseUp = function handleMouseUp1(upEvent) {
-            document.removeEventListener("mousemove", handleMouseMove);
-            document.removeEventListener("mouseup", handleMouseUp);
-            upEvent.stopPropagation();
-            upEvent.preventDefault();
-        };
-        document.addEventListener("mousemove", handleMouseMove);
-        document.addEventListener("mouseup", handleMouseUp);
-        downEvent.stopPropagation();
-        downEvent.preventDefault();
-    }, [
-        onResize
-    ]);
-    return /* @__PURE__ */ jsx(Resizer, {
-        className: "resizer",
-        onMouseDown: handleMouseDown,
-        onMouseOver: onResizeOver,
-        onMouseOut: onResizeOut
-    });
+import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/Resize.tsx
+const Resizer = styled$1.div`
+  height: 100%;
+  width: 7px;
+  cursor: col-resize;
+  position: absolute;
+  z-index: 2;
+  right: 0px;
+  top: 0px;
+  border-left: 1px dotted;
+  border-right: 1px dotted;
+  border-left-color: primary;
+  border-right-color: primary;
+  opacity: 0;
+  transition: opacity 0.6s;
+  &:hover {
+    opacity: 1;
+  }
+`;
+const Resize = ({ onResize, onResizeOver, onResizeOut }) => {
+	return /* @__PURE__ */ jsx(Resizer, {
+		className: "resizer",
+		onMouseDown: useCallback((downEvent) => {
+			if (downEvent?.button !== 0) return;
+			const initialPosX = downEvent?.pageX;
+			const handleMouseMove = (moveEvent) => {
+				onResize(moveEvent.pageX - initialPosX);
+			};
+			const handleMouseUp = (upEvent) => {
+				document.removeEventListener("mousemove", handleMouseMove);
+				document.removeEventListener("mouseup", handleMouseUp);
+				upEvent.stopPropagation();
+				upEvent.preventDefault();
+			};
+			document.addEventListener("mousemove", handleMouseMove);
+			document.addEventListener("mouseup", handleMouseUp);
+			downEvent.stopPropagation();
+			downEvent.preventDefault();
+		}, [onResize]),
+		onMouseOver: onResizeOver,
+		onMouseOut: onResizeOut
+	});
 };
-var Resize_default = Resize;
-export { Resize_default as default };
+//#endregion
+export { Resize as default };