@clickhouse/click-ui 0.0.133 → 0.0.135

package/dist/click-ui.es.js

@@ -1184,6 +1184,19 @@ const HorizontalLoading = styled(DotsHorizontal).withConfig({
   componentId: "sc-1b02o5c-0"
 })(["circle{animation-name:horizontal-loading;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-name:horizontal-loading;-webkit-animation-duration:1.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:horizontal-loading;-moz-animation-duration:1.5s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;&:nth-child(1){animation-name:", ";-webkit-animation-name:", ";-moz-animation-name:", ";}&:nth-child(2){animation-name:", ";-webkit-animation-name:", ";-moz-animation-name:", ";}&:nth-child(3){animation-name:", ";-webkit-animation-name:", ";-moz-animation-name:", ";}}"], animationCircle1, animationCircle1, animationCircle1, animationCircle2, animationCircle2, animationCircle2, animationCircle3, animationCircle3, animationCircle3);
 const Http = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 13.8v-3.6M5.88 10.2v3.6M5.88 12H3M10.92 10.2H8.04M9.48 10.2v3.6M18.12 10.2v3.6M15.96 10.2h-2.88M14.52 10.2v3.6M18.12 10.2h1.755c.621 0 1.125.504 1.125 1.125v0c0 .621-.504 1.125-1.125 1.125H18.12M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2" }) });
+const HttpMonitoring = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6 10H7.85L10.018 14L13.982 6L16.15 10H18", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 15V5C3 3.895 3.895 3 5 3H19C20.105 3 21 3.895 21 5V15", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 21.8002V18.2002", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.87988 18.2002V21.8002", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.88 20H3", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M10.92 18.2002H8.04004", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.48047 18.2002V21.8002", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18.1201 18.2002V21.8002", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15.9601 18.2002H13.0801", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14.5195 18.2002V21.8002", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18.1201 18.2002H19.8751C20.4961 18.2002 21.0001 18.7042 21.0001 19.3252V19.3252C21.0001 19.9462 20.4961 20.4502 19.8751 20.4502H18.1201", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
 const Integrations = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
   /* @__PURE__ */ jsxRuntimeExports.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M10 9.056C9.094 7.818 7.652 7 6 7v0a5 5 0 0 0-5 5v0a5 5 0 0 0 5 5v0a5.299 5.299 0 0 0 4.543-2.572L12 12l1.457-2.428A5.299 5.299 0 0 1 18 7v0a5 5 0 0 1 5 5v0a5 5 0 0 1-5 5v0c-1.652 0-3.094-.818-4-2.056" }),
   /* @__PURE__ */ jsxRuntimeExports.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m9.93 6.028.521 2.954-2.954.52" })
