@next-degree/pickle-shared-js 0.12.6 → 0.13.0

package/dist/components/ui/Combobox.cjs

@@ -41,12 +41,12 @@ var import_react2 = require("react");
 // src/components/primitives/command.tsx
 var import_cmdk = require("cmdk");
 var import_lucide_react2 = require("lucide-react");
-var React2 = __toESM(require("react"), 1);
+var React3 = __toESM(require("react"), 1);
 
 // src/components/primitives/dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_lucide_react = require("lucide-react");
-var React = __toESM(require("react"), 1);
+var React2 = __toESM(require("react"), 1);
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -56,9 +56,8 @@ function cn(...inputs) {
 }
 
 // src/components/primitives/dialog.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -70,31 +69,23 @@ var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-neutral-800 dark:bg-neutral-950 sm:rounded-lg",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
+var DialogContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React2.createElement(DialogPortal, null, /* @__PURE__ */ React2.createElement(DialogOverlay, null), /* @__PURE__ */ React2.createElement(
+  DialogPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-neutral-800 dark:bg-neutral-950 sm:rounded-lg",
+      className
+    ),
+    ...props
+  },
+  children,
+  /* @__PURE__ */ React2.createElement(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" }, /* @__PURE__ */ React2.createElement(import_lucide_react.X, { className: "h-4 w-4" }), /* @__PURE__ */ React2.createElement("span", { className: "sr-only" }, "Close"))
+)));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ React2.createElement("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__ */ (0, import_jsx_runtime.jsx)(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ React2.createElement(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -102,7 +93,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
   DialogPrimitive.Title,
   {
     ref,
@@ -111,7 +102,7 @@ var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
   DialogPrimitive.Description,
   {
     ref,
@@ -122,8 +113,7 @@ var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @_
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/primitives/command.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Command = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var Command = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
   import_cmdk.Command,
   {
     ref,
@@ -135,22 +125,19 @@ var Command = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Command.displayName = import_cmdk.Command.displayName;
-var CommandInput = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_cmdk.Command.Input,
-    {
-      ref,
-      className: cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  )
-] }));
+var CommandInput = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "" }, /* @__PURE__ */ React3.createElement(import_lucide_react2.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ React3.createElement(
+  import_cmdk.Command.Input,
+  {
+    ref,
+    className: cn(
+      "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props
+  }
+)));
 CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var CommandList = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
   import_cmdk.Command.List,
   {
     ref,
@@ -159,9 +146,9 @@ var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandList.displayName = import_cmdk.Command.List.displayName;
-var CommandEmpty = React2.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+var CommandEmpty = React3.forwardRef((props, ref) => /* @__PURE__ */ React3.createElement(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
-var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var CommandGroup = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
   import_cmdk.Command.Group,
   {
     ref,
@@ -173,7 +160,7 @@ var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var CommandSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
   import_cmdk.Command.Separator,
   {
     ref,
@@ -182,7 +169,7 @@ var CommandSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var CommandItem = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
   import_cmdk.Command.Item,
   {
     ref,
@@ -195,7 +182,7 @@ var CommandItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
 ));
 CommandItem.displayName = import_cmdk.Command.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ React3.createElement(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest text-neutral-500", className),
@@ -207,11 +194,10 @@ CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/primitives/popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var React3 = __toESM(require("react"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var React4 = __toESM(require("react"), 1);
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React3.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+var PopoverContent = React4.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React4.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React4.createElement(
   PopoverPrimitive.Content,
   {
     ref,
@@ -223,14 +209,13 @@ var PopoverContent = React3.forwardRef(({ className, align = "center", sideOffse
     ),
     ...props
   }
-) }));
+)));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/primitives/separator.tsx
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
-var React4 = __toESM(require("react"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Separator = React4.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var React5 = __toESM(require("react"), 1);
+var Separator = React5.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React5.createElement(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -248,7 +233,7 @@ Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/ui/Badge.tsx
 var import_cva = require("cva");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var React6 = __toESM(require("react"), 1);
 var badgeVariants = (0, import_cva.cva)("rounded-full px-2 py-0.5 text-xs font-semibold", {
   variants: {
     variant: {
@@ -262,14 +247,13 @@ var badgeVariants = (0, import_cva.cva)("rounded-full px-2 py-0.5 text-xs font-s
   }
 });
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ React6.createElement("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/components/ui/ErrorMessage.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
 function ErrorMessage({ message, className, ...props }) {
   if (!message) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
+  return /* @__PURE__ */ React.createElement("p", { className: cn("px-1 text-xs text-red-600", className), ...props }, message);
 }
 var ErrorMessage_default = ErrorMessage;
 
@@ -278,12 +262,11 @@ var import_lucide_react3 = require("lucide-react");
 
 // src/components/primitives/tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var React5 = __toESM(require("react"), 1);
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var React7 = __toESM(require("react"), 1);
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+var TooltipContent = React7.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   TooltipPrimitive.Content,
   {
     ref,
@@ -298,29 +281,20 @@ var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props },
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/ui/Label.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
 function Label({ text, required, description, className, ...props }) {
   if (!text) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex w-full flex-row gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-      "label",
-      {
-        className: cn(
-          "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-          className
-        ),
-        ...props,
-        children: [
-          text,
-          required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-red-600", children: "\xA0*" })
-        ]
-      }
-    ),
-    !!description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.InfoIcon, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipContent, { className: "max-w-48", children: description })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-row gap-1" }, /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      className: cn(
+        "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      ),
+      ...props
+    },
+    text,
+    required && /* @__PURE__ */ React.createElement("span", { className: "text-red-600" }, "\xA0*")
+  ), !!description && /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(import_lucide_react3.InfoIcon, { className: "h-4 w-4" })), /* @__PURE__ */ React.createElement(TooltipContent, { className: "max-w-48" }, description))));
 }
 var Label_default = Label;
 
@@ -332,8 +306,7 @@ var import_lucide_react6 = require("lucide-react");
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
 var import_lucide_react4 = require("lucide-react");
 var import_react = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var CheckboxToggle = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var CheckboxToggle = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -362,41 +335,32 @@ var CheckboxToggle = (0, import_react.forwardRef)(({ className, ...props }, ref)
       props.disabled && "bg-grey-20 data-[state=checked]:bg-grey-20 data-[state=checked]:text-foreground",
       className
     ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" })
-    ] })
-  }
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current" }, /* @__PURE__ */ React.createElement(import_lucide_react4.Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }), /* @__PURE__ */ React.createElement(import_lucide_react4.Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" }))
 ));
 CheckboxToggle.displayName = CheckboxPrimitive.Root.displayName;
 var Checkbox = (0, import_react.forwardRef)(
   ({ error, classNames, children, ...props }, ref) => {
     const id = props.id ?? `${props.name ?? props.value?.toString()}-checkbox`;
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("flex space-x-2", classNames?.wrapper), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxToggle, { id, ref, ...props }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-        "label",
-        {
-          htmlFor: id,
-          className: cn(
-            "text-sm",
-            props.disabled && "pointer-events-none text-grey-40",
-            classNames?.label
-          ),
-          children: [
-            children,
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorMessage_default, { message: error, className: "mt-1" })
-          ]
-        }
-      )
-    ] });
+    return /* @__PURE__ */ React.createElement("div", { className: cn("flex space-x-2", classNames?.wrapper) }, /* @__PURE__ */ React.createElement(CheckboxToggle, { id, ref, ...props }), /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "text-sm",
+          props.disabled && "pointer-events-none text-grey-40",
+          classNames?.label
+        )
+      },
+      children,
+      /* @__PURE__ */ React.createElement(ErrorMessage_default, { message: error, className: "mt-1" })
+    ));
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/components/ui/ListItem.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
 function ListItem({
   icon,
   hasCheckbox,
@@ -410,12 +374,12 @@ function ListItem({
   const getIconIfValid = (icon2) => {
     if (icon2 in import_lucide_react6.icons) {
       const IconComponent = import_lucide_react6.icons[icon2];
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconComponent, { size: 14 });
+      return /* @__PURE__ */ React.createElement(IconComponent, { size: 14 });
     }
     return null;
   };
   const optionIcon = icon ? getIconIfValid(icon) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ React.createElement(
     "li",
     {
       className: cn(
@@ -423,29 +387,23 @@ function ListItem({
         className
       ),
       ...props,
-      "data-state": isSelected ? "checked" : "unchecked",
-      children: [
-        optionIcon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "mr-2", children: optionIcon }),
-        hasCheckbox && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Checkbox, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-grey-80", children: description })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_lucide_react5.CheckIcon,
-          {
-            className: "absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",
-            size: 16
-          }
-        )
-      ]
-    }
+      "data-state": isSelected ? "checked" : "unchecked"
+    },
+    optionIcon && /* @__PURE__ */ React.createElement("span", { className: "mr-2" }, optionIcon),
+    hasCheckbox && /* @__PURE__ */ React.createElement(Checkbox, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
+    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", null, title), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-grey-80" }, description)),
+    /* @__PURE__ */ React.createElement(
+      import_lucide_react5.CheckIcon,
+      {
+        className: "absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",
+        size: 16
+      }
+    )
   );
 }
 var ListItem_default = ListItem;
 
 // src/components/ui/Combobox.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
 var Combobox = (0, import_react2.forwardRef)((props, ref) => {
   const {
     id,
@@ -516,111 +474,91 @@ var Combobox = (0, import_react2.forwardRef)((props, ref) => {
     const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
     return isDefault ? defaultLabel : label;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex flex-col gap-1", className), children: [
-    isDefault && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      Label_default,
+  return /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col gap-1", className) }, isDefault && /* @__PURE__ */ React.createElement(
+    Label_default,
+    {
+      text: label,
+      htmlFor: name,
+      required,
+      description,
+      className: classNames?.label
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "relative flex" }, /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(
+    PopoverTrigger,
+    {
+      asChild: true,
+      disabled: options.length === 0,
+      "data-testid": `${id ?? name}-combobox-trigger`
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
       {
-        text: label,
-        htmlFor: name,
-        required,
-        description,
-        className: classNames?.label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          PopoverTrigger,
-          {
-            asChild: true,
-            disabled: options.length === 0,
-            "data-testid": `${id ?? name}-combobox-trigger`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-              "div",
-              {
-                ref,
-                className: cn(
-                  triggerVariants({ variant, size }),
-                  isDefault && !isEmpty && "pr-10",
-                  classNames?.trigger
-                ),
-                "aria-expanded": open,
-                children: [
-                  isDefault && IconComponent && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconComponent, { className: "h-4 w-4 shrink-0" }),
-                  isChip && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Badge, { variant: "purple", children: selected.length }),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                    "span",
-                    {
-                      className: cn(
-                        "w-full truncate leading-normal",
-                        isDefault && isEmpty && "text-grey-40"
-                      ),
-                      children: handleDisplayValue()
-                    }
-                  ),
-                  showChevron && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                    import_lucide_react7.ChevronDownIcon,
-                    {
-                      className: "shrink-0 transform group-data-[state=open]:rotate-180",
-                      size: "16"
-                    }
-                  )
-                ]
-              }
-            )
-          }
+        ref,
+        className: cn(
+          triggerVariants({ variant, size }),
+          isDefault && !isEmpty && "pr-10",
+          classNames?.trigger
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          PopoverContent,
-          {
-            className: cn(
-              "flex w-full max-w-xs flex-col overflow-hidden p-0",
-              "max-h-[--radix-popover-content-available-height]",
-              classNames?.content
-            ),
-            collisionPadding: 8,
-            sideOffset: 4,
-            align: "start",
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Command, { children: [
-              !hideSearchBox && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CommandInput, { placeholder: "Search..." }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(CommandList, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CommandEmpty, { children: "No results" }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  CommandItem,
-                  {
-                    value: option.title,
-                    onSelect: () => handleSelect(option.value),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      ListItem_default,
-                      {
-                        className: cn(classNames?.items, "truncate py-1"),
-                        isSelected: selected.some((s) => s.value === option.value),
-                        hasCheckbox: multiselect,
-                        ...option
-                      }
-                    )
-                  },
-                  id2
-                )) })
-              ] }),
-              !!footer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Separator, {}),
-              footer && footer({ close })
-            ] })
-          }
-        )
-      ] }),
-      isDefault && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "button",
+        "aria-expanded": open
+      },
+      isDefault && IconComponent && /* @__PURE__ */ React.createElement(IconComponent, { className: "h-4 w-4 shrink-0" }),
+      isChip && !isEmpty && /* @__PURE__ */ React.createElement(Badge, { variant: "purple" }, selected.length),
+      /* @__PURE__ */ React.createElement(
+        "span",
         {
-          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__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.CircleX, { className: "h-4 w-4 text-green-100" })
+          className: cn(
+            "w-full truncate leading-normal",
+            isDefault && isEmpty && "text-grey-40"
+          )
+        },
+        handleDisplayValue()
+      ),
+      showChevron && /* @__PURE__ */ React.createElement(
+        import_lucide_react7.ChevronDownIcon,
+        {
+          className: "shrink-0 transform group-data-[state=open]:rotate-180",
+          size: "16"
         }
       )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ErrorMessage_default, { message: error })
