@blocklet/labels 1.6.195 → 1.6.197

package/dist/index.es.js

@@ -1,72 +1,1370 @@
-import { G, j, b, a, L, d, k, h, i, f, u, e } from "./index-aAHAaJv_.mjs";
-import "react/jsx-runtime";
-import "react";
-import "@mui/icons-material";
-import "@mui/material/Box";
-import "@mui/material/styles";
-import "react-arborist";
-import "@iconify/react";
-import "lodash/omit";
-import "react-select";
-import "@mui/material";
-import "@arcblock/ux/lib/Locale/context";
-import "ahooks";
-import "unstated-next";
-import "performant-array-to-tree";
-import "@mui/icons-material/Close";
-import "@mui/icons-material/Done";
-import "chroma-js";
-import "lodash/pick";
-import "lodash/cloneDeep";
-import "lodash/isFunction";
-import "lodash/isUndefined";
-import "lodash/defaultsDeep";
-import "@arcblock/ux/lib/Util";
-import "@arcblock/ux/lib/Toast";
-import "@arcblock/ux/lib/Center";
-import "@arcblock/ux/lib/Colors";
-import "@arcblock/ux/lib/Dialog/use-confirm";
-import "@arcblock/ux/lib/DID";
-import "@arcblock/ux/lib/Avatar";
-import "@arcblock/ux/lib/SessionUser/libs/utils";
-import "@arcblock/ux/lib/Locale/util";
-import "node:crypto";
-import "@arcblock/ux/lib/Util/wallet";
-import "@arcblock/ux/lib/Dialog";
-import "@arcblock/ux/lib/Button";
-import "@arcblock/ux/lib/Empty";
-import "lodash/noop";
-import "@arcblock/ux/lib/CardSelector";
-import "node:buffer";
-import "@arcblock/ux/lib/Util/federated";
-import "react-dom";
-import "@arcblock/ux/lib/WebWalletSWKeeper";
-import "@arcblock/ux/lib/BlockletContext";
-import "lodash";
-import "@arcblock/ux/lib/RelativeTime";
-import "@arcblock/ux/lib/WalletOSIcon";
-import "@arcblock/ux/lib/LoadingMask";
-import "@arcblock/ux/lib/Success";
-import "lodash/intersection";
-import "@arcblock/ux/lib/QRCode";
-import "lodash/get";
-import "lodash/omitBy";
-import "lodash/isNil";
-import "lodash/unionBy";
-import "lodash/sortBy";
-import "@arcblock/ux/lib/Address";
-import "@arcblock/ux/lib/Img";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { createContext, useRef, useState, useCallback, useEffect, useMemo, useContext, createElement } from "react";
+import { ExpandMore, Edit, LabelOutlined } from "@mui/icons-material";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import { Tree } from "react-arborist";
+import { Icon } from "@iconify/react";
+import omit from "lodash/omit";
+import Select, { components } from "react-select";
+import { ClickAwayListener, Box as Box$1, Chip, IconButton, Button, getContrastRatio, alpha, useTheme, ButtonBase, Popper, Autocomplete, InputBase, autocompleteClasses, TextField } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useReactive, useRequest, useSize, useDeepCompareLayoutEffect } from "ahooks";
+import { createContainer } from "unstated-next";
+import { arrayToTree } from "performant-array-to-tree";
+import CloseOutlineIcon from "@mui/icons-material/Close";
+import DoneIcon from "@mui/icons-material/Done";
+import chroma from "chroma-js";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+const materialSymbolsLabelRounded = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M5 19q-.825 0-1.413-.587Q3 17.825 3 17V7q0-.825.587-1.412Q4.175 5 5 5h10q.5 0 .938.225q.437.225.712.625l3.525 5q.375.525.375 1.15q0 .625-.375 1.15l-3.525 5q-.275.4-.712.625Q15.5 19 15 19Z" }) });
+const materialSymbolsCheckSmall = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z" }) });
+const LabelTreeContext = createContext({});
+function LabelTreeProvider({
+  selectable = false,
+  selected = [],
+  onSelect,
+  renderItem,
+  children
+}) {
+  const isSelected = (id) => selected.indexOf(id) !== -1;
+  const select = (id) => {
+    Array.from(new Set(selected).add(id));
+    onSelect == null ? void 0 : onSelect(id);
+  };
+  const value = useMemo(
+    () => ({
+      selectable,
+      selected,
+      isSelected,
+      select,
+      renderItem
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selected]
+  );
+  return /* @__PURE__ */ jsx(LabelTreeContext.Provider, { value, children });
+}
+const isLeaf = (node) => {
+  var _a;
+  return node.isLeaf || !((_a = node.data.children) == null ? void 0 : _a.length);
+};
+function FolderArrow({ node }) {
+  if (isLeaf(node))
+    return /* @__PURE__ */ jsx("span", {});
+  return node.isOpen ? /* @__PURE__ */ jsx(ExpandMore, { style: { fontSize: 20 } }) : /* @__PURE__ */ jsx(ExpandMore, { style: { fontSize: 20, transform: "rotate(-90deg)" } });
+}
+function Node({ node, style, dragHandle }) {
+  const { selectable, select, isSelected, renderItem } = useContext(LabelTreeContext);
+  const { data } = node;
+  const icon = data.icon ? /* @__PURE__ */ jsx(Icon, { icon: data.icon, style: { fontSize: 18 } }) : /* @__PURE__ */ jsx(materialSymbolsLabelRounded, { style: { fontSize: 18, color: data.color || "#ddd" } });
+  const handleToggle = (e) => {
+    e.stopPropagation();
+    if (node.isInternal) {
+      node.toggle();
+    }
+  };
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (selectable) {
+      select(node.id);
+    }
+  };
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", flex: 1 }, children: [
+      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", cursor: "pointer" }, onClick: handleToggle, children: /* @__PURE__ */ jsx(FolderArrow, { node }) }),
+      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", width: 22, height: 22 }, children: icon }),
+      /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "grey.700" }, children: node.data.name })
+    ] }),
+    selectable && isSelected(node.id) && /* @__PURE__ */ jsx(materialSymbolsCheckSmall, {})
+  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: "label-tree-item",
+      style,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        color: (theme) => theme.palette.mode === "dark" ? "grey.800" : "text.primary"
+      },
+      ref: dragHandle,
+      onClick: handleClick,
+      children: [
+        !renderItem && children,
+        !!renderItem && renderItem(children, node.data)
+      ]
+    }
+  );
+}
+const Root = styled(Box)`
+  > div,
+  > div > div,
+  > div > div > div {
+    width: auto !important;
+  }
+  [role='treeitem'] {
+    display: flex;
+    align-items: stretch;
+  }
+  .label-tree-item {
+    width: 100%;
+  }
+`;
+function LabelTree({
+  data,
+  selectable,
+  selected = [],
+  onSelect,
+  rowHeight = 28,
+  renderItem,
+  sx,
+  ...rest
+}) {
+  const tree = useRef();
+  const mergedSx = [...Array.isArray(sx) ? sx : [sx]];
+  const [height, setHeight] = useState(0);
+  const updateHeight = useCallback(() => {
+    var _a, _b;
+    setHeight((((_b = (_a = tree.current) == null ? void 0 : _a.visibleNodes) == null ? void 0 : _b.length) || 0) * rowHeight);
+  }, [rowHeight]);
+  useEffect(() => {
+    updateHeight();
+  }, [data, updateHeight]);
+  const handleToggle = () => {
+    setTimeout(updateHeight);
+  };
+  return /* @__PURE__ */ jsx(LabelTreeProvider, { selectable, selected, onSelect, renderItem, children: /* @__PURE__ */ jsx(Root, { ...rest, sx: mergedSx, children: /* @__PURE__ */ jsx(Tree, { data, rowHeight, height, indent: 32, ref: tree, onToggle: handleToggle, children: Node }) }) });
+}
+const flatten = (data) => {
+  return data.reduce((acc, cur) => {
+    var _a;
+    acc.push(cur);
+    if ((_a = cur.children) == null ? void 0 : _a.length) {
+      acc.push(...flatten(cur.children));
+    }
+    return acc;
+  }, []);
+};
+const safeParseJSON = (json, defaultValue = null) => {
+  try {
+    return JSON.parse(json);
+  } catch {
+    return defaultValue;
+  }
+};
+const transformLabels = (labelDtos) => {
+  const relations = labelDtos.reduce((acc, cur) => {
+    acc[cur.id] = acc[cur.id] || {};
+    if (cur.parentId) {
+      acc[cur.id].parent = cur.parentId;
+      acc[cur.parentId] = acc[cur.parentId] || {};
+      acc[cur.parentId].children = acc[cur.parentId].children || [];
+      acc[cur.parentId].children.push(cur.id);
+    }
+    return acc;
+  }, {});
+  const labels = labelDtos.map(({ parentId, translation, ...rest }) => ({
+    ...rest,
+    translation: safeParseJSON(translation),
+    children: []
+  }));
+  const labelsKeyById = labels.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {});
+  labels.forEach((item) => {
+    const relation = relations[item.id];
+    if (relation.parent && labelsKeyById[relation.parent]) {
+      item.parent = labelsKeyById[relation.parent];
+    }
+    if (relation.children) {
+      item.children = relation.children.map((childId) => labelsKeyById[childId]);
+    }
+  });
+  return labels.filter((item) => !item.parent);
+};
+const LabelMenuList = (props) => {
+  const { options, getValue, selectProps, selectOption } = props;
+  const value = getValue();
+  const handleSelect = (id) => {
+    const option = options.find((item) => item.data.id === id);
+    if (option) {
+      selectOption(option);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(components.MenuList, { ...omit(props, ["addon"]), children: /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1 }, children: /* @__PURE__ */ jsx(
+      LabelTree,
+      {
+        data: selectProps.data,
+        selectable: true,
+        onSelect: handleSelect,
+        selected: value.map((item) => item.data.id)
+      }
+    ) }) }),
+    props.addon
+  ] });
+};
+const ValueContainer = ({ children, ...props }) => {
+  const [values, input] = children;
+  const count = Array.isArray(values) ? values.length : 0;
+  return /* @__PURE__ */ jsxs(components.ValueContainer, { ...props, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "span",
+        sx: {
+          fontSize: 13,
+          fontWeight: "bold",
+          color: (theme) => theme.palette.mode === "dark" ? "grey.800" : "text.primary"
+        },
+        children: count ? "Labels" : "Filter by labels"
+      }
+    ),
+    !!count && /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "inline-flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: 22,
+          height: 22,
+          ml: 1,
+          borderRadius: "100%",
+          fontSize: 12,
+          color: (theme) => theme.palette.mode === "dark" ? "grey.800" : "text.primary",
+          bgcolor: "grey.200"
+        },
+        children: count
+      }
+    ),
+    input
+  ] });
+};
+const compactSelectStyles = {
+  control: (provided) => ({
+    ...provided,
+    minHeight: 31
+  }),
+  valueContainer: (provided) => ({
+    ...provided,
+    display: "flex"
+  }),
+  dropdownIndicator: (provided) => ({
+    ...provided,
+    padding: "0 4px"
+  }),
+  clearIndicator: (provided) => ({
+    ...provided,
+    padding: "4px"
+  })
+};
+function LabelPicker({
+  data,
+  value = [],
+  editable = false,
+  addon,
+  onChange,
+  compact,
+  isMulti = true,
+  maxHeight = 264,
+  ...rest
+}) {
+  const selectRef = useRef(null);
+  const options = useMemo(
+    () => flatten(data).map((item) => ({ data: item, label: item.name, value: item.id })),
+    [data]
+  );
+  const optionsKeyById = options.reduce(
+    (acc, cur) => ({ ...acc, [cur.data.id]: cur }),
+    {}
+  );
+  const valueArr = Array.isArray(value) ? value : [value];
+  const selectedOptions = valueArr.map((item) => optionsKeyById[item]);
+  const changes = useRef({
+    prev: valueArr.map((item) => {
+      var _a;
+      return ((_a = optionsKeyById[item]) == null ? void 0 : _a.data) || "";
+    })
+  });
+  const handleChange = (v, actionMeta) => {
+    if (!isMulti || !Array.isArray(v)) {
+      onChange(v ? [v.data] : []);
+    } else {
+      changes.current.current = v.map((item) => item.data);
+    }
+    if (["clear", "remove-value"].includes(actionMeta.action) && selectRef.current) {
+      setTimeout(() => {
+        var _a;
+        return (_a = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _a.blur();
+      }, 1);
+    }
+  };
+  const handleMenuClose = () => {
+    if (changes.current.current) {
+      const changed = JSON.stringify(changes.current.prev.map((item) => item.id)) !== JSON.stringify(changes.current.current.map((item) => item.id));
+      if (changed) {
+        onChange(changes.current.current);
+        changes.current.prev = changes.current.current;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(Box, { ...rest, children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      ref: selectRef,
+      defaultValue: selectedOptions,
+      options,
+      onChange: handleChange,
+      components: {
+        // @ts-ignore
+        MenuList: (props) => /* @__PURE__ */ jsx(LabelMenuList, { ...props, addon }),
+        // eslint-disable-line react/no-unstable-nested-components
+        ...compact && { ValueContainer }
+      },
+      placeholder: "Select labels",
+      styles: {
+        ...compact && compactSelectStyles,
+        menu: (css) => ({
+          ...css,
+          ...editable && { paddingBottom: "36px" },
+          zIndex: 99
+        }),
+        menuList: (css) => ({
+          ...css,
+          overflowY: "auto",
+          maxHeight: `${maxHeight}px`
+        })
+      },
+      theme: (_theme) => ({
+        ..._theme,
+        colors: {
+          ..._theme.colors,
+          primary25: "#ddd",
+          primary50: "#ddd",
+          primary: "#ddd"
+        }
+      }),
+      isSearchable: false,
+      isMulti,
+      closeMenuOnSelect: !isMulti,
+      onMenuClose: handleMenuClose,
+      isClearable: true,
+      data
+    }
+  ) });
+}
+class TreeNode {
+  constructor({ data, parent, children }) {
+    __publicField(this, "data");
+    __publicField(this, "parent");
+    __publicField(this, "children");
+    this.data = data;
+    this.parent = parent;
+    this.children = children || [];
+  }
+  setParent(node) {
+    this.parent = node;
+  }
+  add(...nodes) {
+    this.children.push(...nodes);
+    nodes.forEach((node) => node.setParent(this));
+  }
+  removeChild(node) {
+    this.children = this.children.filter((x) => x !== node);
+    node.setParent(void 0);
+  }
+  isLeaf(node) {
+    var _a;
+    return !((_a = node.children) == null ? void 0 : _a.length);
+  }
+  getAllParents(includeSelf = true) {
+    const parents = [];
+    if (includeSelf) {
+      parents.unshift(this);
+    }
+    let { parent } = this;
+    while (parent) {
+      parents.unshift(parent);
+      parent = parent.parent;
+    }
+    return parents;
+  }
+  getAllSiblings() {
+    var _a;
+    const siblings = ((_a = this.parent) == null ? void 0 : _a.children.filter((node) => node !== this)) || [];
+    return siblings;
+  }
+  flatten(includeRoot) {
+    const nodes = [];
+    const traverse = (node) => {
+      nodes.push(node);
+      node.children.forEach(traverse);
+    };
+    traverse(this);
+    if (!includeRoot) {
+      nodes.shift();
+    }
+    return nodes;
+  }
+  clone() {
+    const cloned = new TreeNode({ data: this.data });
+    cloned.add(...this.children);
+    return cloned;
+  }
+}
+class Label {
+  constructor(data) {
+    __publicField(this, "id");
+    __publicField(this, "name");
+    __publicField(this, "icon");
+    __publicField(this, "type");
+    __publicField(this, "color");
+    __publicField(this, "passports");
+    __publicField(this, "translation");
+    this.id = data.id;
+    this.name = data.name;
+    this.icon = data.icon;
+    this.type = data.type;
+    this.color = data.color || "#ddd";
+    this.passports = data.passports || [];
+    this.translation = this._normalizeTranslation(data.translation);
+  }
+  _normalizeTranslation(translation) {
+    if (typeof translation === "object") {
+      return translation;
+    }
+    try {
+      return JSON.parse(translation);
+    } catch {
+      return {};
+    }
+  }
+  getName(locale) {
+    var _a;
+    if (!locale) {
+      return this.name;
+    }
+    return ((_a = this == null ? void 0 : this.translation) == null ? void 0 : _a[locale]) || (this == null ? void 0 : this.name);
+  }
+}
+class LabelTreeNode extends TreeNode {
+  getName(locale) {
+    return this.data.getName(locale);
+  }
+  isSystemLabel() {
+    return this.data.type === "system";
+  }
+  getFullName(locale) {
+    const parents = this.getAllParents();
+    parents.shift();
+    if (locale) {
+      return parents.map((item) => item.getName(locale)).join(" / ");
+    }
+    return parents.map((item) => item.data.name).join(" / ");
+  }
+}
+__publicField(LabelTreeNode, "Label", Label);
+const mapToTree = (items, parent) => {
+  return items.map((item) => {
+    const node = new LabelTreeNode({ data: new Label(item.data), parent });
+    const children = mapToTree(item.children || [], node);
+    node.add(...children);
+    return node;
+  });
+};
+const initLabelTree = (data) => {
+  const treeData = arrayToTree(data);
+  const root = new LabelTreeNode({ data: {} });
+  root.add(...mapToTree(treeData));
+  return root;
+};
+const createEmptyLabelTree = () => {
+  return new LabelTreeNode({ data: {}, children: [] });
+};
+const useLabels = ({ loading, data, createLabel: createLabelAPI }) => {
+  const { locale } = useLocaleContext();
+  const state = useReactive({
+    loading: true,
+    tree: createEmptyLabelTree(),
+    stats: []
+  });
+  useEffect(() => {
+    try {
+      if (data && !loading) {
+        const { labels, stats } = data;
+        const tree = initLabelTree(labels || []);
+        state.loading = false;
+        state.tree = tree;
+        state.stats = stats.sort((a, b) => b.count - a.count);
+      }
+    } catch (e) {
+      console.error(e);
+      state.loading = false;
+    }
+  }, [data, loading]);
+  const flattened = useMemo(() => state.tree.flatten(), [state.tree]);
+  const counts = useMemo(
+    () => state.stats.reduce((acc, cur) => ({ ...acc, [cur.id]: cur.count }), {}),
+    [state.stats]
+  );
+  const nodesKeyById = useMemo(() => {
+    return flattened.reduce((acc, cur) => ({ ...acc, [cur.data.id]: cur }), {});
+  }, [flattened]);
+  const popularLabels = useMemo(
+    () => state.stats.slice(0, 12).map((x) => nodesKeyById[x.id]),
+    [nodesKeyById, state.stats]
+  );
+  const getLabelsByIds = useCallback(
+    (ids) => {
+      return ids.map((id) => nodesKeyById[id]).filter(Boolean);
+    },
+    [nodesKeyById]
+  );
+  const labelExists = useCallback((id) => !!nodesKeyById[id], [nodesKeyById]);
+  const getLabelName = (id) => {
+    var _a;
+    return (_a = nodesKeyById[id]) == null ? void 0 : _a.data.getName(locale);
+  };
+  const getRelatedLabels = (id) => {
+    const node = nodesKeyById[id];
+    if (!node || node.parent === state.tree) {
+      return [];
+    }
+    const siblings = node.getAllSiblings();
+    return siblings;
+  };
+  const getRecommended = (id) => {
+    const related = id ? getRelatedLabels(id) : [];
+    const set = new Set([...related.map((x) => x.data.id), id].filter(Boolean));
+    return [...related, ...popularLabels.filter((x) => !set.has(x.data.id))].filter((x) => !!counts[x.data.id]);
+  };
+  const createLabel = async (name) => {
+    const saved = await createLabelAPI({ name });
+    const node = new LabelTreeNode({ data: new LabelTreeNode.Label(saved) });
+    state.tree.add(node);
+    state.tree = state.tree.clone();
+    return node.data;
+  };
+  const addLabelNode = (payload) => {
+    const parent = payload.parentId ? nodesKeyById[payload.parentId] : state.tree;
+    const node = new LabelTreeNode({ data: new LabelTreeNode.Label(payload) });
+    parent.add(node);
+    state.tree = state.tree.clone();
+  };
+  const updateLabelNode = (id, payload) => {
+    const existing = nodesKeyById[id];
+    if (existing && existing.parent) {
+      const node = new LabelTreeNode({ data: new LabelTreeNode.Label(payload) });
+      node.add(...existing.children);
+      if (existing.parent.data.id == payload.parentId) {
+        existing.parent.children = existing.parent.children.map((x) => {
+          if (x.data.id === id) {
+            node.setParent(existing.parent);
+            return node;
+          }
+          return x;
+        });
+      } else {
+        const parent = nodesKeyById[payload.parentId];
+        if (parent) {
+          existing.parent.children = existing.parent.children.filter((x) => x.data.id !== id);
+          parent.add(node);
+        }
+      }
+      state.tree = state.tree.clone();
+    }
+  };
+  const removeLabelNode = (id) => {
+    const node = nodesKeyById[id];
+    if (node == null ? void 0 : node.parent) {
+      node.parent.removeChild(node);
+      state.tree = state.tree.clone();
+    }
+  };
+  const getFullLabelName = (id) => {
+    var _a;
+    return ((_a = nodesKeyById[id]) == null ? void 0 : _a.getFullName(locale)) ?? id;
+  };
+  const parseLabelsStr = useCallback((labelIdsStr) => {
+    return (labelIdsStr == null ? void 0 : labelIdsStr.split(",").filter(Boolean)) || [];
+  }, []);
+  return {
+    ...state,
+    flattenedLabels: flattened,
+    popularLabels,
+    counts,
+    getLabelsByIds,
+    labelExists,
+    getLabelName,
+    getRelatedLabels,
+    getRecommended,
+    createLabel,
+    addLabelNode,
+    updateLabelNode,
+    removeLabelNode,
+    getFullLabelName,
+    parseLabelsStr
+  };
+};
+const LabelsContainer = createContainer(useLabels);
+const LabelsContext = createContext({});
+const useLabelsContext = () => useContext(LabelsContext);
+const useLabelsUpdateOnDestroy = () => {
+  const { updateLabels } = useLabelsContext();
+  useEffect(() => {
+    return () => {
+      updateLabels();
+    };
+  }, []);
+};
+function LabelsProvider({ fetchLabels, createLabel, children }) {
+  const { locale } = useLocaleContext();
+  const [updateCounter, setUpdateCounter] = useState(1);
+  const { loading, data } = useRequest(fetchLabels, {
+    refreshDeps: [updateCounter]
+  });
+  const labels = useMemo(() => transformLabels((data == null ? void 0 : data.labels) || []), [data]);
+  const labelsKeyById = useMemo(() => {
+    if (!(labels == null ? void 0 : labels.length)) {
+      return {};
+    }
+    const flattened = flatten(labels);
+    return flattened.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {});
+  }, [labels]);
+  const localeTransformer = useCallback(
+    (label) => {
+      var _a;
+      return {
+        ...label,
+        name: ((_a = label.translation) == null ? void 0 : _a[locale]) || label.name
+      };
+    },
+    [locale]
+  );
+  const getLabelsById = useCallback(
+    (ids) => ids.filter(Boolean).map((item) => labelsKeyById[item]).map(localeTransformer),
+    [labelsKeyById, localeTransformer]
+  );
+  const getParents = useCallback((label) => {
+    let { parent } = label;
+    const parents = [];
+    while (parent) {
+      parents.unshift(parent);
+      parent = parent.parent;
+    }
+    return parents;
+  }, []);
+  const getFullLabelName = useCallback(
+    (label) => {
+      const parents = [...getParents(label), label].map(localeTransformer);
+      return parents.map((item) => item.name).join(" / ");
+    },
+    [localeTransformer, getParents]
+  );
+  const parseLabelIds = useCallback((labelIdsStr) => {
+    return (labelIdsStr == null ? void 0 : labelIdsStr.split(",").filter(Boolean)) || [];
+  }, []);
+  const stringifyLabelIds = useCallback((labelIds = []) => {
+    if (!(labelIds == null ? void 0 : labelIds.length)) {
+      return void 0;
+    }
+    return labelIds.join(",");
+  }, []);
+  const localizedLabels = useMemo(() => labels.map(localeTransformer), [labels, localeTransformer]);
+  const value = useMemo(() => {
+    return {
+      loading,
+      labels: labels || [],
+      updateLabels: () => setUpdateCounter((prev) => prev + 1),
+      getLabelsById,
+      parseLabelIds,
+      stringifyLabelIds,
+      localizedLabels,
+      flattenedLabels: flatten(localizedLabels || []),
+      getFullLabelName
+    };
+  }, [loading, labels, getLabelsById, parseLabelIds, stringifyLabelIds, localizedLabels, getFullLabelName]);
+  return /* @__PURE__ */ jsx(LabelsContext.Provider, { value, children: /* @__PURE__ */ jsx(LabelsContainer.Provider, { initialState: { loading, data, createLabel }, children }) });
+}
+const getContrastTextColor = (bgcolor) => {
+  try {
+    const ratio = getContrastRatio(bgcolor, "#fff");
+    return ratio > 2.7 ? "#fff" : "#111";
+  } catch {
+    return "#111";
+  }
+};
+const getAlphaColor = (color, alpha$1) => {
+  try {
+    if (color) {
+      return alpha(color, alpha$1);
+    }
+  } catch {
+    return color;
+  }
+  return color;
+};
+function Labels({ labels, editable, onChange, sx, renderLabel }) {
+  const isEmpty = !(labels == null ? void 0 : labels.length);
+  const { labels: allLabels, loading, getLabelsById, getFullLabelName } = useLabelsContext();
+  const [editing, setEditing] = useState(false);
+  if (loading || !editable && isEmpty) {
+    return null;
+  }
+  const handleOnChange = (v) => {
+    onChange == null ? void 0 : onChange(v);
+    setTimeout(() => {
+      setEditing(false);
+    }, 300);
+  };
+  if (editing) {
+    return /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => editing && setEditing(false), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(LabelPicker, { data: allLabels, value: labels || [], onChange: handleOnChange }) }) });
+  }
+  const labelObjects = getLabelsById(labels || []).filter((x) => x.type !== "system");
+  const mergedSx = [
+    { display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsxs(Box$1, { sx: mergedSx, children: [
+    labelObjects.map((item) => {
+      if (!item) {
+        return null;
+      }
+      if (renderLabel) {
+        return renderLabel(item);
+      }
+      return /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: getFullLabelName(item),
+          variant: "filled",
+          size: "small",
+          sx: {
+            height: 20,
+            borderRadius: 1,
+            fontSize: 12,
+            bgcolor: getAlphaColor(item.color || "#ddd", 0.8),
+            color: getContrastTextColor(item.color || "#ddd")
+          }
+        },
+        item.id
+      );
+    }),
+    editable && !isEmpty && /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", onClick: () => setEditing(true), sx: { color: "grey.400" }, children: /* @__PURE__ */ jsx(Edit, { sx: { fontSize: 20 } }) }),
+    editable && isEmpty && /* @__PURE__ */ jsx(Button, { color: "inherit", variant: "outlined", startIcon: /* @__PURE__ */ jsx(LabelOutlined, {}), onClick: () => setEditing(true), children: "Edit labels" })
+  ] });
+}
+const mdiTagPlusOutline = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M6.5 5A1.5 1.5 0 1 0 8 6.5A1.5 1.5 0 0 0 6.5 5m0 0A1.5 1.5 0 1 0 8 6.5A1.5 1.5 0 0 0 6.5 5m14.91 6.58l-9-9A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .59 1.42l.41.4a5.62 5.62 0 0 1 2.08-.74L4 11V4h7l9 9l-7 7l-1.08-1.08a5.57 5.57 0 0 1-.74 2.08l.41.41A2 2 0 0 0 13 22a2 2 0 0 0 1.41-.59l7-7A2 2 0 0 0 22 13a2 2 0 0 0-.59-1.42M6.5 5A1.5 1.5 0 1 0 8 6.5A1.5 1.5 0 0 0 6.5 5M10 19H7v3H5v-3H2v-2h3v-3h2v3h3Z" }) });
+const getTextColor = (color) => {
+  return chroma(color).hex();
+};
+const getBorderColor = (color) => {
+  if (chroma(color).luminance() > 0.5) {
+    return chroma(color).darken(3).hex();
+  }
+  return chroma(color).brighten(0.5).alpha(0.25).hex();
+};
+const getBackgroundColor = (color) => {
+  if (chroma(color).luminance() > 0.5) {
+    return chroma(color).darken(2.5).hex();
+  }
+  return chroma(color).brighten(2.5).alpha(0.25).hex();
+};
+const getFilterStyle = (color) => {
+  if (chroma(color).luminance() > 0.5) {
+    return "brightness(0.85) contrast(1.2)";
+  }
+  return "brightness(0.85) contrast(1.2)";
+};
+function LabelChip({
+  label,
+  onDelete,
+  sx,
+  fullName = true,
+  onClick,
+  disabled = false,
+  renderName = (name) => name
+}) {
+  const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
+  const mergedSx = [
+    {
+      height: 20,
+      borderRadius: 0.5,
+      fontSize: 12,
+      fontWeight: 500,
+      color: `${getTextColor(label.data.color)} !important`,
+      bgcolor: `${getBackgroundColor(label.data.color)} !important`,
+      transition: "filter 0.2s",
+      borderColor: `${getBorderColor(label.data.color)} !important`,
+      // -webkit-text-fill-color
+      WebkitTextFillColor: `${getTextColor(label.data.color)} !important`,
+      ".MuiChip-deleteIcon": {
+        color: `${getTextColor(label.data.color)} !important`,
+        cursor: "pointer",
+        transition: "transform 0.3s",
+        "&:hover": {
+          transform: "rotate(90deg)"
+        }
+      },
+      ".MuiChip-label": {
+        px: 0.5,
+        maxHeight: 20
+      },
+      ...onClick && {
+        cursor: "pointer",
+        "&:hover": {
+          filter: getFilterStyle(label.data.color)
+        }
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  const hasDelete = !disabled && !!onDelete;
+  const hasOnClick = !disabled && !!onClick;
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ jsx(
+      Chip,
+      {
+        label: renderName(fullName ? getFullLabelName(label.data.id) : getLabelName(label.data.id)),
+        variant: "outlined",
+        size: "small",
+        ...hasDelete && {
+          onDelete: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onDelete(label);
+          },
+          deleteIcon: /* @__PURE__ */ jsx(CloseOutlineIcon, {})
+        },
+        ...hasOnClick && {
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onClick(label);
+          }
+        },
+        sx: mergedSx
+      },
+      label.data.id
+    )
+  );
+}
+function Labels2({
+  compact = true,
+  labels,
+  sx,
+  renderLabel,
+  prepend,
+  displaySystemLabels = true,
+  onItemClick
+}) {
+  const { getLabelsByIds, loading } = LabelsContainer.useContainer();
+  const labelsWrapperRef = useRef(null);
+  const [overflowIndex, setOverflowIndex] = useState(99999);
+  let labelNodes = getLabelsByIds(labels || []);
+  const size = useSize(labelsWrapperRef);
+  useDeepCompareLayoutEffect(() => {
+    if (compact) {
+      if (labelsWrapperRef.current) {
+        const { right } = labelsWrapperRef.current.getBoundingClientRect();
+        const labelElements = labelsWrapperRef.current.querySelectorAll(".MuiChip-root");
+        if ((labelElements == null ? void 0 : labelElements.length) > 0) {
+          Array.from(labelElements).some((x, i) => {
+            const rect = x.getBoundingClientRect();
+            if (rect.right > right - 36) {
+              setOverflowIndex(i);
+              return true;
+            }
+            return false;
+          });
+        }
+      }
+    } else {
+      setOverflowIndex(99999);
+    }
+  }, [size, compact]);
+  if (loading) {
+    return null;
+  }
+  if (!displaySystemLabels) {
+    labelNodes = labelNodes.filter((x) => x.data.type !== "system");
+  }
+  const mergedSx = [
+    {
+      display: "flex",
+      gap: 1,
+      width: "100%",
+      alignItems: "center",
+      overflow: "hidden",
+      flexWrap: compact ? "no-wrap" : "wrap"
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsxs(Box$1, { sx: mergedSx, ref: labelsWrapperRef, children: [
+    prepend,
+    labelNodes.map((item, index) => {
+      if (!item) {
+        return null;
+      }
+      const visible = index < overflowIndex;
+      let extra = null;
+      if (index === overflowIndex) {
+        extra = /* @__PURE__ */ jsx(
+          Box$1,
+          {
+            sx: {
+              display: "inline-flex",
+              ...compact && { height: 20, lineHeight: "20px" },
+              color: "text.secondary",
+              fontWeight: "bold",
+              fontSize: 14
+            },
+            children: `+${labelNodes.length - overflowIndex}`
+          },
+          "overflow-label"
+        );
+      }
+      let labelChip = /* @__PURE__ */ jsx(
+        LabelChip,
+        {
+          label: item,
+          onClick: onItemClick,
+          sx: {
+            visibility: visible ? "visible" : "hidden",
+            pointerEvents: visible ? "auto" : "none"
+          }
+        },
+        item.data.id
+      );
+      if (renderLabel) {
+        labelChip = renderLabel(item, labelChip);
+      }
+      if (extra) {
+        return [extra, labelChip];
+      }
+      return labelChip;
+    })
+  ] });
+}
+const useSessionContext = () => {
+  var _a, _b;
+  const ctx = useContext(SessionContext) || {};
+  const loginRole = (_b = (_a = ctx == null ? void 0 : ctx.session) == null ? void 0 : _a.user) == null ? void 0 : _b.role;
+  return {
+    ...ctx,
+    isAdmin: ["admin", "owner"].includes(loginRole),
+    hasAnyPassport: (passports) => {
+      if (!passports || passports.length === 0) {
+        return true;
+      }
+      const passportsArr = Array.isArray(passports) ? passports : [passports];
+      return passportsArr.includes(loginRole);
+    }
+  };
+};
+function PopperComponent({
+  disablePortal,
+  anchorEl,
+  open,
+  ...other
+}) {
+  return /* @__PURE__ */ jsx(
+    Box$1,
+    {
+      ...other,
+      sx: (theme) => ({
+        [`& .${autocompleteClasses.paper}`]: {
+          boxShadow: "none",
+          margin: 0,
+          color: "inherit",
+          fontSize: 13
+        },
+        [`& .${autocompleteClasses.listbox}`]: {
+          backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
+          padding: 0,
+          [`& .${autocompleteClasses.option}`]: {
+            minHeight: "auto",
+            alignItems: "flex-start",
+            padding: 1,
+            borderBottom: `1px solid  ${theme.palette.mode === "light" ? " #eaecef" : "#30363d"}`,
+            '&[aria-selected="true"]': {
+              backgroundColor: "transparent"
+            },
+            [`&.${autocompleteClasses.focused}, &.${autocompleteClasses.focused}[aria-selected="true"]`]: {
+              backgroundColor: theme.palette.action.hover
+            }
+          }
+        },
+        [`&.${autocompleteClasses.popperDisablePortal}`]: {
+          position: "relative"
+        }
+      })
+    }
+  );
+}
+function GithubLabelPicker({
+  value = [],
+  onChange,
+  title,
+  noLabelsText,
+  buttonSx,
+  actions,
+  trigger,
+  multiple = true,
+  updateImmediately = true,
+  excludes = [],
+  disabled = false,
+  enableAccessControl = true
+}) {
+  const { locale } = useLocaleContext();
+  const { isAdmin, hasAnyPassport } = useSessionContext();
+  const { flattenedLabels: labels, getLabelsByIds, loading, createLabel } = LabelsContainer.useContainer();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [pendingValue, setPendingValue] = useState([]);
+  const pendingOptions = useMemo(() => getLabelsByIds(pendingValue), [getLabelsByIds, pendingValue]);
+  const [inputValue, setInputValue] = useState("");
+  const exists = useMemo(
+    () => labels.some((x) => x.data.getName(locale).toLowerCase() === inputValue.toLowerCase()),
+    [inputValue, labels, locale]
+  );
+  const filteredLabels = useMemo(() => {
+    const excludesSet = new Set(excludes);
+    return labels.filter((x) => !excludesSet.has(x.data.id));
+  }, [labels]);
+  const theme = useTheme();
+  const handleClick = (event) => {
+    if (disabled) {
+      return;
+    }
+    event.preventDefault();
+    setPendingValue(value);
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    if (!updateImmediately) {
+      onChange == null ? void 0 : onChange(pendingValue);
+    }
+    setInputValue("");
+    if (anchorEl) {
+      anchorEl.focus();
+    }
+    setAnchorEl(null);
+  };
+  const handleCreate = async () => {
+    const { id: id2 } = await createLabel(inputValue);
+    setPendingValue([...pendingValue, id2]);
+  };
+  const open = Boolean(anchorEl);
+  const id = open ? "github-label-picker" : void 0;
+  if (loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box$1,
+      {
+        onClick: handleClick,
+        sx: {
+          display: "flex",
+          alignItems: "center"
+        },
+        children: trigger || /* @__PURE__ */ jsx(
+          Box$1,
+          {
+            component: ButtonBase,
+            disableRipple: true,
+            "aria-describedby": id,
+            className: "label-picker-trigger",
+            sx: [
+              (t) => ({
+                width: "100%",
+                fontSize: 13,
+                color: t.palette.mode === "light" ? "#586069" : "#8b949e",
+                fontWeight: 600,
+                "&:hover": {
+                  color: t.palette.mode === "light" ? "primary.main" : "#58a6ff"
+                },
+                "& svg": {
+                  width: 22,
+                  height: 22
+                }
+              }),
+              ...Array.isArray(buttonSx) ? buttonSx : [buttonSx]
+            ],
+            children: /* @__PURE__ */ jsx(mdiTagPlusOutline, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box$1,
+      {
+        component: Popper,
+        id,
+        open,
+        anchorEl,
+        placement: "bottom-start",
+        disablePortal: true,
+        sx: (t) => ({
+          border: `1px solid ${t.palette.mode === "light" ? "#e1e4e8" : "#30363d"}`,
+          boxShadow: `0 8px 24px ${t.palette.mode === "light" ? "rgba(149, 157, 165, 0.2)" : "rgb(1, 4, 9)"}`,
+          borderRadius: "4px",
+          width: 300,
+          zIndex: t.zIndex.modal,
+          fontSize: 13,
+          color: t.palette.mode === "light" ? "#24292e" : "#c9d1d9",
+          backgroundColor: t.palette.mode === "light" ? "#fff" : "#1c2128"
+        }),
+        children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxs(Box$1, { onClick: (e) => e.preventDefault(), children: [
+          title && /* @__PURE__ */ jsx(
+            Box$1,
+            {
+              sx: {
+                borderBottom: `1px solid ${theme.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
+                padding: "8px 10px",
+                fontWeight: 600
+              },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Autocomplete,
+            {
+              open: true,
+              multiple: true,
+              inputValue,
+              onInputChange: (event, newInputValue, reason) => {
+                if (reason === "reset") {
+                  return;
+                }
+                setInputValue(newInputValue);
+              },
+              onClose: (event, reason) => {
+                if (reason === "escape") {
+                  handleClose();
+                }
+              },
+              value: pendingOptions,
+              onChange: (event, newValue, reason) => {
+                event.preventDefault();
+                if (event.type === "keydown" && event.key === "Backspace" && reason === "removeOption") {
+                  return;
+                }
+                setPendingValue(newValue.map((x) => x.data.id));
+                if (!multiple) {
+                  onChange == null ? void 0 : onChange(newValue.length ? [newValue[newValue.length - 1].data.id] : []);
+                  setAnchorEl(null);
+                } else if (updateImmediately) {
+                  onChange(newValue.map((x) => x.data.id));
+                }
+              },
+              disableCloseOnSelect: true,
+              PopperComponent,
+              renderTags: () => null,
+              noOptionsText: noLabelsText || "No labels",
+              renderOption: (props, option, { selected }) => {
+                const label = option.data;
+                const passportsToCheck = [
+                  ...label.passports || [],
+                  ...label.type === "system" ? ["admin", "owner"] : []
+                ];
+                const isPermitted = !enableAccessControl || isAdmin || hasAnyPassport(passportsToCheck);
+                if (!isPermitted) {
+                  props.onClick = () => {
+                  };
+                  if (!(value == null ? void 0 : value.includes(label.id))) {
+                    return null;
+                  }
+                }
+                return /* @__PURE__ */ createElement(
+                  Box$1,
+                  {
+                    component: "li",
+                    ...props,
+                    key: option.data.id,
+                    sx: {
+                      ...!isPermitted && { bgcolor: "grey.100", cursor: "not-allowed!important" }
+                    }
+                  },
+                  /* @__PURE__ */ jsxs(
+                    Box$1,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        width: 1
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Box$1,
+                          {
+                            component: DoneIcon,
+                            sx: { width: 17, height: 17, mr: "5px", ml: "-2px" },
+                            style: {
+                              visibility: selected ? "visible" : "hidden"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Box$1,
+                          {
+                            sx: {
+                              flexGrow: 1,
+                              alignItems: "center",
+                              display: "flex"
+                            },
+                            children: /* @__PURE__ */ jsx(LabelChip, { label: option, disabled: disabled || !isPermitted })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Box$1,
+                          {
+                            component: CloseOutlineIcon,
+                            sx: { opacity: 0.6, width: 18, height: 18 },
+                            style: {
+                              visibility: selected ? "visible" : "hidden"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                );
+              },
+              options: [...filteredLabels].sort((a, b) => {
+                let ai = value.indexOf(a.data.id);
+                ai = ai === -1 ? value.length + filteredLabels.indexOf(a) : ai;
+                let bi = value.indexOf(b.data.id);
+                bi = bi === -1 ? value.length + filteredLabels.indexOf(b) : bi;
+                return ai - bi;
+              }),
+              getOptionLabel: (option) => option.data.getName(locale),
+              renderInput: (params) => /* @__PURE__ */ jsx(
+                Box$1,
+                {
+                  component: InputBase,
+                  ref: params.InputProps.ref,
+                  inputProps: params.inputProps,
+                  autoFocus: true,
+                  placeholder: "Filter labels",
+                  sx: (t) => ({
+                    padding: 1,
+                    width: "100%",
+                    borderBottom: `1px solid ${t.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
+                    "& input": {
+                      borderRadius: "4px",
+                      backgroundColor: t.palette.mode === "light" ? "#fff" : "#0d1117",
+                      padding: 1,
+                      transition: t.transitions.create(["border-color", "box-shadow"]),
+                      border: `1px solid ${t.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
+                      fontSize: 14,
+                      "&:focus": {
+                        boxShadow: `0px 0px 0px 3px ${t.palette.mode === "light" ? alpha(t.palette.primary.light, 0.4) : "rgb(12, 45, 107)"}`,
+                        borderColor: t.palette.mode === "light" ? t.palette.primary.light : "#388bfd"
+                      }
+                    }
+                  })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box$1, { children: [
+            inputValue && !exists && /* @__PURE__ */ jsx(
+              Box$1,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  width: "100%",
+                  height: 36,
+                  px: 2,
+                  borderTop: "1px solid #eee",
+                  fontSize: 14,
+                  color: "grey.600",
+                  cursor: "pointer",
+                  textDecoration: "none"
+                },
+                onClick: handleCreate,
+                children: /* @__PURE__ */ jsxs("span", { children: [
+                  'Create new label "',
+                  inputValue,
+                  '"'
+                ] })
+              }
+            ),
+            actions
+          ] })
+        ] }) })
+      }
+    )
+  ] });
+}
+function LabelsInput({
+  value = [],
+  onChange,
+  LabelPickerProps,
+  sx,
+  ...rest
+}) {
+  var _a;
+  const { getLabelsByIds, loading } = LabelsContainer.useContainer();
+  const valueOptions = useMemo(() => getLabelsByIds(value), [getLabelsByIds, value]);
+  const mergedSx = [
+    {
+      "& .MuiInputBase-root": { flexWrap: "wrap", gap: 0.5, py: 0.75 },
+      "& .MuiInputBase-input": { width: !(value == null ? void 0 : value.length) ? "initial" : "20px", p: 0 }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  const placeholder = !(value == null ? void 0 : value.length) ? rest.placeholder || "Select labels" : "";
+  if (loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    GithubLabelPicker,
+    {
+      value,
+      onChange,
+      trigger: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          ...rest,
+          placeholder,
+          fullWidth: true,
+          InputProps: {
+            autoComplete: "off",
+            ...rest.InputProps,
+            startAdornment: [
+              (_a = rest.InputProps) == null ? void 0 : _a.startAdornment,
+              ...valueOptions.map((x, index) => /* @__PURE__ */ jsx(LabelChip, { label: x }, index))
+            ].filter(Boolean)
+          },
+          sx: mergedSx
+        }
+      ),
+      ...LabelPickerProps
+    }
+  );
+}
 export {
-  G as GithubLabelPicker,
-  j as LabelChip,
-  b as LabelPicker,
-  a as LabelTree,
-  L as LabelTreeNode,
-  d as Labels,
-  k as Labels2,
-  h as LabelsContainer,
-  i as LabelsInput,
-  f as LabelsProvider,
-  u as useLabelsContext,
-  e as useLabelsUpdateOnDestroy
+  GithubLabelPicker,
+  LabelChip,
+  LabelPicker,
+  LabelTree,
+  LabelTreeNode,
+  Labels,
+  Labels2,
+  LabelsContainer,
+  LabelsInput,
+  LabelsProvider,
+  useLabelsContext,
+  useLabelsUpdateOnDestroy
 };