@next-degree/pickle-shared-js 0.6.50 → 0.7.52

package/dist/index.cjs

@@ -42,6 +42,7 @@ __export(index_exports, {
   CompanyService: () => company_service_latest_exports,
   CompanyTake: () => CompanyTake,
   Counter: () => Counter,
+  DatePicker: () => DatePicker,
   Icon: () => Icon,
   Input: () => Input_default,
   InputOtp: () => InputOtp,
@@ -65,9 +66,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/ui/Select.tsx
-var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
-var import_lucide_react2 = require("lucide-react");
+// src/components/ui/Checkbox.tsx
+var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
+var import_lucide_react = require("lucide-react");
 var import_react = require("react");
 
 // src/lib/utils.ts
@@ -77,265 +78,9 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
-// src/components/ui/ErrorMessage.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function ErrorMessage({ message, className, ...props }) {
-  if (!message) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
-}
-var ErrorMessage_default = ErrorMessage;
-
-// src/components/primitives/tooltip.tsx
-var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var React = __toESM(require("react"), 1);
-var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(
-  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
-var import_lucide_react = require("lucide-react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Label({ text, required, description, className, ...props }) {
-  if (!text) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full flex-row gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "label",
-      {
-        className: cn(
-          "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-          className
-        ),
-        ...props,
-        children: [
-          text,
-          required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-red-600", children: "\xA0*" })
-        ]
-      }
-    ),
-    !!description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.InfoIcon, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipContent, { className: "max-w-48", children: description })
-    ] }) })
-  ] });
-}
-var Label_default = Label;
-
-// src/components/ui/Chip.tsx
-var import_cva = require("cva");
-var import_tailwind_merge2 = require("tailwind-merge");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_tailwind_merge2.twMerge)(chipVariants({ variant, size, className })), ...props });
-var chipVariants = (0, import_cva.cva)(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
-  variants: {
-    variant: {
-      neutral: ["text-grey-80", "border-grey-10"],
-      primary: ["text-purple-100", "border-purple-20"],
-      danger: ["text-pumpkin-100", "border-pumpkin-20"],
-      onboarding: ["text-green-100", "bg-green-10", "cursor-pointer"],
-      onboardingSelected: ["text-white", "bg-green-90", "cursor-pointer"]
-    },
-    size: {
-      small: ["text-sm", "leading-5", "px-2", "py-1", "gap-1.5"],
-      medium: ["text-base", "leading-6", "px-3", "py-2", "gap-2"]
-    }
-  },
-  defaultVariants: {
-    variant: "neutral",
-    size: "medium"
-  }
-});
-var Chip_default = Chip;
-
-// src/components/primitives/separator.tsx
-var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
-var React2 = __toESM(require("react"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Separator = React2.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-  SeparatorPrimitive.Root,
-  {
-    ref,
-    decorative,
-    orientation,
-    className: cn(
-      "shrink-0 bg-grey-10",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      className
-    ),
-    ...props
-  }
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-// src/components/ui/Select.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Select = (0, import_react.forwardRef)(
-  ({ label, options, placeholder, multiselect, description, classNames, error, id, ...props }, ref) => {
-    const { value, defaultValue, dir, className, onChange, ...rest } = props;
-    const [selected, setSelected] = (0, import_react.useState)([]);
-    const [open, setOpen] = (0, import_react.useState)(false);
-    const containerRef = (0, import_react.useRef)(null);
-    (0, import_react.useEffect)(() => {
-      if (!value) return setSelected([]);
-      setSelected(Array.isArray(value) ? value : [value]);
-    }, [value]);
-    const toggleOpen = () => setOpen((prev) => !prev);
-    const closeOnEscape = (event) => event.key === "Escape" && setOpen(false);
-    const handleOnOpenChange = (isOpen) => (!multiselect || isOpen) && setOpen(isOpen);
-    const setValueOnEnter = (event, value2) => event.key === "Enter" && handleChange(value2);
-    const getLabel = () => selected.map((o) => options?.find((option) => option.value === o)?.title).join(", ");
-    const chipLabels = selected?.map((s) => options?.find(({ value: value2 }) => value2 === s)).filter(Boolean);
-    function handleChange(newValue) {
-      if (newValue === "" && !multiselect) return;
-      let newSelected = [];
-      setSelected((prev) => {
-        newSelected = prev.includes(newValue) ? prev.filter((item) => item !== newValue) : [...prev, newValue];
-        return multiselect ? newSelected : [newValue];
-      });
-      onChange?.(multiselect ? newSelected : newValue);
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-      "div",
-      {
-        className: cn("flex w-full flex-col gap-1", className),
-        ref: containerRef,
-        "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Label_default,
-            {
-              text: label,
-              htmlFor: props.name,
-              required: props.required,
-              description,
-              className: classNames?.label
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-            SelectPrimitive.Root,
-            {
-              open,
-              value: selected.join(","),
-              onOpenChange: handleOnOpenChange,
-              onValueChange: multiselect ? void 0 : handleChange,
-              defaultValue: typeof defaultValue === "string" ? defaultValue : void 0,
-              dir: dir === "rtl" ? "rtl" : "ltr",
-              ...rest,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-                  SelectPrimitive.Trigger,
-                  {
-                    ref,
-                    className: cn(
-                      "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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                        SelectPrimitive.Value,
-                        {
-                          placeholder: placeholder ?? "Select an option",
-                          "aria-label": getLabel(),
-                          children: getLabel()
-                        }
-                      ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                        import_lucide_react2.ChevronDownIcon,
-                        {
-                          className: "transform text-black group-data-[state=open]:rotate-180",
-                          size: "16"
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                  SelectPrimitive.Content,
-                  {
-                    hideWhenDetached: true,
-                    className: "z-10 max-h-[var(--radix-select-content-available-height)] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md bg-white py-2 shadow-lg",
-                    position: "popper",
-                    sideOffset: 4,
-                    onPointerDownOutside: toggleOpen,
-                    onKeyDown: closeOnEscape,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(SelectPrimitive.Viewport, { children: [
-                      multiselect && !!chipLabels?.length && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                        SelectPrimitive.Group,
-                        {
-                          className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
-                          "data-testid": "selected-labels",
-                          children: chipLabels?.map(
-                            (chip) => chip && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Chip_default, { size: "small", variant: "primary", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: chip.title }),
-                              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                                import_lucide_react2.X,
-                                {
-                                  size: 18,
-                                  "data-testid": `chip-remove-${chip.value}`,
-                                  className: "cursor-pointer",
-                                  onClick: () => handleChange(chip.value)
-                                }
-                              )
-                            ] }, chip.title)
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Separator, {}),
-                      options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-                        SelectPrimitive.Item,
-                        {
-                          value: value2,
-                          className: "group relative cursor-pointer px-4 py-2 text-left text-sm hover:bg-purple-50 focus:bg-purple-50 focus:outline-none data-[state=checked]:bg-purple-50 data-[state=checked]:pr-10 data-[state=checked]:text-purple-100",
-                          "data-state": selected.includes(value2) ? "checked" : "unchecked",
-                          onKeyDown: (e) => setValueOnEnter(e, value2),
-                          onClick: () => handleChange(value2),
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectPrimitive.ItemText, { children: title }),
-                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                              import_lucide_react2.CheckIcon,
-                              {
-                                className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
-                                size: 16
-                              }
-                            )
-                          ]
-                        },
-                        id2
-                      ))
-                    ] })
-                  }
-                ) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorMessage_default, { message: error })
-        ]
-      }
-    );
-  }
-);
-Select.displayName = "Select";
-var Select_default = Select;
-
 // src/components/ui/Checkbox.tsx
-var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
-var import_lucide_react3 = require("lucide-react");
-var import_react2 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var CheckboxToggle = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+var import_jsx_runtime = require("react/jsx-runtime");
+var CheckboxToggle = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -365,95 +110,131 @@ var CheckboxToggle = (0, import_react2.forwardRef)(({ className, ...props }, ref
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" })
     ] })
   }
 ));
 CheckboxToggle.displayName = CheckboxPrimitive.Root.displayName;
-var Checkbox = (0, import_react2.forwardRef)(
+var Checkbox = (0, import_react.forwardRef)(
   ({ 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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex space-x-2", classNames?.wrapper), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckboxToggle, { id, disabled, ref, ...props }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: id, className: cn(labelClassName, classNames?.label), children })
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("flex space-x-2", classNames?.wrapper), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxToggle, { id, disabled, ref, ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: cn(labelClassName, classNames?.label), children })
     ] });
   }
 );
 Checkbox.displayName = "Checkbox";
 var Checkbox_default = Checkbox;
 
