@monolith-forensics/monolith-ui 1.0.12 → 1.1.1

package/dist/TagBox/TagBox.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+import { Variant, Size } from "../core";
+type Option = {
+    label: string;
+    value: any;
+    group?: string;
+    data: any;
+};
+interface TagBoxProps {
+    className?: string;
+    data?: Option[];
+    placeholder?: string;
+    arrow?: boolean;
+    defaultValue?: Option[];
+    grouped?: boolean;
+    searchFn?: (value: string) => void;
+    onChange?: (value: any[]) => void;
+    onScroll?: () => void;
+    onSearch?: (value: string) => void;
+    onItemAdded?: (value: any) => void;
+    size?: Size;
+    variant?: Variant;
+    width?: string;
+    allowCustomValue?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    label?: string;
+    description?: string;
+    required?: boolean;
+    error?: string;
+    loading?: boolean;
+    renderOption?: (item: Option | string) => ReactNode;
+    TooltipContent?: (props: {
+        data: any;
+    }) => JSX.Element;
+}
+declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, loading, renderOption, TooltipContent, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default TagBox;

package/dist/TagBox/TagBox.js

@@ -0,0 +1,440 @@
+"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("@floating-ui/react");
+const react_2 = require("react");
+const __1 = require("..");
+const core_1 = require("../core");
+const StyledInputContainer = styled_components_1.default.div `
+  position: relative;
+  cursor: pointer;
+
+  user-select: none;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  user-select: none;
+
+  pointer-events: all;
+  outline: none;
+
+  border-radius: 5px;
+  transition: border 0.1s ease-in-out;
+  border: 1px solid
+    ${({ theme, variant }) => {
+    switch (variant) {
+        case "filled":
+            return "transparent";
+        case "outlined":
+            return theme.palette.input.border;
+        case "text":
+            return "transparent";
+        default:
+            return theme.palette.input.border;
+    }
+}};
+  font-weight: 500;
+  color: ${(props) => props.theme.palette.text.primary};
+  font-size: ${({ size }) => size === "xs"
+    ? "12px"
+    : size === "sm"
+        ? "14px"
+        : size === "md"
+            ? "16px"
+            : size === "lg"
+                ? "18px"
+                : size === "xl"
+                    ? "20px"
+                    : "12px"};
+
+  width: 100%;
+  min-height: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "30px"
+        : size === "md"
+            ? "36px"
+            : size === "lg"
+                ? "42px"
+                : size === "xl"
+                    ? "50px"
+                    : "26px"};
+
+  &[data-button-right="true"] {
+    padding-right: 36px;
+  }
+
+  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;
+    }
+}};
+
+  &[readOnly] {
+    cursor: pointer;
+  }
+
+  & [data-has-space="true"] {
+    padding-left: 4px;
+  }
+
+  & [data-selected="true"] {
+    background-color: ${(props) => props.theme.palette.primary.main}50;
+  }
+
+  &[data-empty="true"] {
+    color: ${(props) => props.theme.palette.input.placeholder};
+    div {
+      color: ${(props) => props.theme.palette.input.placeholder};
+    }
+  }
+
+  & [data-default-btn="true"] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    div {
+      color: ${(props) => props.theme.palette.text.secondary};
+    }
+  }
+
+  &[data-open="true"] {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+
+  &:focus-within {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+
+  &:focus {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+`;
+// styled input with forwardRef
+const StyledInput = (0, styled_components_1.default)((_a) => {
+    var { className, inputRef } = _a, props = __rest(_a, ["className", "inputRef"]);
+    return ((0, jsx_runtime_1.jsx)(__1.Input, Object.assign({ ref: inputRef, className: className + " mfTagBox-input" }, props)));
+}) `
+  &.mfTagBox-input {
+    pointer-events: all;
+    outline: none;
+    background: transparent;
+    flex: 1;
+    appearance: none;
+    border: 0;
+    color: inherit;
+
+    height: 100%;
+    width: 100%;
+
+    &:focus {
+      border: 0;
+    }
+  }
+`;
+const GroupTitle = (0, styled_components_1.default)((_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: className }, props, { children: [(0, jsx_runtime_1.jsx)("div", { className: "group-line" }), (0, jsx_runtime_1.jsx)("div", { className: "group-label", children: children }), (0, jsx_runtime_1.jsx)("div", { className: "group-line" })] })));
+}) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  color: ${(props) => props.theme.palette.text.secondary};
+
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "4px 12px"
+            : size === "lg"
+                ? "5px 14px"
+                : size === "xl"
+                    ? "6px 16px"
+                    : "2px 8px"};
+
+  .group-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: fit-content;
+    min-width: fit-content;
+
+    font-weight: 500;
+
+    font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
+  }
+
+  .group-line {
+    border-top: 1px solid ${(props) => props.theme.palette.divider};
+    width: 100%;
+  }
+`;
+const PillContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-wrap: wrap;
+  flex-grow: 1;
+
+  padding: ${({ size }) => size === "xs"
+    ? "0px 8px"
+    : size === "sm"
+        ? "0px 10px"
+        : size === "md"
+            ? "0px 12px"
+            : size === "lg"
+                ? "0px 14px"
+                : size === "xl"
+                    ? "0px 16px"
+                    : "0px 8px"};
+
+  padding-top: 5px;
+
+  &[data-empty="true"] {
+    display: none;
+  }
+`;
+const StyledInnerContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &[data-button-right="true"] {
+    padding-right: 30px;
+  }
+`;
+const ExtendedStyledContent = (0, styled_components_1.default)(core_1.StyledContent) `
+  overflow-y: auto;
+`;
+const StyledItem = styled_components_1.default.div `
+  line-height: 1;
+  color: ${(props) => props.theme.palette.text.primary};
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  min-height: 25px;
+  padding: 7px 10px;
+  position: relative;
+  user-select: none;
+  outline: none;
+
+  cursor: pointer;
+
+  font-family: "Arial", sans-serif;
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
+
+  &[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};
+  }
+
+  &[data-selected="true"] {
+    display: none;
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+`;
+const TagBox = (0, styled_components_1.default)(({ className, data = [], placeholder = "Select or enter tags", arrow = true, defaultValue = [], grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "filled", width = "100%", allowCustomValue = true, searchable = false, clearable = false, label, description, required = false, error, loading = false, renderOption, TooltipContent, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const isObjectArray = data.length > 0 && ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.label) !== undefined;
+    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
+    const [selectedItems, setSelectedItems] = (0, react_2.useState)(defaultValue);
+    const [searchValue, setSearchValue] = (0, react_2.useState)("");
+    const inputRef = (0, react_2.useRef)(null);
+    const scrollContainerRef = (0, react_2.useRef)(null);
+    const filteredItems = data
+        .filter((item) => {
+        const itemValue = (isObjectArray ? item.label : item);
+        return itemValue.toLowerCase().includes(searchValue.toLowerCase());
+    })
+        .sort((a, b) => {
+        if (grouped) {
+            const aValue = a.group;
+            const bValue = b.group;
+            return aValue.localeCompare(bValue);
+        }
+        // return current sort order
+        return 0;
+    });
+    const groupedItems = grouped
+        ? filteredItems.reduce((acc, item) => {
+            if (!item.group) {
+                item.group = "Other";
+            }
+            if (acc[item.group]) {
+                acc[item.group].push(item);
+            }
+            else {
+                acc[item.group] = [item];
+            }
+            return acc;
+        }, {})
+        : {};
+    const groups = grouped
+        ? Object.keys(groupedItems)
+            .map((group) => ({
+            label: group,
+            items: groupedItems[group],
+        }))
+            .sort((a, b) => a.label.localeCompare(b.label))
+        : [];
+    const { refs, floatingStyles, update } = (0, react_1.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)],
+    });
+    const toggleOpen = () => {
+        setIsOpen((prev) => {
+            var _a;
+            if (!prev) {
+                if (inputRef.current) {
+                    const inputEl = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+                    (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.focus) === null || _a === void 0 ? void 0 : _a.call(inputEl);
+                }
+            }
+            return !prev;
+        });
+    };
+    const handleClear = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)
+            inputRef.current.value = "";
+        onChange === null || onChange === void 0 ? void 0 : onChange([]);
+        setSelectedItems([]);
+        setSearchValue("");
+        searchFn === null || searchFn === void 0 ? void 0 : searchFn("");
+        setIsOpen(false);
+    };
+    const handleChangeSelection = (0, react_2.useCallback)((option) => {
+        setSelectedItems((prev) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange([...prev, option]);
+            return [...prev, option];
+        });
+    }, [onChange]);
+    const handleItemClick = (item) => {
+        var _a;
+        if ((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value)
+            inputRef.current.value = "";
+        setSearchValue("");
+        handleChangeSelection(item);
+    };
+    const handleRemoveItem = (item) => {
+        setSelectedItems((prev) => {
+            const newItems = prev.filter((prevItem) => isObjectArray
+                ? prevItem.value !== item.value
+                : prevItem !== item);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
+            return newItems;
+        });
+    };
+    const handleKeyDown = (e) => {
+        // Tab key
+        if (e.key === "Tab") {
+            setIsOpen(false);
+        }
+    };
+    // Close on outside click
+    (0, react_2.useEffect)(() => {
+        const close = (e) => {
+            var _a, _b;
+            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
+                target !== referenceElement && // Check if the target is not the reference (input)
+                !referenceElement.contains(target) && // Check if the target is not inside the reference (input)
+                !floatingElement.contains(target) // Check if the target is not inside the floating element (content)
+            ) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("click", close);
+        return () => document.removeEventListener("click", close);
+    }, [refs.floating, refs.reference]);
+    // update when selection changes
+    (0, react_2.useEffect)(() => {
+        update();
+    }, [selectedItems]);
+    const referenceEl = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
+    const contentWidth = ((_e = (_d = (_c = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getClientRects) === null || _c === void 0 ? void 0 : _c.call(referenceEl)) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.width) || "100%";
+    const scrollEl = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+    const scrollActive = scrollEl
+        ? (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.scrollHeight) > (scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.clientHeight)
+        : false;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className + " mfTagBox", 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: refs.setReference, onClick: toggleOpen, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, children: [(0, jsx_runtime_1.jsxs)(StyledInnerContainer, { "data-button-right": arrow || clearable, children: [(0, jsx_runtime_1.jsx)(PillContainer, { size: size, "data-empty": (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0, children: selectedItems.map((item, index) => ((0, jsx_runtime_1.jsx)(__1.Pill, { size: "xs", onRemove: () => handleRemoveItem(item), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index))) }), (searchable || allowCustomValue || selectedItems.length === 0) && ((0, jsx_runtime_1.jsx)(StyledInput, { inputRef: inputRef, onChange: (e) => {
+                                    if (searchFn !== undefined) {
+                                        searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
+                                    }
+                                    else {
+                                        setSearchValue(e.target.value);
+                                    }
+                                    update();
+                                }, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue), "data-button-right": arrow || clearable }))] }), clearable &&
+                        (selectedItems.length > 0 || !!((_f = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _f === void 0 ? void 0 : _f.value)) ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, {})) : null] }), isOpen && ((0, jsx_runtime_1.jsx)(core_1.StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: (0, jsx_runtime_1.jsx)(ExtendedStyledContent, { className: "mfFloatingContent", style: { width: contentWidth, maxWidth: contentWidth }, variant: variant, onScroll: onScroll, "data-scroll-active": scrollActive, "data-empty": filteredItems.length === 0 ||
+                        selectedItems.length === filteredItems.length, children: !loading && grouped
+                        ? groups.map((group, index) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
+                                    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.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(item), "data-selected": selectedItems.some((selectedItem) => selectedItem.value ===
+                                                (item === null || item === void 0 ? void 0 : item.value) || selectedItem === item), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }));
+                                })] }, group.label)))
+                        : filteredItems.map((item, index) => {
+                            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.jsx)(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(item), "data-selected": selectedItems.some((selectedItem) => selectedItem.value === (item === null || item === void 0 ? void 0 : item.value) ||
+                                        selectedItem === item), size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, item.value || item));
+                        }) }) }))] }));
+}) `
+  position: relative;
+  cursor: pointer;
+`;
+exports.default = TagBox;

package/dist/TagBox/TagBoxStyles.d.ts

@@ -0,0 +1,11 @@
+export declare const TagBoxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagBoxInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagBoxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const Tag: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagKillButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | 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<SVGSVGElement> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const TagBoxOptions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TagBoxOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/TagBox/TagBoxStyles.js

@@ -0,0 +1,113 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagBoxOption = exports.TagBoxOptions = exports.TagKillButton = exports.TagText = exports.Tag = exports.TagBoxInput = exports.TagsContainer = exports.TagBoxInner = exports.TagBoxContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const lucide_react_1 = require("lucide-react");
+exports.TagBoxContainer = styled_components_1.default.div `
+  width: 100%;
+`;
+exports.TagBoxInner = styled_components_1.default.div `
+  height: 33px;
+  display: flex;
+  border: 1px solid ${(props) => props.theme.palette.input.border};
+  color: ${(props) => props.theme.palette.text.primary};
+  outline: none;
+  padding: 8px 8px;
+  width: 100%;
+  background-color: ${(props) => props.theme.palette.input.background};
+  border-radius: 5px;
+  transition: border 0.1s ease-in-out;
+  overflow-x: hidden;
+  &:focus {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+`;
+exports.TagsContainer = styled_components_1.default.div `
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  margin-left: calc(-5px);
+  box-sizing: border-box;
+`;
+exports.TagBoxInput = styled_components_1.default.input `
+  border: none;
+  outline: none;
+  width: 100%;
+  min-width: 50px;
+  background-color: transparent;
+  color: ${(props) => props.theme.palette.text.primary};
+  &:focus {
+    border: none;
+    outline: none;
+  }
+`;
+exports.Tag = styled_components_1.default.div `
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  background-color: rgb(26, 27, 30);
+  color: rgb(193, 194, 197);
+  height: 22px;
+  padding-left: 10px;
+  padding-right: 0px;
+  font-weight: 500;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: default;
+  user-select: none;
+  max-width: 120px;
+  margin: calc(3px) calc(5px);
+`;
+exports.TagText = styled_components_1.default.div `
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  background-color: rgb(26, 27, 30);
+  color: rgb(193, 194, 197);
+  height: 22px;
+  padding-right: 0px;
+  font-weight: 500;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: default;
+  user-select: none;
+  max-width: 75px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+exports.TagKillButton = (0, styled_components_1.default)(lucide_react_1.XIcon) `
+  -webkit-tap-highlight-color: transparent;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  cursor: pointer;
+  appearance: none;
+  text-align: left;
+  text-decoration: none;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  background-color: transparent;
+  position: relative;
+  height: 19px;
+  min-height: 19px;
+  width: 22px;
+  min-width: 19px;
+  border-radius: 2px;
+  line-height: 1;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  color: rgb(193, 194, 197);
+  padding: 0px 3px;
+  &:hover {
+    color: rgb(255, 255, 255);
+  }
+`;
+exports.TagBoxOptions = styled_components_1.default.div ``;
+exports.TagBoxOption = styled_components_1.default.div ``;

package/dist/TagBox/index.d.ts

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

package/dist/TagBox/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 TagBox_1 = require("./TagBox");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(TagBox_1).default; } });

package/dist/TextArea/TextArea.d.ts

@@ -0,0 +1,16 @@
+import { Size, Variant } from "../core";
+interface TextAreaProps {
+    ref?: React.Ref<HTMLTextAreaElement>;
+    className?: string;
+    size?: Size;
+    variant?: Variant;
+    width?: string | number | null | undefined;
+    style?: React.CSSProperties;
+    placeholder?: string;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onKeyUp?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+}
+declare const TextArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react-textarea-autosize").TextareaAutosizeProps & import("react").RefAttributes<HTMLTextAreaElement>, "ref"> & {
+    ref?: ((instance: HTMLTextAreaElement | 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<HTMLTextAreaElement> | null | undefined;
+}, TextAreaProps>> & string & Omit<import("react").ForwardRefExoticComponent<import("react-textarea-autosize").TextareaAutosizeProps & import("react").RefAttributes<HTMLTextAreaElement>>, keyof import("react").Component<any, {}, any>>;
+export default TextArea;