@oneuptime/common 14.0.12 → 14.0.13

package/build/dist/UI/Components/PeoplePicker/PeopleSearchPopup.js

@@ -0,0 +1,280 @@
+import IconProp from "../../../Types/Icon/IconProp";
+import API from "../../Utils/API/API";
+import ProjectUtil from "../../Utils/Project";
+import useTranslateValue from "../../Utils/Translation";
+import DROPDOWN_MENU_Z_INDEX from "../Dropdown/DropdownMenuZIndex";
+import Icon from "../Icon/Icon";
+import PeopleAvatar from "./PeopleAvatar";
+import { getPeoplePickerKindDefinition, PEOPLE_PICKER_SEARCH_LIMIT, } from "./PeoplePickerKinds";
+import { getPeoplePickerOptionKey, } from "./PeoplePickerTypes";
+import React, { useEffect, useId, useMemo, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+/*
+ * The search list behind "Add owner": one search box, and every kind the
+ * picker offers in one list under a heading each - People, then Teams - so
+ * a person and a team are picked the same way, with one click. The Owners
+ * page and every form that asks for owners open this same list.
+ *
+ * It stays open after a pick, so several can be picked in a row. In a form
+ * ("toggle") a picked row shows a tick and picking it again takes it away;
+ * on the Owners page ("add") a picked row is left out, because removing an
+ * owner there is its own, confirmed, action.
+ *
+ * Keyboard: typing searches, Up and Down move through the list, Enter picks,
+ * Escape closes and hands focus back to the button that opened it.
+ */
+export const PEOPLE_SEARCH_DEBOUNCE_MS = 250;
+export const PEOPLE_SEARCH_POPUP_WIDTH_PX = 320;
+export const PEOPLE_SEARCH_POPUP_MAX_HEIGHT_PX = 380;
+const PeopleSearchPopup = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { translateString } = useTranslateValue();
+    const { popup } = props;
+    const isOpen = popup.isPopupOpen;
+    const [searchText, setSearchText] = useState("");
+    const [debouncedSearch, setDebouncedSearch] = useState("");
+    const [rows, setRows] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [loadError, setLoadError] = useState("");
+    const [pendingKey, setPendingKey] = useState("");
+    const [pickError, setPickError] = useState("");
+    const [activeIndex, setActiveIndex] = useState(0);
+    const searchInputRef = useRef(null);
+    const baseId = useId();
+    const listboxId = `${baseId}-listbox`;
+    const kindsSignature = props.kinds.join(",");
+    // A fresh list each time it opens.
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        setSearchText("");
+        setDebouncedSearch("");
+        setLoadError("");
+        setPickError("");
+        setActiveIndex(0);
+    }, [isOpen]);
+    /*
+     * The search box takes focus once the list is placed: until then it is
+     * hidden, and a hidden element refuses focus.
+     */
+    useEffect(() => {
+        var _a;
+        if (!isOpen || !popup.popupPosition) {
+            return;
+        }
+        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [isOpen, Boolean(popup.popupPosition)]);
+    useEffect(() => {
+        const handle = setTimeout(() => {
+            setDebouncedSearch(searchText);
+        }, PEOPLE_SEARCH_DEBOUNCE_MS);
+        return () => {
+            clearTimeout(handle);
+        };
+    }, [searchText]);
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const projectId = ProjectUtil.getCurrentProjectId();
+        if (!projectId) {
+            setRows([]);
+            return;
+        }
+        let isCancelled = false;
+        setIsLoading(true);
+        setLoadError("");
+        Promise.all(props.kinds.map((kind) => {
+            return getPeoplePickerKindDefinition(kind).search({
+                projectId: projectId,
+                searchText: debouncedSearch,
+                limit: PEOPLE_PICKER_SEARCH_LIMIT,
+            });
+        }))
+            .then((results) => {
+            var _a;
+            if (isCancelled) {
+                return;
+            }
+            const next = results.flat();
+            setRows(next);
+            setActiveIndex(0);
+            (_a = props.onOptionsLoaded) === null || _a === void 0 ? void 0 : _a.call(props, next);
+        })
+            .catch((err) => {
+            if (isCancelled) {
+                return;
+            }
+            setRows([]);
+            setLoadError(API.getFriendlyMessage(err));
+        })
+            .finally(() => {
+            if (!isCancelled) {
+                setIsLoading(false);
+            }
+        });
+        return () => {
+            isCancelled = true;
+        };
+    }, [isOpen, debouncedSearch, kindsSignature]);
+    const groups = useMemo(() => {
+        return props.kinds
+            .map((kind) => {
+            return {
+                kind: kind,
+                definition: getPeoplePickerKindDefinition(kind),
+                rows: rows.filter((row) => {
+                    if (row.kind !== kind) {
+                        return false;
+                    }
+                    return (props.selectionMode === "toggle" ||
+                        !props.selectedKeys.has(getPeoplePickerOptionKey(row.kind, row.id)));
+                }),
+            };
+        })
+            .filter((group) => {
+            return group.rows.length > 0;
+        });
+    }, [rows, kindsSignature, props.selectedKeys, props.selectionMode]);
+    const visibleRows = useMemo(() => {
+        return groups.flatMap((group) => {
+            return group.rows;
+        });
+    }, [groups]);
+    const clampedActiveIndex = visibleRows.length === 0
+        ? -1
+        : Math.min(Math.max(activeIndex, 0), visibleRows.length - 1);
+    const getOptionId = (row) => {
+        return `${baseId}-option-${row.kind}-${row.id}`;
+    };
+    const activeRow = clampedActiveIndex >= 0 ? visibleRows[clampedActiveIndex] : undefined;
+    // Keep the row the keyboard is on in view.
+    useEffect(() => {
+        if (!activeRow || typeof document === "undefined") {
+            return;
+        }
+        const element = document.getElementById(getOptionId(activeRow));
+        if (element && typeof element.scrollIntoView === "function") {
+            element.scrollIntoView({ block: "nearest" });
+        }
+    }, [activeRow ? getOptionId(activeRow) : ""]);
+    const pick = async (row) => {
+        if (pendingKey) {
+            return;
+        }
+        const key = getPeoplePickerOptionKey(row.kind, row.id);
+        const isPicked = props.selectedKeys.has(key);
+        setPickError("");
+        const result = props.onPick(row, isPicked);
+        if (!result || typeof result.then !== "function") {
+            return;
+        }
+        setPendingKey(key);
+        try {
+            await result;
+        }
+        catch (err) {
+            setPickError(API.getFriendlyMessage(err));
+        }
+        finally {
+            setPendingKey("");
+        }
+    };
+    if (!isOpen || !popup.portalTarget) {
+        return null;
+    }
+    const onSearchKeyDown = (event) => {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setActiveIndex(visibleRows.length === 0
+                ? 0
+                : Math.min(clampedActiveIndex + 1, visibleRows.length - 1));
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setActiveIndex(Math.max(clampedActiveIndex - 1, 0));
+            return;
+        }
+        if (event.key === "Enter") {
+            // Enter picks; it must never submit the form the picker sits in.
+            event.preventDefault();
+            if (activeRow) {
+                void pick(activeRow);
+            }
+        }
+    };
+    const searchPlaceholder = props.searchPlaceholder || "Search people or teams...";
+    const emptyText = props.emptyText || "No people or teams available.";
+    const trimmedSearch = debouncedSearch.trim();
+    let rowIndex = -1;
+    return createPortal(React.createElement("div", { ref: popup.popupRef, id: popup.popupId, "data-testid": "people-search-popup", role: "dialog", "aria-label": translateString(props.ariaLabel) || props.ariaLabel, tabIndex: -1, className: "fixed flex flex-col overflow-hidden rounded-lg bg-white shadow-xl ring-1 ring-gray-200", style: {
+            bottom: (_a = popup.popupPosition) === null || _a === void 0 ? void 0 : _a.bottom,
+            left: (_c = (_b = popup.popupPosition) === null || _b === void 0 ? void 0 : _b.left) !== null && _c !== void 0 ? _c : 0,
+            maxHeight: (_d = popup.popupPosition) === null || _d === void 0 ? void 0 : _d.maxHeight,
+            top: (_e = popup.popupPosition) === null || _e === void 0 ? void 0 : _e.top,
+            visibility: popup.popupPosition ? "visible" : "hidden",
+            width: (_g = (_f = popup.popupPosition) === null || _f === void 0 ? void 0 : _f.width) !== null && _g !== void 0 ? _g : PEOPLE_SEARCH_POPUP_WIDTH_PX,
+            zIndex: DROPDOWN_MENU_Z_INDEX,
+        } },
+        React.createElement("div", { className: "flex-shrink-0 border-b border-gray-100 px-3 pb-2 pt-3" },
+            React.createElement("div", { className: "relative" },
+                React.createElement("span", { className: "pointer-events-none absolute inset-y-0 left-2.5 flex items-center text-gray-400" },
+                    React.createElement(Icon, { icon: IconProp.Search, className: "h-4 w-4" })),
+                React.createElement("input", { ref: searchInputRef, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-expanded": true, "aria-controls": listboxId, "aria-activedescendant": activeRow ? getOptionId(activeRow) : undefined, "aria-label": translateString(searchPlaceholder) || searchPlaceholder, "data-testid": "people-search-input", value: searchText, onChange: (event) => {
+                        setSearchText(event.target.value);
+                    }, onKeyDown: onSearchKeyDown, placeholder: translateString(searchPlaceholder) || searchPlaceholder, className: "w-full rounded-md border border-gray-200 bg-gray-50 py-1.5 pl-8 pr-3 text-sm text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500" }))),
+        React.createElement("div", { id: listboxId, role: "listbox", "aria-label": translateString(props.ariaLabel) || props.ariaLabel, "aria-multiselectable": props.selectionMode === "toggle" ? true : undefined, "aria-busy": isLoading, className: "min-h-0 flex-1 overflow-y-auto py-1" },
+            isLoading && visibleRows.length === 0 && (React.createElement("div", { className: "flex items-center justify-center gap-2 px-3 py-6 text-sm text-gray-500" },
+                React.createElement(Icon, { icon: IconProp.Spinner, className: "h-4 w-4 animate-spin" }),
+                React.createElement("span", null, translateString("Searching...")))),
+            !isLoading && loadError && (React.createElement("div", { role: "alert", className: "flex items-start gap-2 px-3 py-4 text-sm text-red-600" },
+                React.createElement(Icon, { icon: IconProp.Alert, className: "mt-0.5 h-4 w-4 flex-shrink-0" }),
+                React.createElement("span", null, loadError))),
+            !isLoading && !loadError && visibleRows.length === 0 && (React.createElement("div", { className: "px-3 py-6 text-center text-sm text-gray-500" }, trimmedSearch
+                ? translateString("No matches found.")
+                : translateString(emptyText) || emptyText)),
+            groups.map((group) => {
+                const headingId = `${baseId}-group-${group.kind}`;
+                return (React.createElement("div", { key: group.kind, role: "group", "aria-labelledby": headingId, className: "px-1" },
+                    React.createElement("div", { id: headingId, className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-gray-400" }, translateString(group.definition.groupTitle) ||
+                        group.definition.groupTitle),
+                    React.createElement("div", { className: "px-1 pb-1" }, group.rows.map((row) => {
+                        rowIndex++;
+                        const index = rowIndex;
+                        const key = getPeoplePickerOptionKey(row.kind, row.id);
+                        const isPicked = props.selectedKeys.has(key);
+                        const isActive = index === clampedActiveIndex;
+                        const isPending = pendingKey === key;
+                        const subtitle = row.description ||
+                            (group.definition.tag
+                                ? translateString(group.definition.tag) ||
+                                    group.definition.tag
+                                : undefined);
+                        return (React.createElement("div", { key: key, id: getOptionId(row), role: "option", "aria-selected": props.selectionMode === "toggle" ? isPicked : false, "aria-disabled": Boolean(pendingKey) || undefined, "data-testid": "people-search-option", "data-kind": row.kind, "data-id": row.id, onMouseDown: (event) => {
+                                // Keep focus in the search box.
+                                event.preventDefault();
+                            }, onMouseEnter: () => {
+                                setActiveIndex(index);
+                            }, onClick: () => {
+                                void pick(row);
+                            }, className: `flex w-full cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-left transition-colors ${isActive ? "bg-gray-100" : "hover:bg-gray-50"} ${pendingKey && !isPending ? "opacity-60" : ""}` },
+                            React.createElement(PeopleAvatar, { size: "sm", item: {
+                                    kind: row.kind,
+                                    name: row.name,
+                                    userId: row.userId,
+                                    hasProfilePicture: row.hasProfilePicture,
+                                } }),
+                            React.createElement("div", { className: "min-w-0 flex-1" },
+                                React.createElement("div", { className: "truncate text-sm font-medium text-gray-900" }, row.name),
+                                subtitle && (React.createElement("div", { className: "truncate text-xs text-gray-500" }, subtitle))),
+                            isPending ? (React.createElement(Icon, { icon: IconProp.Spinner, className: "h-4 w-4 flex-shrink-0 animate-spin text-gray-400" })) : isPicked ? (React.createElement(Icon, { icon: IconProp.Check, className: "h-4 w-4 flex-shrink-0 text-indigo-600" })) : (React.createElement(Icon, { icon: IconProp.Add, className: "h-4 w-4 flex-shrink-0 text-gray-400" }))));
+                    }))));
+            })),
+        pickError && (React.createElement("div", { role: "alert", className: "flex flex-shrink-0 items-start gap-2 border-t border-gray-100 bg-red-50 px-3 py-2 text-xs text-red-600" },
+            React.createElement(Icon, { icon: IconProp.Alert, className: "mt-0.5 h-3.5 w-3.5 flex-shrink-0" }),
+            React.createElement("span", null, pickError)))), popup.portalTarget);
+};
+export default PeopleSearchPopup;
+//# sourceMappingURL=PeopleSearchPopup.js.map