-  ] });
+    )
+  ), /* @__PURE__ */ React.createElement(
+    PopoverContent,
+    {
+      className: cn(
+        "flex w-full max-w-xs flex-col overflow-hidden p-0",
+        "max-h-[--radix-popover-content-available-height]",
+        classNames?.content
+      ),
+      collisionPadding: 8,
+      sideOffset: 4,
+      align: "start"
+    },
+    /* @__PURE__ */ React.createElement(Command, null, !hideSearchBox && /* @__PURE__ */ React.createElement(CommandInput, { placeholder: "Search..." }), /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandEmpty, null, "No results"), /* @__PURE__ */ React.createElement(CommandGroup, null, options.map(({ id: id2, ...option }) => /* @__PURE__ */ React.createElement(
+      CommandItem,
+      {
+        key: id2,
+        value: option.title,
+        onSelect: () => handleSelect(option.value)
+      },
+      /* @__PURE__ */ React.createElement(
+        ListItem_default,
+        {
+          className: cn(classNames?.items, "truncate py-1"),
+          isSelected: selected.some((s) => s.value === option.value),
+          hasCheckbox: multiselect,
+          ...option
+        }
+      )
+    )))), !!footer && /* @__PURE__ */ React.createElement(Separator, null), footer && footer({ close }))
+  )), isDefault && !isEmpty && /* @__PURE__ */ React.createElement(
+    "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
+    },
+    /* @__PURE__ */ React.createElement(import_lucide_react7.CircleX, { className: "h-4 w-4 text-green-100" })
+  )), /* @__PURE__ */ React.createElement(ErrorMessage_default, { message: error }));
 });
 Combobox.displayName = "Combobox";
 var triggerVariants = (0, import_cva2.cva)(