@clickhouse/click-ui 0.0.197 → 0.0.198

package/dist/click-ui.es.js

@@ -2643,7 +2643,9 @@ const FormFieldLabel = styled.label.withConfig({
     ${disabled ? `
     color: ${theme2.click.field.color.genericLabel.disabled};
     font: ${theme2.click.field.typography.genericLabel.disabled};
+    cursor: not-allowed;
     ` : `
+    cursor: pointer;
     color: ${theme2.click.field.color.genericLabel.default};
     font: ${theme2.click.field.typography.genericLabel.default};
     &:hover {
@@ -7920,11 +7922,9 @@ DropdownTrigger.displayName = "DropdownTrigger";
 Dropdown.Trigger = DropdownTrigger;
 const DropdownMenuContent = styled(GenericMenuPanel).withConfig({
   componentId: "sc-18bhwbw-2"
-})(["min-width:", ";flex-direction:column;z-index:1;overflow-y:auto;max-height:calc( (var(--radix-", "-content-available-height) - 100px) );"], ({
+})(["min-width:", ";flex-direction:column;z-index:1;overflow-y:auto;"], ({
   theme: theme2
-}) => theme2.click.genericMenu.item.size.minWidth, ({
-  $type
-}) => $type);
+}) => theme2.click.genericMenu.item.size.minWidth);
 const DropdownContent$1 = ({
   sub,
   children,
@@ -7932,7 +7932,7 @@ const DropdownContent$1 = ({
   ...props
 }) => {
   const ContentElement = sub ? $d08ef79370b62062$export$6d4de93b380beddf : $d08ef79370b62062$export$7c6e2c02157bb7d2;
-  return /* @__PURE__ */ jsx($d08ef79370b62062$export$602eac185826482c, { children: /* @__PURE__ */ jsxs(DropdownMenuContent, { $type: "dropdown-menu", $showArrow: showArrow, as: ContentElement, sideOffset: 4, loop: true, ...props, children: [
+  return /* @__PURE__ */ jsx($d08ef79370b62062$export$602eac185826482c, { children: /* @__PURE__ */ jsxs(DropdownMenuContent, { $type: "dropdown-menu", $showArrow: showArrow, as: ContentElement, sideOffset: 4, loop: true, collisionPadding: 100, ...props, children: [
     showArrow && /* @__PURE__ */ jsx(Arrow$1, { asChild: true, as: $d08ef79370b62062$export$21b07c8f274aebd5, width: 20, height: 10, children: /* @__PURE__ */ jsx(PopoverArrow, {}) }),
     children
   ] }) });
@@ -9635,12 +9635,13 @@ const Wrapper$a = styled.div.withConfig({
   theme: theme2,
   $color,
   $isSelected,
+  $isSelectable,
   $disabled
 }) => `
     background: ${theme2.click.card.horizontal[$color].color.background.default};
     color: ${theme2.click.card.horizontal[$color].color.title.default};
     border-radius: ${theme2.click.card.horizontal.radii.all};
-    border: 1px solid ${theme2.click.card.horizontal[$color].color.stroke[$isSelected ? "active" : "default"]};
+    border: 1px solid ${theme2.click.card.horizontal[$color].color.stroke[$isSelectable ? $isSelected ? "active" : "hover" : "default"]};
     padding: ${theme2.click.card.horizontal.space.y} ${theme2.click.card.horizontal.space.x};
     gap: ${theme2.click.card.horizontal.space.gap};
     font: ${theme2.click.card.horizontal.typography.title.default};
@@ -9649,24 +9650,24 @@ const Wrapper$a = styled.div.withConfig({
       font: ${theme2.click.card.horizontal.typography.description.default};
     }
     &:hover{
-      background-color: ${theme2.click.card.horizontal[$color].color.background.hover};
-      color: ${theme2.click.card.horizontal[$color].color.title.hover};
-      border: 1px solid ${theme2.click.card.horizontal[$color].color.stroke[$isSelected ? "active" : "hover"]};
-      cursor: pointer;
+      background-color: ${theme2.click.card.horizontal[$color].color.background[$isSelectable ? "hover" : "default"]};
+      color: ${theme2.click.card.horizontal[$color].color.title[$isSelectable ? "hover" : "default"]};
+      border: 1px solid ${theme2.click.card.horizontal[$color].color.stroke[$isSelectable ? $isSelected ? "active" : "default" : "default"]};
+      cursor: ${$isSelectable ? "pointer" : "default"};
       font: ${theme2.click.card.horizontal.typography.title.hover};
       ${Description} {
-        color: ${theme2.click.card.horizontal[$color].color.description.hover};
-        font: ${theme2.click.card.horizontal.typography.description.hover};
+        color: ${theme2.click.card.horizontal[$color].color.description[$isSelectable ? "hover" : "default"]};
+        font: ${theme2.click.card.horizontal.typography.description[$isSelectable ? "hover" : "default"]};
       }
     }
 
     &:active, &:focus, &:focus-within {
-      background-color: ${theme2.click.card.horizontal[$color].color.background.active};
-      color: ${theme2.click.card.horizontal[$color].color.title.active};
-      border: 1px solid ${theme2.click.card.horizontal[$color].color.stroke.active};
+      background-color: ${theme2.click.card.horizontal[$color].color.background[$isSelectable ? "active" : "default"]};
+      color: ${theme2.click.card.horizontal[$color].color.title[$isSelectable ? "active" : "default"]};
+      border: 1px solid ${theme2.click.card.horizontal[$color].color.stroke[$isSelectable ? "active" : "default"]};
       ${Description} {
-        color: ${theme2.click.card.horizontal[$color].color.description.active};
-        font: ${theme2.click.card.horizontal.typography.description.active};
+        color: ${theme2.click.card.horizontal[$color].color.description[$isSelectable ? "active" : "default"]};
+        font: ${theme2.click.card.horizontal.typography.description[$isSelectable ? "active" : "default"]};
       }
     }
     ${$disabled ? `
@@ -9698,32 +9699,56 @@ const CardIcon$1 = styled(SvgImage).withConfig({
   `);
 const ContentWrapper = styled.div.withConfig({
   componentId: "sc-1qnbjoa-4"
-})(["display:flex;flex-direction:column;width:100%;"]);
+})(["display:flex;flex-direction:row;width:100%;gap:", ";@media (max-width:", "){flex-direction:column;}"], ({
+  theme: theme2
+}) => theme2.click.card.horizontal.space.gap, ({
+  theme: theme2
+}) => theme2.breakpoint.sizes.md);
+const IconTextContentWrapper = styled.div.withConfig({
+  componentId: "sc-1qnbjoa-5"
+})(["display:flex;flex-direction:row;align-items:center;width:100%;gap:", ";"], ({
+  theme: theme2
+}) => theme2.click.card.horizontal.space.gap);
 const CardHorizontal = ({
   title,
   icon,
   description,
   disabled = false,
+  infoText,
+  infoUrl,
   isSelected,
+  isSelectable = infoText ? false : true,
   children,
   color = "default",
   badgeText,
   badgeState,
   badgeIcon,
   badgeIconDir,
+  onButtonClick,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(Wrapper$a, { $disabled: disabled, $isSelected: isSelected, $color: color, tabIndex: 0, ...props, children: [
-    icon && /* @__PURE__ */ jsx(CardIcon$1, { name: icon, "aria-hidden": true }),
-    /* @__PURE__ */ jsxs(ContentWrapper, { children: [
-      title && /* @__PURE__ */ jsxs(Header$4, { as: Container, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
-        /* @__PURE__ */ jsx(Container, { orientation: "horizontal", gap: "xs", isResponsive: false, fillWidth: false, grow: "1", children: title }),
-        badgeText && /* @__PURE__ */ jsx(Container, { isResponsive: false, justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-badge", children: /* @__PURE__ */ jsx(Badge, { text: badgeText, size: "md", state: badgeState, icon: badgeIcon, iconDir: badgeIconDir }) })
-      ] }),
-      description && /* @__PURE__ */ jsx(Description, { children: description }),
-      children && /* @__PURE__ */ jsx(Description, { children })
-    ] })
-  ] });
+  const handleClick = (e) => {
+    if (typeof onButtonClick === "function") {
+      onButtonClick(e);
+    }
+    if (infoUrl && infoUrl.length > 0) {
+      window.open(infoUrl, "_blank");
+    }
+  };
+  return /* @__PURE__ */ jsx(Wrapper$a, { $disabled: disabled, $isSelected: isSelected, $isSelectable: isSelectable, $color: color, tabIndex: 0, onClick: handleClick, ...props, children: /* @__PURE__ */ jsxs(ContentWrapper, { children: [
+    /* @__PURE__ */ jsxs(IconTextContentWrapper, { children: [
+      icon && /* @__PURE__ */ jsx(CardIcon$1, { name: icon, "aria-hidden": true }),
+      /* @__PURE__ */ jsxs(Container, { padding: "none", orientation: "vertical", children: [
+        title && /* @__PURE__ */ jsxs(Header$4, { as: Container, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
+          /* @__PURE__ */ jsx(Container, { orientation: "horizontal", gap: "xs", isResponsive: false, fillWidth: false, grow: "1", children: title }),
+          badgeText && /* @__PURE__ */ jsx(Container, { isResponsive: false, justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-badge", children: /* @__PURE__ */ jsx(Badge, { text: badgeText, size: "md", state: badgeState, icon: badgeIcon, iconDir: badgeIconDir }) })
+        ] }),
+        description && /* @__PURE__ */ jsx(Description, { children: description }),
+        children && /* @__PURE__ */ jsx(Description, { children })
+      ] })
+    ] }),
+    infoText && /* @__PURE__ */ jsx(Container, { justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-button", children: /* @__PURE__ */ jsx(Button, { label: infoText, onClick: handleClick, fillWidth: true }) })
+  ] }) });
 };
 const Title$2 = forwardRef(({
   align,
@@ -18107,9 +18132,12 @@ const StyledCell = styled.div.withConfig({
   $selectionType,
   $height,
   $type = "body",
-  $showBorder
+  $showBorder,
+  $rowAutoHeight
 }) => `
-    height: ${$height}px;
+    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
+    min-height: ${$rowAutoHeight ? "auto" : ""};
+    overflow-y: ${$rowAutoHeight ? "auto" : ""};
     background: ${theme2.click.grid[$type].cell.color.background[$selectionType]};
     color: ${$type === "header" ? theme2.click.grid.header.cell.color.title[$selectionType] : theme2.click.grid.body.cell.color.text[$selectionType]};
     font: ${theme2.click.grid.cell.text.default};
@@ -18130,6 +18158,7 @@ const StyledCell = styled.div.withConfig({
     ${$isLastColumn ? `
         border-right-color: ${theme2.click.grid[$type].cell.color.stroke[$isFocused ? "selectDirect" : $selectionType]};
     ` : "border-right: none;"}
+    ${$rowAutoHeight && "border: none;"}
   `, ({
   theme: theme2,
   $isLastRow,
@@ -18137,8 +18166,9 @@ const StyledCell = styled.div.withConfig({
   $selectionType,
   $type = "body",
   $isSelectedTop,
-  $isSelectedLeft
-}) => $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) ? `
+  $isSelectedLeft,
+  $rowAutoHeight
+}) => $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) || $rowAutoHeight ? `
           &::before {
             content: "";
             position: absolute;
@@ -18150,6 +18180,7 @@ const StyledCell = styled.div.withConfig({
             ${$isSelectedLeft ? `border-left: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
             ${$selectionType === "selectDirect" && $isLastRow ? `border-bottom: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
             ${$selectionType === "selectDirect" && $isLastColumn ? `border-right: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
+            ${$rowAutoHeight && "border: none;"}
           }
         ` : "");
 const RowNumberColumnContainer = styled.div.withConfig({
@@ -18169,10 +18200,11 @@ const RowNumberCell = styled.div.withConfig({
   componentId: "sc-7gbi4d-1"
 })(["position:absolute;left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;", ""], ({
   $height,
-  $rowNumber
+  $rowNumber,
+  $rowAutoHeight
 }) => `
     top: ${$height * $rowNumber}px;
-    height: ${$height}px;
+    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
   `);
 const RowNumber = ({
   rowIndex,
@@ -18181,7 +18213,8 @@ const RowNumber = ({
   isLastRow,
   isFirstRow,
   showBorder,
-  rowStart
+  rowStart,
+  rowAutoHeight
 }) => {
   const currentRowIndex = rowIndex + rowStart;
   const selectionType = getSelectionType({
@@ -18194,7 +18227,7 @@ const RowNumber = ({
     type: "row"
   });
   const isSelectedTop = (topSelectionType === "selectDirect" || isSelected) && topSelectionType !== selectionType;
-  return /* @__PURE__ */ jsx(RowNumberCell, { $rowNumber: rowIndex, $height: rowHeight, children: /* @__PURE__ */ jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $isFirstColumn: true, $type: "header", $isFirstRow: isFirstRow, $isFocused: false, $isLastRow: isLastRow, $isSelectedLeft: isSelected, $isSelectedTop: isSelectedTop, "data-selected": isSelected, "data-grid-row": currentRowIndex, "data-grid-column": -1, "data-testid": `header-cell-${currentRowIndex}-x`, $showBorder: showBorder, "data-align": "right", children: currentRowIndex }) });
+  return /* @__PURE__ */ jsx(RowNumberCell, { $rowNumber: rowIndex, $height: rowHeight, $rowAutoHeight: rowAutoHeight, children: /* @__PURE__ */ jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $isFirstColumn: true, $type: "header", $isFirstRow: isFirstRow, $isFocused: false, $isLastRow: isLastRow, $isSelectedLeft: isSelected, $isSelectedTop: isSelectedTop, $rowAutoHeight: rowAutoHeight, "data-selected": isSelected, "data-grid-row": currentRowIndex, "data-grid-column": -1, "data-testid": `header-cell-${currentRowIndex}-x`, $showBorder: showBorder, "data-align": "right", children: currentRowIndex }) });
 };
 const RowNumberColumn = ({
   minRow,
@@ -18207,11 +18240,12 @@ const RowNumberColumn = ({
   showHeader,
   scrolledHorizontal,
   rowStart = 0,
-  showBorder
+  showBorder,
+  rowAutoHeight
 }) => {
-  return /* @__PURE__ */ jsx(RowNumberColumnContainer, { $height: headerHeight, $width: rowWidth, $scrolledHorizontal: scrolledHorizontal, children: Array.from({
+  return /* @__PURE__ */ jsx(RowNumberColumnContainer, { $height: headerHeight, $width: rowWidth, $scrolledHorizontal: scrolledHorizontal, $rowAutoHeight: rowAutoHeight, children: Array.from({
     length: maxRow - minRow + 1
-  }, (_, index2) => minRow + index2).map((rowIndex) => /* @__PURE__ */ jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, isFirstRow: !showHeader && rowIndex === 0, showBorder, rowStart }, `row-number-${rowIndex}`)) });
+  }, (_, index2) => minRow + index2).map((rowIndex) => /* @__PURE__ */ jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, isFirstRow: !showHeader && rowIndex === 0, showBorder, rowStart, rowAutoHeight }, `row-number-${rowIndex}`)) });
 };
 function isObject$a(value) {
   var type = typeof value;
@@ -18593,7 +18627,7 @@ const RowColumnContainer = styled(HeaderCellContainer).withConfig({
 }) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme2.click.grid.header.cell.color.stroke.default};` : "");
 const RowColumn = styled(StyledCell).withConfig({
   componentId: "sc-1oadqc8-4"
-})(["width:100%;text-align:right;"]);
+})(["width:100%;text-align:right;overflow:hidden;"]);
 const Column = ({
   columnIndex,
   cell,
@@ -19022,7 +19056,9 @@ const Cell = memo(({
     showRowNumber,
     showHeader,
     rowHeight,
-    rowStart
+    rowStart,
+    rowAutoHeight,
+    updateRowHeight
   } = data;
   const currentRowIndex = rowIndex + rowStart;
   const {
@@ -19051,7 +19087,19 @@ const Cell = memo(({
   const belowSelectionBorder = (selectionType === "selectDirect" || belowSelection === "selectDirect") && selectionType !== belowSelection;
   const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;
   const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;
-  return /* @__PURE__ */ jsx("div", { style, "data-row": currentRowIndex, "data-column": columnIndex, children: /* @__PURE__ */ jsx(StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, ...props }) });
+  const cellRef = useRef(null);
+  useEffect(() => {
+    if (!rowAutoHeight || !cellRef.current) {
+      return;
+    }
+    const height = cellRef.current.getBoundingClientRect().height;
+    updateRowHeight(rowIndex, height);
+  }, [updateRowHeight, rowIndex, rowAutoHeight]);
+  const styleWithHeight = {
+    ...style,
+    height: "auto"
+  };
+  return /* @__PURE__ */ jsx("div", { style: styleWithHeight, "data-row": currentRowIndex, "data-column": columnIndex, ref: cellRef, children: /* @__PURE__ */ jsx(StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, $rowAutoHeight: rowAutoHeight, ...props }) });
 }, areEqual);
 var reactDomServerLegacy_browser_production_min = {};
 /**
@@ -33256,6 +33304,7 @@ const Grid = forwardRef(({
   onContextMenu: onContextMenuProp,
   forwardedGridRef,
   onItemsRendered: onItemsRenderedProp,
+  rowAutoHeight,
   ...props
 }, forwardedRef) => {
   const [focus, setFocus] = useState(focusProp ?? {
@@ -33337,6 +33386,29 @@ const Grid = forwardRef(({
     }
   }, [onSelectProp]);
   const resizingState = useResizingState();
+  const [rowHeights, setRowHeights] = useState({});
+  const getRowHeight2 = useCallback((index2) => {
+    if (rowAutoHeight && rowHeights[index2] !== void 0) {
+      return rowHeights[index2] + rowHeight;
+    }
+    return rowHeight;
+  }, [rowHeight, rowAutoHeight, rowHeights]);
+  const updateRowHeight = useCallback((rowIndex, height) => {
+    if (!rowAutoHeight) {
+      return;
+    }
+    setRowHeights((prevRowHeights) => {
+      if (height > (prevRowHeights[rowIndex] || 0) && gridRef.current) {
+        const newRowHeights = {
+          ...prevRowHeights,
+          [rowIndex]: height
+        };
+        gridRef.current.resetAfterRowIndex(rowIndex);
+        return newRowHeights;
+      }
+      return prevRowHeights;
+    });
+  }, [rowAutoHeight, gridRef]);
   const onFocusChange = useCallback((row, column) => {
     setFocus((focus2) => ({
       row: row ?? (focusProp == null ? void 0 : focusProp.row) ?? focus2.row,
@@ -33462,7 +33534,10 @@ const Grid = forwardRef(({
     rowHeight,
     headerHeight,
     rowNumberWidth,
-    rowStart
+    rowStart,
+    rowAutoHeight,
+    updateRowHeight,
+    getRowHeight: getRowHeight2
   };
   const InnerElementType = forwardRef(({
     children,
@@ -33471,7 +33546,7 @@ const Grid = forwardRef(({
     const [minRow, maxRow, minColumn, maxColumn] = getRenderedCursor(children);
     return /* @__PURE__ */ jsxs(GridContainer, { ...containerProps, className: `sticky-grid__container grid-outer ${props.className ?? ""}`, children: [
       /* @__PURE__ */ jsx(GridDataContainer, { $top: showHeader ? headerHeight : 0, $left: showRowNumber ? rowNumberWidth : 0, ref, children }),
-      showRowNumber && /* @__PURE__ */ jsx(RowNumberColumn, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder }),
+      showRowNumber && /* @__PURE__ */ jsx(RowNumberColumn, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder, rowAutoHeight }),
       showHeader && /* @__PURE__ */ jsx(Header, { scrolledVertical, scrolledHorizontal, showRowNumber, minColumn, maxColumn, height: headerHeight, getColumnWidth: columnWidth, cell, rowNumberWidth, getSelectionType, columnCount, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState })
     ] });
   });
@@ -33724,11 +33799,16 @@ const Grid = forwardRef(({
     const width = columnWidth(args.columnIndex);
     return /* @__PURE__ */ jsx(Cell, { ...args, width });
   };
+  useEffect(() => {
+    if (gridRef.current) {
+      gridRef.current.resetAfterRowIndex(0);
+    }
+  }, [rowCount, columnCount]);
   return /* @__PURE__ */ jsxs(ContextMenu, { modal: false, onOpenChange: setContextMenuOpen, children: [
     /* @__PURE__ */ jsx(ContextMenuTrigger, { as: ContextMenu.Trigger, ref: mergeRefs([forwardedRef, containerRef]), tabIndex: 0, onMouseDown, onMouseMove, onKeyDown, onPointerDown, onPointerUp, onPointerLeave: setPointerCapture, onPointerEnter: setPointerCapture, onContextMenu, $rounded: rounded, $height: autoHeight ? rowCount * rowHeight + (showHeader ? headerHeight : 0) + elementBorderRef.current.scrollBarHeight : void 0, $showBorder: showBorder, children: /* @__PURE__ */ jsx(AutoSizer, { onResize, children: ({
       height,
       width
-    }) => /* @__PURE__ */ jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: () => rowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),
+    }) => /* @__PURE__ */ jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: getRowHeight2, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),
     /* @__PURE__ */ jsx(ContextMenu.Content, { children: menuOptions.map((option2, index2) => /* @__PURE__ */ jsx(ContextMenu.Item, { onSelect: option2.onSelect, children: option2.label }, `grid-${index2}`)) })
   ] });
 });
@@ -39393,7 +39473,8 @@ const SwitchRoot = styled($6be4966fd9bbc698$export$be92b6f5f03c0fe9).withConfig(
     border: vars.border,
     borderRadius: props.theme.click.switch.radii.all,
     position: "relative",
-    padding: 0
+    padding: 0,
+    cursor: props.disabled ? "not-allowed" : "pointer"
   };
 });
 const SwitchThumb = styled($6be4966fd9bbc698$export$6521433ed15a34db).withConfig({
@@ -44714,7 +44795,8 @@ const click$2 = {
           "default": "#323232"
         },
         text: {
-          "default": "#ffffff"
+          "default": "#ffffff",
+          disabled: "#808080"
         },
         link: {
           "default": "#FAFF69"
@@ -46485,7 +46567,8 @@ const click$1 = {
           "default": "#e6e7e9"
         },
         text: {
-          "default": "#161517"
+          "default": "#161517",
+          disabled: "#a0a0a0"
         },
         link: {
           "default": "#437EEF"
@@ -49349,7 +49432,8 @@ const click = {
           "default": "#e6e7e9"
         },
         text: {
-          "default": "#161517"
+          "default": "#161517",
+          disabled: "#a0a0a0"
         },
         link: {
           "default": "#437EEF"

package/dist/click-ui.umd.js

@@ -2658,7 +2658,9 @@ var __publicField = (obj, key, value) => {
     ${disabled ? `
     color: ${theme2.click.field.color.genericLabel.disabled};
     font: ${theme2.click.field.typography.genericLabel.disabled};
+    cursor: not-allowed;
     ` : `
+    cursor: pointer;
     color: ${theme2.click.field.color.genericLabel.default};
     font: ${theme2.click.field.typography.genericLabel.default};
     &:hover {
@@ -7935,11 +7937,9 @@ var __publicField = (obj, key, value) => {
   Dropdown.Trigger = DropdownTrigger;
   const DropdownMenuContent = styledComponents.styled(GenericMenuPanel).withConfig({
     componentId: "sc-18bhwbw-2"
-  })(["min-width:", ";flex-direction:column;z-index:1;overflow-y:auto;max-height:calc( (var(--radix-", "-content-available-height) - 100px) );"], ({
+  })(["min-width:", ";flex-direction:column;z-index:1;overflow-y:auto;"], ({
     theme: theme2
-  }) => theme2.click.genericMenu.item.size.minWidth, ({
-    $type
-  }) => $type);
+  }) => theme2.click.genericMenu.item.size.minWidth);
   const DropdownContent$1 = ({
     sub,
     children,
@@ -7947,7 +7947,7 @@ var __publicField = (obj, key, value) => {
     ...props
   }) => {
     const ContentElement = sub ? $d08ef79370b62062$export$6d4de93b380beddf : $d08ef79370b62062$export$7c6e2c02157bb7d2;
-    return /* @__PURE__ */ jsxRuntime.jsx($d08ef79370b62062$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { $type: "dropdown-menu", $showArrow: showArrow, as: ContentElement, sideOffset: 4, loop: true, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx($d08ef79370b62062$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { $type: "dropdown-menu", $showArrow: showArrow, as: ContentElement, sideOffset: 4, loop: true, collisionPadding: 100, ...props, children: [
       showArrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow$1, { asChild: true, as: $d08ef79370b62062$export$21b07c8f274aebd5, width: 20, height: 10, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow, {}) }),
       children
     ] }) });
@@ -9650,12 +9650,13 @@ var __publicField = (obj, key, value) => {
     theme: theme2,
     $color,
     $isSelected,
+    $isSelectable,
     $disabled
   }) => `
     background: ${theme2.click.card.horizontal[$color].color.background.default};
     color: ${theme2.click.card.horizontal[$color].color.title.default};
     border-radius: ${theme2.click.card.horizontal.radii.all};
-    border: 1px solid ${theme2.click.card.horizontal[$color].color.stroke[$isSelected ? "active" : "default"]};
+    border: 1px solid ${theme2.click.card.horizontal[$color].color.stroke[$isSelectable ? $isSelected ? "active" : "hover" : "default"]};
     padding: ${theme2.click.card.horizontal.space.y} ${theme2.click.card.horizontal.space.x};
     gap: ${theme2.click.card.horizontal.space.gap};
     font: ${theme2.click.card.horizontal.typography.title.default};
@@ -9664,24 +9665,24 @@ var __publicField = (obj, key, value) => {
       font: ${theme2.click.card.horizontal.typography.description.default};
     }
     &:hover{
-      background-color: ${theme2.click.card.horizontal[$color].color.background.hover};
-      color: ${theme2.click.card.horizontal[$color].color.title.hover};
-      border: 1px solid ${theme2.click.card.horizontal[$color].color.stroke[$isSelected ? "active" : "hover"]};
-      cursor: pointer;
+      background-color: ${theme2.click.card.horizontal[$color].color.background[$isSelectable ? "hover" : "default"]};
+      color: ${theme2.click.card.horizontal[$color].color.title[$isSelectable ? "hover" : "default"]};
+      border: 1px solid ${theme2.click.card.horizontal[$color].color.stroke[$isSelectable ? $isSelected ? "active" : "default" : "default"]};
+      cursor: ${$isSelectable ? "pointer" : "default"};
       font: ${theme2.click.card.horizontal.typography.title.hover};
       ${Description} {
-        color: ${theme2.click.card.horizontal[$color].color.description.hover};
-        font: ${theme2.click.card.horizontal.typography.description.hover};
+        color: ${theme2.click.card.horizontal[$color].color.description[$isSelectable ? "hover" : "default"]};
+        font: ${theme2.click.card.horizontal.typography.description[$isSelectable ? "hover" : "default"]};
       }
     }
 
     &:active, &:focus, &:focus-within {
-      background-color: ${theme2.click.card.horizontal[$color].color.background.active};
-      color: ${theme2.click.card.horizontal[$color].color.title.active};
-      border: 1px solid ${theme2.click.card.horizontal[$color].color.stroke.active};
+      background-color: ${theme2.click.card.horizontal[$color].color.background[$isSelectable ? "active" : "default"]};
+      color: ${theme2.click.card.horizontal[$color].color.title[$isSelectable ? "active" : "default"]};
+      border: 1px solid ${theme2.click.card.horizontal[$color].color.stroke[$isSelectable ? "active" : "default"]};
       ${Description} {
-        color: ${theme2.click.card.horizontal[$color].color.description.active};
-        font: ${theme2.click.card.horizontal.typography.description.active};
+        color: ${theme2.click.card.horizontal[$color].color.description[$isSelectable ? "active" : "default"]};
+        font: ${theme2.click.card.horizontal.typography.description[$isSelectable ? "active" : "default"]};
       }
     }
     ${$disabled ? `
@@ -9713,32 +9714,56 @@ var __publicField = (obj, key, value) => {
   `);
   const ContentWrapper = styledComponents.styled.div.withConfig({
     componentId: "sc-1qnbjoa-4"
-  })(["display:flex;flex-direction:column;width:100%;"]);
+  })(["display:flex;flex-direction:row;width:100%;gap:", ";@media (max-width:", "){flex-direction:column;}"], ({
+    theme: theme2
+  }) => theme2.click.card.horizontal.space.gap, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.md);
+  const IconTextContentWrapper = styledComponents.styled.div.withConfig({
+    componentId: "sc-1qnbjoa-5"
+  })(["display:flex;flex-direction:row;align-items:center;width:100%;gap:", ";"], ({
+    theme: theme2
+  }) => theme2.click.card.horizontal.space.gap);
   const CardHorizontal = ({
     title,
     icon,
     description,
     disabled = false,
+    infoText,
+    infoUrl,
     isSelected,
+    isSelectable = infoText ? false : true,
     children,
     color = "default",
     badgeText,
     badgeState,
     badgeIcon,
     badgeIconDir,
+    onButtonClick,
     ...props
   }) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$a, { $disabled: disabled, $isSelected: isSelected, $color: color, tabIndex: 0, ...props, children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx(CardIcon$1, { name: icon, "aria-hidden": true }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ContentWrapper, { children: [
-        title && /* @__PURE__ */ jsxRuntime.jsxs(Header$4, { as: Container, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Container, { orientation: "horizontal", gap: "xs", isResponsive: false, fillWidth: false, grow: "1", children: title }),
-          badgeText && /* @__PURE__ */ jsxRuntime.jsx(Container, { isResponsive: false, justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { text: badgeText, size: "md", state: badgeState, icon: badgeIcon, iconDir: badgeIconDir }) })
-        ] }),
-        description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description }),
-        children && /* @__PURE__ */ jsxRuntime.jsx(Description, { children })
-      ] })
-    ] });
+    const handleClick = (e) => {
+      if (typeof onButtonClick === "function") {
+        onButtonClick(e);
+      }
+      if (infoUrl && infoUrl.length > 0) {
+        window.open(infoUrl, "_blank");
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$a, { $disabled: disabled, $isSelected: isSelected, $isSelectable: isSelectable, $color: color, tabIndex: 0, onClick: handleClick, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(ContentWrapper, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(IconTextContentWrapper, { children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(CardIcon$1, { name: icon, "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Container, { padding: "none", orientation: "vertical", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsxs(Header$4, { as: Container, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Container, { orientation: "horizontal", gap: "xs", isResponsive: false, fillWidth: false, grow: "1", children: title }),
+            badgeText && /* @__PURE__ */ jsxRuntime.jsx(Container, { isResponsive: false, justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { text: badgeText, size: "md", state: badgeState, icon: badgeIcon, iconDir: badgeIconDir }) })
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description }),
+          children && /* @__PURE__ */ jsxRuntime.jsx(Description, { children })
+        ] })
+      ] }),
+      infoText && /* @__PURE__ */ jsxRuntime.jsx(Container, { justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-button", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { label: infoText, onClick: handleClick, fillWidth: true }) })
+    ] }) });
   };
   const Title$2 = React.forwardRef(({
     align,
@@ -18122,9 +18147,12 @@ var __publicField = (obj, key, value) => {
     $selectionType,
     $height,
     $type = "body",
-    $showBorder
+    $showBorder,
+    $rowAutoHeight
   }) => `
-    height: ${$height}px;
+    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
+    min-height: ${$rowAutoHeight ? "auto" : ""};
+    overflow-y: ${$rowAutoHeight ? "auto" : ""};
     background: ${theme2.click.grid[$type].cell.color.background[$selectionType]};
     color: ${$type === "header" ? theme2.click.grid.header.cell.color.title[$selectionType] : theme2.click.grid.body.cell.color.text[$selectionType]};
     font: ${theme2.click.grid.cell.text.default};
@@ -18145,6 +18173,7 @@ var __publicField = (obj, key, value) => {
     ${$isLastColumn ? `
         border-right-color: ${theme2.click.grid[$type].cell.color.stroke[$isFocused ? "selectDirect" : $selectionType]};
     ` : "border-right: none;"}
+    ${$rowAutoHeight && "border: none;"}
   `, ({
     theme: theme2,
     $isLastRow,
@@ -18152,8 +18181,9 @@ var __publicField = (obj, key, value) => {
     $selectionType,
     $type = "body",
     $isSelectedTop,
-    $isSelectedLeft
-  }) => $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) ? `
+    $isSelectedLeft,
+    $rowAutoHeight
+  }) => $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) || $rowAutoHeight ? `
           &::before {
             content: "";
             position: absolute;
@@ -18165,6 +18195,7 @@ var __publicField = (obj, key, value) => {
             ${$isSelectedLeft ? `border-left: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
             ${$selectionType === "selectDirect" && $isLastRow ? `border-bottom: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
             ${$selectionType === "selectDirect" && $isLastColumn ? `border-right: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
+            ${$rowAutoHeight && "border: none;"}
           }
         ` : "");
   const RowNumberColumnContainer = styledComponents.styled.div.withConfig({
@@ -18184,10 +18215,11 @@ var __publicField = (obj, key, value) => {
     componentId: "sc-7gbi4d-1"
   })(["position:absolute;left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;", ""], ({
     $height,
-    $rowNumber
+    $rowNumber,
+    $rowAutoHeight
   }) => `
     top: ${$height * $rowNumber}px;
-    height: ${$height}px;
+    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
   `);
   const RowNumber = ({
     rowIndex,
@@ -18196,7 +18228,8 @@ var __publicField = (obj, key, value) => {
     isLastRow,
     isFirstRow,
     showBorder,
-    rowStart
+    rowStart,
+    rowAutoHeight
   }) => {
     const currentRowIndex = rowIndex + rowStart;
     const selectionType = getSelectionType({
@@ -18209,7 +18242,7 @@ var __publicField = (obj, key, value) => {
       type: "row"
     });
     const isSelectedTop = (topSelectionType === "selectDirect" || isSelected) && topSelectionType !== selectionType;
-    return /* @__PURE__ */ jsxRuntime.jsx(RowNumberCell, { $rowNumber: rowIndex, $height: rowHeight, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $isFirstColumn: true, $type: "header", $isFirstRow: isFirstRow, $isFocused: false, $isLastRow: isLastRow, $isSelectedLeft: isSelected, $isSelectedTop: isSelectedTop, "data-selected": isSelected, "data-grid-row": currentRowIndex, "data-grid-column": -1, "data-testid": `header-cell-${currentRowIndex}-x`, $showBorder: showBorder, "data-align": "right", children: currentRowIndex }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(RowNumberCell, { $rowNumber: rowIndex, $height: rowHeight, $rowAutoHeight: rowAutoHeight, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $isFirstColumn: true, $type: "header", $isFirstRow: isFirstRow, $isFocused: false, $isLastRow: isLastRow, $isSelectedLeft: isSelected, $isSelectedTop: isSelectedTop, $rowAutoHeight: rowAutoHeight, "data-selected": isSelected, "data-grid-row": currentRowIndex, "data-grid-column": -1, "data-testid": `header-cell-${currentRowIndex}-x`, $showBorder: showBorder, "data-align": "right", children: currentRowIndex }) });
   };
   const RowNumberColumn = ({
     minRow,
@@ -18222,11 +18255,12 @@ var __publicField = (obj, key, value) => {
     showHeader,
     scrolledHorizontal,
     rowStart = 0,
-    showBorder
+    showBorder,
+    rowAutoHeight
   }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumnContainer, { $height: headerHeight, $width: rowWidth, $scrolledHorizontal: scrolledHorizontal, children: Array.from({
+    return /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumnContainer, { $height: headerHeight, $width: rowWidth, $scrolledHorizontal: scrolledHorizontal, $rowAutoHeight: rowAutoHeight, children: Array.from({
       length: maxRow - minRow + 1
-    }, (_, index2) => minRow + index2).map((rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, isFirstRow: !showHeader && rowIndex === 0, showBorder, rowStart }, `row-number-${rowIndex}`)) });
+    }, (_, index2) => minRow + index2).map((rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, isFirstRow: !showHeader && rowIndex === 0, showBorder, rowStart, rowAutoHeight }, `row-number-${rowIndex}`)) });
   };
   function isObject$a(value) {
     var type = typeof value;
@@ -18608,7 +18642,7 @@ var __publicField = (obj, key, value) => {
   }) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme2.click.grid.header.cell.color.stroke.default};` : "");
   const RowColumn = styledComponents.styled(StyledCell).withConfig({
     componentId: "sc-1oadqc8-4"
-  })(["width:100%;text-align:right;"]);
+  })(["width:100%;text-align:right;overflow:hidden;"]);
   const Column = ({
     columnIndex,
     cell,
@@ -19037,7 +19071,9 @@ var __publicField = (obj, key, value) => {
       showRowNumber,
       showHeader,
       rowHeight,
-      rowStart
+      rowStart,
+      rowAutoHeight,
+      updateRowHeight
     } = data;
     const currentRowIndex = rowIndex + rowStart;
     const {
@@ -19066,7 +19102,19 @@ var __publicField = (obj, key, value) => {
     const belowSelectionBorder = (selectionType === "selectDirect" || belowSelection === "selectDirect") && selectionType !== belowSelection;
     const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;
     const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style, "data-row": currentRowIndex, "data-column": columnIndex, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, ...props }) });
+    const cellRef = React.useRef(null);
+    React.useEffect(() => {
+      if (!rowAutoHeight || !cellRef.current) {
+        return;
+      }
+      const height = cellRef.current.getBoundingClientRect().height;
+      updateRowHeight(rowIndex, height);
+    }, [updateRowHeight, rowIndex, rowAutoHeight]);
+    const styleWithHeight = {
+      ...style,
+      height: "auto"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styleWithHeight, "data-row": currentRowIndex, "data-column": columnIndex, ref: cellRef, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, $rowAutoHeight: rowAutoHeight, ...props }) });
   }, areEqual);
   var reactDomServerLegacy_browser_production_min = {};
   /**
@@ -33271,6 +33319,7 @@ var __publicField = (obj, key, value) => {
     onContextMenu: onContextMenuProp,
     forwardedGridRef,
     onItemsRendered: onItemsRenderedProp,
+    rowAutoHeight,
     ...props
   }, forwardedRef) => {
     const [focus, setFocus] = React.useState(focusProp ?? {
@@ -33352,6 +33401,29 @@ var __publicField = (obj, key, value) => {
       }
     }, [onSelectProp]);
     const resizingState = useResizingState();
+    const [rowHeights, setRowHeights] = React.useState({});
+    const getRowHeight = React.useCallback((index2) => {
+      if (rowAutoHeight && rowHeights[index2] !== void 0) {
+        return rowHeights[index2] + rowHeight;
+      }
+      return rowHeight;
+    }, [rowHeight, rowAutoHeight, rowHeights]);
+    const updateRowHeight = React.useCallback((rowIndex, height) => {
+      if (!rowAutoHeight) {
+        return;
+      }
+      setRowHeights((prevRowHeights) => {
+        if (height > (prevRowHeights[rowIndex] || 0) && gridRef.current) {
+          const newRowHeights = {
+            ...prevRowHeights,
+            [rowIndex]: height
+          };
+          gridRef.current.resetAfterRowIndex(rowIndex);
+          return newRowHeights;
+        }
+        return prevRowHeights;
+      });
+    }, [rowAutoHeight, gridRef]);
     const onFocusChange = React.useCallback((row, column) => {
       setFocus((focus2) => ({
         row: row ?? (focusProp == null ? void 0 : focusProp.row) ?? focus2.row,
@@ -33477,7 +33549,10 @@ var __publicField = (obj, key, value) => {
       rowHeight,
       headerHeight,
       rowNumberWidth,
-      rowStart
+      rowStart,
+      rowAutoHeight,
+      updateRowHeight,
+      getRowHeight
     };
     const InnerElementType = React.forwardRef(({
       children,
@@ -33486,7 +33561,7 @@ var __publicField = (obj, key, value) => {
       const [minRow, maxRow, minColumn, maxColumn] = getRenderedCursor(children);
       return /* @__PURE__ */ jsxRuntime.jsxs(GridContainer, { ...containerProps, className: `sticky-grid__container grid-outer ${props.className ?? ""}`, children: [
         /* @__PURE__ */ jsxRuntime.jsx(GridDataContainer, { $top: showHeader ? headerHeight : 0, $left: showRowNumber ? rowNumberWidth : 0, ref, children }),
-        showRowNumber && /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumn, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder }),
+        showRowNumber && /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumn, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder, rowAutoHeight }),
         showHeader && /* @__PURE__ */ jsxRuntime.jsx(Header, { scrolledVertical, scrolledHorizontal, showRowNumber, minColumn, maxColumn, height: headerHeight, getColumnWidth: columnWidth, cell, rowNumberWidth, getSelectionType, columnCount, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState })
       ] });
     });
