@next-degree/pickle-shared-js 0.12.7 → 0.13.1

package/dist/index.cjs

@@ -55,7 +55,7 @@ __export(index_exports, {
   Label: () => Label_default,
   LinkButton: () => LinkButton,
   ListItem: () => ListItem_default,
-  MapComponent: () => MapComponent_default,
+  MapComponent: () => MapComponent,
   PlacesQueryInput: () => PlacesQueryInput_default,
   Radio: () => Radio,
   ReadMore: () => ReadMore,
@@ -74,9 +74,9 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/ui/Chip.tsx
 var import_cva = require("cva");
+var import_react = __toESM(require("react"), 1);
 var import_tailwind_merge = require("tailwind-merge");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_tailwind_merge.twMerge)(chipVariants({ variant, size, className })), ...props });
+var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_tailwind_merge.twMerge)(chipVariants({ variant, size, className })), ...props });
 var chipVariants = (0, import_cva.cva)(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
   variants: {
     variant: {
@@ -102,7 +102,7 @@ var Chip_default = Chip;
 // src/components/ui/Input.tsx
 var import_cva2 = require("cva");
 var import_lucide_react2 = require("lucide-react");
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -112,10 +112,9 @@ function cn(...inputs) {
 }
 
 // src/components/ui/ErrorMessage.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
 function ErrorMessage({ message, className, ...props }) {
   if (!message) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
+  return /* @__PURE__ */ React.createElement("p", { className: cn("px-1 text-xs text-red-600", className), ...props }, message);
 }
 var ErrorMessage_default = ErrorMessage;
 
@@ -124,12 +123,11 @@ var import_lucide_react = 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_runtime3 = require("react/jsx-runtime");
+var React3 = __toESM(require("react"), 1);
 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_runtime3.jsx)(
+var TooltipContent = React3.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React3.createElement(
   TooltipPrimitive.Content,
   {
     ref,
@@ -144,35 +142,25 @@ var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props },
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/ui/Label.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
 function Label({ text, required, description, className, ...props }) {
   if (!text) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex w-full flex-row gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("span", { className: "text-red-600", children: "\xA0*" })
-        ]
-      }
-    ),
-    !!description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.InfoIcon, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipContent, { className: "max-w-48", children: description })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-row gap-1" }, /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      className: cn(
+        "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      ),
+      ...props
+    },
+    text,
+    required && /* @__PURE__ */ React.createElement("span", { className: "text-red-600" }, "\xA0*")
+  ), !!description && /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(import_lucide_react.InfoIcon, { className: "h-4 w-4" })), /* @__PURE__ */ React.createElement(TooltipContent, { className: "max-w-48" }, description))));
 }
 var Label_default = Label;
 
 // src/components/ui/Input.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Input = (0, import_react.forwardRef)(
+var Input = (0, import_react2.forwardRef)(
   ({ label, error, description, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
     const handleClear = () => {
       onChange?.({ target: { value: "" } });
@@ -182,47 +170,39 @@ var Input = (0, import_react.forwardRef)(
     const placeholder = props.placeholder ?? (icon === "Search" ? "Search..." : "");
     const hasIcon = !!icon;
     const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Label_default,
-        {
-          text: label,
-          htmlFor: props.name,
-          required: props.required,
-          description,
-          className: classNames?.label
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative flex flex-row items-center", children: [
-        IconComponent && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          IconComponent,
-          {
-            className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "input",
-          {
-            className: cn(inputVariants({ theme, hasIcon })),
-            ref,
-            placeholder,
-            value,
-            onChange,
-            "data-testid": `input-element-${props.id}`,
-            ...props
-          }
-        ),
-        hasIcon && value && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_lucide_react2.X,
-          {
-            className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
-            onClick: handleClear,
-            "data-testid": "clear-button"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage_default, { message: error })
-    ] });
+    return /* @__PURE__ */ React.createElement("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}` }, label && /* @__PURE__ */ React.createElement(
+      Label_default,
+      {
+        text: label,
+        htmlFor: props.name,
+        required: props.required,
+        description,
+        className: classNames?.label
+      }
+    ), /* @__PURE__ */ React.createElement("div", { className: "relative flex flex-row items-center" }, IconComponent && /* @__PURE__ */ React.createElement(
+      IconComponent,
+      {
+        className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        className: cn(inputVariants({ theme, hasIcon })),
+        ref,
+        placeholder,
+        value,
+        onChange,
+        "data-testid": `input-element-${props.id}`,
+        ...props
+      }
+    ), hasIcon && value && /* @__PURE__ */ React.createElement(
+      import_lucide_react2.X,
+      {
+        className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
+        onClick: handleClear,
+        "data-testid": "clear-button"
+      }
+    )), /* @__PURE__ */ React.createElement(ErrorMessage_default, { message: error }));
   }
 );
 Input.displayName = "Input";
@@ -283,9 +263,8 @@ var import_lucide_react5 = require("lucide-react");
 // 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_runtime6 = require("react/jsx-runtime");
