@next-degree/pickle-shared-js 0.13.4 → 0.13.5

package/dist/chunk-BLMWXMW4.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/company/CompanyBenefits.tsx
+function CompanyBenefits({ benefits }) {
+  if (!benefits) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-testid": "company-benefits", children: [
+    /* @__PURE__ */ jsx("h2", { className: "break-word max-w-full text-xl font-bold text-black sm:max-w-2xl md:max-w-lg", children: "Company benefits" }),
+    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: benefits.map((benefit, i) => /* @__PURE__ */ jsx("li", { className: "text-base text-grey-80", children: benefit }, `${benefit}-${i}`)) })
+  ] });
+}
+
+export { CompanyBenefits };
+//# sourceMappingURL=chunk-BLMWXMW4.js.map
+//# sourceMappingURL=chunk-BLMWXMW4.js.map

package/dist/chunk-BLMWXMW4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/company/CompanyBenefits.tsx"],"names":[],"mappings":";;;AAIO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAA4C,EAAA;AAC5E,EAAI,IAAA,CAAC,UAAiB,OAAA,IAAA;AAEtB,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,qBAAA,EAAsB,eAAY,kBAC/C,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,IAAA,EAAA,EAAG,SAAU,EAAA,6EAAA,EAA8E,QAE5F,EAAA,kBAAA,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,QAAG,SAAU,EAAA,qBAAA,EACX,mBAAS,GAAI,CAAA,CAAC,SAAS,CACtB,qBAAA,GAAA,CAAC,QAA2B,SAAU,EAAA,wBAAA,EACnC,qBADM,CAAG,EAAA,OAAO,IAAI,CAAC,CAAA,CAExB,CACD,CACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ","file":"chunk-BLMWXMW4.js","sourcesContent":["export type CompanyBenefitsProps = {\n  benefits?: string[]\n}\n\nexport function CompanyBenefits({ benefits }: Readonly<CompanyBenefitsProps>) {\n  if (!benefits) return null\n\n  return (\n    <div className=\"flex flex-col gap-2\" data-testid=\"company-benefits\">\n      <h2 className=\"break-word max-w-full text-xl font-bold text-black sm:max-w-2xl md:max-w-lg\">\n        Company benefits\n      </h2>\n      <ul className=\"flex flex-col gap-3\">\n        {benefits.map((benefit, i) => (\n          <li key={`${benefit}-${i}`} className=\"text-base text-grey-80\">\n            {benefit}\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n"]}

package/dist/{chunk-USQZOJUG.cjs → chunk-C3DCFPJC.cjs}

@@ -1,10 +1,11 @@
 'use strict';
 
