@clickhouse/click-ui 0.0.209 → 0.0.210

package/dist/click-ui.umd.js

@@ -7766,6 +7766,80 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const PopoverArrow = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "10", viewBox: "0 0 30 10", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 -1L15 9L30 -1", strokeWidth: "1.5", strokeLinejoin: "round" }) });
   };
+  const _Container = ({
+    component,
+    alignItems,
+    children,
+    fillWidth = true,
+    gap = "none",
+    grow,
+    shrink,
+    isResponsive,
+    justifyContent = "start",
+    maxWidth,
+    minWidth,
+    orientation = "horizontal",
+    padding = "none",
+    wrap = "nowrap",
+    fillHeight,
+    maxHeight,
+    minHeight,
+    overflow,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$d, { ref, as: component ?? "div", $alignItems: alignItems ?? (orientation === "vertical" ? "start" : "center"), $fillWidth: fillWidth, $gapSize: gap, $grow: grow, $shrink: shrink, $isResponsive: isResponsive, $justifyContent: justifyContent, $maxWidth: maxWidth, $minWidth: minWidth, $orientation: orientation, $paddingSize: padding, $wrap: wrap, $fillHeight: fillHeight, $maxHeight: maxHeight, $minHeight: minHeight, $overflow: overflow, "data-testid": "container", ...props, children });
+  };
+  const Wrapper$d = styled.styled.div.withConfig({
+    componentId: "sc-bcplth-0"
+  })(["display:flex;", " ", " ", " flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";max-width:", ";flex-direction:", ";}"], ({
+    $grow,
+    $shrink
+  }) => `
+    ${$grow && `flex: ${$grow}`};
+    ${$shrink && `flex-shrink: ${$shrink}`};
+  `, ({
+    $fillHeight,
+    $maxHeight,
+    $minHeight
+  }) => `
+    ${$fillHeight && "height: 100%"};
+    ${$maxHeight && `max-height: ${$maxHeight}`};
+    ${$minHeight && `min-height: ${$minHeight}`};
+  `, ({
+    $overflow
+  }) => `
+    ${$overflow && `overflow: ${$overflow}`};
+  `, ({
+    $wrap = "nowrap"
+  }) => $wrap, ({
+    theme: theme2,
+    $gapSize
+  }) => theme2.click.container.gap[$gapSize], ({
+    $maxWidth
+  }) => $maxWidth ?? "none", ({
+    $minWidth
+  }) => $minWidth ?? "auto", ({
+    theme: theme2,
+    $paddingSize
+  }) => theme2.click.container.space[$paddingSize], ({
+    $fillWidth = true
+  }) => $fillWidth === true ? "100%" : "auto", ({
+    $orientation = "horizontal"
+  }) => $orientation === "horizontal" ? "row" : "column", ({
+    $alignItems = "center"
+  }) => $alignItems, ({
+    $justifyContent = "left"
+  }) => $justifyContent === "start" ? "start" : `${$justifyContent}`, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.md, ({
+    $isResponsive = true,
+    $fillWidth = true
+  }) => $isResponsive === true ? "100%" : $fillWidth === true ? "100%" : "auto", ({
+    $isResponsive = true
+  }) => $isResponsive === true ? "none" : "auto", ({
+    $isResponsive = true
+  }) => $isResponsive === true ? "column" : "auto");
+  const Container = React.forwardRef(_Container);
   const mergeRefs = (refs) => (value) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") {
@@ -7789,14 +7863,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }]), ...props });
   };
   const EllipsisContent = React.forwardRef(_EllipsisContent);
