@monolith-forensics/monolith-ui 1.1.29 → 1.1.30

package/dist/Flyout/Flyout.js

@@ -0,0 +1,111 @@
+"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 lucide_react_1 = require("lucide-react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const ANIMATION_TIME = 300;
+const StyledOverlay = (0, styled_components_1.default)(react_1.FloatingOverlay) `
+  background-color: rgba(0, 0, 0, 0.3);
+  position: fixed;
+  inset: 0;
+  z-index: 1400;
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+const StyledClose = styled_components_1.default.div `
+  position: absolute;
+  top: 20px;
+  right: 20px;
+
+  color: ${(props) => props.theme.palette.text.secondary};
+`;
+const StyledButton = styled_components_1.default.button `
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+
+  color: ${(props) => props.theme.palette.text.primary};
+
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+  }
+`;
+const StyledContent = styled_components_1.default.div `
+  background-color: ${({ theme }) => theme.name === "DARK"
+    ? theme.palette.background.alt
+    : theme.palette.background.default};
+  border-radius: 6px;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+  position: fixed;
+  margin: 10px;
+
+  top: 0px;
+  right: 0px;
+  width: 50vw;
+  height: calc(100vh - 20px);
+
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
+
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+
+  overflow-y: hidden;
+
+  &:focus {
+    outline: none;
+  }
+
+  animation: contentShow ${ANIMATION_TIME}ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  // slide in from right to left
+  @keyframes contentShow {
+    from {
+      transform: translate(100%, 0);
+    }
+    to {
+      transform: translate(0, 0);
+    }
+  }
+`;
+const StyledInnerContent = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+
+  overflow-y: auto;
+  padding: 25px;
+`;
+const Flyout = ({ children, open = false, onClose = () => { }, style = {}, closeOnOutsideClick = true, showCloseButton = true, }) => {
+    const { refs, floatingStyles, context } = (0, react_1.useFloating)({
+        open,
+        onOpenChange: (isOpen) => {
+            if (!isOpen) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        },
+    });
+    const handleMouseDown = (event) => {
+        var _a, _b;
+        const target = event.target;
+        if (((_b = (_a = target === null || target === void 0 ? void 0 : target.className) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, "mf-ModalOverlay")) &&
+            closeOnOutsideClick) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: open && ((0, jsx_runtime_1.jsx)(StyledOverlay, { className: "mf-ModalOverlay", lockScroll: true, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: true, children: (0, jsx_runtime_1.jsxs)(StyledContent, Object.assign({ style: style, className: `mf-Modal mf-Flyout`, ref: refs.setFloating }, floatingStyles, { translate: undefined, children: [showCloseButton && ((0, jsx_runtime_1.jsx)(StyledClose, { children: (0, jsx_runtime_1.jsx)(StyledButton, { onMouseDown: () => onClose === null || onClose === void 0 ? void 0 : onClose(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { size: 18 }) }) })), (0, jsx_runtime_1.jsx)(StyledInnerContent, { className: "mf-Flyout inner-content", children: children })] })) }) })) }));
+};
+exports.default = Flyout;

package/dist/Flyout/FlyoutHeader.d.ts

@@ -0,0 +1,5 @@
+interface FlyoutHeaderProps {
+    hasBorder?: boolean;
+}
+declare const FlyoutHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FlyoutHeaderProps>> & string;
+export default FlyoutHeader;

package/dist/Flyout/FlyoutHeader.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const FlyoutHeader = styled_components_1.default.div `
+  border-bottom: ${({ theme, hasBorder }) => hasBorder ? `1px solid ${theme.palette.divider}` : "none"};
+
+  min-height: 50px;
+`;
+exports.default = FlyoutHeader;

package/dist/Flyout/FlyoutTitle.d.ts

@@ -0,0 +1,2 @@
+declare const FlyoutTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export default FlyoutTitle;