package/build/dist/UI/Components/PeoplePicker/PeopleSearchPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeopleSearchPopup.js","sourceRoot":"","sources":["../../../../../UI/Components/PeoplePicker/PeopleSearchPopup.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/PeoplePicker/usePeopleOptions.js

@@ -0,0 +1,151 @@
+import API from "../../Utils/API/API";
+import ProjectUtil from "../../Utils/Project";
+import { getPeoplePickerKindDefinition, } from "./PeoplePickerKinds";
+import { getPeoplePickerOptionKey, } from "./PeoplePickerTypes";
+import { useCallback, useEffect, useRef, useState, } from "react";
+export const getPeoplePickerValueSignature = (kinds, value) => {
+    return kinds
+        .map((kind) => {
+        return `${kind}=${(value[kind] || []).join(",")}`;
+    })
+        .join("|");
+};
+const usePeopleOptions = (data) => {
+    const cacheRef = useRef(new Map());
+    const pendingRef = useRef(new Set());
+    const isMountedRef = useRef(true);
+    const [, setVersion] = useState(0);
+    const [loadingCount, setLoadingCount] = useState(0);
+    const [error, setError] = useState("");
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    const remember = useCallback((options) => {
+        let changed = false;
+        for (const option of options) {
+            const key = getPeoplePickerOptionKey(option.kind, option.id);
+            const existing = cacheRef.current.get(key);
+            if (!existing ||
+                existing.isUnknown ||
+                existing.name !== option.name ||
+                existing.hasProfilePicture !== option.hasProfilePicture) {
+                cacheRef.current.set(key, option);
+                changed = true;
+            }
+        }
+        if (changed && isMountedRef.current) {
+            setVersion((version) => {
+                return version + 1;
+            });
+        }
+    }, []);
+    const signature = getPeoplePickerValueSignature(data.kinds, data.value);
+    useEffect(() => {
+        const missing = [];
+        for (const kind of data.kinds) {
+            const ids = [];
+            for (const id of data.value[kind] || []) {
+                const key = getPeoplePickerOptionKey(kind, id);
+                if (cacheRef.current.has(key) || pendingRef.current.has(key)) {
+                    continue;
+                }
+                pendingRef.current.add(key);
+                ids.push(id);
+            }
+            if (ids.length > 0) {
+                missing.push({ kind, ids });
+            }
+        }
+        if (missing.length === 0) {
+            return;
+        }
+        const projectId = ProjectUtil.getCurrentProjectId();
+        setLoadingCount((count) => {
+            return count + 1;
+        });
+        Promise.all(missing.map(async (entry) => {
+            const definition = getPeoplePickerKindDefinition(entry.kind);
+            const found = projectId
+                ? await definition.getByIds({ projectId, ids: entry.ids })
+                : [];
+            const foundKeys = new Set(found.map((option) => {
+                return getPeoplePickerOptionKey(option.kind, option.id);
+            }));
+            const unknown = entry.ids
+                .filter((id) => {
+                return !foundKeys.has(getPeoplePickerOptionKey(entry.kind, id));
+            })
+                .map((id) => {
+                return {
+                    kind: entry.kind,
+                    id: id,
+                    name: definition.unknownName,
+                    isUnknown: true,
+                };
+            });
+            /*
+             * Found under the server's spelling of the id, and also under the
+             * one the form holds, so either finds it.
+             */
+            const aliases = [];
+            for (const id of entry.ids) {
+                const match = found.find((option) => {
+                    return option.id.toLowerCase() === id.toLowerCase();
+                });
+                if (match && match.id !== id) {
+                    aliases.push(Object.assign(Object.assign({}, match), { id: id }));
+                }
+            }
+            return [...found, ...aliases, ...unknown];
+        }))
+            .then((results) => {
+            for (const options of results) {
+                for (const option of options) {
+                    const key = getPeoplePickerOptionKey(option.kind, option.id);
+                    // Never let a late "unknown" overwrite a name already known.
+                    if (option.isUnknown && cacheRef.current.has(key)) {
+                        continue;
+                    }
+                    cacheRef.current.set(key, option);
+                }
+            }
+            if (isMountedRef.current) {
+                setError("");
+            }
+        })
+            .catch((err) => {
+            if (isMountedRef.current) {
+                setError(API.getFriendlyMessage(err));
+            }
+        })
+            .finally(() => {
+            for (const entry of missing) {
+                for (const id of entry.ids) {
+                    pendingRef.current.delete(getPeoplePickerOptionKey(entry.kind, id));
+                }
+            }
+            if (isMountedRef.current) {
+                setLoadingCount((count) => {
+                    return Math.max(0, count - 1);
+                });
+                setVersion((version) => {
+                    return version + 1;
+                });
+            }
+        });
+    }, [signature]);
+    const getOption = (kind, id) => {
+        return cacheRef.current.get(getPeoplePickerOptionKey(kind, id));
+    };
+    return {
+        getOption,
+        remember,
+        isLoading: loadingCount > 0,
+        error,
+    };
+};
+export default usePeopleOptions;
+//# sourceMappingURL=usePeopleOptions.js.map