-// src/components/ui/ListItem.tsx
-var import_lucide_react4 = require("lucide-react");
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function ListItem({
-  icon,
-  hasCheckbox,
-  isSelected,
-  className,
-  title,
-  value,
-  description,
-  ...props
-}) {
-  const getIconIfValid = (icon2) => {
-    if (icon2 in import_lucide_react5.icons) {
-      const IconComponent = import_lucide_react5.icons[icon2];
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconComponent, { size: 14 });
-    }
-    return null;
-  };
-  const optionIcon = icon ? getIconIfValid(icon) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    "li",
-    {
-      className: cn(
-        "group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm",
-        className
-      ),
-      ...props,
-      "data-state": isSelected ? "checked" : "unchecked",
-      children: [
-        optionIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "mr-2", children: optionIcon }),
-        hasCheckbox && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Checkbox_default, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-grey-80", children: description })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_lucide_react4.CheckIcon,
-          {
-            className: "absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",
-            size: 16
-          }
-        )
-      ]
+// src/components/ui/Chip.tsx
+var import_cva = require("cva");
+var import_tailwind_merge2 = require("tailwind-merge");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_tailwind_merge2.twMerge)(chipVariants({ variant, size, className })), ...props });
+var chipVariants = (0, import_cva.cva)(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
+  variants: {
+    variant: {
+      neutral: ["text-grey-80", "border-grey-10"],
+      primary: ["text-purple-100", "border-purple-20"],
+      danger: ["text-pumpkin-100", "border-pumpkin-20"],
+      onboarding: ["text-green-100", "bg-green-10", "cursor-pointer"],
+      onboardingSelected: ["text-white", "bg-green-90", "cursor-pointer"]
+    },
+    size: {
+      small: ["text-sm", "leading-5", "px-2", "py-1", "gap-1.5"],
+      medium: ["text-base", "leading-6", "px-3", "py-2", "gap-2"]
     }
-  );
+  },
+  defaultVariants: {
+    variant: "neutral",
+    size: "medium"
+  }
+});
+var Chip_default = Chip;
+
+// src/components/ui/Input.tsx
+var import_cva2 = require("cva");
+var import_lucide_react3 = require("lucide-react");
+var import_react2 = require("react");
+
+// src/components/ui/ErrorMessage.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ErrorMessage({ message, className, ...props }) {
+  if (!message) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
+}
+var ErrorMessage_default = ErrorMessage;
+
+// src/components/ui/Label.tsx
+var import_lucide_react2 = require("lucide-react");
+
+// src/components/primitives/tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsx)(
+  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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Label({ text, required, description, className, ...props }) {
+  if (!text) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex w-full flex-row gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "label",
+      {
+        className: cn(
+          "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          className
+        ),
+        ...props,
+        children: [
+          text,
+          required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-red-600", children: "\xA0*" })
+        ]
+      }
+    ),
+    !!description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.InfoIcon, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipContent, { className: "max-w-48", children: description })
+    ] }) })
+  ] });
 }
-var ListItem_default = ListItem;
+var Label_default = Label;
 
 // src/components/ui/Input.tsx
-var import_cva2 = require("cva");
-var import_lucide_react6 = require("lucide-react");
-var import_react3 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Input = (0, import_react3.forwardRef)(
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Input = (0, import_react2.forwardRef)(
   ({ label, error, description, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
     const handleClear = () => {
       onChange?.({ target: { value: "" } });
       onClear?.();
     };
-    const IconComponent = icon && import_lucide_react6.icons[icon];
+    const IconComponent = icon && import_lucide_react3.icons[icon];
     const placeholder = props.placeholder ?? (icon === "Search" ? "Search..." : "");
     const hasIcon = !!icon;
     const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         Label_default,
         {
           text: label,
@@ -463,14 +244,14 @@ var Input = (0, import_react3.forwardRef)(
           className: classNames?.label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative flex flex-row items-center", children: [
-        IconComponent && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative flex flex-row items-center", children: [
+        IconComponent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           IconComponent,
           {
             className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           {
             className: cn(inputVariants({ theme, hasIcon })),
@@ -482,8 +263,8 @@ var Input = (0, import_react3.forwardRef)(
             ...props
           }
         ),
-        hasIcon && value && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_lucide_react6.X,
+        hasIcon && value && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_lucide_react3.X,
           {
             className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
             onClick: handleClear,
@@ -491,7 +272,7 @@ var Input = (0, import_react3.forwardRef)(
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorMessage_default, { message: error })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorMessage_default, { message: error })
     ] });
   }
 );
@@ -546,9 +327,60 @@ var inputVariants = (0, import_cva2.cva)(
 );
 var Input_default = Input;
 
+// src/components/ui/ListItem.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ListItem({
+  icon,
+  hasCheckbox,
+  isSelected,
+  className,
+  title,
+  value,
+  description,
+  ...props
+}) {
+  const getIconIfValid = (icon2) => {
+    if (icon2 in import_lucide_react5.icons) {
+      const IconComponent = import_lucide_react5.icons[icon2];
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconComponent, { size: 14 });
+    }
+    return null;
+  };
+  const optionIcon = icon ? getIconIfValid(icon) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "li",
+    {
+      className: cn(
+        "group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm",
+        className
+      ),
+      ...props,
+      "data-state": isSelected ? "checked" : "unchecked",
+      children: [
+        optionIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mr-2", children: optionIcon }),
+        hasCheckbox && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Checkbox_default, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-grey-80", children: description })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_lucide_react4.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/MapComponent.tsx
 var import_react_google_maps = require("@vis.gl/react-google-maps");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function MapComponent({
   apiKey,
   mapId,
@@ -558,7 +390,7 @@ function MapComponent({
 }) {
   const defaultPosition = { lat: 40.715021, lng: -74.00459 };
   const defaultZoom = 11;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_google_maps.APIProvider, { apiKey, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("h-screen max-w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_google_maps.APIProvider, { apiKey, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("h-screen max-w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_react_google_maps.Map,
     {
       defaultZoom: position ? zoom : defaultZoom,
@@ -567,24 +399,28 @@ function MapComponent({
       keyboardShortcuts: false,
       disableDefaultUI: true,
       zoomControl: true,
-      children: position && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_google_maps.AdvancedMarker, { position, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_google_maps.Pin, { background: "#0B5441", borderColor: "#EBFDF1", glyphColor: "#D4F500" }) })
+      children: position && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_google_maps.AdvancedMarker, { position, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_google_maps.Pin, { background: "#0B5441", borderColor: "#EBFDF1", glyphColor: "#D4F500" }) })
     }
   ) }) });
 }
 var MapComponent_default = MapComponent;
 
+// src/components/ui/PlacesQueryInput.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_react3 = require("react");
+
 // src/components/primitives/command.tsx
 var import_cmdk = require("cmdk");
-var import_lucide_react8 = require("lucide-react");
-var React4 = __toESM(require("react"), 1);
+var import_lucide_react7 = require("lucide-react");
+var React3 = __toESM(require("react"), 1);
 
 // src/components/primitives/dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