-var CheckboxToggle = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var import_react3 = require("react");
+var CheckboxToggle = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -314,41 +293,32 @@ var CheckboxToggle = (0, import_react2.forwardRef)(({ className, ...props }, ref
       props.disabled && "bg-grey-20 data-[state=checked]:bg-grey-20 data-[state=checked]:text-foreground",
       className
     ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" })
-    ] })
-  }
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current" }, /* @__PURE__ */ React.createElement(import_lucide_react3.Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }), /* @__PURE__ */ React.createElement(import_lucide_react3.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_react3.forwardRef)(
   ({ error, classNames, children, ...props }, ref) => {
     const id = props.id ?? `${props.name ?? props.value?.toString()}-checkbox`;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("flex space-x-2", classNames?.wrapper), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckboxToggle, { id, ref, ...props }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-        "label",
-        {
-          htmlFor: id,
-          className: cn(
-            "text-sm",
-            props.disabled && "pointer-events-none text-grey-40",
-            classNames?.label
-          ),
-          children: [
-            children,
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorMessage_default, { message: error, className: "mt-1" })
-          ]
-        }
-      )
-    ] });
+    return /* @__PURE__ */ React.createElement("div", { className: cn("flex space-x-2", classNames?.wrapper) }, /* @__PURE__ */ React.createElement(CheckboxToggle, { id, ref, ...props }), /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "text-sm",
+          props.disabled && "pointer-events-none text-grey-40",
+          classNames?.label
+        )
+      },
+      children,
+      /* @__PURE__ */ React.createElement(ErrorMessage_default, { message: error, className: "mt-1" })
+    ));
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/components/ui/ListItem.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
 function ListItem({
   icon,
   hasCheckbox,
@@ -362,12 +332,12 @@ function ListItem({
   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 /* @__PURE__ */ React.createElement(IconComponent, { size: 14 });
     }
     return null;
   };
   const optionIcon = icon ? getIconIfValid(icon) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ React.createElement(
     "li",
     {
       className: cn(
@@ -375,70 +345,392 @@ function ListItem({
         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, { 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
-          }
-        )
-      ]
-    }
+      "data-state": isSelected ? "checked" : "unchecked"
+    },
+    optionIcon && /* @__PURE__ */ React.createElement("span", { className: "mr-2" }, optionIcon),
+    hasCheckbox && /* @__PURE__ */ React.createElement(Checkbox, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
+    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", null, title), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-grey-80" }, description)),
+    /* @__PURE__ */ React.createElement(
+      import_lucide_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
+// src/components/ui/Map/MapComponent.tsx
+var import_react_google_maps4 = require("@vis.gl/react-google-maps");
+
+// src/components/ui/Map/constants.ts
+var DEFAULT_POSITION = { lat: 40.715021, lng: -74.00459 };
+var DEFAULT_ZOOM = 10;
+var CLUSTER_DISTANCE_THRESHOLD = 1e-3;
+var PIN_COLORS = {
+  background: "#0B5441",
+  borderColor: "#EBFDF1",
+  glyphColor: "#D4F500"
+};
+var FOCUS_CIRCLE_STYLES = {
+  strokeColor: "#0B5441",
+  strokeOpacity: 0.8,
+  strokeWeight: 2,
+  fillColor: "#0B5441",
+  fillOpacity: 0.1,
+  clickable: false,
+  zIndex: 1
+};
+var CLUSTERING_CONFIG = {
+  radius: 60,
+  maxZoom: 16,
+  minPoints: 2
+};
+
+// src/components/ui/Map/hooks.ts
+var import_react4 = require("react");
+var import_use_supercluster = __toESM(require("use-supercluster"), 1);
+
+// src/components/ui/Map/utils.ts
+function getCenterForCoordinates(coords) {
+  if (coords.length === 0) return DEFAULT_POSITION;
+  const avgLat = coords.reduce((sum, coord) => sum + coord.lat, 0) / coords.length;
+  const avgLng = coords.reduce((sum, coord) => sum + coord.lng, 0) / coords.length;
+  return { lat: avgLat, lng: avgLng };
+}
+function getZoomForCoordinates(coords, defaultZoom) {
+  if (coords.length <= 1) return defaultZoom;
+  const lats = coords.map((coord) => coord.lat);
+  const lngs = coords.map((coord) => coord.lng);
+  const latDiff = Math.max(...lats) - Math.min(...lats);
+  const lngDiff = Math.max(...lngs) - Math.min(...lngs);
+  const maxDiff = Math.max(latDiff, lngDiff);
+  if (maxDiff > 0.1) return 8;
+  if (maxDiff > 0.05) return 10;
+  if (maxDiff > 0.01) return 12;
+  return 14;
+}
+function filterClusterCoordinates(coordinates, clusterLat, clusterLng) {
+  return coordinates.filter((coord) => {
+    const latDiff = Math.abs(coord.lat - clusterLat);
+    const lngDiff = Math.abs(coord.lng - clusterLng);
+    const distance = Math.sqrt(latDiff * latDiff + lngDiff * lngDiff);
+    return distance < CLUSTER_DISTANCE_THRESHOLD;
+  });
+}
+
+// src/components/ui/Map/clustering.ts
+function convertCoordinatesToGeoJSON(coordinates) {
+  return coordinates.map((coord, index) => ({
+    type: "Feature",
+    properties: {
+      cluster: false,
+      pointId: index,
+      data: coord.data
+    },
+    geometry: {
+      type: "Point",
+      coordinates: [coord.lng, coord.lat]
+    }
+  }));
+}
+
+// src/components/ui/Map/hooks.ts
+function useMapBounds(_coordinates) {
+  const [bounds, setBounds] = (0, import_react4.useState)([
+    [-180, -85],
+    [180, 85]
+  ]);
+  return { bounds, setBounds };
+}
+function useZoomLevel(initialZoom) {
+  const [zoomLevel, setZoomLevel] = (0, import_react4.useState)(initialZoom);
+  return { zoomLevel, setZoomLevel };
+}
+function useClusters(coordinates, bounds, zoomLevel) {
+  const points = (0, import_react4.useMemo)(() => {
+    if (!coordinates) return [];
+    return convertCoordinatesToGeoJSON(coordinates);
+  }, [coordinates]);
+  const { clusters, supercluster } = (0, import_use_supercluster.default)({
+    points,
+    bounds: [-180, -85, 180, 85],
+    // Use global bounds for consistency
+    zoom: zoomLevel || 10,
+    options: CLUSTERING_CONFIG
+  });
+  return { clusters, supercluster };
+}
+
+// src/components/ui/Map/MapContent.tsx
+var import_react_google_maps3 = require("@vis.gl/react-google-maps");
+var import_react6 = require("react");
+
+// src/components/ui/Map/ClusterMarker.tsx
 var import_react_google_maps = require("@vis.gl/react-google-maps");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function MapComponent({
-  apiKey,
+function ClusterMarker({
+  cluster,
+  coordinates,
+  onPinClick,
+  onPinHover,
+  zoomToLevel,
+  supercluster
+}) {
+  const [lng, lat] = cluster.geometry.coordinates;
+  const { point_count: pointCount } = cluster.properties;
+  const handleClick = () => {
+    const clusterCoordinates = filterClusterCoordinates(coordinates, lat, lng);
+    onPinClick?.(clusterCoordinates);
+    const expansionZoom = supercluster.getClusterExpansionZoom(cluster.id);
+    zoomToLevel(expansionZoom);
+  };
+  const handleMouseEnter = () => {
+    const clusterCoordinates = filterClusterCoordinates(coordinates, lat, lng);
+    onPinHover?.(clusterCoordinates);
+  };
+  const handleMouseLeave = () => onPinHover?.(null);
+  return /* @__PURE__ */ React.createElement(
+    import_react_google_maps.AdvancedMarker,
+    {
+      key: `cluster-${cluster.id}`,
+      position: { lat, lng },
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "relative flex items-center justify-center", id: "CLUSTER_MARKER" }, /* @__PURE__ */ React.createElement("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-red-500 text-sm font-bold text-white shadow-lg" }, pointCount || "?"))
+  );
+}
+
+// src/components/ui/Map/FocusCircle.tsx
+var import_react5 = require("react");
+function FocusCircle({
+  focusPoint,
+  radiusMiles,
+  map,
+  mapsLibrary
+}) {
+  const circleRef = (0, import_react5.useRef)(null);
+  const circleProps = (0, import_react5.useMemo)(() => {
+    if (!focusPoint || !radiusMiles) return null;
+    return {
+      center: focusPoint,
+      radius: radiusMiles * 1609.34
+    };
+  }, [focusPoint, radiusMiles]);
+  (0, import_react5.useEffect)(() => {
+    if (!map || !mapsLibrary || !circleProps) {
+      return;
+    }
+    if (!circleRef.current) {
+      const circle = new google.maps.Circle({
+        center: circleProps.center,
+        radius: circleProps.radius,
+        ...FOCUS_CIRCLE_STYLES,
+        map
+      });
+      circleRef.current = circle;
+    } else {
+      circleRef.current.setCenter(circleProps.center);
+      circleRef.current.setRadius(circleProps.radius);
+    }
+  }, [map, mapsLibrary, circleProps]);
+  (0, import_react5.useEffect)(() => {
+    return () => {
+      if (circleRef.current) {
+        circleRef.current.setMap(null);
+        circleRef.current = null;
+      }
+    };
+  }, []);
+  return null;
+}
+
+// src/components/ui/Map/IndividualMarker.tsx
+var import_react_google_maps2 = require("@vis.gl/react-google-maps");
+function IndividualMarker({
+  coordinate,
+  onPinClick,
+  onPinHover
+}) {
+  const handleMouseEnter = () => onPinHover?.(coordinate);
+  const handleMouseLeave = () => onPinHover?.(null);
+  const handleClick = () => onPinClick?.(coordinate);
+  return /* @__PURE__ */ React.createElement(
+    import_react_google_maps2.AdvancedMarker,
+    {
+      position: { lat: coordinate.lat, lng: coordinate.lng },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick
+    },
+    /* @__PURE__ */ React.createElement(import_react_google_maps2.Pin, { ...PIN_COLORS })
+  );
+}
+
+// src/components/ui/Map/MapContent.tsx
+function MapContent({
   mapId,
+  mapCenter,
+  mapZoom,
   position,
+  coordinates,
+  clusters,
+  supercluster,
+  onPinHover,
+  onPinClick,
+  focusPoint,
+  radiusMiles,
   className,
-  zoom = 15
+  setBounds,
+  setZoomLevel
 }) {
-  const defaultPosition = { lat: 40.715021, lng: -74.00459 };
-  const defaultZoom = 11;
-  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,
+  const map = (0, import_react_google_maps3.useMap)();
+  const mapsLibrary = (0, import_react_google_maps3.useMapsLibrary)("maps");
+  const zoomToLevel = (0, import_react6.useCallback)(
+    (newZoom) => {
+      if (map) {
+        map.setZoom(newZoom);
+      }
+    },
+    [map]
+  );
+  const handleBoundsChanged = (e) => {
+    if (e.detail.bounds) {
+      const bounds = e.detail.bounds;
+      setBounds([
+        [bounds.south, bounds.west],
+        [bounds.north, bounds.east]
+      ]);
+    }
+  };
+  const handleZoomChanged = (e) => {
+    if (e.detail.zoom) {
+      setZoomLevel(e.detail.zoom);
+    }
+  };
+  const handleCameraChanged = (e) => {
+    if (e.detail.zoom) {
+      setZoomLevel(e.detail.zoom);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: cn("relative h-screen max-w-full", className) }, /* @__PURE__ */ React.createElement(
+    import_react_google_maps3.Map,
     {
-      defaultZoom: position ? zoom : defaultZoom,
-      center: position || defaultPosition,
+      defaultZoom: mapZoom,
+      defaultCenter: mapCenter,
       mapId,
-      keyboardShortcuts: false,
+      keyboardShortcuts: true,
       disableDefaultUI: true,
       zoomControl: true,
-      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" }) })
+      onBoundsChanged: handleBoundsChanged,
+      onZoomChanged: handleZoomChanged,
+      onCameraChanged: handleCameraChanged
+    },
+    position && !coordinates && /* @__PURE__ */ React.createElement(import_react_google_maps3.AdvancedMarker, { position }, /* @__PURE__ */ React.createElement(import_react_google_maps3.Pin, { ...PIN_COLORS })),
+    coordinates && clusters.map((cluster) => {
+      const { cluster: isCluster } = cluster.properties;
+      if (isCluster) {
+        return /* @__PURE__ */ React.createElement(
+          ClusterMarker,
+          {
+            key: `cluster-${cluster.id}`,
+            cluster,
+            coordinates,
+            onPinClick,
+            onPinHover,
+            zoomToLevel,
+            supercluster
+          }
+        );
+      }
+      const originalPoint = coordinates[cluster.properties.pointId];
+      return /* @__PURE__ */ React.createElement(
+        IndividualMarker,
+        {
+          key: `marker-${cluster.properties.pointId}`,
+          coordinate: originalPoint,
+          onPinClick,
+          onPinHover
+        }
+      );
+    }),
+    coordinates && clusters.length === 0 && coordinates.map((coord, index) => /* @__PURE__ */ React.createElement(
+      IndividualMarker,
+      {
+        key: `fallback-${index}`,
+        coordinate: coord,
+        onPinClick,
+        onPinHover
+      }
+    )),
+    focusPoint && radiusMiles && /* @__PURE__ */ React.createElement(
+      FocusCircle,
+      {
+        focusPoint,
+        radiusMiles,
+        map,
+        mapsLibrary
+      }
+    )
+  ));
+}
+
+// src/components/ui/Map/MapComponent.tsx
+function MapComponent({
+  apiKey,
+  mapId,
+  position,
+  coordinates,
+  onPinHover,
+  onPinClick,
+  focusPoint,
+  radiusMiles,
+  className,
+  zoom = 10
+}) {
+  const { bounds, setBounds } = useMapBounds(coordinates);
+  const { zoomLevel, setZoomLevel } = useZoomLevel(zoom || DEFAULT_ZOOM);
+  const { clusters, supercluster } = useClusters(coordinates, bounds, zoomLevel);
+  const mapCenter = coordinates && coordinates.length > 0 ? getCenterForCoordinates(coordinates) : position || DEFAULT_POSITION;
+  const mapZoom = coordinates && coordinates.length > 1 ? getZoomForCoordinates(coordinates, zoom) : position ? zoom : DEFAULT_ZOOM;
+  return /* @__PURE__ */ React.createElement(import_react_google_maps4.APIProvider, { apiKey }, /* @__PURE__ */ React.createElement(
+    MapContent,
+    {
+      mapId,
+      mapCenter,
+      mapZoom,
+      position,
+      coordinates,
+      clusters,
+      supercluster,
+      onPinHover,
+      onPinClick,
+      focusPoint,
+      radiusMiles,
+      className,
+      setBounds,
+      setZoomLevel
     }
-  ) }) });
+  ));
 }
-var MapComponent_default = MapComponent;
 
 // src/components/ui/PlacesQueryInput.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_react3 = require("react");
+var import_react7 = require("react");
 
 // src/components/primitives/command.tsx
 var import_cmdk = require("cmdk");
 var import_lucide_react7 = require("lucide-react");
-var React3 = __toESM(require("react"), 1);
+var React5 = __toESM(require("react"), 1);
 
 // src/components/primitives/dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_lucide_react6 = require("lucide-react");
