@blocklet/labels 1.6.174 → 1.6.176

package/dist/index.es.js

@@ -13,13 +13,14 @@ 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, darken, TextField } from "@mui/material";
+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 } from "ahooks";
+import { useReactive, useRequest, useSize, useDeepCompareLayoutEffect } from "ahooks";
 import { createContainer } from "unstated-next";
 import { arrayToTree } from "performant-array-to-tree";
 import CloseIcon from "@mui/icons-material/Close";
 import DoneIcon from "@mui/icons-material/Done";
+import chroma from "chroma-js";
 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({});
@@ -682,7 +683,7 @@ function LabelsProvider({ fetchLabels, createLabel, children }) {
   }, [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$1 = (bgcolor) => {
+const getContrastTextColor = (bgcolor) => {
   try {
     const ratio = getContrastRatio(bgcolor, "#fff");
     return ratio > 2.7 ? "#fff" : "#111";
@@ -690,7 +691,7 @@ const getContrastTextColor$1 = (bgcolor) => {
     return "#111";
   }
 };
-const getAlphaColor$1 = (color, alpha$1) => {
+const getAlphaColor = (color, alpha$1) => {
   try {
     if (color) {
       return alpha(color, alpha$1);
@@ -739,8 +740,8 @@ function Labels({ labels, editable, onChange, sx, renderLabel }) {
             height: 20,
             borderRadius: 1,
             fontSize: 12,
-            bgcolor: getAlphaColor$1(item.color || "#ddd", 0.8),
-            color: getContrastTextColor$1(item.color || "#ddd")
+            bgcolor: getAlphaColor(item.color || "#ddd", 0.8),
+            color: getContrastTextColor(item.color || "#ddd")
           }
         },
         item.id
@@ -1061,45 +1062,33 @@ function GithubLabelPicker({
     )
   ] });
 }
-const getContrastTextColor = (bgcolor) => {
-  try {
-    const ratio = getContrastRatio(bgcolor, "#fff");
-    return ratio > 2.7 ? "#fff" : "#111";
-  } catch {
-    return "#111";
-  }
+const getTextColor = (color) => {
+  return chroma(color).hex();
 };
-const getTextColor = (bgcolor) => {
-  try {
-    const dark = darken(bgcolor, 0.5);
-    const ratio = getContrastRatio(bgcolor, dark);
-    return ratio > 2.4 ? dark : getContrastTextColor(bgcolor);
-  } catch {
-    return getContrastTextColor(bgcolor);
+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 getBorderColor = (bgcolor) => {
-  try {
-    return darken(bgcolor, 0.05);
-  } catch {
-    return bgcolor;
+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 getAlphaColor = (color, alpha$1) => {
-  try {
-    if (color) {
-      return alpha(color, alpha$1);
-    }
-  } catch {
-    return color;
+const getFilterStyle = (color) => {
+  if (chroma(color).luminance() > 0.5) {
+    return "brightness(0.85) contrast(1.2)";
   }
-  return color;
+  return "brightness(0.85) contrast(1.2)";
 };
 function LabelChip({
   label,
   onDelete,
   sx,
-  fullName = true
+  fullName = true,
+  onClick
 }) {
   const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
   const mergedSx = [
@@ -1107,51 +1096,145 @@ function LabelChip({
       height: 20,
       borderRadius: 0.5,
       fontSize: 12,
-      fontWeight: "medium",
-      bgcolor: getAlphaColor(label.data.color, 0.8),
-      color: getTextColor(label.data.color),
-      border: 1,
-      borderColor: getBorderColor(label.data.color)
+      fontWeight: 500,
+      color: `${getTextColor(label.data.color)} !important`,
+      bgcolor: `${getBackgroundColor(label.data.color)} !important`,
+      transition: "filter 0.2s",
+      borderColor: `${getBorderColor(label.data.color)} !important`,
+      ".MuiChip-label": {
+        p: 0.5
+      },
+      span: {},
+      ...onClick && {
+        cursor: "pointer",
+        "&:hover": {
+          filter: getFilterStyle(label.data.color)
+        }
+      }
     },
     ...Array.isArray(sx) ? sx : [sx]
   ];
-  return /* @__PURE__ */ jsx(
-    Chip,
-    {
-      label: fullName ? getFullLabelName(label.data.id) : getLabelName(label.data.id),
-      variant: "filled",
-      size: "small",
-      ...onDelete && {
-        onDelete,
-        deleteIcon: /* @__PURE__ */ jsx(CloseIcon, {})
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ jsx(
+      Chip,
+      {
+        label: fullName ? getFullLabelName(label.data.id) : getLabelName(label.data.id),
+        variant: "outlined",
+        size: "small",
+        ...onDelete && {
+          onDelete: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onDelete(label);
+          },
+          deleteIcon: /* @__PURE__ */ jsx(CloseIcon, {})
+        },
+        ...onClick && {
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onClick(label);
+          }
+        },
+        sx: mergedSx
       },
-      sx: mergedSx
-    },
-    label.data.id
+      label.data.id
+    )
   );
 }
-function Labels2({ labels, sx, renderLabel, prepend, displaySystemLabels = true }) {
+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;
   }
-  let labelNodes = getLabelsByIds(labels || []);
   if (!displaySystemLabels) {
     labelNodes = labelNodes.filter((x) => !x.data.id.startsWith("system:"));
   }
   const mergedSx = [
-    { display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" },
+    {
+      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, children: [
+  return /* @__PURE__ */ jsxs(Box$1, { sx: mergedSx, ref: labelsWrapperRef, children: [
     prepend,
-    labelNodes.map((item) => {
+    labelNodes.map((item, index) => {
       if (!item) {
         return null;
       }
-      const labelChip = /* @__PURE__ */ jsx(LabelChip, { label: item }, item.data.id);
+      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) {
-        return renderLabel(item, labelChip);
+        labelChip = renderLabel(item, labelChip);
+      }
+      if (extra) {
+        return [extra, labelChip];
       }
       return labelChip;
     })

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@mui/icons-material"), require("@mui/material/Box"), require("@mui/material/styles"), require("react-arborist"), require("@iconify/react"), require("lodash/omit"), require("react-select"), require("@mui/material"), require("@arcblock/ux/lib/Locale/context"), require("ahooks"), require("unstated-next"), require("performant-array-to-tree"), require("@mui/icons-material/Close"), require("@mui/icons-material/Done")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@mui/icons-material", "@mui/material/Box", "@mui/material/styles", "react-arborist", "@iconify/react", "lodash/omit", "react-select", "@mui/material", "@arcblock/ux/lib/Locale/context", "ahooks", "unstated-next", "performant-array-to-tree", "@mui/icons-material/Close", "@mui/icons-material/Done"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.BlockletLabels = {}, global.jsxRuntime, global.react, global.iconsMaterial, global.Box, global.styles, global.reactArborist, global.react$1, global.omit, global.Select, global.material, global.context, global.ahooks, global.unstatedNext, global.performantArrayToTree, global.CloseIcon, global.DoneIcon));
-})(this, function(exports2, jsxRuntime, react, iconsMaterial, Box, styles, reactArborist, react$1, omit, Select, material, context, ahooks, unstatedNext, performantArrayToTree, CloseIcon, DoneIcon) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@mui/icons-material"), require("@mui/material/Box"), require("@mui/material/styles"), require("react-arborist"), require("@iconify/react"), require("lodash/omit"), require("react-select"), require("@mui/material"), require("@arcblock/ux/lib/Locale/context"), require("ahooks"), require("unstated-next"), require("performant-array-to-tree"), require("@mui/icons-material/Close"), require("@mui/icons-material/Done"), require("chroma-js")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@mui/icons-material", "@mui/material/Box", "@mui/material/styles", "react-arborist", "@iconify/react", "lodash/omit", "react-select", "@mui/material", "@arcblock/ux/lib/Locale/context", "ahooks", "unstated-next", "performant-array-to-tree", "@mui/icons-material/Close", "@mui/icons-material/Done", "chroma-js"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.BlockletLabels = {}, global.jsxRuntime, global.react, global.iconsMaterial, global.Box, global.styles, global.reactArborist, global.react$1, global.omit, global.Select, global.material, global.context, global.ahooks, global.unstatedNext, global.performantArrayToTree, global.CloseIcon, global.DoneIcon, global.chroma));
+})(this, function(exports2, jsxRuntime, react, iconsMaterial, Box, styles, reactArborist, react$1, omit, Select, material, context, ahooks, unstatedNext, performantArrayToTree, CloseIcon, DoneIcon, chroma) {
   "use strict";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) => {
@@ -670,7 +670,7 @@ var __publicField = (obj, key, value) => {
     }, [loading, labels, getLabelsById, parseLabelIds, stringifyLabelIds, localizedLabels, getFullLabelName]);
     return /* @__PURE__ */ jsxRuntime.jsx(LabelsContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(LabelsContainer.Provider, { initialState: { loading, data, createLabel }, children }) });
   }
-  const getContrastTextColor$1 = (bgcolor) => {
+  const getContrastTextColor = (bgcolor) => {
     try {
       const ratio = material.getContrastRatio(bgcolor, "#fff");
       return ratio > 2.7 ? "#fff" : "#111";
@@ -678,7 +678,7 @@ var __publicField = (obj, key, value) => {
       return "#111";
     }
   };
-  const getAlphaColor$1 = (color, alpha) => {
+  const getAlphaColor = (color, alpha) => {
     try {
       if (color) {
         return material.alpha(color, alpha);
@@ -727,8 +727,8 @@ var __publicField = (obj, key, value) => {
               height: 20,
               borderRadius: 1,
               fontSize: 12,
-              bgcolor: getAlphaColor$1(item.color || "#ddd", 0.8),
-              color: getContrastTextColor$1(item.color || "#ddd")
+              bgcolor: getAlphaColor(item.color || "#ddd", 0.8),
+              color: getContrastTextColor(item.color || "#ddd")
             }
           },
           item.id
@@ -1049,45 +1049,33 @@ var __publicField = (obj, key, value) => {
       )
     ] });
   }
-  const getContrastTextColor = (bgcolor) => {
-    try {
-      const ratio = material.getContrastRatio(bgcolor, "#fff");
-      return ratio > 2.7 ? "#fff" : "#111";
-    } catch {
-      return "#111";
-    }
+  const getTextColor = (color) => {
+    return chroma(color).hex();
   };
-  const getTextColor = (bgcolor) => {
-    try {
-      const dark = material.darken(bgcolor, 0.5);
-      const ratio = material.getContrastRatio(bgcolor, dark);
-      return ratio > 2.4 ? dark : getContrastTextColor(bgcolor);
-    } catch {
-      return getContrastTextColor(bgcolor);
+  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 getBorderColor = (bgcolor) => {
-    try {
-      return material.darken(bgcolor, 0.05);
-    } catch {
-      return bgcolor;
+  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 getAlphaColor = (color, alpha) => {
-    try {
-      if (color) {
-        return material.alpha(color, alpha);
-      }
-    } catch {
-      return color;
+  const getFilterStyle = (color) => {
+    if (chroma(color).luminance() > 0.5) {
+      return "brightness(0.85) contrast(1.2)";
     }
-    return color;
+    return "brightness(0.85) contrast(1.2)";
   };
   function LabelChip({
     label,
     onDelete,
     sx,
-    fullName = true
+    fullName = true,
+    onClick
   }) {
     const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
     const mergedSx = [
@@ -1095,51 +1083,145 @@ var __publicField = (obj, key, value) => {
         height: 20,
         borderRadius: 0.5,
         fontSize: 12,
-        fontWeight: "medium",
-        bgcolor: getAlphaColor(label.data.color, 0.8),
-        color: getTextColor(label.data.color),
-        border: 1,
-        borderColor: getBorderColor(label.data.color)
+        fontWeight: 500,
+        color: `${getTextColor(label.data.color)} !important`,
+        bgcolor: `${getBackgroundColor(label.data.color)} !important`,
+        transition: "filter 0.2s",
+        borderColor: `${getBorderColor(label.data.color)} !important`,
+        ".MuiChip-label": {
+          p: 0.5
+        },
+        span: {},
+        ...onClick && {
+          cursor: "pointer",
+          "&:hover": {
+            filter: getFilterStyle(label.data.color)
+          }
+        }
       },
       ...Array.isArray(sx) ? sx : [sx]
     ];
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      material.Chip,
-      {
-        label: fullName ? getFullLabelName(label.data.id) : getLabelName(label.data.id),
-        variant: "filled",
-        size: "small",
-        ...onDelete && {
-          onDelete,
-          deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
+    return (
+      // @ts-ignore
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Chip,
+        {
+          label: fullName ? getFullLabelName(label.data.id) : getLabelName(label.data.id),
+          variant: "outlined",
+          size: "small",
+          ...onDelete && {
+            onDelete: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onDelete(label);
+            },
+            deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
+          },
+          ...onClick && {
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onClick(label);
+            }
+          },
+          sx: mergedSx
         },
-        sx: mergedSx
-      },
-      label.data.id
+        label.data.id
+      )
     );
   }
-  function Labels2({ labels, sx, renderLabel, prepend, displaySystemLabels = true }) {
+  function Labels2({
+    compact = true,
+    labels,
+    sx,
+    renderLabel,
+    prepend,
+    displaySystemLabels = true,
+    onItemClick
+  }) {
     const { getLabelsByIds, loading } = LabelsContainer.useContainer();
+    const labelsWrapperRef = react.useRef(null);
+    const [overflowIndex, setOverflowIndex] = react.useState(99999);
+    let labelNodes = getLabelsByIds(labels || []);
+    const size = ahooks.useSize(labelsWrapperRef);
+    ahooks.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;
     }
-    let labelNodes = getLabelsByIds(labels || []);
     if (!displaySystemLabels) {
       labelNodes = labelNodes.filter((x) => !x.data.id.startsWith("system:"));
     }
     const mergedSx = [
-      { display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" },
+      {
+        display: "flex",
+        gap: 1,
+        width: "100%",
+        alignItems: "center",
+        overflow: "hidden",
+        flexWrap: compact ? "no-wrap" : "wrap"
+      },
       ...Array.isArray(sx) ? sx : [sx]
     ];
-    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: mergedSx, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: mergedSx, ref: labelsWrapperRef, children: [
       prepend,
-      labelNodes.map((item) => {
+      labelNodes.map((item, index) => {
         if (!item) {
           return null;
         }
-        const labelChip = /* @__PURE__ */ jsxRuntime.jsx(LabelChip, { label: item }, item.data.id);
+        const visible = index < overflowIndex;
+        let extra = null;
+        if (index === overflowIndex) {
+          extra = /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              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__ */ jsxRuntime.jsx(
+          LabelChip,
+          {
+            label: item,
+            onClick: onItemClick,
+            sx: {
+              visibility: visible ? "visible" : "hidden",
+              pointerEvents: visible ? "auto" : "none"
+            }
+          },
+          item.data.id
+        );
         if (renderLabel) {
-          return renderLabel(item, labelChip);
+          labelChip = renderLabel(item, labelChip);
+        }
+        if (extra) {
+          return [extra, labelChip];
         }
         return labelChip;
       })

package/dist/label2/labels2.d.ts

@@ -7,12 +7,15 @@ interface LabelsProps {
     renderLabel?: (label: LabelTreeNode, labelChip: React.ReactElement) => JSX.Element;
     prepend?: React.ReactNode;
     displaySystemLabels?: boolean;
+    onItemClick?: (label: LabelTreeNode) => void;
+    compact?: boolean;
 }
-export declare function LabelChip({ label, onDelete, sx, fullName, }: {
+export declare function LabelChip({ label, onDelete, sx, fullName, onClick, }: {
     label: LabelTreeNode;
-    onDelete?: () => void;
+    onDelete?: (label: LabelTreeNode) => void;
     sx?: SxProps;
     fullName?: boolean;
+    onClick?: (label: LabelTreeNode) => void;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function Labels2({ labels, sx, renderLabel, prepend, displaySystemLabels }: LabelsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Labels2({ compact, labels, sx, renderLabel, prepend, displaySystemLabels, onItemClick, }: LabelsProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/labels",
-  "version": "1.6.174",
+  "version": "1.6.176",
   "files": [
     "dist"
   ],
@@ -28,12 +28,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@blocklet/translation-input": "1.6.174",
+    "@blocklet/translation-input": "1.6.176",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@iconify/react": "^4.0.1",
     "ahooks": "^3.7.8",
+    "chroma-js": "^2.4.2",
     "performant-array-to-tree": "^1.11.0",
     "react-arborist": "^2.2.0",
     "react-color": "^2.19.3",
@@ -63,6 +64,7 @@
     "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
     "@svgr/core": "^6.5.1",
+    "@types/chroma-js": "^2.4.4",
     "@types/react": "^18.0.24",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18.0.8",
@@ -80,5 +82,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "9b83dcf0a862c283cc7c926fb8bbe4f49caeff2e"
+  "gitHead": "83c2397ed6c3f8ed577de50cd0868642c9212f4b"
 }