@monolith-forensics/monolith-ui 1.1.29 → 1.1.31

package/dist/DropDownMenu/DropDownMenu.js

@@ -0,0 +1,208 @@
+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.div `
+  overflow-y: auto;
+
+  &[data-scroll-active="true"] {
+    padding-right: 5px;
+  }
+`;
+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;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+  min-height: 25px;
+  padding: 7px 10px;
+  position: relative;
+  user-select: none;
+  outline: none;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  cursor: pointer;
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
+
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "4px 12px"
+            : size === "lg"
+                ? "5px 14px"
+                : size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
+
+  &[data-disabled] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    pointer-events: "none";
+  }
+
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+`;
+const StyledContent = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow-y: hidden;
+  overflow-x: hidden;
+
+  max-height: ${({ maxDropdownHeight }) => Number.isInteger(maxDropdownHeight)
+    ? `${maxDropdownHeight}px`
+    : maxDropdownHeight || "250px"};
+
+  background-color: ${(props) => props.theme.palette.background.default};
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+        case "filled":
+            return theme.palette.input.background;
+        case "outlined":
+            return theme.palette.input.background;
+        case "text":
+            return "transparent";
+        default:
+            return theme.palette.input.background;
+    }
+}};
+
+  border-radius: 5px;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+  padding: 5px;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+
+  &[data-empty="true"] {
+    display: none;
+  }
+`;
+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] = 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: [flip()],
+    });
+    const handleAddItem = (item) => {
+        setSelected((prev) => {
+            let newSelected = [...prev, item];
+            const diff = data.filter((i) => !newSelected.find((s) => isObjectArray ? (s === null || s === void 0 ? void 0 : s.value) === (i === null || i === void 0 ? void 0 : i.value) : s === i));
+            onChange === null || onChange === void 0 ? void 0 : onChange(newSelected, diff);
+            return newSelected;
+        });
+    };
+    const handleRemoveItem = (item) => {
+        setSelected((prev) => {
+            let newSelected = prev.filter((i) => isObjectArray ? (i === null || i === void 0 ? void 0 : i.value) !== (item === null || item === void 0 ? void 0 : item.value) : i !== item);
+            const diff = data.filter((i) => !newSelected.find((s) => isObjectArray ? (s === null || s === void 0 ? void 0 : s.value) === (i === null || i === void 0 ? void 0 : i.value) : s === i));
+            onChange === null || onChange === void 0 ? void 0 : onChange(newSelected, diff);
+            return newSelected;
+        });
+    };
+    const handleSearch = useDebouncedCallback((e) => {
+        setSearchValue(e.target.value);
+    }, 150);
+    // Close on outside click
+    useEffect(() => {
+        const close = (e) => {
+            var _a, _b, _c, _d;
+            const target = e.target;
+            const referenceElement = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
+            const floatingElement = (_b = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _b === void 0 ? void 0 : _b.current;
+            if (floatingElement && // Check if the floating element exists
+                e.target !== referenceElement && // Check if the target is not the reference (input)
+                !((_c = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.contains) === null || _c === void 0 ? void 0 : _c.call(referenceElement, target)) && // Check if the target is not inside the reference (input)
+                !((_d = floatingElement === null || floatingElement === void 0 ? void 0 : floatingElement.contains) === null || _d === void 0 ? void 0 : _d.call(floatingElement, target)) // Check if the target is not inside the floating element (content)
+            ) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", close);
+        return () => document.removeEventListener("mousdown", close);
+    }, [refs.floating, refs.reference]);
+    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);
+        }
+        if (!isOpen) {
+            setSearchValue("");
+        }
+    }, [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 (_jsxs("div", { className: className + " mfDropDownMenu", children: [_jsx(Button, Object.assign({ ref: (ref) => {
+                    refs.setReference(ref);
+                }, 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;
+                                            if (!searchable)
+                                                return true;
+                                            if (isObjectArray) {
+                                                return (((_a = item === null || item === void 0 ? void 0 : item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue.toLowerCase())) ||
+                                                    ((_b = item === null || item === void 0 ? void 0 : item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchValue.toLowerCase())));
+                                            }
+                                            return (_c = item
+                                                .toLowerCase) === null || _c === void 0 ? void 0 : _c.call(item).includes(searchValue.toLowerCase());
+                                        })
+                                            .map((item, index) => {
+                                            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 (_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) {
+                                                            isSelected
+                                                                ? handleRemoveItem(item)
+                                                                : handleAddItem(item);
+                                                        }
+                                                        else {
+                                                            setIsOpen(false);
+                                                        }
+                                                        onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item);
+                                                    }, "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));
+                                        })] }) })) }) }) }))] }));
+}) ``;
+export default DropDownMenu;

package/dist/DropDownMenu/index.js

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

package/dist/Error/Error.js