package/dist/Flyout/FlyoutTitle.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const FlyoutTitle = styled_components_1.default.h1 `
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0px;
+  color: ${(props) => props.theme.palette.text.primary};
+`;
+exports.default = FlyoutTitle;

package/dist/Flyout/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Flyout";
+export { default as FlyoutHeader } from "./FlyoutHeader";
+export { default as FlyoutTitle } from "./FlyoutTitle";

package/dist/Flyout/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlyoutTitle = exports.FlyoutHeader = exports.default = void 0;
+var Flyout_1 = require("./Flyout");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Flyout_1).default; } });
+var FlyoutHeader_1 = require("./FlyoutHeader");
+Object.defineProperty(exports, "FlyoutHeader", { enumerable: true, get: function () { return __importDefault(FlyoutHeader_1).default; } });
+var FlyoutTitle_1 = require("./FlyoutTitle");
+Object.defineProperty(exports, "FlyoutTitle", { enumerable: true, get: function () { return __importDefault(FlyoutTitle_1).default; } });

package/dist/FormSection/FormSection.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+interface FormSectionProps {
+    children?: ReactNode;
+    className?: string;
+    title?: string;
+    defaultOpen?: boolean;
+}
+declare const FormSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<FormSectionProps, never>> & string & Omit<({ className, title, children, defaultOpen }: FormSectionProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default FormSection;

package/dist/FormSection/FormSection.js

@@ -0,0 +1,51 @@
+"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 lucide_react_1 = require("lucide-react");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const FormSection = (0, styled_components_1.default)(({ className, title, children, defaultOpen = true }) => {
+    const [open, setOpen] = (0, react_1.useState)(defaultOpen);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsxs)("div", { className: "section-header", onClick: (e) => setOpen((prev) => !prev), children: [(0, jsx_runtime_1.jsx)("h3", { children: title }), (0, jsx_runtime_1.jsx)("div", { className: "section-line" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { size: 18, className: open ? "open" : "" })] }), (0, jsx_runtime_1.jsx)("div", { className: "section-content", "data-open": open, children: children })] }));
+}) `
+  h3 {
+    margin: 0;
+  }
+
+  .section-header {
+    user-select: none;
+    cursor: pointer;
+    margin-bottom: 10px;
+
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+
+    .section-line {
+      flex: 1;
+      height: 1px;
+      background-color: ${({ theme }) => theme.palette.divider};
+    }
+
+    svg {
+      transition: transform 0.2s;
+      color: ${({ theme }) => theme.palette.text.secondary};
+
+      &.open {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .section-content {
+    padding: 10px 0px;
+    &[data-open="false"] {
+      display: none;
+    }
+  }
+`;
+exports.default = FormSection;

package/dist/FormSection/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./FormSection";

package/dist/FormSection/index.js

@@ -0,0 +1,8 @@
+"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 FormSection_1 = require("./FormSection");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(FormSection_1).default; } });

package/dist/Grid/Grid.d.ts

@@ -0,0 +1,8 @@
+interface GridProps {
+    className?: string;
+    children: React.ReactNode;
+    col?: number;
+    width?: string | number;
+}
+declare const Grid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<GridProps, never>> & string & Omit<({ className, children }: GridProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default Grid;

package/dist/Grid/Grid.js

@@ -0,0 +1,18 @@
+"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 Grid = (0, styled_components_1.default)(({ className, children }) => {
+    return (0, jsx_runtime_1.jsx)("div", { className: className, children: children });
+}) `
+  display: grid;
+  grid-template-columns: repeat(${({ col }) => col || 1}, minmax(0, 1fr));
+  gap: 20px;
+
+  width: ${({ width }) => Number.isInteger(width) ? `${width}px` : width || "100%"};
+  height: auto;
+`;
+exports.default = Grid;

package/dist/Grid/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Grid";

package/dist/Grid/index.js

@@ -0,0 +1,8 @@
+"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 Grid_1 = require("./Grid");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Grid_1).default; } });