-var React2 = __toESM(require("react"), 1);
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var React4 = __toESM(require("react"), 1);
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var DialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React4.createElement(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -450,31 +742,23 @@ var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-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%] dark:border-neutral-800 dark:bg-neutral-950 sm:rounded-lg",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__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" })
-        ] })
-      ]
-    }
-  )
-] }));
+var DialogContent = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React4.createElement(DialogPortal, null, /* @__PURE__ */ React4.createElement(DialogOverlay, null), /* @__PURE__ */ React4.createElement(
+  DialogPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-neutral-800 dark:bg-neutral-950 sm:rounded-lg",
+      className
+    ),
+    ...props
+  },
+  children,
+  /* @__PURE__ */ React4.createElement(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400" }, /* @__PURE__ */ React4.createElement(import_lucide_react6.X, { className: "h-4 w-4" }), /* @__PURE__ */ React4.createElement("span", { className: "sr-only" }, "Close"))
+)));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-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 });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ React4.createElement("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ React4.createElement(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -482,7 +766,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var DialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React4.createElement(
   DialogPrimitive.Title,
   {
     ref,
@@ -491,7 +775,7 @@ var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var DialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React4.createElement(
   DialogPrimitive.Description,
   {
     ref,
@@ -502,8 +786,7 @@ var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/primitives/command.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Command = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var Command = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
   import_cmdk.Command,
   {
     ref,
@@ -515,22 +798,19 @@ var Command = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Command.displayName = import_cmdk.Command.displayName;
-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,
-      className: cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  )
-] }));
+var CommandInput = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "" }, /* @__PURE__ */ React5.createElement(import_lucide_react7.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ React5.createElement(
+  import_cmdk.Command.Input,
+  {
+    ref,
+    className: cn(
+      "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props
+  }
+)));
 CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var CommandList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
   import_cmdk.Command.List,
   {
     ref,
@@ -539,9 +819,9 @@ var CommandList = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandList.displayName = import_cmdk.Command.List.displayName;
-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 }));
+var CommandEmpty = React5.forwardRef((props, ref) => /* @__PURE__ */ React5.createElement(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
-var CommandGroup = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var CommandGroup = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
   import_cmdk.Command.Group,
   {
     ref,
@@ -553,7 +833,7 @@ var CommandGroup = React3.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var CommandSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
   import_cmdk.Command.Separator,
   {
     ref,
@@ -562,7 +842,7 @@ var CommandSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var CommandItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React5.createElement(
   import_cmdk.Command.Item,
   {
     ref,
@@ -575,7 +855,7 @@ var CommandItem = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE
 ));
 CommandItem.displayName = import_cmdk.Command.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ React5.createElement(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest text-neutral-500", className),
@@ -636,20 +916,19 @@ var geocode = async (address, key) => {
 };
 
 // src/components/ui/PlacesQueryInput.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
 function PlacesQueryInput({
   apiKey,
   selected,
   onSelect,
   className
 }) {
-  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) => {
+  const [predictions, setPredictions] = (0, import_react7.useState)(null);
+  const [input, setInput] = (0, import_react7.useState)(selected?.description ?? "");
+  const [isLoadingPredictions, setIsLoadingPredictions] = (0, import_react7.useState)(false);
+  const [shouldOpenUpward, setShouldOpenUpward] = (0, import_react7.useState)(false);
+  const timeoutRef = (0, import_react7.useRef)(null);
+  const inputRef = (0, import_react7.useRef)(null);
+  const debouncedAutocomplete = (0, import_react7.useCallback)((value) => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }
@@ -685,7 +964,7 @@ function PlacesQueryInput({
     setInput("");
   };
   const handleBlur = () => setTimeout(() => setPredictions(null), 200);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const checkDropdownPosition = () => {
       if (inputRef.current) {
         const rect = inputRef.current.getBoundingClientRect();
@@ -697,63 +976,53 @@ function PlacesQueryInput({
     window.addEventListener("resize", checkDropdownPosition);
     return () => window.removeEventListener("resize", checkDropdownPosition);
   }, []);
-  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...",
-          value: input,
-          onValueChange: handleInputChange,
-          className: "truncate pr-8"
-        }
-      ),
-      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_runtime11.jsx)(import_lucide_react8.CircleX, { className: "h-4 w-4 text-green-100" })
-        }
+  return /* @__PURE__ */ React.createElement("div", { className: cn("relative w-full", className), ref: inputRef, onBlur: handleBlur }, /* @__PURE__ */ React.createElement(Command, null, /* @__PURE__ */ React.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React.createElement(
+    CommandInput,
+    {
+      placeholder: "Type an address to search...",
+      value: input,
+      onValueChange: handleInputChange,
+      className: "truncate pr-8"
+    }
+  ), isLoadingPredictions && /* @__PURE__ */ React.createElement(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__ */ React.createElement(
+    "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
+    },
+    /* @__PURE__ */ React.createElement(import_lucide_react8.CircleX, { className: "h-4 w-4 text-green-100" })
+  )), predictions && /* @__PURE__ */ React.createElement(
+    CommandList,
+    {
+      className: cn(
+        "absolute z-50 w-full rounded-md border bg-white shadow-lg",
+        shouldOpenUpward ? "bottom-full" : "top-full"
       )
-    ] }),
-    predictions && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      CommandList,
+    },
+    /* @__PURE__ */ React.createElement(CommandEmpty, null, "No results"),
+    /* @__PURE__ */ React.createElement(CommandGroup, null, predictions.map((prediction) => /* @__PURE__ */ React.createElement(
+      CommandItem,
       {
-        className: cn(
-          "absolute z-50 w-full rounded-md border bg-white shadow-lg",
-          shouldOpenUpward ? "bottom-full" : "top-full"
-        ),
-        children: [
-          /* @__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),
-              className: "truncate",
-              children: prediction.description
-            },
-            prediction.place_id
-          )) })
-        ]
-      }
-    )
-  ] }) });
+        key: prediction.place_id,
+        onSelect: () => handleSelect(prediction),
+        className: "truncate"
+      },
+      prediction.description
+    )))
+  )));
 }
 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");
+var import_react8 = 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)(
+var React6 = __toESM(require("react"), 1);
+var Separator = React6.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React6.createElement(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -770,8 +1039,7 @@ var Separator = React4.forwardRef(({ className, orientation = "horizontal", deco
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/ui/Select.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Select = (0, import_react4.forwardRef)(
+var Select = (0, import_react8.forwardRef)(
   ({
     label,
     options,
@@ -786,10 +1054,10 @@ var Select = (0, import_react4.forwardRef)(
     ...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)(() => {
+    const [selected, setSelected] = (0, import_react8.useState)([]);
+    const [open, setOpen] = (0, import_react8.useState)(false);
+    const containerRef = (0, import_react8.useRef)(null);
+    (0, import_react8.useEffect)(() => {
       if (!value) return setSelected([]);
       setSelected(Array.isArray(value) ? value : [value]);
     }, [value]);
@@ -808,148 +1076,127 @@ var Select = (0, import_react4.forwardRef)(
       });
       onChange?.(multiselect ? newSelected : newValue);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ React.createElement(
       "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,
+        "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`
+      },
+      /* @__PURE__ */ React.createElement(
+        Label_default,
+        {
+          text: label,
+          htmlFor: props.name,
+          required: props.required,
+          description,
+          className: classNames?.label
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        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
+        },
+        /* @__PURE__ */ React.createElement(
+          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
+            )
+          },
+          /* @__PURE__ */ React.createElement("span", { className: "truncate" }, /* @__PURE__ */ React.createElement(
+            SelectPrimitive.Value,
+            {
+              placeholder: placeholder ?? "Select an option",
+              "aria-label": getLabel()
+            },
+            getLabel()
+          )),
+          /* @__PURE__ */ React.createElement(
+            import_lucide_react9.ChevronDownIcon,
             {
-              text: label,
-              htmlFor: props.name,
-              required: props.required,
-              description,
-              className: classNames?.label
+              className: "transform text-black group-data-[state=open]:rotate-180",
+              size: "16"
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-            SelectPrimitive.Root,
+          )
+        ),
+        /* @__PURE__ */ React.createElement(SelectPrimitive.Portal, { container: containerRef.current }, /* @__PURE__ */ React.createElement(
+          SelectPrimitive.Content,
+          {
+            hideWhenDetached: true,
+            className: cn(
+              "z-10 max-h-[var(--radix-select-content-available-height)] overflow-hidden rounded-md bg-white py-2 shadow-lg",
+              "w-[var(--radix-select-trigger-width)] min-w-[var(--radix-select-trigger-width)]",
+              classNames?.content
+            ),
+            position: "popper",
+            align: dropdownAlign,
+            sideOffset: 4,
+            onPointerDownOutside: toggleOpen,
+            onKeyDown: closeOnEscape
+          },
+          /* @__PURE__ */ React.createElement(SelectPrimitive.Viewport, null, multiselect && !!chipLabels?.length && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+            SelectPrimitive.Group,
             {
-              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"
-                        }
-                      )
-                    ]
-                  }
+              className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
+              "data-testid": "selected-labels"
+            },
+            chipLabels?.map(
+              (chip) => chip && /* @__PURE__ */ React.createElement(Chip_default, { key: chip.title, size: "small", variant: "primary" }, /* @__PURE__ */ React.createElement("span", null, chip.title), /* @__PURE__ */ React.createElement(
+                import_lucide_react9.X,
+                {
+                  size: 18,
+                  "data-testid": `chip-remove-${chip.value}`,
+                  className: "cursor-pointer",
+                  onClick: () => handleChange(chip.value)
+                }
+              ))
+            )
+          ), /* @__PURE__ */ React.createElement(Separator, null)), options?.map(({ id: id2, title, value: value2, description: description2 }) => /* @__PURE__ */ React.createElement(
+            SelectPrimitive.Item,
+            {
+              key: id2,
+              value: value2,
+              className: cn(
+                "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",
+                classNames?.item
+              ),
+              "data-state": selected.includes(value2) ? "checked" : "unchecked",
+              onKeyDown: (e) => setValueOnEnter(e, value2),
+              onClick: () => handleChange(value2)
+            },
+            /* @__PURE__ */ React.createElement(
+              import_lucide_react9.CheckIcon,
+              {
+                className: cn(
+                  "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
+                  classNames?.checkmark
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  SelectPrimitive.Content,
-                  {
-                    hideWhenDetached: true,
-                    className: cn(
-                      "z-10 max-h-[var(--radix-select-content-available-height)] overflow-hidden rounded-md bg-white py-2 shadow-lg",
-                      "w-[var(--radix-select-trigger-width)] min-w-[var(--radix-select-trigger-width)]",
-                      classNames?.content
-                    ),
-                    position: "popper",
-                    align: dropdownAlign,
-                    sideOffset: 4,
-                    onPointerDownOutside: toggleOpen,
-                    onKeyDown: closeOnEscape,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(SelectPrimitive.Viewport, { children: [
-                      multiselect && !!chipLabels?.length && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                        /* @__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, description: description2 }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                        SelectPrimitive.Item,
-                        {
-                          value: value2,
-                          className: cn(
-                            "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",
-                            classNames?.item
-                          ),
-                          "data-state": selected.includes(value2) ? "checked" : "unchecked",
-                          onKeyDown: (e) => setValueOnEnter(e, value2),
-                          onClick: () => handleChange(value2),
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                              import_lucide_react9.CheckIcon,
-                              {
-                                className: cn(
-                                  "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
-                                  classNames?.checkmark
-                                ),
-                                size: 16
-                              }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectPrimitive.ItemText, { children: title }),
-                            description2 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "block text-sm text-grey-70", children: description2 })
-                          ]
-                        },
-                        id2
-                      )),
-                      !!footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Separator, {}),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                          SelectPrimitive.Group,
-                          {
-                            className: "mt-2 flex flex-row flex-wrap gap-1 px-2",
-                            "data-testid": "selected-labels",
-                            children: footer
-                          }
-                        )
-                      ] })
-                    ] })
-                  }
-                ) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ErrorMessage_default, { message: error })
-        ]
-      }
+                size: 16
+              }
+            ),
+            /* @__PURE__ */ React.createElement(SelectPrimitive.ItemText, null, title),
+            description2 && /* @__PURE__ */ React.createElement("span", { className: "block text-sm text-grey-70" }, description2)
+          )), !!footer && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Separator, null), /* @__PURE__ */ React.createElement(
+            SelectPrimitive.Group,
+            {
+              className: "mt-2 flex flex-row flex-wrap gap-1 px-2",
+              "data-testid": "selected-labels"
+            },
+            footer
+          )))
+        ))
+      ),
+      /* @__PURE__ */ React.createElement(ErrorMessage_default, { message: error })
     );
   }
 );
@@ -962,9 +1209,8 @@ 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)(
+var React7 = __toESM(require("react"), 1);
+var AvatarBase = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   AvatarPrimitive.Root,
   {
     ref,
@@ -973,7 +1219,7 @@ var AvatarBase = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 AvatarBase.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   AvatarPrimitive.Image,
   {
     ref,
@@ -983,7 +1229,7 @@ var AvatarImage = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var AvatarFallback = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -997,17 +1243,13 @@ var AvatarFallback = React5.forwardRef(({ className, ...props }, ref) => /* @__P
 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() })
-  ] });
+  const renderAvatar = () => /* @__PURE__ */ React.createElement(AvatarBase, { className: avatarVariants({ size }) }, /* @__PURE__ */ React.createElement(AvatarImage, { src, alt: name }), /* @__PURE__ */ React.createElement(AvatarFallback, null, fallback?.toUpperCase()));
   if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_link.default, { href, ...linkProps, children: renderAvatar() });
+    return /* @__PURE__ */ React.createElement(import_link.default, { href, ...linkProps }, renderAvatar());
   }
   return renderAvatar();
 }
@@ -1026,7 +1268,7 @@ var avatarVariants = (0, import_cva3.cva)("ring ring-white ring-2", {
 
 // src/components/ui/Badge.tsx
 var import_cva4 = require("cva");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var React8 = __toESM(require("react"), 1);
 var badgeVariants = (0, import_cva4.cva)("rounded-full px-2 py-0.5 text-xs font-semibold", {
   variants: {
     variant: {
@@ -1040,31 +1282,42 @@ var badgeVariants = (0, import_cva4.cva)("rounded-full px-2 py-0.5 text-xs font-
   }
 });
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ React8.createElement("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/components/ui/Button.tsx
 var import_react_slot = require("@radix-ui/react-slot");
 var import_cva5 = require("cva");
-var import_react5 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Button = (0, import_react5.forwardRef)(
-  ({ className, variant, size, asChild = false, type = "button", ...props }, ref) => {
+var import_lucide_react10 = require("lucide-react");
+var import_react9 = __toESM(require("react"), 1);
+var Button = (0, import_react9.forwardRef)(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    type = "button",
+    children,
+    isLoading = false,
+    ...props
+  }, ref) => {
     const Component = asChild ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ import_react9.default.createElement(
       Component,
       {
-        className: cn(buttonVariants({ variant, size, className })),
+        className: cn(buttonVariants({ variant, size, className, isLoading, asChild })),
         type,
         ref,
         ...props
-      }
+      },
+      asChild ? children : /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, children, isLoading && /* @__PURE__ */ import_react9.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-white/30 backdrop-blur-[0.5px]" }, /* @__PURE__ */ import_react9.default.createElement(import_lucide_react10.Loader2, { className: "h-5 w-5 animate-spin text-gray-800" })))
     );
   }
 );
 Button.displayName = "Button";
 var buttonVariants = (0, import_cva5.cva)(
   [
+    "relative",
     "flex",
     "items-center",
     "justify-center",
@@ -1074,7 +1327,8 @@ var buttonVariants = (0, import_cva5.cva)(
     "outline-2",
     "outline-offset-2",
     "outline-dashed",
-    "outline-transparent"
+    "outline-transparent",
+    "overflow-hidden"
   ],
   {
     variants: {
@@ -1121,19 +1375,92 @@ var buttonVariants = (0, import_cva5.cva)(
           "focus:text-black",
           "focus:outline-purple-100",
           "active:text-purple-80"
+        ],
+        "outline-primary": [
+          "bg-transparent",
+          "border-2",
+          "border-pickle-100",
+          "text-pickle-100",
+          "hover:bg-pickle-100",
+          "hover:text-black",
+          "active:bg-pickle-80",
+          "active:text-black",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:border-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "outline-secondary": [
+          "bg-transparent",
+          "border-2",
+          "border-green-80",
+          "text-green-80",
+          "hover:bg-green-80",
+          "hover:text-white",
+          "active:bg-green-90",
+          "active:text-white",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40",
+          "disabled:border-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "icon-outline": [
+          "bg-transparent",
+          "text-black",
+          "hover:bg-grey-5",
+          "active:bg-grey-10",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "icon-primary": [
+          "bg-pickle-100",
+          "text-black",
+          "hover:bg-pickle-80",
+          "active:bg-pickle-60",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
+        ],
+        "icon-secondary": [
+          "bg-green-80",
+          "text-white",
+          "hover:bg-green-90",
+          "active:bg-green-100",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
         ]
       },
       size: {
+        "extra-small": ["h-8", "text-xs", "px-3", "py-1"],
         small: ["h-10", "text-sm", "px-4", "py-2"],
         medium: ["h-12", "text-base", "px-6", "py-3"],
         large: ["h-14", "text-lg", "px-8", "py-4"]
+      },
+      isLoading: {
+        true: ["cursor-not-allowed", "pointer-events-none"]
+      },
+      asChild: {
+        true: [],
+        false: ["cursor-pointer", "pointer-events-auto"]
       }
     },
     defaultVariants: {
       variant: "neutral",
-      size: "medium"
+      size: "medium",
+      isLoading: false,
+      asChild: false
     },
     compoundVariants: [
+      {
+        variant: "link",
+        size: "extra-small",
+        class: ["h-3", "text-xs", "p-0"]
+      },
       {
         variant: "link",
         size: "small",
@@ -1148,6 +1475,66 @@ var buttonVariants = (0, import_cva5.cva)(
         variant: "link",
         size: "large",
         class: ["h-6", "text-base", "p-0"]
+      },
+      {
+        variant: "icon-outline",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-outline",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-outline",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-outline",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
+      },
+      {
+        variant: "icon-primary",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-primary",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-primary",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-primary",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
       }
     ]
   }
@@ -1155,16 +1542,15 @@ var buttonVariants = (0, import_cva5.cva)(
 
 // src/components/ui/Combobox.tsx
 var import_cva6 = require("cva");
-var import_lucide_react10 = require("lucide-react");
-var import_react6 = require("react");
+var import_lucide_react11 = require("lucide-react");
+var import_react10 = require("react");
 
 // src/components/primitives/popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var React7 = __toESM(require("react"), 1);
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var React10 = __toESM(require("react"), 1);
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-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)(
+var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React10.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React10.createElement(
   PopoverPrimitive.Content,
   {
     ref,
@@ -1176,12 +1562,11 @@ var PopoverContent = React7.forwardRef(({ className, align = "center", sideOffse
     ),
     ...props
   }
-) }));
+)));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/ui/Combobox.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Combobox = (0, import_react6.forwardRef)((props, ref) => {
+var Combobox = (0, import_react10.forwardRef)((props, ref) => {
   const {
     id,
     name,
@@ -1201,17 +1586,17 @@ var Combobox = (0, import_react6.forwardRef)((props, ref) => {
     onChange: handleChange,
     children: footer
   } = props;
-  const [selected, setSelected] = (0, import_react6.useState)([]);
-  const [open, setOpen] = (0, import_react6.useState)(false);
-  const isUserUpdate = (0, import_react6.useRef)(false);
-  const IconComponent = icon && import_lucide_react10.icons[icon];
+  const [selected, setSelected] = (0, import_react10.useState)([]);
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const isUserUpdate = (0, import_react10.useRef)(false);
+  const IconComponent = icon && import_lucide_react11.icons[icon];
   const hideSearchBox = options?.length <= 5;
   const isDefault = variant === "default";
   const isChip = variant === "chip";
   const isEmpty = selected.length === 0;
   const showChevron = isDefault ? isEmpty : true;
   const close = () => setOpen(false);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!isUserUpdate.current) {
       const valueArray = multiselect ? value ?? [] : value ? [value] : [];
       setSelected(
@@ -1219,7 +1604,7 @@ var Combobox = (0, import_react6.forwardRef)((props, ref) => {
       );
     }
   }, [value, options, multiselect]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (isUserUpdate.current) {
       if (multiselect) {
         handleChange?.(selected.map((o) => o.value));
@@ -1251,111 +1636,91 @@ var Combobox = (0, import_react6.forwardRef)((props, ref) => {
     const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
     return isDefault ? defaultLabel : label;
   };
-  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,
+  return /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col gap-1", className) }, isDefault && /* @__PURE__ */ React.createElement(
+    Label_default,
+    {
+      text: label,
+      htmlFor: name,
+      required,
+      description,
+      className: classNames?.label
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "relative flex" }, /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(
+    PopoverTrigger,
+    {
+      asChild: true,
+      disabled: options.length === 0,
+      "data-testid": `${id ?? name}-combobox-trigger`
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
       {
-        text: label,
-        htmlFor: name,
-        required,
-        description,
-        className: classNames?.label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_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_runtime19.jsxs)(
-              "div",
-              {
-                ref,
-                className: cn(
-                  triggerVariants({ variant, size }),
-                  isDefault && !isEmpty && "pr-10",
-                  classNames?.trigger
-                ),
-                "aria-expanded": open,
-                children: [
-                  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(
-                        "w-full truncate leading-normal",
-                        isDefault && isEmpty && "text-grey-40"
-                      ),
-                      children: handleDisplayValue()
-                    }
-                  ),
-                  showChevron && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                    import_lucide_react10.ChevronDownIcon,
-                    {
-                      className: "shrink-0 transform group-data-[state=open]:rotate-180",
-                      size: "16"
-                    }
-                  )
-                ]
-              }
-            )
-          }
+        ref,
+        className: cn(
+          triggerVariants({ variant, size }),
+          isDefault && !isEmpty && "pr-10",
+          classNames?.trigger
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          PopoverContent,
-          {
-            className: cn(
-              "flex w-full max-w-xs flex-col overflow-hidden p-0",
-              "max-h-[--radix-popover-content-available-height]",
-              classNames?.content
-            ),
-            collisionPadding: 8,
-            sideOffset: 4,
-            align: "start",
-            children: /* @__PURE__ */ (0, import_jsx_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_runtime19.jsx)(
-                      ListItem_default,
-                      {
-                        className: cn(classNames?.items, "truncate py-1"),
-                        isSelected: selected.some((s) => s.value === option.value),
-                        hasCheckbox: multiselect,
-                        ...option
-                      }
-                    )
-                  },
-                  id2
-                )) })
-              ] }),
-              !!footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Separator, {}),
-              footer && footer({ close })
-            ] })
-          }
-        )
-      ] }),
-      isDefault && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "button",
+        "aria-expanded": open
+      },
+      isDefault && IconComponent && /* @__PURE__ */ React.createElement(IconComponent, { className: "h-4 w-4 shrink-0" }),
+      isChip && !isEmpty && /* @__PURE__ */ React.createElement(Badge, { variant: "purple" }, selected.length),
+      /* @__PURE__ */ React.createElement(
+        "span",
         {
-          type: "button",
-          className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
-          onClick: handleClear,
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.CircleX, { className: "h-4 w-4 text-green-100" })
+          className: cn(
+            "w-full truncate leading-normal",
+            isDefault && isEmpty && "text-grey-40"
+          )
+        },
+        handleDisplayValue()
+      ),
+      showChevron && /* @__PURE__ */ React.createElement(
+        import_lucide_react11.ChevronDownIcon,
+        {
+          className: "shrink-0 transform group-data-[state=open]:rotate-180",
+          size: "16"
+        }
+      )
+    )
+  ), /* @__PURE__ */ React.createElement(
+    PopoverContent,
+    {
+      className: cn(
+        "flex w-full max-w-xs flex-col overflow-hidden p-0",
+        "max-h-[--radix-popover-content-available-height]",
+        classNames?.content
+      ),
+      collisionPadding: 8,
+      sideOffset: 4,
+      align: "start"
+    },
+    /* @__PURE__ */ React.createElement(Command, null, !hideSearchBox && /* @__PURE__ */ React.createElement(CommandInput, { placeholder: "Search..." }), /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandEmpty, null, "No results"), /* @__PURE__ */ React.createElement(CommandGroup, null, options.map(({ id: id2, ...option }) => /* @__PURE__ */ React.createElement(
+      CommandItem,
+      {
+        key: id2,
+        value: option.title,
+        onSelect: () => handleSelect(option.value)
+      },
+      /* @__PURE__ */ React.createElement(
+        ListItem_default,
+        {
+          className: cn(classNames?.items, "truncate py-1"),
+          isSelected: selected.some((s) => s.value === option.value),
+          hasCheckbox: multiselect,
+          ...option
         }
       )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ErrorMessage_default, { message: error })
-  ] });
+    )))), !!footer && /* @__PURE__ */ React.createElement(Separator, null), footer && footer({ close }))
+  )), isDefault && !isEmpty && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
+      onClick: handleClear
+    },
+    /* @__PURE__ */ React.createElement(import_lucide_react11.CircleX, { className: "h-4 w-4 text-green-100" })
+  )), /* @__PURE__ */ React.createElement(ErrorMessage_default, { message: error }));
 });
 Combobox.displayName = "Combobox";
 var triggerVariants = (0, import_cva6.cva)(
@@ -1386,62 +1751,50 @@ var triggerVariants = (0, import_cva6.cva)(
 
 // src/components/ui/Switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
-var import_react7 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var Switch = (0, import_react7.forwardRef)(
+var import_react11 = require("react");
+var Switch = (0, import_react11.forwardRef)(
   ({ label, error, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex items-center", props.disabled && "opacity-50"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        SwitchPrimitive.Root,
-        {
-          className: cn(
-            "relative h-[25px] w-[42px] cursor-default rounded-full bg-grey-20 shadow-md outline-none focus:outline-purple-100 data-[state=checked]:bg-green-90",
-            className
-          ),
-          ref,
-          ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SwitchPrimitive.Thumb, { className: "block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" })
-        }
-      ),
-      label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "pl-4 text-sm leading-none text-inherit", htmlFor: props.name, children: [
-        label,
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ErrorMessage_default, { message: error, className: "mt-1" })
-      ] })
-    ] });
+    return /* @__PURE__ */ React.createElement("div", { className: cn("flex items-center", props.disabled && "opacity-50") }, /* @__PURE__ */ React.createElement(
+      SwitchPrimitive.Root,
+      {
+        className: cn(
+          "relative h-[25px] w-[42px] cursor-default rounded-full bg-grey-20 shadow-md outline-none focus:outline-purple-100 data-[state=checked]:bg-green-90",
+          className
+        ),
+        ref,
+        ...props
+      },
+      /* @__PURE__ */ React.createElement(SwitchPrimitive.Thumb, { className: "block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" })
+    ), label && /* @__PURE__ */ React.createElement("label", { className: "pl-4 text-sm leading-none text-inherit", htmlFor: props.name }, label, /* @__PURE__ */ React.createElement(ErrorMessage_default, { message: error, className: "mt-1" })));
   }
 );
 Switch.displayName = "Switch";
 
 // src/components/ui/Radio.tsx
