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

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(index_exports, {
   Checkbox: () => Checkbox_default,
   Chip: () => Chip_default,
   Combobox: () => Combobox,
+  Counter: () => Counter,
   Input: () => Input_default,
   Label: () => Label_default,
   ListItem: () => ListItem_default,
@@ -45,7 +46,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/ui/Select.tsx
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
-var import_lucide_react = require("lucide-react");
+var import_lucide_react2 = require("lucide-react");
 var import_react = require("react");
 
 // src/lib/utils.ts
@@ -63,32 +64,60 @@ function ErrorMessage({ message, className, ...props }) {
 }
 var ErrorMessage_default = ErrorMessage;
 
-// src/components/ui/Label.tsx
+// src/components/primitives/tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var React = __toESM(require("react"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function Label({ text, required, className, ...props }) {
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/components/ui/Label.tsx
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Label({ text, required, description, className, ...props }) {
   if (!text) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("span", { className: "text-red-600", children: "\xA0*" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full flex-row gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "label",
+      {
+        className: cn(
+          "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          className
+        ),
+        ...props,
+        children: [
+          text,
+          required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-red-600", children: "\xA0*" })
+        ]
+      }
+    ),
+    !!description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.InfoIcon, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipContent, { className: "max-w-48", children: description })
+    ] }) })
+  ] });
 }
 var Label_default = Label;
 
 // src/components/ui/Chip.tsx
 var import_cva = require("cva");
 var import_tailwind_merge2 = require("tailwind-merge");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_tailwind_merge2.twMerge)(chipVariants({ variant, size, className })), ...props });
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_tailwind_merge2.twMerge)(chipVariants({ variant, size, className })), ...props });
 var chipVariants = (0, import_cva.cva)(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
   variants: {
     variant: {
@@ -112,9 +141,9 @@ var Chip_default = Chip;
 
 // src/components/primitives/separator.tsx
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
-var React = __toESM(require("react"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Separator = React2.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -131,9 +160,9 @@ var Separator = React.forwardRef(({ className, orientation = "horizontal", decor
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/ui/Select.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Select = (0, import_react.forwardRef)(
-  ({ label, options, placeholder, multiselect, classNames, error, id, ...props }, ref) => {
+  ({ label, options, placeholder, multiselect, description, classNames, error, id, ...props }, ref) => {
     const { value, defaultValue, dir, className, onChange, ...rest } = props;
     const [selected, setSelected] = (0, import_react.useState)([]);
     const [open, setOpen] = (0, import_react.useState)(false);
@@ -163,15 +192,24 @@ var Select = (0, import_react.forwardRef)(
       });
       onChange?.(multiselect ? newSelected : newValue);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
-        className: cn("flex flex-col space-y-1", className),
+        className: cn("flex w-full flex-col gap-1", className),
         ref: containerRef,
         "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label_default, { text: label, className: classNames?.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Label_default,
+            {
+              text: label,
+              htmlFor: props.name,
+              required: props.required,
+              description,
+              className: classNames?.label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             SelectPrimitive.Root,
             {
               open,
@@ -182,16 +220,16 @@ var Select = (0, import_react.forwardRef)(
               dir: dir === "rtl" ? "rtl" : "ltr",
               ...rest,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                   SelectPrimitive.Trigger,
                   {
                     ref,
                     className: cn(
-                      "group flex h-11 min-w-80 flex-row items-center justify-between gap-3 rounded-lg border px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40",
+                      "group flex h-11 w-full flex-row items-center justify-between gap-3 rounded-lg border px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40",
                       classNames?.trigger
                     ),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         SelectPrimitive.Value,
                         {
                           placeholder: placeholder ?? "Select an option",
@@ -199,8 +237,8 @@ var Select = (0, import_react.forwardRef)(
                           children: handleLabels()
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                        import_lucide_react.ChevronDownIcon,
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        import_lucide_react2.ChevronDownIcon,
                         {
                           className: "transform text-black group-data-[state=open]:rotate-180",
                           size: "16"
@@ -209,7 +247,7 @@ var Select = (0, import_react.forwardRef)(
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   SelectPrimitive.Content,
                   {
                     hideWhenDetached: true,
@@ -218,17 +256,17 @@ var Select = (0, import_react.forwardRef)(
                     sideOffset: 4,
                     onPointerDownOutside: toggleOpen,
                     onKeyDown: closeOnEscape,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(SelectPrimitive.Viewport, { children: [
-                      multiselect && !!chipLabels?.length && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(SelectPrimitive.Viewport, { children: [
+                      multiselect && !!chipLabels?.length && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         SelectPrimitive.Group,
                         {
                           className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
                           "data-testid": "selected-labels",
                           children: chipLabels?.map(
-                            (chip) => chip && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Chip_default, { size: "small", variant: "primary", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: chip.title }),
-                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                                import_lucide_react.X,
+                            (chip) => chip && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Chip_default, { size: "small", variant: "primary", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: chip.title }),
+                              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                                import_lucide_react2.X,
                                 {
                                   size: 18,
                                   "data-testid": `chip-remove-${chip.value}`,
@@ -240,8 +278,8 @@ var Select = (0, import_react.forwardRef)(
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Separator, {}),
-                      options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Separator, {}),
+                      options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                         SelectPrimitive.Item,
                         {
                           value: value2,
@@ -250,9 +288,9 @@ var Select = (0, import_react.forwardRef)(
                           onKeyDown: (e) => setValueOnEnter(e, value2),
                           onClick: () => handleChange(value2),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPrimitive.ItemText, { children: title }),
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                              import_lucide_react.CheckIcon,
+                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectPrimitive.ItemText, { children: title }),
+                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                              import_lucide_react2.CheckIcon,
                               {
                                 className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
                                 size: 16
@@ -268,7 +306,7 @@ var Select = (0, import_react.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage_default, { message: error, className: "mt-1" })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorMessage_default, { message: error })
         ]
       }
     );
@@ -279,10 +317,10 @@ var Select_default = Select;
 
 // src/components/ui/Checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
-var import_lucide_react2 = require("lucide-react");
+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_jsx_runtime7 = require("react/jsx-runtime");
+var CheckboxToggle = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -312,9 +350,9 @@ var CheckboxToggle = (0, import_react2.forwardRef)(({ className, ...props }, ref
       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_react2.Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" })
     ] })
   }
 ));
@@ -324,9 +362,9 @@ var Checkbox = (0, import_react2.forwardRef)(
     const { disabled } = props;
     const id = props.id ?? `${props.name ?? props.value?.toString()}-checkbox`;
     const labelClassName = disabled ? "text-grey-40 pointer-events-none" : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("flex space-x-2", classNames?.wrapper), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckboxToggle, { id, disabled, ref, ...props }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: id, className: cn(labelClassName, classNames?.label), children })
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex space-x-2", classNames?.wrapper), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckboxToggle, { id, disabled, ref, ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: id, className: cn(labelClassName, classNames?.label), children })
     ] });
   }
 );
@@ -334,9 +372,9 @@ Checkbox.displayName = "Checkbox";
 var Checkbox_default = Checkbox;
 
 // src/components/ui/ListItem.tsx
-var import_lucide_react3 = require("lucide-react");
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function ListItem({
   icon,
   hasCheckbox,
@@ -348,14 +386,14 @@ function ListItem({
   ...props
 }) {
   const getIconIfValid = (icon2) => {
-    if (icon2 in import_lucide_react4.icons) {
-      const IconComponent = import_lucide_react4.icons[icon2];
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconComponent, { size: 14 });
+    if (icon2 in import_lucide_react5.icons) {
+      const IconComponent = import_lucide_react5.icons[icon2];
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconComponent, { size: 14 });
     }
     return null;
   };
   const optionIcon = icon ? getIconIfValid(icon) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "li",
     {
       className: cn(
@@ -365,14 +403,14 @@ function ListItem({
       ...props,
       "data-state": isSelected ? "checked" : "unchecked",
       children: [
-        optionIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mr-2", children: optionIcon }),
-        hasCheckbox && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Checkbox_default, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-grey-80", children: description })
+        optionIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "mr-2", children: optionIcon }),
+        hasCheckbox && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Checkbox_default, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-grey-80", children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_lucide_react3.CheckIcon,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_lucide_react4.CheckIcon,
           {
             className: "absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",
             size: 16
@@ -386,29 +424,38 @@ var ListItem_default = ListItem;
 
 // src/components/ui/Input.tsx
 var import_cva2 = require("cva");
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 var import_react3 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Input = (0, import_react3.forwardRef)(
-  ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
+  ({ label, error, description, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
     const handleClear = () => {
       onChange?.({ target: { value: "" } });
       onClear?.();
     };
-    const IconComponent = icon && import_lucide_react5.icons[icon];
+    const IconComponent = icon && import_lucide_react6.icons[icon];
     const placeholder = props.placeholder ?? (icon === "Search" ? "Search..." : "");
     const hasIcon = !!icon;
     const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "group flex w-full flex-col", "data-testid": `input-wrapper-${props.id}`, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Label_default, { text: label, htmlFor: props.name, className: cn("body mb-1", classNames?.label) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex flex-row items-center", children: [
-        IconComponent && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Label_default,
+        {
+          text: label,
+          htmlFor: props.name,
+          required: props.required,
+          description,
+          className: classNames?.label
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative flex flex-row items-center", children: [
+        IconComponent && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           IconComponent,
           {
             className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "input",
           {
             className: cn(inputVariants({ theme, hasIcon })),
@@ -420,8 +467,8 @@ var Input = (0, import_react3.forwardRef)(
             ...props
           }
         ),
-        hasIcon && value && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_lucide_react5.X,
+        hasIcon && value && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_lucide_react6.X,
           {
             className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
             onClick: handleClear,
@@ -429,7 +476,7 @@ var Input = (0, import_react3.forwardRef)(
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorMessage_default, { message: error, className: "mt-1" })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorMessage_default, { message: error })
     ] });
   }
 );
@@ -488,11 +535,11 @@ var Input_default = Input;
 var import_react_slot = require("@radix-ui/react-slot");
 var import_cva3 = require("cva");
 var import_react4 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Button = (0, import_react4.forwardRef)(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Component = asChild ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Component,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -595,21 +642,21 @@ var buttonVariants = (0, import_cva3.cva)(
 
 // src/components/ui/Combobox.tsx
 var import_react5 = require("react");
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react9 = require("lucide-react");
 var import_cva5 = require("cva");
 
 // src/components/primitives/command.tsx
 var import_cmdk = require("cmdk");
-var import_lucide_react7 = require("lucide-react");
-var React4 = __toESM(require("react"), 1);
+var import_lucide_react8 = require("lucide-react");
+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 React3 = __toESM(require("react"), 1);
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_lucide_react7 = require("lucide-react");
+var React4 = __toESM(require("react"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var DialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -621,9 +668,9 @@ var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+var DialogContent = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     DialogPrimitive.Content,
     {
       ref,
@@ -634,18 +681,18 @@ var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) =
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(import_lucide_react6.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -653,7 +700,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var DialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   DialogPrimitive.Title,
   {
     ref,
@@ -662,7 +709,7 @@ var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var DialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   DialogPrimitive.Description,
   {
     ref,
@@ -673,8 +720,8 @@ var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/primitives/command.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Command = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   import_cmdk.Command,
   {
     ref,
@@ -686,9 +733,9 @@ var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Command.displayName = import_cmdk.Command.displayName;
-var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var CommandInput = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_cmdk.Command.Input,
     {
       ref,
@@ -701,7 +748,7 @@ var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PUR
   )
 ] }));
 CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var CommandList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   import_cmdk.Command.List,
   {
     ref,
@@ -710,9 +757,9 @@ var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandList.displayName = import_cmdk.Command.List.displayName;
-var CommandEmpty = React4.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+var CommandEmpty = React5.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
-var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var CommandGroup = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   import_cmdk.Command.Group,
   {
     ref,
@@ -724,7 +771,7 @@ var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var CommandSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   import_cmdk.Command.Separator,
   {
     ref,
@@ -733,7 +780,7 @@ var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var CommandItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   import_cmdk.Command.Item,
   {
     ref,
@@ -746,7 +793,7 @@ var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE
 ));
 CommandItem.displayName = import_cmdk.Command.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest text-neutral-500", className),
@@ -757,12 +804,12 @@ var CommandShortcut = ({ className, ...props }) => {
 CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/primitives/popover.tsx
-var React5 = __toESM(require("react"), 1);
+var React6 = __toESM(require("react"), 1);
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   PopoverPrimitive.Content,
   {
     ref,
@@ -779,7 +826,7 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/ui/Badge.tsx
 var import_cva4 = require("cva");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var badgeVariants = (0, import_cva4.cva)("rounded-full px-2 py-0.5 text-xs font-semibold", {
   variants: {
     variant: {
@@ -793,16 +840,20 @@ 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_runtime13.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/components/ui/Combobox.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var Combobox = (0, import_react5.forwardRef)((props, ref) => {
   const {
+    id,
+    name,
     value,
     label,
     options,
+    required,
+    description,
     classNames,
     multiselect,
     placeholder,
@@ -815,7 +866,7 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
   } = props;
   const [selected, setSelected] = (0, import_react5.useState)([]);
   const [open, setOpen] = (0, import_react5.useState)(false);
-  const IconComponent = icon && import_lucide_react8.icons[icon];
+  const IconComponent = icon && import_lucide_react9.icons[icon];
   const hideSearchBox = options?.length <= 5;
   const isDefault = variant === "default";
   const isChip = variant === "chip";
@@ -850,17 +901,26 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
     const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
     return isDefault ? defaultLabel : label;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("flex flex-col gap-2", className), children: [
-    isDefault && label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Label_default, { text: label, className: classNames?.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex flex-col gap-1", className), children: [
+    isDefault && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Label_default,
+      {
+        text: label,
+        htmlFor: name,
+        required,
+        description,
+        className: classNames?.label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           PopoverTrigger,
           {
             asChild: true,
             disabled: options.length === 0,
-            "data-testid": `${props.id ?? props.name}-combobox-trigger`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "data-testid": `${id ?? name}-combobox-trigger`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
               "div",
               {
                 ref,
@@ -871,9 +931,9 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
                 ),
                 "aria-expanded": open,
                 children: [
-                  isDefault && IconComponent && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconComponent, { className: "h-4 w-4 shrink-0" }),
-                  isChip && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Badge, { variant: "purple", children: selected.length }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  isDefault && IconComponent && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconComponent, { className: "h-4 w-4 shrink-0" }),
+                  isChip && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Badge, { variant: "purple", children: selected.length }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "span",
                     {
                       className: cn(
@@ -883,8 +943,8 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
                       children: handleDisplayValue()
                     }
                   ),
-                  showChevron && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                    import_lucide_react8.ChevronDownIcon,
+                  showChevron && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    import_lucide_react9.ChevronDownIcon,
                     {
                       className: "shrink-0 transform group-data-[state=open]:rotate-180",
                       size: "16"
@@ -895,7 +955,7 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           PopoverContent,
           {
             className: cn(
@@ -906,16 +966,16 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
             collisionPadding: 8,
             sideOffset: 4,
             align: "start",
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Command, { children: [
-              !hideSearchBox && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CommandInput, { placeholder: "Search..." }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(CommandList, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CommandEmpty, { children: "No results" }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CommandGroup, { children: options.map(({ id, ...option }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Command, { children: [
+              !hideSearchBox && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CommandInput, { placeholder: "Search..." }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CommandList, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CommandEmpty, { children: "No results" }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   CommandItem,
                   {
                     value: option.title,
                     onSelect: () => handleSelect(option.value),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       ListItem_default,
                       {
                         className: cn(classNames?.items, "truncate py-1"),
@@ -925,22 +985,22 @@ var Combobox = (0, import_react5.forwardRef)((props, ref) => {
                       }
                     )
                   },
-                  id
+                  id2
                 )) })
               ] }),
-              !!footer && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Separator, {}),
+              !!footer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Separator, {}),
               footer && footer({ close })
             ] })
           }
         )
       ] }),
-      isDefault && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      isDefault && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
           className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
           onClick: handleClear,
-          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.CircleX, { className: "h-4 w-4 text-green-100" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react9.CircleX, { className: "h-4 w-4 text-green-100" })
         }
       )
     ] })
@@ -972,6 +1032,149 @@ var triggerVariants = (0, import_cva5.cva)(
     }
   }
 );
+
+// src/components/ui/Counter.tsx
+var import_cva6 = require("cva");
+var import_lucide_react10 = require("lucide-react");
+var import_react6 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Counter = (0, import_react6.forwardRef)(
+  ({ label, error, min, max, step = 1, description, theme, value, classNames, onChange, ...props }, ref) => {
+    const [count, setCount] = (0, import_react6.useState)(0);
+    (0, import_react6.useEffect)(() => {
+      setCount(value ?? 0);
+    }, [value]);
+    const handleChange = (e) => {
+      const newValue = parseInt(e.target.value.replace(/\D/g, ""), 10);
+      if (isNaN(newValue)) return;
+      if (min && newValue < min) {
+        onChange?.(min);
+        setCount(min);
+        return;
+      }
+      if (max && newValue > max) {
+        onChange?.(max);
+        setCount(max);
+        return;
+      }
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    const decrement = () => {
+      const proposedValue = count - step;
+      const newValue = Math.max(min ?? -Infinity, proposedValue);
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    const increment = () => {
+      const proposedValue = count + step;
+      const newValue = Math.min(max ?? Infinity, proposedValue);
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "div",
+      {
+        className: cn("flex w-auto flex-col gap-1", classNames?.root),
+        "data-testid": `counter-wrapper-${props.id}`,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Label_default,
+            {
+              text: label,
+              htmlFor: props.name,
+              required: props.required,
+              description,
+              className: classNames?.label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative flex w-[122px] flex-row items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsx)(import_lucide_react10.Minus, { className: "h-4 w-4 text-green-100" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "input",
+              {
+                className: cn(counterVariants({ theme }), classNames?.input),
+                ref,
+                value: count,
+                onChange: handleChange,
+                "data-testid": `counter-element-${props.id}`,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsx)(import_lucide_react10.Plus, { className: "h-4 w-4 text-green-100" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ErrorMessage_default, { message: error })
+        ]
+      }
+    );
+  }
+);
+Counter.displayName = "Counter";
+var counterVariants = (0, import_cva6.cva)(
+  [
+    "border-input",
+    "placeholder:text-muted-foreground",
+    "focus-visible:ring-ring",
+    "inline-flex",
+    "w-[122px]",
+    "h-11",
+    "items-center",
+    "justify-start",
+    "gap-3",
+    "rounded-lg",
+    "bg-transparent",
+    "px-3",
+    "pt-0.5",
+    "text-sm",
+    "text-center",
+    "shadow-sm",
+    "ring-grey-50",
+    "transition-colors",
+    "focus-visible:outline-none",
+    "focus-visible:ring-1",
+    "disabled:cursor-not-allowed",
+    "disabled:opacity-50",
+    "appearance-none",
+    "[&::-webkit-search-cancel-button]:appearance-none",
+    "[&::-webkit-search-decoration]:appearance-none",
+    "[&::-webkit-search-results-button]:appearance-none",
+    "[&::-webkit-search-results-decoration]:appearance-none",
+    "[&::-ms-clear]:display-none",
+    "[&::-ms-reveal]:display-none"
+  ],
+  {
+    variants: {
+      theme: {
+        light: "text-grey-80 border",
+        dark: "text-white"
+      },
+      hasIcon: {
+        false: "pl-3",
+        true: "pl-8"
+      }
+    },
+    defaultVariants: {
+      theme: "light",
+      hasIcon: false
+    }
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
@@ -979,6 +1182,7 @@ var triggerVariants = (0, import_cva5.cva)(
   Checkbox,
   Chip,
   Combobox,
+  Counter,
   Input,
   Label,
   ListItem,