@blocklet/labels 1.6.10 → 1.6.11

package/dist/index.es.js

@@ -732,7 +732,7 @@ function Labels({ labels, editable, onChange, sx, renderLabel }) {
   ] });
 }
 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" }) });
-function PopperComponent$1({
+function PopperComponent({
   disablePortal,
   anchorEl,
   open,
@@ -794,6 +794,7 @@ function GithubLabelPicker({
   );
   const theme = useTheme();
   const handleClick = (event) => {
+    event.preventDefault();
     setPendingValue(value);
     setAnchorEl(event.currentTarget);
   };
@@ -829,6 +830,7 @@ function GithubLabelPicker({
             component: ButtonBase,
             disableRipple: true,
             "aria-describedby": id,
+            className: "label-picker-trigger",
             sx: [
               (t) => ({
                 width: "100%",
@@ -909,7 +911,7 @@ function GithubLabelPicker({
                 }
               },
               disableCloseOnSelect: true,
-              PopperComponent: PopperComponent$1,
+              PopperComponent,
               renderTags: () => null,
               noOptionsText: noLabelsText || "No labels",
               renderOption: (props, option, { selected }) => /* @__PURE__ */ jsxs("li", { ...props, children: [
@@ -1030,170 +1032,6 @@ function GithubLabelPicker({
     )
   ] });
 }
-function Tag(props) {
-  const { label, onDelete, ...rest } = props;
-  return /* @__PURE__ */ jsxs(
-    Box$1,
-    {
-      ...rest,
-      sx: {
-        boxSizing: "content-box",
-        display: "flex",
-        alignItems: "center",
-        height: 24,
-        margin: "2px",
-        padding: "0 4px 0 10px",
-        border: (theme) => `1px solid ${theme.palette.mode === "dark" ? "#303030" : "#e8e8e8"}`,
-        overflow: "hidden",
-        lineHeight: "22px",
-        fontSize: 14,
-        color: "grey.800",
-        bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "#fafafa",
-        borderRadius: "2px",
-        outline: 0,
-        "&:focus": {
-          borderColor: (theme) => `${theme.palette.mode === "dark" ? "#177ddc" : "#40a9ff"}`,
-          bgcolor: (theme) => `${theme.palette.mode === "dark" ? "#003b57" : "#e6f7ff"}`
-        },
-        "& span": {
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          textOverflow: "ellipsis"
-        },
-        "& svg": {
-          ml: 0.5,
-          p: "4px",
-          fontSize: "12px",
-          color: "grey.500",
-          cursor: "pointer"
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { children: label }),
-        /* @__PURE__ */ jsx(CloseIcon, { onClick: onDelete })
-      ]
-    }
-  );
-}
-function PopperComponent(props) {
-  return /* @__PURE__ */ jsx(
-    Popper,
-    {
-      ...props,
-      sx: (theme) => ({
-        [`& .${autocompleteClasses.paper}`]: {
-          border: `1px solid ${theme.palette.mode === "light" ? "#e1e4e8" : "#30363d"}`,
-          boxShadow: `0 8px 24px ${theme.palette.mode === "light" ? "rgba(149, 157, 165, 0.2)" : "rgb(1, 4, 9)"}`,
-          borderRadius: "4px",
-          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 LabelsInput({ value = [], onChange, ...rest }) {
-  const { locale } = useLocaleContext();
-  const { flattenedLabels: labels, getLabelsByIds, loading } = LabelsContainer.useContainer();
-  const valueOptions = useMemo(() => getLabelsByIds(value), [getLabelsByIds, value]);
-  if (loading) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Autocomplete,
-    {
-      multiple: true,
-      disableClearable: true,
-      forcePopupIcon: false,
-      size: "small",
-      PopperComponent,
-      value: valueOptions,
-      onChange: (event, newValue) => {
-        onChange(newValue.map((x) => x.data.id));
-      },
-      options: [...labels].sort((a, b) => {
-        let ai = value.indexOf(a.data.id);
-        ai = ai === -1 ? value.length + labels.indexOf(a) : ai;
-        let bi = value.indexOf(b.data.id);
-        bi = bi === -1 ? value.length + labels.indexOf(b) : bi;
-        return ai - bi;
-      }),
-      getOptionLabel: (option) => option.data.getName(locale),
-      renderOption: (props, option, { selected }) => /* @__PURE__ */ jsxs("li", { ...props, 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,
-          {
-            component: "span",
-            sx: {
-              width: 14,
-              height: 14,
-              flexShrink: 0,
-              borderRadius: "3px",
-              mr: 1,
-              mt: "2px"
-            },
-            style: { backgroundColor: option.data.color || "#ddd" }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Box$1,
-          {
-            sx: {
-              flexGrow: 1,
-              "& span": {
-                color: (theme) => theme.palette.mode === "light" ? "#586069" : "#8b949e"
-              }
-            },
-            children: option.data.getName(locale)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Box$1,
-          {
-            component: CloseIcon,
-            sx: { opacity: 0.6, width: 18, height: 18 },
-            style: {
-              visibility: selected ? "visible" : "hidden"
-            }
-          }
-        )
-      ] }),
-      renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ jsx(Tag, { label: option.data.getName(locale), ...getTagProps({ index }) })),
-      style: { minWidth: 300 },
-      renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, placeholder: "Labels" }),
-      ...rest
-    }
-  );
-}
 const getContrastTextColor = (bgcolor) => {
   try {
     const ratio = getContrastRatio(bgcolor, "#fff");
@@ -1212,8 +1050,27 @@ const getAlphaColor = (color, alpha$1) => {
   }
   return color;
 };
-function Labels2({ labels, sx, renderLabel }) {
-  const { getLabelsByIds, loading, getFullLabelName } = LabelsContainer.useContainer();
+function LabelChip({ label }) {
+  const { getFullLabelName } = LabelsContainer.useContainer();
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label: getFullLabelName(label.data.id),
+      variant: "filled",
+      size: "small",
+      sx: {
+        height: 20,
+        borderRadius: 1,
+        fontSize: 12,
+        bgcolor: getAlphaColor(label.data.color, 0.8),
+        color: getContrastTextColor(label.data.color)
+      }
+    },
+    label.data.id
+  );
+}
+function Labels2({ labels, sx, renderLabel, prepend }) {
+  const { getLabelsByIds, loading } = LabelsContainer.useContainer();
   if (loading) {
     return null;
   }
@@ -1222,33 +1079,51 @@ function Labels2({ labels, sx, renderLabel }) {
     { display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" },
     ...Array.isArray(sx) ? sx : [sx]
   ];
-  return /* @__PURE__ */ jsx(Box$1, { sx: mergedSx, children: labelNodes.map((item) => {
-    if (!item) {
-      return null;
-    }
-    if (renderLabel) {
-      return renderLabel(item);
-    }
-    return /* @__PURE__ */ jsx(
-      Chip,
-      {
-        label: getFullLabelName(item.data.id),
-        variant: "filled",
-        size: "small",
-        sx: {
-          height: 20,
-          borderRadius: 1,
-          fontSize: 12,
-          bgcolor: getAlphaColor(item.data.color, 0.8),
-          color: getContrastTextColor(item.data.color)
+  return /* @__PURE__ */ jsxs(Box$1, { sx: mergedSx, children: [
+    prepend,
+    labelNodes.map((item) => {
+      if (!item) {
+        return null;
+      }
+      if (renderLabel) {
+        return renderLabel(item);
+      }
+      return /* @__PURE__ */ jsx(LabelChip, { label: item });
+    })
+  ] });
+}
+function LabelsInput({ value = [], onChange, ...rest }) {
+  const { getLabelsByIds, loading } = LabelsContainer.useContainer();
+  const valueOptions = useMemo(() => getLabelsByIds(value), [getLabelsByIds, value]);
+  if (loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    GithubLabelPicker,
+    {
+      value,
+      onChange,
+      trigger: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          ...rest,
+          InputProps: {
+            autoComplete: "off",
+            ...rest.InputProps,
+            startAdornment: valueOptions.map((x, index) => /* @__PURE__ */ jsx(LabelChip, { label: x }, index))
+          },
+          sx: {
+            "& .MuiInputBase-root": { flexWrap: "wrap", gap: 0.5, p: 1 },
+            "& .MuiInputBase-input": { width: 20, p: 0 }
+          }
         }
-      },
-      item.data.id
-    );
-  }) });
+      )
+    }
+  );
 }
 export {
   GithubLabelPicker,
+  LabelChip,
   LabelPicker,
   LabelTree,
   LabelTreeNode,

package/dist/index.umd.js

@@ -720,7 +720,7 @@ var __publicField = (obj, key, value) => {
     ] });
   }
   const mdiTagPlusOutline = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.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" }) });
-  function PopperComponent$1({
+  function PopperComponent({
     disablePortal,
     anchorEl,
     open,
@@ -782,6 +782,7 @@ var __publicField = (obj, key, value) => {
     );
     const theme = material.useTheme();
     const handleClick = (event) => {
+      event.preventDefault();
       setPendingValue(value);
       setAnchorEl(event.currentTarget);
     };
@@ -817,6 +818,7 @@ var __publicField = (obj, key, value) => {
               component: material.ButtonBase,
               disableRipple: true,
               "aria-describedby": id,
+              className: "label-picker-trigger",
               sx: [
                 (t) => ({
                   width: "100%",
@@ -897,7 +899,7 @@ var __publicField = (obj, key, value) => {
                   }
                 },
                 disableCloseOnSelect: true,
-                PopperComponent: PopperComponent$1,
+                PopperComponent,
                 renderTags: () => null,
                 noOptionsText: noLabelsText || "No labels",
                 renderOption: (props, option, { selected }) => /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, children: [
@@ -1018,170 +1020,6 @@ var __publicField = (obj, key, value) => {
       )
     ] });
   }
-  function Tag(props) {
-    const { label, onDelete, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      material.Box,
-      {
-        ...rest,
-        sx: {
-          boxSizing: "content-box",
-          display: "flex",
-          alignItems: "center",
-          height: 24,
-          margin: "2px",
-          padding: "0 4px 0 10px",
-          border: (theme) => `1px solid ${theme.palette.mode === "dark" ? "#303030" : "#e8e8e8"}`,
-          overflow: "hidden",
-          lineHeight: "22px",
-          fontSize: 14,
-          color: "grey.800",
-          bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "#fafafa",
-          borderRadius: "2px",
-          outline: 0,
-          "&:focus": {
-            borderColor: (theme) => `${theme.palette.mode === "dark" ? "#177ddc" : "#40a9ff"}`,
-            bgcolor: (theme) => `${theme.palette.mode === "dark" ? "#003b57" : "#e6f7ff"}`
-          },
-          "& span": {
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis"
-          },
-          "& svg": {
-            ml: 0.5,
-            p: "4px",
-            fontSize: "12px",
-            color: "grey.500",
-            cursor: "pointer"
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { onClick: onDelete })
-        ]
-      }
-    );
-  }
-  function PopperComponent(props) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      material.Popper,
-      {
-        ...props,
-        sx: (theme) => ({
-          [`& .${material.autocompleteClasses.paper}`]: {
-            border: `1px solid ${theme.palette.mode === "light" ? "#e1e4e8" : "#30363d"}`,
-            boxShadow: `0 8px 24px ${theme.palette.mode === "light" ? "rgba(149, 157, 165, 0.2)" : "rgb(1, 4, 9)"}`,
-            borderRadius: "4px",
-            color: "inherit",
-            fontSize: 13
-          },
-          [`& .${material.autocompleteClasses.listbox}`]: {
-            backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
-            padding: 0,
-            [`& .${material.autocompleteClasses.option}`]: {
-              minHeight: "auto",
-              alignItems: "flex-start",
-              padding: 1,
-              borderBottom: `1px solid  ${theme.palette.mode === "light" ? " #eaecef" : "#30363d"}`,
-              '&[aria-selected="true"]': {
-                backgroundColor: "transparent"
-              },
-              [`&.${material.autocompleteClasses.focused}, &.${material.autocompleteClasses.focused}[aria-selected="true"]`]: {
-                backgroundColor: theme.palette.action.hover
-              }
-            }
-          },
-          [`&.${material.autocompleteClasses.popperDisablePortal}`]: {
-            position: "relative"
-          }
-        })
-      }
-    );
-  }
-  function LabelsInput({ value = [], onChange, ...rest }) {
-    const { locale } = context.useLocaleContext();
-    const { flattenedLabels: labels, getLabelsByIds, loading } = LabelsContainer.useContainer();
-    const valueOptions = react.useMemo(() => getLabelsByIds(value), [getLabelsByIds, value]);
-    if (loading) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      material.Autocomplete,
-      {
-        multiple: true,
-        disableClearable: true,
-        forcePopupIcon: false,
-        size: "small",
-        PopperComponent,
-        value: valueOptions,
-        onChange: (event, newValue) => {
-          onChange(newValue.map((x) => x.data.id));
-        },
-        options: [...labels].sort((a, b) => {
-          let ai = value.indexOf(a.data.id);
-          ai = ai === -1 ? value.length + labels.indexOf(a) : ai;
-          let bi = value.indexOf(b.data.id);
-          bi = bi === -1 ? value.length + labels.indexOf(b) : bi;
-          return ai - bi;
-        }),
-        getOptionLabel: (option) => option.data.getName(locale),
-        renderOption: (props, option, { selected }) => /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            material.Box,
-            {
-              component: DoneIcon,
-              sx: { width: 17, height: 17, mr: "5px", ml: "-2px" },
-              style: {
-                visibility: selected ? "visible" : "hidden"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            material.Box,
-            {
-              component: "span",
-              sx: {
-                width: 14,
-                height: 14,
-                flexShrink: 0,
-                borderRadius: "3px",
-                mr: 1,
-                mt: "2px"
-              },
-              style: { backgroundColor: option.data.color || "#ddd" }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            material.Box,
-            {
-              sx: {
-                flexGrow: 1,
-                "& span": {
-                  color: (theme) => theme.palette.mode === "light" ? "#586069" : "#8b949e"
-                }
-              },
-              children: option.data.getName(locale)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            material.Box,
-            {
-              component: CloseIcon,
-              sx: { opacity: 0.6, width: 18, height: 18 },
-              style: {
-                visibility: selected ? "visible" : "hidden"
-              }
-            }
-          )
-        ] }),
-        renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(Tag, { label: option.data.getName(locale), ...getTagProps({ index }) })),
-        style: { minWidth: 300 },
-        renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(material.TextField, { ...params, placeholder: "Labels" }),
-        ...rest
-      }
-    );
-  }
   const getContrastTextColor = (bgcolor) => {
     try {
       const ratio = material.getContrastRatio(bgcolor, "#fff");
@@ -1200,8 +1038,27 @@ var __publicField = (obj, key, value) => {
     }
     return color;
   };
-  function Labels2({ labels, sx, renderLabel }) {
-    const { getLabelsByIds, loading, getFullLabelName } = LabelsContainer.useContainer();
+  function LabelChip({ label }) {
+    const { getFullLabelName } = LabelsContainer.useContainer();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Chip,
+      {
+        label: getFullLabelName(label.data.id),
+        variant: "filled",
+        size: "small",
+        sx: {
+          height: 20,
+          borderRadius: 1,
+          fontSize: 12,
+          bgcolor: getAlphaColor(label.data.color, 0.8),
+          color: getContrastTextColor(label.data.color)
+        }
+      },
+      label.data.id
+    );
+  }
+  function Labels2({ labels, sx, renderLabel, prepend }) {
+    const { getLabelsByIds, loading } = LabelsContainer.useContainer();
     if (loading) {
       return null;
     }
@@ -1210,32 +1067,50 @@ var __publicField = (obj, key, value) => {
       { display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" },
       ...Array.isArray(sx) ? sx : [sx]
     ];
-    return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: mergedSx, children: labelNodes.map((item) => {
-      if (!item) {
-        return null;
-      }
-      if (renderLabel) {
-        return renderLabel(item);
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        material.Chip,
-        {
-          label: getFullLabelName(item.data.id),
-          variant: "filled",
-          size: "small",
-          sx: {
-            height: 20,
-            borderRadius: 1,
-            fontSize: 12,
-            bgcolor: getAlphaColor(item.data.color, 0.8),
-            color: getContrastTextColor(item.data.color)
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: mergedSx, children: [
+      prepend,
+      labelNodes.map((item) => {
+        if (!item) {
+          return null;
+        }
+        if (renderLabel) {
+          return renderLabel(item);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(LabelChip, { label: item });
+      })
+    ] });
+  }
+  function LabelsInput({ value = [], onChange, ...rest }) {
+    const { getLabelsByIds, loading } = LabelsContainer.useContainer();
+    const valueOptions = react.useMemo(() => getLabelsByIds(value), [getLabelsByIds, value]);
+    if (loading) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      GithubLabelPicker,
+      {
+        value,
+        onChange,
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            ...rest,
+            InputProps: {
+              autoComplete: "off",
+              ...rest.InputProps,
+              startAdornment: valueOptions.map((x, index) => /* @__PURE__ */ jsxRuntime.jsx(LabelChip, { label: x }, index))
+            },
+            sx: {
+              "& .MuiInputBase-root": { flexWrap: "wrap", gap: 0.5, p: 1 },
+              "& .MuiInputBase-input": { width: 20, p: 0 }
+            }
           }
-        },
-        item.data.id
-      );
-    }) });
+        )
+      }
+    );
   }
   exports2.GithubLabelPicker = GithubLabelPicker;
+  exports2.LabelChip = LabelChip;
   exports2.LabelPicker = LabelPicker;
   exports2.LabelTree = LabelTree;
   exports2.LabelTreeNode = LabelTreeNode;

package/dist/label2/labels-input.d.ts

@@ -1,6 +1,7 @@
+import { TextFieldProps } from '@mui/material';
 interface LabelsInputProps {
     value: string[];
     onChange: (value: string[]) => void;
 }
-export declare function LabelsInput({ value, onChange, ...rest }: LabelsInputProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function LabelsInput({ value, onChange, ...rest }: LabelsInputProps & TextFieldProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/label2/labels2.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { type SxProps } from '@mui/material';
-import { LabelTreeNode } from './tree';
+import type { LabelTreeNode } from './tree';
 interface LabelsProps {
     labels: string[] | undefined | null;
     sx?: SxProps;
     renderLabel?: (label: LabelTreeNode) => JSX.Element;
+    prepend?: React.ReactNode;
 }
-export declare function Labels2({ labels, sx, renderLabel }: LabelsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function LabelChip({ label }: {
+    label: LabelTreeNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Labels2({ labels, sx, renderLabel, prepend }: LabelsProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/labels",
-  "version": "1.6.10",
+  "version": "1.6.11",
   "files": [
     "dist"
   ],
@@ -28,7 +28,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@blocklet/translation-input": "1.6.10",
+    "@blocklet/translation-input": "1.6.11",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
@@ -80,5 +80,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "9287f6098b52116b1454947b4d1d8a9a243b21d2"
+  "gitHead": "49174f11c1511888bc40180c5b607b1d41e3ec76"
 }