-var import_react9 = require("react");
+var import_react13 = require("react");
 
 // src/components/primitives/radio-group.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
-var import_react8 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var RadioGroup = (0, import_react8.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadioGroupPrimitive.Root, { className, ...props, ref }));
+var import_react12 = require("react");
+var RadioGroup = (0, import_react12.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(RadioGroupPrimitive.Root, { className, ...props, ref }));
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = (0, import_react8.forwardRef)(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "group flex flex-row items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      RadioGroupPrimitive.Item,
-      {
-        ref,
-        className: cn(
-          "peer aspect-square h-4 rounded-full border border-grey-10 shadow outline outline-1 outline-offset-2 outline-transparent focus:outline-none focus:outline-purple-100 focus-visible:ring-1 focus-visible:ring-ring active:border-green-80 disabled:cursor-not-allowed disabled:opacity-50 group-hover:border-grey-20 data-[state=checked]:border-4 data-[disabled]:border-grey-20 data-[state=checked]:border-green-90 data-[disabled]:bg-grey-10 data-[state=checked]:group-hover:border-green-80",
-          className
-        ),
-        ...props
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { htmlFor: props.id, className: "text-sm peer-data-[disabled]:text-grey-40", children })
-  ] });
+var RadioGroupItem = (0, import_react12.forwardRef)(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "group flex flex-row items-center gap-2" }, /* @__PURE__ */ React.createElement(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "peer aspect-square h-4 rounded-full border border-grey-10 shadow outline outline-1 outline-offset-2 outline-transparent focus:outline-none focus:outline-purple-100 focus-visible:ring-1 focus-visible:ring-ring active:border-green-80 disabled:cursor-not-allowed disabled:opacity-50 group-hover:border-grey-20 data-[state=checked]:border-4 data-[disabled]:border-grey-20 data-[state=checked]:border-green-90 data-[disabled]:bg-grey-10 data-[state=checked]:group-hover:border-green-80",
+        className
+      ),
+      ...props
+    }
+  ), /* @__PURE__ */ React.createElement("label", { htmlFor: props.id, className: "text-sm peer-data-[disabled]:text-grey-40" }, children));
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 // src/components/ui/Radio.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Radio = (0, import_react9.forwardRef)(
+var Radio = (0, import_react13.forwardRef)(
   ({
     label,
     error,
@@ -1452,46 +1805,41 @@ var Radio = (0, import_react9.forwardRef)(
     orientation,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("flex flex-col gap-1", classNames?.root), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Label_default, { text: label, description, required: props.required }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        RadioGroup,
+    return /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col gap-1", classNames?.root) }, /* @__PURE__ */ React.createElement(Label_default, { text: label, description, required: props.required }), /* @__PURE__ */ React.createElement(
+      RadioGroup,
+      {
+        ref,
+        className: cn(
+          "flex text-sm",
+          orientation === "vertical" ? "flex-col gap-2" : "flex-row gap-4",
+          classNames?.group
+        ),
+        onValueChange: handleValueChange,
+        ...props
+      },
+      options?.map(({ id, title, value }) => /* @__PURE__ */ React.createElement(
+        RadioGroupItem,
         {
-          ref,
-          className: cn(
-            "flex text-sm",
-            orientation === "vertical" ? "flex-col gap-2" : "flex-row gap-4",
-            classNames?.group
-          ),
-          onValueChange: handleValueChange,
-          ...props,
-          children: options?.map(({ id, title, value }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            RadioGroupItem,
-            {
-              value,
-              id: `radio-group-item-${title}`,
-              className: classNames?.item,
-              children: title
-            },
-            id
-          ))
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ErrorMessage_default, { message: error })
-    ] });
+          key: id,
+          value,
+          id: `radio-group-item-${title}`,
+          className: classNames?.item
+        },
+        title
+      ))
+    ), /* @__PURE__ */ React.createElement(ErrorMessage_default, { message: error }));
   }
 );
 Radio.displayName = "Radio";
 
 // src/components/ui/Counter.tsx
 var import_cva7 = require("cva");
