@monolith-forensics/monolith-ui 1.1.30 → 1.1.32

package/dist/CheckBox/CheckBox.js

@@ -1,25 +1,20 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_1 = require("react");
-const fa_1 = require("react-icons/fa");
-const CheckBox = (0, styled_components_1.default)(({ className, defaultValue = false, value, partialCheck = false, onChange = () => { }, }) => {
-    const [checkedState, setCheckedState] = (0, react_1.useState)(defaultValue);
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { useState, useEffect } from "react";
+import { FaCheckSquare, FaRegSquare, FaRegMinusSquare } from "react-icons/fa";
+const CheckBox = styled(({ className, defaultValue = false, value, partialCheck = false, onChange = () => { }, }) => {
+    const [checkedState, setCheckedState] = useState(defaultValue);
     const handleChange = (e) => {
         e.stopPropagation();
         setCheckedState(!checkedState);
         onChange(!checkedState);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (value !== undefined)
             setCheckedState(value);
     }, [value]);
     const _checked = value === undefined ? checkedState : value;
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, onClick: handleChange, children: partialCheck === true ? ((0, jsx_runtime_1.jsx)(fa_1.FaRegMinusSquare, { className: "checkbox partial" })) : _checked === true ? ((0, jsx_runtime_1.jsx)(fa_1.FaCheckSquare, { className: "checkbox checked" })) : ((0, jsx_runtime_1.jsx)(fa_1.FaRegSquare, { className: "checkbox unchecked" })) }));
+    return (_jsx("div", { className: className, onClick: handleChange, children: partialCheck === true ? (_jsx(FaRegMinusSquare, { className: "checkbox partial" })) : _checked === true ? (_jsx(FaCheckSquare, { className: "checkbox checked" })) : (_jsx(FaRegSquare, { className: "checkbox unchecked" })) }));
 }) `
   display: flex;
   align-items: center;
@@ -43,4 +38,4 @@ const CheckBox = (0, styled_components_1.default)(({ className, defaultValue = f
 }};
   }
 `;
-exports.default = CheckBox;
+export default CheckBox;

package/dist/CheckBox/index.js

@@ -1,8 +1 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var CheckBox_1 = require("./CheckBox");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(CheckBox_1).default; } });
+export { default } from "./CheckBox";

package/dist/DateInput/DateInput.js

@@ -1,16 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const moment_1 = __importDefault(require("moment"));
-const react_1 = require("@floating-ui/react");
-const react_2 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const __1 = require("..");
-const core_1 = require("../core");
-const StyledInputContainer = styled_components_1.default.div `
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import { useFloating, flip, offset, FloatingPortal } from "@floating-ui/react";
+import { useEffect, useMemo, useRef, useState, } from "react";
+import styled from "styled-components";
+import { FieldLabel, Calendar } from "..";
+import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, } from "../core";
+const StyledInputContainer = styled.div `
   position: relative;
 
   caret-color: transparent;
@@ -127,7 +122,7 @@ const StyledInputContainer = styled_components_1.default.div `
     border: 1px solid ${(props) => props.theme.palette.primary.main};
   }
 `;
-const InputSegment = styled_components_1.default.div `
+const InputSegment = styled.div `
   user-select: none;
   display: flex;
   flex-direction: row;
@@ -219,8 +214,8 @@ function parseTimestamp(timestamp, format, utc = false) {
         const { pattern, placeholder, type, momentType } = matchSegment(segment);
         const value = timestamp
             ? utc === true
-                ? moment_1.default.utc(timestamp).format(pattern)
-                : (0, moment_1.default)(timestamp).format(pattern)
+                ? moment.utc(timestamp).format(pattern)
+                : moment(timestamp).format(pattern)
             : placeholder;
         return {
             value,
@@ -233,27 +228,27 @@ function parseTimestamp(timestamp, format, utc = false) {
     });
     return segments;
 }