@@ -0,0 +1,33 @@
+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;
+  padding: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  border-radius: 5px;
+  align-items: center;
+`;
+const CloseButton = styled.button `
+  background: none;
+  border: none;
+  color: ${({ theme }) => theme.palette.error.light};
+  cursor: pointer;
+`;
+const ErrorText = styled.span `
+  margin-left: 10px;
+  flex: 1;
+`;
+const ErrorComponent = ({ error }) => {
+    const [isVisible, setIsVisible] = useState(true);
+    const handleClose = () => {
+        setIsVisible(false);
+    };
+    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 }) })] })) }));
+};
+export default ErrorComponent;

package/dist/Error/index.js

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

package/dist/FieldLabel/FieldLabel.js

@@ -0,0 +1,90 @@
+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 (_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;
+  background-color: ${({ theme }) => theme.palette.background.default};
+  padding: 15px;
+  border-radius: 5px;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  font-size: 0.75rem;
+  max-width: 350px;
+  width: 250px;
+
+  white-space: pre-wrap;
+
+  .title {
+    font-size: 0.85rem;
+    font-weight: 600;
+    margin-bottom: 5px;
+  }
+`;
+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,
+    "Helvetica Neue", Arial, sans-serif;
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: 5px;
+
+  min-height: 15px;
+  font-weight: 400;
+  margin-bottom: 2.5px;
+
+  font-size: ${({ size = "sm" }) => size === "xs"
+    ? "10px"
+    : size === "sm"
+        ? "12px"
+        : size === "md"
+            ? "14px"
+            : size === "lg"
+                ? "16px"
+                : size === "xl"
+                    ? "18px"
+                    : "12px"};
+
+  transition: all 0.2s ease;
+  color: ${({ theme, error }) => theme.palette.text.secondary};
+
+  .label {
+    width: fit-content;
+    min-width: fit-content;
+  }
+
+  .label::after {
+    content: ${(props) => (props.asterisk ? "'*'" : "")};
+    color: ${({ theme }) => theme.palette.error.main};
+    margin-left: 2px;
+  }
+
+  .label:hover {
+    cursor: ${({ description }) => (description ? "pointer" : "default")};
+    color: ${({ description, theme }) => description ? theme.palette.text.primary : theme.palette.text.secondary};
+  }
+
+  .error {
+    user-select: none;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    color: ${({ theme }) => theme.palette.error.main};
+    font-size: 10px;
+    max-width: 85%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .error:hover {
+    color: ${({ theme }) => theme.palette.error.light};
+  }
+`;
+export default FieldLabel;

package/dist/FieldLabel/index.js

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

package/dist/FileInputField/FileInputField.js

@@ -0,0 +1,112 @@
+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);
+    }, []);
+    const handleRemoveFile = (file) => {
+        setFiles((prev) => prev.filter((f) => f !== file));
+    };
+    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;
+  grid-column: span ${({ colSpan }) => colSpan || 1};
+
+  .file-input-container {
+    user-select: none;
+    cursor: pointer;
+    outline: none;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 75px;
+
+    color: ${({ theme }) => theme.palette.text.secondary};
+
+    font-size: ${({ size }) => size === "xs"
+    ? "12px"
+    : size === "sm"
+        ? "14px"
+        : size === "md"
+            ? "16px"
+            : size === "lg"
+                ? "18px"
+                : size === "xl"
+                    ? "20px"
+                    : "12px"};
+
+    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;
+    }
+}};
+
+    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 8px"};
+
+    max-width: 100%;
+
+    transition: border 0.2s;
+
+    &:hover {
+      border: 1px solid ${({ theme }) => theme.palette.primary.main};
+    }
+
+    &:focus {
+      border: 1px solid ${({ theme }) => theme.palette.primary.main};
+    }
+  }
+
+  .file-selections {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 10px;
+  }
+`;
+export default FileInputField;

package/dist/FileInputField/index.js

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

package/dist/Flyout/Flyout.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useFloating, } from "@floating-ui/react";
+import { XIcon } from "lucide-react";
+import styled from "styled-components";
+const ANIMATION_TIME = 300;
+const StyledOverlay = styled(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.div `
+  position: absolute;
+  top: 20px;
+  right: 20px;
+
+  color: ${(props) => props.theme.palette.text.secondary};
+`;
+const StyledButton = styled.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.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.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 } = 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 (_jsx(FloatingPortal, { preserveTabOrder: true, children: open && (_jsx(StyledOverlay, { className: "mf-ModalOverlay", lockScroll: true, onMouseDown: handleMouseDown, children: _jsx(FloatingFocusManager, { context: context, modal: true, children: _jsxs(StyledContent, Object.assign({ style: style, className: `mf-Modal mf-Flyout`, ref: refs.setFloating }, floatingStyles, { translate: undefined, children: [showCloseButton && (_jsx(StyledClose, { children: _jsx(StyledButton, { onMouseDown: () => onClose === null || onClose === void 0 ? void 0 : onClose(), children: _jsx(XIcon, { size: 18 }) }) })), _jsx(StyledInnerContent, { className: "mf-Flyout inner-content", children: children })] })) }) })) }));
+};
+export default Flyout;

package/dist/Flyout/FlyoutHeader.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+const FlyoutHeader = styled.div `
+  border-bottom: ${({ theme, hasBorder }) => hasBorder ? `1px solid ${theme.palette.divider}` : "none"};
+
+  min-height: 50px;
+`;
+export default FlyoutHeader;

package/dist/Flyout/FlyoutTitle.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+const FlyoutTitle = styled.h1 `
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0px;
+  color: ${(props) => props.theme.palette.text.primary};
+`;
+export default FlyoutTitle;

package/dist/Flyout/index.js

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

package/dist/FormSection/FormSection.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import styled from "styled-components";
+const FormSection = styled(({ className, title, children, defaultOpen = true }) => {
+    const [open, setOpen] = useState(defaultOpen);
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "section-header", onClick: (e) => setOpen((prev) => !prev), children: [_jsx("h3", { children: title }), _jsx("div", { className: "section-line" }), _jsx(ChevronDownIcon, { size: 18, className: open ? "open" : "" })] }), _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;
+    }
+  }
+`;
+export default FormSection;

package/dist/FormSection/index.js

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

package/dist/Grid/Grid.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+const Grid = styled(({ className, children }) => {
+    return _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;
+`;
+export default Grid;

package/dist/Grid/index.js

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