@clickhouse/click-ui 0.0.133 → 0.0.134

package/dist/click-ui.es.js

@@ -10051,7 +10051,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 +10069,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 +10093,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 +10110,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 +10140,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 +10154,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 +10213,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 +31469,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 +32391,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 +32418,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 +37068,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 +37089,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 +41115,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 +41191,6 @@ const click$3 = {
             }
           }
         },
-        title: {
-          color: {
-            "default": "#696e79",
-            hover: "#696e79",
-            active: "#696e79"
-          }
-        },
         subItem: {
           color: {
             text: {
@@ -41190,6 +41205,13 @@ const click$3 = {
             }
           }
         },
+        title: {
+          color: {
+            "default": "#696e79",
+            hover: "#696e79",
+            active: "#696e79"
+          }
+        },
         dragControl: {
           separator: {
             color: {
@@ -42408,10 +42430,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 +42450,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 +42492,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 +42516,13 @@ const click$2 = {
             }
           }
         },
+        title: {
+          color: {
+            "default": "#b3b6bd",
+            hover: "#b3b6bd",
+            active: "#b3b6bd"
+          }
+        },
         dragControl: {
           separator: {
             color: {
@@ -43867,10 +43896,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 +43916,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 +43962,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 +43985,13 @@ const click$1 = {
             }
           }
         },
+        title: {
+          color: {
+            "default": "#696e79",
+            hover: "#696e79",
+            active: "#696e79"
+          }
+        },
         dragControl: {
           separator: {
             color: {
@@ -46241,10 +46280,12 @@ const click = {
               "default": "#161517",
               hover: "#161517",
               active: "#161517",
-              muted: "#696e79"
+              muted: "#696e79",
+              disabled: "#a0a0a0"
             },
             icon: {
-              "default": "#696e79"
+              "default": "#696e79",
+              disabled: "#a0a0a0"
             }
           }
         },
@@ -46259,13 +46300,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 +46346,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 +46370,13 @@ const click = {
             }
           }
         },
+        title: {
+          color: {
+            "default": "#696e79",
+            hover: "#696e79",
+            active: "#696e79"
+          }
+        },
         dragControl: {
           separator: {
             color: {

package/dist/click-ui.umd.js

@@ -10068,7 +10068,7 @@ var __publicField = (obj, key, value) => {
   })([""]);
   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
@@ -10086,24 +10086,18 @@ var __publicField = (obj, key, value) => {
   }) => 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,
@@ -10116,7 +10110,7 @@ var __publicField = (obj, key, value) => {
     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": "" }),
@@ -10133,7 +10127,7 @@ var __publicField = (obj, key, value) => {
   };
   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
@@ -10163,13 +10157,8 @@ var __publicField = (obj, key, value) => {
   }) => 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};
@@ -10182,9 +10171,7 @@ var __publicField = (obj, key, value) => {
         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};` : "");
@@ -10243,7 +10230,7 @@ var __publicField = (obj, key, value) => {
       }
     };
     const Component = !!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 })
@@ -31499,7 +31486,7 @@ var __publicField = (obj, key, value) => {
         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,
@@ -32421,17 +32408,24 @@ var __publicField = (obj, key, value) => {
     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);
@@ -32441,8 +32435,6 @@ var __publicField = (obj, key, value) => {
         onPageSizeChangeProp(Number(value));
       }
     };
-    const leftButtonDisabled = currentPage <= 1;
-    const rightButtonDisabled = !!totalPages && currentPage === totalPages || disableNextButton;
     const onPrevClick = React.useCallback((e) => {
       if (leftButtonDisabled) {
         return;
@@ -37093,14 +37085,15 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     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,
@@ -37113,26 +37106,53 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     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};
       }
@@ -41112,10 +41132,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
                 "default": "#f6f7fa",
                 hover: "#ffffff",
                 active: "#ffffff",
-                muted: "#696e79"
+                muted: "#696e79",
+                disabled: "#a0a0a0"
               },
               icon: {
-                "default": "#e4e2e9"
+                "default": "#e4e2e9",
+                disabled: "#a0a0a0"
               }
             },
             background: {
@@ -41186,13 +41208,6 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
               }
             }
           },
-          title: {
-            color: {
-              "default": "#696e79",
-              hover: "#696e79",
-              active: "#696e79"
-            }
-          },
           subItem: {
             color: {
               text: {
@@ -41207,6 +41222,13 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
               }
             }
           },
+          title: {
+            color: {
+              "default": "#696e79",
+              hover: "#696e79",
+              active: "#696e79"
+            }
+          },
           dragControl: {
             separator: {
               color: {
@@ -42425,10 +42447,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
                 "default": "#ffffff",
                 hover: "#ffffff",
                 active: "#ffffff",
-                muted: "#b3b6bd"
+                muted: "#b3b6bd",
+                disabled: "#808080"
               },
               icon: {
-                "default": "#b3b6bd"
+                "default": "#b3b6bd",
+                disabled: "#808080"
               }
             }
           },
@@ -42443,11 +42467,13 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             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)"
               }
@@ -42483,23 +42509,19 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
                 "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"
@@ -42511,6 +42533,13 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
               }
             }
           },
+          title: {
+            color: {
+              "default": "#b3b6bd",
+              hover: "#b3b6bd",
+              active: "#b3b6bd"
+            }
+          },
           dragControl: {
             separator: {
               color: {
@@ -43884,10 +43913,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
                 "default": "#161517",
                 hover: "#161517",
                 active: "#161517",
-                muted: "#696e79"
+                muted: "#696e79",
+                disabled: "#a0a0a0"
               },
               icon: {
-                "default": "#696e79"
+                "default": "#696e79",
+                disabled: "#a0a0a0"
               }
             }
           },
@@ -43902,13 +43933,19 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             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"
               }
             }
           },
@@ -43942,23 +43979,18 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
                 "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"
@@ -43970,6 +44002,13 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
               }
             }
           },
+          title: {
+            color: {
+              "default": "#696e79",
+              hover: "#696e79",
+              active: "#696e79"
+            }
+          },
           dragControl: {
             separator: {
               color: {
@@ -46258,10 +46297,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
                 "default": "#161517",
                 hover: "#161517",
                 active: "#161517",
-                muted: "#696e79"
+                muted: "#696e79",
+                disabled: "#a0a0a0"
               },
               icon: {
-                "default": "#696e79"
+                "default": "#696e79",
+                disabled: "#a0a0a0"
               }
             }
           },
@@ -46276,13 +46317,19 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             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"
               }
             }
           },
@@ -46316,23 +46363,19 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
                 "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"
@@ -46344,6 +46387,13 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
               }
             }
           },
+          title: {
+            color: {
+              "default": "#696e79",
+              hover: "#696e79",
+              active: "#696e79"
+            }
+          },
           dragControl: {
             separator: {
               color: {

package/dist/components/SidebarNavigationItem/SidebarNavigationItem.d.ts

@@ -3,6 +3,7 @@ import { HorizontalDirection, IconName } from '../../components';
 export interface SidebarNavigationItemProps extends HTMLAttributes<HTMLDivElement> {
     label: ReactNode;
     selected?: boolean;
+    disabled?: boolean;
     level?: number;
     icon?: IconName;
     iconDir?: HorizontalDirection;

package/dist/styles/types.d.ts

@@ -1798,9 +1798,11 @@ export interface Theme {
                                 "hover": string;
                                 "active": string;
                                 "muted": string;
+                                "disabled": string;
                             };
                             "icon": {
                                 "default": string;
+                                "disabled": string;
                             };
                         };
                     };
@@ -1815,14 +1817,20 @@ export interface Theme {
                         "color": {
                             "text": {
                                 "default": string;
+                                "disabled": string;
                                 "hover": string;
                                 "active": string;
                             };
                             "background": {
                                 "default": string;
+                                "disabled": string;
                                 "hover": string;
                                 "active": string;
                             };
+                            "icon": {
+                                "default": string;
+                                "disabled": string;
+                            };
                         };
                     };
                     "dragControl": {
@@ -1856,22 +1864,18 @@ export interface Theme {
                                 "hover": string;
                                 "active": string;
                                 "muted": string;
+                                "disabled": string;
                             };
                             "icon": {
                                 "default": string;
+                                "disabled": string;
                             };
                         };
                     };
-                    "title": {
-                        "color": {
-                            "default": string;
-                            "hover": string;
-                            "active": string;
-                        };
-                    };
                     "subItem": {
                         "color": {
                             "text": {
+                                "disabled": string;
                                 "default": string;
                                 "hover": string;
                                 "active": string;
@@ -1883,6 +1887,13 @@ export interface Theme {
                             };
                         };
                     };
+                    "title": {
+                        "color": {
+                            "default": string;
+                            "hover": string;
+                            "active": string;
+                        };
+                    };
                     "dragControl": {
                         "separator": {
                             "color": {

package/dist/styles/variables.classic.json.d.ts

@@ -461,10 +461,12 @@ declare const _default: {
                 "default": "#f6f7fa",
                 "hover": "#ffffff",
                 "active": "#ffffff",
-                "muted": "#696e79"
+                "muted": "#696e79",
+                "disabled": "#a0a0a0"
               },
               "icon": {
-                "default": "#e4e2e9"
+                "default": "#e4e2e9",
+                "disabled": "#a0a0a0"
               }
             },
             "background": {
@@ -535,13 +537,6 @@ declare const _default: {
               }
             }
           },
-          "title": {
-            "color": {
-              "default": "#696e79",
-              "hover": "#696e79",
-              "active": "#696e79"
-            }
-          },
           "subItem": {
             "color": {
               "text": {
@@ -556,6 +551,13 @@ declare const _default: {
               }
             }
           },
+          "title": {
+            "color": {
+              "default": "#696e79",
+              "hover": "#696e79",
+              "active": "#696e79"
+            }
+          },
           "dragControl": {
             "separator": {
               "color": {

package/dist/styles/variables.dark.json.d.ts

@@ -883,10 +883,12 @@ declare const _default: {
                 "default": "#ffffff",
                 "hover": "#ffffff",
                 "active": "#ffffff",
-                "muted": "#b3b6bd"
+                "muted": "#b3b6bd",
+                "disabled": "#808080"
               },
               "icon": {
-                "default": "#b3b6bd"
+                "default": "#b3b6bd",
+                "disabled": "#808080"
               }
             }
           },
@@ -901,11 +903,13 @@ declare const _default: {
             "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)"
               }
@@ -941,23 +945,19 @@ declare const _default: {
                 "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"
@@ -969,6 +969,13 @@ declare const _default: {
               }
             }
           },
+          "title": {
+            "color": {
+              "default": "#b3b6bd",
+              "hover": "#b3b6bd",
+              "active": "#b3b6bd"
+            }
+          },
           "dragControl": {
             "separator": {
               "color": {

package/dist/styles/variables.json.d.ts

@@ -1797,10 +1797,12 @@ declare const _default: {
                 "default": "#161517",
                 "hover": "#161517",
                 "active": "#161517",
-                "muted": "#696e79"
+                "muted": "#696e79",
+                "disabled": "#a0a0a0"
               },
               "icon": {
-                "default": "#696e79"
+                "default": "#696e79",
+                "disabled": "#a0a0a0"
               }
             }
           },
@@ -1815,13 +1817,19 @@ declare const _default: {
             "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"
               }
             }
           },
@@ -1855,23 +1863,19 @@ declare const _default: {
                 "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"
@@ -1883,6 +1887,13 @@ declare const _default: {
               }
             }
           },
+          "title": {
+            "color": {
+              "default": "#696e79",
+              "hover": "#696e79",
+              "active": "#696e79"
+            }
+          },
           "dragControl": {
             "separator": {
               "color": {

package/dist/styles/variables.light.json.d.ts

@@ -879,10 +879,12 @@ declare const _default: {
                 "default": "#161517",
                 "hover": "#161517",
                 "active": "#161517",
-                "muted": "#696e79"
+                "muted": "#696e79",
+                "disabled": "#a0a0a0"
               },
               "icon": {
-                "default": "#696e79"
+                "default": "#696e79",
+                "disabled": "#a0a0a0"
               }
             }
           },
@@ -897,13 +899,19 @@ declare const _default: {
             "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"
               }
             }
           },
@@ -937,23 +945,18 @@ declare const _default: {
                 "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"
@@ -965,6 +968,13 @@ declare const _default: {
               }
             }
           },
+          "title": {
+            "color": {
+              "default": "#696e79",
+              "hover": "#696e79",
+              "active": "#696e79"
+            }
+          },
           "dragControl": {
             "separator": {
               "color": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.133",
+  "version": "0.0.134",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",