@next-degree/pickle-shared-js 0.3.27 → 0.4.31

package/dist/index.js

@@ -2,7 +2,7 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, X } from "lucide-react";
 import {
-  forwardRef as forwardRef2,
+  forwardRef as forwardRef3,
   useEffect,
   useRef,
   useState
@@ -23,32 +23,60 @@ function ErrorMessage({ message, className, ...props }) {
 }
 var ErrorMessage_default = ErrorMessage;
 
+// src/components/primitives/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx2(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
 // src/components/ui/Label.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function Label({ text, required, className, ...props }) {
+import { InfoIcon } from "lucide-react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Label({ text, required, description, className, ...props }) {
   if (!text) return null;
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: cn(
-        "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-        className
-      ),
-      ...props,
-      children: [
-        text,
-        required && /* @__PURE__ */ jsx2("span", { className: "text-red-600", children: "\xA0*" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row gap-1", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          className
+        ),
+        ...props,
+        children: [
+          text,
+          required && /* @__PURE__ */ jsx3("span", { className: "text-red-600", children: "\xA0*" })
+        ]
+      }
+    ),
+    !!description && /* @__PURE__ */ jsx3(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(InfoIcon, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx3(TooltipContent, { className: "max-w-48", children: description })
+    ] }) })
+  ] });
 }
 var Label_default = Label;
 
 // src/components/ui/Chip.tsx
 import { cva } from "cva";
 import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsx3("div", { className: twMerge2(chipVariants({ variant, size, className })), ...props });
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsx4("div", { className: twMerge2(chipVariants({ variant, size, className })), ...props });
 var chipVariants = cva(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
   variants: {
     variant: {
@@ -72,9 +100,9 @@ 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 jsx4 } from "react/jsx-runtime";
-var Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx4(
+import * as React2 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Separator = React2.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx5(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -91,9 +119,9 @@ var Separator = React.forwardRef(({ className, orientation = "horizontal", decor
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/ui/Select.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var Select = forwardRef2(
-  ({ label, options, placeholder, multiselect, classNames, error, id, ...props }, ref) => {
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var Select = forwardRef3(
+  ({ label, options, placeholder, multiselect, description, classNames, error, id, ...props }, ref) => {
     const { value, defaultValue, dir, className, onChange, ...rest } = props;
     const [selected, setSelected] = useState([]);
     const [open, setOpen] = useState(false);
@@ -126,16 +154,17 @@ var Select = forwardRef2(
     return /* @__PURE__ */ jsxs2(
       "div",
       {
-        className: cn("flex flex-col gap-1", className),
+        className: cn("flex w-full flex-col gap-1", className),
         ref: containerRef,
         "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
         children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             Label_default,
             {
               text: label,
               htmlFor: props.name,
               required: props.required,
+              description,
               className: classNames?.label
             }
           ),
@@ -155,11 +184,11 @@ var Select = forwardRef2(
                   {
                     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",
+                      "group flex h-11 w-full 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(
+                      /* @__PURE__ */ jsx6("span", { className: "truncate", children: /* @__PURE__ */ jsx6(
                         SelectPrimitive.Value,
                         {
                           placeholder: placeholder ?? "Select an option",
@@ -167,7 +196,7 @@ var Select = forwardRef2(
                           children: handleLabels()
                         }
                       ) }),
-                      /* @__PURE__ */ jsx5(
+                      /* @__PURE__ */ jsx6(
                         ChevronDownIcon,
                         {
                           className: "transform text-black group-data-[state=open]:rotate-180",
@@ -177,7 +206,7 @@ var Select = forwardRef2(
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx5(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ jsx6(
                   SelectPrimitive.Content,
                   {
                     hideWhenDetached: true,
@@ -187,15 +216,15 @@ var Select = forwardRef2(
                     onPointerDownOutside: toggleOpen,
                     onKeyDown: closeOnEscape,
                     children: /* @__PURE__ */ jsxs2(SelectPrimitive.Viewport, { children: [
-                      multiselect && !!chipLabels?.length && /* @__PURE__ */ jsx5(
+                      multiselect && !!chipLabels?.length && /* @__PURE__ */ jsx6(
                         SelectPrimitive.Group,
                         {
                           className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
                           "data-testid": "selected-labels",
                           children: chipLabels?.map(
                             (chip) => chip && /* @__PURE__ */ jsxs2(Chip_default, { size: "small", variant: "primary", children: [
-                              /* @__PURE__ */ jsx5("span", { children: chip.title }),
-                              /* @__PURE__ */ jsx5(
+                              /* @__PURE__ */ jsx6("span", { children: chip.title }),
+                              /* @__PURE__ */ jsx6(
                                 X,
                                 {
                                   size: 18,
@@ -208,7 +237,7 @@ var Select = forwardRef2(
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx5(Separator, {}),
+                      /* @__PURE__ */ jsx6(Separator, {}),
                       options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ jsxs2(
                         SelectPrimitive.Item,
                         {
@@ -218,8 +247,8 @@ var Select = forwardRef2(
                           onKeyDown: (e) => setValueOnEnter(e, value2),
                           onClick: () => handleChange(value2),
                           children: [
-                            /* @__PURE__ */ jsx5(SelectPrimitive.ItemText, { children: title }),
-                            /* @__PURE__ */ jsx5(
+                            /* @__PURE__ */ jsx6(SelectPrimitive.ItemText, { children: title }),
+                            /* @__PURE__ */ jsx6(
                               CheckIcon,
                               {
                                 className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
@@ -236,7 +265,7 @@ var Select = forwardRef2(
               ]
             }
           ),
-          /* @__PURE__ */ jsx5(ErrorMessage_default, { message: error })
+          /* @__PURE__ */ jsx6(ErrorMessage_default, { message: error })
         ]
       }
     );
@@ -249,10 +278,10 @@ var Select_default = Select;
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check, Minus } from "lucide-react";
 import {
-  forwardRef as forwardRef3
+  forwardRef as forwardRef4
 } from "react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var CheckboxToggle = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var CheckboxToggle = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -283,20 +312,20 @@ var CheckboxToggle = forwardRef3(({ className, ...props }, ref) => /* @__PURE__
     ),
     ...props,
     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" })
+      /* @__PURE__ */ jsx7(Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
+      /* @__PURE__ */ jsx7(Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" })
     ] })
   }
 ));
 CheckboxToggle.displayName = CheckboxPrimitive.Root.displayName;
-var Checkbox = forwardRef3(
+var Checkbox = forwardRef4(
   ({ classNames, children, ...props }, ref) => {
     const { disabled } = props;
     const id = props.id ?? `${props.name ?? props.value?.toString()}-checkbox`;
     const labelClassName = disabled ? "text-grey-40 pointer-events-none" : "";
     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 })
+      /* @__PURE__ */ jsx7(CheckboxToggle, { id, disabled, ref, ...props }),
+      /* @__PURE__ */ jsx7("label", { htmlFor: id, className: cn(labelClassName, classNames?.label), children })
     ] });
   }
 );
@@ -306,7 +335,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 jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function ListItem({
   icon,
   hasCheckbox,
@@ -320,7 +349,7 @@ function ListItem({
   const getIconIfValid = (icon2) => {
     if (icon2 in icons) {
       const IconComponent = icons[icon2];
-      return /* @__PURE__ */ jsx7(IconComponent, { size: 14 });
+      return /* @__PURE__ */ jsx8(IconComponent, { size: 14 });
     }
     return null;
   };
@@ -335,13 +364,13 @@ function ListItem({
       ...props,
       "data-state": isSelected ? "checked" : "unchecked",
       children: [
-        optionIcon && /* @__PURE__ */ jsx7("span", { className: "mr-2", children: optionIcon }),
-        hasCheckbox && /* @__PURE__ */ jsx7(Checkbox_default, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
+        optionIcon && /* @__PURE__ */ jsx8("span", { className: "mr-2", children: optionIcon }),
+        hasCheckbox && /* @__PURE__ */ jsx8(Checkbox_default, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
         /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx7("p", { children: title }),
-          /* @__PURE__ */ jsx7("p", { className: "text-xs text-grey-80", children: description })
+          /* @__PURE__ */ jsx8("p", { children: title }),
+          /* @__PURE__ */ jsx8("p", { className: "text-xs text-grey-80", children: description })
         ] }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           CheckIcon2,
           {
             className: "absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",
@@ -357,10 +386,10 @@ var ListItem_default = ListItem;
 // 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, jsxs as jsxs5 } from "react/jsx-runtime";
-var Input = forwardRef4(
-  ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var Input = forwardRef5(
+  ({ label, error, description, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
     const handleClear = () => {
       onChange?.({ target: { value: "" } });
       onClear?.();
@@ -370,23 +399,24 @@ var Input = forwardRef4(
     const hasIcon = !!icon;
     const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
     return /* @__PURE__ */ jsxs5("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
-      label && /* @__PURE__ */ jsx8(
+      label && /* @__PURE__ */ jsx9(
         Label_default,
         {
           text: label,
           htmlFor: props.name,
           required: props.required,
+          description,
           className: classNames?.label
         }
       ),
       /* @__PURE__ */ jsxs5("div", { className: "relative flex flex-row items-center", children: [
-        IconComponent && /* @__PURE__ */ jsx8(
+        IconComponent && /* @__PURE__ */ jsx9(
           IconComponent,
           {
             className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "input",
           {
             className: cn(inputVariants({ theme, hasIcon })),
@@ -398,7 +428,7 @@ var Input = forwardRef4(
             ...props
           }
         ),
-        hasIcon && value && /* @__PURE__ */ jsx8(
+        hasIcon && value && /* @__PURE__ */ jsx9(
           X2,
           {
             className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
@@ -407,7 +437,7 @@ var Input = forwardRef4(
           }
         )
       ] }),
-      /* @__PURE__ */ jsx8(ErrorMessage_default, { message: error })
+      /* @__PURE__ */ jsx9(ErrorMessage_default, { message: error })
     ] });
   }
 );
@@ -462,120 +492,6 @@ var inputVariants = cva2(
 );
 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__ */ jsx9(
-      Component,
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var buttonVariants = cva3(
-  [
-    "flex",
-    "items-center",
-    "justify-center",
-    "gap-2",
-    "rounded-full",
-    "font-bold",
-    "outline-2",
-    "outline-offset-2",
-    "outline-dashed",
-    "outline-transparent"
-  ],
-  {
-    variants: {
-      variant: {
-        neutral: [
-          "bg-black",
-          "text-white",
-          "hover:bg-grey-90",
-          "active:bg-grey-80",
-          "focus:outline-purple-100",
-          "disabled:text-grey-40",
-          "disabled:bg-grey-10"
-        ],
-        primary: [
-          "bg-pickle-100",
-          "text-black",
-          "hover:bg-pickle-80",
-          "active:bg-pickle-60",
-          "focus:outline-purple-100",
-          "disabled:text-grey-40",
-          "disabled:bg-grey-10"
-        ],
-        secondary: [
-          "bg-green-80",
-          "text-white",
-          "hover:bg-green-90",
-          "active:bg-green-100",
-          "focus:outline-pickle-100",
-          "disabled:text-grey-40",
-          "disabled:bg-grey-10"
-        ],
-        transparent: [
-          "text-white",
-          "hover:bg-green-80",
-          "active:bg-green-100",
-          "focus:outline-pickle-100",
-          "disabled:text-grey-40"
-        ],
-        link: [
-          "leading-tight",
-          "text-black",
-          "underline",
-          "hover:text-purple-100",
-          "focus:text-black",
-          "focus:outline-purple-100",
-          "active:text-purple-80"
-        ]
-      },
-      size: {
-        small: ["h-10", "text-sm", "px-4", "py-2"],
-        medium: ["h-12", "text-base", "px-6", "py-3"],
-        large: ["h-14", "text-lg", "px-8", "py-4"]
-      }
-    },
-    defaultVariants: {
-      variant: "neutral",
-      size: "medium"
-    },
-    compoundVariants: [
-      {
-        variant: "link",
-        size: "small",
-        class: ["h-3", "text-xs", "p-0"]
-      },
-      {
-        variant: "link",
-        size: "medium",
-        class: ["h-4", "text-sm", "p-0"]
-      },
-      {
-        variant: "link",
-        size: "large",
-        class: ["h-6", "text-base", "p-0"]
-      }
-    ]
-  }
-);
-
-// src/components/ui/Combobox.tsx
-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";
 import { Search } from "lucide-react";
@@ -734,13 +650,246 @@ var CommandShortcut = ({ className, ...props }) => {
 };
 CommandShortcut.displayName = "CommandShortcut";
 
+// src/lib/google.ts
+import { Client, PlaceAutocompleteType } from "@googlemaps/google-maps-services-js";
+var client = new Client();
+var autocomplete = async (input, key) => {
+  try {
+    const response = await client.placeAutocomplete({
+      params: { input, key, types: PlaceAutocompleteType.address }
+    });
+    return response.data.predictions;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// src/components/ui/PlacesQueryInput.tsx
+import { CircleX, LoaderCircle } from "lucide-react";
+import { useState as useState2, useCallback, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function PlacesQueryInput({
+  apiKey,
+  selected,
+  onSelect,
+  className
+}) {
+  const [predictions, setPredictions] = useState2(null);
+  const [input, setInput] = useState2(selected?.description ?? "");
+  const [isLoadingPredictions, setIsLoadingPredictions] = useState2(false);
+  const [shouldOpenUpward, setShouldOpenUpward] = useState2(false);
+  const timeoutRef = useRef2(null);
+  const inputRef = useRef2(null);
+  const debouncedAutocomplete = useCallback((value) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(async () => {
+      if (value.length > 2) {
+        setIsLoadingPredictions(true);
+        const fetchedPredictions = await autocomplete(value, apiKey);
+        fetchedPredictions && setIsLoadingPredictions(false);
+        setPredictions(fetchedPredictions ?? []);
+      } else {
+        setPredictions(null);
+      }
+    }, 300);
+  }, []);
+  const handleInputChange = (value) => {
+    setInput(value);
+    debouncedAutocomplete(value);
+  };
+  const handleSelect = (prediction) => {
+    onSelect(prediction);
+    setPredictions(null);
+    setInput(prediction.description);
+  };
+  const handleClear = () => {
+    onSelect();
+    setPredictions(null);
+    setInput("");
+  };
+  const handleBlur = () => setTimeout(() => setPredictions(null), 200);
+  useEffect2(() => {
+    const checkDropdownPosition = () => {
+      if (inputRef.current) {
+        const rect = inputRef.current.getBoundingClientRect();
+        const windowHeight = window.innerHeight;
+        setShouldOpenUpward(rect.bottom + 200 > windowHeight);
+      }
+    };
+    checkDropdownPosition();
+    window.addEventListener("resize", checkDropdownPosition);
+    return () => window.removeEventListener("resize", checkDropdownPosition);
+  }, []);
+  return /* @__PURE__ */ jsx12("div", { className: cn("relative w-full", className), ref: inputRef, onBlur: handleBlur, children: /* @__PURE__ */ jsxs8(Command, { children: [
+    /* @__PURE__ */ jsxs8("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx12(
+        CommandInput,
+        {
+          placeholder: "Type an address to search...",
+          value: input,
+          onValueChange: handleInputChange,
+          className: "truncate pr-8"
+        }
+      ),
+      isLoadingPredictions && /* @__PURE__ */ jsx12(LoaderCircle, { className: "absolute inset-y-0 right-2 my-auto flex h-8 w-8 animate-spin items-center justify-center rounded-full text-green-100" }),
+      input && /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: "absolute inset-y-0 right-2 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" })
+        }
+      )
+    ] }),
+    predictions && /* @__PURE__ */ jsxs8(
+      CommandList,
+      {
+        className: cn(
+          "absolute z-50 w-full rounded-md border bg-white shadow-lg",
+          shouldOpenUpward ? "bottom-full" : "top-full"
+        ),
+        children: [
+          /* @__PURE__ */ jsx12(CommandEmpty, { children: "No results" }),
+          /* @__PURE__ */ jsx12(CommandGroup, { children: predictions.map((prediction) => /* @__PURE__ */ jsx12(
+            CommandItem,
+            {
+              onSelect: () => handleSelect(prediction),
+              className: "truncate",
+              children: prediction.description
+            },
+            prediction.place_id
+          )) })
+        ]
+      }
+    )
+  ] }) });
+}
+var PlacesQueryInput_default = PlacesQueryInput;
+
+// src/components/ui/Button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva3 } from "cva";
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Button = forwardRef8(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx13(
+      Component,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var buttonVariants = cva3(
+  [
+    "flex",
+    "items-center",
+    "justify-center",
+    "gap-2",
+    "rounded-full",
+    "font-bold",
+    "outline-2",
+    "outline-offset-2",
+    "outline-dashed",
+    "outline-transparent"
+  ],
+  {
+    variants: {
+      variant: {
+        neutral: [
+          "bg-black",
+          "text-white",
+          "hover:bg-grey-90",
+          "active:bg-grey-80",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
+        ],
+        primary: [
+          "bg-pickle-100",
+          "text-black",
+          "hover:bg-pickle-80",
+          "active:bg-pickle-60",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
+        ],
+        secondary: [
+          "bg-green-80",
+          "text-white",
+          "hover:bg-green-90",
+          "active:bg-green-100",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
+        ],
+        transparent: [
+          "text-white",
+          "hover:bg-green-80",
+          "active:bg-green-100",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40"
+        ],
+        link: [
+          "leading-tight",
+          "text-black",
+          "underline",
+          "hover:text-purple-100",
+          "focus:text-black",
+          "focus:outline-purple-100",
+          "active:text-purple-80"
+        ]
+      },
+      size: {
+        small: ["h-10", "text-sm", "px-4", "py-2"],
+        medium: ["h-12", "text-base", "px-6", "py-3"],
+        large: ["h-14", "text-lg", "px-8", "py-4"]
+      }
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "medium"
+    },
+    compoundVariants: [
+      {
+        variant: "link",
+        size: "small",
+        class: ["h-3", "text-xs", "p-0"]
+      },
+      {
+        variant: "link",
+        size: "medium",
+        class: ["h-4", "text-sm", "p-0"]
+      },
+      {
+        variant: "link",
+        size: "large",
+        class: ["h-6", "text-base", "p-0"]
+      }
+    ]
+  }
+);
+
+// src/components/ui/Combobox.tsx
+import { forwardRef as forwardRef10, useEffect as useEffect3, useState as useState3 } from "react";
+import { ChevronDownIcon as ChevronDownIcon2, CircleX as CircleX2, icons as icons3 } from "lucide-react";
+import { cva as cva5 } from "cva";
+
 // src/components/primitives/popover.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx12(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
+var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx14(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx14(
   PopoverPrimitive.Content,
   {
     ref,
@@ -757,7 +906,7 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/ui/Badge.tsx
 import { cva as cva4 } from "cva";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var badgeVariants = cva4("rounded-full px-2 py-0.5 text-xs font-semibold", {
   variants: {
     variant: {
@@ -771,12 +920,12 @@ var badgeVariants = cva4("rounded-full px-2 py-0.5 text-xs font-semibold", {
   }
 });
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx13("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ jsx15("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/components/ui/Combobox.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var Combobox = forwardRef9((props, ref) => {
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+var Combobox = forwardRef10((props, ref) => {
   const {
     id,
     name,
@@ -784,6 +933,7 @@ var Combobox = forwardRef9((props, ref) => {
     label,
     options,
     required,
+    description,
     classNames,
     multiselect,
     placeholder,
@@ -794,8 +944,8 @@ var Combobox = forwardRef9((props, ref) => {
     onChange: handleChange,
     children: footer
   } = props;
-  const [selected, setSelected] = useState2([]);
-  const [open, setOpen] = useState2(false);
+  const [selected, setSelected] = useState3([]);
+  const [open, setOpen] = useState3(false);
   const IconComponent = icon && icons3[icon];
   const hideSearchBox = options?.length <= 5;
   const isDefault = variant === "default";
@@ -803,7 +953,7 @@ var Combobox = forwardRef9((props, ref) => {
   const isEmpty = selected.length == 0;
   const showChevron = isDefault ? isEmpty : true;
   const close = () => setOpen(false);
-  useEffect2(() => {
+  useEffect3(() => {
     const valueArray = multiselect ? value ?? [] : value ? [value] : [];
     setSelected(
       valueArray.map((v) => options.find((o) => o.value === v)).filter((v) => v !== void 0)
@@ -831,17 +981,26 @@ var Combobox = forwardRef9((props, ref) => {
     const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
     return isDefault ? defaultLabel : label;
   };
-  return /* @__PURE__ */ jsxs8("div", { className: cn("flex flex-col gap-1", className), children: [
-    isDefault && /* @__PURE__ */ jsx14(Label_default, { text: label, htmlFor: name, required, className: classNames?.label }),
-    /* @__PURE__ */ jsxs8("div", { className: "relative flex", children: [
-      /* @__PURE__ */ jsxs8(Popover, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs9("div", { className: cn("flex flex-col gap-1", className), children: [
+    isDefault && /* @__PURE__ */ jsx16(
+      Label_default,
+      {
+        text: label,
+        htmlFor: name,
+        required,
+        description,
+        className: classNames?.label
+      }
+    ),
+    /* @__PURE__ */ jsxs9("div", { className: "relative flex", children: [
+      /* @__PURE__ */ jsxs9(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx16(
           PopoverTrigger,
           {
             asChild: true,
             disabled: options.length === 0,
             "data-testid": `${id ?? name}-combobox-trigger`,
-            children: /* @__PURE__ */ jsxs8(
+            children: /* @__PURE__ */ jsxs9(
               "div",
               {
                 ref,
@@ -852,9 +1011,9 @@ var Combobox = forwardRef9((props, ref) => {
                 ),
                 "aria-expanded": open,
                 children: [
-                  isDefault && IconComponent && /* @__PURE__ */ jsx14(IconComponent, { className: "h-4 w-4 shrink-0" }),
-                  isChip && !isEmpty && /* @__PURE__ */ jsx14(Badge, { variant: "purple", children: selected.length }),
-                  /* @__PURE__ */ jsx14(
+                  isDefault && IconComponent && /* @__PURE__ */ jsx16(IconComponent, { className: "h-4 w-4 shrink-0" }),
+                  isChip && !isEmpty && /* @__PURE__ */ jsx16(Badge, { variant: "purple", children: selected.length }),
+                  /* @__PURE__ */ jsx16(
                     "span",
                     {
                       className: cn(
@@ -864,7 +1023,7 @@ var Combobox = forwardRef9((props, ref) => {
                       children: handleDisplayValue()
                     }
                   ),
-                  showChevron && /* @__PURE__ */ jsx14(
+                  showChevron && /* @__PURE__ */ jsx16(
                     ChevronDownIcon2,
                     {
                       className: "shrink-0 transform group-data-[state=open]:rotate-180",
@@ -876,7 +1035,7 @@ var Combobox = forwardRef9((props, ref) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(
           PopoverContent,
           {
             className: cn(
@@ -887,16 +1046,16 @@ var Combobox = forwardRef9((props, ref) => {
             collisionPadding: 8,
             sideOffset: 4,
             align: "start",
-            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: id2, ...option }) => /* @__PURE__ */ jsx14(
+            children: /* @__PURE__ */ jsxs9(Command, { children: [
+              !hideSearchBox && /* @__PURE__ */ jsx16(CommandInput, { placeholder: "Search..." }),
+              /* @__PURE__ */ jsxs9(CommandList, { children: [
+                /* @__PURE__ */ jsx16(CommandEmpty, { children: "No results" }),
+                /* @__PURE__ */ jsx16(CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ jsx16(
                   CommandItem,
                   {
                     value: option.title,
                     onSelect: () => handleSelect(option.value),
-                    children: /* @__PURE__ */ jsx14(
+                    children: /* @__PURE__ */ jsx16(
                       ListItem_default,
                       {
                         className: cn(classNames?.items, "truncate py-1"),
@@ -909,19 +1068,19 @@ var Combobox = forwardRef9((props, ref) => {
                   id2
                 )) })
               ] }),
-              !!footer && /* @__PURE__ */ jsx14(Separator, {}),
+              !!footer && /* @__PURE__ */ jsx16(Separator, {}),
               footer && footer({ close })
             ] })
           }
         )
       ] }),
-      isDefault && !isEmpty && /* @__PURE__ */ jsx14(
+      isDefault && !isEmpty && /* @__PURE__ */ jsx16(
         "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__ */ jsx14(CircleX, { className: "h-4 w-4 text-green-100" })
+          children: /* @__PURE__ */ jsx16(CircleX2, { className: "h-4 w-4 text-green-100" })
         }
       )
     ] })
@@ -953,15 +1112,160 @@ var triggerVariants = cva5(
     }
   }
 );
+
+// src/components/ui/Counter.tsx
+import { cva as cva6 } from "cva";
+import { Minus as Minus2, Plus } from "lucide-react";
+import { forwardRef as forwardRef11, useEffect as useEffect4, useState as useState4 } from "react";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+var Counter = forwardRef11(
+  ({ label, error, min, max, step = 1, description, theme, value, classNames, onChange, ...props }, ref) => {
+    const [count, setCount] = useState4(0);
+    useEffect4(() => {
+      setCount(value ?? 0);
+    }, [value]);
+    const handleChange = (e) => {
+      const newValue = parseInt(e.target.value.replace(/\D/g, ""), 10);
+      if (isNaN(newValue)) return;
+      if (min && newValue < min) {
+        onChange?.(min);
+        setCount(min);
+        return;
+      }
+      if (max && newValue > max) {
+        onChange?.(max);
+        setCount(max);
+        return;
+      }
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    const decrement = () => {
+      const proposedValue = count - step;
+      const newValue = Math.max(min ?? -Infinity, proposedValue);
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    const increment = () => {
+      const proposedValue = count + step;
+      const newValue = Math.min(max ?? Infinity, proposedValue);
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: cn("flex w-auto flex-col gap-1", classNames?.root),
+        "data-testid": `counter-wrapper-${props.id}`,
+        children: [
+          label && /* @__PURE__ */ jsx17(
+            Label_default,
+            {
+              text: label,
+              htmlFor: props.name,
+              required: props.required,
+              description,
+              className: classNames?.label
+            }
+          ),
+          /* @__PURE__ */ jsxs10("div", { className: "relative flex w-[122px] flex-row items-center", children: [
+            /* @__PURE__ */ jsx17(
+              "button",
+              {
+                type: "button",
+                className: "absolute inset-y-0 left-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
+                onClick: decrement,
+                children: /* @__PURE__ */ jsx17(Minus2, { className: "h-4 w-4 text-green-100" })
+              }
+            ),
+            /* @__PURE__ */ jsx17(
+              "input",
+              {
+                className: cn(counterVariants({ theme }), classNames?.input),
+                ref,
+                value: count,
+                onChange: handleChange,
+                "data-testid": `counter-element-${props.id}`,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx17(
+              "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: increment,
+                children: /* @__PURE__ */ jsx17(Plus, { className: "h-4 w-4 text-green-100" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx17(ErrorMessage_default, { message: error })
+        ]
+      }
+    );
+  }
+);
+Counter.displayName = "Counter";
+var counterVariants = cva6(
+  [
+    "border-input",
+    "placeholder:text-muted-foreground",
+    "focus-visible:ring-ring",
+    "inline-flex",
+    "w-[122px]",
+    "h-11",
+    "items-center",
+    "justify-start",
+    "gap-3",
+    "rounded-lg",
+    "bg-transparent",
+    "px-3",
+    "pt-0.5",
+    "text-sm",
+    "text-center",
+    "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
+    }
+  }
+);
 export {
   Badge,
   Button,
   Checkbox_default as Checkbox,
   Chip_default as Chip,
   Combobox,
+  Counter,
   Input_default as Input,
   Label_default as Label,
   ListItem_default as ListItem,
+  PlacesQueryInput_default as PlacesQueryInput,
   Select_default as Select,
   cn
 };