-var import_lucide_react11 = require("lucide-react");
-var import_react10 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Counter = (0, import_react10.forwardRef)(
+var import_lucide_react12 = require("lucide-react");
+var import_react14 = require("react");
+var Counter = (0, import_react14.forwardRef)(
   ({ label, error, min, max, step = 1, description, theme, value, classNames, onChange, ...props }, ref) => {
-    const [count, setCount] = (0, import_react10.useState)(0);
-    (0, import_react10.useEffect)(() => {
+    const [count, setCount] = (0, import_react14.useState)(0);
+    (0, import_react14.useEffect)(() => {
       setCount(value ?? 0);
     }, [value]);
     const handleChange = (e) => {
@@ -1522,56 +1870,50 @@ var Counter = (0, import_react10.forwardRef)(
       onChange?.(newValue);
       setCount(newValue);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    return /* @__PURE__ */ React.createElement(
       "div",
       {
         className: cn("flex w-auto flex-col gap-1", classNames?.root),
-        "data-testid": `counter-wrapper-${props.id}`,
-        children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            Label_default,
-            {
-              text: label,
-              htmlFor: props.name,
-              required: props.required,
-              description,
-              className: classNames?.label
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative flex w-[122px] flex-row items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(import_lucide_react11.Minus, { className: "h-4 w-4 text-green-100" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              "input",
-              {
-                className: cn(counterVariants({ theme }), classNames?.input),
-                ref,
-                value: count,
-                onChange: handleChange,
-                "data-testid": `counter-element-${props.id}`,
-                ...props
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(import_lucide_react11.Plus, { className: "h-4 w-4 text-green-100" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ErrorMessage_default, { message: error })
-        ]
-      }
+        "data-testid": `counter-wrapper-${props.id}`
+      },
+      label && /* @__PURE__ */ React.createElement(
+        Label_default,
+        {
+          text: label,
+          htmlFor: props.name,
+          required: props.required,
+          description,
+          className: classNames?.label
+        }
+      ),
+      /* @__PURE__ */ React.createElement("div", { className: "relative flex w-[122px] flex-row items-center" }, /* @__PURE__ */ React.createElement(
+        "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
+        },
+        /* @__PURE__ */ React.createElement(import_lucide_react12.Minus, { className: "h-4 w-4 text-green-100" })
+      ), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          className: cn(counterVariants({ theme }), classNames?.input),
+          ref,
+          value: count,
+          onChange: handleChange,
+          "data-testid": `counter-element-${props.id}`,
+          ...props
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
+          onClick: increment
+        },
+        /* @__PURE__ */ React.createElement(import_lucide_react12.Plus, { className: "h-4 w-4 text-green-100" })
+      )),
+      /* @__PURE__ */ React.createElement(ErrorMessage_default, { message: error })
     );
   }
 );
@@ -1629,13 +1971,12 @@ var counterVariants = (0, import_cva7.cva)(
 // src/components/ui/Icon.tsx
 var import_react_slot2 = require("@radix-ui/react-slot");
 var import_cva8 = require("cva");
-var import_react11 = require("react");
+var import_react15 = require("react");
 var import_tailwind_merge3 = require("tailwind-merge");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Icon = (0, import_react11.forwardRef)(
+var Icon = (0, import_react15.forwardRef)(
   ({ variant, size, active = false, readonly = false, className, ...props }, ref) => {
     const Component = readonly ? import_react_slot2.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ React.createElement(
       Component,
       {
         className: cn(
@@ -1704,14 +2045,13 @@ var iconVariants = (0, import_cva8.cva)(
 );
 
 // src/components/ui/InputOtp.tsx
-var import_react12 = require("react");
+var import_react16 = 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_runtime25 = require("react/jsx-runtime");
-var InputOTP = React8.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var import_lucide_react13 = require("lucide-react");
+var React11 = __toESM(require("react"), 1);
+var InputOTP = React11.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   import_input_otp.OTPInput,
   {
     ref,
@@ -1724,12 +2064,12 @@ var InputOTP = React8.forwardRef(({ className, containerClassName, ...props }, r
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cn("flex items-center", className), ...props }));
+var InputOTPGroup = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement("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);
+var InputOTPSlot = React11.forwardRef(({ index, error, className, ...props }, ref) => {
+  const inputOTPContext = React11.useContext(import_input_otp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       ref,
@@ -1739,57 +2079,52 @@ var InputOTPSlot = React8.forwardRef(({ index, error, className, ...props }, ref
         error && "border-red-500 dark:border-red-400",
         className
       ),
-      ...props,
-      children: [
-        char,
-        hasFakeCaret && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-4 w-px animate-caret-blink bg-neutral-950 duration-1000 dark:bg-neutral-50" }) })
-      ]
-    }
+      ...props
+    },
+    char,
+    hasFakeCaret && /* @__PURE__ */ React11.createElement("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ React11.createElement("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_runtime25.jsx)("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Dot, {}) }));
+var InputOTPSeparator = React11.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React11.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React11.createElement(import_lucide_react13.Dot, null)));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/ui/InputOtp.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var InputOtp = (0, import_react12.forwardRef)(
+var InputOtp = (0, import_react16.forwardRef)(
   ({ digits, label, description, error, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    return /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "group flex w-full flex-col gap-1",
-        "data-testid": `input-otp-wrapper-${props.id}`,
-        children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            Label_default,
-            {
-              text: label,
-              htmlFor: props.name,
-              required: props.required,
-              description
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "relative flex flex-row items-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            InputOTP,
-            {
-              ref,
-              maxLength: digits,
-              "data-testid": `input-otp-element-${props.id}`,
-              ...props,
-              children: [...Array(digits)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InputOTPGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                InputOTPSlot,
-                {
-                  "data-testid": `input-otp-slot-${index}`,
-                  index,
-                  error: Boolean(error)
-                }
-              ) }, index))
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ErrorMessage_default, { message: error })
-        ]
-      }
+        "data-testid": `input-otp-wrapper-${props.id}`
+      },
+      label && /* @__PURE__ */ React.createElement(
+        Label_default,
+        {
+          text: label,
+          htmlFor: props.name,
+          required: props.required,
+          description
+        }
+      ),
+      /* @__PURE__ */ React.createElement("div", { className: "relative flex flex-row items-center" }, /* @__PURE__ */ React.createElement(
+        InputOTP,
+        {
+          ref,
+          maxLength: digits,
+          "data-testid": `input-otp-element-${props.id}`,
+          ...props
+        },
+        [...Array(digits)].map((_, index) => /* @__PURE__ */ React.createElement(InputOTPGroup, { key: index }, /* @__PURE__ */ React.createElement(
+          InputOTPSlot,
+          {
+            "data-testid": `input-otp-slot-${index}`,
+            index,
+            error: Boolean(error)
+          }
+        )))
+      )),
+      /* @__PURE__ */ React.createElement(ErrorMessage_default, { message: error })
     );
   }
 );
@@ -1797,7 +2132,7 @@ InputOtp.displayName = "Input";
 
 // src/components/ui/LinkButton.tsx
 var import_link2 = __toESM(require("next/link"), 1);
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react17 = __toESM(require("react"), 1);
 var LinkButton = ({
   disabled = false,
   useAnchor = false,
@@ -1806,27 +2141,26 @@ var LinkButton = ({
   ...props
 }) => {
   const Component = useAnchor ? "a" : import_link2.default;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ import_react17.default.createElement(
     Component,
     {
       href,
       className: `inline-flex items-center justify-center gap-2 rounded-full text-sm font-bold leading-tight text-black underline outline-dashed outline-2 outline-offset-2 outline-transparent hover:text-purple-100 focus:text-black focus:outline-purple-100 active:text-purple-80 ${disabled ? "pointer-events-none text-grey-40" : ""} `,
       ...disabled && { "aria-disabled": true, tabIndex: -1 },
-      ...props,
-      children
-    }
+      ...props
+    },
+    children
   );
 };
 
 // src/components/ui/ReadMore.tsx
-var import_react13 = require("react");
+var import_react18 = require("react");
 var import_react_markdown = __toESM(require("react-markdown"), 1);
-var import_jsx_runtime28 = require("react/jsx-runtime");
 function ReadMore({ text, ...props }) {
-  const [isExpanded, setIsExpanded] = (0, import_react13.useState)(false);
-  const [maxWords, setMaxWords] = (0, import_react13.useState)(160);
+  const [isExpanded, setIsExpanded] = (0, import_react18.useState)(false);
+  const [maxWords, setMaxWords] = (0, import_react18.useState)(160);
   const isOverMaxWords = text.split(" ").length > maxWords;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const updateMaxWords = () => {
       const windowWidth = window.innerWidth;
       if (windowWidth <= 768) {
@@ -1848,39 +2182,33 @@ function ReadMore({ text, ...props }) {
   }
   const toggleText = () => setIsExpanded(!isExpanded);
   const snippet = createReadMoreText(text, maxWords, isExpanded);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "data-testid": "read-more-text", className: "prose lg:prose-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_markdown.default, { children: snippet }) }),
-    isOverMaxWords && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      Button,
-      {
-        type: "button",
-        className: "mt-2 flex items-center justify-center",
-        variant: "link",
-        onClick: toggleText,
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "text-sm font-bold underline underline-offset-2", children: [
-          "Read ",
-          isExpanded ? "less" : "more"
-        ] })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { ...props }, /* @__PURE__ */ React.createElement("div", { "data-testid": "read-more-text", className: "prose lg:prose-lg" }, /* @__PURE__ */ React.createElement(import_react_markdown.default, null, snippet)), isOverMaxWords && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "button",
+      className: "mt-2 flex items-center justify-center",
+      variant: "link",
+      onClick: toggleText
+    },
+    /* @__PURE__ */ React.createElement("p", { className: "text-sm font-bold underline underline-offset-2" }, "Read ", isExpanded ? "less" : "more")
+  ));
 }
 
 // src/components/ui/DatePicker.tsx
 var import_cva9 = require("cva");
 var import_date_fns = require("date-fns");
-var import_lucide_react14 = require("lucide-react");
-var import_react14 = require("react");
+var import_lucide_react15 = require("lucide-react");
+var import_react19 = require("react");
 
 // src/components/ui/calendar.tsx
-var import_lucide_react13 = require("lucide-react");
+var import_lucide_react14 = require("lucide-react");
+var React14 = __toESM(require("react"), 1);
 var import_react_day_picker = require("react-day-picker");
 
 // src/components/ui/buttonShadcn.tsx
 var import_react_slot3 = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
-var React9 = __toESM(require("react"), 1);
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var React13 = __toESM(require("react"), 1);
 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",
   {
@@ -1906,18 +2234,17 @@ var buttonVariants2 = (0, import_class_variance_authority.cva)(
     }
   }
 );
-var Button2 = React9.forwardRef(
+var Button2 = React13.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? import_react_slot3.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Comp, { className: cn(buttonVariants2({ variant, size, className })), ref, ...props });
+    return /* @__PURE__ */ React13.createElement(Comp, { className: cn(buttonVariants2({ variant, size, className })), ref, ...props });
   }
 );
 Button2.displayName = "Button";
 
 // src/components/ui/calendar.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
 function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ React14.createElement(
     import_react_day_picker.DayPicker,
     {
       showOutsideDays,
@@ -1957,8 +2284,8 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         ...classNames
       },
       components: {
-        IconLeft: ({ className: className2, ...props2 }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react13.ChevronLeft, { className: cn("h-4 w-4", className2), ...props2 }),
-        IconRight: ({ className: className2, ...props2 }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react13.ChevronRight, { className: cn("h-4 w-4", className2), ...props2 })
+        IconLeft: ({ className: className2, ...props2 }) => /* @__PURE__ */ React14.createElement(import_lucide_react14.ChevronLeft, { className: cn("h-4 w-4", className2), ...props2 }),
+        IconRight: ({ className: className2, ...props2 }) => /* @__PURE__ */ React14.createElement(import_lucide_react14.ChevronRight, { className: cn("h-4 w-4", className2), ...props2 })
       },
       ...props
     }
@@ -1967,11 +2294,10 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
 Calendar.displayName = "Calendar";
 
 // src/components/ui/DatePicker.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var DatePicker = (0, import_react14.forwardRef)(
+var DatePicker = (0, import_react19.forwardRef)(
   ({ label, description, required, classNames, value, onChange, error, id, testId }, ref) => {
-    const [date, setDate] = (0, import_react14.useState)(null);
-    (0, import_react14.useEffect)(() => {
+    const [date, setDate] = (0, import_react19.useState)(null);
+    (0, import_react19.useEffect)(() => {
       setDate(value ?? null);
     }, [value]);
     const handleDateSelect = (dateSelected) => {
@@ -1979,35 +2305,25 @@ var DatePicker = (0, import_react14.forwardRef)(
       onChange?.(dateSelected);
       setDate(dateSelected);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { id, className: cn("flex w-auto flex-col gap-1"), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-        Label_default,
-        {
-          text: label,
-          required,
-          description,
-          className: classNames?.label
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Popover, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverTrigger, { "data-testid": testId, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn(datePickerStyle(), classNames?.input), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react14.Calendar, { size: 16 }),
-          date ? (0, import_date_fns.format)(date, "MM/dd/yyyy") : "Select a date"
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverContent, { ref, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          Calendar,
-          {
-            mode: "single",
-            selected: date || void 0,
-            onSelect: handleDateSelect,
-            captionLayout: "dropdown",
-            showOutsideDays: true,
-            className: classNames?.calendar
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ErrorMessage_default, { message: error })
-    ] });
+    return /* @__PURE__ */ React.createElement("div", { id, className: cn("flex w-auto flex-col gap-1") }, label && /* @__PURE__ */ React.createElement(
+      Label_default,
+      {
+        text: label,
+        required,
+        description,
+        className: classNames?.label
+      }
+    ), /* @__PURE__ */ React.createElement(Popover, null, /* @__PURE__ */ React.createElement(PopoverTrigger, { "data-testid": testId }, /* @__PURE__ */ React.createElement("div", { className: cn(datePickerStyle(), classNames?.input) }, /* @__PURE__ */ React.createElement(import_lucide_react15.Calendar, { size: 16 }), date ? (0, import_date_fns.format)(date, "MM/dd/yyyy") : "Select a date")), /* @__PURE__ */ React.createElement(PopoverContent, { ref }, /* @__PURE__ */ React.createElement(
+      Calendar,
+      {
+        mode: "single",
+        selected: date || void 0,
+        onSelect: handleDateSelect,
+        captionLayout: "dropdown",
+        showOutsideDays: true,
+        className: classNames?.calendar
+      }
+    ))), /* @__PURE__ */ React.createElement(ErrorMessage_default, { message: error }));
   }
 );
 var datePickerStyle = (0, import_cva9.cva)([
@@ -2045,7 +2361,6 @@ var datePickerStyle = (0, import_cva9.cva)([
 // src/components/ui/StepTabs.tsx
 var Tabs = __toESM(require("@radix-ui/react-tabs"), 1);
 var import_cva10 = require("cva");
-var import_jsx_runtime32 = require("react/jsx-runtime");
 var tabParentVariants = (0, import_cva10.cva)("flex flex-col", {
   variants: {
     variant: {
@@ -2096,45 +2411,42 @@ function StepTabs({
   variant,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ React.createElement(
     Tabs.Root,
     {
       value: currentStep,
       onValueChange: setCurrentStep,
       defaultValue: defaultValue ?? "0",
       className: cn(tabParentVariants({ variant }), className),
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Tabs.List, { className: cn(headerVariants({ variant })), children: list.length > 1 && list.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          Tabs.Trigger,
-          {
-            className: cn(singleTabVariants({ variant }), classNameTab),
-            value: index.toString(),
-            children: item
-          },
-          `${item}-${index}`
-        )) }),
-        children && children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          Tabs.Content,
-          {
-            className: cn(
-              "grow rounded-b-md bg-white p-5 outline-none",
-              variant === "minimal" && "border-t"
-            ),
-            value: index.toString(),
-            children: child
-          },
-          index
-        ))
-      ]
-    }
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(Tabs.List, { className: cn(headerVariants({ variant })) }, list.length > 1 && list.map((item, index) => /* @__PURE__ */ React.createElement(
+      Tabs.Trigger,
+      {
+        key: `${item}-${index}`,
+        className: cn(singleTabVariants({ variant }), classNameTab),
+        value: index.toString()
+      },
+      item
+    ))),
+    children && children.map((child, index) => /* @__PURE__ */ React.createElement(
+      Tabs.Content,
+      {
+        key: index,
+        className: cn(
+          "grow rounded-b-md bg-white p-5 outline-none",
+          variant === "minimal" && "border-t"
+        ),
+        value: index.toString()
+      },
+      child
+    ))
   );
 }
 
 // src/components/ui/DismissibleBanner.tsx
-var import_lucide_react15 = require("lucide-react");
-var import_react15 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_lucide_react16 = require("lucide-react");
+var import_react20 = require("react");
 function DismissibleBanner({
   children,
   cookieId,
@@ -2143,8 +2455,8 @@ function DismissibleBanner({
   buttonClassNames
 }) {
   const safeId = encodeURIComponent(cookieId);
-  const [isVisible, setIsVisible] = (0, import_react15.useState)(false);
-  (0, import_react15.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
     const cookies = document.cookie.split(";");
     const isDismissed = cookies.some((cookie) => cookie.trim().startsWith(`${safeId}=true`));
     if (!isDismissed) {
@@ -2156,26 +2468,24 @@ function DismissibleBanner({
     setIsVisible(false);
   };
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ React.createElement(
     "nav",
     {
       className: cn(
         "align-center flex w-full items-center justify-between gap-2 bg-blue-100 px-4 py-3",
         className
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("w-full text-center text-sm text-green-100", textClassNames), children }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "button",
-          {
-            className: cn("text-green-100", buttonClassNames),
-            "aria-label": "Close banner",
-            onClick: handleDismiss,
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.X, { size: 28 })
-          }
-        )
-      ]
-    }
+      )
+    },
+    /* @__PURE__ */ React.createElement("div", { className: cn("w-full text-center text-sm text-green-100", textClassNames) }, children),
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: cn("text-green-100", buttonClassNames),
+        "aria-label": "Close banner",
+        onClick: handleDismiss
+      },
+      /* @__PURE__ */ React.createElement(import_lucide_react16.X, { size: 28 })
+    )
   );
 }
 
@@ -2609,17 +2919,12 @@ function salaryRange(salary, showUnitText = true) {
 }
 
 // src/components/company/CompanyBenefits.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
 function CompanyBenefits({ benefits }) {
   if (!benefits) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-2", "data-testid": "company-benefits", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsx)("ul", { className: "flex flex-col gap-3", children: benefits.map((benefit, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { className: "text-base text-grey-80", children: benefit }, `${benefit}-${i}`)) })
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2", "data-testid": "company-benefits" }, /* @__PURE__ */ React.createElement("h2", { className: "break-word max-w-full text-xl font-bold text-black sm:max-w-2xl md:max-w-lg" }, "Company benefits"), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-3" }, benefits.map((benefit, i) => /* @__PURE__ */ React.createElement("li", { key: `${benefit}-${i}`, className: "text-base text-grey-80" }, benefit))));
 }
 
 // src/components/company/CompanyInformation.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
 function CompanyInformation({
   name,
   how,
@@ -2627,116 +2932,81 @@ function CompanyInformation({
   wow,
   website
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-      "h2",
-      {
-        "data-testid": "company-name",
-        className: "break-word max-w-full text-xl font-bold text-black sm:max-w-2xl md:max-w-lg",
-        children: [
-          "About ",
-          name
-        ]
-      }
-    ),
-    how && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { "data-testid": "company-information", className: "text-base text-grey-80", children: how }),
-    mission && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: "\u{1F680}" }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "text-base text-grey-80", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pr-1 font-bold", children: "Mission" }),
-        mission
-      ] })
-    ] }),
-    wow && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: "\u{1F31F}" }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "text-base text-grey-80", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pr-1 font-bold", children: "Wow Factor" }),
-        wow
-      ] })
-    ] }),
-    website && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      LinkButton,
-      {
-        "data-testid": "company-website-link",
-        href: website,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: "Website"
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React.createElement(
+    "h2",
+    {
+      "data-testid": "company-name",
+      className: "break-word max-w-full text-xl font-bold text-black sm:max-w-2xl md:max-w-lg"
+    },
+    "About ",
+    name
+  ), how && /* @__PURE__ */ React.createElement("p", { "data-testid": "company-information", className: "text-base text-grey-80" }, how), mission && /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement("span", null, "\u{1F680}"), /* @__PURE__ */ React.createElement("p", { className: "text-base text-grey-80" }, /* @__PURE__ */ React.createElement("span", { className: "pr-1 font-bold" }, "Mission"), mission)), wow && /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement("span", null, "\u{1F31F}"), /* @__PURE__ */ React.createElement("p", { className: "text-base text-grey-80" }, /* @__PURE__ */ React.createElement("span", { className: "pr-1 font-bold" }, "Wow Factor"), wow)), website && /* @__PURE__ */ React.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React.createElement(
+    LinkButton,
+    {
+      "data-testid": "company-website-link",
+      href: website,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    },
+    "Website"
+  )));
 }
 
 // src/components/company/CompanyTake.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
 function CompanyTake({ content, avatarSrc }) {
   if (!content) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       "data-testid": "company-take",
-      className: "align-center w-full justify-start rounded-2xl bg-green-90 p-6",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-lg font-bold text-white sm:text-xl", children: "The Real Dill \u2618\uFE0F" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mt-2 flex items-center justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-sm font-normal text-grey-10", children: content }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mt-8 flex w-full items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Avatar, { name: "Jon Lee", src: avatarSrc }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col flex-wrap items-start", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-sm font-bold text-white", children: "Jon Lee, PT, DPT, OCS, FAAOMPT, MBA" }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xs font-normal text-grey-30", children: "Pickle co-founder" })
-          ] })
-        ] })
-      ]
-    }
+      className: "align-center w-full justify-start rounded-2xl bg-green-90 p-6"
+    },
+    /* @__PURE__ */ React.createElement("p", { className: "text-lg font-bold text-white sm:text-xl" }, "The Real Dill \u2618\uFE0F"),
+    /* @__PURE__ */ React.createElement("div", { className: "mt-2 flex items-center justify-start" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm font-normal text-grey-10" }, content)),
+    /* @__PURE__ */ React.createElement("div", { className: "mt-8 flex w-full items-center gap-3" }, /* @__PURE__ */ React.createElement(Avatar, { name: "Jon Lee", src: avatarSrc }), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col flex-wrap items-start" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm font-bold text-white" }, "Jon Lee, PT, DPT, OCS, FAAOMPT, MBA"), /* @__PURE__ */ React.createElement("p", { className: "text-xs font-normal text-grey-30" }, "Pickle co-founder")))
   );
 }
 
 // src/components/jobPost/JobDescription.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
 function JobDescription({ description }) {
   if (!description) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-xl font-bold", children: "Job Description" }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ReadMore, { text: description })
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col gap-2" }, /* @__PURE__ */ React.createElement("h3", { className: "text-xl font-bold" }, "Job Description"), /* @__PURE__ */ React.createElement(ReadMore, { text: description }));
 }
 
 // src/components/jobPost/JobHeader.tsx