-  const LabelContainer$1 = styled.styled.div.withConfig({
-    componentId: "sc-1likhxd-0"
-  })(["display:grid;grid-template-columns:", ";align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
-    $hasIcon,
-    $iconDir
-  }) => `${$hasIcon && $iconDir === "start" ? "auto " : ""}1fr${$hasIcon && $iconDir === "end" ? " auto" : ""}`, ({
-    theme: theme2
-  }) => theme2.click.sidebar.navigation.item.default.space.gap);
   const IconWrapper$3 = ({
     icon,
     iconDir = "start",
@@ -7805,10 +7871,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     height,
     children,
     ellipsisContent = true,
+    gap = "sm",
     ...props
   }) => {
     const TextWrapper2 = ellipsisContent ? EllipsisContent : "div";
-    return /* @__PURE__ */ jsxRuntime.jsxs(LabelContainer$1, { $hasIcon: typeof icon === "string", $iconDir: iconDir, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Container, { orientation: "horizontal", gap, ...props, children: [
       icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: size2, width, height }),
       /* @__PURE__ */ jsxRuntime.jsx(TextWrapper2, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`, children }),
       icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: size2, width, height })
@@ -8367,7 +8434,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ...delegated
   }) => {
     const [isVisible, setIsVisible] = React.useState(true);
-    return isVisible ? /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$d, { $size: size2, $state: state, $type: type, "data-testid": "click-alert", ...delegated, children: [
+    return isVisible ? /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$c, { $size: size2, $state: state, $type: type, "data-testid": "click-alert", ...delegated, children: [
       dismissible && type === "banner" && /* @__PURE__ */ jsxRuntime.jsx(DismissWrapper$1, {}),
       showIcon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$2, { $state: state, $size: size2, $type: type, children: /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { $size: size2, size: "sm", "aria-hidden": true, name: customIcon || stateIconMap[state] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(TextWrapper, { $state: state, $size: size2, children: [
@@ -8377,7 +8444,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       dismissible && /* @__PURE__ */ jsxRuntime.jsx(DismissWrapper$1, { "data-testid": "click-alert-dismiss-button", onClick: () => setIsVisible(false), children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", "aria-label": "close" }) })
     ] }) : null;
   };
-  const Wrapper$d = styled.styled.div.withConfig({
+  const Wrapper$c = styled.styled.div.withConfig({
     componentId: "sc-1wvczk0-0"
   })(["display:flex;border-radius:", ";justify-content:", ";overflow:hidden;background-color:", ";color:", ";width:100%;"], ({
     $type,
@@ -9231,7 +9298,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       font: ${theme2.click.avatar.typography.label[$textSize].hover};
       }
   `);
-  const Wrapper$c = styled.styled.div.withConfig({
+  const Wrapper$b = styled.styled.div.withConfig({
     componentId: "sc-471xo0-0"
   })(["display:inline-flex;", ""], ({
     $state = "default",
@@ -9288,7 +9355,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     onClose,
     ellipsisContent = true,
     ...props
-  }) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper$c, { $state: state, $size: size2, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Content$4, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-badge-content`, children: [
+  }) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper$b, { $state: state, $size: size2, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Content$4, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-badge-content`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(BadgeContent, { as: IconWrapper$3, icon, iconDir, size: size2, $state: state, ellipsisContent, children: text2 }),
     dismissible && /* @__PURE__ */ jsxRuntime.jsx(SvgContainer, { name: "cross", $state: state, as: SvgImage, onClick: onClose, "aria-label": "close" })
   ] }) });
@@ -9303,11 +9370,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     state = "default",
     title = "Title",
     ...props
-  }) => /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, ...props, children: [
+  }) => /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$a, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Label, { $state: state, $size: size2, children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(Title$3, { $state: state, $size: size2, children: title })
   ] });
