@clickhouse/click-ui 0.0.155 → 0.0.157

package/dist/click-ui.es.js

@@ -10420,7 +10420,7 @@ const Wrapper$9 = styled.div.withConfig({
   $maxWidth
 }) => $maxWidth ?? "none", ({
   $minWidth
-}) => $minWidth ?? "none", ({
+}) => $minWidth ?? "auto", ({
   theme: theme2,
   $paddingSize
 }) => theme2.click.container.space[$paddingSize], ({
@@ -16909,11 +16909,16 @@ var throttle_1 = throttle$1;
 const throttle$2 = /* @__PURE__ */ getDefaultExportFromCjs(throttle_1);
 const ResizeSpan = styled.div.withConfig({
   componentId: "sc-1r6e5v3-0"
-})(["top:0;left:calc(100% - 4px);z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}&:active{height:100%;position:fixed;}"], ({
+})(["top:0;left:calc(100% - 4px);z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], ({
   $height
 }) => $height, ({
   theme: theme2
-}) => theme2.click.grid.header.cell.color.stroke.selectDirect);
+}) => theme2.click.grid.header.cell.color.stroke.selectDirect, ({
+  $isPressed
+}) => $isPressed && `
+      height: 100%;
+      position: fixed;
+    `);
 const ColumnResizer = ({
   height,
   onColumnResize: onColumnResizeProp,
@@ -16922,14 +16927,20 @@ const ColumnResizer = ({
 }) => {
   const resizeRef = useRef(null);
   const pointerRef = useRef(null);
+  const [isPressed, setIsPressed] = useState(false);
   const onColumnResize = throttle$2(onColumnResizeProp, 1e3);
   const onMouseDown = useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
+    setIsPressed(true);
     if (e.detail > 1) {
       onColumnResize(columnIndex, 0, "auto");
     }
-  }, [columnIndex, onColumnResize]);
+  }, [columnIndex, onColumnResize, setIsPressed]);
+  const onMouseUp = useCallback((e) => {
+    e.stopPropagation();
+    setIsPressed(false);
+  }, [setIsPressed]);
   const onPointerDown = useCallback((e) => {
     e.stopPropagation();
     if (resizeRef.current) {
@@ -16951,17 +16962,18 @@ const ColumnResizer = ({
       const header = resizeRef.current.closest(`[data-header="${columnIndex}"]`);
       if (header) {
         resizeRef.current.setPointerCapture(pointerRef.current.pointerId);
-        const width = header.scrollWidth + (e.clientX - pointerRef.current.initialClientX);
+        const width = header.clientWidth + (e.clientX - pointerRef.current.initialClientX);
         setResizeCursorPosition(resizeRef.current, e.clientX, width, columnIndex);
         pointerRef.current.width = Math.max(width, 50);
       }
     }
   }, [columnIndex, setResizeCursorPosition]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeSpan, { ref: resizeRef, $height: height, onPointerDown, onPointerUp: (e) => {
-    var _a;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeSpan, { ref: resizeRef, $height: height, $isPressed: isPressed, onPointerDown, onPointerUp: (e) => {
+    var _a, _b;
     e.preventDefault();
     e.stopPropagation();
-    if (resizeRef.current && ((_a = pointerRef.current) == null ? void 0 : _a.pointerId)) {
+    if (resizeRef.current && // 0 is a valid pointerId in Firefox
+    (((_a = pointerRef.current) == null ? void 0 : _a.pointerId) || ((_b = pointerRef.current) == null ? void 0 : _b.pointerId) === 0)) {
       resizeRef.current.releasePointerCapture(pointerRef.current.pointerId);
       const shouldCallResize = e.clientX !== pointerRef.current.initialClientX;
       if (shouldCallResize) {
@@ -16971,7 +16983,7 @@ const ColumnResizer = ({
       resizeRef.current.style.left = "calc(100% - 4px)";
       pointerRef.current = null;
     }
-  }, onMouseMove, onMouseDown, onClick: (e) => e.stopPropagation(), onMouseUp: (e) => e.stopPropagation(), "data-resize": true });
+  }, onMouseMove, onMouseDown, onClick: (e) => e.stopPropagation(), onMouseUp, "data-resize": true });
 };
 const HeaderContainer = styled.div.withConfig({
   componentId: "sc-1oadqc8-0"
@@ -31628,7 +31640,7 @@ const ContextMenuTrigger = styled.div.withConfig({
   $showBorder,
   theme: theme2
 }) => $showBorder && `border: 1px solid ${theme2.click.grid.header.cell.color.stroke.default}`);
-const OuterElementType = forwardRef((props, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, "data-testid": "grid-outer-element", ...props }));
+const OuterElementType = forwardRef((props, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, "data-testid": "grid-outer-element", tabIndex: 0, ...props }));
 const Grid = forwardRef(({
   autoFocus,
   autoHeight = false,
@@ -32756,11 +32768,11 @@ const Pagination = ({
   };
   const onChange = (value) => {
     var _a;
-    const valueToNumber = Number(value);
-    if (valueToNumber < 1 || ((_a = inputRef.current) == null ? void 0 : _a.disabled) || (typeof totalPages !== "undefined" ? valueToNumber > totalPages : false)) {
+    const sanitizedValue = parseInt(value, 10);
+    if (sanitizedValue < 1 || ((_a = inputRef.current) == null ? void 0 : _a.disabled) || (typeof totalPages !== "undefined" ? sanitizedValue > totalPages : false)) {
       return;
     }
-    onChangeProp(valueToNumber);
+    onChangeProp(sanitizedValue);
   };
   const onPageSizeChange = (value) => {
     if (typeof onPageSizeChangeProp === "function") {
@@ -41064,9 +41076,9 @@ const click$3 = {
         },
         danger: {
           background: {
-            "default": "#ffdddd",
-            hover: "#ff9898",
-            active: "lch(78 26.3 22)"
+            "default": "rgb(100% 13.7% 13.7% / 0.1)",
+            hover: "rgb(100% 59.6% 59.6% / 0.2)",
+            active: "rgb(100% 72.9% 72.9% / 0.3)"
           },
           text: {
             "default": "#c10000"
@@ -41153,7 +41165,7 @@ const click$3 = {
         },
         danger: {
           background: {
-            "default": "#ffdddd",
+            "default": "rgb(100% 13.7% 13.7% / 0.1)",
             hover: "#ff9898",
             active: "#ffbaba"
           },
@@ -41163,9 +41175,9 @@ const click$3 = {
             active: "#c10000"
           },
           stroke: {
-            "default": "#ffdddd",
-            hover: "#ff9898",
-            active: "lch(78 26.3 22)"
+            "default": "rgb(100% 13.7% 13.7% / 0.1)",
+            hover: "rgb(100% 59.6% 59.6% / 0.2)",
+            active: "rgb(100% 72.9% 72.9% / 0.3)"
           }
         },
         ghost: {
@@ -41187,7 +41199,7 @@ const click$3 = {
         },
         info: {
           background: {
-            "default": "#dae6fc",
+            "default": "rgb(7.45% 35.7% 90.2% / 0.1)",
             hover: "#b5cdf9",
             active: "#91b3f6"
           },
@@ -41197,7 +41209,7 @@ const click$3 = {
             active: "#135be6"
           },
           stroke: {
-            "default": "#dae6fc",
+            "default": "rgb(7.45% 35.7% 90.2% / 0.1)",
             hover: "#b5cdf9",
             active: "#91b3f6"
           }
@@ -41269,7 +41281,7 @@ const click$3 = {
         stroke: {
           "default": "#e6e7e9",
           hover: "#e6e7e9",
-          active: "lch(84 2.28 258)",
+          active: "rgb(81.2% 82.3% 83.8%)",
           disabled: "rgba(0,0,0,0)"
         }
       }
@@ -41351,7 +41363,7 @@ const click$3 = {
         background: {
           "default": "#ffffff",
           hover: "#f6f7fa",
-          active: "lch(92.4 1.49 272)",
+          active: "rgb(91.6% 92% 93.1%)",
           disabled: "#dfdfdf"
         },
         title: {
@@ -41445,8 +41457,8 @@ const click$3 = {
           active: "#161517"
         },
         background: {
-          "default": "lch(97.2 1.57 272 / 0.9)",
-          hover: "lch(91.8 1.07 266)",
+          "default": "rgb(96.5% 96.9% 98% / 0.9)",
+          hover: "rgb(90.4% 90.8% 91.6%)",
           active: "lch(89.3 1.07 266)"
         },
         stroke: {
@@ -41921,12 +41933,12 @@ const click$2 = {
       "default": {
         label: {
           "default": "#ffffff",
-          hover: "lch(100 0 0)",
+          hover: "rgb(100% 100% 100%)",
           active: "#ffffff"
         },
         icon: {
           "default": "#ffffff",
-          hover: "lch(100 0 0)",
+          hover: "rgb(100% 100% 100%)",
           active: "#ffffff"
         }
       },
@@ -41938,7 +41950,7 @@ const click$2 = {
         },
         icon: {
           "default": "#FAFF69",
-          hover: "lch(98.8 31.4 104)",
+          hover: "rgb(99.6% 100% 75%)",
           active: "#FAFF69"
         }
       }
@@ -41948,11 +41960,11 @@ const click$2 = {
     color: {
       background: {
         "default": "#1F1F1C",
-        success: "#004206",
-        neutral: "#414141",
-        danger: "#610000",
-        warning: "#4f2b00",
-        info: "#09255B"
+        success: "rgb(20% 100% 26.7% / 0.2)",
+        neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
+        danger: "rgb(100% 13.7% 13.7% / 0.2)",
+        warning: "rgb(100% 58% 8.63% / 0.2)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.2)"
       },
       text: {
         "default": "#b3b6bd",
@@ -41964,11 +41976,11 @@ const click$2 = {
       },
       iconBackground: {
         "default": "#1F1F1C",
-        success: "#004206",
-        neutral: "#414141",
-        danger: "#610000",
-        warning: "#4f2b00",
-        info: "#09255B"
+        success: "rgb(20% 100% 26.7% / 0)",
+        neutral: "rgb(62.7% 62.7% 62.7% / 0)",
+        danger: "rgb(100% 13.7% 13.7% / 0)",
+        warning: "rgb(100% 58% 8.63% / 0)",
+        info: "rgb(7.45% 35.7% 90.2% / 0)"
       },
       iconForeground: {
         "default": "#b3b6bd",
@@ -41998,12 +42010,12 @@ const click$2 = {
     color: {
       background: {
         "default": "#1F1F1C",
-        success: "#004206",
-        neutral: "#414141",
-        danger: "#610000",
+        success: "rgb(20% 100% 26.7% / 0.2)",
+        neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
+        danger: "rgb(100% 13.7% 13.7% / 0.2)",
         disabled: "#414141",
-        info: "#09255B",
-        warning: "#4f2b00"
+        info: "rgb(7.45% 35.7% 90.2% / 0.2)",
+        warning: "rgb(100% 58% 8.63% / 0.2)"
       },
       text: {
         "default": "#b3b6bd",
@@ -42016,12 +42028,12 @@ const click$2 = {
       },
       stroke: {
         "default": "#323232",
-        success: "#004206",
-        neutral: "#414141",
-        danger: "#610000",
+        success: "rgb(20% 100% 26.7% / 0.1)",
+        neutral: "rgb(62.7% 62.7% 62.7% / 0.1)",
+        danger: "rgb(100% 22.3% 22.3% / 0.2)",
         disabled: "rgb(24.2% 24.2% 24.2%)",
-        info: "#09255B",
-        warning: "#4f2b00"
+        info: "rgb(7.45% 35.7% 90.2% / 0.1)",
+        warning: "rgb(100% 58% 8.63% / 0.1)"
       }
     }
   },
@@ -42040,8 +42052,8 @@ const click$2 = {
         muted: "#b3b6bd"
       },
       title: {
-        "default": "lch(97.5 0 0)",
-        muted: "lch(97.5 0 0)"
+        "default": "rgb(97.5% 97.5% 97.5%)",
+        muted: "rgb(97.5% 97.5% 97.5%)"
       }
     }
   },
@@ -42064,7 +42076,7 @@ const click$2 = {
           stroke: {
             "default": "#FAFF69",
             hover: "#FAFF69",
-            active: "lch(83.3 60.6 103)",
+            active: "rgb(83% 84.6% 34.9%)",
             disabled: "#414141"
           }
         },
@@ -42090,9 +42102,9 @@ const click$2 = {
         },
         danger: {
           background: {
-            "default": "#610000",
-            hover: "#910000",
-            active: "lch(28.6 65.8 40)",
+            "default": "rgb(100% 13.7% 13.7% / 0.2)",
+            hover: "rgb(100% 13.7% 13.7% / 0.3)",
+            active: "rgb(100% 13.7% 13.7% / 0.45)",
             disabled: "#414141"
           },
           text: {
@@ -42102,9 +42114,9 @@ const click$2 = {
             disabled: "#808080"
           },
           stroke: {
-            "default": "#610000",
-            hover: "#910000",
-            active: "lch(28.6 65.8 40)",
+            "default": "rgb(100% 22.3% 22.3% / 0.1)",
+            hover: "rgb(100% 13.7% 13.7% / 0.05)",
+            active: "rgb(100% 13.7% 13.7% / 0.05)",
             disabled: "#414141"
           }
         },
@@ -42153,12 +42165,12 @@ const click$2 = {
           background: {
             "default": "#FAFF69",
             hover: "rgb(98.6% 100% 58.8%)",
-            active: "lch(86.5 62.9 103)"
+            active: "rgb(86.2% 87.9% 36.2%)"
           },
           stroke: {
             "default": "rgba(0,0,0,0)",
             hover: "rgb(98.6% 100% 58.8%)",
-            active: "lch(86.5 62.9 103)"
+            active: "rgb(86.2% 87.9% 36.2%)"
           },
           text: {
             "default": "#1F1F1C",
@@ -42176,9 +42188,9 @@ const click$2 = {
         },
         danger: {
           background: {
-            "default": "#610000",
+            "default": "rgb(100% 13.7% 13.7% / 0.2)",
             hover: "#ff9898",
-            active: "#ffbaba"
+            active: "#c10000"
           },
           text: {
             "default": "#ffbaba",
@@ -42186,9 +42198,9 @@ const click$2 = {
             active: "#ffbaba"
           },
           stroke: {
-            "default": "#610000",
-            hover: "#910000",
-            active: "lch(28.6 65.8 40)"
+            "default": "rgb(100% 13.7% 13.7% / 0.2)",
+            hover: "rgb(100% 13.7% 13.7% / 0.3)",
+            active: "rgb(100% 13.7% 13.7% / 0.45)"
           }
         },
         ghost: {
@@ -42210,7 +42222,7 @@ const click$2 = {
         },
         info: {
           background: {
-            "default": "#09255B",
+            "default": "rgb(7.45% 35.7% 90.2% / 0.2)",
             hover: "#0e44ad",
             active: "#135be6"
           },
@@ -42220,7 +42232,7 @@ const click$2 = {
             active: "#b5cdf9"
           },
           stroke: {
-            "default": "#09255B",
+            "default": "rgb(7.45% 35.7% 90.2% / 0.2)",
             hover: "#0e44ad",
             active: "#135be6"
           }
@@ -42233,14 +42245,14 @@ const click$2 = {
           main: {
             "default": "#FAFF69",
             hover: "lch(89.7 46.7 104)",
-            active: "lch(83.3 60.6 103)",
-            disabled: "lch(25.2 0 0)"
+            active: "rgb(83% 84.6% 34.9%)",
+            disabled: "rgb(23.3% 23.3% 23.3%)"
           },
           action: {
-            "default": "lch(87.8 63.4 103)",
-            hover: "lch(82.5 43 104)",
-            active: "lch(73.3 53.3 103)",
-            disabled: "lch(22.2 0 0)"
+            "default": "rgb(88.2% 90% 37.1%)",
+            hover: "rgb(81.8% 83.2% 49.2%)",
+            active: "rgb(73% 74.4% 30.7%)",
+            disabled: "rgb(20.5% 20.5% 20.5%)"
           }
         },
         text: {
@@ -42256,17 +42268,17 @@ const click$2 = {
           disabled: "rgba(0,0,0,0)"
         },
         divide: {
-          "default": "lch(85.4 61.7 103)",
-          hover: "lch(78.5 40.9 104)",
-          active: "lch(72.9 53 103)",
-          disabled: "lch(23.1 0 0)"
+          "default": "rgb(85.8% 87.5% 36%)",
+          hover: "rgb(77.8% 79.1% 46.8%)",
+          active: "rgb(72.6% 74% 30.5%)",
+          disabled: "rgb(21.3% 21.3% 21.3%)"
         }
       },
       secondary: {
         divide: {
           "default": "lch(31.2 0 0)",
           hover: "lch(34.8 0 0)",
-          active: "lch(24.8 2.56 307)",
+          active: "rgb(23.7% 22.9% 24.4%)",
           disabled: "lch(23.4 0 0)"
         },
         background: {
@@ -42278,9 +42290,9 @@ const click$2 = {
           },
           action: {
             "default": "#282828",
-            hover: "lch(18.2 0 0)",
-            active: "lch(21.9 0 0)",
-            disabled: "lch(23.9 0 0)"
+            hover: "rgb(17.8% 17.8% 17.8%)",
+            active: "rgb(20.7% 20.7% 20.7%)",
+            disabled: "rgb(22.1% 22.1% 22.1%)"
           }
         },
         text: {
@@ -42292,7 +42304,7 @@ const click$2 = {
         stroke: {
           "default": "#414141",
           hover: "#414141",
-          active: "lch(24.8 2.56 307)",
+          active: "rgb(23.7% 22.9% 24.4%)",
           disabled: "rgba(0,0,0,0)"
         }
       }
@@ -42302,7 +42314,7 @@ const click$2 = {
         background: {
           "default": "rgba(0,0,0,0)",
           hover: "#282828",
-          active: "lch(18.2 0 0)",
+          active: "rgb(17.8% 17.8% 17.8%)",
           disabled: "rgba(0,0,0,0)",
           "disabled-active": "lch(0 0 0 / 0)",
           panel: "rgba(0,0,0,0)"
@@ -42335,7 +42347,7 @@ const click$2 = {
         background: {
           "default": "rgba(0,0,0,0)",
           hover: "#282828",
-          active: "lch(15.8 0 0)"
+          active: "rgb(15.4% 15.4% 15.4%)"
         },
         stroke: {
           "default": "#323232",
@@ -42356,13 +42368,13 @@ const click$2 = {
         background: {
           "default": "#1F1F1C",
           hover: "#282828",
-          active: "lch(15.3 0 0)",
+          active: "rgb(14.9% 14.9% 14.9%)",
           disabled: "#414141"
         },
         title: {
-          "default": "lch(97.5 0 0)",
-          hover: "lch(97.5 0 0)",
-          active: "lch(97.5 0 0)",
+          "default": "rgb(97.5% 97.5% 97.5%)",
+          hover: "rgb(97.5% 97.5% 97.5%)",
+          active: "rgb(97.5% 97.5% 97.5%)",
           disabled: "#808080"
         },
         description: {
@@ -42380,7 +42392,7 @@ const click$2 = {
         stroke: {
           "default": "#323232",
           hover: "#323232",
-          active: "lch(19.7 0 0)",
+          active: "rgb(18.6% 18.6% 18.6%)",
           disabled: "#414141"
         }
       }
@@ -42390,13 +42402,13 @@ const click$2 = {
         background: {
           "default": "#1F1F1C",
           hover: "#282828",
-          active: "lch(15.3 0 0)",
+          active: "rgb(14.9% 14.9% 14.9%)",
           disabled: "#414141"
         },
         title: {
-          "default": "lch(97.5 0 0)",
-          hover: "lch(97.5 0 0)",
-          active: "lch(97.5 0 0)",
+          "default": "rgb(97.5% 97.5% 97.5%)",
+          hover: "rgb(97.5% 97.5% 97.5%)",
+          active: "rgb(97.5% 97.5% 97.5%)",
           disabled: "#808080"
         },
         description: {
@@ -42423,9 +42435,9 @@ const click$2 = {
             disabled: "#414141"
           },
           title: {
-            "default": "lch(97.5 0 0)",
-            hover: "lch(97.5 0 0)",
-            active: "lch(97.5 0 0)",
+            "default": "rgb(97.5% 97.5% 97.5%)",
+            hover: "rgb(97.5% 97.5% 97.5%)",
+            active: "rgb(97.5% 97.5% 97.5%)",
             disabled: "#808080"
           },
           description: {
@@ -42451,9 +42463,9 @@ const click$2 = {
             disabled: "#414141"
           },
           title: {
-            "default": "lch(97.5 0 0)",
-            hover: "lch(97.5 0 0)",
-            active: "lch(97.5 0 0)",
+            "default": "rgb(97.5% 97.5% 97.5%)",
+            hover: "rgb(97.5% 97.5% 97.5%)",
+            active: "rgb(97.5% 97.5% 97.5%)",
             disabled: "#808080"
           },
           description: {
@@ -42484,9 +42496,9 @@ const click$2 = {
           active: "#FAFF69"
         },
         background: {
-          "default": "lch(16.1 0 0 / 0.9)",
-          hover: "lch(18.2 0 0 / 0.9)",
-          active: "lch(20.2 0 0 / 0.9)"
+          "default": "rgb(15.7% 15.7% 15.7% / 0.9)",
+          hover: "rgb(17.8% 17.8% 17.8% / 0.9)",
+          active: "rgb(19.9% 19.9% 19.9% / 0.9)"
         },
         stroke: {
           "default": "linear-gradient(174deg, #FAFF69 8.31%, #2C2E31 22.92%)",
@@ -42500,8 +42512,8 @@ const click$2 = {
   checkbox: {
     color: {
       background: {
-        "default": "lch(18.2 0 0)",
-        hover: "lch(18.2 0 0)",
+        "default": "rgb(17.8% 17.8% 17.8%)",
+        hover: "rgb(17.8% 17.8% 17.8%)",
         active: "#FAFF69",
         disabled: "#414141"
       },
@@ -42579,7 +42591,7 @@ const click$2 = {
     monacoTheme: {
       parameter: {
         foreground: "#c0c0c0",
-        background: "#414141"
+        background: "rgb(62.7% 62.7% 62.7% / 0.2)"
       }
     }
   },
@@ -42599,11 +42611,11 @@ const click$2 = {
   field: {
     color: {
       background: {
-        "default": "lch(18.2 0 0)",
-        hover: "lch(20.2 0 0)",
-        active: "lch(20.2 0 0)",
+        "default": "rgb(17.8% 17.8% 17.8%)",
+        hover: "rgb(19.9% 19.9% 19.9%)",
+        active: "rgb(19.9% 19.9% 19.9%)",
         disabled: "#414141",
-        error: "lch(20.2 0 0)"
+        error: "rgb(19.9% 19.9% 19.9%)"
       },
       text: {
         "default": "#e6e7e9",
@@ -42613,8 +42625,8 @@ const click$2 = {
         error: "#ffbaba"
       },
       stroke: {
-        "default": "lch(24.7 0 0)",
-        hover: "lch(28.5 0 0)",
+        "default": "rgb(23.6% 23.6% 23.6%)",
+        hover: "rgb(27.4% 27.4% 27.4%)",
         active: "#FAFF69",
         disabled: "#414141",
         error: "#ffbaba"
@@ -42627,11 +42639,11 @@ const click$2 = {
         error: "#ffbaba"
       },
       format: {
-        "default": "lch(62.9 0 0)",
-        hover: "lch(62.9 0 0)",
-        active: "lch(62.9 0 0)",
+        "default": "rgb(60.2% 60.2% 60.2%)",
+        hover: "rgb(60.2% 60.2% 60.2%)",
+        active: "rgb(60.2% 60.2% 60.2%)",
         disabled: "#808080",
-        error: "lch(62.9 0 0)"
+        error: "rgb(60.2% 60.2% 60.2%)"
       },
       genericLabel: {
         "default": "#ffffff",
@@ -42657,16 +42669,16 @@ const click$2 = {
         },
         background: {
           "default": "#282828",
-          hover: "lch(23.5 0 0)",
+          hover: "rgb(23.1% 23.1% 23.1%)",
           active: "#282828",
           disabled: "#414141"
         },
         format: {
           "default": "lch(62.9 0 0)",
-          hover: "lch(62.9 0 0)",
-          active: "lch(62.9 0 0)",
+          hover: "rgb(60.2% 60.2% 60.2%)",
+          active: "rgb(60.2% 60.2% 60.2%)",
           disabled: "#808080",
-          error: "lch(62.9 0 0)"
+          error: "rgb(60.2% 60.2% 60.2%)"
         },
         stroke: {
           "default": "#323232"
@@ -42751,8 +42763,8 @@ const click$2 = {
   radio: {
     color: {
       background: {
-        "default": "lch(18.2 0 0)",
-        hover: "lch(18.2 0 0)",
+        "default": "rgb(17.8% 17.8% 17.8%)",
+        hover: "rgb(17.8% 17.8% 17.8%)",
         active: "#FAFF69",
         disabled: "#414141"
       },
@@ -42764,7 +42776,7 @@ const click$2 = {
       },
       indicator: {
         "default": "#1F1F1C",
-        hover: "lch(18.2 0 0)",
+        hover: "rgb(17.8% 17.8% 17.8%)",
         active: "#151515",
         disabled: "#808080"
       }
@@ -43009,10 +43021,10 @@ const click$2 = {
         background: {
           "default": "#282828",
           hover: "#282828",
-          active: "lch(18.2 0 0)"
+          active: "rgb(17.8% 17.8% 17.8%)"
         },
         title: {
-          "default": "lch(97.5 0 0)"
+          "default": "rgb(97.5% 97.5% 97.5%)"
         },
         icon: {
           "default": "#ffffff"
@@ -43032,7 +43044,7 @@ const click$2 = {
         background: {
           "default": "#1F1F1C",
           hover: "lch(15.8 0 0)",
-          active: "lch(17.9 0 0)"
+          active: "rgb(17.5% 17.5% 17.5%)"
         },
         stroke: {
           "default": "#323232"
@@ -43111,7 +43123,7 @@ const click$2 = {
   toast: {
     color: {
       title: {
-        "default": "lch(97.5 0 0)"
+        "default": "rgb(97.5% 97.5% 97.5%)"
       },
       description: {
         "default": "#b3b6bd"
@@ -43120,7 +43132,7 @@ const click$2 = {
         "default": "#414141"
       },
       icon: {
-        "default": "lch(97.5 0 0)",
+        "default": "rgb(97.5% 97.5% 97.5%)",
         success: "#CCFFD0",
         warning: "#ffca8b",
         danger: "#ffbaba"
@@ -43143,7 +43155,7 @@ const click$2 = {
         "default": "#1F1F1C"
       },
       title: {
-        "default": "lch(97.5 0 0)"
+        "default": "rgb(97.5% 97.5% 97.5%)"
       },
       description: {
         "default": "#b3b6bd"
@@ -43159,7 +43171,7 @@ const click$2 = {
         "default": "#282828"
       },
       title: {
-        "default": "lch(97.5 0 0)"
+        "default": "rgb(97.5% 97.5% 97.5%)"
       },
       description: {
         "default": "#b3b6bd"
@@ -43253,10 +43265,10 @@ const click$2 = {
         "default": "#FAFF69"
       },
       shadow: {
-        "default": "lch(6.77 0 0 / 0.6)"
+        "default": "rgb(8.24% 8.24% 8.24% / 0.6)"
       },
       title: {
-        "default": "lch(97.5 0 0)",
+        "default": "rgb(97.5% 97.5% 97.5%)",
         muted: "#b3b6bd"
       }
     }
@@ -43264,23 +43276,23 @@ const click$2 = {
   feedback: {
     color: {
       info: {
-        background: "#09255B",
+        background: "rgb(7.45% 35.7% 90.2% / 0.2)",
         foreground: "#b5cdf9"
       },
       success: {
-        background: "#004206",
+        background: "rgb(20% 100% 26.7% / 0.2)",
         foreground: "#CCFFD0"
       },
       warning: {
-        background: "#4f2b00",
+        background: "rgb(100% 58% 8.63% / 0.2)",
         foreground: "#ffca8b"
       },
       danger: {
-        background: "#610000",
+        background: "rgb(100% 13.7% 13.7% / 0.2)",
         foreground: "#ffbaba"
       },
       neutral: {
-        background: "#414141",
+        background: "rgb(62.7% 62.7% 62.7% / 0.2)",
         foreground: "#c0c0c0",
         stroke: "#323232"
       }
@@ -43422,11 +43434,11 @@ const click$1 = {
     color: {
       background: {
         "default": "#ffffff",
-        success: "#E5FFE8",
-        neutral: "#e6e7e9",
-        danger: "#ffdddd",
-        warning: "#ffedd8",
-        info: "#dae6fc"
+        success: "rgb(20% 100% 26.7% / 0.1)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.1)",
+        warning: "rgb(100% 58% 8.63% / 0.1)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.1)"
       },
       text: {
         "default": "#696e79",
@@ -43438,11 +43450,11 @@ const click$1 = {
       },
       iconBackground: {
         "default": "#ffffff",
-        success: "#E5FFE8",
-        neutral: "#e6e7e9",
-        danger: "#ffdddd",
-        warning: "#ffedd8",
-        info: "#dae6fc"
+        success: "rgb(20% 100% 26.7% / 0)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0)",
+        danger: "rgb(100% 13.7% 13.7% / 0)",
+        warning: "rgb(100% 58% 8.63% / 0)",
+        info: "rgb(7.45% 35.7% 90.2% / 0)"
       },
       iconForeground: {
         "default": "#696e79",
@@ -43471,13 +43483,13 @@ const click$1 = {
   badge: {
     color: {
       background: {
-        "default": "#ffffff",
-        success: "#E5FFE8",
-        neutral: "#e6e7e9",
-        danger: "#ffdddd",
+        "default": "#f6f7fa",
+        success: "rgb(20% 100% 26.7% / 0.1)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.1)",
         disabled: "#dfdfdf",
-        info: "#dae6fc",
-        warning: "#ffedd8"
+        info: "rgb(7.45% 35.7% 90.2% / 0.1)",
+        warning: "rgb(100% 58% 8.63% / 0.1)"
       },
       text: {
         "default": "#696e79",
@@ -43490,12 +43502,12 @@ const click$1 = {
       },
       stroke: {
         "default": "#e6e7e9",
-        success: "#E5FFE8",
-        neutral: "#e6e7e9",
-        danger: "#ffdddd",
-        disabled: "lch(84.4 0 0)",
-        info: "#dae6fc",
-        warning: "#ffedd8"
+        success: "rgb(20% 100% 26.7% / 0.05)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.05)",
+        disabled: "rgb(83.1% 83.1% 83.1%)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.05)",
+        warning: "rgb(100% 58% 8.63% / 0.05)"
       }
     }
   },
@@ -43564,9 +43576,9 @@ const click$1 = {
         },
         danger: {
           background: {
-            "default": "#ffdddd",
-            hover: "#ffbaba",
-            active: "lch(70.3 41.1 23.9)",
+            "default": "rgb(100% 13.7% 13.7% / 0.1)",
+            hover: "rgb(100% 13.7% 13.7% / 0.2)",
+            active: "rgb(100% 13.7% 13.7% / 0.3)",
             disabled: "#dfdfdf"
           },
           text: {
@@ -43576,9 +43588,9 @@ const click$1 = {
             disabled: "#a0a0a0"
           },
           stroke: {
-            "default": "#ffdddd",
-            hover: "#ffbaba",
-            active: "lch(70.3 41.1 23.9)",
+            "default": "rgb(100% 13.7% 13.7% / 0.1)",
+            hover: "rgb(100% 13.7% 13.7% / 0.05)",
+            active: "rgb(100% 13.7% 13.7% / 0.05)",
             disabled: "#dfdfdf"
           }
         },
@@ -43650,9 +43662,9 @@ const click$1 = {
         },
         danger: {
           background: {
-            "default": "#ffdddd",
-            hover: "#ffbaba",
-            active: "lch(70.3 41.1 23.9)"
+            "default": "rgb(100% 13.7% 13.7% / 0.1)",
+            hover: "rgb(100% 13.7% 13.7% / 0.2)",
+            active: "rgb(100% 13.7% 13.7% / 0.3)"
           },
           text: {
             "default": "#c10000",
@@ -43660,9 +43672,9 @@ const click$1 = {
             active: "#c10000"
           },
           stroke: {
-            "default": "#ffdddd",
-            hover: "#ffbaba",
-            active: "lch(70.3 41.1 23.9)"
+            "default": "rgb(100% 13.7% 13.7% / 0.1)",
+            hover: "rgb(100% 13.7% 13.7% / 0.2)",
+            active: "rgb(100% 13.7% 13.7% / 0.3)"
           }
         },
         ghost: {
@@ -43684,7 +43696,7 @@ const click$1 = {
         },
         info: {
           background: {
-            "default": "#dae6fc",
+            "default": "rgb(7.45% 35.7% 90.2% / 0.1)",
             hover: "#b5cdf9",
             active: "#91b3f6"
           },
@@ -43694,7 +43706,7 @@ const click$1 = {
             active: "#135be6"
           },
           stroke: {
-            "default": "#dae6fc",
+            "default": "rgb(7.45% 35.7% 90.2% / 0.1)",
             hover: "#b5cdf9",
             active: "#91b3f6"
           }
@@ -43708,13 +43720,13 @@ const click$1 = {
             "default": "#302e32",
             hover: "lch(27 3.82 267)",
             active: "lch(5.68 1.13 305)",
-            disabled: "lch(81.3 0 0)"
+            disabled: "rgb(80% 80% 80%)"
           },
           action: {
-            "default": "lch(6.24 1.29 305)",
+            "default": "rgb(7.76% 7.41% 8.12%)",
             hover: "lch(25.6 3.63 267)",
             active: "lch(3.47 0.72 305)",
-            disabled: "lch(77.2 0 0)"
+            disabled: "lch(77.9 0 0)"
           }
         },
         text: {
@@ -43754,7 +43766,7 @@ const click$1 = {
             "default": "#f6f7fa",
             hover: "lch(94.8 1.53 272)",
             active: "lch(92.9 1.5 272)",
-            disabled: "lch(77.2 0 0)"
+            disabled: "lch(77.9 0 0)"
           }
         },
         text: {
@@ -43766,7 +43778,7 @@ const click$1 = {
         stroke: {
           "default": "#e6e7e9",
           hover: "#e6e7e9",
-          active: "lch(84 2.28 258)",
+          active: "rgb(81.2% 82.3% 83.8%)",
           disabled: "rgba(0,0,0,0)"
         }
       }
@@ -43864,7 +43876,7 @@ const click$1 = {
         background: {
           "default": "#ffffff",
           hover: "#f6f7fa",
-          active: "lch(95 0 0)",
+          active: "rgb(95% 95% 95%)",
           disabled: "#dfdfdf"
         },
         title: {
@@ -43958,8 +43970,8 @@ const click$1 = {
           active: "#161517"
         },
         background: {
-          "default": "lch(97.2 1.57 272 / 0.9)",
-          hover: "lch(91.8 1.07 266)",
+          "default": "rgb(96.5% 96.9% 98% / 0.9)",
+          hover: "rgb(90.4% 90.8% 91.6%)",
           active: "lch(89.8 1.08 266)"
         },
         stroke: {
@@ -44047,7 +44059,7 @@ const click$1 = {
     monacoTheme: {
       parameter: {
         foreground: "#53575f",
-        background: "#e6e7e9"
+        background: "rgb(41.2% 43.1% 47.5% / 0.1)"
       }
     }
   },
@@ -44067,8 +44079,8 @@ const click$1 = {
   field: {
     color: {
       background: {
-        "default": "lch(97.3 1.53 272)",
-        hover: "lch(97.3 1.53 272)",
+        "default": "rgb(96.6% 96.9% 98.1%)",
+        hover: "rgb(96.6% 96.9% 98.1%)",
         active: "#ffffff",
         disabled: "#dfdfdf",
         error: "#ffffff"
@@ -44081,8 +44093,8 @@ const click$1 = {
         error: "#c10000"
       },
       stroke: {
-        "default": "lch(92 1.05 266)",
-        hover: "lch(83.8 2.3 258)",
+        "default": "rgb(90.7% 91.1% 91.8%)",
+        hover: "rgb(81% 82.1% 83.6%)",
         active: "#161517",
         disabled: "#dfdfdf",
         error: "#c10000"
@@ -44125,7 +44137,7 @@ const click$1 = {
         },
         background: {
           "default": "#ffffff",
-          hover: "lch(97.5 1.43 272)",
+          hover: "rgb(96.8% 97.1% 98.2%)",
           active: "#ffffff",
           disabled: "#ffffff"
         },
@@ -44479,7 +44491,7 @@ const click$1 = {
         background: {
           "default": "#f6f7fa",
           hover: "#f6f7fa",
-          active: "lch(90.3 11.8 266)"
+          active: "rgb(85% 89.5% 97.8%)"
         },
         title: {
           "default": "#161517"
@@ -44502,7 +44514,7 @@ const click$1 = {
         background: {
           "default": "#ffffff",
           hover: "lch(90.9 12.2 266 / 0.2)",
-          active: "lch(91.1 11.9 266 / 0.2)"
+          active: "rgb(85.9% 90.4% 98.9% / 0.2)"
         },
         stroke: {
           "default": "#e6e7e9"
@@ -44731,23 +44743,23 @@ const click$1 = {
   feedback: {
     color: {
       info: {
-        background: "#dae6fc",
+        background: "rgb(7.45% 35.7% 90.2% / 0.1)",
         foreground: "#135be6"
       },
       success: {
-        background: "#E5FFE8",
+        background: "rgb(20% 100% 26.7% / 0.1)",
         foreground: "#00990D"
       },
       warning: {
-        background: "#ffedd8",
+        background: "rgb(100% 58% 8.63% / 0.1)",
         foreground: "#9e5600"
       },
       danger: {
-        background: "#ffdddd",
+        background: "rgb(100% 13.7% 13.7% / 0.1)",
         foreground: "#c10000"
       },
       neutral: {
-        background: "#e6e7e9",
+        background: "rgb(41.2% 43.1% 47.5% / 0.1)",
         foreground: "#53575f",
         stroke: "#e6e7e9"
       }
@@ -44985,11 +44997,11 @@ const click = {
     color: {
       background: {
         "default": "#ffffff",
-        success: "#E5FFE8",
-        neutral: "#e6e7e9",
-        danger: "#ffdddd",
-        warning: "#ffedd8",
-        info: "#dae6fc"
+        success: "rgb(20% 100% 26.7% / 0.1)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.1)",
+        warning: "rgb(100% 58% 8.63% / 0.1)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.1)"
       },
       text: {
         "default": "#696e79",
@@ -45001,11 +45013,11 @@ const click = {
       },
       iconBackground: {
         "default": "#ffffff",
-        success: "#E5FFE8",
-        neutral: "#e6e7e9",
-        danger: "#ffdddd",
-        warning: "#ffedd8",
-        info: "#dae6fc"
+        success: "rgb(20% 100% 26.7% / 0)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0)",
+        danger: "rgb(100% 13.7% 13.7% / 0)",
+        warning: "rgb(100% 58% 8.63% / 0)",
+        info: "rgb(7.45% 35.7% 90.2% / 0)"
       },
       iconForeground: {
         "default": "#696e79",
@@ -45098,13 +45110,13 @@ const click = {
     },
     color: {
       background: {
-        "default": "#ffffff",
-        success: "#E5FFE8",
-        neutral: "#e6e7e9",
-        danger: "#ffdddd",
+        "default": "#f6f7fa",
+        success: "rgb(20% 100% 26.7% / 0.1)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.1)",
         disabled: "#dfdfdf",
-        info: "#dae6fc",
-        warning: "#ffedd8"
+        info: "rgb(7.45% 35.7% 90.2% / 0.1)",
+        warning: "rgb(100% 58% 8.63% / 0.1)"
       },
       text: {
         "default": "#696e79",
@@ -45117,12 +45129,12 @@ const click = {
       },
       stroke: {
         "default": "#e6e7e9",
-        success: "#E5FFE8",
-        neutral: "#e6e7e9",
-        danger: "#ffdddd",
-        disabled: "lch(84.4 0 0)",
-        info: "#dae6fc",
-        warning: "#ffedd8"
+        success: "rgb(20% 100% 26.7% / 0.05)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.05)",
+        disabled: "rgb(83.1% 83.1% 83.1%)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.05)",
+        warning: "rgb(100% 58% 8.63% / 0.05)"
       }
     }
   },
@@ -45257,9 +45269,9 @@ const click = {
         },
         danger: {
           background: {
-            "default": "#ffdddd",
-            hover: "#ffbaba",
-            active: "lch(70.3 41.1 23.9)",
+            "default": "rgb(100% 13.7% 13.7% / 0.1)",
+            hover: "rgb(100% 13.7% 13.7% / 0.2)",
+            active: "rgb(100% 13.7% 13.7% / 0.3)",
             disabled: "#dfdfdf"
           },
           text: {
@@ -45269,9 +45281,9 @@ const click = {
             disabled: "#a0a0a0"
           },
           stroke: {
-            "default": "#ffdddd",
-            hover: "#ffbaba",
-            active: "lch(70.3 41.1 23.9)",
+            "default": "rgb(100% 13.7% 13.7% / 0.1)",
+            hover: "rgb(100% 13.7% 13.7% / 0.05)",
+            active: "rgb(100% 13.7% 13.7% / 0.05)",
             disabled: "#dfdfdf"
           }
         },
@@ -45369,9 +45381,9 @@ const click = {
         },
         danger: {
           background: {
-            "default": "#ffdddd",
-            hover: "#ffbaba",
-            active: "lch(70.3 41.1 23.9)"
+            "default": "rgb(100% 13.7% 13.7% / 0.1)",
+            hover: "rgb(100% 13.7% 13.7% / 0.2)",
+            active: "rgb(100% 13.7% 13.7% / 0.3)"
           },
           text: {
             "default": "#c10000",
@@ -45379,9 +45391,9 @@ const click = {
             active: "#c10000"
           },
           stroke: {
-            "default": "#ffdddd",
-            hover: "#ffbaba",
-            active: "lch(70.3 41.1 23.9)"
+            "default": "rgb(100% 13.7% 13.7% / 0.1)",
+            hover: "rgb(100% 13.7% 13.7% / 0.2)",
+            active: "rgb(100% 13.7% 13.7% / 0.3)"
           }
         },
         ghost: {
@@ -45403,7 +45415,7 @@ const click = {
         },
         info: {
           background: {
-            "default": "#dae6fc",
+            "default": "rgb(7.45% 35.7% 90.2% / 0.1)",
             hover: "#b5cdf9",
             active: "#91b3f6"
           },
@@ -45413,7 +45425,7 @@ const click = {
             active: "#135be6"
           },
           stroke: {
-            "default": "#dae6fc",
+            "default": "rgb(7.45% 35.7% 90.2% / 0.1)",
             hover: "#b5cdf9",
             active: "#91b3f6"
           }
@@ -45454,13 +45466,13 @@ const click = {
             "default": "#302e32",
             hover: "lch(27 3.82 267)",
             active: "lch(5.68 1.13 305)",
-            disabled: "lch(81.3 0 0)"
+            disabled: "rgb(80% 80% 80%)"
           },
           action: {
-            "default": "lch(6.24 1.29 305)",
+            "default": "rgb(7.76% 7.41% 8.12%)",
             hover: "lch(25.6 3.63 267)",
             active: "lch(3.47 0.72 305)",
-            disabled: "lch(77.2 0 0)"
+            disabled: "lch(77.9 0 0)"
           }
         },
         text: {
@@ -45500,7 +45512,7 @@ const click = {
             "default": "#f6f7fa",
             hover: "lch(94.8 1.53 272)",
             active: "lch(92.9 1.5 272)",
-            disabled: "lch(77.2 0 0)"
+            disabled: "lch(77.9 0 0)"
           }
         },
         text: {
@@ -45512,7 +45524,7 @@ const click = {
         stroke: {
           "default": "#e6e7e9",
           hover: "#e6e7e9",
-          active: "lch(84 2.28 258)",
+          active: "rgb(81.2% 82.3% 83.8%)",
           disabled: "rgba(0,0,0,0)"
         }
       }
@@ -45740,7 +45752,7 @@ const click = {
         background: {
           "default": "#ffffff",
           hover: "#f6f7fa",
-          active: "lch(95 0 0)",
+          active: "rgb(95% 95% 95%)",
           disabled: "#dfdfdf"
         },
         title: {
@@ -45880,8 +45892,8 @@ const click = {
           active: "#161517"
         },
         background: {
-          "default": "lch(97.2 1.57 272 / 0.9)",
-          hover: "lch(91.8 1.07 266)",
+          "default": "rgb(96.5% 96.9% 98% / 0.9)",
+          hover: "rgb(90.4% 90.8% 91.6%)",
           active: "lch(89.8 1.08 266)"
         },
         stroke: {
@@ -46012,7 +46024,7 @@ const click = {
     monacoTheme: {
       parameter: {
         foreground: "#53575f",
-        background: "#e6e7e9"
+        background: "rgb(41.2% 43.1% 47.5% / 0.1)"
       }
     }
   },
@@ -46127,8 +46139,8 @@ const click = {
     },
     color: {
       background: {
-        "default": "lch(97.3 1.53 272)",
-        hover: "lch(97.3 1.53 272)",
+        "default": "rgb(96.6% 96.9% 98.1%)",
+        hover: "rgb(96.6% 96.9% 98.1%)",
         active: "#ffffff",
         disabled: "#dfdfdf",
         error: "#ffffff"
@@ -46141,8 +46153,8 @@ const click = {
         error: "#c10000"
       },
       stroke: {
-        "default": "lch(92 1.05 266)",
-        hover: "lch(83.8 2.3 258)",
+        "default": "rgb(90.7% 91.1% 91.8%)",
+        hover: "rgb(81% 82.1% 83.6%)",
         active: "#161517",
         disabled: "#dfdfdf",
         error: "#c10000"
@@ -46223,7 +46235,7 @@ const click = {
         },
         background: {
           "default": "#ffffff",
-          hover: "lch(97.5 1.43 272)",
+          hover: "rgb(96.8% 97.1% 98.2%)",
           active: "#ffffff",
           disabled: "#ffffff"
         },
@@ -47000,7 +47012,7 @@ const click = {
         background: {
           "default": "#f6f7fa",
           hover: "#f6f7fa",
-          active: "lch(90.3 11.8 266)"
+          active: "rgb(85% 89.5% 97.8%)"
         },
         title: {
           "default": "#161517"
@@ -47058,7 +47070,7 @@ const click = {
         background: {
           "default": "#ffffff",
           hover: "lch(90.9 12.2 266 / 0.2)",
-          active: "lch(91.1 11.9 266 / 0.2)"
+          active: "rgb(85.9% 90.4% 98.9% / 0.2)"
         },
         stroke: {
           "default": "#e6e7e9"
@@ -47546,23 +47558,23 @@ const click = {
   feedback: {
     color: {
       info: {
-        background: "#dae6fc",
+        background: "rgb(7.45% 35.7% 90.2% / 0.1)",
         foreground: "#135be6"
       },
       success: {
-        background: "#E5FFE8",
+        background: "rgb(20% 100% 26.7% / 0.1)",
         foreground: "#00990D"
       },
       warning: {
-        background: "#ffedd8",
+        background: "rgb(100% 58% 8.63% / 0.1)",
         foreground: "#9e5600"
       },
       danger: {
-        background: "#ffdddd",
+        background: "rgb(100% 13.7% 13.7% / 0.1)",
         foreground: "#c10000"
       },
       neutral: {
-        background: "#e6e7e9",
+        background: "rgb(41.2% 43.1% 47.5% / 0.1)",
         foreground: "#53575f",
         stroke: "#e6e7e9"
       }