package/build/dist/UI/Components/PeoplePicker/usePeopleOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePeopleOptions.js","sourceRoot":"","sources":["../../../../../UI/Components/PeoplePicker/usePeopleOptions.ts"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/Pill/Pill.js

@@ -3,6 +3,7 @@ import Icon, { ThickProp } from "../Icon/Icon";
 import React from "react";
 import Tooltip from "../Tooltip/Tooltip";
 import { getPillColors, getPillDotStyle, getPillToneStyle, } from "./PillColors";
+import useTranslateValue from "../../Utils/Translation";
 export var PillSize;
 (function (PillSize) {
     PillSize["Small"] = "10px";
@@ -16,10 +17,20 @@ export var PillSize;
  */
 const PILL_CLASS_NAME = "inline-flex max-w-full items-center gap-[0.4em] rounded-full px-[0.6em] py-[0.2em] font-medium leading-[1.35]";
 const Pill = (props) => {
+    var _a;
     const colors = getPillColors(props.color || Gray500);
+    const { translateString } = useTranslateValue();
+    const text = (_a = translateString(props.text)) !== null && _a !== void 0 ? _a : props.text;
     const getPillElement = () => {
         return (React.createElement("span", { "data-testid": "pill", "data-ou-pill": props.isMinimal ? undefined : "", className: `${PILL_CLASS_NAME} ${props.isMinimal ? "text-gray-700 ring-1 ring-inset ring-gray-200" : ""}`, style: Object.assign(Object.assign({ fontSize: props.size ? props.size.toString() : PillSize.Normal }, (props.isMinimal ? {} : getPillToneStyle(colors, props.style))), props.style) },
-            props.icon ? (React.createElement(Icon, { icon: props.icon, thick: ThickProp.Thick, className: "h-[1em] w-[1em] flex-shrink-0" })) : (React.createElement("span", { "data-testid": "pill-dot", "data-ou-pill-dot": "", className: "h-[0.5em] w-[0.5em] flex-shrink-0 rounded-full", style: getPillDotStyle(colors), "aria-hidden": "true" })),
+            props.icon ? (React.createElement(Icon, { icon: props.icon, thick: ThickProp.Thick, className: "h-[1em] w-[1em] flex-shrink-0" })) : props.isPulsing ? (
+            /*
+             * The dot, with a copy of itself behind it that grows and fades.
+             * Both are painted like the plain dot, so the dark theme swaps both.
+             */
+            React.createElement("span", { "data-testid": "pill-dot", "data-pulsing": "true", className: "relative inline-flex h-[0.5em] w-[0.5em] flex-shrink-0", "aria-hidden": "true" },
+                React.createElement("span", { "data-testid": "pill-dot-pulse", "data-ou-pill-dot": "", className: "absolute inline-flex h-full w-full rounded-full opacity-75 motion-safe:animate-ping", style: getPillDotStyle(colors) }),
+                React.createElement("span", { "data-ou-pill-dot": "", className: "relative inline-flex h-full w-full rounded-full", style: getPillDotStyle(colors) }))) : (React.createElement("span", { "data-testid": "pill-dot", "data-ou-pill-dot": "", className: "h-[0.5em] w-[0.5em] flex-shrink-0 rounded-full", style: getPillDotStyle(colors), "aria-hidden": "true" })),
             React.createElement("span", { className: "min-w-0 truncate", onMouseEnter: (event) => {
                     /*
                      * A pill stays on one line and ellipsizes in a container too
@@ -29,12 +40,12 @@ const Pill = (props) => {
                     const textElement = event.currentTarget;
                     if (!props.tooltip &&
                         textElement.scrollWidth > textElement.clientWidth) {
-                        textElement.title = props.text;
+                        textElement.title = text;
                     }
                     else {
                         textElement.removeAttribute("title");
                     }
-                } }, props.text)));
+                } }, text)));
     };
     if (props.tooltip) {
         return React.createElement(Tooltip, { text: props.tooltip }, getPillElement());

package/build/dist/UI/Components/Pill/Pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../../../../UI/Components/Pill/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,IAAI,EAAE,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EACL,aAAa,EACb,eAAe,EACf,gBAAgB,GAEjB,MAAM,cAAc,CAAC;AAEtB,MAAM,CAAN,IAAY,QAKX;AALD,WAAY,QAAQ;IAClB,0BAAc,CAAA;IACd,2BAAe,CAAA;IACf,0BAAc,CAAA;IACd,+BAAmB,CAAA;AACrB,CAAC,EALW,QAAQ,KAAR,QAAQ,QAKnB;AAYD;;;GAGG;AACH,MAAM,eAAe,GACnB,+GAA+G,CAAC;AAElH,MAAM,IAAI,GAAsC,CAC9C,KAAqB,EACP,EAAE;IAChB,MAAM,MAAM,GAAe,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC;IAEjE,MAAM,cAAc,GAA4B,GAAiB,EAAE;QACjE,OAAO,CACL,6CACc,MAAM,kBACJ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAC9C,SAAS,EAAE,GAAG,eAAe,IAC3B,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,+CAA+C,CAAC,CAAC,CAAC,EACtE,EAAE,EACF,KAAK,gCACH,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,IAE3D,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,GAC9D,KAAK,CAAC,KAAK;YAGf,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,oBAAC,IAAI,IACH,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,SAAS,EAAC,+BAA+B,GACzC,CACH,CAAC,CAAC,CAAC,CACF,6CACc,UAAU,sBACL,EAAE,EACnB,SAAS,EAAC,gDAAgD,EAC1D,KAAK,EAAE,eAAe,CAAC,MAAM,CAAC,iBAClB,MAAM,GACZ,CACT;YACD,8BACE,SAAS,EAAC,kBAAkB,EAC5B,YAAY,EAAE,CAAC,KAAwC,EAAE,EAAE;oBACzD;;;;uBAIG;oBACH,MAAM,WAAW,GAAoB,KAAK,CAAC,aAAa,CAAC;oBAEzD,IACE,CAAC,KAAK,CAAC,OAAO;wBACd,WAAW,CAAC,WAAW,GAAG,WAAW,CAAC,WAAW,EACjD,CAAC;wBACD,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC;oBACjC,CAAC;yBAAM,CAAC;wBACN,WAAW,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;oBACvC,CAAC;gBACH,CAAC,IAEA,KAAK,CAAC,IAAI,CACN,CACF,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO,oBAAC,OAAO,IAAC,IAAI,EAAE,KAAK,CAAC,OAAO,IAAG,cAAc,EAAE,CAAW,CAAC;IACpE,CAAC;IAED,OAAO,cAAc,EAAE,CAAC;AAC1B,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../../../../UI/Components/Pill/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,IAAI,EAAE,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EACL,aAAa,EACb,eAAe,EACf,gBAAgB,GAEjB,MAAM,cAAc,CAAC;AACtB,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAN,IAAY,QAKX;AALD,WAAY,QAAQ;IAClB,0BAAc,CAAA;IACd,2BAAe,CAAA;IACf,0BAAc,CAAA;IACd,+BAAmB,CAAA;AACrB,CAAC,EALW,QAAQ,KAAR,QAAQ,QAKnB;AAmBD;;;GAGG;AACH,MAAM,eAAe,GACnB,+GAA+G,CAAC;AAElH,MAAM,IAAI,GAAsC,CAC9C,KAAqB,EACP,EAAE;;IAChB,MAAM,MAAM,GAAe,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC;IACjE,MAAM,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAChD,MAAM,IAAI,GAAW,MAAA,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,mCAAI,KAAK,CAAC,IAAI,CAAC;IAE/D,MAAM,cAAc,GAA4B,GAAiB,EAAE;QACjE,OAAO,CACL,6CACc,MAAM,kBACJ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAC9C,SAAS,EAAE,GAAG,eAAe,IAC3B,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,+CAA+C,CAAC,CAAC,CAAC,EACtE,EAAE,EACF,KAAK,gCACH,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,IAE3D,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,GAC9D,KAAK,CAAC,KAAK;YAGf,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,oBAAC,IAAI,IACH,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,SAAS,EAAC,+BAA+B,GACzC,CACH,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;YACpB;;;eAGG;YACH,6CACc,UAAU,kBACT,MAAM,EACnB,SAAS,EAAC,wDAAwD,iBACtD,MAAM;gBAElB,6CACc,gBAAgB,sBACX,EAAE,EACnB,SAAS,EAAC,qFAAqF,EAC/F,KAAK,EAAE,eAAe,CAAC,MAAM,CAAC,GACxB;gBACR,kDACmB,EAAE,EACnB,SAAS,EAAC,iDAAiD,EAC3D,KAAK,EAAE,eAAe,CAAC,MAAM,CAAC,GACxB,CACH,CACR,CAAC,CAAC,CAAC,CACF,6CACc,UAAU,sBACL,EAAE,EACnB,SAAS,EAAC,gDAAgD,EAC1D,KAAK,EAAE,eAAe,CAAC,MAAM,CAAC,iBAClB,MAAM,GACZ,CACT;YACD,8BACE,SAAS,EAAC,kBAAkB,EAC5B,YAAY,EAAE,CAAC,KAAwC,EAAE,EAAE;oBACzD;;;;uBAIG;oBACH,MAAM,WAAW,GAAoB,KAAK,CAAC,aAAa,CAAC;oBAEzD,IACE,CAAC,KAAK,CAAC,OAAO;wBACd,WAAW,CAAC,WAAW,GAAG,WAAW,CAAC,WAAW,EACjD,CAAC;wBACD,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC;oBAC3B,CAAC;yBAAM,CAAC;wBACN,WAAW,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;oBACvC,CAAC;gBACH,CAAC,IAEA,IAAI,CACA,CACF,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO,oBAAC,OAAO,IAAC,IAAI,EAAE,KAAK,CAAC,OAAO,IAAG,cAAc,EAAE,CAAW,CAAC;IACpE,CAAC;IAED,OAAO,cAAc,EAAE,CAAC;AAC1B,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}