@next-degree/pickle-shared-js 0.5.31 → 0.6.43

package/dist/app/page.cjs

@@ -1,1607 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/app/page.tsx
-var page_exports = {};
-__export(page_exports, {
-  default: () => page_default
-});
-module.exports = __toCommonJS(page_exports);
-
-// src/components/demos/ComboboxDemo.tsx
-var import_react4 = require("react");
-
-// src/components/ui/Combobox.tsx
-var import_react2 = require("react");
-var import_lucide_react7 = require("lucide-react");
-var import_cva2 = require("cva");
-
-// src/lib/utils.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
-
-// src/components/primitives/command.tsx
-var import_cmdk = require("cmdk");
-var import_lucide_react2 = require("lucide-react");
-var React2 = __toESM(require("react"), 1);
-
-// src/components/primitives/dialog.tsx
-var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
-var import_lucide_react = require("lucide-react");
-var React = __toESM(require("react"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  DialogPrimitive.Overlay,
-  {
-    ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(import_lucide_react.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(
-  "div",
-  {
-    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
-    ...props
-  }
-);
-DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  DialogPrimitive.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  DialogPrimitive.Description,
-  {
-    ref,
-    className: cn("text-sm text-neutral-500 dark:text-neutral-400", className),
-    ...props
-  }
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-// src/components/primitives/command.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Command = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  import_cmdk.Command,
-  {
-    ref,
-    className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950",
-      className
-    ),
-    ...props
-  }
-));
-Command.displayName = import_cmdk.Command.displayName;
-var CommandInput = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.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
-    }
-  )
-] }));
-CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  import_cmdk.Command.List,
-  {
-    ref,
-    className: cn("overflow-y-auto overflow-x-hidden", className),
-    ...props
-  }
-));
-CommandList.displayName = import_cmdk.Command.List.displayName;
-var CommandEmpty = React2.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
-CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
-var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  import_cmdk.Command.Group,
-  {
-    ref,
-    className: cn(
-      "overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500",
-      className
-    ),
-    ...props
-  }
-));
-CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  import_cmdk.Command.Separator,
-  {
-    ref,
-    className: cn("-mx-1 h-px bg-neutral-200", className),
-    ...props
-  }
-));
-CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  import_cmdk.Command.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-pointer select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50",
-      className
-    ),
-    ...props
-  }
-));
-CommandItem.displayName = import_cmdk.Command.Item.displayName;
-var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "span",
-    {
-      className: cn("ml-auto text-xs tracking-widest text-neutral-500", className),
-      ...props
-    }
-  );
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-// src/components/primitives/popover.tsx
-var React3 = __toESM(require("react"), 1);
-var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React3.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 rounded-2xl border bg-white p-4 text-black shadow-md outline-none 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-[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",
-      className
-    ),
-    ...props
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-// src/components/primitives/separator.tsx
-var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
-var React4 = __toESM(require("react"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Separator = React4.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-  SeparatorPrimitive.Root,
-  {
-    ref,
-    decorative,
-    orientation,
-    className: cn(
-      "shrink-0 bg-grey-10",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      className
-    ),
-    ...props
-  }
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-// src/components/ui/ListItem.tsx
-var import_lucide_react4 = 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_react = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var CheckboxToggle = (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-  CheckboxPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "group",
-      "peer",
-      "h-5",
-      "w-5",
-      "shrink-0",
-      "rounded-md",
-      "border",
-      "border-grey-10",
-      "outline",
-      "outline-1",
-      "outline-offset-2",
-      "outline-transparent",
-      "hover:border-grey-20",
-      "focus:outline-purple-100",
-      "active:border-green-80",
-      "disabled:cursor-not-allowed",
-      "disabled:opacity-50",
-      "data-[state=checked]:bg-green-80",
-      "data-[state=indeterminate]:bg-green-80",
-      "data-[state=checked]:text-white",
-      "data-[state=indeterminate]:text-primary-foreground",
-      props.disabled && "data-[state=checked]:text-foreground bg-grey-20 data-[state=checked]:bg-grey-20",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" })
-    ] })
-  }
-));
-CheckboxToggle.displayName = CheckboxPrimitive.Root.displayName;
-var Checkbox = (0, import_react.forwardRef)(
-  ({ classNames, children, ...props }, ref) => {
-    const { disabled } = props;
-    const id = props.id ?? `${props.name ?? props.value?.toString()}-checkbox`;
-    const labelClassName = disabled ? "text-grey-40 pointer-events-none" : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex space-x-2", classNames?.wrapper), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxToggle, { id, disabled, ref, ...props }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: id, className: cn(labelClassName, classNames?.label), children })
-    ] });
-  }
-);
-Checkbox.displayName = "Checkbox";
-var Checkbox_default = Checkbox;
-
-// src/components/ui/ListItem.tsx
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function ListItem({
-  icon,
-  hasCheckbox,
-  isSelected,
-  className,
-  title,
-  value,
-  description,
-  ...props
-}) {
-  const getIconIfValid = (icon2) => {
-    if (icon2 in import_lucide_react5.icons) {
-      const IconComponent = import_lucide_react5.icons[icon2];
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconComponent, { size: 14 });
-    }
-    return null;
-  };
-  const optionIcon = icon ? getIconIfValid(icon) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "li",
-    {
-      className: cn(
-        "group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm",
-        className
-      ),
-      ...props,
-      "data-state": isSelected ? "checked" : "unchecked",
-      children: [
-        optionIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mr-2", children: optionIcon }),
-        hasCheckbox && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Checkbox_default, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-grey-80", children: description })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_lucide_react4.CheckIcon,
-          {
-            className: "absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",
-            size: 16
-          }
-        )
-      ]
-    }
-  );
-}
-var ListItem_default = ListItem;
-
-// src/components/ui/Badge.tsx
-var import_cva = require("cva");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var badgeVariants = (0, import_cva.cva)("rounded-full px-2 py-0.5 text-xs font-semibold", {
-  variants: {
-    variant: {
-      green: "bg-green-90 text-white",
-      pickle: "bg-pickle-100 text-black",
-      purple: "bg-purple-100 text-white"
-    }
-  },
-  defaultVariants: {
-    variant: "green"
-  }
-});
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
-}
-
-// src/components/primitives/tooltip.tsx
-var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var React5 = __toESM(require("react"), 1);
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var TooltipProvider = TooltipPrimitive.Provider;
-var Tooltip = TooltipPrimitive.Root;
-var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.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_react6 = require("lucide-react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function Label({ text, required, description, className, ...props }) {
-  if (!text) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex w-full flex-row gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("span", { className: "text-red-600", children: "\xA0*" })
-        ]
-      }
-    ),
-    !!description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.InfoIcon, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { className: "max-w-48", children: description })
-    ] }) })
-  ] });
-}
-var Label_default = Label;
-
-// src/components/ui/Combobox.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Combobox = (0, import_react2.forwardRef)((props, ref) => {
-  const {
-    id,
-    name,
-    value,
-    label,
-    options,
-    required,
-    description,
-    classNames,
-    multiselect,
-    placeholder,
-    variant = "default",
-    size,
-    icon,
-    className,
-    onChange: handleChange,
-    children: footer
-  } = props;
-  const [selected, setSelected] = (0, import_react2.useState)([]);
-  const [open, setOpen] = (0, import_react2.useState)(false);
-  const IconComponent = icon && import_lucide_react7.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_react2.useEffect)(() => {
-    const valueArray = multiselect ? value ?? [] : value ? [value] : [];
-    setSelected(
-      valueArray.map((v) => options.find((o) => o.value === v)).filter((v) => v !== void 0)
-    );
-  }, [value]);
-  const handleSelect = (value2) => {
-    const option = options.find((o) => o.value === value2);
-    if (!option) return;
-    if (multiselect) {
-      return setSelected((prev) => {
-        const newSelected = prev.some((o) => o.value === value2) ? prev.filter((v) => v !== option) : [...prev, option];
-        handleChange?.(newSelected.map((o) => o.value));
-        return newSelected;
-      });
-    }
-    setSelected([option]);
-    handleChange?.(option.value);
-    close();
-  };
-  const handleClear = () => {
-    setSelected([]);
-    multiselect ? handleChange?.([]) : handleChange?.("");
-  };
-  const handleDisplayValue = () => {
-    const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
-    return isDefault ? defaultLabel : label;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex flex-col gap-1", className), children: [
-    isDefault && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Label_default,
-      {
-        text: label,
-        htmlFor: name,
-        required,
-        description,
-        className: classNames?.label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          PopoverTrigger,
-          {
-            asChild: true,
-            disabled: options.length === 0,
-            "data-testid": `${id ?? name}-combobox-trigger`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-              "div",
-              {
-                ref,
-                className: cn(
-                  triggerVariants({ variant, size }),
-                  isDefault && !isEmpty && "pr-10",
-                  classNames?.trigger
-                ),
-                "aria-expanded": open,
-                children: [
-                  isDefault && IconComponent && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconComponent, { className: "h-4 w-4 shrink-0" }),
-                  isChip && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Badge, { variant: "purple", children: selected.length }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                    "span",
-                    {
-                      className: cn(
-                        "w-full truncate leading-normal",
-                        isDefault && isEmpty && "text-grey-40"
-                      ),
-                      children: handleDisplayValue()
-                    }
-                  ),
-                  showChevron && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                    import_lucide_react7.ChevronDownIcon,
-                    {
-                      className: "shrink-0 transform group-data-[state=open]:rotate-180",
-                      size: "16"
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)(Command, { children: [
-              !hideSearchBox && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CommandInput, { placeholder: "Search..." }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(CommandList, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CommandEmpty, { children: "No results" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  CommandItem,
-                  {
-                    value: option.title,
-                    onSelect: () => handleSelect(option.value),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(Separator, {}),
-              footer && footer({ close })
-            ] })
-          }
-        )
-      ] }),
-      isDefault && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(import_lucide_react7.CircleX, { className: "h-4 w-4 text-green-100" })
-        }
-      )
-    ] })
-  ] });
-});
-Combobox.displayName = "Combobox";
-var triggerVariants = (0, import_cva2.cva)(
-  "group relative cursor-pointer text-green-100 flex flex-row items-center justify-between gap-2 border border-grey-20 focus:outline-green-80 disabled:bg-grey-5",
-  {
-    variants: {
-      variant: {
-        default: ["w-full", "rounded-lg"],
-        chip: [
-          "font-bold",
-          "rounded-3xl",
-          "data-[state=open]:bg-black",
-          "data-[state=open]:text-white"
-        ]
-      },
-      size: {
-        small: ["h-8", "py-1", "px-2", "text-xs"],
-        normal: ["h-9", "py-2", "px-3", "text-sm"],
-        large: ["h-10", "py-3", "px-4", "text-base"]
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "normal"
-    }
-  }
-);
-
-// src/components/ui/Button.tsx
-var import_react_slot = require("@radix-ui/react-slot");
-var import_cva3 = require("cva");
-var import_react3 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Button = (0, import_react3.forwardRef)(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Component = asChild ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      Component,
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var buttonVariants = (0, import_cva3.cva)(
-  [
-    "flex",
-    "items-center",
-    "justify-center",
-    "gap-2",
-    "rounded-full",
-    "font-bold",
-    "outline-2",
-    "outline-offset-2",
-    "outline-dashed",
-    "outline-transparent"
-  ],
-  {
-    variants: {
-      variant: {
-        neutral: [
-          "bg-black",
-          "text-white",
-          "hover:bg-grey-90",
-          "active:bg-grey-80",
-          "focus:outline-purple-100",
-          "disabled:text-grey-40",
-          "disabled:bg-grey-10"
-        ],
-        primary: [
-          "bg-pickle-100",
-          "text-black",
-          "hover:bg-pickle-80",
-          "active:bg-pickle-60",
-          "focus:outline-purple-100",
-          "disabled:text-grey-40",
-          "disabled:bg-grey-10"
-        ],
-        secondary: [
-          "bg-green-80",
-          "text-white",
-          "hover:bg-green-90",
-          "active:bg-green-100",
-          "focus:outline-pickle-100",
-          "disabled:text-grey-40",
-          "disabled:bg-grey-10"
-        ],
-        transparent: [
-          "text-white",
-          "hover:bg-green-80",
-          "active:bg-green-100",
-          "focus:outline-pickle-100",
-          "disabled:text-grey-40"
-        ],
-        link: [
-          "leading-tight",
-          "text-black",
-          "underline",
-          "hover:text-purple-100",
-          "focus:text-black",
-          "focus:outline-purple-100",
-          "active:text-purple-80"
-        ]
-      },
-      size: {
-        small: ["h-10", "text-sm", "px-4", "py-2"],
-        medium: ["h-12", "text-base", "px-6", "py-3"],
-        large: ["h-14", "text-lg", "px-8", "py-4"]
-      }
-    },
-    defaultVariants: {
-      variant: "neutral",
-      size: "medium"
-    },
-    compoundVariants: [
-      {
-        variant: "link",
-        size: "small",
-        class: ["h-3", "text-xs", "p-0"]
-      },
-      {
-        variant: "link",
-        size: "medium",
-        class: ["h-4", "text-sm", "p-0"]
-      },
-      {
-        variant: "link",
-        size: "large",
-        class: ["h-6", "text-base", "p-0"]
-      }
-    ]
-  }
-);
-
-// src/components/demos/ComboboxDemo.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function ComboboxDemo() {
-  const [selectedBands, setSelectedBands] = (0, import_react4.useState)([]);
-  const [selectedFruit, setSelectedFruit] = (0, import_react4.useState)("");
-  const bands = [
-    {
-      title: "Nirvana",
-      value: "Nirvana",
-      description: "Come As You Are",
-      id: "1"
-    },
-    { title: "Pearl Jam", value: "Pearl Jam", description: "Jeremy", id: "2" },
-    {
-      title: "Soundgarden",
-      value: "Soundgarden",
-      description: "Rusty Cage",
-      id: "3"
-    },
-    {
-      title: "Alice in Chains",
-      value: "Alice in Chains",
-      description: "Would?",
-      id: "4"
-    },
-    { title: "Stone Temple Pilots", value: "Stone Temple Pilots", id: "5" },
-    { title: "Hole", value: "Hole", id: "6" },
-    { title: "Mudhoney", value: "Mudhoney", id: "7" },
-    { title: "Screaming Trees", value: "Screaming Trees", id: "8" },
-    { title: "L7", value: "L7", id: "9" },
-    { title: "Sonic Youth", value: "Sonic Youth", id: "10" },
-    {
-      title: "And You Will Know Us by the Trail of Dead",
-      value: "And You Will Know Us by the Trail of Dead",
-      id: "11"
-    }
-  ];
-  const fruits = [
-    { title: "Cherry", value: "Cherry", id: "1", icon: "Cherry" },
-    { title: "Grape", value: "Grape", id: "2", icon: "Grape" }
-  ];
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex max-w-sm flex-col flex-wrap gap-4 p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      Combobox,
-      {
-        required: true,
-        label: "US bands from the 90's",
-        placeholder: "Select a band",
-        icon: "Music",
-        options: bands,
-        id: "bands",
-        multiselect: true,
-        description: "This is a tooltip",
-        onChange: setSelectedBands,
-        value: selectedBands
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      Combobox,
-      {
-        label: "US bands from the 90's",
-        options: bands,
-        variant: "chip",
-        multiselect: true,
-        name: "bands 2",
-        onChange: setSelectedBands,
-        value: selectedBands
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      Combobox,
-      {
-        label: "Fruit label",
-        variant: "chip",
-        options: fruits,
-        value: selectedFruit,
-        onChange: setSelectedFruit,
-        children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-row items-center justify-between bg-white p-2 pl-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { variant: "link", tabIndex: -1, onClick: close, children: "Clear" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { variant: "primary", size: "small", tabIndex: -1, children: "Apply" })
-        ] })
-      }
-    ),
-    selectedBands.map((band) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-green-80", children: band }, band)),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-purple-100", children: selectedFruit })
-  ] });
-}
-var ComboboxDemo_default = ComboboxDemo;
-
-// src/components/ui/Select.tsx
-var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
-var import_lucide_react8 = require("lucide-react");
-var import_react5 = require("react");
-
-// src/components/ui/ErrorMessage.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function ErrorMessage({ message, className, ...props }) {
-  if (!message) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
-}
-var ErrorMessage_default = ErrorMessage;
-
-// src/components/ui/Chip.tsx
-var import_cva4 = require("cva");
-var import_tailwind_merge2 = require("tailwind-merge");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: (0, import_tailwind_merge2.twMerge)(chipVariants({ variant, size, className })), ...props });
-var chipVariants = (0, import_cva4.cva)(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
-  variants: {
-    variant: {
-      neutral: ["text-grey-80", "border-grey-10"],
-      primary: ["text-purple-100", "border-purple-20"],
-      danger: ["text-pumpkin-100", "border-pumpkin-20"],
-      onboarding: ["text-green-100", "bg-green-10", "cursor-pointer"],
-      onboardingSelected: ["text-white", "bg-green-90", "cursor-pointer"]
-    },
-    size: {
-      small: ["text-sm", "leading-5", "px-2", "py-1", "gap-1.5"],
-      medium: ["text-base", "leading-6", "px-3", "py-2", "gap-2"]
-    }
-  },
-  defaultVariants: {
-    variant: "neutral",
-    size: "medium"
-  }
-});
-var Chip_default = Chip;
-
-// src/components/ui/Select.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Select = (0, import_react5.forwardRef)(
-  ({ label, options, placeholder, multiselect, description, classNames, error, id, ...props }, ref) => {
-    const { value, defaultValue, dir, className, onChange, ...rest } = props;
-    const [selected, setSelected] = (0, import_react5.useState)([]);
-    const [open, setOpen] = (0, import_react5.useState)(false);
-    const containerRef = (0, import_react5.useRef)(null);
-    (0, import_react5.useEffect)(() => {
-      if (!value) return setSelected([]);
-      setSelected(Array.isArray(value) ? value : [value]);
-    }, [value]);
-    const toggleOpen = () => setOpen((prev) => !prev);
-    const closeOnEscape = (event) => event.key === "Escape" && setOpen(false);
-    const setValueOnEnter = (event, value2) => event.key === "Enter" && handleChange(value2);
-    const chipLabels = selected?.map((s) => options?.find(({ value: value2 }) => value2 === s)).filter(Boolean);
-    function handleLabels() {
-      if (multiselect) {
-        return selected.map((o) => options?.find((option) => option.value === o)?.title).join(", ");
-      }
-      return options?.find((option) => option.value === selected.join())?.title;
-    }
-    function handleOnOpenChange(isOpen) {
-      if (!multiselect || isOpen) setOpen(isOpen);
-    }
-    function handleChange(newValue) {
-      let newSelected = [];
-      setSelected((prev) => {
-        newSelected = prev.includes(newValue) ? prev.filter((item) => item !== newValue) : [...prev, newValue];
-        return multiselect ? newSelected : [newValue];
-      });
-      onChange?.(multiselect ? newSelected : newValue);
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-      "div",
-      {
-        className: cn("flex w-full flex-col gap-1", className),
-        ref: containerRef,
-        "data-testid": `${(label ?? id)?.toLowerCase()}-select-element`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            Label_default,
-            {
-              text: label,
-              htmlFor: props.name,
-              required: props.required,
-              description,
-              className: classNames?.label
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-            SelectPrimitive.Root,
-            {
-              open,
-              value: selected.join(","),
-              onOpenChange: handleOnOpenChange,
-              onValueChange: multiselect ? void 0 : handleChange,
-              defaultValue: typeof defaultValue === "string" ? defaultValue : void 0,
-              dir: dir === "rtl" ? "rtl" : "ltr",
-              ...rest,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)("span", { className: "truncate", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                        SelectPrimitive.Value,
-                        {
-                          placeholder: placeholder ?? "Select an option",
-                          "aria-label": handleLabels(),
-                          children: handleLabels()
-                        }
-                      ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                        import_lucide_react8.ChevronDownIcon,
-                        {
-                          className: "transform text-black group-data-[state=open]:rotate-180",
-                          size: "16"
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  SelectPrimitive.Content,
-                  {
-                    hideWhenDetached: true,
-                    className: "z-10 max-h-[var(--radix-select-content-available-height)] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md bg-white py-2 shadow-lg",
-                    position: "popper",
-                    sideOffset: 4,
-                    onPointerDownOutside: toggleOpen,
-                    onKeyDown: closeOnEscape,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(SelectPrimitive.Viewport, { children: [
-                      multiselect && !!chipLabels?.length && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)(Chip_default, { size: "small", variant: "primary", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: chip.title }),
-                              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                                import_lucide_react8.X,
-                                {
-                                  size: 18,
-                                  "data-testid": `chip-remove-${chip.value}`,
-                                  className: "cursor-pointer",
-                                  onClick: () => handleChange(chip.value)
-                                }
-                              )
-                            ] }, chip.title)
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Separator, {}),
-                      options?.map(({ id: id2, title, value: value2 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                        SelectPrimitive.Item,
-                        {
-                          value: value2,
-                          className: "group relative cursor-pointer px-4 py-2 text-left text-sm hover:bg-purple-50 focus:bg-purple-50 focus:outline-none data-[state=checked]:bg-purple-50 data-[state=checked]:pr-10 data-[state=checked]:text-purple-100",
-                          "data-state": selected.includes(value2) ? "checked" : "unchecked",
-                          onKeyDown: (e) => setValueOnEnter(e, value2),
-                          onClick: () => handleChange(value2),
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectPrimitive.ItemText, { children: title }),
-                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                              import_lucide_react8.CheckIcon,
-                              {
-                                className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
-                                size: 16
-                              }
-                            )
-                          ]
-                        },
-                        id2
-                      ))
-                    ] })
-                  }
-                ) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ErrorMessage_default, { message: error })
-        ]
-      }
-    );
-  }
-);
-Select.displayName = "Select";
-var Select_default = Select;
-
-// src/components/demos/SelectDemo.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function SelectDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "m-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { children: "Select" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "mt-2 flex max-w-sm flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        Select_default,
-        {
-          required: true,
-          label: "Label - Singleselect",
-          placeholder: "Select an option",
-          options: [
-            { id: "1", value: "1", title: "Option 1" },
-            { id: "2", value: "2", title: "Option 2" },
-            { id: "3", value: "3", title: "Option 3" }
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        Select_default,
-        {
-          multiselect: true,
-          label: "Label - Multiselect",
-          placeholder: "Select an option",
-          description: "This is a tooltip",
-          options: [
-            { id: "1", value: "1", title: "Option 1" },
-            { id: "2", value: "2", title: "Option 2" },
-            { id: "3", value: "3", title: "Option 3" },
-            { id: "4", value: "4", title: "Option 4" },
-            { id: "5", value: "5", title: "Option 5" },
-            { id: "6", value: "6", title: "Option 6" },
-            { id: "7", value: "7", title: "Option 7" },
-            { id: "8", value: "8", title: "Option 8" },
-            { id: "9", value: "9", title: "Option 9" },
-            { id: "10", value: "10", title: "Option 10" }
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        Select_default,
-        {
-          disabled: true,
-          label: "Label - Disabled",
-          placeholder: "Select an option",
-          options: [
-            { id: "1", value: "1", title: "Option 1" },
-            { id: "2", value: "2", title: "Option 2" },
-            { id: "3", value: "3", title: "Option 3" }
-          ]
-        }
-      )
-    ] })
-  ] });
-}
-var SelectDemo_default = SelectDemo;
-
-// src/components/ui/Input.tsx
-var import_cva5 = require("cva");
-var import_lucide_react9 = require("lucide-react");
-var import_react6 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Input = (0, import_react6.forwardRef)(
-  ({ label, error, description, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
-    const handleClear = () => {
-      onChange?.({ target: { value: "" } });
-      onClear?.();
-    };
-    const IconComponent = icon && import_lucide_react9.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_runtime17.jsxs)("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        Label_default,
-        {
-          text: label,
-          htmlFor: props.name,
-          required: props.required,
-          description,
-          className: classNames?.label
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative flex flex-row items-center", children: [
-        IconComponent && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          IconComponent,
-          {
-            className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          "input",
-          {
-            className: cn(inputVariants({ theme, hasIcon })),
-            ref,
-            placeholder,
-            value,
-            onChange,
-            "data-testid": `input-element-${props.id}`,
-            ...props
-          }
-        ),
-        hasIcon && value && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          import_lucide_react9.X,
-          {
-            className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
-            onClick: handleClear,
-            "data-testid": "clear-button"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ErrorMessage_default, { message: error })
-    ] });
-  }
-);
-Input.displayName = "Input";
-var inputVariants = (0, import_cva5.cva)(
-  [
-    "border-input",
-    "placeholder:text-muted-foreground",
-    "focus-visible:ring-ring",
-    "inline-flex",
-    "w-full",
-    "h-11",
-    "items-center",
-    "justify-start",
-    "gap-3",
-    "rounded-lg",
-    "bg-transparent",
-    "px-3",
-    "pt-0.5",
-    "text-sm",
-    "shadow-sm",
-    "ring-grey-50",
-    "transition-colors",
-    "focus-visible:outline-none",
-    "focus-visible:ring-1",
-    "disabled:cursor-not-allowed",
-    "disabled:opacity-50",
-    "appearance-none",
-    "[&::-webkit-search-cancel-button]:appearance-none",
-    "[&::-webkit-search-decoration]:appearance-none",
-    "[&::-webkit-search-results-button]:appearance-none",
-    "[&::-webkit-search-results-decoration]:appearance-none",
-    "[&::-ms-clear]:display-none",
-    "[&::-ms-reveal]:display-none"
-  ],
-  {
-    variants: {
-      theme: {
-        light: "text-grey-80 border",
-        dark: "text-white"
-      },
-      hasIcon: {
-        false: "pl-3",
-        true: "pl-8"
-      }
-    },
-    defaultVariants: {
-      theme: "light",
-      hasIcon: false
-    }
-  }
-);
-var Input_default = Input;
-
-// src/components/demos/InputDemo.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-function InputDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "m-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { children: "Input" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "bg-green-80 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Input_default, { theme: "dark", icon: "Search" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Input_default, { label: "Required input", required: true, description: "This is a tooltip" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Input_default, { icon: "MapPin" }) })
-    ] })
-  ] });
-}
-var InputDemo_default = InputDemo;
-
-// src/components/ui/Counter.tsx
-var import_cva6 = require("cva");
-var import_lucide_react10 = require("lucide-react");
-var import_react7 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Counter = (0, import_react7.forwardRef)(
-  ({ label, error, min, max, step = 1, description, theme, value, classNames, onChange, ...props }, ref) => {
-    const [count, setCount] = (0, import_react7.useState)(0);
-    (0, import_react7.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_runtime19.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_runtime19.jsx)(
-            Label_default,
-            {
-              text: label,
-              htmlFor: props.name,
-              required: props.required,
-              description,
-              className: classNames?.label
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative flex w-[122px] flex-row items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsx)(import_lucide_react10.Minus, { className: "h-4 w-4 text-green-100" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              "input",
-              {
-                className: cn(counterVariants({ theme }), classNames?.input),
-                ref,
-                value: count,
-                onChange: handleChange,
-                "data-testid": `counter-element-${props.id}`,
-                ...props
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              "button",
-              {
-                type: "button",
-                className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
-                onClick: increment,
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react10.Plus, { className: "h-4 w-4 text-green-100" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ErrorMessage_default, { message: error })
-        ]
-      }
-    );
-  }
-);
-Counter.displayName = "Counter";
-var counterVariants = (0, import_cva6.cva)(
-  [
-    "border-input",
-    "placeholder:text-muted-foreground",
-    "focus-visible:ring-ring",
-    "inline-flex",
-    "w-[122px]",
-    "h-11",
-    "items-center",
-    "justify-start",
-    "gap-3",
-    "rounded-lg",
-    "bg-transparent",
-    "px-3",
-    "pt-0.5",
-    "text-sm",
-    "text-center",
-    "shadow-sm",
-    "ring-grey-50",
-    "transition-colors",
-    "focus-visible:outline-none",
-    "focus-visible:ring-1",
-    "disabled:cursor-not-allowed",
-    "disabled:opacity-50",
-    "appearance-none",
-    "[&::-webkit-search-cancel-button]:appearance-none",
-    "[&::-webkit-search-decoration]:appearance-none",
-    "[&::-webkit-search-results-button]:appearance-none",
-    "[&::-webkit-search-results-decoration]:appearance-none",
-    "[&::-ms-clear]:display-none",
-    "[&::-ms-reveal]:display-none"
-  ],
-  {
-    variants: {
-      theme: {
-        light: "text-grey-80 border",
-        dark: "text-white"
-      },
-      hasIcon: {
-        false: "pl-3",
-        true: "pl-8"
-      }
-    },
-    defaultVariants: {
-      theme: "light",
-      hasIcon: false
-    }
-  }
-);
-
-// src/components/demos/CounterDemo.tsx
-var import_react8 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-function CounterDemo() {
-  const [count, setCount] = (0, import_react8.useState)(0);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "m-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { children: "Counter" }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        Counter,
-        {
-          label: "Required Counter",
-          required: true,
-          value: count,
-          onChange: setCount,
-          description: "This is a tooltip"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Counter, { min: 0, max: 10, step: 2 }) })
-    ] })
-  ] });
-}
-var CounterDemo_default = CounterDemo;
-
-// src/lib/google.ts
-var import_google_maps_services_js = require("@googlemaps/google-maps-services-js");
-var client = new import_google_maps_services_js.Client();
-var autocomplete = async (input, key) => {
-  try {
-    const response = await client.placeAutocomplete({
-      params: { input, key, types: import_google_maps_services_js.PlaceAutocompleteType.address }
-    });
-    return response.data.predictions;
-  } catch (error) {
-    console.error(error);
-  }
-};
-var fetchLocation = async (place, key) => {
-  try {
-    if (place.place_id) {
-      const placeDetails = await getPlaceDetails(place.place_id, key);
-      if (placeDetails) return placeDetails;
-    }
-    if (place.address) {
-      const result = await geocode(place.address, key);
-      const firstAddress = result?.[0];
-      return firstAddress;
-    }
-    return void 0;
-  } catch (error) {
-    console.error("Error fetching location:", error);
-  }
-};
-var getPlaceDetails = async (place_id, key) => {
-  try {
-    const response = await client.placeDetails({
-      params: { place_id, key }
-    });
-    return response.data.result;
-  } catch (error) {
-    console.error(error);
-  }
-};
-var geocode = async (address, key) => {
-  try {
-    const response = await client.geocode({
-      params: { address, key }
-    });
-    return response.data.results;
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-// src/components/ui/PlacesQueryInput.tsx
-var import_lucide_react11 = require("lucide-react");
-var import_react9 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-function PlacesQueryInput({
-  apiKey,
-  selected,
-  onSelect,
-  className
-}) {
-  const [predictions, setPredictions] = (0, import_react9.useState)(null);
-  const [input, setInput] = (0, import_react9.useState)(selected?.description ?? "");
-  const [isLoadingPredictions, setIsLoadingPredictions] = (0, import_react9.useState)(false);
-  const [shouldOpenUpward, setShouldOpenUpward] = (0, import_react9.useState)(false);
-  const timeoutRef = (0, import_react9.useRef)(null);
-  const inputRef = (0, import_react9.useRef)(null);
-  const debouncedAutocomplete = (0, import_react9.useCallback)((value) => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(async () => {
-      if (value.length > 2) {
-        setIsLoadingPredictions(true);
-        const fetchedPredictions = await autocomplete(value, apiKey);
-        fetchedPredictions && setIsLoadingPredictions(false);
-        setPredictions(fetchedPredictions ?? []);
-      } else {
-        setPredictions(null);
-      }
-    }, 300);
-  }, []);
-  const handleInputChange = (value) => {
-    setInput(value);
-    debouncedAutocomplete(value);
-  };
-  const handleSelect = (prediction) => {
-    onSelect(prediction);
-    setPredictions(null);
-    setInput(prediction.description);
-  };
-  const handleClear = () => {
-    onSelect();
-    setPredictions(null);
-    setInput("");
-  };
-  const handleBlur = () => setTimeout(() => setPredictions(null), 200);
-  (0, import_react9.useEffect)(() => {
-    const checkDropdownPosition = () => {
-      if (inputRef.current) {
-        const rect = inputRef.current.getBoundingClientRect();
-        const windowHeight = window.innerHeight;
-        setShouldOpenUpward(rect.bottom + 200 > windowHeight);
-      }
-    };
-    checkDropdownPosition();
-    window.addEventListener("resize", checkDropdownPosition);
-    return () => window.removeEventListener("resize", checkDropdownPosition);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("relative w-full", className), ref: inputRef, onBlur: handleBlur, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Command, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        CommandInput,
-        {
-          placeholder: "Type an address to search...",
-          value: input,
-          onValueChange: handleInputChange,
-          className: "truncate pr-8"
-        }
-      ),
-      isLoadingPredictions && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.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_runtime21.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_runtime21.jsx)(import_lucide_react11.CircleX, { className: "h-4 w-4 text-green-100" })
-        }
-      )
-    ] }),
-    predictions && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-      CommandList,
-      {
-        className: cn(
-          "absolute z-50 w-full rounded-md border bg-white shadow-lg",
-          shouldOpenUpward ? "bottom-full" : "top-full"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CommandEmpty, { children: "No results" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CommandGroup, { children: predictions.map((prediction) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            CommandItem,
-            {
-              onSelect: () => handleSelect(prediction),
-              className: "truncate",
-              children: prediction.description
-            },
-            prediction.place_id
-          )) })
-        ]
-      }
-    )
-  ] }) });
-}
-var PlacesQueryInput_default = PlacesQueryInput;
-
-// src/components/demos/PlacesQueryInputDemo.tsx
-var import_react10 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-function PlacesQueryInputDemo() {
-  const [selected, setSelected] = (0, import_react10.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex h-24 flex-col p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      PlacesQueryInput_default,
-      {
-        className: "max-w-96",
-        apiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY ?? "",
-        selected,
-        onSelect: setSelected
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "px-3", children: selected?.description })
-  ] });
-}
-var PlacesQueryInputDemo_default = PlacesQueryInputDemo;
-
-// src/components/ui/MapComponent.tsx
-var import_react_google_maps = require("@vis.gl/react-google-maps");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-function MapComponent({ apiKey, mapId, position, className, zoom = 15 }) {
-  const defaultPosition = { lat: 40.715021, lng: -74.00459 };
-  const defaultZoom = 11;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_google_maps.APIProvider, { apiKey, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("h-screen max-w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_react_google_maps.Map,
-    {
-      zoom: position ? zoom : defaultZoom,
-      center: position || defaultPosition,
-      mapId,
-      keyboardShortcuts: false,
-      disableDefaultUI: true,
-      children: position && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_google_maps.AdvancedMarker, { position, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_google_maps.Pin, { background: "#0B5441", borderColor: "#EBFDF1", glyphColor: "#D4F500" }) })
-    }
-  ) }) });
-}
-var MapComponent_default = MapComponent;
-
-// src/components/demos/MapComponentDemo.tsx
-var import_react11 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var API_KEY = process.env.NEXT_PUBLIC_GOOGLE_API_KEY ?? "";
-var MAP_ID = process.env.NEXT_PUBLIC_GOOGLE_MAP_ID ?? "";
-function MapComponentDemo() {
-  const [position, setPosition] = (0, import_react11.useState)();
-  const place = {
-    place_id: "ChIJaXQRs6lZwokRY6EFpJnhNNE",
-    // Empire State Building Place ID
-    address: "Empire State Building, New York, NY, USA"
-  };
-  (0, import_react11.useEffect)(() => {
-    fetchLocation(place, API_KEY).then((location) => {
-      if (location) {
-        const { lat, lng } = location.geometry?.location ?? {};
-        if (!lat || !lng) return;
-        setPosition({ lat, lng });
-      }
-    });
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    MapComponent_default,
-    {
-      apiKey: API_KEY,
-      mapId: MAP_ID,
-      className: "h-[36rem] w-[36rem] p-4",
-      position
-    }
-  );
-}
-var MapComponentDemo_default = MapComponentDemo;
-
-// src/components/demos/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-function Demos() {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComboboxDemo_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectDemo_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InputDemo_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CounterDemo_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PlacesQueryInputDemo_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MapComponentDemo_default, {})
-  ] });
-}
-var demos_default = Demos;
-
-// src/app/page.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-async function Page() {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(demos_default, {});
-}
-var page_default = Page;
-//# sourceMappingURL=page.cjs.map