-var chunkWSDKENUA_cjs = require('./chunk-WSDKENUA.cjs');
+var chunkP6ZEOB4L_cjs = require('./chunk-P6ZEOB4L.cjs');
 var chunkMGWZXPMF_cjs = require('./chunk-MGWZXPMF.cjs');
 var cmdk = require('cmdk');
 var lucideReact = require('lucide-react');
 var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -26,7 +27,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var Command = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement(
+var Command = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command,
   {
     ref,
@@ -39,21 +40,24 @@ var Command = React__namespace.forwardRef(({ className, ...props }, ref) => /* @
 ));
 Command.displayName = cmdk.Command.displayName;
 var CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ React__namespace.createElement(chunkWSDKENUA_cjs.Dialog, { ...props }, /* @__PURE__ */ React__namespace.createElement(chunkWSDKENUA_cjs.DialogContent, { className: "overflow-hidden p-0 shadow-lg" }, /* @__PURE__ */ React__namespace.createElement(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5" }, children)));
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkP6ZEOB4L_cjs.Dialog, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(chunkP6ZEOB4L_cjs.DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
 };
-var CommandInput = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "" }, /* @__PURE__ */ React__namespace.createElement(lucideReact.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ React__namespace.createElement(
-  cmdk.Command.Input,
-  {
-    ref,
-    className: chunkMGWZXPMF_cjs.cn(
-      "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50",
-      className
-    ),
-    ...props
-  }
-)));
+var CommandInput = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Input,
+    {
+      ref,
+      className: chunkMGWZXPMF_cjs.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 = cmdk.Command.Input.displayName;
-var CommandList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement(
+var CommandList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.List,
   {
     ref,
@@ -62,9 +66,9 @@ var CommandList = React__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 CommandList.displayName = cmdk.Command.List.displayName;
-var CommandEmpty = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ React__namespace.createElement(cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+var CommandEmpty = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = cmdk.Command.Empty.displayName;
-var CommandGroup = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement(
+var CommandGroup = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.Group,
   {
     ref,
@@ -76,7 +80,7 @@ var CommandGroup = React__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 CommandGroup.displayName = cmdk.Command.Group.displayName;
-var CommandSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement(
+var CommandSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.Separator,
   {
     ref,
@@ -85,7 +89,7 @@ var CommandSeparator = React__namespace.forwardRef(({ className, ...props }, ref
   }
 ));
 CommandSeparator.displayName = cmdk.Command.Separator.displayName;
-var CommandItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement(
+var CommandItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.Item,
   {
     ref,
@@ -98,7 +102,7 @@ var CommandItem = React__namespace.forwardRef(({ className, ...props }, ref) =>
 ));
 CommandItem.displayName = cmdk.Command.Item.displayName;
 var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
       className: chunkMGWZXPMF_cjs.cn("ml-auto text-xs tracking-widest text-neutral-500", className),
@@ -117,5 +121,5 @@ exports.CommandItem = CommandItem;
 exports.CommandList = CommandList;
 exports.CommandSeparator = CommandSeparator;
 exports.CommandShortcut = CommandShortcut;
-//# sourceMappingURL=chunk-USQZOJUG.cjs.map
-//# sourceMappingURL=chunk-USQZOJUG.cjs.map
+//# sourceMappingURL=chunk-C3DCFPJC.cjs.map
+//# sourceMappingURL=chunk-C3DCFPJC.cjs.map

package/dist/chunk-C3DCFPJC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/command.tsx"],"names":["React","jsx","CommandPrimitive","cn","Dialog","DialogContent","jsxs","Search"],"mappings":"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","file":"chunk-C3DCFPJC.cjs","sourcesContent":["'use client'\n\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '@/components/primitives/dialog'\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950',\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ntype CommandDialogProps = DialogProps\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"m-1 flex items-center rounded-xl border px-3\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        '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',\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      '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',\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-1 h-px bg-neutral-200', className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"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\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn('ml-auto text-xs tracking-widest text-neutral-500', className)}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n}\n"]}

package/dist/{chunk-4GDAUTH4.cjs → chunk-C63PYADW.cjs}

@@ -3,6 +3,7 @@
 var chunkMGWZXPMF_cjs = require('./chunk-MGWZXPMF.cjs');
 var Tabs = require('@radix-ui/react-tabs');
 var cva = require('cva');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -74,39 +75,41 @@ function StepTabs({
   variant,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Tabs__namespace.Root,
     {
       value: currentStep,
       onValueChange: setCurrentStep,
       defaultValue: defaultValue ?? "0",
       className: chunkMGWZXPMF_cjs.cn(tabParentVariants({ variant }), className),
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(Tabs__namespace.List, { className: chunkMGWZXPMF_cjs.cn(headerVariants({ variant })) }, list.length > 1 && list.map((item, index) => /* @__PURE__ */ React.createElement(
-      Tabs__namespace.Trigger,
-      {
-        key: `${item}-${index}`,
-        className: chunkMGWZXPMF_cjs.cn(singleTabVariants({ variant }), classNameTab),
-        value: index.toString()
-      },
-      item
-    ))),
-    children && children.map((child, index) => /* @__PURE__ */ React.createElement(
-      Tabs__namespace.Content,
-      {
-        key: index,
-        className: chunkMGWZXPMF_cjs.cn(
-          "grow rounded-b-md bg-white p-5 outline-none",
-          variant === "minimal" && "border-t"
-        ),
-        value: index.toString()
-      },
-      child
-    ))
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tabs__namespace.List, { className: chunkMGWZXPMF_cjs.cn(headerVariants({ variant })), children: list.length > 1 && list.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          Tabs__namespace.Trigger,
+          {
+            className: chunkMGWZXPMF_cjs.cn(singleTabVariants({ variant }), classNameTab),
+            value: index.toString(),
+            children: item
+          },
+          `${item}-${index}`
+        )) }),
+        children && children.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          Tabs__namespace.Content,
+          {
+            className: chunkMGWZXPMF_cjs.cn(
+              "grow rounded-b-md bg-white p-5 outline-none",
+              variant === "minimal" && "border-t"
+            ),
+            value: index.toString(),
+            children: child
+          },
+          index
+        ))
+      ]
+    }
   );
 }
 
 exports.StepTabs = StepTabs;
-//# sourceMappingURL=chunk-4GDAUTH4.cjs.map
-//# sourceMappingURL=chunk-4GDAUTH4.cjs.map
+//# sourceMappingURL=chunk-C63PYADW.cjs.map
+//# sourceMappingURL=chunk-C63PYADW.cjs.map

package/dist/chunk-C63PYADW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/StepTabs.tsx"],"names":["cva","jsxs","Tabs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAM,iBAAA,GAAoBA,QAAI,eAAiB,EAAA;AAAA,EAC7C,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,OAAS,EAAA,6BAAA;AAAA,MACT,OAAS,EAAA,EAAA;AAAA,MACT,OAAS,EAAA;AAAA;AACX,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA;AAAA;AAEb,CAAC,CAAA;AAED,IAAM,cAAA,GAAiBA,QAAI,uCAAyC,EAAA;AAAA,EAClE,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,OAAS,EAAA,EAAA;AAAA,MACT,OAAS,EAAA,EAAA;AAAA,MACT,OAAS,EAAA;AAAA;AACX,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA;AAAA;AAEb,CAAC,CAAA;AAED,IAAM,iBAAoB,GAAAA,OAAA;AAAA,EACxB,+IAAA;AAAA,EACA;AAAA,IACE,QAAU,EAAA;AAAA,MACR,OAAS,EAAA;AAAA,QACP,OACE,EAAA,oTAAA;AAAA,QACF,OACE,EAAA,sNAAA;AAAA,QACF,OACE,EAAA;AAAA;AACJ,KACF;AAAA,IACA,eAAiB,EAAA;AAAA,MACf,OAAS,EAAA;AAAA;AACX;AAEJ,CAAA;AAYO,SAAS,QAAS,CAAA;AAAA,EACvB,IAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAkB,EAAA;AAChB,EACE,uBAAAC,eAAA;AAAA,IAAMC,eAAA,CAAA,IAAA;AAAA,IAAL;AAAA,MACC,KAAO,EAAA,WAAA;AAAA,MACP,aAAe,EAAA,cAAA;AAAA,MACf,cAAc,YAAgB,IAAA,GAAA;AAAA,MAC9B,WAAWC,oBAAG,CAAA,iBAAA,CAAkB,EAAE,OAAQ,EAAC,GAAG,SAAS,CAAA;AAAA,MACtD,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAMF,sBAAL,EAAU,SAAA,EAAWC,oBAAG,CAAA,cAAA,CAAe,EAAE,OAAQ,EAAC,CAAC,CAAA,EACjD,eAAK,MAAS,GAAA,CAAA,IACb,KAAK,GAAI,CAAA,CAAC,MAAM,KACd,qBAAAC,cAAA;AAAA,UAAMF,eAAA,CAAA,OAAA;AAAA,UAAL;AAAA,YAEC,WAAWC,oBAAG,CAAA,iBAAA,CAAkB,EAAE,OAAQ,EAAC,GAAG,YAAY,CAAA;AAAA,YAC1D,KAAA,EAAO,MAAM,QAAS,EAAA;AAAA,YAErB,QAAA,EAAA;AAAA,WAAA;AAAA,UAJI,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,SAMxB,CACL,EAAA,CAAA;AAAA,QAEC,QACC,IAAA,QAAA,CAAS,GAAI,CAAA,CAAC,OAAO,KACnB,qBAAAC,cAAA;AAAA,UAAMF,eAAA,CAAA,OAAA;AAAA,UAAL;AAAA,YAEC,SAAW,EAAAC,oBAAA;AAAA,cACT,6CAAA;AAAA,cACA,YAAY,SAAa,IAAA;AAAA,aAC3B;AAAA,YACA,KAAA,EAAO,MAAM,QAAS,EAAA;AAAA,YAErB,QAAA,EAAA;AAAA,WAAA;AAAA,UAPI;AAAA,SASR;AAAA;AAAA;AAAA,GACL;AAEJ","file":"chunk-C63PYADW.cjs","sourcesContent":["'use client'\n\nimport * as Tabs from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'cva'\nimport { type ReactNode } from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst tabParentVariants = cva('flex flex-col', {\n  variants: {\n    variant: {\n      primary: 'rounded-lg border shadow-sm',\n      neutral: '',\n      minimal: 'relative overflow-x-auto',\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n  },\n})\n\nconst headerVariants = cva('flex shrink-0 border-b border-grey-20', {\n  variants: {\n    variant: {\n      primary: '',\n      neutral: '',\n      minimal: 'w-fit relative border-none',\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n  },\n})\n\nconst singleTabVariants = cva(\n  'flex h-[45px] flex-1 cursor-pointer select-none items-center justify-center bg-white px-5 text-[15px] leading-none text-gray-800 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'first:rounded-tl-md last:rounded-tr-md hover:text-purple-100 data-[state=active]:text-purple-100 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black',\n        neutral:\n          'first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative',\n        minimal:\n          'whitespace-nowrap flex-none first:rounded-tl-md last:rounded-tr-md hover:text-black data-[state=active]:font-bold data-[state=active]:text-black data-[state=active]:shadow-[inset_0_-2px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n    },\n  }\n)\n\ntype StepTabsProps = Tabs.TabsProps &\n  VariantProps<typeof tabParentVariants> &\n  VariantProps<typeof singleTabVariants> & {\n    list: string[]\n    currentStep?: string\n    setCurrentStep?: (step: string) => void\n    children?: ReactNode[]\n    classNameTab?: string\n  }\n\nexport function StepTabs({\n  list,\n  currentStep,\n  setCurrentStep,\n  children,\n  className,\n  classNameTab,\n  defaultValue,\n  variant,\n  ...props\n}: StepTabsProps) {\n  return (\n    <Tabs.Root\n      value={currentStep}\n      onValueChange={setCurrentStep}\n      defaultValue={defaultValue ?? '0'}\n      className={cn(tabParentVariants({ variant }), className)}\n      {...props}\n    >\n      <Tabs.List className={cn(headerVariants({ variant }))}>\n        {list.length > 1 &&\n          list.map((item, index) => (\n            <Tabs.Trigger\n              key={`${item}-${index}`}\n              className={cn(singleTabVariants({ variant }), classNameTab)}\n              value={index.toString()}\n            >\n              {item}\n            </Tabs.Trigger>\n          ))}\n      </Tabs.List>\n\n      {children &&\n        children.map((child, index) => (\n          <Tabs.Content\n            key={index}\n            className={cn(\n              'grow rounded-b-md bg-white p-5 outline-none',\n              variant === 'minimal' && 'border-t'\n            )}\n            value={index.toString()}\n          >\n            {child}\n          </Tabs.Content>\n        ))}\n    </Tabs.Root>\n  )\n}\n"]}

package/dist/chunk-CAGLLWPR.js

@@ -0,0 +1,33 @@
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-53OQ6M2O.js';
+import { cn } from './chunk-2FGZQI42.js';
+import { InfoIcon } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Label({ text, required, description, className, ...props }) {
+  if (!text) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row gap-1", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          className
+        ),
+        ...props,
+        children: [
+          text,
+          required && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: "\xA0*" })
+        ]
+      }
+    ),
+    !!description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-48", children: description })
+    ] }) })
+  ] });
+}
+var Label_default = Label;
+
+export { Label_default };
+//# sourceMappingURL=chunk-CAGLLWPR.js.map
+//# sourceMappingURL=chunk-CAGLLWPR.js.map