-var import_lucide_react7 = require("lucide-react");
-var React3 = __toESM(require("react"), 1);
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_lucide_react6 = require("lucide-react");
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -596,31 +432,31 @@ var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+var DialogContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime9.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%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-neutral-800 dark:bg-neutral-950 sm:rounded-lg",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -628,7 +464,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   DialogPrimitive.Title,
   {
     ref,
@@ -637,7 +473,7 @@ var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   DialogPrimitive.Description,
   {
     ref,
@@ -648,8 +484,8 @@ var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/primitives/command.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Command = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   import_cmdk.Command,
   {
     ref,
@@ -661,9 +497,9 @@ var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Command.displayName = import_cmdk.Command.displayName;
-var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var CommandInput = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_cmdk.Command.Input,
     {
       ref,
@@ -676,7 +512,7 @@ var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PUR
   )
 ] }));
 CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var CommandList = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   import_cmdk.Command.List,
   {
     ref,
@@ -685,9 +521,9 @@ var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandList.displayName = import_cmdk.Command.List.displayName;
-var CommandEmpty = React4.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+var CommandEmpty = React3.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
-var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var CommandGroup = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   import_cmdk.Command.Group,
   {
     ref,
@@ -699,7 +535,7 @@ var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var CommandSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   import_cmdk.Command.Separator,
   {
     ref,
@@ -708,7 +544,7 @@ var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var CommandItem = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   import_cmdk.Command.Item,
   {
     ref,
@@ -721,7 +557,7 @@ var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
 ));
 CommandItem.displayName = import_cmdk.Command.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest text-neutral-500", className),
@@ -782,33 +618,37 @@ var geocode = async (address, key) => {
 };
 
 // src/components/ui/PlacesQueryInput.tsx
-var import_lucide_react9 = require("lucide-react");
-var import_react4 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function PlacesQueryInput({
   apiKey,
   selected,
   onSelect,
   className
 }) {
-  const [predictions, setPredictions] = (0, import_react4.useState)(null);
-  const [input, setInput] = (0, import_react4.useState)(selected?.description ?? "");
-  const [isLoadingPredictions, setIsLoadingPredictions] = (0, import_react4.useState)(false);
-  const [shouldOpenUpward, setShouldOpenUpward] = (0, import_react4.useState)(false);
-  const timeoutRef = (0, import_react4.useRef)(null);
-  const inputRef = (0, import_react4.useRef)(null);
-  const debouncedAutocomplete = (0, import_react4.useCallback)((value) => {
+  const [predictions, setPredictions] = (0, import_react3.useState)(null);
+  const [input, setInput] = (0, import_react3.useState)(selected?.description ?? "");
+  const [isLoadingPredictions, setIsLoadingPredictions] = (0, import_react3.useState)(false);
+  const [shouldOpenUpward, setShouldOpenUpward] = (0, import_react3.useState)(false);
+  const timeoutRef = (0, import_react3.useRef)(null);
+  const inputRef = (0, import_react3.useRef)(null);
+  const debouncedAutocomplete = (0, import_react3.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);
+      try {
+        if (value.length > 2) {
+          setIsLoadingPredictions(true);
+          const fetchedPredictions = await autocomplete(value, apiKey);
+          setIsLoadingPredictions(false);
+          setPredictions(fetchedPredictions ?? []);
+        } else {
+          setPredictions(null);
+        }
+      } catch (error) {
+        setIsLoadingPredictions(false);
+        setPredictions([]);
+        console.error("Autocomplete error:", error);
       }
     }, 300);
   }, []);
@@ -827,7 +667,7 @@ function PlacesQueryInput({
     setInput("");
   };
   const handleBlur = () => setTimeout(() => setPredictions(null), 200);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const checkDropdownPosition = () => {
       if (inputRef.current) {
         const rect = inputRef.current.getBoundingClientRect();
@@ -839,9 +679,9 @@ function PlacesQueryInput({
     window.addEventListener("resize", checkDropdownPosition);
     return () => window.removeEventListener("resize", checkDropdownPosition);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("relative w-full", className), ref: inputRef, onBlur: handleBlur, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Command, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("relative w-full", className), ref: inputRef, onBlur: handleBlur, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Command, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         CommandInput,
         {
           placeholder: "Type an address to search...",
@@ -850,18 +690,18 @@ function PlacesQueryInput({
           className: "truncate pr-8"
         }
       ),
-      isLoadingPredictions && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react9.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__ */ (0, import_jsx_runtime13.jsx)(
+      isLoadingPredictions && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react8.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__ */ (0, import_jsx_runtime11.jsx)(
         "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__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react9.CircleX, { className: "h-4 w-4 text-green-100" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react8.CircleX, { className: "h-4 w-4 text-green-100" })
         }
       )
     ] }),
-    predictions && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    predictions && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       CommandList,
       {
         className: cn(
@@ -869,8 +709,8 @@ function PlacesQueryInput({
           shouldOpenUpward ? "bottom-full" : "top-full"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CommandEmpty, { children: "No results" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CommandGroup, { children: predictions.map((prediction) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CommandEmpty, { children: "No results" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CommandGroup, { children: predictions.map((prediction) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             CommandItem,
             {
               onSelect: () => handleSelect(prediction),
@@ -884,17 +724,279 @@ function PlacesQueryInput({
     )
   ] }) });
 }
-var PlacesQueryInput_default = PlacesQueryInput;
+var PlacesQueryInput_default = PlacesQueryInput;
+
+// src/components/ui/Select.tsx
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
+var import_lucide_react9 = require("lucide-react");
+var import_react4 = require("react");
+
+// src/components/primitives/separator.tsx
+var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
+var React4 = __toESM(require("react"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Separator = React4.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-grey-10",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    ),
+    ...props
+  }
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+// src/components/ui/Select.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Select = (0, import_react4.forwardRef)(
+  ({ label, options, placeholder, multiselect, description, classNames, error, id, ...props }, ref) => {
+    const { value, defaultValue, dir, className, onChange, ...rest } = props;
+    const [selected, setSelected] = (0, import_react4.useState)([]);
+    const [open, setOpen] = (0, import_react4.useState)(false);
+    const containerRef = (0, import_react4.useRef)(null);
+    (0, import_react4.useEffect)(() => {
+      if (!value) return setSelected([]);
+      setSelected(Array.isArray(value) ? value : [value]);
+    }, [value]);
+    const toggleOpen = () => setOpen((prev) => !prev);
+    const closeOnEscape = (event) => event.key === "Escape" && setOpen(false);
+    const handleOnOpenChange = (isOpen) => (!multiselect || isOpen) && setOpen(isOpen);
+    const setValueOnEnter = (event, value2) => event.key === "Enter" && handleChange(value2);
+    const getLabel = () => selected.map((o) => options?.find((option) => option.value === o)?.title).join(", ");
+    const chipLabels = selected?.map((s) => options?.find(({ value: value2 }) => value2 === s)).filter(Boolean);
+    function handleChange(newValue) {
+      if (newValue === "" && !multiselect) return;
+      let newSelected = [];
+      setSelected((prev) => {
+        newSelected = prev.includes(newValue) ? prev.filter((item) => item !== newValue) : [...prev, newValue];
+        return multiselect ? newSelected : [newValue];
+      });
+      onChange?.(multiselect ? newSelected : newValue);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: cn("flex w-full flex-col gap-1", className),
+        ref: containerRef,
+        "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Label_default,
+            {
+              text: label,
+              htmlFor: props.name,
+              required: props.required,
+              description,
+              className: classNames?.label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            SelectPrimitive.Root,
+            {
+              open,
+              value: selected.join(","),
+              onOpenChange: handleOnOpenChange,
+              onValueChange: multiselect ? void 0 : handleChange,
+              defaultValue: typeof defaultValue === "string" ? defaultValue : void 0,
+              dir: dir === "rtl" ? "rtl" : "ltr",
+              ...rest,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  SelectPrimitive.Trigger,
+                  {
+                    ref,
+                    className: cn(
+                      "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__ */ (0, import_jsx_runtime13.jsx)("span", { className: "truncate", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        SelectPrimitive.Value,
+                        {
+                          placeholder: placeholder ?? "Select an option",
+                          "aria-label": getLabel(),
+                          children: getLabel()
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        import_lucide_react9.ChevronDownIcon,
+                        {
+                          className: "transform text-black group-data-[state=open]:rotate-180",
+                          size: "16"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  SelectPrimitive.Content,
+                  {
+                    hideWhenDetached: true,
+                    className: "z-10 max-h-[var(--radix-select-content-available-height)] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md bg-white py-2 shadow-lg",
+                    position: "popper",
+                    sideOffset: 4,
+                    onPointerDownOutside: toggleOpen,
+                    onKeyDown: closeOnEscape,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(SelectPrimitive.Viewport, { children: [
+                      multiselect && !!chipLabels?.length && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        SelectPrimitive.Group,
+                        {
+                          className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
+                          "data-testid": "selected-labels",
+                          children: chipLabels?.map(
+                            (chip) => chip && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Chip_default, { size: "small", variant: "primary", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: chip.title }),
+                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                import_lucide_react9.X,
+                                {
+                                  size: 18,
+                                  "data-testid": `chip-remove-${chip.value}`,
+                                  className: "cursor-pointer",
+                                  onClick: () => handleChange(chip.value)
+                                }
+                              )
+                            ] }, chip.title)
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Separator, {}),
+                      options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                        SelectPrimitive.Item,
+                        {
+                          value: value2,
+                          className: "group relative cursor-pointer px-4 py-2 text-left text-sm hover:bg-purple-50 focus:bg-purple-50 focus:outline-none data-[state=checked]:bg-purple-50 data-[state=checked]:pr-10 data-[state=checked]:text-purple-100",
+                          "data-state": selected.includes(value2) ? "checked" : "unchecked",
+                          onKeyDown: (e) => setValueOnEnter(e, value2),
+                          onClick: () => handleChange(value2),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectPrimitive.ItemText, { children: title }),
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                              import_lucide_react9.CheckIcon,
+                              {
+                                className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
+                                size: 16
+                              }
+                            )
+                          ]
+                        },
+                        id2
+                      ))
+                    ] })
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ErrorMessage_default, { message: error })
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+var Select_default = Select;
+
+// src/components/ui/Avatar.tsx
+var import_cva3 = require("cva");
+var import_link = __toESM(require("next/link"), 1);
+
+// src/components/primitives/avatar.tsx
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
+var React5 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var AvatarBase = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex shrink-0 overflow-hidden rounded-full", className),
+    ...props
+  }
+));
+AvatarBase.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    "data-testid": "job-card-avatar",
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-pumpkin-100 py-2 text-sm font-bold capitalize leading-normal text-white md:text-lg",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+// src/components/ui/Avatar.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Avatar({ size, src, href, name, ...linkProps }) {
+  const fallbackShort = name?.slice(0, 2);
+  const fallbackWords = name?.split(" ").map((n) => n[0]).join("").slice(0, 2);
+  const fallback = fallbackWords && fallbackWords.length > 1 ? fallbackWords : fallbackShort;
+  const renderAvatar = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(AvatarBase, { className: avatarVariants({ size }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AvatarImage, { src, alt: name }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AvatarFallback, { children: fallback?.toUpperCase() })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_link.default, { href, ...linkProps, children: renderAvatar() });
+  }
+  return renderAvatar();
+}
+var avatarVariants = (0, import_cva3.cva)("ring ring-white ring-2", {
+  variants: {
+    size: {
+      large: "h-16 w-16",
+      medium: "h-10 w-10",
+      small: "h-8 w-8"
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+
+// src/components/ui/Badge.tsx
+var import_cva4 = require("cva");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var badgeVariants = (0, import_cva4.cva)("rounded-full px-2 py-0.5 text-xs font-semibold", {
+  variants: {
+    variant: {
+      green: "bg-green-90 text-white",
+      pickle: "bg-pickle-100 text-black",
+      purple: "bg-purple-100 text-white"
+    }
+  },
+  defaultVariants: {
+    variant: "green"
+  }
+});
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
 
 // src/components/ui/Button.tsx
 var import_react_slot = require("@radix-ui/react-slot");
-var import_cva3 = require("cva");
+var import_cva5 = require("cva");
 var import_react5 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Button = (0, import_react5.forwardRef)(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Component = asChild ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Component,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -905,7 +1007,7 @@ var Button = (0, import_react5.forwardRef)(
   }
 );
 Button.displayName = "Button";
-var buttonVariants = (0, import_cva3.cva)(
+var buttonVariants = (0, import_cva5.cva)(
   [
     "flex",
     "items-center",
@@ -996,17 +1098,17 @@ var buttonVariants = (0, import_cva3.cva)(
 );
 
 // src/components/ui/Combobox.tsx
-var import_react6 = require("react");
+var import_cva6 = require("cva");
 var import_lucide_react10 = require("lucide-react");
-var import_cva5 = require("cva");
+var import_react6 = require("react");
 
 // src/components/primitives/popover.tsx
-var React6 = __toESM(require("react"), 1);
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var React7 = __toESM(require("react"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var PopoverContent = React7.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   PopoverPrimitive.Content,
   {
     ref,
@@ -1021,27 +1123,8 @@ var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffse
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-// src/components/ui/Badge.tsx
-var import_cva4 = require("cva");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var badgeVariants = (0, import_cva4.cva)("rounded-full px-2 py-0.5 text-xs font-semibold", {
-  variants: {
-    variant: {
-      green: "bg-green-90 text-white",
-      pickle: "bg-pickle-100 text-black",
-      purple: "bg-purple-100 text-white"
-    }
-  },
-  defaultVariants: {
-    variant: "green"
-  }
-});
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
-}
-
 // src/components/ui/Combobox.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Combobox = (0, import_react6.forwardRef)((props, ref) => {
   const {
     id,
@@ -1092,14 +1175,18 @@ var Combobox = (0, import_react6.forwardRef)((props, ref) => {
   };
   const handleClear = () => {
     setSelected([]);
-    multiselect ? handleChange?.([]) : handleChange?.("");
+    if (multiselect) {
+      handleChange?.([]);
+    } else {
+      handleChange?.("");
+    }
   };
   const handleDisplayValue = () => {
     const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
     return isDefault ? defaultLabel : label;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("flex flex-col gap-1", className), children: [
-    isDefault && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("flex flex-col gap-1", className), children: [
+    isDefault && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Label_default,
       {
         text: label,
@@ -1109,15 +1196,15 @@ var Combobox = (0, import_react6.forwardRef)((props, ref) => {
         className: classNames?.label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           PopoverTrigger,
           {
             asChild: true,
             disabled: options.length === 0,
             "data-testid": `${id ?? name}-combobox-trigger`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               "div",
               {
                 ref,
@@ -1128,9 +1215,9 @@ var Combobox = (0, import_react6.forwardRef)((props, ref) => {
                 ),
                 "aria-expanded": open,
                 children: [
-                  isDefault && IconComponent && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconComponent, { className: "h-4 w-4 shrink-0" }),
-                  isChip && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Badge, { variant: "purple", children: selected.length }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  isDefault && IconComponent && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconComponent, { className: "h-4 w-4 shrink-0" }),
+                  isChip && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Badge, { variant: "purple", children: selected.length }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "span",
                     {
                       className: cn(
@@ -1140,7 +1227,7 @@ var Combobox = (0, import_react6.forwardRef)((props, ref) => {
                       children: handleDisplayValue()
                     }
                   ),
-                  showChevron && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  showChevron && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     import_lucide_react10.ChevronDownIcon,
                     {
                       className: "shrink-0 transform group-data-[state=open]:rotate-180",
@@ -1152,7 +1239,7 @@ var Combobox = (0, import_react6.forwardRef)((props, ref) => {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           PopoverContent,
           {
             className: cn(
@@ -1163,16 +1250,16 @@ var Combobox = (0, import_react6.forwardRef)((props, ref) => {
             collisionPadding: 8,
             sideOffset: 4,
             align: "start",
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Command, { children: [
-              !hideSearchBox && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CommandInput, { placeholder: "Search..." }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(CommandList, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CommandEmpty, { children: "No results" }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Command, { children: [
+              !hideSearchBox && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CommandInput, { placeholder: "Search..." }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CommandList, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CommandEmpty, { children: "No results" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   CommandItem,
                   {
                     value: option.title,
                     onSelect: () => handleSelect(option.value),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       ListItem_default,
                       {
                         className: cn(classNames?.items, "truncate py-1"),
@@ -1185,26 +1272,26 @@ var Combobox = (0, import_react6.forwardRef)((props, ref) => {
                   id2
                 )) })
               ] }),
-              !!footer && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Separator, {}),
+              !!footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Separator, {}),
               footer && footer({ close })
             ] })
           }
         )
       ] }),
-      isDefault && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      isDefault && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "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__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.CircleX, { className: "h-4 w-4 text-green-100" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.CircleX, { className: "h-4 w-4 text-green-100" })
         }
       )
     ] })
   ] });
 });
 Combobox.displayName = "Combobox";
-var triggerVariants = (0, import_cva5.cva)(
+var triggerVariants = (0, import_cva6.cva)(
   "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: {
@@ -1231,10 +1318,10 @@ var triggerVariants = (0, import_cva5.cva)(
 );
 
 // src/components/ui/Counter.tsx
-var import_cva6 = require("cva");
+var import_cva7 = require("cva");
 var import_lucide_react11 = require("lucide-react");
 var import_react7 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Counter = (0, import_react7.forwardRef)(
   ({ label, error, min, max, step = 1, description, theme, value, classNames, onChange, ...props }, ref) => {
     const [count, setCount] = (0, import_react7.useState)(0);
@@ -1269,13 +1356,13 @@ var Counter = (0, import_react7.forwardRef)(
       onChange?.(newValue);
       setCount(newValue);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         className: cn("flex w-auto flex-col gap-1", classNames?.root),
         "data-testid": `counter-wrapper-${props.id}`,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             Label_default,
             {
               text: label,
@@ -1285,255 +1372,104 @@ var Counter = (0, import_react7.forwardRef)(
               className: classNames?.label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative flex w-[122px] flex-row items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative flex w-[122px] flex-row items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "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__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.Minus, { className: "h-4 w-4 text-green-100" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Minus, { className: "h-4 w-4 text-green-100" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "input",
               {
                 className: cn(counterVariants({ theme }), classNames?.input),
                 ref,
                 value: count,
                 onChange: handleChange,
-                "data-testid": `counter-element-${props.id}`,
-                ...props
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-              "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__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.Plus, { className: "h-4 w-4 text-green-100" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ErrorMessage_default, { message: error })
-        ]
-      }
-    );
-  }
-);
-Counter.displayName = "Counter";
-var counterVariants = (0, import_cva6.cva)(
-  [
-    "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
-    }
-  }
-);
-
-// src/components/ui/InputOtp.tsx
-var import_react8 = require("react");
-
-// src/components/primitives/input-otp.tsx
-var React7 = __toESM(require("react"), 1);
-var import_input_otp = require("input-otp");
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var InputOTP = React7.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-  import_input_otp.OTPInput,
-  {
-    ref,
-    containerClassName: cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName
-    ),
-    className: cn("disabled:cursor-not-allowed", className),
-    ...props
-  }
-));
-InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, className: cn("flex items-center", className), ...props }));
-InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React7.forwardRef(({ index, error, className, ...props }, ref) => {
-  const inputOTPContext = React7.useContext(import_input_otp.OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-    "div",
-    {
-      ref,
-      className: cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-neutral-200 text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md dark:border-neutral-800",
-        isActive && "z-10 ring-2 ring-purple-100 ring-offset-white dark:ring-purple-20 dark:ring-offset-purple-100",
-        error && "border-red-500 dark:border-red-400",
-        className
-      ),
-      ...props,
-      children: [
-        char,
-        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "animate-caret-blink h-4 w-px bg-neutral-950 duration-1000 dark:bg-neutral-50" }) })
-      ]
-    }
-  );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React7.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.Dot, {}) }));
-InputOTPSeparator.displayName = "InputOTPSeparator";
-
-// src/components/ui/InputOtp.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var InputOtp = (0, import_react8.forwardRef)(
-  ({ digits, label, description, error, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-      "div",
-      {
-        className: "group flex w-full flex-col gap-1",
-        "data-testid": `input-otp-wrapper-${props.id}`,
-        children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            Label_default,
-            {
-              text: label,
-              htmlFor: props.name,
-              required: props.required,
-              description
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "relative flex flex-row items-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            InputOTP,
-            {
-              ref,
-              maxLength: digits,
-              "data-testid": `input-otp-element-${props.id}`,
-              ...props,
-              children: [...Array(digits)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InputOTPGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InputOTPSlot, { index, error: Boolean(error) }) }, index))
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ErrorMessage_default, { message: error })
-        ]
-      }
-    );
-  }
-);
-InputOtp.displayName = "Input";
-
-// src/components/primitives/avatar.tsx
-var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
-var React8 = __toESM(require("react"), 1);
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var AvatarBase = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-  AvatarPrimitive.Root,
-  {
-    ref,
-    className: cn("relative flex shrink-0 overflow-hidden rounded-full", className),
-    ...props
-  }
-));
-AvatarBase.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-  AvatarPrimitive.Image,
-  {
-    ref,
-    className: cn("aspect-square h-full w-full", className),
-    "data-testid": "job-card-avatar",
-    ...props
+                "data-testid": `counter-element-${props.id}`,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "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__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Plus, { className: "h-4 w-4 text-green-100" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ErrorMessage_default, { message: error })
+        ]
+      }
+    );
   }
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-  AvatarPrimitive.Fallback,
+);
+Counter.displayName = "Counter";
+var counterVariants = (0, import_cva7.cva)(
+  [
+    "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"
+  ],
   {
-    ref,
-    className: cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-pumpkin-100 py-2 text-sm font-bold capitalize leading-normal text-white md:text-lg",
-      className
-    ),
-    ...props
-  }
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-// src/components/ui/Avatar.tsx
-var import_cva7 = require("cva");
-var import_link = __toESM(require("next/link"), 1);
-var import_jsx_runtime22 = require("react/jsx-runtime");
-function Avatar({ size, src, href, name, ...linkProps }) {
-  const fallbackShort = name?.slice(0, 2);
-  const fallbackWords = name?.split(" ").map((n) => n[0]).join("").slice(0, 2);
-  const fallback = fallbackWords && fallbackWords.length > 1 ? fallbackWords : fallbackShort;
-  const renderAvatar = () => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(AvatarBase, { className: avatarVariants({ size }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AvatarImage, { src, alt: name }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AvatarFallback, { children: fallback?.toUpperCase() })
-  ] });
-  if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_link.default, { href, ...linkProps, children: renderAvatar() });
-  }
-  return renderAvatar();
-}
-var avatarVariants = (0, import_cva7.cva)("ring ring-white ring-2", {
-  variants: {
-    size: {
-      large: "h-16 w-16",
-      medium: "h-10 w-10",
-      small: "h-8 w-8"
+    variants: {
+      theme: {
+        light: "text-grey-80 border",
+        dark: "text-white"
+      },
+      hasIcon: {
+        false: "pl-3",
+        true: "pl-8"
+      }
+    },
+    defaultVariants: {
+      theme: "light",
+      hasIcon: false
     }
-  },
-  defaultVariants: {
-    size: "medium"
   }
-});
+);
 
 // src/components/ui/Icon.tsx
 var import_react_slot2 = require("@radix-ui/react-slot");
 var import_cva8 = require("cva");
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_tailwind_merge3 = require("tailwind-merge");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Icon = (0, import_react9.forwardRef)(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Icon = (0, import_react8.forwardRef)(
   ({ variant, size, active = false, readonly = false, className, ...props }, ref) => {
     const Component = readonly ? import_react_slot2.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Component,
       {
         className: cn(
@@ -1601,6 +1537,91 @@ var iconVariants = (0, import_cva8.cva)(
   }
 );
 
+// src/components/ui/InputOtp.tsx
+var import_react9 = require("react");
+
+// src/components/primitives/input-otp.tsx
+var import_input_otp = require("input-otp");
+var import_lucide_react12 = require("lucide-react");
+var React8 = __toESM(require("react"), 1);
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var InputOTP = React8.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  import_input_otp.OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:cursor-not-allowed", className),
+    ...props
+  }
+));
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, className: cn("flex items-center", className), ...props }));
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React8.forwardRef(({ index, error, className, ...props }, ref) => {
+  const inputOTPContext = React8.useContext(import_input_otp.OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-neutral-200 text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md dark:border-neutral-800",
+        isActive && "z-10 ring-2 ring-purple-100 ring-offset-white dark:ring-purple-20 dark:ring-offset-purple-100",
+        error && "border-red-500 dark:border-red-400",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-4 w-px animate-caret-blink bg-neutral-950 duration-1000 dark:bg-neutral-50" }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React8.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react12.Dot, {}) }));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+// src/components/ui/InputOtp.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var InputOtp = (0, import_react9.forwardRef)(
+  ({ digits, label, description, error, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "div",
+      {
+        className: "group flex w-full flex-col gap-1",
+        "data-testid": `input-otp-wrapper-${props.id}`,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            Label_default,
+            {
+              text: label,
+              htmlFor: props.name,
+              required: props.required,
+              description
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "relative flex flex-row items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            InputOTP,
+            {
+              ref,
+              maxLength: digits,
+              "data-testid": `input-otp-element-${props.id}`,
+              ...props,
+              children: [...Array(digits)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputOTPGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputOTPSlot, { index, error: Boolean(error) }) }, index))
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ErrorMessage_default, { message: error })
+        ]
+      }
+    );
+  }
+);
+InputOtp.displayName = "Input";
+
 // src/components/ui/LinkButton.tsx
 var import_link2 = __toESM(require("next/link"), 1);
 var import_jsx_runtime24 = require("react/jsx-runtime");
