@clickhouse/click-ui 0.9.1-rc1 → 0.10.0-rc2

package/dist/esm/components/Select/common/InternalSelect.js

@@ -65,9 +65,24 @@ const NoOptionsDisplay = ({
   };
   const isCustomReactNode = typeof noAvailableOptions === "function";
   if (isCustomReactNode) {
-    return /* @__PURE__ */ jsx(Container, { onClick: handleNoOptionsClick, ...containerProps, children: noOptionsNode });
+    return /* @__PURE__ */ jsx(
+      Container,
+      {
+        onClick: handleNoOptionsClick,
+        ...containerProps,
+        children: noOptionsNode
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(SelectNoDataContainer, { onClick: handleNoOptionsClick, $clickable: allowCreateOption, ...containerProps, children: noOptionsNode });
+  return /* @__PURE__ */ jsx(
+    SelectNoDataContainer,
+    {
+      onClick: handleNoOptionsClick,
+      $clickable: allowCreateOption,
+      ...containerProps,
+      children: noOptionsNode
+    }
+  );
 };
 const childrenToNormalizedOptions = (children, register) => {
   return Children.toArray(children).flatMap((child) => {
@@ -76,15 +91,9 @@ const childrenToNormalizedOptions = (children, register) => {
       if (type.displayName === "Select.Group") {
         return childrenToNormalizedOptions(child.props.children, register);
       } else if (type.displayName === "Select.Item") {
-        const {
-          value,
-          disabled
-        } = child.props;
+        const { value, disabled } = child.props;
         register(value, child.props);
-        return {
-          value,
-          disabled
-        };
+        return { value, disabled };
       } else if ("props" in child && child.props.children) {
         return childrenToNormalizedOptions(child.props.children, register);
       }
@@ -138,17 +147,11 @@ const InternalSelect = ({
         if ("options" in option) {
           return (option.options ?? []).map((item) => {
             registerValueNode(item.value, item);
-            return {
-              value: item.value,
-              disabled: item.disabled
-            };
+            return { value: item.value, disabled: item.disabled };
           });
         }
         registerValueNode(option.value, option);
-        return {
-          value: option.value,
-          disabled: option.disabled
-        };
+        return { value: option.value, disabled: option.disabled };
       });
     } else if (children) {
       return childrenToNormalizedOptions(children, registerValueNode);
@@ -184,10 +187,18 @@ const InternalSelect = ({
       return normalizedOptions;
     }
     const searchLowerCase = search.toLowerCase();
-    return normalizedOptions.filter((item) => (searchSource.get(item.value) ?? "").includes(searchLowerCase));
+    return normalizedOptions.filter(
+      (item) => (searchSource.get(item.value) ?? "").includes(searchLowerCase)
+    );
   }, [search, normalizedOptions, searchSource]);
-  const visibleValues = useMemo(() => new Set(matchedOptions.map((o) => o.value)), [matchedOptions]);
-  const navigableValues = useMemo(() => matchedOptions.filter((o) => !o.disabled).map((o) => o.value), [matchedOptions]);
+  const visibleValues = useMemo(
+    () => new Set(matchedOptions.map((o) => o.value)),
+    [matchedOptions]
+  );
+  const navigableValues = useMemo(
+    () => matchedOptions.filter((o) => !o.disabled).map((o) => o.value),
+    [matchedOptions]
+  );
   const effectiveHighlight = highlighted && navigableValues.includes(highlighted) ? highlighted : navigableValues[0];
   const inputRef = useRef(null);
   const inputModalityProps = useInputModality();
@@ -210,7 +221,9 @@ const InternalSelect = ({
       } else if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
         e.preventDefault();
         let nextHighlightedValue = effectiveHighlight;
-        const highlightedIndex = navigableValues.findIndex((value) => value === effectiveHighlight);
+        const highlightedIndex = navigableValues.findIndex(
+          (value) => value === effectiveHighlight
+        );
         if (e.key === "ArrowUp") {
           if (highlightedIndex === 0) {
             nextHighlightedValue = navigableValues[navigableValues.length - 1];
@@ -235,7 +248,10 @@ const InternalSelect = ({
       }
     }
   };
-  const isHidden = useCallback((value) => !visibleValues.has(value ?? ""), [visibleValues]);
+  const isHidden = useCallback(
+    (value) => !visibleValues.has(value ?? ""),
+    [visibleValues]
+  );
   const optionContextValue = useMemo(() => {
     return {
       search,
@@ -253,178 +269,417 @@ const InternalSelect = ({
       onSelect(search, "custom", e);
     }
   };
-  return /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, ...props, children: [
-    /* @__PURE__ */ jsxs(FormElementContainer, { children: [
-      /* @__PURE__ */ jsxs(SelectPopoverRoot, { open, onOpenChange, modal: true, children: [
-        /* @__PURE__ */ jsxs(StyledSelectTrigger, { id: id ?? defaultId, $error: !!error, disabled, "data-testid": "select-trigger", ...triggerProps, children: [
-          /* @__PURE__ */ jsx(SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsx(MultiSelectValue, { disabled: disabled ?? false, onSelect, selectedValues, sortable: !disabled && sortable, valueNode: valueNode.current, onChange }) : /* @__PURE__ */ jsx(SingleSelectValue, { valueNode: checkbox && selectLabel ? {
-            label: selectLabel,
-            value: selectLabel
-          } : valueNode.current.get(selectedValues[0]), value: selectedValues[0] }) }),
-          /* @__PURE__ */ jsx(SvgImage, { name: "sort", size: "sm" })
+  return /* @__PURE__ */ jsxs(
+    FormRoot,
+    {
+      $orientation: orientation,
+      $dir: dir,
+      $addLabelPadding: true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(FormElementContainer, { children: [
+          /* @__PURE__ */ jsxs(
+            SelectPopoverRoot,
+            {
+              open,
+              onOpenChange,
+              modal: true,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  StyledSelectTrigger,
+                  {
+                    id: id ?? defaultId,
+                    $error: !!error,
+                    disabled,
+                    "data-testid": "select-trigger",
+                    ...triggerProps,
+                    children: [
+                      /* @__PURE__ */ jsx(SelectValue, { children: selectedValues.length === 0 ? placeholder : multiple ? /* @__PURE__ */ jsx(
+                        MultiSelectValue,
+                        {
+                          disabled: disabled ?? false,
+                          onSelect,
+                          selectedValues,
+                          sortable: !disabled && sortable,
+                          valueNode: valueNode.current,
+                          onChange
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        SingleSelectValue,
+                        {
+                          valueNode: checkbox && selectLabel ? { label: selectLabel, value: selectLabel } : valueNode.current.get(selectedValues[0]),
+                          value: selectedValues[0]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        SvgImage,
+                        {
+                          name: "sort",
+                          size: "sm"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                form && /* @__PURE__ */ jsx(
+                  HiddenSelectElement,
+                  {
+                    multiple,
+                    name,
+                    form,
+                    value: selectedValues,
+                    onChange: () => null,
+                    children: normalizedOptions.map((item) => /* @__PURE__ */ jsx(
+                      "option",
+                      {
+                        value: item.value,
+                        disabled: item.disabled,
+                        children: item.value
+                      },
+                      item.value
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsx(Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+                  SelectPopoverContent,
+                  {
+                    ...inputModalityProps,
+                    sideOffset: 5,
+                    onFocus,
+                    onCloseAutoFocus: () => {
+                      setSearch("");
+                    },
+                    align: "start",
+                    $useFullWidthItems: useFullWidthItems,
+                    $itemCharacterLimit: itemCharacterLimit,
+                    children: /* @__PURE__ */ jsxs(SelectList, { children: [
+                      /* @__PURE__ */ jsxs(SearchBarContainer, { $showSearch: showSearch, children: [
+                        /* @__PURE__ */ jsx(
+                          SearchBar,
+                          {
+                            ref: inputRef,
+                            value: search,
+                            onChange: (e) => onSearchChange(e.target.value),
+                            "data-testid": "select-search-input",
+                            onKeyDown,
+                            $showSearch: showSearch
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            className: cn(
+                              selectStyles["search-close"],
+                              search.length > 0 && selectStyles["search-close_show-close"]
+                            ),
+                            htmlType: "button",
+                            icon: "cross",
+                            onClick: clearSearch,
+                            "data-testid": "select-search-close",
+                            size: "xs"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        SelectListContent,
+                        {
+                          ref: listNode,
+                          $maxHeight: maxHeight,
+                          children: /* @__PURE__ */ jsx(OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index) => {
+                            if ("options" in props2) {
+                              const { options: itemList = [], ...groupProps } = props2;
+                              return /* @__PURE__ */ jsx(
+                                SelectGroup,
+                                {
+                                  ...groupProps,
+                                  children: itemList.map((itemProps, itemIndex) => {
+                                    if (checkbox) {
+                                      return /* @__PURE__ */ jsx(
+                                        MultiSelectCheckboxItem,
+                                        {
+                                          ...itemProps
+                                        },
+                                        `select-${id}-group-${index}-item-${itemIndex}`
+                                      );
+                                    }
+                                    return /* @__PURE__ */ jsx(
+                                      SelectItem,
+                                      {
+                                        ...itemProps
+                                      },
+                                      `select-${id}-group-${index}-item-${itemIndex}`
+                                    );
+                                  })
+                                },
+                                `select-${id}-group-${index}`
+                              );
+                            } else {
+                              if (checkbox) {
+                                return /* @__PURE__ */ jsx(
+                                  MultiSelectCheckboxItem,
+                                  {
+                                    ...props2
+                                  },
+                                  `select-${id}-item-${index}`
+                                );
+                              }
+                              return /* @__PURE__ */ jsx(
+                                SelectItem,
+                                {
+                                  ...props2
+                                },
+                                `select-${id}-item-${index}`
+                              );
+                            }
+                          }) : children })
+                        }
+                      ),
+                      matchedOptions.length === 0 && (allowCreateOption || !!noAvailableOptions) && /* @__PURE__ */ jsx(
+                        NoOptionsDisplay,
+                        {
+                          allowCreateOption,
+                          search,
+                          customText,
+                          noAvailableOptions,
+                          onCreateOption,
+                          onOpenChange,
+                          containerProps: props
+                        }
+                      )
+                    ] })
+                  }
+                ) })
+              ]
+            }
+          ),
+          !!error && error !== true && /* @__PURE__ */ jsx(Error, { children: error })
         ] }),
-        form && /* @__PURE__ */ jsx(HiddenSelectElement, { multiple, name, form, value: selectedValues, onChange: () => null, children: normalizedOptions.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, disabled: item.disabled, children: item.value }, item.value)) }),
-        /* @__PURE__ */ jsx(Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(SelectPopoverContent, { ...inputModalityProps, sideOffset: 5, onFocus, onCloseAutoFocus: () => {
-          setSearch("");
-        }, align: "start", $useFullWidthItems: useFullWidthItems, $itemCharacterLimit: itemCharacterLimit, children: /* @__PURE__ */ jsxs(SelectList, { children: [
-          /* @__PURE__ */ jsxs(SearchBarContainer, { $showSearch: showSearch, children: [
-            /* @__PURE__ */ jsx(SearchBar, { ref: inputRef, value: search, onChange: (e) => onSearchChange(e.target.value), "data-testid": "select-search-input", onKeyDown, $showSearch: showSearch }),
-            /* @__PURE__ */ jsx(IconButton, { className: cn(selectStyles["search-close"], search.length > 0 && selectStyles["search-close_show-close"]), htmlType: "button", icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", size: "xs" })
-          ] }),
-          /* @__PURE__ */ jsx(SelectListContent, { ref: listNode, $maxHeight: maxHeight, children: /* @__PURE__ */ jsx(OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index) => {
-            if ("options" in props2) {
-              const {
-                options: itemList = [],
-                ...groupProps
-              } = props2;
-              return /* @__PURE__ */ jsx(SelectGroup, { ...groupProps, children: itemList.map((itemProps, itemIndex) => {
-                if (checkbox) {
-                  return /* @__PURE__ */ jsx(MultiSelectCheckboxItem, { ...itemProps }, `select-${id}-group-${index}-item-${itemIndex}`);
-                }
-                return /* @__PURE__ */ jsx(SelectItem, { ...itemProps }, `select-${id}-group-${index}-item-${itemIndex}`);
-              }) }, `select-${id}-group-${index}`);
+        label && /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: id ?? defaultId,
+            disabled,
+            error: !!error,
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+const SelectGroup = forwardRef(
+  ({ children, heading, ...props }, forwardedRef) => {
+    useSearch();
+    return /* @__PURE__ */ jsxs(
+      SelectGroupContainer,
+      {
+        ...props,
+        "cui-select-group": "",
+        ref: mergeRefs([
+          forwardedRef,
+          (node) => {
+            const hidden = node?.querySelectorAll("[cui-select-item]:not([hidden])").length === 0;
+            if (hidden) {
+              node?.setAttribute("hidden", "");
             } else {
-              if (checkbox) {
-                return /* @__PURE__ */ jsx(MultiSelectCheckboxItem, { ...props2 }, `select-${id}-item-${index}`);
-              }
-              return /* @__PURE__ */ jsx(SelectItem, { ...props2 }, `select-${id}-item-${index}`);
+              node?.removeAttribute("hidden");
             }
-          }) : children }) }),
-          matchedOptions.length === 0 && (allowCreateOption || !!noAvailableOptions) && /* @__PURE__ */ jsx(NoOptionsDisplay, { allowCreateOption, search, customText, noAvailableOptions, onCreateOption, onOpenChange, containerProps: props })
-        ] }) }) })
-      ] }),
-      !!error && error !== true && /* @__PURE__ */ jsx(Error, { children: error })
-    ] }),
-    label && /* @__PURE__ */ jsx(Label, { htmlFor: id ?? defaultId, disabled, error: !!error, children: label })
-  ] });
-};
-const SelectGroup = forwardRef(({
-  children,
-  heading,
-  ...props
-}, forwardedRef) => {
-  useSearch();
-  return /* @__PURE__ */ jsxs(SelectGroupContainer, { ...props, "cui-select-group": "", ref: mergeRefs([forwardedRef, (node) => {
-    const hidden = node?.querySelectorAll("[cui-select-item]:not([hidden])").length === 0;
-    if (hidden) {
-      node?.setAttribute("hidden", "");
-    } else {
-      node?.removeAttribute("hidden");
-    }
-    node?.setAttribute("aria-hidden", hidden.toString());
-  }]), children: [
-    /* @__PURE__ */ jsx(SelectGroupName, { "cui-select-group-name": "", children: heading }),
-    /* @__PURE__ */ jsx(SelectGroupContent, { children })
-  ] });
-});
+            node?.setAttribute("aria-hidden", hidden.toString());
+          }
+        ]),
+        children: [
+          /* @__PURE__ */ jsx(SelectGroupName, { "cui-select-group-name": "", children: heading }),
+          /* @__PURE__ */ jsx(SelectGroupContent, { children })
+        ]
+      }
+    );
+  }
+);
 SelectGroup.displayName = "Select.Group";
-const SelectItem = forwardRef(({
-  disabled = false,
-  children,
-  label,
-  description,
-  separator,
-  onSelect: onSelectProp,
-  value = "",
-  icon,
-  iconDir,
-  onMouseOver: onMouseOverProp,
-  ...props
-}, forwardedRef) => {
-  const {
-    highlighted,
-    updateHighlighted,
-    isHidden,
-    selectedValues,
-    onSelect
-  } = useOption();
-  const onSelectValue = (evt) => {
-    if (!disabled) {
-      onSelect(value, void 0, evt);
-      if (typeof onSelectProp == "function") {
-        onSelectProp(value, void 0, evt);
+const SelectItem = forwardRef(
+  ({
+    disabled = false,
+    children,
+    label,
+    description,
+    separator,
+    onSelect: onSelectProp,
+    value = "",
+    icon,
+    iconDir,
+    onMouseOver: onMouseOverProp,
+    ...props
+  }, forwardedRef) => {
+    const { highlighted, updateHighlighted, isHidden, selectedValues, onSelect } = useOption();
+    const onSelectValue = (evt) => {
+      if (!disabled) {
+        onSelect(value, void 0, evt);
+        if (typeof onSelectProp == "function") {
+          onSelectProp(value, void 0, evt);
+        }
       }
-    }
-  };
-  const onMouseOver = (e) => {
-    if (onMouseOverProp) {
-      onMouseOverProp(e);
-    }
-    if (!disabled) {
-      updateHighlighted(value);
-    }
-  };
-  const hidden = isHidden(value);
-  const isChecked = selectedValues.includes(value);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(GenericMenuItem, { ...props, hidden, className: cn(selectStyles["select-item"], props.className), "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, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        label,
-        description && /* @__PURE__ */ jsx(SelectItemDescription, { children: description })
-      ] }) : children }),
-      /* @__PURE__ */ jsx(SvgImage, { className: cn(selectStyles["check-icon"], isChecked && selectStyles["check-icon_show-check"]), name: "check", size: "sm" })
-    ] }),
-    separator && !hidden && /* @__PURE__ */ jsx(Separator, { size: "sm" })
-  ] });
-});
+    };
+    const onMouseOver = (e) => {
+      if (onMouseOverProp) {
+        onMouseOverProp(e);
+      }
+      if (!disabled) {
+        updateHighlighted(value);
+      }
+    };
+    const hidden = isHidden(value);
+    const isChecked = selectedValues.includes(value);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        GenericMenuItem,
+        {
+          ...props,
+          hidden,
+          className: cn(selectStyles["select-item"], props.className),
+          "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,
+              {
+                icon,
+                iconDir,
+                gap: "xxs",
+                isResponsive: false,
+                children: label ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  label,
+                  description && /* @__PURE__ */ jsx(SelectItemDescription, { children: description })
+                ] }) : children
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SvgImage,
+              {
+                className: cn(
+                  selectStyles["check-icon"],
+                  isChecked && selectStyles["check-icon_show-check"]
+                ),
+                name: "check",
+                size: "sm"
+              }
+            )
+          ]
+        }
+      ),
+      separator && !hidden && /* @__PURE__ */ jsx(Separator, { size: "sm" })
+    ] });
+  }
+);
 SelectItem.displayName = "Select.Item";
-const MultiSelectCheckboxItem = forwardRef(({
-  disabled = false,
-  children,
-  icon,
-  iconDir = "end",
-  label,
-  description,
-  onMouseOver: onMouseOverProp,
-  onSelect: onSelectProp,
-  separator,
-  value = "",
-  variant,
-  ...props
-}, forwardedRef) => {
-  const {
-    highlighted,
-    updateHighlighted,
-    isHidden,
-    selectedValues,
-    onSelect
-  } = useOption();
-  const handleMenuItemClick = (evt) => {
-    if (!disabled) {
-      onSelect(value, void 0, evt);
-      if (typeof onSelectProp === "function") {
-        onSelectProp(value, void 0, evt);
+const MultiSelectCheckboxItem = forwardRef(
+  ({
+    disabled = false,
+    children,
+    icon,
+    iconDir = "end",
+    label,
+    description,
+    onMouseOver: onMouseOverProp,
+    onSelect: onSelectProp,
+    separator,
+    value = "",
+    variant,
+    ...props
+  }, forwardedRef) => {
+    const { highlighted, updateHighlighted, isHidden, selectedValues, onSelect } = useOption();
+    const handleMenuItemClick = (evt) => {
+      if (!disabled) {
+        onSelect(value, void 0, evt);
+        if (typeof onSelectProp === "function") {
+          onSelectProp(value, void 0, evt);
+        }
       }
-    }
-  };
-  const handleMenuItemMouseOver = (e) => {
-    if (onMouseOverProp) {
-      onMouseOverProp(e);
-    }
-    if (!disabled) {
-      updateHighlighted(value);
-    }
-  };
-  const hidden = isHidden(value);
-  const isChecked = selectedValues.includes(value);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(GenericMenuItem, { ...props, hidden, className: cn(selectStyles["select-item"], props.className), "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", overflow: "hidden", isResponsive: false, children: [
-      /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, variant: variant ?? "default" }),
-      /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        label,
-        description && /* @__PURE__ */ jsx(SelectItemDescription, { children: description })
-      ] }) : children })
-    ] }) }),
-    separator && !hidden && /* @__PURE__ */ jsx(Separator, { size: "sm" })
-  ] });
-});
+    };
+    const handleMenuItemMouseOver = (e) => {
+      if (onMouseOverProp) {
+        onMouseOverProp(e);
+      }
+      if (!disabled) {
+        updateHighlighted(value);
+      }
+    };
+    const hidden = isHidden(value);
+    const isChecked = selectedValues.includes(value);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        GenericMenuItem,
+        {
+          ...props,
+          hidden,
+          className: cn(selectStyles["select-item"], props.className),
+          "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",
+              overflow: "hidden",
+              isResponsive: false,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: isChecked,
+                    "data-testid": "multi-select-checkbox",
+                    disabled,
+                    variant: variant ?? "default"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconWrapper,
+                  {
+                    icon,
+                    iconDir,
+                    gap: "xxs",
+                    isResponsive: false,
+                    children: label ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      label,
+                      description && /* @__PURE__ */ jsx(SelectItemDescription, { children: description })
+                    ] }) : children
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      separator && !hidden && /* @__PURE__ */ jsx(Separator, { size: "sm" })
+    ] });
+  }
+);
 MultiSelectCheckboxItem.displayName = "Select.Item";
-const SelectItemDescription = forwardRef(({
-  children,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */ jsx(Text, { ref, component: SelectItemDescriptionText, color: "muted", ...props, children });
-});
+const SelectItemDescription = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        ref,
+        component: SelectItemDescriptionText,
+        color: "muted",
+        ...props,
+        children
+      }
+    );
+  }
+);
 SelectItemDescription.displayName = "Select.ItemDescription";
 
 export { InternalSelect, MultiSelectCheckboxItem, SelectGroup, SelectItem, SelectItemDescription };