@@ -33739,11 +33814,16 @@ var __publicField = (obj, key, value) => {
       const width = columnWidth(args.columnIndex);
       return /* @__PURE__ */ jsxRuntime.jsx(Cell, { ...args, width });
     };
+    React.useEffect(() => {
+      if (gridRef.current) {
+        gridRef.current.resetAfterRowIndex(0);
+      }
+    }, [rowCount, columnCount]);
     return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenu, { modal: false, onOpenChange: setContextMenuOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTrigger, { as: ContextMenu.Trigger, ref: mergeRefs([forwardedRef, containerRef]), tabIndex: 0, onMouseDown, onMouseMove, onKeyDown, onPointerDown, onPointerUp, onPointerLeave: setPointerCapture, onPointerEnter: setPointerCapture, onContextMenu, $rounded: rounded, $height: autoHeight ? rowCount * rowHeight + (showHeader ? headerHeight : 0) + elementBorderRef.current.scrollBarHeight : void 0, $showBorder: showBorder, children: /* @__PURE__ */ jsxRuntime.jsx(AutoSizer, { onResize, children: ({
         height,
         width
-      }) => /* @__PURE__ */ jsxRuntime.jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: () => rowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),
+      }) => /* @__PURE__ */ jsxRuntime.jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: getRowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(ContextMenu.Content, { children: menuOptions.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsx(ContextMenu.Item, { onSelect: option.onSelect, children: option.label }, `grid-${index2}`)) })
     ] });
   });