-  const Wrapper$b = styled.styled.div.withConfig({
+  const Wrapper$a = styled.styled.div.withConfig({
     componentId: "sc-u5029o-0"
   })(["display:flex;justify-content:center;box-sizing:border-box;", ""], ({
     $fillWidth = false,
@@ -9534,7 +9601,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   })(["display:flex;flex-direction:column;align-self:start;gap:", ";flex:1;width:100%;"], ({
     theme: theme2
   }) => theme2.click.card.horizontal.space.gap);
-  const Wrapper$a = styled.styled.div.withConfig({
+  const Wrapper$9 = styled.styled.div.withConfig({
     componentId: "sc-1qnbjoa-2"
   })(["display:inline-flex;width:100%;max-width:100%;align-items:center;justify-content:flex-start;", ""], ({
     theme: theme2,
@@ -9640,7 +9707,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         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: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$9, { $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: [
@@ -9708,80 +9775,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => $fillWidth && "width: 100%");
   _Text.displayName = "Text";
   const Text = React.forwardRef(_Text);
-  const _Container = ({
-    component,
-    alignItems,
-    children,
-    fillWidth = true,
-    gap = "none",
-    grow,
-    shrink,
-    isResponsive,
-    justifyContent = "start",
-    maxWidth,
-    minWidth,
-    orientation = "horizontal",
-    padding = "none",
-    wrap = "nowrap",
-    fillHeight,
-    maxHeight,
-    minHeight,
-    overflow,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$9, { ref, as: component ?? "div", $alignItems: alignItems ?? (orientation === "vertical" ? "start" : "center"), $fillWidth: fillWidth, $gapSize: gap, $grow: grow, $shrink: shrink, $isResponsive: isResponsive, $justifyContent: justifyContent, $maxWidth: maxWidth, $minWidth: minWidth, $orientation: orientation, $paddingSize: padding, $wrap: wrap, $fillHeight: fillHeight, $maxHeight: maxHeight, $minHeight: minHeight, $overflow: overflow, "data-testid": "container", ...props, children });
-  };
-  const Wrapper$9 = styled.styled.div.withConfig({
-    componentId: "sc-bcplth-0"
-  })(["display:flex;", " ", " ", " flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";max-width:", ";flex-direction:", ";}"], ({
-    $grow,
-    $shrink
-  }) => `
-    ${$grow && `flex: ${$grow}`};
-    ${$shrink && `flex-shrink: ${$shrink}`};
-  `, ({
-    $fillHeight,
-    $maxHeight,
-    $minHeight
-  }) => `
-    ${$fillHeight && "height: 100%"};
-    ${$maxHeight && `max-height: ${$maxHeight}`};
-    ${$minHeight && `min-height: ${$minHeight}`};
-  `, ({
-    $overflow
-  }) => `
-    ${$overflow && `overflow: ${$overflow}`};
-  `, ({
-    $wrap = "nowrap"
-  }) => $wrap, ({
-    theme: theme2,
-    $gapSize
-  }) => theme2.click.container.gap[$gapSize], ({
-    $maxWidth
-  }) => $maxWidth ?? "none", ({
-    $minWidth
-  }) => $minWidth ?? "auto", ({
-    theme: theme2,
-    $paddingSize
-  }) => theme2.click.container.space[$paddingSize], ({
-    $fillWidth = true
-  }) => $fillWidth === true ? "100%" : "auto", ({
-    $orientation = "horizontal"
-  }) => $orientation === "horizontal" ? "row" : "column", ({
-    $alignItems = "center"
-  }) => $alignItems, ({
-    $justifyContent = "left"
-  }) => $justifyContent === "start" ? "start" : `${$justifyContent}`, ({
-    theme: theme2
-  }) => theme2.breakpoint.sizes.md, ({
-    $isResponsive = true,
-    $fillWidth = true
-  }) => $isResponsive === true ? "100%" : $fillWidth === true ? "100%" : "auto", ({
-    $isResponsive = true
-  }) => $isResponsive === true ? "none" : "auto", ({
-    $isResponsive = true
-  }) => $isResponsive === true ? "column" : "auto");
-  const Container = React.forwardRef(_Container);
   const TopBadgeWrapper = styled.styled(Container).withConfig({
     componentId: "sc-1d5pqpo-0"
   })(["position:relative;"]);
@@ -34681,6 +34674,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     color: ${theme2.click.genericMenu.button.color.label.default};
     cursor: ${$clickable ? "pointer" : "default"}
   `);
+  const SelectItemDescriptionText = styled.styled.div.withConfig({
+    componentId: "sc-oudbwg-14"
+  })(["white-space:normal;[data-disabled] &,[disabled] &{color:inherit;}", " &{display:none;}"], StyledSelectTrigger);
   const OptionContext = React.createContext({
     search: "",
     selectedValues: [],
@@ -37966,7 +37962,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       children,
       label
     } = valueNode ?? {};
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectValueContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, children: label ?? children ?? value }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectValueContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ?? children ?? value }) });
   };
   const useOption = () => {
     const result = React.useContext(OptionContext);
@@ -38225,14 +38221,11 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
                   options: itemList = [],
                   ...groupProps
                 } = props2;
-                return /* @__PURE__ */ jsxRuntime.jsx(SelectGroup, { ...groupProps, children: itemList.map(({
-                  label: label2,
-                  ...itemProps
-                }, itemIndex) => {
+                return /* @__PURE__ */ jsxRuntime.jsx(SelectGroup, { ...groupProps, children: itemList.map((itemProps, itemIndex) => {
                   if (checkbox) {
-                    return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectCheckboxItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+                    return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectCheckboxItem, { ...itemProps }, `select-${id}-group-${index2}-item-${itemIndex}`);
                   }
-                  return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+                  return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { ...itemProps }, `select-${id}-group-${index2}-item-${itemIndex}`);
                 }) }, `select-${id}-group-${index2}`);
               } else {
                 if (checkbox) {
@@ -38279,6 +38272,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     disabled = false,
     children,
     label,
+    description,
     separator,
     onSelect: onSelectProp,
     value = "",
@@ -38316,7 +38310,10 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     const isChecked = selectedValues.includes(value);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, ref: forwardedRef, "data-state": isChecked ? "checked" : "unchecked", "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "cui-select-item": "", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, children: label ?? children }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          label,
+          description && /* @__PURE__ */ jsxRuntime.jsx(SelectItemDescription, { children: description })
+        ] }) : children }),
         /* @__PURE__ */ jsxRuntime.jsx(CheckIcon$1, { as: SvgImage, name: "check", size: "sm", $showCheck: isChecked })
       ] }),
       separator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "sm" })
@@ -38329,6 +38326,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     icon,
     iconDir = "end",
     label,
+    description,
     onMouseOver: onMouseOverProp,
     onSelect: onSelectProp,
     separator,
@@ -38343,7 +38341,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       selectedValues,
       onSelect
     } = useOption();
-    const handleSelect = (evt) => {
+    const handleMenuItemClick = (evt) => {
       if (!disabled) {
         onSelect(value, void 0, evt);
         if (typeof onSelectProp === "function") {
@@ -38351,15 +38349,6 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
         }
       }
     };
-    const handleMenuItemClick = (evt) => {
-      if (evt.target !== evt.currentTarget) {
-        return;
-      }
-      handleSelect(evt);
-    };
-    const handleCheckboxClick = (evt) => {
-      handleSelect(evt);
-    };
     const handleMenuItemMouseOver = (e) => {
       if (onMouseOverProp) {
         onMouseOverProp(e);
@@ -38373,27 +38362,24 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     }
     const isChecked = selectedValues.includes(value);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: [
-        icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-          display: "flex",
-          justifyContent: "center"
-        }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: "sm" }),
-          label
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-          display: "flex",
-          justifyContent: "center"
-        }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: "sm" }),
-          children
-        ] }), onClick: handleCheckboxClick, variant: variant ?? "default" }),
-        icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: handleCheckboxClick, variant: variant ?? "default" }) }),
-        !icon && /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: handleCheckboxClick, variant: variant ?? "default" })
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { orientation: "horizontal", gap: "xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, variant: variant ?? "default" }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          label,
+          description && /* @__PURE__ */ jsxRuntime.jsx(SelectItemDescription, { children: description })
+        ] }) : children })
+      ] }) }),
       separator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "sm" })
     ] });
   });
   MultiSelectCheckboxItem.displayName = "Select.Item";
+  const SelectItemDescription = React.forwardRef(({
+    children,
+    ...props
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Text, { component: SelectItemDescriptionText, color: "muted", ...props, children });
+  });
+  SelectItemDescription.displayName = "Select.ItemDescription";
   const Select = ({
     value: valueProp,
     defaultValue,
@@ -38441,6 +38427,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
   };
   Select.Group = SelectGroup;
   Select.Item = SelectItem;
+  Select.ItemDescription = SelectItemDescription;
   const MultiSelect = ({
     value: valueProp,
     defaultValue,
@@ -38486,6 +38473,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
   };
   MultiSelect.Group = SelectGroup;
   MultiSelect.Item = SelectItem;
+  MultiSelect.ItemDescription = SelectItemDescription;
   const CheckboxMultiSelect = ({
     value: valueProp,
     defaultValue,
@@ -38532,6 +38520,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
   };
   CheckboxMultiSelect.Group = SelectGroup;
   CheckboxMultiSelect.Item = MultiSelectCheckboxItem;
+  CheckboxMultiSelect.ItemDescription = SelectItemDescription;
   const $89eedd556c436f6a$var$DEFAULT_ORIENTATION = "horizontal";
   const $89eedd556c436f6a$var$ORIENTATIONS = [
     "horizontal",
@@ -41264,7 +41253,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   `);
   const ToastDescriptionContainer = styled.styled.div.withConfig({
     componentId: "sc-tmc8vl-3"
-  })(["display:flex;justify-content:space-between;width:100%;align-items:flex-end;gap:inherit;", ""], ({
+  })(["display:flex;flex-direction:column;justify-content:space-between;width:100%;align-items:flex-end;gap:inherit;", ""], ({
     theme: theme2
   }) => `
     font: ${theme2.click.toast.typography.title.default};
@@ -41308,7 +41297,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ToastDescriptionContent, { children: actions.map(({
           altText,
           ...btnProps
-        }) => /* @__PURE__ */ jsxRuntime.jsx($054eb8030ebde76e$export$e19cd5f9376f8cee, { altText, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...btnProps }) })) })
+        }) => /* @__PURE__ */ jsxRuntime.jsx($054eb8030ebde76e$export$e19cd5f9376f8cee, { altText, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...btnProps }) }) }, altText)) })
       ] })
     ] });
   };
@@ -41333,13 +41322,21 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     align = "end",
     ...props
   }) => {
-    const [toasts, setToasts] = React.useState(/* @__PURE__ */ new Map());
+    const [toasts, setToasts] = React.useState({
+      start: /* @__PURE__ */ new Map(),
+      end: /* @__PURE__ */ new Map()
+    });
     React.useEffect(() => {
       const listener = (toast) => {
         setToasts((currentToasts) => {
-          const newMap = new Map(currentToasts);
-          newMap.set((toast == null ? void 0 : toast.id) ?? String(Date.now()), toast);
-          return newMap;
+          const alignment = toast.align ?? "end";
+          const newToasts = {
+            ...currentToasts
+          };
+          const map2 = new Map(newToasts[alignment]);
+          map2.set((toast == null ? void 0 : toast.id) ?? String(Date.now()), toast);
+          newToasts[alignment] = map2;
+          return newToasts;
         });
       };
       toastsEventEmitter.on(listener);
@@ -41348,28 +41345,36 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     const onClose = (id) => (open2) => {
       if (!open2) {
         setToasts((currentToasts) => {
-          const newMap = new Map(currentToasts);
-          newMap.delete(id);
-          return newMap;
+          const newToasts = {
+            ...currentToasts
+          };
+          const map2 = new Map(newToasts[align]);
+          map2.delete(id);
+          newToasts[align] = map2;
+          return newToasts;
         });
       }
     };
     const value = {
-      createToast: (toast) => {
+      createToast: (toast, toastAlign = align) => {
         setToasts((currentToasts) => {
-          const newMap = new Map(currentToasts);
-          newMap.set((toast == null ? void 0 : toast.id) ?? String(Date.now()), toast);
-          return newMap;
+          const newToasts = {
+            ...currentToasts
+          };
+          const map2 = new Map(newToasts[toastAlign]);
+          map2.set((toast == null ? void 0 : toast.id) ?? String(Date.now()), toast);
+          newToasts[toastAlign] = map2;
+          return newToasts;
         });
       }
     };
     return /* @__PURE__ */ jsxRuntime.jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: align === "start" ? "left" : "right", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
         children,
-        Array.from(toasts).map(([id, toast]) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toast, onClose: onClose(id) }, id))
+        Array.from(toasts[align]).map(([id, toast]) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toast, onClose: onClose(id) }, id))
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Viewport, { $align: align })
-    ] });
+    ] }, `toast-provider-${align}`);
   };
   function listCacheClear$1() {
     this.__data__ = [];
@@ -50901,6 +50906,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.TextAreaField = TextAreaField;
   exports2.TextField = TextField;
   exports2.Title = Title$2;
+  exports2.Toast = Toast;
   exports2.ToastProvider = ToastProvider;
   exports2.Tooltip = Tooltip;
   exports2.VerticalStepper = VerticalStepper;

package/dist/components/IconWrapper/IconWrapper.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { HorizontalDirection, IconName } from '..';
+import { GapOptions } from '../Container/Container';
 import { IconSize } from '../Icon/types';
 
 interface IconWrapperProps {
@@ -10,6 +11,7 @@ interface IconWrapperProps {
     height?: number | string;
     children: ReactNode;
     ellipsisContent?: boolean;
+    gap?: GapOptions;
 }
-declare const IconWrapper: ({ icon, iconDir, size, width, height, children, ellipsisContent, ...props }: IconWrapperProps) => import("react/jsx-runtime").JSX.Element;
+declare const IconWrapper: ({ icon, iconDir, size, width, height, children, ellipsisContent, gap, ...props }: IconWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export default IconWrapper;

package/dist/components/Select/CheckboxMultiSelect.d.ts

@@ -7,4 +7,5 @@ export declare const CheckboxMultiSelect: {
     ({ value: valueProp, defaultValue, onSelect: onSelectProp, options, children, onOpenChange: onOpenChangeProp, selectLabel, ...props }: CheckboxMultiSelectProps): import("react/jsx-runtime").JSX.Element;
     Group: import('react').ForwardRefExoticComponent<import('./common/types').SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
     Item: import('react').ForwardRefExoticComponent<import('./common/InternalSelect').MultiSelectCheckboxItemProps & import('react').RefAttributes<HTMLDivElement>>;
+    ItemDescription: import('react').ForwardRefExoticComponent<import('..').TextProps<"p"> & import('react').RefAttributes<HTMLDivElement>>;
 };

package/dist/components/Select/MultiSelect.d.ts

@@ -12,4 +12,5 @@ export declare const MultiSelect: {
     ({ value: valueProp, defaultValue, onSelect: onSelectProp, options, children, onOpenChange: onOpenChangeProp, ...props }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
     Group: import('react').ForwardRefExoticComponent<import('./common/types').SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
     Item: import('react').ForwardRefExoticComponent<import('./common/types').SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;
+    ItemDescription: import('react').ForwardRefExoticComponent<import('..').TextProps<"p"> & import('react').RefAttributes<HTMLDivElement>>;
 };

package/dist/components/Select/SingleSelect.d.ts

@@ -14,4 +14,5 @@ export declare const Select: {
     ({ value: valueProp, defaultValue, onSelect: onSelectProp, options, children, onOpenChange: onOpenChangeProp, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
     Group: import('react').ForwardRefExoticComponent<import('./common/types').SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
     Item: import('react').ForwardRefExoticComponent<import('./common/types').SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;
+    ItemDescription: import('react').ForwardRefExoticComponent<import('..').TextProps<"p"> & import('react').RefAttributes<HTMLDivElement>>;
 };

package/dist/components/Select/common/InternalSelect.d.ts

@@ -1,5 +1,5 @@
 import { SelectContainerProps, SelectGroupProps, SelectItemProps } from './types';
-import { CheckboxVariants } from '../..';
+import { CheckboxVariants, TextProps } from '../..';
 
 export declare const InternalSelect: ({ label, children, orientation, dir, disabled, id, error, value: selectedValues, onChange, onSelect, open, onOpenChange, name, form, allowCreateOption, customText, options, sortable, placeholder, multiple, checkbox, selectLabel, showSearch, container, useFullWidthItems, itemCharacterLimit, ...props }: SelectContainerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectGroup: import('react').ForwardRefExoticComponent<SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -8,3 +8,4 @@ export type MultiSelectCheckboxItemProps = SelectItemProps & {
     variant?: CheckboxVariants;
 };
 export declare const MultiSelectCheckboxItem: import('react').ForwardRefExoticComponent<MultiSelectCheckboxItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectItemDescription: import('react').ForwardRefExoticComponent<TextProps<"p"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Select/common/SelectStyled.d.ts

@@ -29,3 +29,4 @@ export declare const SelectGroupContent: import('styled-components/dist/types').
 export declare const SelectNoDataContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $clickable: boolean;
 }>> & string;
+export declare const SelectItemDescriptionText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Select/common/types.d.ts

@@ -14,10 +14,12 @@ interface SelectItemComponentProps extends Omit<DivProps, "disabled" | "onSelect
 type SelectItemChildren = {
     children: ReactNode;
     label?: never;
+    description?: never;
 };
 type SelectItemLabel = {
     children?: never;
     label: ReactNode;
+    description?: ReactNode;
 };
 export type SelectItemProps = SelectItemComponentProps & (SelectItemChildren | SelectItemLabel);
 export interface SelectGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "heading"> {
@@ -25,14 +27,13 @@ export interface SelectGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "
     value?: never;
     onSelect?: never;
 }
-export interface SelectOptionItem extends Omit<SelectItemProps, "children" | "label"> {
-    heading?: never;
+export interface SelectOptionItem extends Omit<SelectItemProps, "children" | "label" | "description"> {
     label: ReactNode;
+    description?: ReactNode;
     [key: `data-${string}`]: string;
 }
-interface SelectGroupOptionItem extends Omit<SelectGroupProps, "children" | "label"> {
+interface SelectGroupOptionItem extends Omit<SelectGroupProps, "children" | "label" | "description"> {
     options: Array<SelectOptionItem>;
-    label?: never;
     [key: `data-${string}`]: string;
 }
 export type SelectOptionListItem = SelectGroupOptionItem | SelectOptionItem;

package/dist/components/Toast/Toast.d.ts

@@ -3,9 +3,10 @@ import { ButtonProps } from '..';
 
 import * as RadixUIToast from "@radix-ui/react-toast";
 export interface ToastContextProps {
-    createToast: (toast: ToastProps) => void;
+    createToast: (toast: ToastProps, align?: ToastAlignment) => void;
 }
 export declare const ToastContext: import('react').Context<ToastContextProps>;
+export type ToastAlignment = "start" | "end";
 export type ToastType = "danger" | "warning" | "default" | "success";
 export interface ToastProps {
     id?: string;
@@ -17,8 +18,12 @@ export interface ToastProps {
     actions?: Array<ButtonProps & {
         altText: string;
     }>;
+    align?: ToastAlignment;
 }
-export interface ToastProviderProps extends RadixUIToast.ToastProps {
-    align?: "start" | "end";
+export declare const Toast: ({ type, title, description, actions, duration, onClose, }: ToastProps & {
+    onClose: (open: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface ToastProviderProps extends RadixUIToast.ToastProviderProps {
+    align?: ToastAlignment;
 }
 export declare const ToastProvider: ({ children, align, ...props }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -69,4 +69,4 @@ export { createToast } from './Toast/toastEmitter';
 export { UserIcon as ProfileIcon } from './icons/UserIcon';
 export { default as VerticalStepper } from './VerticalStepper/VerticalStepper';
 export { MultiAccordion } from './MultiAccordion/MultiAccordion';
-export { ToastProvider } from './Toast/Toast';
+export { ToastProvider, Toast } from './Toast/Toast';

package/package.json

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