-var import_lucide_react18 = require("lucide-react");
+var import_lucide_react19 = require("lucide-react");
 var import_image = __toESM(require("next/image"), 1);
 
 // src/components/buttons/BackButton.tsx
-var import_lucide_react16 = require("lucide-react");
+var import_lucide_react17 = require("lucide-react");
 var import_navigation2 = require("next/navigation");
 
 // src/hooks/useWindowHistory.ts
-var import_react17 = require("react");
+var import_react22 = require("react");
 
 // src/contexts/WindowHistoryProvider.tsx
 var import_navigation = require("next/navigation");
-var import_react16 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var WindowHistoryContext = (0, import_react16.createContext)({});
+var import_react21 = require("react");
+var WindowHistoryContext = (0, import_react21.createContext)({});
 function WindowHistoryProvider({ children }) {
-  const [history, setHistory] = (0, import_react16.useState)([]);
+  const [history, setHistory] = (0, import_react21.useState)([]);
   const searchParams = (0, import_navigation.useSearchParams)();
-  (0, import_react16.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     setHistory(
       (prev) => prev.at(-1) === window.location.href ? prev : [...prev, window.location.href]
     );
   }, [searchParams]);
-  const contextValue = (0, import_react16.useMemo)(() => ({ history }), [history]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(WindowHistoryContext.Provider, { value: contextValue, children });
+  const contextValue = (0, import_react21.useMemo)(() => ({ history }), [history]);
+  return /* @__PURE__ */ React.createElement(WindowHistoryContext.Provider, { value: contextValue }, children);
 }
 
 // src/hooks/useWindowHistory.ts
 function useWindowHistory() {
-  const windowHistoryContext = (0, import_react17.useContext)(WindowHistoryContext);
+  const windowHistoryContext = (0, import_react22.useContext)(WindowHistoryContext);
   return windowHistoryContext;
 }
 
 // src/components/buttons/BackButton.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
 function BackButton({ acceptedRoutes, fallbackHref, className, ...props }) {
   const { history } = useWindowHistory();
   const router = (0, import_navigation2.useRouter)();
@@ -2749,7 +3019,7 @@ function BackButton({ acceptedRoutes, fallbackHref, className, ...props }) {
       router.push(fallbackHref ?? "/");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ React.createElement(
     Icon,
     {
       "aria-label": "back button",
@@ -2757,39 +3027,38 @@ function BackButton({ acceptedRoutes, fallbackHref, className, ...props }) {
       size: "small",
       onClick: goBack,
       className,
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react16.X, {})
-    }
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(import_lucide_react17.X, null)
   );
 }
 
 // src/lib/icons.ts
-var import_lucide_react17 = require("lucide-react");
+var import_lucide_react18 = require("lucide-react");
 var iconMap = {
-  house: import_lucide_react17.Home,
-  layers: import_lucide_react17.Layers,
-  users: import_lucide_react17.Users,
-  settings: import_lucide_react17.Settings,
-  building: import_lucide_react17.Building,
-  bell: import_lucide_react17.Bell,
-  wallet: import_lucide_react17.Wallet,
-  contact: import_lucide_react17.Contact,
-  banknote: import_lucide_react17.Banknote,
-  "message-square-dot": import_lucide_react17.MessageSquareDot,
-  "life-buoy": import_lucide_react17.LifeBuoy,
-  "building-2": import_lucide_react17.Building2,
-  "gallery-vertical-end": import_lucide_react17.GalleryVerticalEnd,
-  "square-kanban": import_lucide_react17.SquareKanban,
-  "briefcase-business": import_lucide_react17.BriefcaseBusiness,
-  "circle-user": import_lucide_react17.CircleUser,
-  "key-round": import_lucide_react17.KeyRound,
-  "clock-2": import_lucide_react17.Clock2,
-  "circle-user-round": import_lucide_react17.CircleUserRound,
-  "map-pin": import_lucide_react17.MapPin
+  house: import_lucide_react18.Home,
+  layers: import_lucide_react18.Layers,
+  users: import_lucide_react18.Users,
+  settings: import_lucide_react18.Settings,
+  building: import_lucide_react18.Building,
+  bell: import_lucide_react18.Bell,
+  wallet: import_lucide_react18.Wallet,
+  contact: import_lucide_react18.Contact,
+  banknote: import_lucide_react18.Banknote,
+  "message-square-dot": import_lucide_react18.MessageSquareDot,
+  "life-buoy": import_lucide_react18.LifeBuoy,
+  "building-2": import_lucide_react18.Building2,
+  "gallery-vertical-end": import_lucide_react18.GalleryVerticalEnd,
+  "square-kanban": import_lucide_react18.SquareKanban,
+  "briefcase-business": import_lucide_react18.BriefcaseBusiness,
+  "circle-user": import_lucide_react18.CircleUser,
+  "key-round": import_lucide_react18.KeyRound,
+  "clock-2": import_lucide_react18.Clock2,
+  "circle-user-round": import_lucide_react18.CircleUserRound,
+  "map-pin": import_lucide_react18.MapPin
 };
 
 // src/components/jobPost/JobHeader.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
 function JobHeader({
   title,
   subtitles,
@@ -2805,130 +3074,111 @@ function JobHeader({
 }) {
   const renderIcon = (icon) => {
     const Icon2 = iconMap[icon];
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon2, { size: 18 });
+    return /* @__PURE__ */ React.createElement(Icon2, { size: 18 });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       "data-testid": "job-header-root",
       className: cn(
         "-mt-8 flex w-full flex-col items-center justify-between gap-6 md:-mt-0",
         !standalone && "rounded-3xl"
+      )
+    },
+    !standalone && /* @__PURE__ */ React.createElement("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" }, /* @__PURE__ */ React.createElement(
+      import_image.default,
+      {
+        className: "h-full w-full rounded-t-3xl object-cover",
+        src: bannerSrc,
+        alt: "job banner",
+        fill: true
+      }
+    ), /* @__PURE__ */ React.createElement(
+      BackButton,
+      {
+        acceptedRoutes: backAcceptedRoutes,
+        fallbackHref: backFallbackHref,
+        className: "absolute right-2 top-2 flex items-center justify-center text-white sm:hidden",
+        "data-testid": "job-header-back-button"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "absolute left-4 top-8 md:left-6 md:top-16 lg:top-24",
+        "data-testid": "job-header-avatar"
+      },
+      /* @__PURE__ */ React.createElement(
+        Avatar,
+        {
+          size: "large",
+          target: "_blank",
+          href: avatarHref,
+          name: avatarName,
+          src: avatarSrc,
+          rel: "noopener noreferrer"
+        }
+      )
+    )),
+    /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col items-start justify-start gap-4 px-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row" }, standalone && /* @__PURE__ */ React.createElement("div", { className: "-mt-4 mr-4 md:mt-0", "data-testid": "job-header-avatar" }, /* @__PURE__ */ React.createElement(
+      Avatar,
+      {
+        size: "large",
+        target: "_blank",
+        href: avatarHref,
+        name: avatarName,
+        src: avatarSrc,
+        rel: "noopener noreferrer"
+      }
+    )), /* @__PURE__ */ React.createElement("div", { className: "prose mt-4 flex w-full items-center text-grey-80 lg:prose-lg" }, subtitles?.map((subtitle, i) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: subtitle,
+        "data-testid": `job-header-subtitle-${i}`,
+        className: "flex items-center"
+      },
+      subtitle,
+      i < subtitles.length - 1 && /* @__PURE__ */ React.createElement(import_lucide_react19.Dot, { className: "mx-1 shrink-0", size: 10 })
+    )))), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-testid": "job-header-content",
+        className: "mt-2 flex w-full flex-row flex-wrap items-center justify-between gap-1"
+      },
+      /* @__PURE__ */ React.createElement(
+        "h2",
+        {
+          "data-testid": "job-header-title",
+          className: "break-word max-w-full text-2xl font-bold text-black sm:max-w-2xl md:max-w-lg"
+        },
+        title
       ),
