@clickhouse/click-ui 0.0.208 → 0.0.210

package/dist/click-ui.es.js

@@ -7751,6 +7751,80 @@ const GenericMenuItem = styled.div.withConfig({
 const PopoverArrow = (props) => {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "10", viewBox: "0 0 30 10", fill: "none", ...props, children: /* @__PURE__ */ 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__ */ 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.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 = forwardRef(_Container);
 const mergeRefs = (refs) => (value) => {
   refs.forEach((ref) => {
     if (typeof ref === "function") {
@@ -7774,14 +7848,6 @@ const _EllipsisContent = ({
   }]), ...props });
 };
 const EllipsisContent = forwardRef(_EllipsisContent);
-const LabelContainer$1 = 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",
@@ -7790,10 +7856,11 @@ const IconWrapper$3 = ({
   height,
   children,
   ellipsisContent = true,
+  gap = "sm",
   ...props
 }) => {
   const TextWrapper2 = ellipsisContent ? EllipsisContent : "div";
-  return /* @__PURE__ */ jsxs(LabelContainer$1, { $hasIcon: typeof icon === "string", $iconDir: iconDir, ...props, children: [
+  return /* @__PURE__ */ jsxs(Container, { orientation: "horizontal", gap, ...props, children: [
     icon && iconDir === "start" && /* @__PURE__ */ jsx(SvgImage, { name: icon, size: size2, width, height }),
     /* @__PURE__ */ jsx(TextWrapper2, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`, children }),
     icon && iconDir === "end" && /* @__PURE__ */ jsx(SvgImage, { name: icon, size: size2, width, height })
@@ -8352,7 +8419,7 @@ const Alert = ({
   ...delegated
 }) => {
   const [isVisible, setIsVisible] = useState(true);
-  return isVisible ? /* @__PURE__ */ jsxs(Wrapper$d, { $size: size2, $state: state, $type: type, "data-testid": "click-alert", ...delegated, children: [
+  return isVisible ? /* @__PURE__ */ jsxs(Wrapper$c, { $size: size2, $state: state, $type: type, "data-testid": "click-alert", ...delegated, children: [
     dismissible && type === "banner" && /* @__PURE__ */ jsx(DismissWrapper$1, {}),
     showIcon && /* @__PURE__ */ jsx(IconWrapper$2, { $state: state, $size: size2, $type: type, children: /* @__PURE__ */ jsx(StyledIcon, { $size: size2, size: "sm", "aria-hidden": true, name: customIcon || stateIconMap[state] }) }),
     /* @__PURE__ */ jsxs(TextWrapper, { $state: state, $size: size2, children: [
@@ -8362,7 +8429,7 @@ const Alert = ({
     dismissible && /* @__PURE__ */ jsx(DismissWrapper$1, { "data-testid": "click-alert-dismiss-button", onClick: () => setIsVisible(false), children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", "aria-label": "close" }) })
   ] }) : null;
 };
-const Wrapper$d = styled.div.withConfig({
+const Wrapper$c = styled.div.withConfig({
   componentId: "sc-1wvczk0-0"
 })(["display:flex;border-radius:", ";justify-content:", ";overflow:hidden;background-color:", ";color:", ";width:100%;"], ({
   $type,
@@ -9216,7 +9283,7 @@ const StyledFallback = styled($cddcb0b647441e34$export$fb8d7f40caaeea67).withCon
       font: ${theme2.click.avatar.typography.label[$textSize].hover};
       }
   `);
-const Wrapper$c = styled.div.withConfig({
+const Wrapper$b = styled.div.withConfig({
   componentId: "sc-471xo0-0"
 })(["display:inline-flex;", ""], ({
   $state = "default",
@@ -9273,7 +9340,7 @@ const Badge = ({
   onClose,
   ellipsisContent = true,
   ...props
-}) => /* @__PURE__ */ jsx(Wrapper$c, { $state: state, $size: size2, $type: type, ...props, children: /* @__PURE__ */ jsxs(Content$4, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-badge-content`, children: [
+}) => /* @__PURE__ */ jsx(Wrapper$b, { $state: state, $size: size2, $type: type, ...props, children: /* @__PURE__ */ jsxs(Content$4, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-badge-content`, children: [
   /* @__PURE__ */ jsx(BadgeContent, { as: IconWrapper$3, icon, iconDir, size: size2, $state: state, ellipsisContent, children: text2 }),
   dismissible && /* @__PURE__ */ jsx(SvgContainer, { name: "cross", $state: state, as: SvgImage, onClick: onClose, "aria-label": "close" })
 ] }) });
@@ -9288,11 +9355,11 @@ const BigStat = ({
   state = "default",
   title = "Title",
   ...props
-}) => /* @__PURE__ */ jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, ...props, children: [
+}) => /* @__PURE__ */ jsxs(Wrapper$a, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, ...props, children: [
   /* @__PURE__ */ jsx(Label, { $state: state, $size: size2, children: label }),
   /* @__PURE__ */ jsx(Title$3, { $state: state, $size: size2, children: title })
 ] });
-const Wrapper$b = styled.div.withConfig({
+const Wrapper$a = styled.div.withConfig({
   componentId: "sc-u5029o-0"
 })(["display:flex;justify-content:center;box-sizing:border-box;", ""], ({
   $fillWidth = false,
@@ -9519,7 +9586,7 @@ const Description = styled.div.withConfig({
 })(["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.div.withConfig({
+const Wrapper$9 = styled.div.withConfig({
   componentId: "sc-1qnbjoa-2"
 })(["display:inline-flex;width:100%;max-width:100%;align-items:center;justify-content:flex-start;", ""], ({
   theme: theme2,
@@ -9625,7 +9692,7 @@ const CardHorizontal = ({
       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: [
+  return /* @__PURE__ */ jsx(Wrapper$9, { $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: [
@@ -9693,80 +9760,6 @@ const CuiText = styled.p.withConfig({
 }) => $fillWidth && "width: 100%");
 _Text.displayName = "Text";
 const Text = 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__ */ 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.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 = forwardRef(_Container);
 const TopBadgeWrapper = styled(Container).withConfig({
   componentId: "sc-1d5pqpo-0"
 })(["position:relative;"]);
@@ -14363,7 +14356,9 @@ const CodeBlock = ({
 };
 const ActionsWrapper = 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.div.withConfig({
   componentId: "sc-6eozxy-1"
 })(["overflow:hidden;display:flex;flex-direction:column;"]);
@@ -16528,19 +16523,19 @@ const DialogOverlay = styled($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff).withConf
 }) => theme2.click.dialog.color.opaqueBackground.default, overlayShow);
 const ContentArea = 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.div.withConfig({
   componentId: "sc-1wr6otn-3"
 })(["display:flex;justify-content:space-between;align-items:center;min-height:", ";"], ({
@@ -34664,6 +34659,9 @@ const SelectNoDataContainer = styled.div.withConfig({
     color: ${theme2.click.genericMenu.button.color.label.default};
     cursor: ${$clickable ? "pointer" : "default"}
   `);
+const SelectItemDescriptionText = styled.div.withConfig({
+  componentId: "sc-oudbwg-14"
+})(["white-space:normal;[data-disabled] &,[disabled] &{color:inherit;}", " &{display:none;}"], StyledSelectTrigger);
 const OptionContext = createContext({
   search: "",
   selectedValues: [],
@@ -37949,7 +37947,7 @@ const SingleSelectValue = ({
     children,
     label
   } = valueNode ?? {};
-  return /* @__PURE__ */ jsx(SelectValueContainer, { children: /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir, children: label ?? children ?? value }) });
+  return /* @__PURE__ */ jsx(SelectValueContainer, { children: /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ?? children ?? value }) });
 };
 const useOption = () => {
   const result = useContext(OptionContext);
@@ -38208,14 +38206,11 @@ const InternalSelect = ({
                 options: itemList = [],
                 ...groupProps
               } = props2;
-              return /* @__PURE__ */ jsx(SelectGroup, { ...groupProps, children: itemList.map(({
-                label: label2,
-                ...itemProps
-              }, itemIndex) => {
+              return /* @__PURE__ */ jsx(SelectGroup, { ...groupProps, children: itemList.map((itemProps, itemIndex) => {
                 if (checkbox) {
-                  return /* @__PURE__ */ jsx(MultiSelectCheckboxItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+                  return /* @__PURE__ */ jsx(MultiSelectCheckboxItem, { ...itemProps }, `select-${id}-group-${index2}-item-${itemIndex}`);
                 }
-                return /* @__PURE__ */ jsx(SelectItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+                return /* @__PURE__ */ jsx(SelectItem, { ...itemProps }, `select-${id}-group-${index2}-item-${itemIndex}`);
               }) }, `select-${id}-group-${index2}`);
             } else {
               if (checkbox) {
@@ -38262,6 +38257,7 @@ const SelectItem = forwardRef(({
   disabled = false,
   children,
   label,
+  description,
   separator,
   onSelect: onSelectProp,
   value = "",
@@ -38299,7 +38295,10 @@ const SelectItem = forwardRef(({
   const isChecked = selectedValues.includes(value);
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ 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__ */ jsx(IconWrapper$3, { icon, iconDir, children: label ?? children }),
+      /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        label,
+        description && /* @__PURE__ */ jsx(SelectItemDescription, { children: description })
+      ] }) : children }),
       /* @__PURE__ */ jsx(CheckIcon$1, { as: SvgImage, name: "check", size: "sm", $showCheck: isChecked })
     ] }),
     separator && /* @__PURE__ */ jsx(Separator, { size: "sm" })
@@ -38312,6 +38311,7 @@ const MultiSelectCheckboxItem = forwardRef(({
   icon,
   iconDir = "end",
   label,
+  description,
   onMouseOver: onMouseOverProp,
   onSelect: onSelectProp,
   separator,
@@ -38326,7 +38326,7 @@ const MultiSelectCheckboxItem = forwardRef(({
     selectedValues,
     onSelect
   } = useOption();
-  const handleSelect = (evt) => {
+  const handleMenuItemClick = (evt) => {
     if (!disabled) {
       onSelect(value, void 0, evt);
       if (typeof onSelectProp === "function") {
@@ -38334,15 +38334,6 @@ const MultiSelectCheckboxItem = forwardRef(({
       }
     }
   };
-  const handleMenuItemClick = (evt) => {
-    if (evt.target !== evt.currentTarget) {
-      return;
-    }
-    handleSelect(evt);
-  };
-  const handleCheckboxClick = (evt) => {
-    handleSelect(evt);
-  };
   const handleMenuItemMouseOver = (e) => {
     if (onMouseOverProp) {
       onMouseOverProp(e);
@@ -38356,27 +38347,24 @@ const MultiSelectCheckboxItem = forwardRef(({
   }
   const isChecked = selectedValues.includes(value);
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ 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__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ? /* @__PURE__ */ jsxs("div", { style: {
-        display: "flex",
-        justifyContent: "center"
-      }, children: [
-        /* @__PURE__ */ jsx(SvgImage, { name: icon, size: "sm" }),
-        label
-      ] }) : /* @__PURE__ */ jsxs("div", { style: {
-        display: "flex",
-        justifyContent: "center"
-      }, children: [
-        /* @__PURE__ */ jsx(SvgImage, { name: icon, size: "sm" }),
-        children
-      ] }), onClick: handleCheckboxClick, variant: variant ?? "default" }),
-      icon && iconDir === "end" && /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: handleCheckboxClick, variant: variant ?? "default" }) }),
-      !icon && /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: handleCheckboxClick, variant: variant ?? "default" })
-    ] }),
+    /* @__PURE__ */ 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__ */ jsxs(Container, { orientation: "horizontal", gap: "xs", children: [
+      /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, variant: variant ?? "default" }),
+      /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        label,
+        description && /* @__PURE__ */ jsx(SelectItemDescription, { children: description })
+      ] }) : children })
+    ] }) }),
     separator && /* @__PURE__ */ jsx(Separator, { size: "sm" })
   ] });
 });
 MultiSelectCheckboxItem.displayName = "Select.Item";
+const SelectItemDescription = forwardRef(({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Text, { component: SelectItemDescriptionText, color: "muted", ...props, children });
+});
+SelectItemDescription.displayName = "Select.ItemDescription";
 const Select = ({
   value: valueProp,
   defaultValue,
@@ -38424,6 +38412,7 @@ const Select = ({
 };
 Select.Group = SelectGroup;
 Select.Item = SelectItem;
+Select.ItemDescription = SelectItemDescription;
 const MultiSelect = ({
   value: valueProp,
   defaultValue,
@@ -38469,6 +38458,7 @@ const MultiSelect = ({
 };
 MultiSelect.Group = SelectGroup;
 MultiSelect.Item = SelectItem;
+MultiSelect.ItemDescription = SelectItemDescription;
 const CheckboxMultiSelect = ({
   value: valueProp,
   defaultValue,
@@ -38515,6 +38505,7 @@ const CheckboxMultiSelect = ({
 };
 CheckboxMultiSelect.Group = SelectGroup;
 CheckboxMultiSelect.Item = MultiSelectCheckboxItem;
+CheckboxMultiSelect.ItemDescription = SelectItemDescription;
 const $89eedd556c436f6a$var$DEFAULT_ORIENTATION = "horizontal";
 const $89eedd556c436f6a$var$ORIENTATIONS = [
   "horizontal",
@@ -41247,7 +41238,7 @@ const ToastHeader = styled($054eb8030ebde76e$export$f99233281efd08a0).withConfig
   `);
 const ToastDescriptionContainer = 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};
@@ -41291,28 +41282,46 @@ const Toast = ({
       actions.length > 0 && /* @__PURE__ */ jsx(ToastDescriptionContent, { children: actions.map(({
         altText,
         ...btnProps
-      }) => /* @__PURE__ */ jsx($054eb8030ebde76e$export$e19cd5f9376f8cee, { altText, children: /* @__PURE__ */ jsx(Button, { ...btnProps }) })) })
+      }) => /* @__PURE__ */ jsx($054eb8030ebde76e$export$e19cd5f9376f8cee, { altText, asChild: true, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { ...btnProps }) }) }, altText)) })
     ] })
   ] });
 };
 const Viewport = 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] = useState(/* @__PURE__ */ new Map());
+  const [toasts, setToasts] = useState({
+    start: /* @__PURE__ */ new Map(),
+    end: /* @__PURE__ */ new Map()
+  });
   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);
@@ -41321,28 +41330,36 @@ const ToastProvider = ({
   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__ */ jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", ...props, children: [
+  return /* @__PURE__ */ jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: align === "start" ? "left" : "right", ...props, children: [
     /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
       children,
-      Array.from(toasts).map(([id, toast]) => /* @__PURE__ */ jsx(Toast, { ...toast, onClose: onClose(id) }, id))
+      Array.from(toasts[align]).map(([id, toast]) => /* @__PURE__ */ jsx(Toast, { ...toast, onClose: onClose(id) }, id))
     ] }),
-    /* @__PURE__ */ jsx(Viewport, {})
-  ] });
+    /* @__PURE__ */ jsx(Viewport, { $align: align })
+  ] }, `toast-provider-${align}`);
 };
 function listCacheClear$1() {
   this.__data__ = [];
@@ -50875,6 +50892,8 @@ export {
   TextAreaField,
   TextField,
   Title$2 as Title,
+  Toast,
+  ToastProvider,
   Tooltip,
   VerticalStepper,
   WarningAlert,