package/dist/IconButton/IconButton.d.ts

@@ -0,0 +1,5 @@
+import { ButtonProps } from "../Button/Button.js";
+declare const IconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, ButtonProps>> & string & Omit<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export default IconButton;

package/dist/IconButton/IconButton.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const __1 = require("..");
+const IconButton = (0, styled_components_1.default)(__1.Button) `
+  padding: ${({ size, variant }) => {
+    if (variant === "text")
+        return `0px 0px`;
+    switch (size) {
+        case "xxs":
+            return `0px 4px`;
+        case "xs":
+            return `0px 4px`;
+        case "sm":
+            return `0px 6px`;
+        case "md":
+            return `0px 8px`;
+        case "lg":
+            return `0px 10px`;
+        case "xl":
+            return `0px 12px`;
+        default:
+            return `0px 6px`;
+    }
+}};
+`;
+exports.default = IconButton;

package/dist/IconButton/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./IconButton";

package/dist/IconButton/index.js

@@ -0,0 +1,8 @@
+"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 IconButton_1 = require("./IconButton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(IconButton_1).default; } });

package/dist/Input/Input.d.ts

@@ -0,0 +1,21 @@
+import { Size, Variant } from "../core";
+export interface InputProps {
+    ref?: React.Ref<HTMLInputElement>;
+    className?: string;
+    size?: Size;
+    variant?: Variant;
+    width?: string | number | null | undefined;
+    style?: React.CSSProperties;
+    placeholder?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+}
+declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
+export default Input;

package/dist/Input/Input.js

@@ -0,0 +1,149 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 Input = (0, styled_components_1.default)((0, react_1.forwardRef)((_a, ref) => {
+    var { className, size = "sm", variant = "outlined", width } = _a, rest = __rest(_a, ["className", "size", "variant", "width"]);
+    return (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, className: className }, rest));
+})) `
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  pointer-events: "all";
+  user-select: "all";
+  outline: none;
+  box-sizing: border-box;
+
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "13px"};
+
+  height: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "30px"
+        : size === "md"
+            ? "36px"
+            : size === "lg"
+                ? "42px"
+                : size === "xl"
+                    ? "50px"
+                    : "30px"};
+
+  min-height: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "30px"
+        : size === "md"
+            ? "36px"
+            : size === "lg"
+                ? "42px"
+                : size === "xl"
+                    ? "50px"
+                    : "30px"};
+
+  transition: border 0.1s ease-in-out;
+  border-radius: 4px;
+  border: 1px solid
+    ${({ theme, variant }) => {
+    switch (variant) {
+        case "contained":
+            return "transparent";
+        case "filled":
+            return "transparent";
+        case "outlined":
+            return theme.palette.input.border;
+        case "text":
+            return "transparent";
+        default:
+            return theme.palette.input.border;
+    }
+}};
+
+  padding: ${({ size }) => size === "xs"
+    ? "0px 8px"
+    : size === "sm"
+        ? "0px 10px"
+        : size === "md"
+            ? "0px 12px"
+            : size === "lg"
+                ? "0px 14px"
+                : size === "xl"
+                    ? "0px 16px"
+                    : "0px 10px"};
+
+  width: ${({ width }) => {
+    if (typeof width === "undefined")
+        return "100%";
+    if (width === null)
+        return "100%";
+    if (typeof width === "string")
+        return width;
+    if (typeof width === "number")
+        return `${width}px`;
+}};
+
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+        case "contained":
+            return theme.palette.input.background;
+        case "filled":
+            return theme.palette.input.background;
+        case "outlined":
+            return theme.palette.input.background;
+        case "text":
+            return "transparent";
+        default:
+            return theme.palette.input.background;
+    }
+}};
+
+  ::placeholder {
+    font-size: ${({ size }) => size === "xs"
+    ? "10px"
+    : size === "sm"
+        ? "12px"
+        : size === "md"
+            ? "14px"
+            : size === "lg"
+                ? "16px"
+                : size === "xl"
+                    ? "18px"
+                    : "12px"};
+  }
+
+  &:focus {
+    border: 1px solid ${({ theme }) => theme.palette.primary.main};
+  }
+
+  &[data-button-right="true"] {
+    padding-right: 36px;
+  }
+
+  &[readOnly] {
+    cursor: pointer;
+  }
+`;
+exports.default = Input;