package/dist/chunk-CAGLLWPR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/Label.tsx"],"names":[],"mappings":";;;;;AAiBA,SAAS,KAAA,CAAM,EAAE,IAAM,EAAA,QAAA,EAAU,aAAa,SAAW,EAAA,GAAG,OAA0B,EAAA;AACpF,EAAI,IAAA,CAAC,MAAa,OAAA,IAAA;AAElB,EACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,4BACb,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,EAAA;AAAA,UACT,gFAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,IAAA;AAAA,UACA,QAAY,oBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,gBAAe,QAAO,EAAA,OAAA,EAAA;AAAA;AAAA;AAAA,KACrD;AAAA,IAEC,CAAC,CAAC,WAAA,oBACA,GAAA,CAAA,eAAA,EAAA,EACC,+BAAC,OACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAe,OAAO,EAAA,IAAA,EACrB,8BAAC,QAAS,EAAA,EAAA,SAAA,EAAU,WAAU,CAChC,EAAA,CAAA;AAAA,sBACC,GAAA,CAAA,cAAA,EAAA,EAAe,SAAU,EAAA,UAAA,EAAY,QAAY,EAAA,WAAA,EAAA;AAAA,KAAA,EACpD,CACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;AAEA,IAAO,aAAQ,GAAA","file":"chunk-CAGLLWPR.js","sourcesContent":["import { InfoIcon } from 'lucide-react'\nimport { type ComponentPropsWithoutRef } from 'react'\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/primitives/tooltip'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n  text?: string\n  required?: boolean\n  description?: string\n}\n\nfunction Label({ text, required, description, className, ...props }: Readonly<Props>) {\n  if (!text) return null\n\n  return (\n    <div className=\"flex w-full flex-row gap-1\">\n      <label\n        className={cn(\n          'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n          className\n        )}\n        {...props}\n      >\n        {text}\n        {required && <span className=\"text-red-600\">&nbsp;*</span>}\n      </label>\n\n      {!!description && (\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <InfoIcon className=\"h-4 w-4\" />\n            </TooltipTrigger>\n            <TooltipContent className=\"max-w-48\">{description}</TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      )}\n    </div>\n  )\n}\n\nexport default Label\n"]}