@@ -1543,6 +1556,7 @@ const ICONS_MAP = {
   home: Home,
   "horizontal-loading": HorizontalLoading,
   http: Http,
+  "http-monitoring": HttpMonitoring,
   "info-in-circle": InfoInCircleIcon,
   information: InformationIcon,
   "insert-row": InsertRowIcon,
@@ -10051,7 +10065,7 @@ const LinkArrow = styled(ArrowContainer).withConfig({
 })([""]);
 const Wrapper$a = styled.div.withConfig({
   componentId: "sc-1drx130-7"
-})(["background-color:", ";border-radius:", ";border:", ";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,:focus{background-color:", ";cursor:pointer;", ",", "{color:", ";}}", ""], ({
+})(["background-color:", ";border-radius:", ";border:", ";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,:focus{background-color:", ";cursor:pointer;", ",", "{color:", ';}}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}"], ({
   theme: theme2
 }) => theme2.click.card.secondary.color.background.default, ({
   theme: theme2
@@ -10069,24 +10083,18 @@ const Wrapper$a = styled.div.withConfig({
 }) => theme2.click.card.secondary.color.background.hover, LinkText, LinkArrow, ({
   theme: theme2
 }) => theme2.click.card.secondary.color.link.hover, ({
-  $disabled,
   theme: theme2
-}) => $disabled && `
-  &,
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: ${theme2.click.card.secondary.color.background.disabled};
-    color: ${theme2.click.card.secondary.color.title.disabled};
-    border: 1px solid ${theme2.click.card.secondary.color.stroke.disabled};
-    cursor: not-allowed;
+}) => `
+      background-color: ${theme2.click.card.secondary.color.background.disabled};
+      color: ${theme2.click.card.secondary.color.title.disabled};
+      border: 1px solid ${theme2.click.card.secondary.color.stroke.disabled};
+      cursor: not-allowed;
 
-    ${LinkText},
-    ${LinkArrow} {
-      color: ${theme2.click.card.secondary.color.link.disabled};
-    }
-  }
-  `);
+      ${LinkText},
+      ${LinkArrow} {
+        color: ${theme2.click.card.secondary.color.link.disabled};
+      }
+    `);
 const CardSecondary = ({
   title,
   icon,
@@ -10099,7 +10107,7 @@ const CardSecondary = ({
   infoText,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$a, { $disabled: disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$a, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$4, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderLeft, { $disabled: disabled, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "lg", "area-hidden": "" }),
@@ -10116,7 +10124,7 @@ const CardSecondary = ({
 };
 const Wrapper$9 = styled.div.withConfig({
   componentId: "sc-2dguvi-0"
-})(["background-color:", ";border-radius:", ";border:", ";display:flex;width:100%;max-width:100%;text-align:", ";flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,&:focus{background-color:", ";cursor:pointer;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}&:active{border-color:", ";}", " ", ""], ({
+})(["background-color:", ";border-radius:", ";border:", ";display:flex;width:100%;max-width:100%;text-align:", ";flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,&:focus{background-color:", ";cursor:pointer;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}&:active{border-color:", ';}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}", ""], ({
   theme: theme2
 }) => theme2.click.card.primary.color.background.default, ({
   theme: theme2
@@ -10146,13 +10154,8 @@ const Wrapper$9 = styled.div.withConfig({
 }) => theme2.click.button.basic.color.primary.stroke.active, ({
   theme: theme2
 }) => theme2.click.button.basic.color.primary.stroke.active, ({
-  $disabled,
   theme: theme2
-}) => $disabled && `
-  &,
-  &:hover,
-  &:focus,
-  &:active {
+}) => `
     background-color: ${theme2.click.card.primary.color.background.disabled};
     color: ${theme2.click.card.primary.color.title.disabled};
     border: 1px solid ${theme2.click.card.primary.color.stroke.disabled};
@@ -10165,9 +10168,7 @@ const Wrapper$9 = styled.div.withConfig({
         background-color: ${theme2.click.button.basic.color.primary.background.disabled};
         border-color: ${theme2.click.button.basic.color.primary.stroke.disabled};
       }
-    }
-  }
-  `, ({
+    }`, ({
   $isSelected,
   theme: theme2
 }) => $isSelected ? `border-color: ${theme2.click.button.basic.color.primary.stroke.active};` : "");
@@ -10226,7 +10227,7 @@ const CardPrimary = ({
     }
   };
   const Component2 = !!infoUrl || typeof onButtonClick === "function" ? Button : "div";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$9, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size2, $disabled: disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$9, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size2, "aria-disabled": disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
     (icon || title) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$3, { $size: size2, $disabled: disabled, $alignContent: alignContent, children: [
       icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true }),
       title && /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
@@ -31482,7 +31483,7 @@ const Grid = forwardRef(({
       onFocusChangeProp(row, column);
     }
   }, [onFocusChangeProp, focusProp]);
-  const rowNumberWidth = (rowCount.toString().length + 2) * 8 + 3;
+  const rowNumberWidth = ((rowStart + rowCount).toString().length + 2) * 8 + 3;
   const {
     getColumnHorizontalPosition,
     onColumnResize,
@@ -32404,17 +32405,24 @@ const Pagination = ({
   const formatNumber = (value) => {
     return new Intl.NumberFormat("en").format(value);
   };
+  const leftButtonDisabled = currentPage <= 1;
+  const rightButtonDisabled = !!totalPages && currentPage === totalPages || disableNextButton;
   const onKeyDown = (e) => {
-    if (e.key === "ArrowUp" || e.key === "ArrowRight") {
+    var _a;
+    const isInputEnabled = !((_a = inputRef.current) == null ? void 0 : _a.disabled);
+    if ((e.key === "ArrowUp" || e.key === "ArrowRight") && isInputEnabled && !rightButtonDisabled) {
       onChangeProp(currentPage + 1);
-    } else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
-      onChangeProp(currentPage - 1);
+    } else if ((e.key === "ArrowDown" || e.key === "ArrowLeft") && isInputEnabled && !leftButtonDisabled) {
+      const newPage = currentPage - 1;
+      if (newPage > 0) {
+        onChangeProp(newPage);
+      }
     }
   };
   const onChange = (value) => {
     var _a;
     const valueToNumber = Number(value);
-    if (valueToNumber < 1 || ((_a = inputRef.current) == null ? void 0 : _a.disabled)) {
+    if (valueToNumber < 1 || ((_a = inputRef.current) == null ? void 0 : _a.disabled) || (typeof totalPages !== "undefined" ? valueToNumber > totalPages : false)) {
       return;
     }
     onChangeProp(valueToNumber);
@@ -32424,8 +32432,6 @@ const Pagination = ({
       onPageSizeChangeProp(Number(value));
     }
   };
-  const leftButtonDisabled = currentPage <= 1;
-  const rightButtonDisabled = !!totalPages && currentPage === totalPages || disableNextButton;
   const onPrevClick = useCallback((e) => {
     if (leftButtonDisabled) {
       return;
@@ -37076,14 +37082,15 @@ const SidebarNavigationItem = forwardRef(({
   icon,
   selected,
   iconDir,
+  disabled,
   type = "main",
   ...props
 }, ref) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarItemWrapper, { $level: level, "data-selected": selected, $type: type, ref, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper, { icon, iconDir, children: label }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarItemWrapper, { $level: level, "data-selected": selected, $type: type, ref, "aria-disabled": disabled, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconWrapper, { icon, iconDir, children: label }) });
 });
 const SidebarItemWrapper = styled.div.withConfig({
   componentId: "sc-1rz759l-0"
-})(["display:flex;align-items:center;border:none;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;white-space:nowrap;overflow:hidden;flex-wrap:nowrap;cursor:pointer;", ' a{color:inherit;text-decoration:none;&:active{color:inherit;}}&:hover [data-trigger-icon],[data-open="true"][data-trigger-icon]{visibility:visible;}'], ({
+})(["display:flex;align-items:center;border:none;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;white-space:nowrap;overflow:hidden;flex-wrap:nowrap;", ""], ({
   theme: theme2,
   $collapsible = false,
   $level,
@@ -37096,26 +37103,53 @@ const SidebarItemWrapper = styled.div.withConfig({
     font: ${theme2.click.sidebar.navigation[itemType].typography.default};
     background-color: ${theme2.click.sidebar[$type].navigation[itemType].color.background.default};
     color: ${theme2.click.sidebar[$type].navigation[itemType].color.text.default};
+    span a {
+      color: ${theme2.click.sidebar[$type].navigation[itemType].color.text.default};
+    cursor: pointer;
+      text-decoration: none;
+    }
+    cursor: pointer;
+    pointer-events: all;
+
     &:hover, &:focus {
       font: ${theme2.click.sidebar.navigation[itemType].typography.hover};
       background-color: ${theme2.click.sidebar[$type].navigation[itemType].color.background.hover};
       color: ${theme2.click.sidebar[$type].navigation[itemType].color.text.hover};
+      pointer-events: auto;
     }
 
-    &:active, &[data-selected="true"]  {
+    &:active, &[data-selected="true"] {
       font: ${theme2.click.sidebar.navigation[itemType].typography.active};
       background-color: ${theme2.click.sidebar[$type].navigation[itemType].color.background.active};
       color: ${theme2.click.sidebar[$type].navigation[itemType].color.text.active};
+      pointer-events: all;
+    }
+
+    &[aria-disabled=true],
+    &[aria-disabled=true]:hover,
+    &[aria-disabled=true]:focus,
+    &[aria-disabled=true]:active,
+    &[aria-disabled=true]:focus-within,
+    &[aria-disabled=true][data-selected="true"] {
+
+      color: ${theme2.click.sidebar[$type].navigation[itemType].color.text.disabled};
+      pointer-events: none;
+
+      span a {
+        color: ${theme2.click.sidebar[$type].navigation[itemType].color.text.disabled};
+        cursor: not-allowed;
+        text-decoration: none;
+      }
+      cursor: not-allowed;
     }
+
     @media (max-width: 640px) {
       gap: ${theme2.click.sidebar.navigation[itemType].mobile.space.gap};
       padding: ${theme2.click.sidebar.navigation[itemType].mobile.space.y} ${theme2.click.sidebar.navigation[itemType].mobile.space.right} ${theme2.click.sidebar.navigation[itemType].mobile.space.y} ${$collapsible ? theme2.click.sidebar.navigation[itemType].mobile.space.left : theme2.click.image.sm.size.width};
       font: ${theme2.click.sidebar.navigation[itemType].mobile.typography.default};
-
       &:hover, &:focus {
         font: ${theme2.click.sidebar.navigation[itemType].mobile.typography.hover};
       }
-
       &:active, &[data-selected="true"] {
         font: ${theme2.click.sidebar.navigation[itemType].mobile.typography.active};
       }
@@ -41095,10 +41129,12 @@ const click$3 = {
               "default": "#f6f7fa",
               hover: "#ffffff",
               active: "#ffffff",
-              muted: "#696e79"
+              muted: "#696e79",
+              disabled: "#a0a0a0"
             },
             icon: {
-              "default": "#e4e2e9"
+              "default": "#e4e2e9",
+              disabled: "#a0a0a0"
             }
           },
           background: {
@@ -41169,13 +41205,6 @@ const click$3 = {
             }
           }
         },
-        title: {
-          color: {
-            "default": "#696e79",
-            hover: "#696e79",
-            active: "#696e79"
-          }
-        },
         subItem: {
           color: {
             text: {
@@ -41190,6 +41219,13 @@ const click$3 = {
             }
           }
         },
+        title: {
+          color: {
+            "default": "#696e79",
+            hover: "#696e79",
+            active: "#696e79"
+          }
+        },
         dragControl: {
           separator: {
             color: {
@@ -42408,10 +42444,12 @@ const click$2 = {
               "default": "#ffffff",
               hover: "#ffffff",
               active: "#ffffff",
-              muted: "#b3b6bd"
+              muted: "#b3b6bd",
+              disabled: "#808080"
             },
             icon: {
-              "default": "#b3b6bd"
+              "default": "#b3b6bd",
+              disabled: "#808080"
             }
           }
         },
@@ -42426,11 +42464,13 @@ const click$2 = {
           color: {
             text: {
               "default": "#b3b6bd",
+              disabled: "#808080",
               hover: "#ffffff",
               active: "#ffffff"
             },
             background: {
               "default": "rgba(0,0,0,0)",
+              disabled: "rgba(0,0,0,0)",
               hover: "lch(19.1 0 0)",
               active: "rgba(0,0,0,0)"
             }
@@ -42466,23 +42506,19 @@ const click$2 = {
               "default": "#ffffff",
               hover: "#ffffff",
               active: "#ffffff",
-              muted: "#b3b6bd"
+              muted: "#b3b6bd",
+              disabled: "#808080"
             },
             icon: {
-              "default": "#b3b6bd"
+              "default": "#b3b6bd",
+              disabled: "#808080"
             }
           }
         },
-        title: {
-          color: {
-            "default": "#b3b6bd",
-            hover: "#b3b6bd",
-            active: "#b3b6bd"
-          }
-        },
         subItem: {
           color: {
             text: {
+              disabled: "#808080",
               "default": "#b3b6bd",
               hover: "#ffffff",
               active: "#ffffff"
@@ -42494,6 +42530,13 @@ const click$2 = {
             }
           }
         },
+        title: {
+          color: {
+            "default": "#b3b6bd",
+            hover: "#b3b6bd",
+            active: "#b3b6bd"
+          }
+        },
         dragControl: {
           separator: {
             color: {
@@ -43867,10 +43910,12 @@ const click$1 = {
               "default": "#161517",
               hover: "#161517",
               active: "#161517",
-              muted: "#696e79"
+              muted: "#696e79",
+              disabled: "#a0a0a0"
             },
             icon: {
-              "default": "#696e79"
+              "default": "#696e79",
+              disabled: "#a0a0a0"
             }
           }
         },
@@ -43885,13 +43930,19 @@ const click$1 = {
           color: {
             text: {
               "default": "#696e79",
+              disabled: "#a0a0a0",
               hover: "#161517",
               active: "#161517"
             },
             background: {
               "default": "rgba(0,0,0,0)",
+              disabled: "rgba(0,0,0,0)",
               hover: "lch(91.6 1.1 266 / 0.6)",
               active: "rgba(0,0,0,0)"
+            },
+            icon: {
+              "default": "#696e79",
+              disabled: "#a0a0a0"
             }
           }
         },
@@ -43925,23 +43976,18 @@ const click$1 = {
               "default": "#161517",
               hover: "#161517",
               active: "#161517",
-              muted: "#696e79"
+              muted: "#696e79",
+              disabled: "#a0a0a0"
             },
             icon: {
               "default": "#696e79"
             }
           }
         },
-        title: {
-          color: {
-            "default": "#696e79",
-            hover: "#696e79",
-            active: "#696e79"
-          }
-        },
         subItem: {
           color: {
             text: {
+              disabled: "#a0a0a0",
               "default": "#696e79",
               hover: "#161517",
               active: "#161517"
@@ -43953,6 +43999,13 @@ const click$1 = {
             }
           }
         },
+        title: {
+          color: {
+            "default": "#696e79",
+            hover: "#696e79",
+            active: "#696e79"
+          }
+        },
         dragControl: {
           separator: {
             color: {
@@ -46241,10 +46294,12 @@ const click = {
               "default": "#161517",
               hover: "#161517",
               active: "#161517",
-              muted: "#696e79"
+              muted: "#696e79",
+              disabled: "#a0a0a0"
             },
             icon: {
-              "default": "#696e79"
+              "default": "#696e79",
+              disabled: "#a0a0a0"
             }
           }
         },
@@ -46259,13 +46314,19 @@ const click = {
           color: {
             text: {
               "default": "#696e79",
+              disabled: "#a0a0a0",
               hover: "#161517",
               active: "#161517"
             },
             background: {
               "default": "rgba(0,0,0,0)",
+              disabled: "rgba(0,0,0,0)",
               hover: "lch(91.6 1.1 266 / 0.6)",
               active: "rgba(0,0,0,0)"
+            },
+            icon: {
+              "default": "#696e79",
+              disabled: "#a0a0a0"
             }
           }
         },
@@ -46299,23 +46360,19 @@ const click = {
               "default": "#161517",
               hover: "#161517",
               active: "#161517",
-              muted: "#696e79"
+              muted: "#696e79",
+              disabled: "#a0a0a0"
             },
             icon: {
-              "default": "#696e79"
+              "default": "#696e79",
+              disabled: "#a0a0a0"
             }
           }
         },
-        title: {
-          color: {
-            "default": "#696e79",
-            hover: "#696e79",
-            active: "#696e79"
-          }
-        },
         subItem: {
           color: {
             text: {
+              disabled: "#a0a0a0",
               "default": "#696e79",
               hover: "#161517",
               active: "#161517"
@@ -46327,6 +46384,13 @@ const click = {
             }
           }
         },
+        title: {
+          color: {
+            "default": "#696e79",
+            hover: "#696e79",
+            active: "#696e79"
+          }
+        },
         dragControl: {
           separator: {
             color: {