package/dist/Input/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Input";

package/dist/Input/index.js

@@ -0,0 +1,8 @@
+"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 Input_1 = require("./Input");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Input_1).default; } });

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,14 @@
+interface ModalProps {
+    children: React.ReactNode;
+    open?: boolean;
+    onClose?: () => void;
+    style?: React.CSSProperties;
+    showCloseButton?: boolean;
+    FocusProps?: any;
+}
+declare const Modal: {
+    ({ children, open, onClose, style, showCloseButton, FocusProps, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+    SubTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+};
+export default Modal;

package/dist/Modal/Modal.js

@@ -0,0 +1,110 @@
+"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 lucide_react_1 = require("lucide-react");
+const react_1 = require("@floating-ui/react");
+const StyledOverlay = (0, styled_components_1.default)(react_1.FloatingOverlay) `
+  background-color: rgba(0, 0, 0, 0.3);
+  position: fixed;
+  inset: 0;
+  z-index: 1400;
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+const StyledContent = styled_components_1.default.div `
+  background-color: ${({ theme }) => theme.name === "DARK"
+    ? theme.palette.background.default
+    : theme.palette.background.default};
+  border-radius: 6px;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+  position: fixed;
+  top: 25px;
+  left: 50%;
+  transform: translate(-50%, 0px);
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
+
+  z-index: 2;
+
+  max-height: calc(100vh - 50px);
+  max-width: calc(100vw - 50px);
+
+  display: flex;
+  flex-direction: column;
+
+  overflow-y: hidden;
+
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+const StyledInnerContent = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+
+  overflow-y: auto;
+  padding: 25px;
+`;
+const StyledClose = styled_components_1.default.div `
+  position: absolute;
+  top: 15px;
+  right: 15px;
+
+  color: ${(props) => props.theme.palette.text.secondary};
+`;
+const StyledButton = styled_components_1.default.button `
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+`;
+const Title = styled_components_1.default.h1 `
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0px;
+`;
+const SubTitle = styled_components_1.default.h2 `
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0px;
+  color: ${(props) => props.theme.palette.text.secondary};
+`;
+const Modal = ({ children, open = false, onClose, style = {}, showCloseButton = false, FocusProps = {}, }) => {
+    const { refs, floatingStyles, context } = (0, react_1.useFloating)({
+        open,
+        onOpenChange: (isOpen) => {
+            if (!isOpen) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        },
+    });
+    const handleMouseDown = () => {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: open && ((0, jsx_runtime_1.jsx)(StyledOverlay, { className: "mf-ModalOverlay", lockScroll: true, children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, Object.assign({ context: context, modal: true }, FocusProps, { children: (0, jsx_runtime_1.jsxs)(StyledContent, Object.assign({ style: style, className: "mf-Modal", ref: refs.setFloating }, floatingStyles, { children: [showCloseButton && ((0, jsx_runtime_1.jsx)(StyledClose, { children: (0, jsx_runtime_1.jsx)(StyledButton, { onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18 }) }) })), (0, jsx_runtime_1.jsx)(StyledInnerContent, { children: children })] })) })) })) }));
+};
+Modal.Title = Title;
+Modal.SubTitle = SubTitle;
+exports.default = Modal;

package/dist/Modal/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Modal";

package/dist/Modal/index.js

@@ -0,0 +1,8 @@
+"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 Modal_1 = require("./Modal");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Modal_1).default; } });