package/dist/{chunk-K76RPF2X.js → chunk-CPZFINPG.js}

@@ -1,4 +1,4 @@
-import { DisplayTextService } from './chunk-4E3ANVRR.js';
+import { DisplayTextService } from './chunk-OZJZVEF2.js';
 import { DisplayTextValueNotFoundError } from './chunk-YB2USB4M.js';
 import { useState, useMemo, useEffect } from 'react';
 
@@ -33,5 +33,5 @@ var useDisplayText = (scope, value) => {
 };
 
 export { useDisplayText };
-//# sourceMappingURL=chunk-K76RPF2X.js.map
-//# sourceMappingURL=chunk-K76RPF2X.js.map
+//# sourceMappingURL=chunk-CPZFINPG.js.map
+//# sourceMappingURL=chunk-CPZFINPG.js.map

package/dist/{chunk-K76RPF2X.js.map → chunk-CPZFINPG.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useDisplayText.ts"],"names":[],"mappings":";;;;AAKa,IAAA,cAAA,GAAiB,CAC5B,KAAA,EACA,KACG,KAAA;AACH,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,EAAE,CAAA;AACjD,EAAA,MAAM,iBAAiB,OAAQ,CAAA,MAAM,IAAI,kBAAmB,EAAA,EAAG,EAAE,CAAA;AAEjE,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,cAAkB,IAAA,CAAC,KAAO,EAAA;AAC7B,MAAA,cAAA,CAAe,EAAE,CAAA;AACjB,MAAA;AAAA;AAEF,IAAA,KAAA,CAAM,YAAY;AAChB,MAAI,IAAA;AACF,QAAA,MAAM,MAAS,GAAA,MAAM,cAAe,CAAA,cAAA,CAAe,OAAO,KAAK,CAAA;AAC/D,QAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,UAAA,cAAA,CAAe,MAAM,CAAA;AAAA,SAChB,MAAA;AACL,UAAQ,OAAA,CAAA,KAAA,CAAM,sCAAsC,MAAM,CAAA;AAAA;AAC5D,eACO,KAAO,EAAA;AACd,QAAA,IAAI,iBAAiB,6BAA+B,EAAA;AAClD,UAAQ,OAAA,CAAA,IAAA,CAAK,iCAAiC,KAAK,CAAA;AACnD,UAAe,cAAA,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,SACvB,MAAA;AACL,UAAQ,OAAA,CAAA,KAAA,CAAM,qCAAqC,KAAK,CAAA;AACxD,UAAe,cAAA,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA;AAC9B;AACF,KACC,GAAA;AAAA,GACF,EAAA,CAAC,KAAO,EAAA,KAAA,EAAO,cAAc,CAAC,CAAA;AAEjC,EAAO,OAAA,WAAA;AACT","file":"chunk-K76RPF2X.js","sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport { DisplayTextService, type ServiceMappings } from '@/services/displayText'\nimport { DisplayTextValueNotFoundError } from '@/types/displayText.errors'\n\nexport const useDisplayText = (\n  scope: keyof ServiceMappings,\n  value: string | string[] | undefined | null\n) => {\n  const [displayText, setDisplayText] = useState('')\n  const displayService = useMemo(() => new DisplayTextService(), [])\n\n  useEffect(() => {\n    if (!displayService || !value) {\n      setDisplayText('')\n      return\n    }\n    void (async () => {\n      try {\n        const result = await displayService.getDisplayText(scope, value)\n        if (typeof result === 'string') {\n          setDisplayText(result)\n        } else {\n          console.error('Expected a string result, but got:', result)\n        }\n      } catch (error) {\n        if (error instanceof DisplayTextValueNotFoundError) {\n          console.warn('Display text value not found:', value)\n          setDisplayText(String(value))\n        } else {\n          console.error('Unexpected error formatting text:', error)\n          setDisplayText(String(value))\n        }\n      }\n    })()\n  }, [scope, value, displayService])\n\n  return displayText\n}\n"]}
+{"version":3,"sources":["../src/hooks/useDisplayText.ts"],"names":[],"mappings":";;;;AAKa,IAAA,cAAA,GAAiB,CAC5B,KAAA,EACA,KACG,KAAA;AACH,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,EAAE,CAAA;AACjD,EAAA,MAAM,iBAAiB,OAAQ,CAAA,MAAM,IAAI,kBAAmB,EAAA,EAAG,EAAE,CAAA;AAEjE,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,cAAkB,IAAA,CAAC,KAAO,EAAA;AAC7B,MAAA,cAAA,CAAe,EAAE,CAAA;AACjB,MAAA;AAAA;AAEF,IAAA,KAAA,CAAM,YAAY;AAChB,MAAI,IAAA;AACF,QAAA,MAAM,MAAS,GAAA,MAAM,cAAe,CAAA,cAAA,CAAe,OAAO,KAAK,CAAA;AAC/D,QAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,UAAA,cAAA,CAAe,MAAM,CAAA;AAAA,SAChB,MAAA;AACL,UAAQ,OAAA,CAAA,KAAA,CAAM,sCAAsC,MAAM,CAAA;AAAA;AAC5D,eACO,KAAO,EAAA;AACd,QAAA,IAAI,iBAAiB,6BAA+B,EAAA;AAClD,UAAQ,OAAA,CAAA,IAAA,CAAK,iCAAiC,KAAK,CAAA;AACnD,UAAe,cAAA,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,SACvB,MAAA;AACL,UAAQ,OAAA,CAAA,KAAA,CAAM,qCAAqC,KAAK,CAAA;AACxD,UAAe,cAAA,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA;AAC9B;AACF,KACC,GAAA;AAAA,GACF,EAAA,CAAC,KAAO,EAAA,KAAA,EAAO,cAAc,CAAC,CAAA;AAEjC,EAAO,OAAA,WAAA;AACT","file":"chunk-CPZFINPG.js","sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport { DisplayTextService, type ServiceMappings } from '@/services/displayText'\nimport { DisplayTextValueNotFoundError } from '@/types/displayText.errors'\n\nexport const useDisplayText = (\n  scope: keyof ServiceMappings,\n  value: string | string[] | undefined | null\n) => {\n  const [displayText, setDisplayText] = useState('')\n  const displayService = useMemo(() => new DisplayTextService(), [])\n\n  useEffect(() => {\n    if (!displayService || !value) {\n      setDisplayText('')\n      return\n    }\n    void (async () => {\n      try {\n        const result = await displayService.getDisplayText(scope, value)\n        if (typeof result === 'string') {\n          setDisplayText(result)\n        } else {\n          console.error('Expected a string result, but got:', result)\n        }\n      } catch (error) {\n        if (error instanceof DisplayTextValueNotFoundError) {\n          console.warn('Display text value not found:', value)\n          setDisplayText(String(value))\n        } else {\n          console.error('Unexpected error formatting text:', error)\n          setDisplayText(String(value))\n        }\n      }\n    })()\n  }, [scope, value, displayService])\n\n  return displayText\n}\n"]}

