@monolith-forensics/monolith-ui 1.1.29 → 1.1.31

package/dist/Table/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Table";
+export { Column } from "./Table";

package/dist/TagBox/TagBox.js

@@ -0,0 +1,585 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
+import { useFloating, flip, offset } from "@floating-ui/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Input, Tooltip, FieldLabel, Pill } from "..";
+import { ArrowButton, ClearButton, StyledFloatContainer, StyledContent, } from "../core";
+const StyledInputContainer = styled.div `
+  position: relative;
+  cursor: pointer;
+
+  user-select: none;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  user-select: none;
+
+  pointer-events: all;
+  outline: none;
+
+  padding: ${({ size }) => size === "xs"
+    ? "2px 8px"
+    : size === "sm"
+        ? "4px 10px"
+        : size === "md"
+            ? "6px 12px"
+            : size === "lg"
+                ? "7px 14px"
+                : size === "xl"
+                    ? "8px 16px"
+                    : "4px 10px"};
+
+  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 = styled((_a) => {
+    var { className, inputRef } = _a, props = __rest(_a, ["className", "inputRef"]);
+    return (_jsx(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%;
+    padding: 0px;
+    min-height: 0px;
+
+    min-width: 100px;
+
+    &:focus {
+      border: 0;
+    }
+  }
+`;
+const GroupTitle = styled((_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsxs("div", Object.assign({ className: className }, props, { children: [_jsx("div", { className: "group-line" }), _jsx("div", { className: "group-label", children: children }), _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.div `
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-wrap: wrap;
+  flex-grow: 1;
+
+  &[data-empty="true"] {
+    display: none;
+  }
+`;
+const StyledInnerContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &[data-button-right="true"] {
+    padding-right: 30px;
+  }
+`;
+const ExtendedStyledContent = styled(StyledContent) `
+  overflow-y: auto;
+`;
+const StyledItem = styled.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};
+  }
+
+  &[data-highlighted="true"] {
+    background-color: ${(props) => props.theme.palette.divider};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+`;
+const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue = [], grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, renderOption, TooltipContent, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const isObjectArray = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("label");
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedItems, setSelectedItems] = useState(defaultValue);
+    const [preSelected, setPreSelected] = useState(null);
+    const [customItems, setCustomItems] = useState([]);
+    const [searchValue, setSearchValue] = useState("");
+    const inputRef = useRef(null);
+    const scrollContainerRef = useRef(null);
+    const filteredItems = data
+        .concat(customItems) // Add custom items to the list
+        .filter((item) => {
+        const isSelected = !!selectedItems.find((selectedItem) => isObjectArray
+            ? selectedItem.value === item.value
+            : selectedItem === item);
+        return !isSelected;
+    })
+        .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 } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement: "bottom-start",
+        strategy: "absolute",
+        // Handle collisions with the viewport
+        middleware: [flip(), 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 = useCallback((option) => {
+        setSelectedItems((prev) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange([...prev, option]);
+            return [...prev, option];
+        });
+    }, [onChange]);
+    const handleFocus = () => {
+        var _a, _b;
+        if (openOnFocus) {
+            setIsOpen(true);
+        }
+        if (searchable) {
+            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (allowCustomValue) {
+            (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    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, index) => {
+        setSelectedItems((prev) => {
+            const newItems = prev.filter((prevItem, idx) => isObjectArray
+                ? prevItem.value !== item.value
+                : idx !== index);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
+            return newItems;
+        });
+    };
+    const handleAddItem = useCallback((newItem) => {
+        const existingItem = data.concat(customItems).find((item) => {
+            return isObjectArray
+                ? item.label.toLowerCase() === newItem.toLowerCase()
+                : item.toLowerCase() === newItem.toLowerCase();
+        });
+        if (!existingItem) {
+            const newValue = isObjectArray
+                ? { label: newItem, value: newItem }
+                : newItem;
+            setCustomItems([...customItems, newValue]);
+            handleChangeSelection(newValue);
+            onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newValue);
+        }
+        else {
+            // check if the item is already selected
+            const isSelected = !!selectedItems.find((selectedItem) => isObjectArray
+                ? selectedItem.value ===
+                    existingItem.value
+                : selectedItem === existingItem);
+            if (!isSelected) {
+                handleChangeSelection(existingItem);
+            }
+        }
+    }, [
+        onItemAdded,
+        isObjectArray,
+        data,
+        handleChangeSelection,
+        selectedItems,
+        customItems,
+    ]);
+    const handleKeyDown = (e) => {
+        var _a, _b;
+        const currentInputValue = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        // Escape key
+        if (e.key === "Escape") {
+            const reference = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
+            reference === null || reference === void 0 ? void 0 : reference.blur();
+            setSearchValue("");
+            update();
+            setIsOpen(false);
+        }
+        // Enter key
+        if (e.key === "Enter") {
+            if (preSelected) {
+                handleItemClick(preSelected);
+                setPreSelected(null);
+                setSearchValue("");
+                update();
+                return;
+            }
+            else if (currentInputValue &&
+                currentInputValue !== "" &&
+                allowCustomValue) {
+                handleAddItem(currentInputValue);
+                inputRef.current.value = "";
+                setSearchValue("");
+                update();
+            }
+            else {
+                // TODO: decide what to do when user presses enter after typing a search value
+            }
+            // toggleOpen();
+            // setIsOpen(false);
+        }
+        // Backspace key
+        if (e.key === "Backspace" && currentInputValue === "") {
+            setSelectedItems((prev) => {
+                const newItems = prev.slice(0, prev.length - 1);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
+                return newItems;
+            });
+        }
+        // Arrow down
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setPreSelected((prev) => {
+                let newItem = filteredItems[0]; // Loop back to the first item
+                const index = filteredItems.findIndex((item) => isObjectArray
+                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
+                    : item === prev);
+                if (index < filteredItems.length - 1) {
+                    newItem = filteredItems[index + 1];
+                }
+                return newItem;
+            });
+        }
+        // Arrow up
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setPreSelected((prev) => {
+                let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
+                const index = filteredItems.findIndex((item) => isObjectArray
+                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
+                    : item === prev);
+                if (index > 0) {
+                    newItem = filteredItems[index - 1];
+                }
+                return newItem;
+            });
+        }
+        // Tab key
+        if (e.key === "Tab") {
+            setIsOpen(false);
+        }
+    };
+    // Close on outside click
+    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
+    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 (_jsxs("div", { className: className + " mfTagBox", children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { className: "styledInputContainer", ref: refs.setReference, onMouseDown: () => {
+                    setIsOpen(true);
+                    handleFocus();
+                }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [selectedItems.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item, index), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index))), (searchable ||
+                                    allowCustomValue ||
+                                    selectedItems.length === 0) && (_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) }))] }) }), clearable &&
+                        (selectedItems.length > 0 || !!((_f = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _f === void 0 ? void 0 : _f.value)) ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
+                            e.preventDefault();
+                        }, onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            toggleOpen();
+                        } })) : null] }), isOpen && (_jsx(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: _jsx(ExtendedStyledContent, { className: "mfFloatingContent", style: { width: contentWidth, maxWidth: contentWidth }, variant: variant, onScroll: onScroll, "data-scroll-active": scrollActive, "data-empty": filteredItems.length === 0, children: !loading && grouped
+                        ? groups.map((group) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
+                                    return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                handleItemClick(item);
+                                            }, "data-highlighted": isObjectArray
+                                                ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
+                                                    item.value
+                                                : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                                })] }, group.label)))
+                        : filteredItems.map((item, index) => {
+                            return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        handleItemClick(item);
+                                    }, "data-highlighted": isObjectArray
+                                        ? (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) ===
+                                            item.value
+                                        : preSelected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                        }) }) }))] }));
+}) `
+  position: relative;
+  cursor: pointer;
+`;
+export default TagBox;

package/dist/TagBox/TagBoxStyles.js

@@ -0,0 +1,107 @@
+import styled from "styled-components";
+import { XIcon } from "lucide-react";
+export const TagBoxContainer = styled.div `
+  width: 100%;
+`;
+export const TagBoxInner = styled.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};
+  }
+`;
+export const TagsContainer = styled.div `
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  margin-left: calc(-5px);
+  box-sizing: border-box;
+`;
+export const TagBoxInput = styled.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;
+  }
+`;
+export const Tag = styled.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);
+`;
+export const TagText = styled.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;
+`;
+export const TagKillButton = styled(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);
+  }
+`;
+export const TagBoxOptions = styled.div ``;
+export const TagBoxOption = styled.div ``;

package/dist/TagBox/index.js

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