@@ -1670,18 +1691,204 @@ function ReadMore({ text, ...props }) {
   ] });
 }
 
+// src/components/ui/DatePicker.tsx
+var import_cva9 = require("cva");
+var import_react11 = require("react");
+var import_date_fns = require("date-fns");
+
+// src/components/ui/calendar.tsx
+var import_lucide_react13 = require("lucide-react");
+var import_react_day_picker = require("react-day-picker");
+
+// src/components/ui/buttonShadcn.tsx
+var React9 = __toESM(require("react"), 1);
+var import_react_slot3 = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var buttonVariants2 = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-neutral-300",
+  {
+    variants: {
+      variant: {
+        default: "bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
+        destructive: "bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
+        outline: "border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+        secondary: "bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+        ghost: "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button2 = React9.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? import_react_slot3.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      Comp,
+      {
+        className: cn(buttonVariants2({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button2.displayName = "Button";
+
+// src/components/ui/calendar.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_react_day_picker.DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants2({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-neutral-500 rounded-md w-8 font-normal text-[0.8rem] dark:text-neutral-400",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-neutral-100 [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected].day-range-end)]:rounded-r-md dark:[&:has([aria-selected])]:bg-neutral-800 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50",
+          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants2({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected: "bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
+        day_today: "bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
+        day_outside: "day-outside text-neutral-500 aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400",
+        day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
+        day_range_middle: "aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50",
+        day_hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        IconLeft: ({ className: className2, ...props2 }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react13.ChevronLeft, { className: cn("h-4 w-4", className2), ...props2 }),
+        IconRight: ({ className: className2, ...props2 }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react13.ChevronRight, { className: cn("h-4 w-4", className2), ...props2 })
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+// src/components/ui/DatePicker.tsx
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var DatePicker = (0, import_react11.forwardRef)(({ label, description, required, classNames, value, onChange, error }, ref) => {
+  const [date, setDate] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
+    setDate(value ?? null);
+  }, [value]);
+  const handleDateSelect = (dateSelected) => {
+    if (!dateSelected) return;
+    onChange?.(dateSelected);
+    setDate(dateSelected);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("flex w-auto flex-col gap-1"), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      Label_default,
+      {
+        text: label,
+        required,
+        description,
+        className: classNames?.label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Popover, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn(datePickerStyle()), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.Calendar, { size: 16 }),
+        date ? (0, import_date_fns.format)(date, "MM/dd/yyyy") : "Select a date"
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PopoverContent, { ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        Calendar,
+        {
+          mode: "single",
+          selected: date || void 0,
+          onSelect: handleDateSelect,
+          captionLayout: "dropdown",
+          showOutsideDays: true
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ErrorMessage_default, { message: error })
+  ] });
+});
+var datePickerStyle = (0, import_cva9.cva)(
+  [
+    "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",
+    "text-grey-80 border"
+  ]
+);
+
 // src/components/company/CompanyBenefits.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function CompanyBenefits({ benefits }) {
   if (!benefits) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "company-benefits", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "break-word max-w-full text-xl font-bold text-black sm:max-w-2xl md:max-w-lg", children: "Company benefits" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "flex flex-col gap-3", children: benefits.map((benefit, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { className: "text-base text-grey-80", children: benefit }, `${benefit}-${i}`)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "company-benefits", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "break-word max-w-full text-xl font-bold text-black sm:max-w-2xl md:max-w-lg", children: "Company benefits" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "flex flex-col gap-3", children: benefits.map((benefit, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { className: "text-base text-grey-80", children: benefit }, `${benefit}-${i}`)) })
   ] });
 }
 
 // src/components/company/CompanyInformation.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function CompanyInformation({
   name,
   how,
@@ -1689,8 +1896,8 @@ function CompanyInformation({
   wow,
   website
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       "h2",
       {
         "data-testid": "company-name",
@@ -1701,22 +1908,22 @@ function CompanyInformation({
         ]
       }
     ),
-    how && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { "data-testid": "company-information", className: "text-base text-grey-80", children: how }),
-    mission && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "\u{1F680}" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("p", { className: "text-base text-grey-80", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "pr-1 font-bold", children: "Mission" }),
+    how && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { "data-testid": "company-information", className: "text-base text-grey-80", children: how }),
+    mission && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: "\u{1F680}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { className: "text-base text-grey-80", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "pr-1 font-bold", children: "Mission" }),
         mission
       ] })
     ] }),