package/dist/chunk-CQSYXCIU.cjs

@@ -0,0 +1,221 @@
+'use strict';
+
+var chunkXKLOANYB_cjs = require('./chunk-XKLOANYB.cjs');
+var chunkXWQI5MC3_cjs = require('./chunk-XWQI5MC3.cjs');
+var chunkYNREEZ75_cjs = require('./chunk-YNREEZ75.cjs');
+var chunkLTJXX7NG_cjs = require('./chunk-LTJXX7NG.cjs');
+var chunkRKLUMDJB_cjs = require('./chunk-RKLUMDJB.cjs');
+var chunkXO6LO5CU_cjs = require('./chunk-XO6LO5CU.cjs');
+var chunkC3DCFPJC_cjs = require('./chunk-C3DCFPJC.cjs');
+var chunkMGWZXPMF_cjs = require('./chunk-MGWZXPMF.cjs');
+var cva = require('cva');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Combobox = react.forwardRef((props, ref) => {
+  const {
+    id,
+    name,
+    value,
+    label,
+    options,
+    required,
+    description,
+    classNames,
+    multiselect,
+    placeholder,
+    error,
+    variant = "default",
+    size,
+    icon,
+    className,
+    onChange: handleChange,
+    children: footer
+  } = props;
+  const [selected, setSelected] = react.useState([]);
+  const [open, setOpen] = react.useState(false);
+  const isUserUpdate = react.useRef(false);
+  const IconComponent = icon && lucideReact.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);
+  react.useEffect(() => {
+    if (!isUserUpdate.current) {
+      const valueArray = multiselect ? value ?? [] : value ? [value] : [];
+      setSelected(
+        valueArray.map((v) => options.find((o) => o.value === v)).filter((v) => v !== void 0)
+      );
+    }
+  }, [value, options, multiselect]);
+  react.useEffect(() => {
+    if (isUserUpdate.current) {
+      if (multiselect) {
+        handleChange?.(selected.map((o) => o.value));
+      } else {
+        handleChange?.(selected[0]?.value ?? "");
+      }
+      isUserUpdate.current = false;
+    }
+  }, [selected, multiselect, handleChange]);
+  const updateMultiSelect = (prev, option) => {
+    return prev.some((o) => o.value === option.value) ? prev.filter((v) => v !== option) : [...prev, option];
+  };
+  const handleSelect = (value2) => {
+    const option = options.find((o) => o.value === value2);
+    if (!option) return;
+    isUserUpdate.current = true;
+    if (multiselect) {
+      setSelected((prev) => updateMultiSelect(prev, option));
+    } else {
+      setSelected([option]);
+      close();
+    }
+  };
+  const handleClear = () => {
+    isUserUpdate.current = true;
+    setSelected([]);
+  };
+  const handleDisplayValue = () => {
+    const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
+    return isDefault ? defaultLabel : label;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMGWZXPMF_cjs.cn("flex flex-col gap-1", className), children: [
+    isDefault && /* @__PURE__ */ jsxRuntime.jsx(
+      chunkXWQI5MC3_cjs.Label_default,
+      {
+        text: label,
+        htmlFor: name,
+        required,
+        description,
+        className: classNames?.label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(chunkRKLUMDJB_cjs.Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkRKLUMDJB_cjs.PopoverTrigger,
+          {
+            asChild: true,
+            disabled: options.length === 0,
+            "data-testid": `${id ?? name}-combobox-trigger`,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                ref,
+                className: chunkMGWZXPMF_cjs.cn(
+                  triggerVariants({ variant, size }),
+                  isDefault && !isEmpty && "pr-10",
+                  classNames?.trigger
+                ),
+                "aria-expanded": open,
+                children: [
+                  isDefault && IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-4 w-4 shrink-0" }),
+                  isChip && !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(chunkYNREEZ75_cjs.Badge, { variant: "purple", children: selected.length }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: chunkMGWZXPMF_cjs.cn(
+                        "w-full truncate leading-normal",
+                        isDefault && isEmpty && "text-grey-40"
+                      ),
+                      children: handleDisplayValue()
+                    }
+                  ),
+                  showChevron && /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReact.ChevronDownIcon,
+                    {
+                      className: "shrink-0 transform group-data-[state=open]:rotate-180",
+                      size: "16"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkRKLUMDJB_cjs.PopoverContent,
+          {
+            className: chunkMGWZXPMF_cjs.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__ */ jsxRuntime.jsxs(chunkC3DCFPJC_cjs.Command, { children: [
+              !hideSearchBox && /* @__PURE__ */ jsxRuntime.jsx(chunkC3DCFPJC_cjs.CommandInput, { placeholder: "Search..." }),
+              /* @__PURE__ */ jsxRuntime.jsxs(chunkC3DCFPJC_cjs.CommandList, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(chunkC3DCFPJC_cjs.CommandEmpty, { children: "No results" }),
+                /* @__PURE__ */ jsxRuntime.jsx(chunkC3DCFPJC_cjs.CommandGroup, { children: options.map(({ id: id2, ...option }) => /* @__PURE__ */ jsxRuntime.jsx(
+                  chunkC3DCFPJC_cjs.CommandItem,
+                  {
+                    value: option.title,
+                    onSelect: () => handleSelect(option.value),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      chunkXKLOANYB_cjs.ListItem_default,
+                      {
+                        className: chunkMGWZXPMF_cjs.cn(classNames?.items, "truncate py-1"),
+                        isSelected: selected.some((s) => s.value === option.value),
+                        hasCheckbox: multiselect,
+                        ...option
+                      }
+                    )
+                  },
+                  id2
+                )) })
+              ] }),
+              !!footer && /* @__PURE__ */ jsxRuntime.jsx(chunkXO6LO5CU_cjs.Separator, {}),
+              footer && footer({ close })
+            ] })
+          }
+        )
+      ] }),
+      isDefault && !isEmpty && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.CircleX, { className: "h-4 w-4 text-green-100" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkLTJXX7NG_cjs.ErrorMessage_default, { message: error })
+  ] });
+});
+Combobox.displayName = "Combobox";
+var triggerVariants = cva.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"
+    }
+  }
+);
+
+exports.Combobox = Combobox;
+//# sourceMappingURL=chunk-CQSYXCIU.cjs.map
+//# sourceMappingURL=chunk-CQSYXCIU.cjs.map

