@clickhouse/click-ui 0.0.208 → 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;"]);
@@ -14378,7 +14371,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const ActionsWrapper = styled.styled.div.withConfig({
     componentId: "sc-6eozxy-0"
-  })(["display:flex;justify-content:flex-end;gap:", ";"], (props) => props.theme.click.dialog.space.gap);
+  })(["display:flex;justify-content:flex-end;gap:", ";@media (max-width:", "){flex-direction:column;}"], (props) => props.theme.click.dialog.space.gap, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.sm);
   const DialogContent$1 = styled.styled.div.withConfig({
     componentId: "sc-6eozxy-1"
   })(["overflow:hidden;display:flex;flex-direction:column;"]);
@@ -16543,19 +16538,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => theme2.click.dialog.color.opaqueBackground.default, overlayShow);
   const ContentArea = styled.styled($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-1wr6otn-2"
-  })(["background:", ";border-radius:", ";padding:", " ", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"], ({
+  })(["background:", ";border-radius:", ";padding:", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;@media (max-width:", "){max-height:100%;border-radius:0;width:100%;}"], ({
     theme: theme2
   }) => theme2.click.dialog.color.background.default, ({
     theme: theme2
   }) => theme2.click.dialog.radii.all, ({
     theme: theme2
-  }) => theme2.click.dialog.space.y, ({
-    theme: theme2
-  }) => theme2.click.dialog.space.x, ({
+  }) => `${theme2.click.dialog.space.y} ${theme2.click.dialog.space.x}`, ({
     theme: theme2
   }) => theme2.click.dialog.shadow.default, ({
     theme: theme2
-  }) => theme2.click.global.color.stroke.default, contentShow);
+  }) => theme2.click.global.color.stroke.default, contentShow, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.sm);
   const TitleArea = styled.styled.div.withConfig({
     componentId: "sc-1wr6otn-3"
   })(["display:flex;justify-content:space-between;align-items:center;min-height:", ";"], ({
@@ -34679,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: [],
@@ -37964,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);
@@ -38223,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) {
@@ -38277,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 = "",
@@ -38314,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" })
@@ -38327,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,
@@ -38341,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") {
@@ -38349,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);
@@ -38371,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,
@@ -38439,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,
@@ -38484,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,
@@ -38530,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",
@@ -41262,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};
@@ -41306,28 +41297,46 @@ 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)) })
       ] })
     ] });
   };
   const Viewport = styled.styled($054eb8030ebde76e$export$d5c6c08dc2d3ca7).withConfig({
     componentId: "sc-tmc8vl-6"
-  })(["--viewport-padding:25px;position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+  })(["--viewport-padding:25px;position:fixed;bottom:0;", ";display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+    $align
+  }) => {
+    if ($align === "start") {
+      return "left: 0";
+    }
+    return `
+      right: 0;
+  `;
+  }, ({
     theme: theme2
   }) => theme2.click.toast.space.gap, ({
     theme: theme2
   }) => theme2.click.toast.size.width);
   const ToastProvider = ({
     children,
+    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);
@@ -41336,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: "right", ...props, children: [
+    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, {})
-    ] });
+      /* @__PURE__ */ jsxRuntime.jsx(Viewport, { $align: align })
+    ] }, `toast-provider-${align}`);
   };
   function listCacheClear$1() {
     this.__data__ = [];
@@ -50889,6 +50906,8 @@ 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;
   exports2.WarningAlert = WarningAlert;

package/dist/components/ClickUIProvider/ClickUIProvider.d.ts

@@ -1,12 +1,12 @@
 import { TooltipProviderProps } from '@radix-ui/react-tooltip';
-import { ToastProps } from '@radix-ui/react-toast';
+import { ToastProviderProps } from '../Toast/Toast';
 import { ThemeName } from '../../theme';
 import { ReactNode } from 'react';
 
 interface Props {
     config?: {
         tooltip?: Omit<TooltipProviderProps, "children">;
-        toast?: Omit<ToastProps, "children">;
+        toast?: Omit<ToastProviderProps, "children">;
     };
     theme: ThemeName;
     children: ReactNode;

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;