-      children: [
-        !standalone && /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)(
-            import_image.default,
-            {
-              className: "h-full w-full rounded-t-3xl object-cover",
-              src: bannerSrc,
-              alt: "job banner",
-              fill: true
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            BackButton,
-            {
-              acceptedRoutes: backAcceptedRoutes,
-              fallbackHref: backFallbackHref,
-              className: "absolute right-2 top-2 flex items-center justify-center text-white sm:hidden",
-              "data-testid": "job-header-back-button"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)(
-                Avatar,
-                {
-                  size: "large",
-                  target: "_blank",
-                  href: avatarHref,
-                  name: avatarName,
-                  src: avatarSrc,
-                  rel: "noopener noreferrer"
-                }
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex w-full flex-col items-start justify-start gap-4 px-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col md:flex-row", children: [
-            standalone && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "-mt-4 mr-4 md:mt-0", "data-testid": "job-header-avatar", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              Avatar,
-              {
-                size: "large",
-                target: "_blank",
-                href: avatarHref,
-                name: avatarName,
-                src: avatarSrc,
-                rel: "noopener noreferrer"
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsxs)(
-              "div",
-              {
-                "data-testid": `job-header-subtitle-${i}`,
-                className: "flex items-center",
-                children: [
-                  subtitle,
-                  i < subtitles.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react18.Dot, { className: "mx-1 shrink-0", size: 10 })
-                ]
-              },
-              subtitle
-            )) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)(
-                  "h2",
-                  {
-                    "data-testid": "job-header-title",
-                    className: "break-word max-w-full text-2xl font-bold text-black sm:max-w-2xl md:max-w-lg",
-                    children: title
-                  }
-                ),
-                !!actions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                  "div",
-                  {
-                    className: "flex w-full justify-end gap-2 md:w-auto",
-                    "data-testid": "job-header-actions",
-                    children: actions
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsxs)(
-                Chip_default,
-                {
-                  size: "small",
-                  variant: "neutral",
-                  "aria-label": name,
-                  "data-testid": `job-header-tag-${name}`,
-                  children: [
-                    renderIcon(icon),
-                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: label })
-                  ]
-                },
-                `${name}-${label}`
-              ))
-            }
-          )
-        ] })
-      ]
-    }
+      !!actions && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "flex w-full justify-end gap-2 md:w-auto",
+          "data-testid": "job-header-actions"
+        },
+        actions
+      )
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-testid": "job-header-tags",
+        className: "flex flex-row flex-wrap items-center justify-start gap-2"
+      },
+      tags?.map(({ name, label, icon }) => /* @__PURE__ */ React.createElement(
+        Chip_default,
+        {
+          key: `${name}-${label}`,
+          size: "small",
+          variant: "neutral",
+          "aria-label": name,
+          "data-testid": `job-header-tag-${name}`
+        },
+        renderIcon(icon),
+        /* @__PURE__ */ React.createElement("span", null, label)
+      ))
+    ))
   );
 }
 