-const DateInput = (0, styled_components_1.default)(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:ss", label, description, arrow = true, size = "sm", variant = "outlined", clearable = false, required = false, onChange = () => { }, min, max, error, enableCalendar = false, utc = false, closeOnSelect = true, }) => {
-    const [value, setValue] = (0, react_2.useState)(defaultValue);
-    const [selectedSegment, setSelectedSegment] = (0, react_2.useState)();
-    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
+const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:ss", label, description, arrow = true, size = "sm", variant = "outlined", clearable = false, required = false, onChange = () => { }, min, max, error, enableCalendar = false, utc = false, closeOnSelect = true, }) => {
+    const [value, setValue] = useState(defaultValue);
+    const [selectedSegment, setSelectedSegment] = useState();
+    const [isOpen, setIsOpen] = useState(false);
     // Check if format is date only and does not include time
     const isDateOnly = format.match(/(HH|h|mm|ss|SSS|A|Z)/) === null;
-    const mainRef = (0, react_2.useRef)(null);
-    const typedKeys = (0, react_2.useRef)("");
-    const { refs, floatingStyles } = (0, react_1.useFloating)({
+    const mainRef = useRef(null);
+    const typedKeys = useRef("");
+    const { refs, floatingStyles } = useFloating({
         open: isOpen,
         onOpenChange: setIsOpen,
         placement: "bottom-start",
         strategy: "absolute",
         // Handle collisions with the viewport
-        middleware: [(0, react_1.flip)(), (0, react_1.offset)(5)],
+        middleware: [flip(), offset(5)],
     });
-    const segments = (0, react_2.useMemo)(() => parseTimestamp((0, moment_1.default)(value).toISOString(), format, utc), [value, format, utc]);
+    const segments = useMemo(() => parseTimestamp(moment(value).toISOString(), format, utc), [value, format, utc]);
     const checkValidRange = (value) => {
-        if (min && (0, moment_1.default)(value).isBefore(min))
+        if (min && moment(value).isBefore(min))
             return false;
-        if (max && (0, moment_1.default)(value).isAfter(max))
+        if (max && moment(value).isAfter(max))
             return false;
         return true;
     };
@@ -343,12 +338,12 @@ const DateInput = (0, styled_components_1.default)(({ className, defaultValue, f
                 if (selectedSegment.type === "separator")
                     return prev;
                 let newValue = prev
-                    ? (0, moment_1.default)(prev).add(1, selectedSegment.type).toISOString()
-                    : (0, moment_1.default)().toISOString();
+                    ? moment(prev).add(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
                 if (!checkValidRange(newValue))
                     return prev;
                 if (isDateOnly) {
-                    newValue = (0, moment_1.default)(newValue).format("YYYY-MM-DD");
+                    newValue = moment(newValue).format("YYYY-MM-DD");
                 }
                 onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
                 return newValue;
@@ -361,12 +356,12 @@ const DateInput = (0, styled_components_1.default)(({ className, defaultValue, f
                 if (selectedSegment.type === "separator")
                     return prev;
                 let newValue = prev
-                    ? (0, moment_1.default)(prev).subtract(1, selectedSegment.type).toISOString()
-                    : (0, moment_1.default)().toISOString();
+                    ? moment(prev).subtract(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
                 if (!checkValidRange(newValue))
                     return prev;
                 if (isDateOnly) {
-                    newValue = (0, moment_1.default)(newValue).format("YYYY-MM-DD");
+                    newValue = moment(newValue).format("YYYY-MM-DD");
                 }
                 onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
                 return newValue;
@@ -389,7 +384,7 @@ const DateInput = (0, styled_components_1.default)(({ className, defaultValue, f
             setValue((prev) => {
                 if (!(selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.momentType))
                     return prev;
-                const newValue = (0, moment_1.default)(prev)
+                const newValue = moment(prev)
                     .set(selectedSegment.momentType, parseInt(tempValue, 10) -
                     (selectedSegment.type === "month" ? 1 : 0))
                     .toISOString();
@@ -413,8 +408,8 @@ const DateInput = (0, styled_components_1.default)(({ className, defaultValue, f
                 if (selectedSegment.type === "separator")
                     return prev;
                 const newValue = prev
-                    ? (0, moment_1.default)(prev).subtract(1, selectedSegment.type).toISOString()
-                    : (0, moment_1.default)().toISOString();
+                    ? moment(prev).subtract(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
                 if (!checkValidRange(newValue))
                     return prev;
                 onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
@@ -426,8 +421,8 @@ const DateInput = (0, styled_components_1.default)(({ className, defaultValue, f
                 if (selectedSegment.type === "separator")
                     return prev;
                 const newValue = prev
-                    ? (0, moment_1.default)(prev).add(1, selectedSegment.type).toISOString()
-                    : (0, moment_1.default)().toISOString();
+                    ? moment(prev).add(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
                 if (!checkValidRange(newValue))
                     return prev;
                 onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
@@ -442,13 +437,13 @@ const DateInput = (0, styled_components_1.default)(({ className, defaultValue, f
         if (!pastedText)
             return;
         // check if pasted text is a valid timestamp
-        if (!(0, moment_1.default)(pastedText).isValid())
+        if (!moment(pastedText).isValid())
             return;
-        const parsedTimestamp = moment_1.default.utc(pastedText).toISOString();
+        const parsedTimestamp = moment.utc(pastedText).toISOString();
         setValue(parsedTimestamp);
     };
     // Close on outside click
-    (0, react_2.useEffect)(() => {
+    useEffect(() => {
         const close = (e) => {
             var _a, _b;
             const target = e.target;
@@ -467,7 +462,7 @@ const DateInput = (0, styled_components_1.default)(({ className, defaultValue, f
         return () => document.removeEventListener("click", close);
     }, [refs.floating]);
     // Global Wheel Event when segement selected
-    (0, react_2.useEffect)(() => {
+    useEffect(() => {
         if (selectedSegment) {
             document.addEventListener("wheel", handleWheelEvent);
         }
@@ -475,7 +470,7 @@ const DateInput = (0, styled_components_1.default)(({ className, defaultValue, f
             document.removeEventListener("wheel", handleWheelEvent);
         };
     }, [selectedSegment]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [label && ((0, jsx_runtime_1.jsx)(__1.FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), (0, jsx_runtime_1.jsxs)(StyledInputContainer, { ref: (ref) => {
+    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: (ref) => {
                     mainRef.current = ref;
                     refs.setReference(ref);
                 }, onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: (e) => {
@@ -483,22 +478,22 @@ const DateInput = (0, styled_components_1.default)(({ className, defaultValue, f
                     setSelectedSegment(segments[0]);
                 }, "data-empty": !value, role: "textbox", size: size, variant: variant, "data-button-right": arrow || clearable, children: [segments.map((segment, i) => {
                         if (segment.type === "separator") {
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "separator", tabIndex: -1, onClick: (e) => {
+                            return (_jsx("div", { className: "separator", tabIndex: -1, onClick: (e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
                                 }, onFocus: (e) => e.preventDefault(), onPointerDown: (e) => e.preventDefault(), "data-type": "separator", "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, children: segment.text }, i));
                         }
-                        return ((0, jsx_runtime_1.jsx)(InputSegment, { className: "input", contentEditable: true, suppressContentEditableWarning: true, tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: value ? segment.text : segment.placeholder }, i));
-                    }), utc && (0, jsx_runtime_1.jsx)("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, {})) : null] }), enableCalendar && isOpen && ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: (0, jsx_runtime_1.jsx)(core_1.StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, children: (0, jsx_runtime_1.jsx)(core_1.StyledContent, { maxDropdownHeight: "fit-content", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.Calendar, { defaultValue: value ? (0, moment_1.default)(value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
+                        return (_jsx(InputSegment, { className: "input", contentEditable: true, suppressContentEditableWarning: true, tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: value ? segment.text : segment.placeholder }, i));
+                    }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, {})) : null] }), enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { defaultValue: value ? moment(value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
                                     setValue((prev) => {
                                         // make copy of prev variable
-                                        const oldValue = (0, moment_1.default)(prev).toISOString();
-                                        const result = `${(0, moment_1.default)(date).format("YYYY-MM-DD")}T${(0, moment_1.default)(prev || undefined).format("HH:mm:ss")}`;
-                                        let isoResult = (0, moment_1.default)(result).toISOString();
+                                        const oldValue = moment(prev).toISOString();
+                                        const result = `${moment(date).format("YYYY-MM-DD")}T${moment(prev || undefined).format("HH:mm:ss")}`;
+                                        let isoResult = moment(result).toISOString();
                                         if (!checkValidRange(result))
                                             return oldValue;
                                         if (isDateOnly) {
-                                            isoResult = (0, moment_1.default)(result).format("YYYY-MM-DD");
+                                            isoResult = moment(result).format("YYYY-MM-DD");
                                         }
                                         onChange === null || onChange === void 0 ? void 0 : onChange(isoResult);
                                         setIsOpen(closeOnSelect ? false : true);
@@ -506,4 +501,4 @@ const DateInput = (0, styled_components_1.default)(({ className, defaultValue, f
                                     });
                                 }, includeTime: false }, 1) }) }) }) }))] }));
 }) ``;
-exports.default = DateInput;
+export default DateInput;

package/dist/DateInput/index.js

@@ -1,8 +1 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var DateInput_1 = require("./DateInput");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DateInput_1).default; } });
+export { default } from "./DateInput";

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,26 +1,21 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@floating-ui/react");
-const react_2 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const __1 = require("..");
-const use_debounce_1 = require("use-debounce");
-const StyledFloatContainer = styled_components_1.default.div `
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal, flip, useFloating, } from "@floating-ui/react";
+import { forwardRef, useEffect, useRef, useState, } from "react";
+import styled from "styled-components";
+import { Button, Tooltip, CheckBox, Input } from "..";
+import { useDebouncedCallback } from "use-debounce";
+const StyledFloatContainer = styled.div `
   z-index: 1500;
 `;
-const StyledInnerItemContainer = styled_components_1.default.div `
+const StyledInnerItemContainer = styled.div `
   overflow-y: auto;
 
   &[data-scroll-active="true"] {
     padding-right: 5px;
   }
 `;
-const SearchInput = (0, react_2.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(__1.Input, Object.assign({ ref: ref, style: { marginBottom: 8 } }, props)));
-const StyledItem = styled_components_1.default.div `
+const SearchInput = forwardRef((props, ref) => _jsx(Input, Object.assign({ ref: ref, style: { marginBottom: 8 } }, props)));
+const StyledItem = styled.div `
   color: ${(props) => props.theme.palette.text.primary};
   border-radius: 3px;
   display: flex;
@@ -75,7 +70,7 @@ const StyledItem = styled_components_1.default.div `
     color: ${(props) => props.theme.palette.text.primary};
   }
 `;
-const StyledContent = styled_components_1.default.div `
+const StyledContent = styled.div `
   position: relative;
   display: flex;
   flex-direction: column;
@@ -112,21 +107,21 @@ const StyledContent = styled_components_1.default.div `
     display: none;
   }
 `;
-const DropDownMenu = (0, styled_components_1.default)(({ className, children, data = [], variant = "outlined", defaultValue, multiselect = false, size = "xs", TooltipContent, renderOption, onChange, onItemSelect, onScroll, loading, arrow, searchable, dropDownProps, buttonProps, }) => {
+const DropDownMenu = styled(({ className, children, data = [], variant = "outlined", defaultValue, multiselect = false, size = "xs", TooltipContent, renderOption, onChange, onItemSelect, onScroll, loading, arrow, searchable, dropDownProps, buttonProps, }) => {
     var _a, _b, _c;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
-    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
-    const [selected, setSelected] = (0, react_2.useState)(defaultValue || []);
-    const [searchValue, setSearchValue] = (0, react_2.useState)("");
-    const scrollContainerRef = (0, react_2.useRef)(null);
-    const searchInputRef = (0, react_2.useRef)(null);
-    const { refs, floatingStyles, context } = (0, react_1.useFloating)({
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState(defaultValue || []);
+    const [searchValue, setSearchValue] = useState("");
+    const scrollContainerRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const { refs, floatingStyles, context } = useFloating({
         open: isOpen,
         onOpenChange: setIsOpen,
         placement: "bottom-start",
         strategy: "absolute",
         // Handle collisions with the viewport
-        middleware: [(0, react_1.flip)()],
+        middleware: [flip()],
     });
     const handleAddItem = (item) => {
         setSelected((prev) => {
@@ -144,11 +139,11 @@ const DropDownMenu = (0, styled_components_1.default)(({ className, children, da
             return newSelected;
         });
     };
-    const handleSearch = (0, use_debounce_1.useDebouncedCallback)((e) => {
+    const handleSearch = useDebouncedCallback((e) => {
         setSearchValue(e.target.value);
     }, 150);
     // Close on outside click
-    (0, react_2.useEffect)(() => {
+    useEffect(() => {
         const close = (e) => {
             var _a, _b, _c, _d;
             const target = e.target;
@@ -165,7 +160,7 @@ const DropDownMenu = (0, styled_components_1.default)(({ className, children, da
         document.addEventListener("mousedown", close);
         return () => document.removeEventListener("mousdown", close);
     }, [refs.floating, refs.reference]);
-    (0, react_2.useEffect)(() => {
+    useEffect(() => {
         var _a, _b;
         if (isOpen && searchable) {
             (_b = (_a = searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -176,9 +171,9 @@ const DropDownMenu = (0, styled_components_1.default)(({ className, children, da
     }, [isOpen, searchable]);
     const scrollActive = (((_b = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) || 0) >
         (((_c = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className + " mfDropDownMenu", children: [(0, jsx_runtime_1.jsx)(__1.Button, Object.assign({ ref: (ref) => {
+    return (_jsxs("div", { className: className + " mfDropDownMenu", children: [_jsx(Button, Object.assign({ ref: (ref) => {
                     refs.setReference(ref);
-                }, onMouseDown: () => setIsOpen(!isOpen), rightSection: arrow ? (0, jsx_runtime_1.jsx)("span", { children: "\u25BC" }) : null, size: size }, buttonProps, { children: children })), isOpen && ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: false, children: (0, jsx_runtime_1.jsx)(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: (0, jsx_runtime_1.jsx)(StyledContent, Object.assign({ className: "mfFloatingContent", style: { width: 150, maxWidth: 400 }, variant: variant }, dropDownProps, { children: (0, jsx_runtime_1.jsxs)(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [loading && (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }), searchable && ((0, jsx_runtime_1.jsx)(SearchInput, { ref: searchInputRef, variant: "outlined", placeholder: "Search", onChange: handleSearch })), !loading &&
+                }, onMouseDown: () => setIsOpen(!isOpen), rightSection: arrow ? _jsx("span", { children: "\u25BC" }) : null, size: size }, buttonProps, { children: children })), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(FloatingFocusManager, { context: context, modal: false, children: _jsx(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: _jsx(StyledContent, Object.assign({ className: "mfFloatingContent", style: { width: 150, maxWidth: 400 }, variant: variant }, dropDownProps, { children: _jsxs(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", placeholder: "Search", onChange: handleSearch })), !loading &&
                                         data
                                             .filter((item) => {
                                             var _a, _b, _c;
@@ -195,7 +190,7 @@ const DropDownMenu = (0, styled_components_1.default)(({ className, children, da
                                             const isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.find((s) => isObjectArray
                                                 ? (s === null || s === void 0 ? void 0 : s.value) === (item === null || item === void 0 ? void 0 : item.value)
                                                 : s === item));
-                                            return ((0, jsx_runtime_1.jsx)(__1.Tooltip, { content: TooltipContent ? ((0, jsx_runtime_1.jsx)(TooltipContent, { data: item.data })) : null, side: "left", children: (0, jsx_runtime_1.jsxs)(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
+                                            return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsxs(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
                                                         e.preventDefault();
                                                         e.stopPropagation();
                                                         if (multiselect) {
@@ -207,7 +202,7 @@ const DropDownMenu = (0, styled_components_1.default)(({ className, children, da
                                                             setIsOpen(false);
                                                         }
                                                         onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item);
-                                                    }, "data-selected": isSelected, size: size, children: [multiselect && (0, jsx_runtime_1.jsx)(__1.CheckBox, { value: isSelected }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (item === null || item === void 0 ? void 0 : item.label) || item })] }) }, index));
+                                                    }, "data-selected": isSelected, size: size, children: [multiselect && _jsx(CheckBox, { value: isSelected }), _jsx(_Fragment, { children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (item === null || item === void 0 ? void 0 : item.label) || item })] }) }, index));
                                         })] }) })) }) }) }))] }));
 }) ``;
-exports.default = DropDownMenu;
+export default DropDownMenu;

package/dist/DropDownMenu/index.js

@@ -1,8 +1 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var DropDownMenu_1 = require("./DropDownMenu");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DropDownMenu_1).default; } });
+export { default } from "./DropDownMenu";

package/dist/Error/Error.js

@@ -1,13 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const lucide_react_1 = require("lucide-react");
-const ErrorContainer = styled_components_1.default.div `
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import styled from "styled-components";
+import { XIcon, ShieldAlert } from "lucide-react";
+const ErrorContainer = styled.div `
   background-color: ${({ theme }) => theme.palette.error.main + "15"};
   color: ${({ theme }) => theme.palette.error.light};
   border: 1px solid #d93025;
@@ -18,21 +13,21 @@ const ErrorContainer = styled_components_1.default.div `
   border-radius: 5px;
   align-items: center;
 `;
-const CloseButton = styled_components_1.default.button `
+const CloseButton = styled.button `
   background: none;
   border: none;
   color: ${({ theme }) => theme.palette.error.light};
   cursor: pointer;
 `;
-const ErrorText = styled_components_1.default.span `
+const ErrorText = styled.span `
   margin-left: 10px;
   flex: 1;
 `;
 const ErrorComponent = ({ error }) => {
-    const [isVisible, setIsVisible] = (0, react_1.useState)(true);
+    const [isVisible, setIsVisible] = useState(true);
     const handleClose = () => {
         setIsVisible(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isVisible && ((0, jsx_runtime_1.jsxs)(ErrorContainer, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ShieldAlert, { size: 19 }), (0, jsx_runtime_1.jsx)(ErrorText, { children: error }), (0, jsx_runtime_1.jsx)(CloseButton, { onClick: handleClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { size: 19 }) })] })) }));
+    return (_jsx(_Fragment, { children: isVisible && (_jsxs(ErrorContainer, { children: [_jsx(ShieldAlert, { size: 19 }), _jsx(ErrorText, { children: error }), _jsx(CloseButton, { onClick: handleClose, children: _jsx(XIcon, { size: 19 }) })] })) }));
 };
-exports.default = ErrorComponent;
+export default ErrorComponent;

package/dist/Error/index.js

@@ -1,8 +1 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Error_1 = require("./Error");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Error_1).default; } });
+export { default } from "./Error";

package/dist/FieldLabel/FieldLabel.js

@@ -1,39 +1,10 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfoComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Tooltip = __importStar(require("@radix-ui/react-tooltip"));
-exports.InfoComponent = (0, styled_components_1.default)(({ className, children, description, label }) => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import * as Tooltip from "@radix-ui/react-tooltip";
+export const InfoComponent = styled(({ className, children, description, label }) => {
     if (!description)
         return children;
-    return ((0, jsx_runtime_1.jsx)(Tooltip.Provider, { delayDuration: 800, skipDelayDuration: 0, disableHoverableContent: true, children: (0, jsx_runtime_1.jsxs)(Tooltip.Root, { children: [(0, jsx_runtime_1.jsx)(Tooltip.Trigger, { asChild: true, children: children }), (0, jsx_runtime_1.jsx)(Tooltip.Portal, { children: (0, jsx_runtime_1.jsxs)(Tooltip.Content, { className: className, side: "right", sideOffset: 15, align: "start", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("div", { className: "title", children: label || "Info" }), (0, jsx_runtime_1.jsx)("div", { children: description || "N/A" })] }) })] }) }));
+    return (_jsx(Tooltip.Provider, { delayDuration: 800, skipDelayDuration: 0, disableHoverableContent: true, children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: children }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: className, side: "right", sideOffset: 15, align: "start", onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: "title", children: label || "Info" }), _jsx("div", { children: description || "N/A" })] }) })] }) }));
 }) `
   pointer-events: none;
   z-index: 999999;
@@ -53,8 +24,8 @@ exports.InfoComponent = (0, styled_components_1.default)(({ className, children,
     margin-bottom: 5px;
   }
 `;
-const FieldLabel = (0, styled_components_1.default)(({ className, children, error, description, size = "sm", }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className + " FieldLabel", children: [(0, jsx_runtime_1.jsx)(exports.InfoComponent, { description: description, label: children, children: (0, jsx_runtime_1.jsx)("div", { className: "label", children: children }) }), error && ((0, jsx_runtime_1.jsx)("div", { className: "error", title: error, children: error || "Invalid Value" }))] }));
+const FieldLabel = styled(({ className, children, error, description, size = "sm", }) => {
+    return (_jsxs("div", { className: className + " FieldLabel", children: [_jsx(InfoComponent, { description: description, label: children, children: _jsx("div", { className: "label", children: children }) }), error && (_jsx("div", { className: "error", title: error, children: error || "Invalid Value" }))] }));
 }) `
   user-select: none;
   font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -116,4 +87,4 @@ const FieldLabel = (0, styled_components_1.default)(({ className, children, erro
     color: ${({ theme }) => theme.palette.error.light};
   }
 `;
-exports.default = FieldLabel;
+export default FieldLabel;

package/dist/FieldLabel/index.js

@@ -1,8 +1 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var FieldLabel_1 = require("./FieldLabel");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(FieldLabel_1).default; } });
+export { default } from "./FieldLabel";

package/dist/FileInputField/FileInputField.js

@@ -1,16 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_dropzone_1 = require("react-dropzone");
-const __1 = require("..");
-const FileInputField = (0, styled_components_1.default)(({ className, children, label, error, required, size, onChange, onFocus, dropZoneOptions = {}, colSpan, style = {}, }) => {
-    const [files, setFiles] = (0, react_1.useState)([]);
-    const onDrop = (0, react_1.useCallback)((acceptedFiles) => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import styled from "styled-components";
+import { useDropzone } from "react-dropzone";
+import { Pill, FieldLabel } from "..";
+const FileInputField = styled(({ className, children, label, error, required, size, onChange, onFocus, dropZoneOptions = {}, colSpan, style = {}, }) => {
+    const [files, setFiles] = useState([]);
+    const onDrop = useCallback((acceptedFiles) => {
         setFiles(acceptedFiles);
         // Do something with the files
         onChange === null || onChange === void 0 ? void 0 : onChange(acceptedFiles);
@@ -18,8 +13,8 @@ const FileInputField = (0, styled_components_1.default)(({ className, children,
     const handleRemoveFile = (file) => {
         setFiles((prev) => prev.filter((f) => f !== file));
     };
-    const { getRootProps, getInputProps } = (0, react_dropzone_1.useDropzone)(Object.assign({ onDrop }, dropZoneOptions));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [label && ((0, jsx_runtime_1.jsx)(__1.FieldLabel, { error: error, asterisk: required, size: size, children: label })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "file-input-container" }, getRootProps(), { onFocus: onFocus, style: style, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps())), children && children, !children && (0, jsx_runtime_1.jsx)("div", { children: "Drop files here or click to select files ..." })] })), (0, jsx_runtime_1.jsx)("div", { className: "file-selections", children: files.map((file, index) => ((0, jsx_runtime_1.jsx)(__1.Pill, { size: "sm", showRemoveIcon: true, onRemove: () => handleRemoveFile(file), children: file.name }, index))) })] }));
+    const { getRootProps, getInputProps } = useDropzone(Object.assign({ onDrop }, dropZoneOptions));
+    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, children: label })), _jsxs("div", Object.assign({ className: "file-input-container" }, getRootProps(), { onFocus: onFocus, style: style, children: [_jsx("input", Object.assign({}, getInputProps())), children && children, !children && _jsx("div", { children: "Drop files here or click to select files ..." })] })), _jsx("div", { className: "file-selections", children: files.map((file, index) => (_jsx(Pill, { size: "sm", showRemoveIcon: true, onRemove: () => handleRemoveFile(file), children: file.name }, index))) })] }));
 }) `
   display: flex;
   flex-direction: column;
@@ -114,4 +109,4 @@ const FileInputField = (0, styled_components_1.default)(({ className, children,
     margin-top: 10px;
   }
 `;
-exports.default = FileInputField;
+export default FileInputField;

package/dist/FileInputField/index.js

@@ -1,8 +1 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var FileInputField_1 = require("./FileInputField");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(FileInputField_1).default; } });
+export { default } from "./FileInputField";