package/dist/chunk-CQSYXCIU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/Combobox.tsx"],"names":["forwardRef","useState","useRef","icons","useEffect","value","cn","jsx","Label_default","jsxs","Popover","PopoverTrigger","Badge","ChevronDownIcon","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","id","CommandItem","ListItem_default","Separator","CircleX","ErrorMessage_default","cva"],"mappings":"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","file":"chunk-CQSYXCIU.cjs","sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'cva'\nimport { ChevronDownIcon, CircleX, icons } from 'lucide-react'\nimport { type ComponentProps, forwardRef, useEffect, useRef, useState } from 'react'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/primitives/command'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/primitives/popover'\nimport { Separator } from '@/components/primitives/separator'\nimport { Badge } from '@/components/ui/Badge'\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport ListItem from '@/components/ui/ListItem'\nimport { cn } from '@/lib/utils'\n\ntype Icon = { icon?: keyof typeof icons }\ntype LabelProps = { label?: string; description?: string }\ntype Children = { children?: (props: { close: () => void }) => JSX.Element }\ntype Option = { id: string; value: string; title: string; description?: string; icon?: string }\ntype ClassNames = { label?: string; trigger?: string; items?: string; content?: string }\ntype Shared = { options: Option[]; classNames?: ClassNames; placeholder?: string; error?: string }\ntype MultiSelect = { multiselect: true; value?: string[]; onChange?: (v: string[]) => void }\ntype SingleSelect = { multiselect?: false; value?: string; onChange?: (v: string) => void }\ntype TriggerVariants = VariantProps<typeof triggerVariants>\ntype SelectProps = Omit<ComponentProps<'select'>, 'value' | 'onChange' | 'size' | 'children'>\ntype Props = TriggerVariants & SelectProps & Children & Shared & Icon & LabelProps\ntype MultiSelectProps = Props & MultiSelect\ntype SingleSelectProps = Props & SingleSelect\ntype ComboboxProps = MultiSelectProps | SingleSelectProps\n\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>((props, ref) => {\n  const {\n    id,\n    name,\n    value,\n    label,\n    options,\n    required,\n    description,\n    classNames,\n    multiselect,\n    placeholder,\n    error,\n    variant = 'default',\n    size,\n    icon,\n    className,\n    onChange: handleChange,\n    children: footer,\n  } = props\n  const [selected, setSelected] = useState<Option[]>([])\n  const [open, setOpen] = useState(false)\n  const isUserUpdate = useRef(false)\n  const IconComponent = icon && icons[icon]\n  const hideSearchBox = options?.length <= 5\n  const isDefault = variant === 'default'\n  const isChip = variant === 'chip'\n  const isEmpty = selected.length === 0\n  const showChevron = isDefault ? isEmpty : true\n  const close = () => setOpen(false)\n\n  useEffect(() => {\n    if (!isUserUpdate.current) {\n      const valueArray = multiselect ? (value ?? []) : value ? [value] : []\n      setSelected(\n        valueArray.map((v) => options.find((o) => o.value === v)).filter((v) => v !== undefined)\n      )\n    }\n  }, [value, options, multiselect])\n\n  useEffect(() => {\n    if (isUserUpdate.current) {\n      if (multiselect) {\n        handleChange?.(selected.map((o) => o.value))\n      } else {\n        handleChange?.(selected[0]?.value ?? '')\n      }\n      isUserUpdate.current = false\n    }\n  }, [selected, multiselect, handleChange])\n\n  const updateMultiSelect = (prev: Option[], option: Option) => {\n    return prev.some((o) => o.value === option.value)\n      ? prev.filter((v) => v !== option)\n      : [...prev, option]\n  }\n\n  const handleSelect = (value: string) => {\n    const option = options.find((o) => o.value === value)\n    if (!option) return\n\n    isUserUpdate.current = true\n    if (multiselect) {\n      setSelected((prev) => updateMultiSelect(prev, option))\n    } else {\n      setSelected([option])\n      close()\n    }\n  }\n\n  const handleClear = () => {\n    isUserUpdate.current = true\n    setSelected([])\n  }\n\n  const handleDisplayValue = () => {\n    const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(', ') : placeholder\n    return isDefault ? defaultLabel : label\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-1', className)}>\n      {isDefault && (\n        <Label\n          text={label}\n          htmlFor={name}\n          required={required}\n          description={description}\n          className={classNames?.label}\n        />\n      )}\n\n      <div className=\"relative flex\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger\n            asChild\n            disabled={options.length === 0}\n            data-testid={`${id ?? name}-combobox-trigger`}\n          >\n            <div\n              ref={ref}\n              className={cn(\n                triggerVariants({ variant, size }),\n                isDefault && !isEmpty && 'pr-10',\n                classNames?.trigger\n              )}\n              aria-expanded={open}\n            >\n              {isDefault && IconComponent && <IconComponent className=\"h-4 w-4 shrink-0\" />}\n              {isChip && !isEmpty && <Badge variant=\"purple\">{selected.length}</Badge>}\n\n              <span\n                className={cn(\n                  'w-full truncate leading-normal',\n                  isDefault && isEmpty && 'text-grey-40'\n                )}\n              >\n                {handleDisplayValue()}\n              </span>\n\n              {showChevron && (\n                <ChevronDownIcon\n                  className=\"shrink-0 transform group-data-[state=open]:rotate-180\"\n                  size=\"16\"\n                />\n              )}\n            </div>\n          </PopoverTrigger>\n\n          <PopoverContent\n            className={cn(\n              'flex w-full max-w-xs flex-col overflow-hidden p-0',\n              'max-h-[--radix-popover-content-available-height]',\n              classNames?.content\n            )}\n            collisionPadding={8}\n            sideOffset={4}\n            align=\"start\"\n          >\n            <Command>\n              {!hideSearchBox && <CommandInput placeholder=\"Search...\" />}\n\n              <CommandList>\n                <CommandEmpty>No results</CommandEmpty>\n                <CommandGroup>\n                  {options.map(({ id, ...option }) => (\n                    <CommandItem\n                      key={id}\n                      value={option.title}\n                      onSelect={() => handleSelect(option.value)}\n                    >\n                      <ListItem\n                        className={cn(classNames?.items, 'truncate py-1')}\n                        isSelected={selected.some((s) => s.value === option.value)}\n                        hasCheckbox={multiselect}\n                        {...option}\n                      />\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </CommandList>\n\n              {!!footer && <Separator />}\n              {footer && footer({ close })}\n            </Command>\n          </PopoverContent>\n        </Popover>\n\n        {isDefault && !isEmpty && (\n          <button\n            type=\"button\"\n            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\"\n            onClick={handleClear}\n          >\n            <CircleX className=\"h-4 w-4 text-green-100\" />\n          </button>\n        )}\n      </div>\n\n      <ErrorMessage message={error} />\n    </div>\n  )\n})\nCombobox.displayName = 'Combobox'\n\nconst triggerVariants = cva(\n  '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',\n  {\n    variants: {\n      variant: {\n        default: ['w-full', 'rounded-lg'],\n        chip: [\n          'font-bold',\n          'rounded-3xl',\n          'data-[state=open]:bg-black',\n          'data-[state=open]:text-white',\n        ],\n      },\n      size: {\n        small: ['h-8', 'py-1', 'px-2', 'text-xs'],\n        normal: ['h-9', 'py-2', 'px-3', 'text-sm'],\n        large: ['h-10', 'py-3', 'px-4', 'text-base'],\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'normal',\n    },\n  }\n)\n"]}