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

package/dist/index.js

@@ -24,10 +24,10 @@ function ErrorMessage({ message, className, ...props }) {
 var ErrorMessage_default = ErrorMessage;
 
 // src/components/ui/Label.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function Label({ text, className, ...props }) {
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Label({ text, required, className, ...props }) {
   if (!text) return null;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs(
     "label",
     {
       className: cn(
@@ -35,7 +35,10 @@ function Label({ text, className, ...props }) {
         className
       ),
       ...props,
-      children: text
+      children: [
+        text,
+        required && /* @__PURE__ */ jsx2("span", { className: "text-red-600", children: "\xA0*" })
+      ]
     }
   );
 }
@@ -88,7 +91,7 @@ var Separator = React.forwardRef(({ className, orientation = "horizontal", decor
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/ui/Select.tsx
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var Select = forwardRef2(
   ({ label, options, placeholder, multiselect, classNames, error, id, ...props }, ref) => {
     const { value, defaultValue, dir, className, onChange, ...rest } = props;
@@ -120,7 +123,7 @@ var Select = forwardRef2(
       });
       onChange?.(multiselect ? newSelected : newValue);
     }
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs2(
       "div",
       {
         className: cn("flex flex-col space-y-1", className),
@@ -128,7 +131,7 @@ var Select = forwardRef2(
         "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
         children: [
           /* @__PURE__ */ jsx5(Label_default, { text: label, className: classNames?.label }),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs2(
             SelectPrimitive.Root,
             {
               open,
@@ -139,7 +142,7 @@ var Select = forwardRef2(
               dir: dir === "rtl" ? "rtl" : "ltr",
               ...rest,
               children: [
-                /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsxs2(
                   SelectPrimitive.Trigger,
                   {
                     ref,
@@ -175,14 +178,14 @@ var Select = forwardRef2(
                     sideOffset: 4,
                     onPointerDownOutside: toggleOpen,
                     onKeyDown: closeOnEscape,
-                    children: /* @__PURE__ */ jsxs(SelectPrimitive.Viewport, { children: [
+                    children: /* @__PURE__ */ jsxs2(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: [
+                            (chip) => chip && /* @__PURE__ */ jsxs2(Chip_default, { size: "small", variant: "primary", children: [
                               /* @__PURE__ */ jsx5("span", { children: chip.title }),
                               /* @__PURE__ */ jsx5(
                                 X,
@@ -198,7 +201,7 @@ var Select = forwardRef2(
                         }
                       ),
                       /* @__PURE__ */ jsx5(Separator, {}),
-                      options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ jsxs(
+                      options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ jsxs2(
                         SelectPrimitive.Item,
                         {
                           value: value2,
@@ -240,7 +243,7 @@ import { Check, Minus } from "lucide-react";
 import {
   forwardRef as forwardRef3
 } from "react";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var CheckboxToggle = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   CheckboxPrimitive.Root,
   {
@@ -271,7 +274,7 @@ var CheckboxToggle = forwardRef3(({ className, ...props }, ref) => /* @__PURE__
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxs2(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
+    children: /* @__PURE__ */ jsxs3(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
       /* @__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" })
     ] })
@@ -283,7 +286,7 @@ var Checkbox = forwardRef3(
     const { disabled } = props;
     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: [
+    return /* @__PURE__ */ jsxs3("div", { className: cn("flex space-x-2", classNames?.wrapper), children: [
       /* @__PURE__ */ jsx6(CheckboxToggle, { id, disabled, ref, ...props }),
       /* @__PURE__ */ jsx6("label", { htmlFor: id, className: cn(labelClassName, classNames?.label), children })
     ] });
@@ -295,7 +298,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 jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function ListItem({
   icon,
   hasCheckbox,
@@ -314,7 +317,7 @@ function ListItem({
     return null;
   };
   const optionIcon = icon ? getIconIfValid(icon) : void 0;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "li",
     {
       className: cn(
@@ -326,7 +329,7 @@ function ListItem({
       children: [
         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__ */ jsxs4("div", { children: [
           /* @__PURE__ */ jsx7("p", { children: title }),
           /* @__PURE__ */ jsx7("p", { className: "text-xs text-grey-80", children: description })
         ] }),
@@ -343,15 +346,115 @@ function ListItem({
 }
 var ListItem_default = ListItem;
 
-// src/components/ui/Button.tsx
-import { Slot } from "@radix-ui/react-slot";
+// src/components/ui/Input.tsx
 import { cva as cva2 } from "cva";
+import { icons as icons2, X as X2 } from "lucide-react";
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Button = forwardRef4(
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var Input = forwardRef4(
+  ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
+    const handleClear = () => {
+      onChange?.({ target: { value: "" } });
+      onClear?.();
+    };
+    const IconComponent = icon && icons2[icon];
+    const placeholder = props.placeholder ?? (icon === "Search" ? "Search..." : "");
+    const hasIcon = !!icon;
+    const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
+    return /* @__PURE__ */ jsxs5("div", { className: "group flex w-full flex-col", "data-testid": `input-wrapper-${props.id}`, children: [
+      label && /* @__PURE__ */ jsx8(Label_default, { text: label, htmlFor: props.name, className: cn("body mb-1", classNames?.label) }),
+      /* @__PURE__ */ jsxs5("div", { className: "relative flex flex-row items-center", children: [
+        IconComponent && /* @__PURE__ */ jsx8(
+          IconComponent,
+          {
+            className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "input",
+          {
+            className: cn(inputVariants({ theme, hasIcon })),
+            ref,
+            placeholder,
+            value,
+            onChange,
+            "data-testid": `input-element-${props.id}`,
+            ...props
+          }
+        ),
+        hasIcon && value && /* @__PURE__ */ jsx8(
+          X2,
+          {
+            className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
+            onClick: handleClear,
+            "data-testid": "clear-button"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx8(ErrorMessage_default, { message: error, className: "mt-1" })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var inputVariants = cva2(
+  [
+    "border-input",
+    "placeholder:text-muted-foreground",
+    "focus-visible:ring-ring",
+    "inline-flex",
+    "w-full",
+    "h-11",
+    "items-center",
+    "justify-start",
+    "gap-3",
+    "rounded-lg",
+    "bg-transparent",
+    "px-3",
+    "pt-0.5",
+    "text-sm",
+    "shadow-sm",
+    "ring-grey-50",
+    "transition-colors",
+    "focus-visible:outline-none",
+    "focus-visible:ring-1",
+    "disabled:cursor-not-allowed",
+    "disabled:opacity-50",
+    "appearance-none",
+    "[&::-webkit-search-cancel-button]:appearance-none",
+    "[&::-webkit-search-decoration]:appearance-none",
+    "[&::-webkit-search-results-button]:appearance-none",
+    "[&::-webkit-search-results-decoration]:appearance-none",
+    "[&::-ms-clear]:display-none",
+    "[&::-ms-reveal]:display-none"
+  ],
+  {
+    variants: {
+      theme: {
+        light: "text-grey-80 border",
+        dark: "text-white"
+      },
+      hasIcon: {
+        false: "pl-3",
+        true: "pl-8"
+      }
+    },
+    defaultVariants: {
+      theme: "light",
+      hasIcon: false
+    }
+  }
+);
+var Input_default = Input;
+
+// src/components/ui/Button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva3 } from "cva";
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Button = forwardRef5(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Component = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       Component,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -362,7 +465,7 @@ var Button = forwardRef4(
   }
 );
 Button.displayName = "Button";
-var buttonVariants = cva2(
+var buttonVariants = cva3(
   [
     "flex",
     "items-center",
@@ -453,9 +556,9 @@ var buttonVariants = cva2(
 );
 
 // src/components/ui/Combobox.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect2, useState as useState2 } from "react";
-import { ChevronDownIcon as ChevronDownIcon2, CircleX, icons as icons2 } from "lucide-react";
-import { cva as cva4 } from "cva";
+import { forwardRef as forwardRef9, useEffect as useEffect2, useState as useState2 } from "react";
+import { ChevronDownIcon as ChevronDownIcon2, CircleX, icons as icons3 } from "lucide-react";
+import { cva as cva5 } from "cva";
 
 // src/components/primitives/command.tsx
 import { Command as CommandPrimitive } from "cmdk";
@@ -464,11 +567,11 @@ import * as React4 from "react";
 
 // src/components/primitives/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X as X2 } from "lucide-react";
+import { X as X3 } from "lucide-react";
 import * as React3 from "react";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -480,9 +583,9 @@ 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__ */ jsx9(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs4(
+var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(DialogPortal, { children: [
+  /* @__PURE__ */ jsx10(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs6(
     DialogPrimitive.Content,
     {
       ref,
@@ -493,18 +596,18 @@ var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) =
       ...props,
       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__ */ jsx9(X2, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ jsxs6(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__ */ jsx10(X3, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx9("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx10("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__ */ jsx9(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx10(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -512,7 +615,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx9(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   DialogPrimitive.Title,
   {
     ref,
@@ -521,7 +624,7 @@ var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   DialogPrimitive.Description,
   {
     ref,
@@ -532,8 +635,8 @@ var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/primitives/command.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   CommandPrimitive,
   {
     ref,
@@ -545,9 +648,9 @@ 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__ */ jsx10(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx10(
+var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs7("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx11(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx11(
     CommandPrimitive.Input,
     {
       ref,
@@ -560,7 +663,7 @@ var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PUR
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   CommandPrimitive.List,
   {
     ref,
@@ -569,9 +672,9 @@ var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React4.forwardRef((props, ref) => /* @__PURE__ */ jsx10(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+var CommandEmpty = React4.forwardRef((props, ref) => /* @__PURE__ */ jsx11(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   CommandPrimitive.Group,
   {
     ref,
@@ -583,7 +686,7 @@ var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   CommandPrimitive.Separator,
   {
     ref,
@@ -592,7 +695,7 @@ var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   CommandPrimitive.Item,
   {
     ref,
@@ -605,7 +708,7 @@ var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
 ));
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest text-neutral-500", className),
@@ -618,10 +721,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 jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx11(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
+var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx12(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
   PopoverPrimitive.Content,
   {
     ref,
@@ -637,9 +740,9 @@ var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffse
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/ui/Badge.tsx
-import { cva as cva3 } from "cva";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var badgeVariants = cva3("rounded-full px-2 py-0.5 text-xs font-semibold", {
+import { cva as cva4 } from "cva";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var badgeVariants = cva4("rounded-full px-2 py-0.5 text-xs font-semibold", {
   variants: {
     variant: {
       green: "bg-green-90 text-white",
@@ -652,12 +755,12 @@ var badgeVariants = cva3("rounded-full px-2 py-0.5 text-xs font-semibold", {
   }
 });
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx12("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ jsx13("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/components/ui/Combobox.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
-var Combobox = forwardRef8((props, ref) => {
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var Combobox = forwardRef9((props, ref) => {
   const {
     value,
     label,
@@ -674,7 +777,7 @@ var Combobox = forwardRef8((props, ref) => {
   } = props;
   const [selected, setSelected] = useState2([]);
   const [open, setOpen] = useState2(false);
-  const IconComponent = icon && icons2[icon];
+  const IconComponent = icon && icons3[icon];
   const hideSearchBox = options?.length <= 5;
   const isDefault = variant === "default";
   const isChip = variant === "chip";
@@ -709,17 +812,17 @@ var Combobox = forwardRef8((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-2", className), children: [
-    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__ */ jsx13(
+  return /* @__PURE__ */ jsxs8("div", { className: cn("flex flex-col gap-2", className), children: [
+    isDefault && label && /* @__PURE__ */ jsx14(Label_default, { text: label, className: classNames?.label }),
+    /* @__PURE__ */ jsxs8("div", { className: "relative flex", children: [
+      /* @__PURE__ */ jsxs8(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx14(
           PopoverTrigger,
           {
             asChild: true,
             disabled: options.length === 0,
             "data-testid": `${props.id ?? props.name}-combobox-trigger`,
-            children: /* @__PURE__ */ jsxs6(
+            children: /* @__PURE__ */ jsxs8(
               "div",
               {
                 ref,
@@ -730,9 +833,9 @@ var Combobox = forwardRef8((props, ref) => {
                 ),
                 "aria-expanded": open,
                 children: [
-                  isDefault && IconComponent && /* @__PURE__ */ jsx13(IconComponent, { className: "h-4 w-4 shrink-0" }),
-                  isChip && !isEmpty && /* @__PURE__ */ jsx13(Badge, { variant: "purple", children: selected.length }),
-                  /* @__PURE__ */ jsx13(
+                  isDefault && IconComponent && /* @__PURE__ */ jsx14(IconComponent, { className: "h-4 w-4 shrink-0" }),
+                  isChip && !isEmpty && /* @__PURE__ */ jsx14(Badge, { variant: "purple", children: selected.length }),
+                  /* @__PURE__ */ jsx14(
                     "span",
                     {
                       className: cn(
@@ -742,7 +845,7 @@ var Combobox = forwardRef8((props, ref) => {
                       children: handleDisplayValue()
                     }
                   ),
-                  showChevron && /* @__PURE__ */ jsx13(
+                  showChevron && /* @__PURE__ */ jsx14(
                     ChevronDownIcon2,
                     {
                       className: "shrink-0 transform group-data-[state=open]:rotate-180",
@@ -754,7 +857,7 @@ var Combobox = forwardRef8((props, ref) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           PopoverContent,
           {
             className: cn(
@@ -765,16 +868,16 @@ var Combobox = forwardRef8((props, ref) => {
             collisionPadding: 8,
             sideOffset: 4,
             align: "start",
-            children: /* @__PURE__ */ jsxs6(Command, { children: [
-              !hideSearchBox && /* @__PURE__ */ jsx13(CommandInput, { placeholder: "Search..." }),
-              /* @__PURE__ */ jsxs6(CommandList, { children: [
-                /* @__PURE__ */ jsx13(CommandEmpty, { children: "No results" }),
-                /* @__PURE__ */ jsx13(CommandGroup, { children: options.map(({ id, ...option }) => /* @__PURE__ */ jsx13(
+            children: /* @__PURE__ */ jsxs8(Command, { children: [
+              !hideSearchBox && /* @__PURE__ */ jsx14(CommandInput, { placeholder: "Search..." }),
+              /* @__PURE__ */ jsxs8(CommandList, { children: [
+                /* @__PURE__ */ jsx14(CommandEmpty, { children: "No results" }),
+                /* @__PURE__ */ jsx14(CommandGroup, { children: options.map(({ id, ...option }) => /* @__PURE__ */ jsx14(
                   CommandItem,
                   {
                     value: option.title,
                     onSelect: () => handleSelect(option.value),
-                    children: /* @__PURE__ */ jsx13(
+                    children: /* @__PURE__ */ jsx14(
                       ListItem_default,
                       {
                         className: cn(classNames?.items, "truncate py-1"),
@@ -787,26 +890,26 @@ var Combobox = forwardRef8((props, ref) => {
                   id
                 )) })
               ] }),
-              !!footer && /* @__PURE__ */ jsx13(Separator, {}),
+              !!footer && /* @__PURE__ */ jsx14(Separator, {}),
               footer && footer({ close })
             ] })
           }
         )
       ] }),
-      isDefault && !isEmpty && /* @__PURE__ */ jsx13(
+      isDefault && !isEmpty && /* @__PURE__ */ jsx14(
         "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__ */ jsx13(CircleX, { className: "h-4 w-4 text-green-100" })
+          children: /* @__PURE__ */ jsx14(CircleX, { className: "h-4 w-4 text-green-100" })
         }
       )
     ] })
   ] });
 });
 Combobox.displayName = "Combobox";
-var triggerVariants = cva4(
+var triggerVariants = cva5(
   "group relative cursor-pointer text-green-100 flex flex-row items-center justify-between gap-2 border border-grey-20 focus:outline-green-80 disabled:bg-grey-5",
   {
     variants: {
@@ -837,6 +940,7 @@ export {
   Checkbox_default as Checkbox,
   Chip_default as Chip,
   Combobox,
+  Input_default as Input,
   Label_default as Label,
   ListItem_default as ListItem,
   Select_default as Select,