@@ -39408,7 +39488,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       border: vars.border,
       borderRadius: props.theme.click.switch.radii.all,
       position: "relative",
-      padding: 0
+      padding: 0,
+      cursor: props.disabled ? "not-allowed" : "pointer"
     };
   });
   const SwitchThumb = styledComponents.styled($6be4966fd9bbc698$export$6521433ed15a34db).withConfig({
@@ -44729,7 +44810,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             "default": "#323232"
           },
           text: {
-            "default": "#ffffff"
+            "default": "#ffffff",
+            disabled: "#808080"
           },
           link: {
             "default": "#FAFF69"
@@ -46500,7 +46582,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             "default": "#e6e7e9"
           },
           text: {
-            "default": "#161517"
+            "default": "#161517",
+            disabled: "#a0a0a0"
           },
           link: {
             "default": "#437EEF"
@@ -49364,7 +49447,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             "default": "#e6e7e9"
           },
           text: {
-            "default": "#161517"
+            "default": "#161517",
+            disabled: "#a0a0a0"
           },
           link: {
             "default": "#437EEF"

package/dist/components/CardHorizontal/CardHorizontal.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 import { BadgeState, HorizontalDirection, IconName } from '..';
 
 type CardColor = "default" | "muted";
@@ -7,13 +7,17 @@ export interface CardHorizontalProps extends Omit<HTMLAttributes<HTMLDivElement>
     icon?: IconName;
     disabled?: boolean;
     description?: ReactNode;
+    infoUrl?: string;
+    infoText?: string;
     isSelected?: boolean;
+    isSelectable?: boolean;
     children?: ReactNode;
     color?: CardColor;
     badgeText?: string;
     badgeState?: BadgeState;
     badgeIcon?: IconName;
     badgeIconDir?: HorizontalDirection;
+    onButtonClick?: MouseEventHandler<HTMLElement>;
 }
-export declare const CardHorizontal: ({ title, icon, description, disabled, isSelected, children, color, badgeText, badgeState, badgeIcon, badgeIconDir, ...props }: CardHorizontalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardHorizontal: ({ title, icon, description, disabled, infoText, infoUrl, isSelected, isSelectable, children, color, badgeText, badgeState, badgeIcon, badgeIconDir, onButtonClick, ...props }: CardHorizontalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Grid/RowNumberColumn.d.ts

@@ -12,6 +12,7 @@ interface RowNumberColumnProps {
     scrolledHorizontal: boolean;
     rowStart: number;
     showBorder: boolean;
+    rowAutoHeight?: boolean;
 }
-declare const RowNumberColumn: ({ minRow, maxRow, rowHeight, headerHeight, rowWidth, getSelectionType, rowCount, showHeader, scrolledHorizontal, rowStart, showBorder, }: RowNumberColumnProps) => import("react/jsx-runtime").JSX.Element;
+declare const RowNumberColumn: ({ minRow, maxRow, rowHeight, headerHeight, rowWidth, getSelectionType, rowCount, showHeader, scrolledHorizontal, rowStart, showBorder, rowAutoHeight, }: RowNumberColumnProps) => import("react/jsx-runtime").JSX.Element;
 export default RowNumberColumn;

package/dist/components/Grid/StyledCell.d.ts

@@ -12,4 +12,5 @@ export declare const StyledCell: import('styled-components/dist/types').IStyledC
     $height: number;
     $type?: "body" | "header";
     $showBorder: boolean;
+    $rowAutoHeight?: boolean;
 }>> & string;

package/dist/components/Grid/types.d.ts

@@ -107,6 +107,9 @@ export interface ItemDataType {
     headerHeight: number;
     rowNumberWidth: number;
     rowStart: number;
+    rowAutoHeight?: boolean;
+    updateRowHeight: (rowIndex: number, height: number) => void;
+    getRowHeight: (index: number) => number;
 }
 export interface GridContextMenuItemProps extends Omit<ContextMenuItemProps, "children"> {
     label: ReactNode;
@@ -137,6 +140,7 @@ export interface GridProps extends Omit<VariableSizeGridProps, "height" | "width
     onCopyCallback?: (copied: boolean) => void;
     onContextMenu?: MouseEventHandler<HTMLDivElement>;
     forwardedGridRef?: MutableRefObject<VariableSizeGrid>;
+    rowAutoHeight?: boolean;
 }
 export type ResizerPosition = {
     left: string;

package/dist/styles/types.d.ts

@@ -2389,6 +2389,7 @@ export interface Theme {
                     };
                     text: {
                         default: string;
+                        disabled: string;
                     };
                     link: {
                         default: string;

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

@@ -1303,7 +1303,8 @@ declare const _default: {
             "default": "#323232"
           },
           "text": {
-            "default": "#ffffff"
+            "default": "#ffffff",
+            "disabled": "#808080"
           },
           "link": {
             "default": "#FAFF69"

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

@@ -2388,7 +2388,8 @@ declare const _default: {
             "default": "#e6e7e9"
           },
           "text": {
-            "default": "#161517"
+            "default": "#161517",
+            "disabled": "#a0a0a0"
           },
           "link": {
             "default": "#437EEF"

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

@@ -1293,7 +1293,8 @@ declare const _default: {
             "default": "#e6e7e9"
           },
           "text": {
-            "default": "#161517"
+            "default": "#161517",
+            "disabled": "#a0a0a0"
           },
           "link": {
             "default": "#437EEF"

package/package.json

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