-    wow && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "\u{1F31F}" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("p", { className: "text-base text-grey-80", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "pr-1 font-bold", children: "Wow Factor" }),
+    wow && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: "\u{1F31F}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { className: "text-base text-grey-80", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "pr-1 font-bold", children: "Wow Factor" }),
         wow
       ] })
     ] }),
-    website && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    website && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       LinkButton,
       {
         "data-testid": "company-website-link",
@@ -1730,22 +1937,22 @@ function CompanyInformation({
 }
 
 // src/components/company/CompanyTake.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function CompanyTake({ content, avatarSrc }) {
   if (!content) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       "data-testid": "company-take",
       className: "align-center w-full justify-start rounded-2xl bg-green-90 p-6",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-lg font-bold text-white sm:text-xl", children: "The Real Dill \u2618\uFE0F" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mt-2 flex items-center justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm font-normal text-grey-10", children: content }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-8 flex w-full items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Avatar, { name: "Jon Lee", src: avatarSrc }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col flex-wrap items-start", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm font-bold text-white", children: "Jon Lee, PT, DPT, OCS, FAAOMPT, MBA" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-xs font-normal text-grey-30", children: "Pickle co-founder" })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-lg font-bold text-white sm:text-xl", children: "The Real Dill \u2618\uFE0F" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mt-2 flex items-center justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm font-normal text-grey-10", children: content }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-8 flex w-full items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Avatar, { name: "Jon Lee", src: avatarSrc }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col flex-wrap items-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm font-bold text-white", children: "Jon Lee, PT, DPT, OCS, FAAOMPT, MBA" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xs font-normal text-grey-30", children: "Pickle co-founder" })
           ] })
         ] })
       ]