@@ -2936,7 +3186,7 @@ function JobHeader({
 var DateFns = __toESM(require("date-fns"), 1);
 
 // src/hooks/useDisplayText.ts
-var import_react18 = require("react");
+var import_react23 = require("react");
 
 // src/lib/mappings.ts
 var employmentTypeDisplayText = {
@@ -3380,9 +3630,9 @@ var DisplayTextService = class {
 
 // src/hooks/useDisplayText.ts
 var useDisplayText = (scope, value) => {
-  const [displayText, setDisplayText] = (0, import_react18.useState)("");
-  const displayService = (0, import_react18.useMemo)(() => new DisplayTextService(), []);
-  (0, import_react18.useEffect)(() => {
+  const [displayText, setDisplayText] = (0, import_react23.useState)("");
+  const displayService = (0, import_react23.useMemo)(() => new DisplayTextService(), []);
+  (0, import_react23.useEffect)(() => {
     if (!displayService || !value) {
       setDisplayText("");
       return;
@@ -3443,7 +3693,6 @@ function getAddressList(jobPost) {
 }
 
 // src/components/jobPost/JobPost.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
 function JobPost({
   job,
   bannerSrc,
@@ -3489,97 +3738,80 @@ function JobPost({
       label
     }))
   ].filter((t) => !!t);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn(
         "flex flex-col gap-10 pb-4",
         !standalone && "border-1 rounded-3xl border-grey-5"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          JobHeader,
-          {
-            title: job.title,
-            bannerSrc,
-            avatarName: job.hiringOrganization?.companyName,
-            avatarSrc: job.hiringOrganization?.logo?.asset?.url,
-            subtitles: [job.hiringOrganization?.companyName ?? "", `Posted ${formattedDate}`],
-            actions,
-            standalone,
-            avatarHref,
-            backFallbackHref: fallbackHref,
-            backAcceptedRoutes,
-            tags
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col gap-8 px-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(JobDescription, { description: job.description }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            CompanyTake,
-            {
-              avatarSrc,
-              content: job.hiringOrganization?.companyNDG?.companyNDGTake
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            CompanyInformation,
-            {
-              name: job.hiringOrganization?.companyName ?? "",
-              how: job.hiringOrganization?.companyPhilosophy?.companyHow,
-              mission: job.hiringOrganization?.companyPhilosophy?.companyMission,
-              wow: job.hiringOrganization?.companyNDG?.companyWow,
-              website: job.hiringOrganization?.companyWebsite
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            CompanyBenefits,
-            {
-              benefits: job.hiringOrganization?.companyCareers?.companyBenefits?.map((b) => b.title).filter((d) => d !== void 0)
-            }
-          )
-        ] })
-      ]
-    }
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      JobHeader,
+      {
+        title: job.title,
+        bannerSrc,
+        avatarName: job.hiringOrganization?.companyName,
+        avatarSrc: job.hiringOrganization?.logo?.asset?.url,
+        subtitles: [job.hiringOrganization?.companyName ?? "", `Posted ${formattedDate}`],
+        actions,
+        standalone,
+        avatarHref,
+        backFallbackHref: fallbackHref,
+        backAcceptedRoutes,
+        tags
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-8 px-6" }, /* @__PURE__ */ React.createElement(JobDescription, { description: job.description }), /* @__PURE__ */ React.createElement(
+      CompanyTake,
+      {
+        avatarSrc,
+        content: job.hiringOrganization?.companyNDG?.companyNDGTake
+      }
+    ), /* @__PURE__ */ React.createElement(
+      CompanyInformation,
+      {
+        name: job.hiringOrganization?.companyName ?? "",
+        how: job.hiringOrganization?.companyPhilosophy?.companyHow,
+        mission: job.hiringOrganization?.companyPhilosophy?.companyMission,
+        wow: job.hiringOrganization?.companyNDG?.companyWow,
+        website: job.hiringOrganization?.companyWebsite
+      }
+    ), /* @__PURE__ */ React.createElement(
+      CompanyBenefits,
+      {
+        benefits: job.hiringOrganization?.companyCareers?.companyBenefits?.map((b) => b.title).filter((d) => d !== void 0)
+      }
+    ))
   );
 }
 
 // src/components/jobCard/JobLocation.tsx
-var import_lucide_react19 = require("lucide-react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_lucide_react20 = require("lucide-react");
 function JobLocation({ jobPost }) {
   const locations = getAddressList(jobPost);
   if (!locations || locations.length === 0) return null;
   const primaryOffice = locations[0];
   const extendedLocations = locations.slice(1).map((address) => address);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", "data-testid": "job-location-element", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react19.MapPin, { size: 16 }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-sm font-thin", children: primaryOffice }),
-    extendedLocations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-        Chip_default,
-        {
-          className: "font-bold",
-          size: "small",
-          variant: "jobLocation",
-          "data-testid": "job-location-tooltip",
-          children: [
-            "+ ",
-            extendedLocations.length,
-            " more"
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-        TooltipContent,
-        {
-          className: "border-1 rounded-md border border-grey-5 bg-white p-2",
-          "data-testid": "job-location-tooltip-content",
-          children: extendedLocations.map((location) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "text-nowrap text-sm", children: location }, location))
-        }
-      )
-    ] }) })
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2", "data-testid": "job-location-element" }, /* @__PURE__ */ React.createElement(import_lucide_react20.MapPin, { size: 16 }), /* @__PURE__ */ React.createElement("span", { className: "text-sm font-thin" }, primaryOffice), extendedLocations.length > 0 && /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, null, /* @__PURE__ */ React.createElement(
+    Chip_default,
+    {
+      className: "font-bold",
+      size: "small",
+      variant: "jobLocation",
+      "data-testid": "job-location-tooltip"
+    },
+    "+ ",
+    extendedLocations.length,
+    " more"
+  )), /* @__PURE__ */ React.createElement(
+    TooltipContent,
+    {
+      className: "border-1 rounded-md border border-grey-5 bg-white p-2",
+      "data-testid": "job-location-tooltip-content"
+    },
+    extendedLocations.map((location) => /* @__PURE__ */ React.createElement("div", { key: location, className: "text-nowrap text-sm" }, location))
+  ))));
 }
 
 // src/types/data/company_service_latest.ts