@next-degree/pickle-shared-js 0.3.21 → 0.3.23

package/dist/index.js

@@ -15,11 +15,19 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/components/ui/Label.tsx
+// src/components/ui/ErrorMessage.tsx
 import { jsx } from "react/jsx-runtime";
+function ErrorMessage({ message, className, ...props }) {
+  if (!message) return null;
+  return /* @__PURE__ */ jsx("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
+}
+var ErrorMessage_default = ErrorMessage;
+
+// src/components/ui/Label.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 function Label({ text, className, ...props }) {
   if (!text) return null;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "label",
     {
       className: cn(
@@ -36,8 +44,8 @@ var Label_default = Label;
 // src/components/ui/Chip.tsx
 import { cva } from "cva";
 import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsx2("div", { className: twMerge2(chipVariants({ variant, size, className })), ...props });
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsx3("div", { className: twMerge2(chipVariants({ variant, size, className })), ...props });
 var chipVariants = cva(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
   variants: {
     variant: {
@@ -62,8 +70,8 @@ var Chip_default = Chip;
 // src/components/primitives/separator.tsx
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as React from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx3(
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx4(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -80,9 +88,9 @@ var Separator = React.forwardRef(({ className, orientation = "horizontal", decor
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/ui/Select.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 var Select = forwardRef2(
-  ({ label, options, placeholder, multiselect, classNames, ...props }, ref) => {
+  ({ label, options, placeholder, multiselect, classNames, error, id, ...props }, ref) => {
     const { value, defaultValue, dir, className, onChange, ...rest } = props;
     const [selected, setSelected] = useState([]);
     const [open, setOpen] = useState(false);
@@ -112,104 +120,115 @@ var Select = forwardRef2(
       });
       onChange?.(multiselect ? newSelected : newValue);
     }
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col space-y-2", className), ref: containerRef, children: [
-      /* @__PURE__ */ jsx4(Label_default, { text: label, className: classNames?.label }),
-      /* @__PURE__ */ jsxs(
-        SelectPrimitive.Root,
-        {
-          open,
-          value: selected.join(","),
-          onOpenChange: handleOnOpenChange,
-          onValueChange: multiselect ? void 0 : handleChange,
-          defaultValue: typeof defaultValue === "string" ? defaultValue : void 0,
-          dir: dir === "rtl" ? "rtl" : "ltr",
-          ...rest,
-          children: [
-            /* @__PURE__ */ jsxs(
-              SelectPrimitive.Trigger,
-              {
-                ref,
-                "data-testid": `${label.toLowerCase()}-select-element`,
-                className: "group flex min-w-80 flex-row items-center justify-between gap-3 rounded-lg border border-grey-20 px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40",
-                children: [
-                  /* @__PURE__ */ jsx4("span", { className: "truncate", children: /* @__PURE__ */ jsx4(
-                    SelectPrimitive.Value,
-                    {
-                      placeholder: placeholder ?? "Select an option",
-                      "aria-label": handleLabels(),
-                      children: handleLabels()
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx4(
-                    ChevronDownIcon,
-                    {
-                      className: "transform text-black group-data-[state=open]:rotate-180",
-                      size: "16"
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx4(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsx4(
-              SelectPrimitive.Content,
-              {
-                hideWhenDetached: true,
-                className: "z-10 max-h-[var(--radix-select-content-available-height)] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md bg-white py-2 shadow-lg",
-                position: "popper",
-                sideOffset: 4,
-                onPointerDownOutside: toggleOpen,
-                onKeyDown: closeOnEscape,
-                children: /* @__PURE__ */ jsxs(SelectPrimitive.Viewport, { children: [
-                  multiselect && !!chipLabels?.length && /* @__PURE__ */ jsx4(
-                    SelectPrimitive.Group,
-                    {
-                      className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
-                      "data-testid": "selected-labels",
-                      children: chipLabels?.map(
-                        (chip) => chip && /* @__PURE__ */ jsxs(Chip_default, { size: "small", variant: "primary", children: [
-                          /* @__PURE__ */ jsx4("span", { children: chip.title }),
-                          /* @__PURE__ */ jsx4(
-                            X,
-                            {
-                              size: 18,
-                              "data-testid": `chip-remove-${chip.value}`,
-                              className: "cursor-pointer",
-                              onClick: () => handleChange(chip.value)
-                            }
-                          )
-                        ] }, chip.title)
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex flex-col space-y-1", className),
+        ref: containerRef,
+        "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
+        children: [
+          /* @__PURE__ */ jsx5(Label_default, { text: label, className: classNames?.label }),
+          /* @__PURE__ */ jsxs(
+            SelectPrimitive.Root,
+            {
+              open,
+              value: selected.join(","),
+              onOpenChange: handleOnOpenChange,
+              onValueChange: multiselect ? void 0 : handleChange,
+              defaultValue: typeof defaultValue === "string" ? defaultValue : void 0,
+              dir: dir === "rtl" ? "rtl" : "ltr",
+              ...rest,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  SelectPrimitive.Trigger,
+                  {
+                    ref,
+                    className: cn(
+                      "group flex h-11 min-w-80 flex-row items-center justify-between gap-3 rounded-lg border px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40",
+                      classNames?.trigger
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx5("span", { className: "truncate", children: /* @__PURE__ */ jsx5(
+                        SelectPrimitive.Value,
+                        {
+                          placeholder: placeholder ?? "Select an option",
+                          "aria-label": handleLabels(),
+                          children: handleLabels()
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx5(
+                        ChevronDownIcon,
+                        {
+                          className: "transform text-black group-data-[state=open]:rotate-180",
+                          size: "16"
+                        }
                       )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx4(Separator, {}),
-                  options?.map(({ id, title, value: value2 }) => /* @__PURE__ */ jsxs(
-                    SelectPrimitive.Item,
-                    {
-                      value: value2,
-                      className: "group relative cursor-pointer px-4 py-2 text-left text-sm hover:bg-purple-50 focus:bg-purple-50 focus:outline-none data-[state=checked]:bg-purple-50 data-[state=checked]:pr-10 data-[state=checked]:text-purple-100",
-                      "data-state": selected.includes(value2) ? "checked" : "unchecked",
-                      onKeyDown: (e) => setValueOnEnter(e, value2),
-                      onClick: () => handleChange(value2),
-                      children: [
-                        /* @__PURE__ */ jsx4(SelectPrimitive.ItemText, { children: title }),
-                        /* @__PURE__ */ jsx4(
-                          CheckIcon,
-                          {
-                            className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
-                            size: 16
-                          }
-                        )
-                      ]
-                    },
-                    id
-                  ))
-                ] })
-              }
-            ) })
-          ]
-        }
-      )
-    ] });
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsx5(
+                  SelectPrimitive.Content,
+                  {
+                    hideWhenDetached: true,
+                    className: "z-10 max-h-[var(--radix-select-content-available-height)] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md bg-white py-2 shadow-lg",
+                    position: "popper",
+                    sideOffset: 4,
+                    onPointerDownOutside: toggleOpen,
+                    onKeyDown: closeOnEscape,
+                    children: /* @__PURE__ */ jsxs(SelectPrimitive.Viewport, { children: [
+                      multiselect && !!chipLabels?.length && /* @__PURE__ */ jsx5(
+                        SelectPrimitive.Group,
+                        {
+                          className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
+                          "data-testid": "selected-labels",
+                          children: chipLabels?.map(
+                            (chip) => chip && /* @__PURE__ */ jsxs(Chip_default, { size: "small", variant: "primary", children: [
+                              /* @__PURE__ */ jsx5("span", { children: chip.title }),
+                              /* @__PURE__ */ jsx5(
+                                X,
+                                {
+                                  size: 18,
+                                  "data-testid": `chip-remove-${chip.value}`,
+                                  className: "cursor-pointer",
+                                  onClick: () => handleChange(chip.value)
+                                }
+                              )
+                            ] }, chip.title)
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx5(Separator, {}),
+                      options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ jsxs(
+                        SelectPrimitive.Item,
+                        {
+                          value: value2,
+                          className: "group relative cursor-pointer px-4 py-2 text-left text-sm hover:bg-purple-50 focus:bg-purple-50 focus:outline-none data-[state=checked]:bg-purple-50 data-[state=checked]:pr-10 data-[state=checked]:text-purple-100",
+                          "data-state": selected.includes(value2) ? "checked" : "unchecked",
+                          onKeyDown: (e) => setValueOnEnter(e, value2),
+                          onClick: () => handleChange(value2),
+                          children: [
+                            /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children: title }),
+                            /* @__PURE__ */ jsx5(
+                              CheckIcon,
+                              {
+                                className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
+                                size: 16
+                              }
+                            )
+                          ]
+                        },
+                        id2
+                      ))
+                    ] })
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx5(ErrorMessage_default, { message: error, className: "mt-1" })
+        ]
+      }
+    );
   }
 );
 Select.displayName = "Select";
@@ -221,8 +240,8 @@ import { Check, Minus } from "lucide-react";
 import {
   forwardRef as forwardRef3
 } from "react";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var CheckboxToggle = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var CheckboxToggle = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -253,8 +272,8 @@ var CheckboxToggle = forwardRef3(({ className, ...props }, ref) => /* @__PURE__
     ),
     ...props,
     children: /* @__PURE__ */ jsxs2(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
-      /* @__PURE__ */ jsx5(Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
-      /* @__PURE__ */ jsx5(Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" })
+      /* @__PURE__ */ jsx6(Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
+      /* @__PURE__ */ jsx6(Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" })
     ] })
   }
 ));
@@ -265,8 +284,8 @@ var Checkbox = forwardRef3(
     const id = props.id ?? `${props.name ?? props.value?.toString()}-checkbox`;
     const labelClassName = disabled ? "text-grey-40 pointer-events-none" : "";
     return /* @__PURE__ */ jsxs2("div", { className: cn("flex space-x-2", classNames?.wrapper), children: [
-      /* @__PURE__ */ jsx5(CheckboxToggle, { id, disabled, ref, ...props }),
-      /* @__PURE__ */ jsx5("label", { htmlFor: id, className: cn(labelClassName, classNames?.label), children })
+      /* @__PURE__ */ jsx6(CheckboxToggle, { id, disabled, ref, ...props }),
+      /* @__PURE__ */ jsx6("label", { htmlFor: id, className: cn(labelClassName, classNames?.label), children })
     ] });
   }
 );
@@ -276,7 +295,7 @@ var Checkbox_default = Checkbox;
 // src/components/ui/ListItem.tsx
 import { CheckIcon as CheckIcon2 } from "lucide-react";
 import { icons } from "lucide-react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function ListItem({
   icon,
   hasCheckbox,
@@ -290,7 +309,7 @@ function ListItem({
   const getIconIfValid = (icon2) => {
     if (icon2 in icons) {
       const IconComponent = icons[icon2];
-      return /* @__PURE__ */ jsx6(IconComponent, { size: 14 });
+      return /* @__PURE__ */ jsx7(IconComponent, { size: 14 });
     }
     return null;
   };
@@ -305,13 +324,13 @@ function ListItem({
       ...props,
       "data-state": isSelected ? "checked" : "unchecked",
       children: [
-        optionIcon && /* @__PURE__ */ jsx6("span", { className: "mr-2", children: optionIcon }),
-        hasCheckbox && /* @__PURE__ */ jsx6(Checkbox_default, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
+        optionIcon && /* @__PURE__ */ jsx7("span", { className: "mr-2", children: optionIcon }),
+        hasCheckbox && /* @__PURE__ */ jsx7(Checkbox_default, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
         /* @__PURE__ */ jsxs3("div", { children: [
-          /* @__PURE__ */ jsx6("p", { children: title }),
-          /* @__PURE__ */ jsx6("p", { className: "text-xs text-grey-80", children: description })
+          /* @__PURE__ */ jsx7("p", { children: title }),
+          /* @__PURE__ */ jsx7("p", { className: "text-xs text-grey-80", children: description })
         ] }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           CheckIcon2,
           {
             className: "absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",
@@ -328,11 +347,11 @@ var ListItem_default = ListItem;
 import { Slot } from "@radix-ui/react-slot";
 import { cva as cva2 } from "cva";
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var Button = forwardRef4(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Component = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       Component,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -447,9 +466,9 @@ import * as React4 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X as X2 } from "lucide-react";
 import * as React3 from "react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -462,7 +481,7 @@ var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(DialogPortal, { children: [
-  /* @__PURE__ */ jsx8(DialogOverlay, {}),
+  /* @__PURE__ */ jsx9(DialogOverlay, {}),
   /* @__PURE__ */ jsxs4(
     DialogPrimitive.Content,
     {
@@ -475,17 +494,17 @@ var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) =
       children: [
         children,
         /* @__PURE__ */ jsxs4(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400", children: [
-          /* @__PURE__ */ jsx8(X2, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx8("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ jsx9(X2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx8("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx9("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx8(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx9(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -493,7 +512,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx8(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
   DialogPrimitive.Title,
   {
     ref,
@@ -502,7 +521,7 @@ var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
   DialogPrimitive.Description,
   {
     ref,
@@ -513,8 +532,8 @@ var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/primitives/command.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   CommandPrimitive,
   {
     ref,
@@ -527,8 +546,8 @@ var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 ));
 Command.displayName = CommandPrimitive.displayName;
 var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs5("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx9(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx9(
+  /* @__PURE__ */ jsx10(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx10(
     CommandPrimitive.Input,
     {
       ref,
@@ -541,7 +560,7 @@ var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PUR
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   CommandPrimitive.List,
   {
     ref,
@@ -550,9 +569,9 @@ var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React4.forwardRef((props, ref) => /* @__PURE__ */ jsx9(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+var CommandEmpty = React4.forwardRef((props, ref) => /* @__PURE__ */ jsx10(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   CommandPrimitive.Group,
   {
     ref,
@@ -564,7 +583,7 @@ var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   CommandPrimitive.Separator,
   {
     ref,
@@ -573,7 +592,7 @@ var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   CommandPrimitive.Item,
   {
     ref,
@@ -586,7 +605,7 @@ var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
 ));
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest text-neutral-500", className),
@@ -599,10 +618,10 @@ CommandShortcut.displayName = "CommandShortcut";
 // src/components/primitives/popover.tsx
 import * as React5 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx10(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx10(
+var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx11(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
   PopoverPrimitive.Content,
   {
     ref,
@@ -619,7 +638,7 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/ui/Badge.tsx
 import { cva as cva3 } from "cva";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var badgeVariants = cva3("rounded-full px-2 py-0.5 text-xs font-semibold", {
   variants: {
     variant: {
@@ -633,11 +652,11 @@ var badgeVariants = cva3("rounded-full px-2 py-0.5 text-xs font-semibold", {
   }
 });
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx11("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ jsx12("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/components/ui/Combobox.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var Combobox = forwardRef8((props, ref) => {
   const {
     value,
@@ -691,10 +710,10 @@ var Combobox = forwardRef8((props, ref) => {
     return isDefault ? defaultLabel : label;
   };
   return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col gap-2", className), children: [
-    isDefault && label && /* @__PURE__ */ jsx12(Label_default, { text: label, className: classNames?.label }),
+    isDefault && label && /* @__PURE__ */ jsx13(Label_default, { text: label, className: classNames?.label }),
     /* @__PURE__ */ jsxs6("div", { className: "relative flex", children: [
       /* @__PURE__ */ jsxs6(Popover, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           PopoverTrigger,
           {
             asChild: true,
@@ -711,9 +730,9 @@ var Combobox = forwardRef8((props, ref) => {
                 ),
                 "aria-expanded": open,
                 children: [
-                  isDefault && IconComponent && /* @__PURE__ */ jsx12(IconComponent, { className: "h-4 w-4 shrink-0" }),
-                  isChip && !isEmpty && /* @__PURE__ */ jsx12(Badge, { variant: "purple", children: selected.length }),
-                  /* @__PURE__ */ jsx12(
+                  isDefault && IconComponent && /* @__PURE__ */ jsx13(IconComponent, { className: "h-4 w-4 shrink-0" }),
+                  isChip && !isEmpty && /* @__PURE__ */ jsx13(Badge, { variant: "purple", children: selected.length }),
+                  /* @__PURE__ */ jsx13(
                     "span",
                     {
                       className: cn(
@@ -723,7 +742,7 @@ var Combobox = forwardRef8((props, ref) => {
                       children: handleDisplayValue()
                     }
                   ),
-                  showChevron && /* @__PURE__ */ jsx12(
+                  showChevron && /* @__PURE__ */ jsx13(
                     ChevronDownIcon2,
                     {
                       className: "shrink-0 transform group-data-[state=open]:rotate-180",
@@ -735,7 +754,7 @@ var Combobox = forwardRef8((props, ref) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           PopoverContent,
           {
             className: cn(
@@ -747,32 +766,40 @@ var Combobox = forwardRef8((props, ref) => {
             sideOffset: 4,
             align: "start",
             children: /* @__PURE__ */ jsxs6(Command, { children: [
-              !hideSearchBox && /* @__PURE__ */ jsx12(CommandInput, { placeholder: "Search..." }),
+              !hideSearchBox && /* @__PURE__ */ jsx13(CommandInput, { placeholder: "Search..." }),
               /* @__PURE__ */ jsxs6(CommandList, { children: [
-                /* @__PURE__ */ jsx12(CommandEmpty, { children: "No results" }),
-                /* @__PURE__ */ jsx12(CommandGroup, { children: options.map(({ id, ...option }) => /* @__PURE__ */ jsx12(CommandItem, { value: option.title, onSelect: handleSelect, children: /* @__PURE__ */ jsx12(
-                  ListItem_default,
+                /* @__PURE__ */ jsx13(CommandEmpty, { children: "No results" }),
+                /* @__PURE__ */ jsx13(CommandGroup, { children: options.map(({ id, ...option }) => /* @__PURE__ */ jsx13(
+                  CommandItem,
                   {
-                    className: cn(classNames?.items, "truncate py-1"),
-                    isSelected: selected.some((s) => s.value === option.value),
-                    hasCheckbox: multiselect,
-                    ...option
-                  }
-                ) }, id)) })
+                    value: option.title,
+                    onSelect: () => handleSelect(option.value),
+                    children: /* @__PURE__ */ jsx13(
+                      ListItem_default,
+                      {
+                        className: cn(classNames?.items, "truncate py-1"),
+                        isSelected: selected.some((s) => s.value === option.value),
+                        hasCheckbox: multiselect,
+                        ...option
+                      }
+                    )
+                  },
+                  id
+                )) })
               ] }),
-              !!footer && /* @__PURE__ */ jsx12(Separator, {}),
+              !!footer && /* @__PURE__ */ jsx13(Separator, {}),
               footer && footer({ close })
             ] })
           }
         )
       ] }),
-      isDefault && !isEmpty && /* @__PURE__ */ jsx12(
+      isDefault && !isEmpty && /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
           className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
           onClick: handleClear,
-          children: /* @__PURE__ */ jsx12(CircleX, { className: "h-4 w-4 text-green-100" })
+          children: /* @__PURE__ */ jsx13(CircleX, { className: "h-4 w-4 text-green-100" })
         }
       )
     ] })