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

package/dist/components/ui/Combobox.js

@@ -8,12 +8,12 @@ import { forwardRef as forwardRef7, useEffect, useRef, useState } from "react";
 // src/components/primitives/command.tsx
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
-import * as React2 from "react";
+import * as React3 from "react";
 
 // src/components/primitives/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
-import * as React from "react";
+import * as React2 from "react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -23,9 +23,8 @@ function cn(...inputs) {
 }
 
 // src/components/primitives/dialog.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -37,31 +36,23 @@ var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ 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__ */ 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__ */ jsx(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ 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(X, { className: "h-4 w-4" }), /* @__PURE__ */ React2.createElement("span", { className: "sr-only" }, "Close"))
+)));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ 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__ */ 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),
@@ -69,7 +60,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
   DialogPrimitive.Title,
   {
     ref,
@@ -78,7 +69,7 @@ var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
   DialogPrimitive.Description,
   {
     ref,
@@ -89,8 +80,7 @@ var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @_
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/primitives/command.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Command = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var Command = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
   CommandPrimitive,
   {
     ref,
@@ -102,22 +92,19 @@ var Command = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Command.displayName = CommandPrimitive.displayName;
-var CommandInput = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs2("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx2(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx2(
-    CommandPrimitive.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(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ React3.createElement(
+  CommandPrimitive.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 = CommandPrimitive.Input.displayName;
-var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var CommandList = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
   CommandPrimitive.List,
   {
     ref,
@@ -126,9 +113,9 @@ var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React2.forwardRef((props, ref) => /* @__PURE__ */ jsx2(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+var CommandEmpty = React3.forwardRef((props, ref) => /* @__PURE__ */ React3.createElement(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var CommandGroup = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
   CommandPrimitive.Group,
   {
     ref,
@@ -140,7 +127,7 @@ var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var CommandSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
   CommandPrimitive.Separator,
   {
     ref,
@@ -149,7 +136,7 @@ var CommandSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var CommandItem = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
   CommandPrimitive.Item,
   {
     ref,
@@ -162,7 +149,7 @@ var CommandItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
 ));
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ React3.createElement(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest text-neutral-500", className),
@@ -174,11 +161,10 @@ CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/primitives/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React3 from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import * as React4 from "react";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React3.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+var PopoverContent = React4.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React4.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React4.createElement(
   PopoverPrimitive.Content,
   {
     ref,
@@ -190,14 +176,13 @@ var PopoverContent = React3.forwardRef(({ className, align = "center", sideOffse
     ),
     ...props
   }
-) }));
+)));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/primitives/separator.tsx
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React4 from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Separator = React4.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx4(
+import * as React5 from "react";
+var Separator = React5.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React5.createElement(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -215,7 +200,7 @@ Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/ui/Badge.tsx
 import { cva } from "cva";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import * as React6 from "react";
 var badgeVariants = cva("rounded-full px-2 py-0.5 text-xs font-semibold", {
   variants: {
     variant: {
@@ -229,14 +214,13 @@ var badgeVariants = cva("rounded-full px-2 py-0.5 text-xs font-semibold", {
   }
 });
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx5("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ React6.createElement("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/components/ui/ErrorMessage.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
 function ErrorMessage({ message, className, ...props }) {
   if (!message) return null;
-  return /* @__PURE__ */ jsx6("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;
 
@@ -245,12 +229,11 @@ import { InfoIcon } from "lucide-react";
 
 // src/components/primitives/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React5 from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import * as React7 from "react";
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx7(
+var TooltipContent = React7.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   TooltipPrimitive.Content,
   {
     ref,
@@ -265,29 +248,20 @@ var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props },
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/ui/Label.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 function Label({ text, required, description, className, ...props }) {
   if (!text) return null;
-  return /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-row gap-1", children: [
-    /* @__PURE__ */ jsxs3(
-      "label",
-      {
-        className: cn(
-          "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-          className
-        ),
-        ...props,
-        children: [
-          text,
-          required && /* @__PURE__ */ jsx8("span", { className: "text-red-600", children: "\xA0*" })
-        ]
-      }
-    ),
-    !!description && /* @__PURE__ */ jsx8(TooltipProvider, { children: /* @__PURE__ */ jsxs3(Tooltip, { children: [
-      /* @__PURE__ */ jsx8(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx8(InfoIcon, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ jsx8(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(InfoIcon, { className: "h-4 w-4" })), /* @__PURE__ */ React.createElement(TooltipContent, { className: "max-w-48" }, description))));
 }
 var Label_default = Label;
 
@@ -301,8 +275,7 @@ import { Check, Minus } from "lucide-react";
 import {
   forwardRef as forwardRef6
 } from "react";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-var CheckboxToggle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var CheckboxToggle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -331,41 +304,32 @@ var CheckboxToggle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__
       props.disabled && "bg-grey-20 data-[state=checked]:bg-grey-20 data-[state=checked]:text-foreground",
       className
     ),
-    ...props,
-    children: /* @__PURE__ */ jsxs4(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
-      /* @__PURE__ */ jsx9(Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
-      /* @__PURE__ */ jsx9(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(Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }), /* @__PURE__ */ React.createElement(Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" }))
 ));
 CheckboxToggle.displayName = CheckboxPrimitive.Root.displayName;
 var Checkbox = forwardRef6(
   ({ error, classNames, children, ...props }, ref) => {
     const id = props.id ?? `${props.name ?? props.value?.toString()}-checkbox`;
-    return /* @__PURE__ */ jsxs4("div", { className: cn("flex space-x-2", classNames?.wrapper), children: [
-      /* @__PURE__ */ jsx9(CheckboxToggle, { id, ref, ...props }),
-      /* @__PURE__ */ jsxs4(
-        "label",
-        {
-          htmlFor: id,
-          className: cn(
-            "text-sm",
-            props.disabled && "pointer-events-none text-grey-40",
-            classNames?.label
-          ),
-          children: [
-            children,
-            /* @__PURE__ */ jsx9(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
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function ListItem({
   icon,
   hasCheckbox,
@@ -379,12 +343,12 @@ function ListItem({
   const getIconIfValid = (icon2) => {
     if (icon2 in icons) {
       const IconComponent = icons[icon2];
-      return /* @__PURE__ */ jsx10(IconComponent, { size: 14 });
+      return /* @__PURE__ */ React.createElement(IconComponent, { size: 14 });
     }
     return null;
   };
   const optionIcon = icon ? getIconIfValid(icon) : void 0;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ React.createElement(
     "li",
     {
       className: cn(
@@ -392,29 +356,23 @@ function ListItem({
         className
       ),
       ...props,
-      "data-state": isSelected ? "checked" : "unchecked",
-      children: [
-        optionIcon && /* @__PURE__ */ jsx10("span", { className: "mr-2", children: optionIcon }),
-        hasCheckbox && /* @__PURE__ */ jsx10(Checkbox, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
-        /* @__PURE__ */ jsxs5("div", { children: [
-          /* @__PURE__ */ jsx10("p", { children: title }),
-          /* @__PURE__ */ jsx10("p", { className: "text-xs text-grey-80", children: description })
-        ] }),
-        /* @__PURE__ */ jsx10(
-          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(
+      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
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var Combobox = forwardRef7((props, ref) => {
   const {
     id,
@@ -485,111 +443,91 @@ var Combobox = forwardRef7((props, ref) => {
     const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
     return isDefault ? defaultLabel : label;
   };
-  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col gap-1", className), children: [
-    isDefault && /* @__PURE__ */ jsx11(
-      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__ */ jsxs6("div", { className: "relative flex", children: [
-      /* @__PURE__ */ jsxs6(Popover, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ jsx11(
-          PopoverTrigger,
-          {
-            asChild: true,
-            disabled: options.length === 0,
-            "data-testid": `${id ?? name}-combobox-trigger`,
-            children: /* @__PURE__ */ jsxs6(
-              "div",
-              {
-                ref,
-                className: cn(
-                  triggerVariants({ variant, size }),
-                  isDefault && !isEmpty && "pr-10",
-                  classNames?.trigger
-                ),
-                "aria-expanded": open,
-                children: [
-                  isDefault && IconComponent && /* @__PURE__ */ jsx11(IconComponent, { className: "h-4 w-4 shrink-0" }),
-                  isChip && !isEmpty && /* @__PURE__ */ jsx11(Badge, { variant: "purple", children: selected.length }),
-                  /* @__PURE__ */ jsx11(
-                    "span",
-                    {
-                      className: cn(
-                        "w-full truncate leading-normal",
-                        isDefault && isEmpty && "text-grey-40"
-                      ),
-                      children: handleDisplayValue()
-                    }
-                  ),
-                  showChevron && /* @__PURE__ */ jsx11(
-                    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__ */ jsx11(
-          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__ */ jsxs6(Command, { children: [
-              !hideSearchBox && /* @__PURE__ */ jsx11(CommandInput, { placeholder: "Search..." }),
-              /* @__PURE__ */ jsxs6(CommandList, { children: [
-                /* @__PURE__ */ jsx11(CommandEmpty, { children: "No results" }),
-                /* @__PURE__ */ jsx11(CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ jsx11(
-                  CommandItem,
-                  {
-                    value: option.title,
-                    onSelect: () => handleSelect(option.value),
-                    children: /* @__PURE__ */ jsx11(
-                      ListItem_default,
-                      {
-                        className: cn(classNames?.items, "truncate py-1"),
-                        isSelected: selected.some((s) => s.value === option.value),
-                        hasCheckbox: multiselect,
-                        ...option
-                      }
-                    )
-                  },
-                  id2
-                )) })
-              ] }),
-              !!footer && /* @__PURE__ */ jsx11(Separator, {}),
-              footer && footer({ close })
-            ] })
-          }
-        )
-      ] }),
-      isDefault && !isEmpty && /* @__PURE__ */ jsx11(
-        "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__ */ jsx11(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(
+        ChevronDownIcon,
+        {
+          className: "shrink-0 transform group-data-[state=open]:rotate-180",
+          size: "16"
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx11(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(CircleX, { className: "h-4 w-4 text-green-100" })
+  )), /* @__PURE__ */ React.createElement(ErrorMessage_default, { message: error }));
 });
 Combobox.displayName = "Combobox";
 var triggerVariants = cva2(