@@ -1754,60 +1961,64 @@ function CompanyTake({ content, avatarSrc }) {
 }
 
 // src/components/jobPost/JobDescription.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function JobDescription({ description }) {
   if (!description) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "text-xl font-bold", children: "Job Description" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ReadMore, { text: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "text-xl font-bold", children: "Job Description" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ReadMore, { text: description })
   ] });
 }
 
 // src/components/jobPost/JobHeader.tsx
-var import_lucide_react15 = require("lucide-react");
+var import_lucide_react17 = require("lucide-react");
 var import_image = __toESM(require("next/image"), 1);
 
 // src/components/buttons/BackButton.tsx
-var import_lucide_react13 = require("lucide-react");
+var import_lucide_react15 = require("lucide-react");
 var import_navigation2 = require("next/navigation");
 
 // src/hooks/useWindowHistory.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/contexts/WindowHistoryProvider.tsx
 var import_navigation = require("next/navigation");
-var import_react11 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var WindowHistoryContext = (0, import_react11.createContext)({});
+var import_react12 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var WindowHistoryContext = (0, import_react12.createContext)({});
 function WindowHistoryProvider({ children }) {
-  const [history, setHistory] = (0, import_react11.useState)([]);
+  const [history, setHistory] = (0, import_react12.useState)([]);
   const searchParams = (0, import_navigation.useSearchParams)();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     setHistory(
       (prev) => prev.at(-1) === window.location.href ? prev : [...prev, window.location.href]
     );
   }, [searchParams]);
-  const contextValue = (0, import_react11.useMemo)(() => ({ history }), [history]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(WindowHistoryContext.Provider, { value: contextValue, children });
+  const contextValue = (0, import_react12.useMemo)(() => ({ history }), [history]);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(WindowHistoryContext.Provider, { value: contextValue, children });
 }
 
 // src/hooks/useWindowHistory.ts
 function useWindowHistory() {
-  const windowHistoryContext = (0, import_react12.useContext)(WindowHistoryContext);
+  const windowHistoryContext = (0, import_react13.useContext)(WindowHistoryContext);
   return windowHistoryContext;
 }
 
 // src/components/buttons/BackButton.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function BackButton({ acceptedRoutes, fallbackHref, className, ...props }) {
   const { history } = useWindowHistory();
   const router = (0, import_navigation2.useRouter)();
   const isAcceptedRoute = (r) => !!acceptedRoutes?.find((route) => new RegExp("^" + route + "$", "i").test(r));
   const goBack = () => {
     const previous = history[history.length - 2];
-    history.length > 1 && isAcceptedRoute(previous) ? router.back() : router.push(fallbackHref ?? "/");
+    if (history.length > 1 && isAcceptedRoute(previous)) {
+      router.back();
+    } else {
+      router.push(fallbackHref ?? "/");
+    }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Icon,
     {
       "aria-label": "back button",
@@ -1816,38 +2027,38 @@ function BackButton({ acceptedRoutes, fallbackHref, className, ...props }) {
       onClick: goBack,
       className,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.X, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react15.X, {})
     }
   );
 }
 
 // src/lib/icons.ts
-var import_lucide_react14 = require("lucide-react");
+var import_lucide_react16 = require("lucide-react");
 var iconMap = {
-  house: import_lucide_react14.Home,
-  layers: import_lucide_react14.Layers,
-  users: import_lucide_react14.Users,
-  settings: import_lucide_react14.Settings,
-  building: import_lucide_react14.Building,
-  bell: import_lucide_react14.Bell,
-  wallet: import_lucide_react14.Wallet,
-  contact: import_lucide_react14.Contact,
-  banknote: import_lucide_react14.Banknote,
-  "message-square-dot": import_lucide_react14.MessageSquareDot,
-  "life-buoy": import_lucide_react14.LifeBuoy,
-  "building-2": import_lucide_react14.Building2,
-  "gallery-vertical-end": import_lucide_react14.GalleryVerticalEnd,
-  "square-kanban": import_lucide_react14.SquareKanban,
-  "briefcase-business": import_lucide_react14.BriefcaseBusiness,
-  "circle-user": import_lucide_react14.CircleUser,
-  "key-round": import_lucide_react14.KeyRound,
-  "clock-2": import_lucide_react14.Clock2,
-  "circle-user-round": import_lucide_react14.CircleUserRound,
-  "map-pin": import_lucide_react14.MapPin
+  house: import_lucide_react16.Home,
+  layers: import_lucide_react16.Layers,
+  users: import_lucide_react16.Users,
+  settings: import_lucide_react16.Settings,
+  building: import_lucide_react16.Building,
+  bell: import_lucide_react16.Bell,
+  wallet: import_lucide_react16.Wallet,
+  contact: import_lucide_react16.Contact,
+  banknote: import_lucide_react16.Banknote,
+  "message-square-dot": import_lucide_react16.MessageSquareDot,
+  "life-buoy": import_lucide_react16.LifeBuoy,
+  "building-2": import_lucide_react16.Building2,
+  "gallery-vertical-end": import_lucide_react16.GalleryVerticalEnd,
+  "square-kanban": import_lucide_react16.SquareKanban,
+  "briefcase-business": import_lucide_react16.BriefcaseBusiness,
+  "circle-user": import_lucide_react16.CircleUser,
+  "key-round": import_lucide_react16.KeyRound,
+  "clock-2": import_lucide_react16.Clock2,
+  "circle-user-round": import_lucide_react16.CircleUserRound,
+  "map-pin": import_lucide_react16.MapPin
 };
 
 // src/components/jobPost/JobHeader.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function JobHeader({
   title,
   subtitles,
@@ -1863,9 +2074,9 @@ function JobHeader({
 }) {
   const renderIcon = (icon) => {
     const Icon2 = iconMap[icon];
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon2, { size: 18 });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon2, { size: 18 });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
       "data-testid": "job-header-root",
@@ -1874,8 +2085,8 @@ function JobHeader({
         !standalone && "rounded-3xl"
       ),
       children: [
-        !standalone && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative flex min-h-16 w-full items-center rounded-t-3xl bg-transparent md:min-h-24 md:flex-row lg:min-h-32", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        !standalone && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative flex min-h-16 w-full items-center rounded-t-3xl bg-transparent md:min-h-24 md:flex-row lg:min-h-32", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             import_image.default,
             {
               className: "h-full w-full rounded-t-3xl object-cover",
@@ -1884,7 +2095,7 @@ function JobHeader({
               fill: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             BackButton,
             {
               acceptedRoutes: backAcceptedRoutes,
@@ -1893,12 +2104,12 @@ function JobHeader({
               "data-testid": "job-header-back-button"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "div",
             {
               className: "absolute left-4 top-8 md:left-6 md:top-16 lg:top-24",
               "data-testid": "job-header-avatar",
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 Avatar,
                 {
                   size: "large",
@@ -1912,9 +2123,9 @@ function JobHeader({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex w-full flex-col items-start justify-start gap-4 px-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col md:flex-row", children: [
-            standalone && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "-mt-4 mr-4 md:mt-0", "data-testid": "job-header-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex w-full flex-col items-start justify-start gap-4 px-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col md:flex-row", children: [
+            standalone && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "-mt-4 mr-4 md:mt-0", "data-testid": "job-header-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               Avatar,
               {
                 size: "large",
@@ -1925,26 +2136,26 @@ function JobHeader({
                 rel: "noopener noreferrer"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "prose mt-4 flex w-full items-center text-grey-80 lg:prose-lg", children: subtitles?.map((subtitle, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "prose mt-4 flex w-full items-center text-grey-80 lg:prose-lg", children: subtitles?.map((subtitle, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
               "div",
               {
                 "data-testid": `job-header-subtitle-${i}`,
                 className: "flex items-center",
                 children: [
                   subtitle,
-                  i < subtitles.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.Dot, { className: "mx-1 shrink-0", size: 10 })
+                  i < subtitles.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react17.Dot, { className: "mx-1 shrink-0", size: 10 })
                 ]
               },
               subtitle
             )) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             "div",
             {
               "data-testid": "job-header-content",
               className: "mt-2 flex w-full flex-row flex-wrap items-center justify-between gap-1",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   "h2",
                   {
                     "data-testid": "job-header-title",
@@ -1952,7 +2163,7 @@ function JobHeader({
                     children: title
                   }
                 ),
-                !!actions && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                !!actions && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   "div",
                   {
                     className: "flex w-full justify-end gap-2 md:w-auto",
@@ -1963,12 +2174,12 @@ function JobHeader({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "div",
             {
               "data-testid": "job-header-tags",
               className: "flex flex-row flex-wrap items-center justify-start gap-2",
-              children: tags?.map(({ name, label, icon }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              children: tags?.map(({ name, label, icon }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                 Chip_default,
                 {
                   size: "small",
@@ -1977,7 +2188,7 @@ function JobHeader({
                   "data-testid": `job-header-tag-${name}`,
                   children: [
                     renderIcon(icon),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: label })
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: label })
                   ]
                 },
                 name
@@ -1993,104 +2204,8 @@ function JobHeader({
 // src/components/jobPost/JobPost.tsx
 var DateFns = __toESM(require("date-fns"), 1);
 
-// src/types/data/shared_pickle_output_latest.ts
-var shared_pickle_output_latest_exports = {};
-__export(shared_pickle_output_latest_exports, {
-  CurrencyEnum: () => CurrencyEnum,
-  DetailLevelEnum: () => DetailLevelEnum,
-  TypeEnum: () => TypeEnum,
-  UnitTextEnum: () => UnitTextEnum,
-  imageAssetSchema: () => imageAssetSchema,
-  imageSchema: () => imageSchema,
-  monetaryAmountSchema: () => monetaryAmountSchema,
-  placeSchema: () => placeSchema,
-  postalAddressSchema: () => postalAddressSchema,
-  quantitativeValueSchema: () => quantitativeValueSchema
-});
-var import_zod = require("zod");
-var TypeEnum = import_zod.z.enum(["IMAGE"]);
-var DetailLevelEnum = import_zod.z.enum(["COUNTRY", "GEO", "LOCALITY", "POSTAL_CODE", "REGION"]);
-var UnitTextEnum = import_zod.z.enum(["DAY", "HOUR", "MONTH", "PER_ACTIVITY", "WEEK", "YEAR"]);
-var CurrencyEnum = import_zod.z.enum(["EUR", "GBP", "USD"]);
-var postalAddressSchema = import_zod.z.object({
-  version: import_zod.z.literal("1.0.0").default("1.0.0"),
-  type: import_zod.z.string().describe("Document type used for schema"),
-  addressCountry: import_zod.z.string().describe("The physical country as defined in ISO 3166 Alpha-2"),
-  addressRegion: import_zod.z.optional(import_zod.z.string()).describe("The region in which the locality is, and which is in the country."),
-  addressLocality: import_zod.z.optional(import_zod.z.string()).describe("The locality in which the street address is, and which is in the region. In the US this would be city."),
-  streetAddress: import_zod.z.optional(import_zod.z.string()).describe("The street name of the address within the locality."),
-  streetNumber: import_zod.z.optional(import_zod.z.string()).describe("The house of building number within the street."),
-  postalCode: import_zod.z.optional(import_zod.z.string()).describe("The postal code"),
-  description: import_zod.z.optional(import_zod.z.string()).describe("A descriptive string containing the full address.")
-});
-var placeSchema = import_zod.z.object({
-  version: import_zod.z.literal("1.0.0").default("1.0.0"),
-  detailLevel: import_zod.z.optional(DetailLevelEnum),
-  latitude: import_zod.z.optional(import_zod.z.number()).describe("The latitude of a location."),
-  longitude: import_zod.z.optional(import_zod.z.number()).describe("The longitude of a location."),
-  address: import_zod.z.optional(postalAddressSchema).describe("The physical place of the location")
-});
-var quantitativeValueSchema = import_zod.z.object({
-  version: import_zod.z.literal("1.0.0").default("1.0.0"),
-  type: import_zod.z.string().describe("Document type used for schema"),
-  value: import_zod.z.optional(import_zod.z.number()).describe("The single value for some quantity e.g 5000, if a range is needed use minValue and maxValue. Typically used for a single salary."),
-  minValue: import_zod.z.optional(import_zod.z.number()).describe("The single minium value in a range for a quantitative_value, requires a maximum value."),
-  maxValue: import_zod.z.optional(import_zod.z.number()).describe("The maximum value in a range for a quantitative_value, requires a minimum value."),
-  unitText: UnitTextEnum
-});
-var monetaryAmountSchema = import_zod.z.object({
-  version: import_zod.z.literal("1.0.0").default("1.0.0"),
-  type: import_zod.z.string().describe("Document type used for schema"),
-  singleValue: import_zod.z.optional(import_zod.z.number()).describe("The annualized single value for some quantity e.g 5000, if a range is needed use minValue and maxValue. Deprecated - use value.value instead."),
-  minValue: import_zod.z.optional(import_zod.z.number()).describe("The annualized single minium value in a range for a quantitative_value. Deprecated use value.minValue"),
-  maxValue: import_zod.z.optional(import_zod.z.number()).describe("The annualized maximum value in a range for a quantitative_value. Deprecated use value.maxValue"),
-  value: import_zod.z.optional(quantitativeValueSchema).describe("The quantitative_value for a given salary"),
-  currency: import_zod.z.optional(CurrencyEnum)
-});
-var imageAssetSchema = import_zod.z.object({
-  version: import_zod.z.literal("1.0.0").default("1.0.0"),
-  altText: import_zod.z.optional(import_zod.z.string()).describe("The alt text for the image"),
-  assetId: import_zod.z.optional(import_zod.z.string()).describe("The asset ID for the image"),
-  description: import_zod.z.optional(import_zod.z.string()).describe("The description for the image"),
-  extension: import_zod.z.optional(import_zod.z.string()).describe("The extension for the image"),
-  label: import_zod.z.optional(import_zod.z.string()).describe("The label for the image"),
-  mimeType: import_zod.z.optional(import_zod.z.string()).describe("The mime type for the image"),
-  originalFilename: import_zod.z.optional(import_zod.z.string()).describe("The original filename for the image"),
-  path: import_zod.z.optional(import_zod.z.string()).describe("The path for the image"),
-  sha1Hash: import_zod.z.optional(import_zod.z.string()).describe("The SHA1 hash for the image"),
-  size: import_zod.z.optional(import_zod.z.number()).describe("The size for the image"),
-  title: import_zod.z.optional(import_zod.z.string()).describe("The title for the image"),
-  uploadId: import_zod.z.optional(import_zod.z.string()).describe("The upload ID for the image"),
-  url: import_zod.z.optional(import_zod.z.string()).describe("The URL for the image")
-});
-var imageSchema = import_zod.z.object({
-  version: import_zod.z.literal("1.0.0").default("1.0.0"),
-  type: import_zod.z.string().describe("Document type used for schema"),
-  asset: import_zod.z.optional(imageAssetSchema).describe("The asset for the image")
-});
-
-// src/lib/salaryRange.ts
-function salaryRange(salary) {
-  if (!salary) return null;
-  const min = salary.minValue;
-  const max = salary.maxValue;
-  const single = salary.singleValue;
-  const signs = {
-    [CurrencyEnum.Values.USD]: "$",
-    [CurrencyEnum.Values.GBP]: "\xA3",
-    [CurrencyEnum.Values.EUR]: "\u20AC"
-  };
-  const sign = signs[salary.currency ?? CurrencyEnum.Values.USD];
-  if (min == null && max == null && single == null) return null;
-  if (single != null) return sign + single.toLocaleString();
-  if (min === max) return sign + min?.toLocaleString();
-  if (min != null && max != null)
-    return sign + min?.toLocaleString() + " - " + sign + max?.toLocaleString();
-  return null;
-}
-
 // src/hooks/useDisplayText.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/lib/mappings.ts
 var employmentTypeDisplayText = {
@@ -2534,9 +2649,9 @@ var DisplayTextService = class {
 
 // src/hooks/useDisplayText.ts
 var useDisplayText = (scope, value) => {
-  const [displayText, setDisplayText] = (0, import_react13.useState)("");
-  const displayService = (0, import_react13.useMemo)(() => new DisplayTextService(), []);
-  (0, import_react13.useEffect)(() => {
+  const [displayText, setDisplayText] = (0, import_react14.useState)("");
+  const displayService = (0, import_react14.useMemo)(() => new DisplayTextService(), []);
+  (0, import_react14.useEffect)(() => {
     if (!displayService || !value) {
       setDisplayText("");
       return;
@@ -2578,8 +2693,104 @@ function formattedJobLocation(job) {
   return [address, remote].filter(Boolean).join(" | ");
 }
 
+// src/types/data/shared_pickle_output_latest.ts
+var shared_pickle_output_latest_exports = {};
+__export(shared_pickle_output_latest_exports, {
+  CurrencyEnum: () => CurrencyEnum,
+  DetailLevelEnum: () => DetailLevelEnum,
+  TypeEnum: () => TypeEnum,
+  UnitTextEnum: () => UnitTextEnum,
+  imageAssetSchema: () => imageAssetSchema,
+  imageSchema: () => imageSchema,
+  monetaryAmountSchema: () => monetaryAmountSchema,
+  placeSchema: () => placeSchema,
+  postalAddressSchema: () => postalAddressSchema,
+  quantitativeValueSchema: () => quantitativeValueSchema
+});
+var import_zod = require("zod");
+var TypeEnum = import_zod.z.enum(["IMAGE"]);
+var DetailLevelEnum = import_zod.z.enum(["COUNTRY", "GEO", "LOCALITY", "POSTAL_CODE", "REGION"]);
+var UnitTextEnum = import_zod.z.enum(["DAY", "HOUR", "MONTH", "PER_ACTIVITY", "WEEK", "YEAR"]);
+var CurrencyEnum = import_zod.z.enum(["EUR", "GBP", "USD"]);
+var postalAddressSchema = import_zod.z.object({
+  version: import_zod.z.literal("1.0.0").default("1.0.0"),
+  type: import_zod.z.string().describe("Document type used for schema"),
+  addressCountry: import_zod.z.string().describe("The physical country as defined in ISO 3166 Alpha-2"),
+  addressRegion: import_zod.z.optional(import_zod.z.string()).describe("The region in which the locality is, and which is in the country."),
+  addressLocality: import_zod.z.optional(import_zod.z.string()).describe("The locality in which the street address is, and which is in the region. In the US this would be city."),
+  streetAddress: import_zod.z.optional(import_zod.z.string()).describe("The street name of the address within the locality."),
+  streetNumber: import_zod.z.optional(import_zod.z.string()).describe("The house of building number within the street."),
+  postalCode: import_zod.z.optional(import_zod.z.string()).describe("The postal code"),
+  description: import_zod.z.optional(import_zod.z.string()).describe("A descriptive string containing the full address.")
+});
+var placeSchema = import_zod.z.object({
+  version: import_zod.z.literal("1.0.0").default("1.0.0"),
+  detailLevel: import_zod.z.optional(DetailLevelEnum),
+  latitude: import_zod.z.optional(import_zod.z.number()).describe("The latitude of a location."),
+  longitude: import_zod.z.optional(import_zod.z.number()).describe("The longitude of a location."),
+  address: import_zod.z.optional(postalAddressSchema).describe("The physical place of the location")
+});
+var quantitativeValueSchema = import_zod.z.object({
+  version: import_zod.z.literal("1.0.0").default("1.0.0"),
+  type: import_zod.z.string().describe("Document type used for schema"),
+  value: import_zod.z.optional(import_zod.z.number()).describe("The single value for some quantity e.g 5000, if a range is needed use minValue and maxValue. Typically used for a single salary."),
+  minValue: import_zod.z.optional(import_zod.z.number()).describe("The single minium value in a range for a quantitative_value, requires a maximum value."),
+  maxValue: import_zod.z.optional(import_zod.z.number()).describe("The maximum value in a range for a quantitative_value, requires a minimum value."),
+  unitText: UnitTextEnum
+});
+var monetaryAmountSchema = import_zod.z.object({
+  version: import_zod.z.literal("1.0.0").default("1.0.0"),
+  type: import_zod.z.string().describe("Document type used for schema"),
+  singleValue: import_zod.z.optional(import_zod.z.number()).describe("The annualized single value for some quantity e.g 5000, if a range is needed use minValue and maxValue. Deprecated - use value.value instead."),
+  minValue: import_zod.z.optional(import_zod.z.number()).describe("The annualized single minium value in a range for a quantitative_value. Deprecated use value.minValue"),
+  maxValue: import_zod.z.optional(import_zod.z.number()).describe("The annualized maximum value in a range for a quantitative_value. Deprecated use value.maxValue"),
+  value: import_zod.z.optional(quantitativeValueSchema).describe("The quantitative_value for a given salary"),
+  currency: import_zod.z.optional(CurrencyEnum)
+});
+var imageAssetSchema = import_zod.z.object({
+  version: import_zod.z.literal("1.0.0").default("1.0.0"),
+  altText: import_zod.z.optional(import_zod.z.string()).describe("The alt text for the image"),
+  assetId: import_zod.z.optional(import_zod.z.string()).describe("The asset ID for the image"),
+  description: import_zod.z.optional(import_zod.z.string()).describe("The description for the image"),
+  extension: import_zod.z.optional(import_zod.z.string()).describe("The extension for the image"),
+  label: import_zod.z.optional(import_zod.z.string()).describe("The label for the image"),
+  mimeType: import_zod.z.optional(import_zod.z.string()).describe("The mime type for the image"),
+  originalFilename: import_zod.z.optional(import_zod.z.string()).describe("The original filename for the image"),
+  path: import_zod.z.optional(import_zod.z.string()).describe("The path for the image"),
+  sha1Hash: import_zod.z.optional(import_zod.z.string()).describe("The SHA1 hash for the image"),
+  size: import_zod.z.optional(import_zod.z.number()).describe("The size for the image"),
+  title: import_zod.z.optional(import_zod.z.string()).describe("The title for the image"),
+  uploadId: import_zod.z.optional(import_zod.z.string()).describe("The upload ID for the image"),
+  url: import_zod.z.optional(import_zod.z.string()).describe("The URL for the image")
+});
+var imageSchema = import_zod.z.object({
+  version: import_zod.z.literal("1.0.0").default("1.0.0"),
+  type: import_zod.z.string().describe("Document type used for schema"),
+  asset: import_zod.z.optional(imageAssetSchema).describe("The asset for the image")
+});
+
+// src/lib/salaryRange.ts
+function salaryRange(salary) {
+  if (!salary) return null;
+  const min = salary.minValue;
+  const max = salary.maxValue;
+  const single = salary.singleValue;
+  const signs = {
+    [CurrencyEnum.Values.USD]: "$",
+    [CurrencyEnum.Values.GBP]: "\xA3",
+    [CurrencyEnum.Values.EUR]: "\u20AC"
+  };
+  const sign = signs[salary.currency ?? CurrencyEnum.Values.USD];
+  if (min == null && max == null && single == null) return null;
+  if (single != null) return sign + single.toLocaleString();
+  if (min === max) return sign + min?.toLocaleString();
+  if (min != null && max != null)
+    return sign + min?.toLocaleString() + " - " + sign + max?.toLocaleString();
+  return null;
+}
+
 // src/components/jobPost/JobPost.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function JobPost({
   job,
   bannerSrc,
@@ -2623,7 +2834,7 @@ function JobPost({
       label: formattedLocation
     }
   ].filter((t) => !!t);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       className: cn(
@@ -2631,7 +2842,7 @@ function JobPost({
         !standalone && "border-1 rounded-3xl border-grey-5"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           JobHeader,
           {
             title: job.title,
@@ -2645,16 +2856,16 @@ function JobPost({
             tags
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-8 px-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(JobDescription, { description: job.description }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-8 px-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(JobDescription, { description: job.description }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             CompanyTake,
             {
               avatarSrc,
               content: job.hiringOrganization?.companyNdg?.companyNdgTake
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             CompanyInformation,
             {
               name: job.hiringOrganization?.companyName ?? "",
@@ -2664,7 +2875,7 @@ function JobPost({
               website: job.hiringOrganization?.companyWebsite
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             CompanyBenefits,
             {
               benefits: job.hiringOrganization?.companyCareers?.companyBenefits?.map((b) => b.title).filter((d) => d !== void 0)
@@ -2676,24 +2887,6 @@ function JobPost({
   );
 }
 
-// src/types/data/job_posting_service_latest.ts
-var job_posting_service_latest_exports = {};
-__export(job_posting_service_latest_exports, {
-  BestFitEnum: () => BestFitEnum,
-  ClinicalLicenseEnum: () => ClinicalLicenseEnum,
-  ClinicalSettingEnum: () => ClinicalSettingEnum,
-  ClinicalSpecialtyEnum: () => ClinicalSpecialtyEnum,
-  EmploymentLevelEnum: () => EmploymentLevelEnum,
-  EmploymentTypeEnum: () => EmploymentTypeEnum,
-  JobFunctionEnum: () => JobFunctionEnum,
-  JobLocationTypeEnum: () => JobLocationTypeEnum,
-  PublishStatusEnum: () => PublishStatusEnum2,
-  ShiftEnum: () => ShiftEnum,
-  TypeEnum: () => TypeEnum3,
-  jobPostSchema: () => jobPostSchema
-});
-var import_zod3 = require("zod");
-
 // src/types/data/company_service_latest.ts
 var company_service_latest_exports = {};
 __export(company_service_latest_exports, {
@@ -2841,6 +3034,22 @@ var officeSchema = import_zod2.z.object({
 });
 
 // src/types/data/job_posting_service_latest.ts
+var job_posting_service_latest_exports = {};
+__export(job_posting_service_latest_exports, {
+  BestFitEnum: () => BestFitEnum,
+  ClinicalLicenseEnum: () => ClinicalLicenseEnum,
+  ClinicalSettingEnum: () => ClinicalSettingEnum,
+  ClinicalSpecialtyEnum: () => ClinicalSpecialtyEnum,
+  EmploymentLevelEnum: () => EmploymentLevelEnum,
+  EmploymentTypeEnum: () => EmploymentTypeEnum,
+  JobFunctionEnum: () => JobFunctionEnum,
+  JobLocationTypeEnum: () => JobLocationTypeEnum,
+  PublishStatusEnum: () => PublishStatusEnum2,
+  ShiftEnum: () => ShiftEnum,
+  TypeEnum: () => TypeEnum3,
+  jobPostSchema: () => jobPostSchema
+});
+var import_zod3 = require("zod");
 var TypeEnum3 = import_zod3.z.enum(["JOB_POST"]);
 var JobLocationTypeEnum = import_zod3.z.enum(["FLOAT", "HYBRID", "ONSITE", "REMOTE"]);
 var EmploymentTypeEnum = import_zod3.z.enum(["CONTRACT", "FULL_TIME", "INTERNSHIP", "OTHER", "PART_TIME", "PER_DIEM", "TEMPORARY"]);
@@ -2902,6 +3111,7 @@ var jobPostSchema = import_zod3.z.object({
   CompanyService,
   CompanyTake,
   Counter,
+  DatePicker,
   Icon,
   Input,
   InputOtp,