@powerhousedao/design-system 6.2.0-dev.9 → 6.2.0-rc.0

package/dist/ui/components/command/command.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.js","names":["Icon","twMerge","Command","CommandPrimitive","React","forwardRef","className","props","ref","displayName","CommandInput","wrapperClassName","Input","CommandList","List","CommandLoading","Loading","CommandEmpty","Empty","CommandGroup","Group","CommandItem","Item"],"sources":["../../../../src/ui/components/command/command.tsx"],"sourcesContent":["import { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport React from \"react\";\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={twMerge(\n      \"flex size-full flex-col rounded-md **:[[cmdk-label]]:hidden\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n    wrapperClassName?: string;\n  }\n>(({ wrapperClassName, className, ...props }, ref) => (\n  <div\n    className={twMerge(\n      \"group relative flex items-center border-b\",\n      \"border-b-gray-300 dark:border-b-slate-900\",\n      \"hover:border-b-gray-300 dark:hover:border-b-slate-800\",\n      \"hover:bg-gray-100 dark:hover:bg-slate-700\",\n      \"focus-within:border-b-gray-300 dark:focus-within:border-b-slate-800\",\n      \"focus-within:bg-gray-100 dark:focus-within:bg-slate-700\",\n      wrapperClassName,\n    )}\n    cmdk-input-wrapper=\"\"\n  >\n    <Icon\n      name=\"Search\"\n      size={16}\n      className={twMerge(\n        \"pointer-events-none absolute top-3.5 left-2 text-gray-500 dark:text-slate-400\",\n        \"group-hover:text-gray-700 dark:group-hover:text-slate-200\",\n        \"group-focus-within:text-gray-900! dark:group-focus-within:text-slate-50\",\n      )}\n    />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={twMerge(\n        \"flex w-full bg-transparent pt-3 pr-3 pb-2 pl-8 text-sm/5 font-normal outline-none\",\n        \"placeholder:text-gray-500 dark:placeholder:text-slate-400\",\n        \"group-hover:placeholder:text-gray-700 dark:group-hover:placeholder:text-slate-500\",\n        \"group-focus-within:placeholder:text-gray-700! dark:group-focus-within:placeholder:text-slate-300\",\n        \"disabled:cursor-not-allowed\",\n        className,\n      )}\n      {...props}\n    />\n  </div>\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={twMerge(\n      \"max-h-75 overflow-x-hidden overflow-y-auto\",\n      \"focus:outline-none\",\n      \"scrollbar-thin\",\n      \"scrollbar-track-transparent\",\n      \"scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-300\",\n      \"dark:scrollbar-thumb-slate-700 dark:hover:scrollbar-thumb-slate-700\",\n      \"scrollbar-thumb-rounded-md\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandLoading = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Loading>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>\n>((props, ref) => <CommandPrimitive.Loading ref={ref} {...props} />);\nCommandLoading.displayName = CommandPrimitive.Loading.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} {...props} />);\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={twMerge(\n      \"overflow-hidden px-0.5 py-1\",\n      \"**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommandGroup.displayName = CommandPrimitive.Group.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={twMerge(\n      \"relative flex items-center justify-between select-none\",\n      \"h-8 gap-2 rounded-md py-1.5 pr-2.5 pl-1.5\",\n      \"text-sm/4 text-gray-900 outline-none dark:text-slate-50\",\n      \"border-y-2 border-white dark:border-slate-600 dark:bg-slate-600 dark:text-slate-100\",\n      \"data-[disabled=true]:pointer-events-none\",\n      \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nexport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandLoading,\n};\n"],"mappings":";;;;;;AAKA,MAAME,UAAUE,sBAAMC,YAGnB,EAAEC,WAAW,GAAGC,SAASC,QAC1B,oBAAC,WAAD;CACOA;CACL,WAAWP,QACT,+DACAK,UACD;CACD,GAAIC;CAEP,CAAA,CAAC;AACFL,QAAQO,cAAcN,UAAiBM;AAEvC,MAAMC,eAAeN,sBAAMC,YAKxB,EAAEM,kBAAkBL,WAAW,GAAGC,SAASC,QAC5C,qBAAC,OAAD;CACE,WAAWP,QACT,6CACA,6CACA,yDACA,6CACA,uEACA,2DACAU,iBACD;CACD,sBAAmB;WAVrB,CAYE,oBAAC,MAAD;EACE,MAAK;EACL,MAAM;EACN,WAAWV,QACT,iFACA,6DACA,0EACD;EAAC,CAAA,EAEJ,oBAAC,UAAiB,OAAlB;EACOO;EACL,WAAWP,QACT,qFACA,6DACA,qFACA,oGACA,+BACAK,UACD;EACD,GAAIC;EAAM,CAAA,CAGf;GAAC;AACFG,aAAaD,cAAcN,UAAiBS,MAAMH;AAElD,MAAMI,cAAcT,sBAAMC,YAGvB,EAAEC,WAAW,GAAGC,SAASC,QAC1B,oBAAC,UAAiB,MAAlB;CACOA;CACL,WAAWP,QACT,8CACA,sBACA,kBACA,+BACA,2DACA,uEACA,8BACAK,UACD;CACD,GAAIC;CAEP,CAAA,CAAC;AACFM,YAAYJ,cAAcN,UAAiBW,KAAKL;AAEhD,MAAMM,iBAAiBX,sBAAMC,YAG1BE,OAAOC,QAAQ,oBAAC,UAAiB,SAAlB;CAA+BA;CAAK,GAAID;CAAS,CAAA,CAAC;AACpEQ,eAAeN,cAAcN,UAAiBa,QAAQP;AAEtD,MAAMQ,eAAeb,sBAAMC,YAGxBE,OAAOC,QAAQ,oBAAC,UAAiB,OAAlB;CAA6BA;CAAK,GAAID;CAAS,CAAA,CAAC;AAClEU,aAAaR,cAAcN,UAAiBe,MAAMT;AAElD,MAAMU,eAAef,sBAAMC,YAGxB,EAAEC,WAAW,GAAGC,SAASC,QAC1B,oBAAC,UAAiB,OAAlB;CACOA;CACL,WAAWP,QACT,+BACA,2IACAK,UACD;CACD,GAAIC;CAEP,CAAA,CAAC;AACFY,aAAaV,cAAcN,UAAiBiB,MAAMX;AAElD,MAAMY,cAAcjB,sBAAMC,YAGvB,EAAEC,WAAW,GAAGC,SAASC,QAC1B,oBAAC,UAAiB,MAAlB;CACOA;CACL,WAAWP,QACT,0DACA,6CACA,2DACA,uFACA,4CACA,+DACAK,UACD;CACD,GAAIC;CAEP,CAAA,CAAC;AACFc,YAAYZ,cAAcN,UAAiBmB,KAAKb"}
+{"version":3,"file":"command.js","names":["Icon","Command","CommandPrimitive","React","twMerge","forwardRef","className","props","ref","displayName","CommandInput","wrapperClassName","Input","CommandList","List","CommandLoading","Loading","CommandEmpty","Empty","CommandGroup","Group","CommandItem","Item"],"sources":["../../../../src/ui/components/command/command.tsx"],"sourcesContent":["import { Icon } from \"#design-system\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\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={twMerge(\n      \"flex size-full flex-col rounded-md **:[[cmdk-label]]:hidden\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n    wrapperClassName?: string;\n  }\n>(({ wrapperClassName, className, ...props }, ref) => (\n  <div\n    className={twMerge(\n      \"group relative flex items-center border-b\",\n      \"border-b-border\",\n      \"hover:hover-effect\",\n      \"focus-within:border-b-border\",\n      \"focus-within:bg-accent\",\n      wrapperClassName,\n    )}\n    cmdk-input-wrapper=\"\"\n  >\n    <Icon\n      name=\"Search\"\n      size={16}\n      className={twMerge(\n        \"pointer-events-none absolute top-3.5 left-2 text-muted-foreground\",\n        \"group-hover:hover-effect\",\n        \"group-focus-within:text-foreground!\",\n      )}\n    />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={twMerge(\n        \"flex w-full bg-transparent pt-3 pr-3 pb-2 pl-8 text-sm/5 font-normal outline-none\",\n        \"text-foreground placeholder:text-muted-foreground disabled:disabled-effect\",\n        \"group-hover:hover-effect\",\n        \"disabled:disabled-effect\",\n        className,\n      )}\n      {...props}\n    />\n  </div>\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={twMerge(\n      \"max-h-75 overflow-x-hidden overflow-y-auto\",\n      \"focus:outline-none\",\n      \"scrollbar-thin\",\n      \"scrollbar-track-transparent\",\n      \"scrollbar-thumb-border hover:scrollbar-thumb-border\",\n      \"scrollbar-thumb-rounded-md\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandLoading = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Loading>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>\n>((props, ref) => <CommandPrimitive.Loading ref={ref} {...props} />);\nCommandLoading.displayName = CommandPrimitive.Loading.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => <CommandPrimitive.Empty ref={ref} {...props} />);\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={twMerge(\n      \"overflow-hidden px-0.5 py-1\",\n      \"**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommandGroup.displayName = CommandPrimitive.Group.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={twMerge(\n      \"relative flex items-center justify-between select-none\",\n      \"h-8 gap-2 rounded-md py-1.5 pr-2.5 pl-1.5\",\n      \"text-sm/4 text-foreground outline-none\",\n      \"border-y-2 border-border\",\n      \"data-[disabled=true]:disabled-effect\",\n      \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nexport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandLoading,\n};\n"],"mappings":";;;;;;AAKA,MAAMC,UAAUE,sBAAME,YAGnB,EAAEC,WAAW,GAAGC,SAASC,QAC1B,oBAAC,WAAD;CACOA;CACL,WAAWJ,QACT,+DACAE,UACD;CACD,GAAIC;CAEP,CAAA,CAAC;AACFN,QAAQQ,cAAcP,UAAiBO;AAEvC,MAAMC,eAAeP,sBAAME,YAKxB,EAAEM,kBAAkBL,WAAW,GAAGC,SAASC,QAC5C,qBAAC,OAAD;CACE,WAAWJ,QACT,6CACA,mBACA,sBACA,gCACA,0BACAO,iBACD;CACD,sBAAmB;WATrB,CAWE,oBAAC,MAAD;EACE,MAAK;EACL,MAAM;EACN,WAAWP,QACT,qEACA,4BACA,sCACD;EAAC,CAAA,EAEJ,oBAAC,UAAiB,OAAlB;EACOI;EACL,WAAWJ,QACT,qFACA,8EACA,4BACA,4BACAE,UACD;EACD,GAAIC;EAAM,CAAA,CAGf;GAAC;AACFG,aAAaD,cAAcP,UAAiBU,MAAMH;AAElD,MAAMI,cAAcV,sBAAME,YAGvB,EAAEC,WAAW,GAAGC,SAASC,QAC1B,oBAAC,UAAiB,MAAlB;CACOA;CACL,WAAWJ,QACT,8CACA,sBACA,kBACA,+BACA,uDACA,8BACAE,UACD;CACD,GAAIC;CAEP,CAAA,CAAC;AACFM,YAAYJ,cAAcP,UAAiBY,KAAKL;AAEhD,MAAMM,iBAAiBZ,sBAAME,YAG1BE,OAAOC,QAAQ,oBAAC,UAAiB,SAAlB;CAA+BA;CAAK,GAAID;CAAS,CAAA,CAAC;AACpEQ,eAAeN,cAAcP,UAAiBc,QAAQP;AAEtD,MAAMQ,eAAed,sBAAME,YAGxBE,OAAOC,QAAQ,oBAAC,UAAiB,OAAlB;CAA6BA;CAAK,GAAID;CAAS,CAAA,CAAC;AAClEU,aAAaR,cAAcP,UAAiBgB,MAAMT;AAElD,MAAMU,eAAehB,sBAAME,YAGxB,EAAEC,WAAW,GAAGC,SAASC,QAC1B,oBAAC,UAAiB,OAAlB;CACOA;CACL,WAAWJ,QACT,+BACA,2IACAE,UACD;CACD,GAAIC;CAEP,CAAA,CAAC;AACFY,aAAaV,cAAcP,UAAiBkB,MAAMX;AAElD,MAAMY,cAAclB,sBAAME,YAGvB,EAAEC,WAAW,GAAGC,SAASC,QAC1B,oBAAC,UAAiB,MAAlB;CACOA;CACL,WAAWJ,QACT,0DACA,6CACA,0CACA,4BACA,wCACA,+DACAE,UACD;CACD,GAAIC;CAEP,CAAA,CAAC;AACFc,YAAYZ,cAAcP,UAAiBoB,KAAKb"}

package/dist/ui/components/enum-field/enum-field.d.ts

@@ -1,2 +1,2 @@
-import { n as EnumFieldProps, t as EnumField } from "../../../enum-field-UxIet5Lp.js";
+import { n as EnumFieldProps, t as EnumField } from "../../../enum-field-CwZVs3Ux.js";
 export { EnumField, EnumFieldProps };

package/dist/ui/components/form-description/form-description.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/ui/components/form-description/form-description.tsx
 const FormDescription = ({ children, as, className }) => {
 	return /* @__PURE__ */ jsx(as ?? "p", {
-		className: twMerge("font-sans text-sm/5 font-normal text-gray-700 dark:text-slate-200", className),
+		className: twMerge("font-sans text-sm/5 font-normal text-foreground", className),
 		children
 	});
 };

package/dist/ui/components/form-description/form-description.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-description.js","names":["twMerge","FormDescription","children","as","className","Component"],"sources":["../../../../src/ui/components/form-description/form-description.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\nexport interface FormDescriptionProps extends React.PropsWithChildren {\n  as?: React.ElementType;\n  className?: string;\n}\n\nconst FormDescription: React.FC<FormDescriptionProps> = ({\n  children,\n  as,\n  className,\n}) => {\n  const Component = as ?? \"p\";\n\n  return (\n    <Component\n      className={twMerge(\n        \"font-sans text-sm/5 font-normal text-gray-700 dark:text-slate-200\",\n        className,\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport { FormDescription };\n"],"mappings":";;;AAOA,MAAMC,mBAAmD,EACvDC,UACAC,IACAC,gBACI;AAGJ,QACE,oBAHgBD,MAAM,KAGtB;EACE,WAAWH,QACT,qEACAI,UACD;EAEAF;EACS,CAAA"}
+{"version":3,"file":"form-description.js","names":["twMerge","FormDescription","children","as","className","Component"],"sources":["../../../../src/ui/components/form-description/form-description.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\nexport interface FormDescriptionProps extends React.PropsWithChildren {\n  as?: React.ElementType;\n  className?: string;\n}\n\nconst FormDescription: React.FC<FormDescriptionProps> = ({\n  children,\n  as,\n  className,\n}) => {\n  const Component = as ?? \"p\";\n\n  return (\n    <Component\n      className={twMerge(\n        \"font-sans text-sm/5 font-normal text-foreground\",\n        className,\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport { FormDescription };\n"],"mappings":";;;AAOA,MAAMC,mBAAmD,EACvDC,UACAC,IACAC,gBACI;AAGJ,QACE,oBAHgBD,MAAM,KAGtB;EACE,WAAWH,QACT,mDACAI,UACD;EAEAF;EACS,CAAA"}

package/dist/ui/components/form-label/form-label.js

@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/components/form-label/form-label.tsx
 const FormLabel = ({ children, required, disabled, description, hasError, inline, className, ...htmlLabelProps }) => {
-	const classes = twMerge("inline-flex items-center text-sm font-medium", inline ? "leading-[22px]" : "leading-4", `text-gray-900 dark:text-slate-100 ${inline ? "" : ""}`, hasError && "group-hover:text-red-900 dark:group-hover:text-red-100", hasError && inline && "text-red-800 dark:text-red-100", hasError && !inline && "text-red-900 dark:text-red-400", disabled && `cursor-not-allowed text-gray-700 dark:text-slate-300 ${inline ? "" : ""}`, inline ? !disabled && "group-hover:text-gray-900 dark:group-hover:text-slate-50" : "mb-[3px]", className);
+	const classes = twMerge("inline-flex items-center text-sm font-medium", inline ? "leading-[22px]" : "leading-4", "text-foreground", hasError && "group-hover:hover-effect", hasError && inline && "text-destructive", hasError && !inline && "text-destructive", disabled && "cursor-not-allowed text-foreground", inline ? !disabled && "group-hover:hover-effect" : "mb-[3px]", className);
 	if (!children) return null;
 	return /* @__PURE__ */ jsxs("label", {
 		className: classes,
@@ -12,7 +12,7 @@ const FormLabel = ({ children, required, disabled, description, hasError, inline
 		children: [
 			children,
 			required && /* @__PURE__ */ jsx("span", {
-				className: twMerge("ml-1 text-gray-900 group-hover:text-gray-900 dark:text-slate-100 dark:group-hover:text-slate-50", hasError && `${inline ? "text-red-800 dark:text-red-100" : "text-red-900 dark:text-red-100"} group-hover:text-red-900`),
+				className: twMerge("ml-1 text-foreground group-hover:hover-effect", hasError && "text-destructive group-hover:hover-effect"),
 				children: "*"
 			}),
 			description && /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(Tooltip, {
@@ -20,7 +20,7 @@ const FormLabel = ({ children, required, disabled, description, hasError, inline
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: "CircleInfo",
 					size: 16,
-					className: twMerge("ml-1 cursor-pointer text-gray-700 hover:text-gray-500 dark:text-slate-200 dark:hover:text-slate-400", disabled && "text-gray-500 dark:text-slate-400")
+					className: twMerge("ml-1 cursor-pointer text-foreground hover:hover-effect", disabled && "text-muted-foreground")
 				})
 			}) })
 		]

package/dist/ui/components/form-label/form-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-label.js","names":["Icon","twMerge","Tooltip","TooltipProvider","FormLabel","children","required","disabled","description","hasError","inline","className","htmlLabelProps","classes","extraProps"],"sources":["../../../../src/ui/components/form-label/form-label.tsx"],"sourcesContent":["import { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Tooltip, TooltipProvider } from \"../tooltip/tooltip.js\";\n\nexport interface FormLabelProps\n  extends React.PropsWithChildren, React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean;\n  disabled?: boolean;\n  description?: string;\n  hasError?: boolean;\n  inline?: boolean;\n  className?: string;\n}\n\nexport const FormLabel: React.FC<FormLabelProps> = ({\n  children,\n  required,\n  disabled,\n  description,\n  hasError,\n  inline,\n  className,\n  ...htmlLabelProps\n}) => {\n  const classes = twMerge(\n    \"inline-flex items-center text-sm font-medium\",\n    inline ? \"leading-[22px]\" : \"leading-4\",\n    `text-gray-900 dark:text-slate-100 ${inline ? \"\" : \"\"}`,\n    hasError && \"group-hover:text-red-900 dark:group-hover:text-red-100\",\n    hasError && inline && \"text-red-800 dark:text-red-100\",\n    hasError && !inline && \"text-red-900 dark:text-red-400\",\n    disabled &&\n      `cursor-not-allowed text-gray-700 dark:text-slate-300 ${inline ? \"\" : \"\"}`,\n    inline\n      ? !disabled && \"group-hover:text-gray-900 dark:group-hover:text-slate-50\"\n      : \"mb-[3px]\",\n    className,\n  );\n\n  if (!children) {\n    // no label provided\n    return null;\n  }\n\n  const extraProps = {\n    ...htmlLabelProps,\n  };\n\n  return (\n    <label className={classes} {...extraProps}>\n      {children}\n      {required && (\n        <span\n          className={twMerge(\n            \"ml-1 text-gray-900 group-hover:text-gray-900 dark:text-slate-100 dark:group-hover:text-slate-50\",\n            hasError &&\n              `${inline ? \"text-red-800 dark:text-red-100\" : \"text-red-900 dark:text-red-100\"} group-hover:text-red-900`,\n          )}\n        >\n          *\n        </span>\n      )}\n\n      {description && (\n        <TooltipProvider>\n          <Tooltip content={description}>\n            <Icon\n              name=\"CircleInfo\"\n              size={16}\n              className={twMerge(\n                \"ml-1 cursor-pointer text-gray-700 hover:text-gray-500 dark:text-slate-200 dark:hover:text-slate-400\",\n                disabled && \"text-gray-500 dark:text-slate-400\",\n              )}\n            />\n          </Tooltip>\n        </TooltipProvider>\n      )}\n    </label>\n  );\n};\n"],"mappings":";;;;;AAcA,MAAaI,aAAuC,EAClDC,UACAC,UACAC,UACAC,aACAC,UACAC,QACAC,WACA,GAAGC,qBACC;CACJ,MAAMC,UAAUZ,QACd,gDACAS,SAAS,mBAAmB,aAC5B,qCAAqCA,SAAS,KAAK,MACnDD,YAAY,0DACZA,YAAYC,UAAU,kCACtBD,YAAY,CAACC,UAAU,kCACvBH,YACE,wDAAwDG,SAAS,KAAK,MACxEA,SACI,CAACH,YAAY,6DACb,YACJI,UACD;AAED,KAAI,CAACN,SAEH,QAAO;AAOT,QACE,qBAAC,SAAD;EAAO,WAAWQ;EAJlB,GAAGD;YAIH;GACGP;GACAC,YACC,oBAAC,QAAD;IACE,WAAWL,QACT,mGACAQ,YACE,GAAGC,SAAS,mCAAmC,iCAAgC,2BAClF;cAAC;IAIL,CAAA;GAEAF,eACC,oBAAC,UAAD,EAAA,UACE,oBAAC,SAAD;IAAS,SAASA;cAChB,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAWP,QACT,uGACAM,YAAY,oCACb;KAAC,CAAA;IAEG,CAAA,EAEZ,CAAA;GACK"}
+{"version":3,"file":"form-label.js","names":["Icon","twMerge","Tooltip","TooltipProvider","FormLabel","children","required","disabled","description","hasError","inline","className","htmlLabelProps","classes","extraProps"],"sources":["../../../../src/ui/components/form-label/form-label.tsx"],"sourcesContent":["import { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Tooltip, TooltipProvider } from \"../tooltip/tooltip.js\";\n\nexport interface FormLabelProps\n  extends React.PropsWithChildren, React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean;\n  disabled?: boolean;\n  description?: string;\n  hasError?: boolean;\n  inline?: boolean;\n  className?: string;\n}\n\nexport const FormLabel: React.FC<FormLabelProps> = ({\n  children,\n  required,\n  disabled,\n  description,\n  hasError,\n  inline,\n  className,\n  ...htmlLabelProps\n}) => {\n  const classes = twMerge(\n    \"inline-flex items-center text-sm font-medium\",\n    inline ? \"leading-[22px]\" : \"leading-4\",\n    \"text-foreground\",\n    hasError && \"group-hover:hover-effect\",\n    hasError && inline && \"text-destructive\",\n    hasError && !inline && \"text-destructive\",\n    disabled && \"cursor-not-allowed text-foreground\",\n    inline ? !disabled && \"group-hover:hover-effect\" : \"mb-[3px]\",\n    className,\n  );\n\n  if (!children) {\n    // no label provided\n    return null;\n  }\n\n  const extraProps = {\n    ...htmlLabelProps,\n  };\n\n  return (\n    <label className={classes} {...extraProps}>\n      {children}\n      {required && (\n        <span\n          className={twMerge(\n            \"ml-1 text-foreground group-hover:hover-effect\",\n            hasError && \"text-destructive group-hover:hover-effect\",\n          )}\n        >\n          *\n        </span>\n      )}\n\n      {description && (\n        <TooltipProvider>\n          <Tooltip content={description}>\n            <Icon\n              name=\"CircleInfo\"\n              size={16}\n              className={twMerge(\n                \"ml-1 cursor-pointer text-foreground hover:hover-effect\",\n                disabled && \"text-muted-foreground\",\n              )}\n            />\n          </Tooltip>\n        </TooltipProvider>\n      )}\n    </label>\n  );\n};\n"],"mappings":";;;;;AAcA,MAAaI,aAAuC,EAClDC,UACAC,UACAC,UACAC,aACAC,UACAC,QACAC,WACA,GAAGC,qBACC;CACJ,MAAMC,UAAUZ,QACd,gDACAS,SAAS,mBAAmB,aAC5B,mBACAD,YAAY,4BACZA,YAAYC,UAAU,oBACtBD,YAAY,CAACC,UAAU,oBACvBH,YAAY,sCACZG,SAAS,CAACH,YAAY,6BAA6B,YACnDI,UACD;AAED,KAAI,CAACN,SAEH,QAAO;AAOT,QACE,qBAAC,SAAD;EAAO,WAAWQ;EAJlB,GAAGD;YAIH;GACGP;GACAC,YACC,oBAAC,QAAD;IACE,WAAWL,QACT,iDACAQ,YAAY,4CACb;cAAC;IAIL,CAAA;GAEAD,eACC,oBAAC,UAAD,EAAA,UACE,oBAAC,SAAD;IAAS,SAASA;cAChB,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAWP,QACT,0DACAM,YAAY,wBACb;KAAC,CAAA;IAEG,CAAA,EAEZ,CAAA;GACK"}

package/dist/ui/components/form-message/form-message.js

@@ -5,9 +5,9 @@ const defaultElement = "p";
 const FormMessage = ({ children, type = "info", as, className, ...props }) => {
 	const Component = as || defaultElement;
 	const classes = twMerge("mb-0 inline-flex items-center text-xs font-medium", {
-		error: "text-red-900 dark:text-red-400",
-		info: "text-blue-900 dark:text-blue-100",
-		warning: "text-yellow-900 dark:text-yellow-100"
+		error: "text-destructive",
+		info: "text-info",
+		warning: "text-warning"
 	}[type], className);
 	return /* @__PURE__ */ jsx(Component, {
 		"data-type": type,

package/dist/ui/components/form-message/form-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-message.js","names":["twMerge","defaultElement","FormMessage","children","type","as","className","props","Component","typeClasses","error","info","warning","classes"],"sources":["../../../../src/ui/components/form-message/form-message.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\nexport type FormMessageType = \"error\" | \"info\" | \"warning\";\n\ntype FormMessageOwnProps<E extends React.ElementType = React.ElementType> = {\n  type?: FormMessageType;\n  as?: E;\n  className?: string;\n};\n\nexport type FormMessageProps<E extends React.ElementType> =\n  FormMessageOwnProps<E> &\n    Omit<React.ComponentPropsWithoutRef<E>, keyof FormMessageOwnProps>;\n\nconst defaultElement = \"p\";\n\nexport const FormMessage: <E extends React.ElementType = typeof defaultElement>(\n  props: FormMessageProps<E>,\n) => React.ReactElement | null = ({\n  children,\n  type = \"info\",\n  as,\n  className,\n  ...props\n}) => {\n  const Component = as || defaultElement;\n\n  const typeClasses: Record<FormMessageType, string> = {\n    error: \"text-red-900 dark:text-red-400\",\n    info: \"text-blue-900 dark:text-blue-100\",\n    warning: \"text-yellow-900 dark:text-yellow-100\",\n  };\n\n  const classes = twMerge(\n    \"mb-0 inline-flex items-center text-xs font-medium\",\n    typeClasses[type],\n    className,\n  );\n\n  // TODO: add icon\n  return (\n    <Component data-type={type} className={classes} {...props}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":";;;AAcA,MAAMC,iBAAiB;AAEvB,MAAaC,eAEqB,EAChCC,UACAC,OAAO,QACPC,IACAC,WACA,GAAGC,YACC;CACJ,MAAMC,YAAYH,MAAMJ;CAQxB,MAAMY,UAAUb,QACd,qDAPmD;EACnDU,OAAO;EACPC,MAAM;EACNC,SAAS;EACV,CAIaR,OACZE,UACD;AAGD,QACE,oBAAC,WAAD;EAAW,aAAWF;EAAM,WAAWS;EAAS,GAAIN;EACjDJ;EACS,CAAA"}
+{"version":3,"file":"form-message.js","names":["twMerge","defaultElement","FormMessage","children","type","as","className","props","Component","typeClasses","error","info","warning","classes"],"sources":["../../../../src/ui/components/form-message/form-message.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\nexport type FormMessageType = \"error\" | \"info\" | \"warning\";\n\ntype FormMessageOwnProps<E extends React.ElementType = React.ElementType> = {\n  type?: FormMessageType;\n  as?: E;\n  className?: string;\n};\n\nexport type FormMessageProps<E extends React.ElementType> =\n  FormMessageOwnProps<E> &\n    Omit<React.ComponentPropsWithoutRef<E>, keyof FormMessageOwnProps>;\n\nconst defaultElement = \"p\";\n\nexport const FormMessage: <E extends React.ElementType = typeof defaultElement>(\n  props: FormMessageProps<E>,\n) => React.ReactElement | null = ({\n  children,\n  type = \"info\",\n  as,\n  className,\n  ...props\n}) => {\n  const Component = as || defaultElement;\n\n  const typeClasses: Record<FormMessageType, string> = {\n    error: \"text-destructive\",\n    info: \"text-info\",\n    warning: \"text-warning\",\n  };\n\n  const classes = twMerge(\n    \"mb-0 inline-flex items-center text-xs font-medium\",\n    typeClasses[type],\n    className,\n  );\n\n  // TODO: add icon\n  return (\n    <Component data-type={type} className={classes} {...props}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":";;;AAcA,MAAMC,iBAAiB;AAEvB,MAAaC,eAEqB,EAChCC,UACAC,OAAO,QACPC,IACAC,WACA,GAAGC,YACC;CACJ,MAAMC,YAAYH,MAAMJ;CAQxB,MAAMY,UAAUb,QACd,qDAPmD;EACnDU,OAAO;EACPC,MAAM;EACNC,SAAS;EACV,CAIaR,OACZE,UACD;AAGD,QACE,oBAAC,WAAD;EAAW,aAAWF;EAAM,WAAWS;EAAS,GAAIN;EACjDJ;EACS,CAAA"}

package/dist/ui/components/form-message/message-list.js

@@ -10,9 +10,9 @@ const FormMessageList = ({ messages, type = "info", className, ...props }) => {
 		children: messages[0]
 	});
 	const typeClasses = {
-		error: "before:bg-red-900 dark:before:bg-red-50",
-		info: "before:bg-blue-900 dark:before:bg-blue-50",
-		warning: "before:bg-orange-900 dark:before:bg-orange-50"
+		error: "before:bg-destructive",
+		info: "before:bg-info",
+		warning: "before:bg-warning"
 	};
 	return /* @__PURE__ */ jsx("ul", {
 		className: twMerge("flex flex-col gap-1", className),

package/dist/ui/components/form-message/message-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-list.js","names":["twMerge","FormMessage","FormMessageList","messages","type","className","props","length","typeClasses","error","info","warning","map","message"],"sources":["../../../../src/ui/components/form-message/message-list.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport type { FormMessageType } from \"./form-message.js\";\nimport { FormMessage } from \"./form-message.js\";\n\ninterface FormMessageListProps {\n  messages: string[];\n  type?: FormMessageType;\n  className?: string;\n}\n\nexport const FormMessageList: React.FC<FormMessageListProps> = ({\n  messages,\n  type = \"info\",\n  className,\n  ...props\n}) => {\n  if (messages.length === 0) {\n    return null;\n  }\n\n  if (messages.length === 1) {\n    return (\n      <FormMessage type={type} {...props}>\n        {messages[0]}\n      </FormMessage>\n    );\n  }\n\n  const typeClasses: Record<FormMessageType, string> = {\n    error: \"before:bg-red-900 dark:before:bg-red-50\",\n    info: \"before:bg-blue-900 dark:before:bg-blue-50\",\n    warning: \"before:bg-orange-900 dark:before:bg-orange-50\",\n  };\n\n  return (\n    <ul className={twMerge(\"flex flex-col gap-1\", className)} {...props}>\n      {messages.map((message) => (\n        <FormMessage\n          key={message}\n          as=\"li\"\n          type={type}\n          className={twMerge(\n            // Layout\n            \"relative pl-4\",\n            // Visual styles\n            \"before:absolute before:top-[0.4em] before:left-0 before:size-2 before:rounded-full\",\n            typeClasses[type],\n          )}\n        >\n          {message}\n        </FormMessage>\n      ))}\n    </ul>\n  );\n};\n"],"mappings":";;;;AAUA,MAAaE,mBAAmD,EAC9DC,UACAC,OAAO,QACPC,WACA,GAAGC,YACC;AACJ,KAAIH,SAASI,WAAW,EACtB,QAAO;AAGT,KAAIJ,SAASI,WAAW,EACtB,QACE,oBAAC,aAAD;EAAmBH;EAAM,GAAIE;YAC1BH,SAAS;EACE,CAAA;CAIlB,MAAMK,cAA+C;EACnDC,OAAO;EACPC,MAAM;EACNC,SAAS;EACV;AAED,QACE,oBAAC,MAAD;EAAI,WAAWX,QAAQ,uBAAuBK,UAAU;EAAE,GAAIC;YAC3DH,SAASS,KAAKC,YACb,oBAAC,aAAD;GAEE,IAAG;GACGT;GACN,WAAWJ,QAET,iBAEA,sFACAQ,YAAYJ,MACb;aAEAS;GAEJ,EAbQA,QAaR,CAAC;EACC,CAAA"}
+{"version":3,"file":"message-list.js","names":["twMerge","FormMessage","FormMessageList","messages","type","className","props","length","typeClasses","error","info","warning","map","message"],"sources":["../../../../src/ui/components/form-message/message-list.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport type { FormMessageType } from \"./form-message.js\";\nimport { FormMessage } from \"./form-message.js\";\n\ninterface FormMessageListProps {\n  messages: string[];\n  type?: FormMessageType;\n  className?: string;\n}\n\nexport const FormMessageList: React.FC<FormMessageListProps> = ({\n  messages,\n  type = \"info\",\n  className,\n  ...props\n}) => {\n  if (messages.length === 0) {\n    return null;\n  }\n\n  if (messages.length === 1) {\n    return (\n      <FormMessage type={type} {...props}>\n        {messages[0]}\n      </FormMessage>\n    );\n  }\n\n  const typeClasses: Record<FormMessageType, string> = {\n    error: \"before:bg-destructive\",\n    info: \"before:bg-info\",\n    warning: \"before:bg-warning\",\n  };\n\n  return (\n    <ul className={twMerge(\"flex flex-col gap-1\", className)} {...props}>\n      {messages.map((message) => (\n        <FormMessage\n          key={message}\n          as=\"li\"\n          type={type}\n          className={twMerge(\n            // Layout\n            \"relative pl-4\",\n            // Visual styles\n            \"before:absolute before:top-[0.4em] before:left-0 before:size-2 before:rounded-full\",\n            typeClasses[type],\n          )}\n        >\n          {message}\n        </FormMessage>\n      ))}\n    </ul>\n  );\n};\n"],"mappings":";;;;AAUA,MAAaE,mBAAmD,EAC9DC,UACAC,OAAO,QACPC,WACA,GAAGC,YACC;AACJ,KAAIH,SAASI,WAAW,EACtB,QAAO;AAGT,KAAIJ,SAASI,WAAW,EACtB,QACE,oBAAC,aAAD;EAAmBH;EAAM,GAAIE;YAC1BH,SAAS;EACE,CAAA;CAIlB,MAAMK,cAA+C;EACnDC,OAAO;EACPC,MAAM;EACNC,SAAS;EACV;AAED,QACE,oBAAC,MAAD;EAAI,WAAWX,QAAQ,uBAAuBK,UAAU;EAAE,GAAIC;YAC3DH,SAASS,KAAKC,YACb,oBAAC,aAAD;GAEE,IAAG;GACGT;GACN,WAAWJ,QAET,iBAEA,sFACAQ,YAAYJ,MACb;aAEAS;GAEJ,EAbQA,QAaR,CAAC;EACC,CAAA"}

package/dist/ui/components/id-autocomplete/id-autocomplete-input-container.js

@@ -73,14 +73,14 @@ const IdAutocompleteInputContainer = /* @__PURE__ */ React.forwardRef(({ id, nam
 				isLoading && /* @__PURE__ */ jsx(Icon, {
 					name: "Reload",
 					size: 16,
-					className: twMerge("animate-spin text-gray-500 dark:text-slate-400")
+					className: twMerge("animate-spin text-muted-foreground")
 				}),
 				haveFetchError && /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(Tooltip, {
 					content: "Network error!",
 					children: /* @__PURE__ */ jsx(Icon, {
 						name: "Error",
 						size: 16,
-						className: twMerge("text-red-900 dark:text-red-400")
+						className: twMerge("text-destructive")
 					})
 				}) }),
 				selectedOption && !isLoading && !haveFetchError && /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(Tooltip, {
@@ -101,7 +101,7 @@ const IdAutocompleteInputContainer = /* @__PURE__ */ React.forwardRef(({ id, nam
 						children: /* @__PURE__ */ jsx(Icon, {
 							name: "Copy",
 							size: 16,
-							className: twMerge("text-gray-500 dark:text-slate-400")
+							className: twMerge("text-muted-foreground")
 						})
 					})
 				}) })

package/dist/ui/components/id-autocomplete/id-autocomplete-input-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"id-autocomplete-input-container.js","names":["Icon","twMerge","sharedValueTransformers","Command","CommandPrimitive","React","useMemo","useState","useMediaQuery","Input","Tooltip","TooltipProvider","ValueTransformer","IdAutocompleteInputContainer","forwardRef","id","name","value","className","isLoading","haveFetchError","disabled","onChange","onBlur","onClick","selectedOption","optionsLength","handleOpenChange","onKeyDown","onMouseDown","placeholder","hasError","label","required","isPopoverOpen","maxLength","handlePaste","onPaste","props","ref","hasCopied","setHasCopied","hasHover","transformers","trimOnBlur","trimOnEnter","e","input","target","isOptionsRelatedKey","includes","key","preventDefault","stopPropagation","contains","document","activeElement","requestAnimationFrame","select","undefined","navigator","clipboard","writeText","then","setTimeout","catch","error","console"],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete-input-container.tsx"],"sourcesContent":["import type { TransformerType } from \"#design-system\";\nimport { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { sharedValueTransformers } from \"#design-system/ui/lib\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport React, { useMemo, useState } from \"react\";\nimport { useMediaQuery } from \"usehooks-ts\";\nimport type { InputBaseProps } from \"../../types.js\";\nimport { Input } from \"../input/input.js\";\nimport { Tooltip, TooltipProvider } from \"../tooltip/tooltip.js\";\nimport { ValueTransformer } from \"../value-transformer/value-transformer.js\";\nimport type { IdAutocompleteOption } from \"./types.js\";\n\ninterface IdAutocompleteInputContainerProps extends Omit<\n  InputBaseProps<string>,\n  \"defaultValue\" | \"errors\" | \"warnings\"\n> {\n  isLoading: boolean;\n  haveFetchError: boolean;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;\n  selectedOption?: IdAutocompleteOption;\n  optionsLength: number;\n  handleOpenChange?: (open: boolean) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  onMouseDown?: (e: React.MouseEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  hasError: boolean;\n  isPopoverOpen: boolean;\n  maxLength?: number;\n  handlePaste?: (e: React.ClipboardEvent<HTMLInputElement>) => void;\n  onPaste?: (e: React.ClipboardEvent<HTMLInputElement>) => void;\n}\n\nconst IdAutocompleteInputContainer = React.forwardRef<\n  HTMLInputElement,\n  IdAutocompleteInputContainerProps\n>(\n  (\n    {\n      id,\n      name,\n      value,\n      className,\n      isLoading,\n      haveFetchError,\n      disabled,\n      onChange,\n      onBlur,\n      onClick,\n      selectedOption,\n      optionsLength,\n      handleOpenChange,\n      onKeyDown,\n      onMouseDown,\n      placeholder,\n      hasError,\n      label,\n      required,\n      isPopoverOpen,\n      maxLength,\n      handlePaste,\n      onPaste,\n      ...props\n    },\n    ref,\n  ) => {\n    const [hasCopied, setHasCopied] = useState(false);\n    const hasHover = useMediaQuery(\"(hover: hover) and (pointer: fine)\");\n\n    const transformers: TransformerType = useMemo(\n      () => [\n        sharedValueTransformers.trimOnBlur(),\n        sharedValueTransformers.trimOnEnter(),\n      ],\n      [],\n    );\n\n    return (\n      <div className={twMerge(\"group relative\")}>\n        <ValueTransformer transformers={transformers}>\n          <CommandPrimitive.Input asChild>\n            <Input\n              id={id}\n              name={name}\n              value={value}\n              className={twMerge(\"pr-9\", className)}\n              disabled={disabled}\n              onChange={onChange}\n              onBlur={onBlur}\n              onClick={(e) => {\n                const input = e.target as HTMLInputElement;\n                if (\n                  !(isLoading || haveFetchError) &&\n                  !selectedOption &&\n                  input.value !== \"\"\n                ) {\n                  handleOpenChange?.(true);\n                }\n                onClick?.(e);\n              }}\n              onKeyDown={(e) => {\n                onKeyDown?.(e);\n                const isOptionsRelatedKey = [\n                  \"ArrowUp\",\n                  \"ArrowDown\",\n                  \"Enter\",\n                ].includes(e.key);\n\n                if (e.key === \"Enter\" && isPopoverOpen && optionsLength === 0) {\n                  handleOpenChange?.(false);\n                  e.preventDefault();\n                  return;\n                }\n                if (\n                  !(isOptionsRelatedKey && isPopoverOpen && optionsLength > 0)\n                ) {\n                  e.stopPropagation();\n                }\n              }}\n              onMouseDown={(e) => {\n                const input = e.target as HTMLInputElement;\n                if (!input.contains(document.activeElement)) {\n                  // wait for the next tick to ensure the focus occurs first\n                  requestAnimationFrame(() => {\n                    input.select();\n                  });\n                }\n                onMouseDown?.(e);\n              }}\n              onPaste={(e) => {\n                handlePaste?.(e);\n                onPaste?.(e);\n              }}\n              placeholder={placeholder}\n              aria-invalid={hasError}\n              aria-label={!label ? \"Id Autocomplete\" : undefined}\n              aria-required={required}\n              aria-expanded={isPopoverOpen}\n              maxLength={maxLength}\n              {...props}\n              ref={ref}\n            />\n          </CommandPrimitive.Input>\n        </ValueTransformer>\n        <div\n          className={twMerge(\n            \"absolute top-1/2 right-3 flex size-4 -translate-y-1/2 items-center\",\n            !isLoading &&\n              !haveFetchError &&\n              !selectedOption &&\n              \"pointer-events-none\",\n          )}\n        >\n          {isLoading && (\n            <Icon\n              name=\"Reload\"\n              size={16}\n              className={twMerge(\n                \"animate-spin text-gray-500 dark:text-slate-400\",\n              )}\n            />\n          )}\n          {haveFetchError && (\n            <TooltipProvider>\n              <Tooltip content=\"Network error!\">\n                <Icon\n                  name=\"Error\"\n                  size={16}\n                  className={twMerge(\"text-red-900 dark:text-red-400\")}\n                />\n              </Tooltip>\n            </TooltipProvider>\n          )}\n          {selectedOption && !isLoading && !haveFetchError && (\n            <TooltipProvider>\n              <Tooltip content=\"Copied!\" open={hasCopied} triggerAsChild>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    navigator.clipboard\n                      .writeText(selectedOption.value)\n                      .then(() => {\n                        setHasCopied(true);\n                        setTimeout(() => setHasCopied(false), 2000);\n                      })\n                      .catch((error) => {\n                        console.error(\"Failed to copy value:\", error);\n                      });\n                  }}\n                  className={twMerge(\n                    \"focus-visible:outline-none [&_svg]:pointer-events-none\",\n                    hasHover &&\n                      \"opacity-0 transition-opacity duration-500 group-hover:opacity-100\",\n                  )}\n                >\n                  <Icon\n                    name=\"Copy\"\n                    size={16}\n                    className={twMerge(\"text-gray-500 dark:text-slate-400\")}\n                  />\n                </button>\n              </Tooltip>\n            </TooltipProvider>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nexport { IdAutocompleteInputContainer, type IdAutocompleteInputContainerProps };\n"],"mappings":"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"}
+{"version":3,"file":"id-autocomplete-input-container.js","names":["Icon","twMerge","sharedValueTransformers","Command","CommandPrimitive","React","useMemo","useState","useMediaQuery","Input","Tooltip","TooltipProvider","ValueTransformer","IdAutocompleteInputContainer","forwardRef","id","name","value","className","isLoading","haveFetchError","disabled","onChange","onBlur","onClick","selectedOption","optionsLength","handleOpenChange","onKeyDown","onMouseDown","placeholder","hasError","label","required","isPopoverOpen","maxLength","handlePaste","onPaste","props","ref","hasCopied","setHasCopied","hasHover","transformers","trimOnBlur","trimOnEnter","e","input","target","isOptionsRelatedKey","includes","key","preventDefault","stopPropagation","contains","document","activeElement","requestAnimationFrame","select","undefined","navigator","clipboard","writeText","then","setTimeout","catch","error","console"],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete-input-container.tsx"],"sourcesContent":["import type { TransformerType } from \"#design-system\";\nimport { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { sharedValueTransformers } from \"#design-system/ui/lib\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport React, { useMemo, useState } from \"react\";\nimport { useMediaQuery } from \"usehooks-ts\";\nimport type { InputBaseProps } from \"../../types.js\";\nimport { Input } from \"../input/input.js\";\nimport { Tooltip, TooltipProvider } from \"../tooltip/tooltip.js\";\nimport { ValueTransformer } from \"../value-transformer/value-transformer.js\";\nimport type { IdAutocompleteOption } from \"./types.js\";\n\ninterface IdAutocompleteInputContainerProps extends Omit<\n  InputBaseProps<string>,\n  \"defaultValue\" | \"errors\" | \"warnings\"\n> {\n  isLoading: boolean;\n  haveFetchError: boolean;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;\n  selectedOption?: IdAutocompleteOption;\n  optionsLength: number;\n  handleOpenChange?: (open: boolean) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  onMouseDown?: (e: React.MouseEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  hasError: boolean;\n  isPopoverOpen: boolean;\n  maxLength?: number;\n  handlePaste?: (e: React.ClipboardEvent<HTMLInputElement>) => void;\n  onPaste?: (e: React.ClipboardEvent<HTMLInputElement>) => void;\n}\n\nconst IdAutocompleteInputContainer = React.forwardRef<\n  HTMLInputElement,\n  IdAutocompleteInputContainerProps\n>(\n  (\n    {\n      id,\n      name,\n      value,\n      className,\n      isLoading,\n      haveFetchError,\n      disabled,\n      onChange,\n      onBlur,\n      onClick,\n      selectedOption,\n      optionsLength,\n      handleOpenChange,\n      onKeyDown,\n      onMouseDown,\n      placeholder,\n      hasError,\n      label,\n      required,\n      isPopoverOpen,\n      maxLength,\n      handlePaste,\n      onPaste,\n      ...props\n    },\n    ref,\n  ) => {\n    const [hasCopied, setHasCopied] = useState(false);\n    const hasHover = useMediaQuery(\"(hover: hover) and (pointer: fine)\");\n\n    const transformers: TransformerType = useMemo(\n      () => [\n        sharedValueTransformers.trimOnBlur(),\n        sharedValueTransformers.trimOnEnter(),\n      ],\n      [],\n    );\n\n    return (\n      <div className={twMerge(\"group relative\")}>\n        <ValueTransformer transformers={transformers}>\n          <CommandPrimitive.Input asChild>\n            <Input\n              id={id}\n              name={name}\n              value={value}\n              className={twMerge(\"pr-9\", className)}\n              disabled={disabled}\n              onChange={onChange}\n              onBlur={onBlur}\n              onClick={(e) => {\n                const input = e.target as HTMLInputElement;\n                if (\n                  !(isLoading || haveFetchError) &&\n                  !selectedOption &&\n                  input.value !== \"\"\n                ) {\n                  handleOpenChange?.(true);\n                }\n                onClick?.(e);\n              }}\n              onKeyDown={(e) => {\n                onKeyDown?.(e);\n                const isOptionsRelatedKey = [\n                  \"ArrowUp\",\n                  \"ArrowDown\",\n                  \"Enter\",\n                ].includes(e.key);\n\n                if (e.key === \"Enter\" && isPopoverOpen && optionsLength === 0) {\n                  handleOpenChange?.(false);\n                  e.preventDefault();\n                  return;\n                }\n                if (\n                  !(isOptionsRelatedKey && isPopoverOpen && optionsLength > 0)\n                ) {\n                  e.stopPropagation();\n                }\n              }}\n              onMouseDown={(e) => {\n                const input = e.target as HTMLInputElement;\n                if (!input.contains(document.activeElement)) {\n                  // wait for the next tick to ensure the focus occurs first\n                  requestAnimationFrame(() => {\n                    input.select();\n                  });\n                }\n                onMouseDown?.(e);\n              }}\n              onPaste={(e) => {\n                handlePaste?.(e);\n                onPaste?.(e);\n              }}\n              placeholder={placeholder}\n              aria-invalid={hasError}\n              aria-label={!label ? \"Id Autocomplete\" : undefined}\n              aria-required={required}\n              aria-expanded={isPopoverOpen}\n              maxLength={maxLength}\n              {...props}\n              ref={ref}\n            />\n          </CommandPrimitive.Input>\n        </ValueTransformer>\n        <div\n          className={twMerge(\n            \"absolute top-1/2 right-3 flex size-4 -translate-y-1/2 items-center\",\n            !isLoading &&\n              !haveFetchError &&\n              !selectedOption &&\n              \"pointer-events-none\",\n          )}\n        >\n          {isLoading && (\n            <Icon\n              name=\"Reload\"\n              size={16}\n              className={twMerge(\"animate-spin text-muted-foreground\")}\n            />\n          )}\n          {haveFetchError && (\n            <TooltipProvider>\n              <Tooltip content=\"Network error!\">\n                <Icon\n                  name=\"Error\"\n                  size={16}\n                  className={twMerge(\"text-destructive\")}\n                />\n              </Tooltip>\n            </TooltipProvider>\n          )}\n          {selectedOption && !isLoading && !haveFetchError && (\n            <TooltipProvider>\n              <Tooltip content=\"Copied!\" open={hasCopied} triggerAsChild>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    navigator.clipboard\n                      .writeText(selectedOption.value)\n                      .then(() => {\n                        setHasCopied(true);\n                        setTimeout(() => setHasCopied(false), 2000);\n                      })\n                      .catch((error) => {\n                        console.error(\"Failed to copy value:\", error);\n                      });\n                  }}\n                  className={twMerge(\n                    \"focus-visible:outline-none [&_svg]:pointer-events-none\",\n                    hasHover &&\n                      \"opacity-0 transition-opacity duration-500 group-hover:opacity-100\",\n                  )}\n                >\n                  <Icon\n                    name=\"Copy\"\n                    size={16}\n                    className={twMerge(\"text-muted-foreground\")}\n                  />\n                </button>\n              </Tooltip>\n            </TooltipProvider>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nexport { IdAutocompleteInputContainer, type IdAutocompleteInputContainerProps };\n"],"mappings":"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"}

package/dist/ui/components/id-autocomplete/id-autocomplete-list-option.js

@@ -7,7 +7,7 @@ const IconRenderer = ({ customIcon, asPlaceholder }) => {
 	if (typeof customIcon === "string") return /* @__PURE__ */ jsx(Icon, {
 		name: customIcon,
 		size: 24,
-		className: twMerge("shrink-0", asPlaceholder ? "text-gray-400 dark:text-slate-500" : "text-gray-900 dark:text-slate-50")
+		className: twMerge("shrink-0", asPlaceholder ? "text-muted-foreground" : "text-foreground")
 	});
 	if (/* @__PURE__ */ React.isValidElement(customIcon)) return /* @__PURE__ */ jsx("div", {
 		className: "size-6 shrink-0 overflow-hidden",
@@ -21,19 +21,19 @@ const ReloadButton = ({ isLoadingSelectedOption, handleFetchSelectedOption, isFe
 	onClick: () => {
 		if (!isLoadingSelectedOption && !isFetchSelectedOptionSync) handleFetchSelectedOption(value);
 	},
-	className: twMerge("mt-0.5 focus-visible:outline-none", "disabled:pointer-events-none [&_svg]:pointer-events-none"),
+	className: twMerge("mt-0.5 focus-visible:outline-none", "disabled:disabled-effect [&_svg]:pointer-events-none"),
 	"aria-label": isLoadingSelectedOption ? "Loading" : isFetchSelectedOptionSync ? "Success" : "Reload",
 	children: /* @__PURE__ */ jsx(Icon, {
 		name: isFetchSelectedOptionSync ? "Checkmark" : "Reload",
 		size: 16,
-		className: twMerge("text-gray-500 dark:text-slate-400", isLoadingSelectedOption && "animate-spin", isFetchSelectedOptionSync && "animate-fade-in duration-500")
+		className: twMerge("text-muted-foreground", isLoadingSelectedOption && "animate-spin", isFetchSelectedOptionSync && "animate-fade-in duration-500")
 	})
 }) });
 const IdAutocompleteListOption = ({ variant = "withValue", icon, title = "Title not available", path = "Path not available", value, description = "Description not available", asPlaceholder, showValue = true, isLoadingSelectedOption, handleFetchSelectedOption, isFetchSelectedOptionSync, className, placeholderIcon = "PowerhouseLogoSmall", ...extraProps }) => {
 	const renderWithValue = () => /* @__PURE__ */ jsx("div", {
 		className: twMerge("flex w-full items-center"),
 		children: /* @__PURE__ */ jsx("span", {
-			className: twMerge("truncate text-xs/5", asPlaceholder ? "text-gray-400 dark:text-slate-500" : "text-gray-500 dark:text-slate-400"),
+			className: twMerge("truncate text-xs/5", asPlaceholder ? "text-muted-foreground" : "text-muted-foreground"),
 			children: value
 		})
 	});
@@ -50,16 +50,16 @@ const IdAutocompleteListOption = ({ variant = "withValue", icon, title = "Title
 					/* @__PURE__ */ jsxs("div", {
 						className: twMerge("flex min-w-0 grow flex-col gap-[-2px]"),
 						children: [/* @__PURE__ */ jsx("span", {
-							className: twMerge("truncate text-sm/5 font-bold", asPlaceholder ? "text-gray-400 dark:text-slate-500" : "text-gray-900 dark:text-slate-50"),
+							className: twMerge("truncate text-sm/5 font-bold", asPlaceholder ? "text-muted-foreground" : "text-foreground"),
 							children: title
 						}), !showValue && typeof path === "object" ? /* @__PURE__ */ jsx("a", {
 							href: path.url,
 							target: "_blank",
 							rel: "noopener noreferrer",
-							className: twMerge("truncate text-xs/5 text-blue-900 hover:underline focus-visible:outline-none dark:text-blue-100"),
+							className: twMerge("truncate text-xs/5 text-info hover:underline focus-visible:outline-none"),
 							children: path.text
 						}) : /* @__PURE__ */ jsx("span", {
-							className: twMerge("truncate text-xs/5", asPlaceholder ? "text-gray-400 dark:text-slate-500" : "text-gray-500 dark:text-slate-400"),
+							className: twMerge("truncate text-xs/5", asPlaceholder ? "text-muted-foreground" : "text-muted-foreground"),
 							children: typeof path === "object" ? path.text : path
 						})]
 					}),
@@ -74,21 +74,21 @@ const IdAutocompleteListOption = ({ variant = "withValue", icon, title = "Title
 			showValue && /* @__PURE__ */ jsx("div", {
 				className: twMerge("flex max-w-full items-center"),
 				children: /* @__PURE__ */ jsx("span", {
-					className: twMerge("truncate text-xs/5", asPlaceholder ? "text-gray-400 dark:text-slate-500" : "text-gray-500 dark:text-slate-400"),
+					className: twMerge("truncate text-xs/5", asPlaceholder ? "text-muted-foreground" : "text-muted-foreground"),
 					children: value
 				})
 			}),
 			showDescription && /* @__PURE__ */ jsx("div", {
 				className: twMerge("flex flex-col"),
 				children: /* @__PURE__ */ jsx("p", {
-					className: twMerge("line-clamp-2 text-xs/5", asPlaceholder ? "text-gray-400 dark:text-slate-500" : "text-gray-900 dark:text-slate-50"),
+					className: twMerge("line-clamp-2 text-xs/5", asPlaceholder ? "text-muted-foreground" : "text-foreground"),
 					children: description
 				})
 			}),
 			showDescription && "agentType" in extraProps && typeof extraProps.agentType === "string" && /* @__PURE__ */ jsx("div", {
 				className: twMerge("flex max-w-full items-center justify-end"),
 				children: /* @__PURE__ */ jsx("span", {
-					className: twMerge("truncate text-xs/5", asPlaceholder ? "text-gray-400 dark:text-slate-500" : "text-gray-500 dark:text-slate-400"),
+					className: twMerge("truncate text-xs/5", asPlaceholder ? "text-muted-foreground" : "text-muted-foreground"),
 					children: extraProps.agentType
 				})
 			})

package/dist/ui/components/id-autocomplete/id-autocomplete-list-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"id-autocomplete-list-option.js","names":["Icon","twMerge","React","IconRenderer","customIcon","asPlaceholder","isValidElement","ReloadButton","isLoadingSelectedOption","handleFetchSelectedOption","isFetchSelectedOptionSync","value","IdAutocompleteListOption","variant","icon","title","path","description","showValue","className","placeholderIcon","extraProps","renderWithValue","renderWithValueTitleAndDescription","showDescription","url","text","agentType"],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete-list-option.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport React from \"react\";\nimport type { IdAutocompleteOption, IdAutocompleteProps } from \"./types.js\";\n\nconst IconRenderer: React.FC<{\n  customIcon?: IconName | React.ReactElement;\n  asPlaceholder?: boolean;\n}> = ({ customIcon, asPlaceholder }) => {\n  if (typeof customIcon === \"string\") {\n    return (\n      <Icon\n        name={customIcon}\n        size={24}\n        className={twMerge(\n          \"shrink-0\",\n          asPlaceholder\n            ? \"text-gray-400 dark:text-slate-500\"\n            : \"text-gray-900 dark:text-slate-50\",\n        )}\n      />\n    );\n  }\n  if (React.isValidElement(customIcon)) {\n    return <div className=\"size-6 shrink-0 overflow-hidden\">{customIcon}</div>;\n  }\n  return null;\n};\n\nconst ReloadButton: React.FC<{\n  isLoadingSelectedOption?: boolean;\n  handleFetchSelectedOption: (value: string) => void;\n  isFetchSelectedOptionSync?: boolean;\n  value: string;\n}> = ({\n  isLoadingSelectedOption,\n  handleFetchSelectedOption,\n  isFetchSelectedOptionSync,\n  value,\n}) => (\n  <div>\n    <button\n      type=\"button\"\n      disabled={isLoadingSelectedOption || isFetchSelectedOptionSync}\n      onClick={() => {\n        if (!isLoadingSelectedOption && !isFetchSelectedOptionSync) {\n          handleFetchSelectedOption(value);\n        }\n      }}\n      className={twMerge(\n        \"mt-0.5 focus-visible:outline-none\",\n        \"disabled:pointer-events-none [&_svg]:pointer-events-none\",\n      )}\n      aria-label={\n        isLoadingSelectedOption\n          ? \"Loading\"\n          : isFetchSelectedOptionSync\n            ? \"Success\"\n            : \"Reload\"\n      }\n    >\n      <Icon\n        name={isFetchSelectedOptionSync ? \"Checkmark\" : \"Reload\"}\n        size={16}\n        className={twMerge(\n          \"text-gray-500 dark:text-slate-400\",\n          isLoadingSelectedOption && \"animate-spin\",\n          isFetchSelectedOptionSync && \"animate-fade-in duration-500\",\n        )}\n      />\n    </button>\n  </div>\n);\n\ntype IdAutocompleteListOptionProps = {\n  variant: IdAutocompleteProps[\"variant\"];\n  asPlaceholder?: boolean;\n  showValue?: boolean;\n  isLoadingSelectedOption?: boolean;\n  handleFetchSelectedOption?: (value: string) => void;\n  isFetchSelectedOptionSync?: boolean;\n  className?: string;\n  placeholderIcon?: IconName | React.ReactElement;\n} & IdAutocompleteOption<Record<string, unknown>>;\n\nconst IdAutocompleteListOption: React.FC<IdAutocompleteListOptionProps> = ({\n  variant = \"withValue\",\n  icon,\n  title = \"Title not available\",\n  path = \"Path not available\",\n  value,\n  description = \"Description not available\",\n  asPlaceholder,\n  showValue = true,\n  isLoadingSelectedOption,\n  handleFetchSelectedOption,\n  isFetchSelectedOptionSync,\n  className,\n  placeholderIcon = \"PowerhouseLogoSmall\",\n  ...extraProps\n}) => {\n  const renderWithValue = () => (\n    <div className={twMerge(\"flex w-full items-center\")}>\n      <span\n        className={twMerge(\n          \"truncate text-xs/5\",\n          asPlaceholder\n            ? \"text-gray-400 dark:text-slate-500\"\n            : \"text-gray-500 dark:text-slate-400\",\n        )}\n      >\n        {value}\n      </span>\n    </div>\n  );\n\n  const renderWithValueTitleAndDescription = (showDescription = true) => (\n    <div className={twMerge(\"flex w-full flex-col gap-1\")}>\n      <div className={twMerge(\"flex gap-2\")}>\n        <IconRenderer\n          customIcon={asPlaceholder ? placeholderIcon : icon}\n          asPlaceholder={asPlaceholder}\n        />\n        <div className={twMerge(\"flex min-w-0 grow flex-col gap-[-2px]\")}>\n          <span\n            className={twMerge(\n              \"truncate text-sm/5 font-bold\",\n              asPlaceholder\n                ? \"text-gray-400 dark:text-slate-500\"\n                : \"text-gray-900 dark:text-slate-50\",\n            )}\n          >\n            {title}\n          </span>\n          {!showValue && typeof path === \"object\" ? (\n            <a\n              href={path.url}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className={twMerge(\n                \"truncate text-xs/5 text-blue-900 hover:underline focus-visible:outline-none dark:text-blue-100\",\n              )}\n            >\n              {path.text}\n            </a>\n          ) : (\n            <span\n              className={twMerge(\n                \"truncate text-xs/5\",\n                asPlaceholder\n                  ? \"text-gray-400 dark:text-slate-500\"\n                  : \"text-gray-500 dark:text-slate-400\",\n              )}\n            >\n              {typeof path === \"object\" ? path.text : path}\n            </span>\n          )}\n        </div>\n        {asPlaceholder === false && handleFetchSelectedOption && (\n          <ReloadButton\n            isLoadingSelectedOption={isLoadingSelectedOption}\n            handleFetchSelectedOption={handleFetchSelectedOption}\n            isFetchSelectedOptionSync={isFetchSelectedOptionSync}\n            value={value}\n          />\n        )}\n      </div>\n      {showValue && (\n        <div className={twMerge(\"flex max-w-full items-center\")}>\n          <span\n            className={twMerge(\n              \"truncate text-xs/5\",\n              asPlaceholder\n                ? \"text-gray-400 dark:text-slate-500\"\n                : \"text-gray-500 dark:text-slate-400\",\n            )}\n          >\n            {value}\n          </span>\n        </div>\n      )}\n      {showDescription && (\n        <div className={twMerge(\"flex flex-col\")}>\n          <p\n            className={twMerge(\n              \"line-clamp-2 text-xs/5\",\n              asPlaceholder\n                ? \"text-gray-400 dark:text-slate-500\"\n                : \"text-gray-900 dark:text-slate-50\",\n            )}\n          >\n            {description}\n          </p>\n        </div>\n      )}\n      {showDescription &&\n        \"agentType\" in extraProps &&\n        typeof extraProps.agentType === \"string\" && (\n          <div className={twMerge(\"flex max-w-full items-center justify-end\")}>\n            <span\n              className={twMerge(\n                \"truncate text-xs/5\",\n                asPlaceholder\n                  ? \"text-gray-400 dark:text-slate-500\"\n                  : \"text-gray-500 dark:text-slate-400\",\n              )}\n            >\n              {extraProps.agentType}\n            </span>\n          </div>\n        )}\n    </div>\n  );\n\n  return (\n    <div\n      className={twMerge(\n        \"w-full max-w-full rounded-md bg-transparent px-3 pb-2\",\n        variant === \"withValue\" ? \"pt-2\" : \"pt-3\",\n        className,\n      )}\n    >\n      {variant === \"withValue\" && renderWithValue()}\n      {variant === \"withValueAndTitle\" &&\n        renderWithValueTitleAndDescription(false)}\n      {variant === \"withValueTitleAndDescription\" &&\n        renderWithValueTitleAndDescription()}\n    </div>\n  );\n};\n\nexport { IdAutocompleteListOption, type IdAutocompleteListOptionProps };\n"],"mappings":"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"}
+{"version":3,"file":"id-autocomplete-list-option.js","names":["Icon","twMerge","React","IconRenderer","customIcon","asPlaceholder","isValidElement","ReloadButton","isLoadingSelectedOption","handleFetchSelectedOption","isFetchSelectedOptionSync","value","IdAutocompleteListOption","variant","icon","title","path","description","showValue","className","placeholderIcon","extraProps","renderWithValue","renderWithValueTitleAndDescription","showDescription","url","text","agentType"],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete-list-option.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport React from \"react\";\nimport type { IdAutocompleteOption, IdAutocompleteProps } from \"./types.js\";\n\nconst IconRenderer: React.FC<{\n  customIcon?: IconName | React.ReactElement;\n  asPlaceholder?: boolean;\n}> = ({ customIcon, asPlaceholder }) => {\n  if (typeof customIcon === \"string\") {\n    return (\n      <Icon\n        name={customIcon}\n        size={24}\n        className={twMerge(\n          \"shrink-0\",\n          asPlaceholder ? \"text-muted-foreground\" : \"text-foreground\",\n        )}\n      />\n    );\n  }\n  if (React.isValidElement(customIcon)) {\n    return <div className=\"size-6 shrink-0 overflow-hidden\">{customIcon}</div>;\n  }\n  return null;\n};\n\nconst ReloadButton: React.FC<{\n  isLoadingSelectedOption?: boolean;\n  handleFetchSelectedOption: (value: string) => void;\n  isFetchSelectedOptionSync?: boolean;\n  value: string;\n}> = ({\n  isLoadingSelectedOption,\n  handleFetchSelectedOption,\n  isFetchSelectedOptionSync,\n  value,\n}) => (\n  <div>\n    <button\n      type=\"button\"\n      disabled={isLoadingSelectedOption || isFetchSelectedOptionSync}\n      onClick={() => {\n        if (!isLoadingSelectedOption && !isFetchSelectedOptionSync) {\n          handleFetchSelectedOption(value);\n        }\n      }}\n      className={twMerge(\n        \"mt-0.5 focus-visible:outline-none\",\n        \"disabled:disabled-effect [&_svg]:pointer-events-none\",\n      )}\n      aria-label={\n        isLoadingSelectedOption\n          ? \"Loading\"\n          : isFetchSelectedOptionSync\n            ? \"Success\"\n            : \"Reload\"\n      }\n    >\n      <Icon\n        name={isFetchSelectedOptionSync ? \"Checkmark\" : \"Reload\"}\n        size={16}\n        className={twMerge(\n          \"text-muted-foreground\",\n          isLoadingSelectedOption && \"animate-spin\",\n          isFetchSelectedOptionSync && \"animate-fade-in duration-500\",\n        )}\n      />\n    </button>\n  </div>\n);\n\ntype IdAutocompleteListOptionProps = {\n  variant: IdAutocompleteProps[\"variant\"];\n  asPlaceholder?: boolean;\n  showValue?: boolean;\n  isLoadingSelectedOption?: boolean;\n  handleFetchSelectedOption?: (value: string) => void;\n  isFetchSelectedOptionSync?: boolean;\n  className?: string;\n  placeholderIcon?: IconName | React.ReactElement;\n} & IdAutocompleteOption<Record<string, unknown>>;\n\nconst IdAutocompleteListOption: React.FC<IdAutocompleteListOptionProps> = ({\n  variant = \"withValue\",\n  icon,\n  title = \"Title not available\",\n  path = \"Path not available\",\n  value,\n  description = \"Description not available\",\n  asPlaceholder,\n  showValue = true,\n  isLoadingSelectedOption,\n  handleFetchSelectedOption,\n  isFetchSelectedOptionSync,\n  className,\n  placeholderIcon = \"PowerhouseLogoSmall\",\n  ...extraProps\n}) => {\n  const renderWithValue = () => (\n    <div className={twMerge(\"flex w-full items-center\")}>\n      <span\n        className={twMerge(\n          \"truncate text-xs/5\",\n          asPlaceholder ? \"text-muted-foreground\" : \"text-muted-foreground\",\n        )}\n      >\n        {value}\n      </span>\n    </div>\n  );\n\n  const renderWithValueTitleAndDescription = (showDescription = true) => (\n    <div className={twMerge(\"flex w-full flex-col gap-1\")}>\n      <div className={twMerge(\"flex gap-2\")}>\n        <IconRenderer\n          customIcon={asPlaceholder ? placeholderIcon : icon}\n          asPlaceholder={asPlaceholder}\n        />\n        <div className={twMerge(\"flex min-w-0 grow flex-col gap-[-2px]\")}>\n          <span\n            className={twMerge(\n              \"truncate text-sm/5 font-bold\",\n              asPlaceholder ? \"text-muted-foreground\" : \"text-foreground\",\n            )}\n          >\n            {title}\n          </span>\n          {!showValue && typeof path === \"object\" ? (\n            <a\n              href={path.url}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className={twMerge(\n                \"truncate text-xs/5 text-info hover:underline focus-visible:outline-none\",\n              )}\n            >\n              {path.text}\n            </a>\n          ) : (\n            <span\n              className={twMerge(\n                \"truncate text-xs/5\",\n                asPlaceholder\n                  ? \"text-muted-foreground\"\n                  : \"text-muted-foreground\",\n              )}\n            >\n              {typeof path === \"object\" ? path.text : path}\n            </span>\n          )}\n        </div>\n        {asPlaceholder === false && handleFetchSelectedOption && (\n          <ReloadButton\n            isLoadingSelectedOption={isLoadingSelectedOption}\n            handleFetchSelectedOption={handleFetchSelectedOption}\n            isFetchSelectedOptionSync={isFetchSelectedOptionSync}\n            value={value}\n          />\n        )}\n      </div>\n      {showValue && (\n        <div className={twMerge(\"flex max-w-full items-center\")}>\n          <span\n            className={twMerge(\n              \"truncate text-xs/5\",\n              asPlaceholder ? \"text-muted-foreground\" : \"text-muted-foreground\",\n            )}\n          >\n            {value}\n          </span>\n        </div>\n      )}\n      {showDescription && (\n        <div className={twMerge(\"flex flex-col\")}>\n          <p\n            className={twMerge(\n              \"line-clamp-2 text-xs/5\",\n              asPlaceholder ? \"text-muted-foreground\" : \"text-foreground\",\n            )}\n          >\n            {description}\n          </p>\n        </div>\n      )}\n      {showDescription &&\n        \"agentType\" in extraProps &&\n        typeof extraProps.agentType === \"string\" && (\n          <div className={twMerge(\"flex max-w-full items-center justify-end\")}>\n            <span\n              className={twMerge(\n                \"truncate text-xs/5\",\n                asPlaceholder\n                  ? \"text-muted-foreground\"\n                  : \"text-muted-foreground\",\n              )}\n            >\n              {extraProps.agentType}\n            </span>\n          </div>\n        )}\n    </div>\n  );\n\n  return (\n    <div\n      className={twMerge(\n        \"w-full max-w-full rounded-md bg-transparent px-3 pb-2\",\n        variant === \"withValue\" ? \"pt-2\" : \"pt-3\",\n        className,\n      )}\n    >\n      {variant === \"withValue\" && renderWithValue()}\n      {variant === \"withValueAndTitle\" &&\n        renderWithValueTitleAndDescription(false)}\n      {variant === \"withValueTitleAndDescription\" &&\n        renderWithValueTitleAndDescription()}\n    </div>\n  );\n};\n\nexport { IdAutocompleteListOption, type IdAutocompleteListOptionProps };\n"],"mappings":"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"}

package/dist/ui/components/id-autocomplete/id-autocomplete-list.js

@@ -44,7 +44,7 @@ const IdAutocompleteList = ({ variant, commandListRef, selectedValue, options =
 				return /* @__PURE__ */ jsx(CommandItem, {
 					value: opt.value,
 					onSelect: () => toggleOption?.(opt.value),
-					className: twMerge("h-full cursor-pointer border-y-0 p-0", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-slate-900"),
+					className: twMerge("h-full cursor-pointer border-y-0 p-0", "data-[selected=true]:bg-accent"),
 					role: "option",
 					"aria-selected": isSelected,
 					children: renderOption ? renderOption(opt, {

package/dist/ui/components/id-autocomplete/id-autocomplete-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"id-autocomplete-list.js","names":["twMerge","useCommandState","React","useEffect","CommandEmpty","CommandGroup","CommandItem","CommandList","IdAutocompleteListOption","IdAutocompleteList","variant","commandListRef","selectedValue","options","toggleOption","renderOption","previewPlaceholder","cmdkSearch","state","search","defaultOption","value","title","path","description","current","scrollTo","top","behavior","asPlaceholder","showValue","className","icon","map","opt","isSelected"],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete-list.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport { useCommandState } from \"cmdk\";\nimport React, { useEffect } from \"react\";\nimport {\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"../command/command.js\";\nimport { IdAutocompleteListOption } from \"./id-autocomplete-list-option.js\";\nimport type { IdAutocompleteOption, IdAutocompleteProps } from \"./types.js\";\n\ninterface IdAutocompleteListProps {\n  variant: IdAutocompleteProps[\"variant\"];\n  commandListRef?: React.RefObject<HTMLDivElement | null>;\n  selectedValue?: string;\n  options?: IdAutocompleteOption[];\n  toggleOption?: (value: string) => void;\n  renderOption?: (\n    option: IdAutocompleteOption,\n    displayProps?: {\n      asPlaceholder?: boolean;\n      showValue?: boolean;\n      isLoadingSelectedOption?: boolean;\n      handleFetchSelectedOption?: (value: string) => void;\n      className?: string;\n    },\n  ) => React.ReactNode;\n  previewPlaceholder?: IdAutocompleteOption;\n}\n\nconst IdAutocompleteList: React.FC<IdAutocompleteListProps> = ({\n  variant,\n  commandListRef,\n  selectedValue,\n  options = [],\n  toggleOption,\n  renderOption,\n  previewPlaceholder,\n}) => {\n  const cmdkSearch = useCommandState((state) => state.search);\n  const defaultOption: IdAutocompleteOption = previewPlaceholder || {\n    value: \"value not available\",\n    title: \"Title not available\",\n    path: \"Path not available\",\n    description: \"Description not available\",\n  };\n\n  useEffect(() => {\n    commandListRef?.current?.scrollTo({ top: 0, behavior: \"instant\" });\n  }, [commandListRef, cmdkSearch]);\n\n  return (\n    <CommandList ref={commandListRef}>\n      <CommandEmpty className={twMerge(\"h-full p-1\")}>\n        {renderOption ? (\n          renderOption(defaultOption, {\n            asPlaceholder: true,\n            showValue: true,\n            className: twMerge(\"pb-0\"),\n          })\n        ) : (\n          <IdAutocompleteListOption\n            variant={variant}\n            icon={defaultOption.icon}\n            title={defaultOption.title}\n            path={defaultOption.path}\n            value={defaultOption.value}\n            description={defaultOption.description}\n            asPlaceholder\n            className={twMerge(\"pb-0\")}\n          />\n        )}\n      </CommandEmpty>\n      <CommandGroup className={twMerge(\"px-1\")}>\n        {options.map((opt) => {\n          const isSelected = selectedValue === opt.value;\n\n          return (\n            <CommandItem\n              key={opt.value}\n              value={opt.value}\n              onSelect={() => toggleOption?.(opt.value)}\n              className={twMerge(\n                \"h-full cursor-pointer border-y-0 p-0\",\n                \"data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-slate-900\",\n              )}\n              role=\"option\"\n              aria-selected={isSelected}\n            >\n              {renderOption ? (\n                renderOption(opt, {\n                  asPlaceholder: false,\n                  showValue: true,\n                })\n              ) : (\n                <IdAutocompleteListOption variant={variant} {...opt} />\n              )}\n            </CommandItem>\n          );\n        })}\n      </CommandGroup>\n    </CommandList>\n  );\n};\n\nexport { IdAutocompleteList, type IdAutocompleteListProps };\n"],"mappings":";;;;;;;AA+BA,MAAMS,sBAAyD,EAC7DC,SACAC,gBACAC,eACAC,UAAU,EAAE,EACZC,cACAC,cACAC,yBACI;CACJ,MAAMC,aAAahB,iBAAiBiB,UAAUA,MAAMC,OAAO;CAC3D,MAAMC,gBAAsCJ,sBAAsB;EAChEK,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,aAAa;EACd;AAEDrB,iBAAgB;AACdQ,kBAAgBc,SAASC,SAAS;GAAEC,KAAK;GAAGC,UAAU;GAAW,CAAC;IACjE,CAACjB,gBAAgBM,WAAW,CAAC;AAEhC,QACE,qBAAC,aAAD;EAAa,KAAKN;YAAlB,CACE,oBAAC,cAAD;GAAc,WAAWX,QAAQ,aAAa;aAC3Ce,eACCA,aAAaK,eAAe;IAC1BS,eAAe;IACfC,WAAW;IACXC,WAAW/B,QAAQ,OAAM;IAC1B,CAAC,GAEF,oBAAC,0BAAD;IACWU;IACT,MAAMU,cAAcY;IACpB,OAAOZ,cAAcE;IACrB,MAAMF,cAAcG;IACpB,OAAOH,cAAcC;IACrB,aAAaD,cAAcI;IAC3B,eAAA;IACA,WAAWxB,QAAQ,OAAO;IAE7B,CAAA;GACW,CAAA,EACd,oBAAC,cAAD;GAAc,WAAWA,QAAQ,OAAO;aACrCa,QAAQoB,KAAKC,QAAQ;IACpB,MAAMC,aAAavB,kBAAkBsB,IAAIb;AAEzC,WACE,oBAAC,aAAD;KAEE,OAAOa,IAAIb;KACX,gBAAgBP,eAAeoB,IAAIb,MAAM;KACzC,WAAWrB,QACT,wCACA,0EACD;KACD,MAAK;KACL,iBAAemC;eAEdpB,eACCA,aAAamB,KAAK;MAChBL,eAAe;MACfC,WAAW;MACZ,CAAC,GAEF,oBAAC,0BAAD;MAAmCpB;MAAS,GAAIwB;MACjD,CAAA;KACW,EAlBPA,IAAIb,MAkBG;KAEhB;GACU,CAAA,CACF"}
+{"version":3,"file":"id-autocomplete-list.js","names":["twMerge","useCommandState","React","useEffect","CommandEmpty","CommandGroup","CommandItem","CommandList","IdAutocompleteListOption","IdAutocompleteList","variant","commandListRef","selectedValue","options","toggleOption","renderOption","previewPlaceholder","cmdkSearch","state","search","defaultOption","value","title","path","description","current","scrollTo","top","behavior","asPlaceholder","showValue","className","icon","map","opt","isSelected"],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete-list.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport { useCommandState } from \"cmdk\";\nimport React, { useEffect } from \"react\";\nimport {\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"../command/command.js\";\nimport { IdAutocompleteListOption } from \"./id-autocomplete-list-option.js\";\nimport type { IdAutocompleteOption, IdAutocompleteProps } from \"./types.js\";\n\ninterface IdAutocompleteListProps {\n  variant: IdAutocompleteProps[\"variant\"];\n  commandListRef?: React.RefObject<HTMLDivElement | null>;\n  selectedValue?: string;\n  options?: IdAutocompleteOption[];\n  toggleOption?: (value: string) => void;\n  renderOption?: (\n    option: IdAutocompleteOption,\n    displayProps?: {\n      asPlaceholder?: boolean;\n      showValue?: boolean;\n      isLoadingSelectedOption?: boolean;\n      handleFetchSelectedOption?: (value: string) => void;\n      className?: string;\n    },\n  ) => React.ReactNode;\n  previewPlaceholder?: IdAutocompleteOption;\n}\n\nconst IdAutocompleteList: React.FC<IdAutocompleteListProps> = ({\n  variant,\n  commandListRef,\n  selectedValue,\n  options = [],\n  toggleOption,\n  renderOption,\n  previewPlaceholder,\n}) => {\n  const cmdkSearch = useCommandState((state) => state.search);\n  const defaultOption: IdAutocompleteOption = previewPlaceholder || {\n    value: \"value not available\",\n    title: \"Title not available\",\n    path: \"Path not available\",\n    description: \"Description not available\",\n  };\n\n  useEffect(() => {\n    commandListRef?.current?.scrollTo({ top: 0, behavior: \"instant\" });\n  }, [commandListRef, cmdkSearch]);\n\n  return (\n    <CommandList ref={commandListRef}>\n      <CommandEmpty className={twMerge(\"h-full p-1\")}>\n        {renderOption ? (\n          renderOption(defaultOption, {\n            asPlaceholder: true,\n            showValue: true,\n            className: twMerge(\"pb-0\"),\n          })\n        ) : (\n          <IdAutocompleteListOption\n            variant={variant}\n            icon={defaultOption.icon}\n            title={defaultOption.title}\n            path={defaultOption.path}\n            value={defaultOption.value}\n            description={defaultOption.description}\n            asPlaceholder\n            className={twMerge(\"pb-0\")}\n          />\n        )}\n      </CommandEmpty>\n      <CommandGroup className={twMerge(\"px-1\")}>\n        {options.map((opt) => {\n          const isSelected = selectedValue === opt.value;\n\n          return (\n            <CommandItem\n              key={opt.value}\n              value={opt.value}\n              onSelect={() => toggleOption?.(opt.value)}\n              className={twMerge(\n                \"h-full cursor-pointer border-y-0 p-0\",\n                \"data-[selected=true]:bg-accent\",\n              )}\n              role=\"option\"\n              aria-selected={isSelected}\n            >\n              {renderOption ? (\n                renderOption(opt, {\n                  asPlaceholder: false,\n                  showValue: true,\n                })\n              ) : (\n                <IdAutocompleteListOption variant={variant} {...opt} />\n              )}\n            </CommandItem>\n          );\n        })}\n      </CommandGroup>\n    </CommandList>\n  );\n};\n\nexport { IdAutocompleteList, type IdAutocompleteListProps };\n"],"mappings":";;;;;;;AA+BA,MAAMS,sBAAyD,EAC7DC,SACAC,gBACAC,eACAC,UAAU,EAAE,EACZC,cACAC,cACAC,yBACI;CACJ,MAAMC,aAAahB,iBAAiBiB,UAAUA,MAAMC,OAAO;CAC3D,MAAMC,gBAAsCJ,sBAAsB;EAChEK,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,aAAa;EACd;AAEDrB,iBAAgB;AACdQ,kBAAgBc,SAASC,SAAS;GAAEC,KAAK;GAAGC,UAAU;GAAW,CAAC;IACjE,CAACjB,gBAAgBM,WAAW,CAAC;AAEhC,QACE,qBAAC,aAAD;EAAa,KAAKN;YAAlB,CACE,oBAAC,cAAD;GAAc,WAAWX,QAAQ,aAAa;aAC3Ce,eACCA,aAAaK,eAAe;IAC1BS,eAAe;IACfC,WAAW;IACXC,WAAW/B,QAAQ,OAAM;IAC1B,CAAC,GAEF,oBAAC,0BAAD;IACWU;IACT,MAAMU,cAAcY;IACpB,OAAOZ,cAAcE;IACrB,MAAMF,cAAcG;IACpB,OAAOH,cAAcC;IACrB,aAAaD,cAAcI;IAC3B,eAAA;IACA,WAAWxB,QAAQ,OAAO;IAE7B,CAAA;GACW,CAAA,EACd,oBAAC,cAAD;GAAc,WAAWA,QAAQ,OAAO;aACrCa,QAAQoB,KAAKC,QAAQ;IACpB,MAAMC,aAAavB,kBAAkBsB,IAAIb;AAEzC,WACE,oBAAC,aAAD;KAEE,OAAOa,IAAIb;KACX,gBAAgBP,eAAeoB,IAAIb,MAAM;KACzC,WAAWrB,QACT,wCACA,iCACD;KACD,MAAK;KACL,iBAAemC;eAEdpB,eACCA,aAAamB,KAAK;MAChBL,eAAe;MACfC,WAAW;MACZ,CAAC,GAEF,oBAAC,0BAAD;MAAmCpB;MAAS,GAAIwB;MACjD,CAAA;KACW,EAlBPA,IAAIb,MAkBG;KAEhB;GACU,CAAA,CACF"}

package/dist/ui/components/id-autocomplete/id-autocomplete.js

@@ -62,7 +62,7 @@ const IdAutocomplete = /* @__PURE__ */ React.forwardRef(({ id: idProp, name, cla
 				shouldFilter: false,
 				value: commandValue,
 				onValueChange: handleCommandValue,
-				className: twMerge("bg-gray-100 dark:bg-slate-700"),
+				className: twMerge("bg-muted"),
 				children: [
 					/* @__PURE__ */ jsx(PopoverAnchor, {
 						asChild: true,

package/dist/ui/components/id-autocomplete/id-autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"id-autocomplete.js","names":["twMerge","sharedValueTransformers","Command","React","useId","useMemo","useRef","FormDescription","FormGroup","FormLabel","FormMessageList","Input","Popover","PopoverAnchor","PopoverContent","ValueTransformer","IdAutocompleteInputContainer","IdAutocompleteListOption","IdAutocompleteList","useIdAutocomplete","IdAutocomplete","forwardRef","id","idProp","name","className","label","description","value","defaultValue","disabled","placeholder","required","errors","warnings","onChange","onBlur","onClick","onKeyDown","onMouseDown","autoComplete","variant","maxLength","fetchOptionsCallback","fetchSelectedOptionCallback","isOpenByDefault","initialOptions","renderOption","previewPlaceholder","props","ref","prefix","inputRef","mergedRef","node","current","hasWarning","Array","isArray","length","hasError","selectedValue","selectedOption","isPopoverOpen","commandListRef","options","isLoading","isLoadingSelectedOption","haveFetchError","commandValue","isFetchSelectedOptionSync","toggleOption","handleOpenChange","onTriggerBlur","handleChange","handleCommandValue","handleFetchSelectedOption","handlePaste","fetchOptions","fetchSelectedOption","handleOptionSelection","optionValue","focus","asCard","transformers","trimOnBlur","trimOnEnter","e","preventDefault","target","control","undefined","asPlaceholder","showValue","icon","title","path","Element","displayName"],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete.tsx"],"sourcesContent":["import type { TransformerType } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { sharedValueTransformers } from \"#design-system/ui/lib\";\nimport { Command } from \"cmdk\";\nimport React, { useId, useMemo, useRef } from \"react\";\nimport { FormDescription } from \"../form-description/form-description.js\";\nimport { FormGroup } from \"../form-group/form-group.js\";\nimport { FormLabel } from \"../form-label/form-label.js\";\nimport { FormMessageList } from \"../form-message/message-list.js\";\nimport { Input } from \"../input/input.js\";\nimport { Popover, PopoverAnchor, PopoverContent } from \"../popover/popover.js\";\nimport { ValueTransformer } from \"../value-transformer/value-transformer.js\";\nimport { IdAutocompleteInputContainer } from \"./id-autocomplete-input-container.js\";\nimport { IdAutocompleteListOption } from \"./id-autocomplete-list-option.js\";\nimport { IdAutocompleteList } from \"./id-autocomplete-list.js\";\nimport type { IdAutocompleteProps } from \"./types.js\";\nimport { useIdAutocomplete } from \"./use-id-autocomplete.js\";\n\nconst IdAutocomplete = React.forwardRef<HTMLInputElement, IdAutocompleteProps>(\n  (\n    {\n      id: idProp,\n      name,\n      className,\n      label,\n      description,\n      value,\n      defaultValue,\n      disabled,\n      placeholder,\n      required,\n      errors,\n      warnings,\n      onChange,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onMouseDown,\n      autoComplete = true,\n      variant = \"withValue\",\n      maxLength,\n      fetchOptionsCallback,\n      fetchSelectedOptionCallback,\n      isOpenByDefault, // to be used only in stories\n      initialOptions,\n      renderOption,\n      previewPlaceholder,\n      ...props\n    },\n    ref,\n  ) => {\n    const prefix = useId();\n    const id = idProp ?? `${prefix}-id-autocomplete`;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const mergedRef = (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    };\n\n    const hasWarning = Array.isArray(warnings) && warnings.length > 0;\n    const hasError = Array.isArray(errors) && errors.length > 0;\n\n    const {\n      selectedValue,\n      selectedOption,\n      isPopoverOpen,\n      commandListRef,\n      options,\n      isLoading,\n      isLoadingSelectedOption,\n      haveFetchError,\n      commandValue,\n      isFetchSelectedOptionSync,\n      toggleOption,\n      handleOpenChange,\n      onTriggerBlur,\n      handleChange,\n      handleCommandValue,\n      handleFetchSelectedOption,\n      handlePaste,\n    } = useIdAutocomplete({\n      autoComplete,\n      defaultValue,\n      value,\n      isOpenByDefault,\n      initialOptions,\n      onChange,\n      onBlur,\n      fetchOptions: fetchOptionsCallback,\n      fetchSelectedOption: fetchSelectedOptionCallback,\n    });\n\n    const handleOptionSelection = (optionValue: string) => {\n      toggleOption(optionValue);\n      inputRef.current?.focus();\n    };\n\n    const asCard =\n      variant === \"withValueAndTitle\" ||\n      variant === \"withValueTitleAndDescription\";\n\n    const transformers: TransformerType = useMemo(\n      () => [\n        sharedValueTransformers.trimOnBlur(),\n        sharedValueTransformers.trimOnEnter(),\n      ],\n      [],\n    );\n\n    return (\n      <FormGroup>\n        {!!label && (\n          <FormLabel\n            htmlFor={id}\n            disabled={disabled}\n            hasError={hasError}\n            required={required}\n            onClick={(e) => {\n              e.preventDefault();\n              (e.target as HTMLLabelElement).control?.focus();\n            }}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {autoComplete && fetchOptionsCallback ? (\n          <Popover open={isPopoverOpen} onOpenChange={handleOpenChange}>\n            <Command\n              shouldFilter={false}\n              value={commandValue}\n              onValueChange={handleCommandValue}\n              className={twMerge(\"bg-gray-100 dark:bg-slate-700\")}\n            >\n              <PopoverAnchor asChild={true}>\n                <IdAutocompleteInputContainer\n                  id={id}\n                  name={name}\n                  value={selectedValue}\n                  className={className}\n                  isLoading={isLoading}\n                  haveFetchError={haveFetchError}\n                  disabled={disabled}\n                  onChange={handleChange}\n                  onBlur={onTriggerBlur}\n                  onClick={onClick}\n                  selectedOption={selectedOption}\n                  optionsLength={options.length}\n                  handleOpenChange={handleOpenChange}\n                  onKeyDown={onKeyDown}\n                  onMouseDown={onMouseDown}\n                  placeholder={placeholder}\n                  hasError={hasError}\n                  label={label}\n                  required={required}\n                  isPopoverOpen={isPopoverOpen}\n                  maxLength={maxLength}\n                  handlePaste={handlePaste}\n                  {...props}\n                  ref={mergedRef}\n                />\n              </PopoverAnchor>\n              {asCard &&\n                (renderOption ? (\n                  renderOption(\n                    selectedOption === undefined && previewPlaceholder\n                      ? {\n                          ...previewPlaceholder,\n                        }\n                      : {\n                          ...selectedOption,\n                          value: selectedOption?.value ?? \"\",\n                        },\n                    {\n                      asPlaceholder: selectedOption === undefined,\n                      showValue: false,\n                      isLoadingSelectedOption,\n                      handleFetchSelectedOption: fetchSelectedOptionCallback\n                        ? handleFetchSelectedOption\n                        : undefined,\n                      isFetchSelectedOptionSync,\n                      className: twMerge(\"rounded-t-none pt-2\"),\n                    },\n                  )\n                ) : (\n                  <IdAutocompleteListOption\n                    variant={variant}\n                    icon={selectedOption?.icon ?? previewPlaceholder?.icon}\n                    title={selectedOption?.title ?? previewPlaceholder?.title}\n                    path={selectedOption?.path ?? previewPlaceholder?.path}\n                    value={\n                      selectedOption?.value ?? previewPlaceholder?.value ?? \"\"\n                    }\n                    description={\n                      selectedOption?.description ??\n                      previewPlaceholder?.description\n                    }\n                    asPlaceholder={selectedOption === undefined}\n                    showValue={false}\n                    isLoadingSelectedOption={isLoadingSelectedOption}\n                    handleFetchSelectedOption={\n                      fetchSelectedOptionCallback\n                        ? handleFetchSelectedOption\n                        : undefined\n                    }\n                    isFetchSelectedOptionSync={isFetchSelectedOptionSync}\n                    className={twMerge(\"rounded-t-none pt-2\")}\n                  />\n                ))}\n              <PopoverContent\n                align=\"start\"\n                onOpenAutoFocus={(e) => e.preventDefault()}\n                onInteractOutside={(e) => {\n                  if (e.target instanceof Element && e.target.id === id) {\n                    e.preventDefault();\n                  }\n                }}\n              >\n                <IdAutocompleteList\n                  variant={variant}\n                  commandListRef={commandListRef}\n                  selectedValue={selectedValue}\n                  options={options}\n                  toggleOption={handleOptionSelection}\n                  renderOption={renderOption}\n                  previewPlaceholder={previewPlaceholder}\n                />\n              </PopoverContent>\n            </Command>\n          </Popover>\n        ) : (\n          <ValueTransformer transformers={transformers}>\n            <Input\n              id={id}\n              name={name}\n              value={selectedValue}\n              className={className}\n              disabled={disabled}\n              onChange={handleChange}\n              onBlur={onBlur}\n              onClick={onClick}\n              onMouseDown={onMouseDown}\n              placeholder={placeholder}\n              aria-invalid={hasError}\n              aria-label={!label ? \"Id Autocomplete\" : undefined}\n              aria-required={required}\n              maxLength={maxLength}\n              {...props}\n              ref={mergedRef}\n            />\n          </ValueTransformer>\n        )}\n        {!!description && <FormDescription>{description}</FormDescription>}\n        {hasWarning && <FormMessageList messages={warnings} type=\"warning\" />}\n        {hasError && <FormMessageList messages={errors} type=\"error\" />}\n      </FormGroup>\n    );\n  },\n);\n\nIdAutocomplete.displayName = \"IdAutocomplete\";\n\nexport { IdAutocomplete };\n"],"mappings":"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"}
+{"version":3,"file":"id-autocomplete.js","names":["twMerge","sharedValueTransformers","Command","React","useId","useMemo","useRef","FormDescription","FormGroup","FormLabel","FormMessageList","Input","Popover","PopoverAnchor","PopoverContent","ValueTransformer","IdAutocompleteInputContainer","IdAutocompleteListOption","IdAutocompleteList","useIdAutocomplete","IdAutocomplete","forwardRef","id","idProp","name","className","label","description","value","defaultValue","disabled","placeholder","required","errors","warnings","onChange","onBlur","onClick","onKeyDown","onMouseDown","autoComplete","variant","maxLength","fetchOptionsCallback","fetchSelectedOptionCallback","isOpenByDefault","initialOptions","renderOption","previewPlaceholder","props","ref","prefix","inputRef","mergedRef","node","current","hasWarning","Array","isArray","length","hasError","selectedValue","selectedOption","isPopoverOpen","commandListRef","options","isLoading","isLoadingSelectedOption","haveFetchError","commandValue","isFetchSelectedOptionSync","toggleOption","handleOpenChange","onTriggerBlur","handleChange","handleCommandValue","handleFetchSelectedOption","handlePaste","fetchOptions","fetchSelectedOption","handleOptionSelection","optionValue","focus","asCard","transformers","trimOnBlur","trimOnEnter","e","preventDefault","target","control","undefined","asPlaceholder","showValue","icon","title","path","Element","displayName"],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete.tsx"],"sourcesContent":["import type { TransformerType } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { sharedValueTransformers } from \"#design-system/ui/lib\";\nimport { Command } from \"cmdk\";\nimport React, { useId, useMemo, useRef } from \"react\";\nimport { FormDescription } from \"../form-description/form-description.js\";\nimport { FormGroup } from \"../form-group/form-group.js\";\nimport { FormLabel } from \"../form-label/form-label.js\";\nimport { FormMessageList } from \"../form-message/message-list.js\";\nimport { Input } from \"../input/input.js\";\nimport { Popover, PopoverAnchor, PopoverContent } from \"../popover/popover.js\";\nimport { ValueTransformer } from \"../value-transformer/value-transformer.js\";\nimport { IdAutocompleteInputContainer } from \"./id-autocomplete-input-container.js\";\nimport { IdAutocompleteListOption } from \"./id-autocomplete-list-option.js\";\nimport { IdAutocompleteList } from \"./id-autocomplete-list.js\";\nimport type { IdAutocompleteProps } from \"./types.js\";\nimport { useIdAutocomplete } from \"./use-id-autocomplete.js\";\n\nconst IdAutocomplete = React.forwardRef<HTMLInputElement, IdAutocompleteProps>(\n  (\n    {\n      id: idProp,\n      name,\n      className,\n      label,\n      description,\n      value,\n      defaultValue,\n      disabled,\n      placeholder,\n      required,\n      errors,\n      warnings,\n      onChange,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onMouseDown,\n      autoComplete = true,\n      variant = \"withValue\",\n      maxLength,\n      fetchOptionsCallback,\n      fetchSelectedOptionCallback,\n      isOpenByDefault, // to be used only in stories\n      initialOptions,\n      renderOption,\n      previewPlaceholder,\n      ...props\n    },\n    ref,\n  ) => {\n    const prefix = useId();\n    const id = idProp ?? `${prefix}-id-autocomplete`;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const mergedRef = (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    };\n\n    const hasWarning = Array.isArray(warnings) && warnings.length > 0;\n    const hasError = Array.isArray(errors) && errors.length > 0;\n\n    const {\n      selectedValue,\n      selectedOption,\n      isPopoverOpen,\n      commandListRef,\n      options,\n      isLoading,\n      isLoadingSelectedOption,\n      haveFetchError,\n      commandValue,\n      isFetchSelectedOptionSync,\n      toggleOption,\n      handleOpenChange,\n      onTriggerBlur,\n      handleChange,\n      handleCommandValue,\n      handleFetchSelectedOption,\n      handlePaste,\n    } = useIdAutocomplete({\n      autoComplete,\n      defaultValue,\n      value,\n      isOpenByDefault,\n      initialOptions,\n      onChange,\n      onBlur,\n      fetchOptions: fetchOptionsCallback,\n      fetchSelectedOption: fetchSelectedOptionCallback,\n    });\n\n    const handleOptionSelection = (optionValue: string) => {\n      toggleOption(optionValue);\n      inputRef.current?.focus();\n    };\n\n    const asCard =\n      variant === \"withValueAndTitle\" ||\n      variant === \"withValueTitleAndDescription\";\n\n    const transformers: TransformerType = useMemo(\n      () => [\n        sharedValueTransformers.trimOnBlur(),\n        sharedValueTransformers.trimOnEnter(),\n      ],\n      [],\n    );\n\n    return (\n      <FormGroup>\n        {!!label && (\n          <FormLabel\n            htmlFor={id}\n            disabled={disabled}\n            hasError={hasError}\n            required={required}\n            onClick={(e) => {\n              e.preventDefault();\n              (e.target as HTMLLabelElement).control?.focus();\n            }}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {autoComplete && fetchOptionsCallback ? (\n          <Popover open={isPopoverOpen} onOpenChange={handleOpenChange}>\n            <Command\n              shouldFilter={false}\n              value={commandValue}\n              onValueChange={handleCommandValue}\n              className={twMerge(\"bg-muted\")}\n            >\n              <PopoverAnchor asChild={true}>\n                <IdAutocompleteInputContainer\n                  id={id}\n                  name={name}\n                  value={selectedValue}\n                  className={className}\n                  isLoading={isLoading}\n                  haveFetchError={haveFetchError}\n                  disabled={disabled}\n                  onChange={handleChange}\n                  onBlur={onTriggerBlur}\n                  onClick={onClick}\n                  selectedOption={selectedOption}\n                  optionsLength={options.length}\n                  handleOpenChange={handleOpenChange}\n                  onKeyDown={onKeyDown}\n                  onMouseDown={onMouseDown}\n                  placeholder={placeholder}\n                  hasError={hasError}\n                  label={label}\n                  required={required}\n                  isPopoverOpen={isPopoverOpen}\n                  maxLength={maxLength}\n                  handlePaste={handlePaste}\n                  {...props}\n                  ref={mergedRef}\n                />\n              </PopoverAnchor>\n              {asCard &&\n                (renderOption ? (\n                  renderOption(\n                    selectedOption === undefined && previewPlaceholder\n                      ? {\n                          ...previewPlaceholder,\n                        }\n                      : {\n                          ...selectedOption,\n                          value: selectedOption?.value ?? \"\",\n                        },\n                    {\n                      asPlaceholder: selectedOption === undefined,\n                      showValue: false,\n                      isLoadingSelectedOption,\n                      handleFetchSelectedOption: fetchSelectedOptionCallback\n                        ? handleFetchSelectedOption\n                        : undefined,\n                      isFetchSelectedOptionSync,\n                      className: twMerge(\"rounded-t-none pt-2\"),\n                    },\n                  )\n                ) : (\n                  <IdAutocompleteListOption\n                    variant={variant}\n                    icon={selectedOption?.icon ?? previewPlaceholder?.icon}\n                    title={selectedOption?.title ?? previewPlaceholder?.title}\n                    path={selectedOption?.path ?? previewPlaceholder?.path}\n                    value={\n                      selectedOption?.value ?? previewPlaceholder?.value ?? \"\"\n                    }\n                    description={\n                      selectedOption?.description ??\n                      previewPlaceholder?.description\n                    }\n                    asPlaceholder={selectedOption === undefined}\n                    showValue={false}\n                    isLoadingSelectedOption={isLoadingSelectedOption}\n                    handleFetchSelectedOption={\n                      fetchSelectedOptionCallback\n                        ? handleFetchSelectedOption\n                        : undefined\n                    }\n                    isFetchSelectedOptionSync={isFetchSelectedOptionSync}\n                    className={twMerge(\"rounded-t-none pt-2\")}\n                  />\n                ))}\n              <PopoverContent\n                align=\"start\"\n                onOpenAutoFocus={(e) => e.preventDefault()}\n                onInteractOutside={(e) => {\n                  if (e.target instanceof Element && e.target.id === id) {\n                    e.preventDefault();\n                  }\n                }}\n              >\n                <IdAutocompleteList\n                  variant={variant}\n                  commandListRef={commandListRef}\n                  selectedValue={selectedValue}\n                  options={options}\n                  toggleOption={handleOptionSelection}\n                  renderOption={renderOption}\n                  previewPlaceholder={previewPlaceholder}\n                />\n              </PopoverContent>\n            </Command>\n          </Popover>\n        ) : (\n          <ValueTransformer transformers={transformers}>\n            <Input\n              id={id}\n              name={name}\n              value={selectedValue}\n              className={className}\n              disabled={disabled}\n              onChange={handleChange}\n              onBlur={onBlur}\n              onClick={onClick}\n              onMouseDown={onMouseDown}\n              placeholder={placeholder}\n              aria-invalid={hasError}\n              aria-label={!label ? \"Id Autocomplete\" : undefined}\n              aria-required={required}\n              maxLength={maxLength}\n              {...props}\n              ref={mergedRef}\n            />\n          </ValueTransformer>\n        )}\n        {!!description && <FormDescription>{description}</FormDescription>}\n        {hasWarning && <FormMessageList messages={warnings} type=\"warning\" />}\n        {hasError && <FormMessageList messages={errors} type=\"error\" />}\n      </FormGroup>\n    );\n  },\n);\n\nIdAutocomplete.displayName = \"IdAutocomplete\";\n\nexport { IdAutocomplete };\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAMoB,iBAAiBjB,sBAAMkB,YAEzB,EACEC,IAAIC,QACJC,MACAC,WACAC,OACAC,aACAC,OACAC,cACAC,UACAC,aACAC,UACAC,QACAC,UACAC,UACAC,QACAC,SACAC,WACAC,aACAC,eAAe,MACfC,UAAU,aACVC,WACAC,sBACAC,6BACAC,iBACAC,gBACAC,cACAC,oBACA,GAAGC,SAELC,QACG;CACH,MAAMC,SAAS/C,OAAO;CACtB,MAAMkB,KAAKC,UAAU,GAAG4B,OAAM;CAC9B,MAAMC,WAAW9C,OAAgC,KAAK;CAEtD,MAAM+C,aAAaC,SAAkC;AACnDF,WAASG,UAAUD;AACnB,MAAI,OAAOJ,QAAQ,WACjBA,KAAII,KAAK;WACAJ,IACTA,KAAIK,UAAUD;;CAIlB,MAAME,aAAaC,MAAMC,QAAQxB,SAAS,IAAIA,SAASyB,SAAS;CAChE,MAAMC,WAAWH,MAAMC,QAAQzB,OAAO,IAAIA,OAAO0B,SAAS;CAE1D,MAAM,EACJE,eACAC,gBACAC,eACAC,gBACAC,SACAC,WACAC,yBACAC,gBACAC,cACAC,2BACAC,cACAC,kBACAC,eACAC,cACAC,oBACAC,2BACAC,gBACE1D,kBAAkB;EACpBqB;EACAX;EACAD;EACAiB;EACAC;EACAX;EACAC;EACA0C,cAAcnC;EACdoC,qBAAqBnC;EACtB,CAAC;CAEF,MAAMoC,yBAAyBC,gBAAwB;AACrDV,eAAaU,YAAY;AACzB7B,WAASG,SAAS2B,OAAO;;CAG3B,MAAMC,SACJ1C,YAAY,uBACZA,YAAY;CAEd,MAAM2C,eAAgC/E,cAC9B,CACJJ,wBAAwBoF,YAAY,EACpCpF,wBAAwBqF,aAAa,CACtC,EACD,EACF,CAAC;AAED,QACE,qBAAC,WAAD,EAAA,UAAA;EACG,CAAC,CAAC5D,SACD,oBAAC,WAAD;GACE,SAASJ;GACCQ;GACA8B;GACA5B;GACV,UAAUuD,MAAM;AACdA,MAAEC,gBAAgB;AACjBD,MAAEE,OAA4BC,SAASR,OAAO;;aAGhDxD;GAEJ,CAAA;EACAc,gBAAgBG,uBACf,oBAAC,SAAD;GAAS,MAAMoB;GAAe,cAAcS;aAC1C,qBAAC,SAAD;IACE,cAAc;IACd,OAAOH;IACP,eAAeM;IACf,WAAW3E,QAAQ,WAAW;cAJhC;KAME,oBAAC,eAAD;MAAe,SAAS;gBACtB,oBAAC,8BAAD;OACMsB;OACEE;OACN,OAAOqC;OACIpC;OACAyC;OACKE;OACNtC;OACV,UAAU4C;OACV,QAAQD;OACCpC;OACOyB;OAChB,eAAeG,QAAQN;OACLa;OACPlC;OACEC;OACAR;OACH6B;OACHlC;OACGM;OACK+B;OACJrB;OACEmC;OACb,GAAI5B;OACJ,KAAKI;OAAU,CAAA;MAEJ,CAAA;KACd8B,WACEpC,eACCA,aACEe,mBAAmB6B,KAAAA,KAAa3C,qBAC5B,EACE,GAAGA,oBACJ,GACD;MACE,GAAGc;MACHlC,OAAOkC,gBAAgBlC,SAAS;MACjC,EACL;MACEgE,eAAe9B,mBAAmB6B,KAAAA;MAClCE,WAAW;MACX1B;MACAS,2BAA2BhC,8BACvBgC,4BACAe,KAAAA;MACJrB;MACA7C,WAAWzB,QAAQ,sBAAqB;MAE5C,CAAC,GAED,oBAAC,0BAAD;MACWyC;MACT,MAAMqB,gBAAgBgC,QAAQ9C,oBAAoB8C;MAClD,OAAOhC,gBAAgBiC,SAAS/C,oBAAoB+C;MACpD,MAAMjC,gBAAgBkC,QAAQhD,oBAAoBgD;MAClD,OACElC,gBAAgBlC,SAASoB,oBAAoBpB,SAAS;MAExD,aACEkC,gBAAgBnC,eAChBqB,oBAAoBrB;MAEtB,eAAemC,mBAAmB6B,KAAAA;MAClC,WAAW;MACcxB;MACzB,2BACEvB,8BACIgC,4BACAe,KAAAA;MAEqBrB;MAC3B,WAAWtE,QAAQ,sBAAsB;MAE5C,CAAA;KACH,oBAAC,gBAAD;MACE,OAAM;MACN,kBAAkBuF,MAAMA,EAAEC,gBAAgB;MAC1C,oBAAoBD,MAAM;AACxB,WAAIA,EAAEE,kBAAkBQ,WAAWV,EAAEE,OAAOnE,OAAOA,GACjDiE,GAAEC,gBAAgB;;gBAItB,oBAAC,oBAAD;OACW/C;OACOuB;OACDH;OACNI;OACT,cAAce;OACAjC;OACMC;OAAmB,CAAA;MAE3B,CAAA;KACT;;GACD,CAAA,GAEV,oBAAC,kBAAD;GAAgCoC;aAC9B,oBAAC,OAAD;IACM9D;IACEE;IACN,OAAOqC;IACIpC;IACDK;IACV,UAAU4C;IACFtC;IACCC;IACIE;IACAR;IACb,gBAAc6B;IACd,cAAY,CAAClC,QAAQ,oBAAoBiE,KAAAA;IACzC,iBAAe3D;IACJU;IACX,GAAIO;IACJ,KAAKI;IAAU,CAAA;GAGpB,CAAA;EACA,CAAC,CAAC1B,eAAe,oBAAC,iBAAD,EAAA,UAAkBA,aAA8B,CAAA;EACjE6B,cAAc,oBAAC,iBAAD;GAAiB,UAAUtB;GAAU,MAAK;GAAY,CAAA;EACpE0B,YAAY,oBAAC,iBAAD;GAAiB,UAAU3B;GAAQ,MAAK;GAAU,CAAA;EACrD,EAAA,CAAA;EAGjB;AAEDb,eAAe8E,cAAc"}

package/dist/ui/components/index.d.ts

@@ -2,10 +2,10 @@ import { n as ButtonProps, r as buttonVariants, t as Button } from "../../button
 import { n as CharacterCounterProps, t as CharacterCounter } from "../../character-counter-BWoglM2P.js";
 import { n as CheckboxValue, t as CheckboxBase } from "../../checkbox-base-CZo-4eL0.js";
 import { n as CheckboxProps, t as Checkbox } from "../../checkbox-CGBtXQnI.js";
-import { a as CommandItem, i as CommandInput, n as CommandEmpty, o as CommandList, r as CommandGroup, s as CommandLoading, t as Command } from "../../command-vPaCve7_.js";
+import { a as CommandItem, i as CommandInput, n as CommandEmpty, o as CommandList, r as CommandGroup, s as CommandLoading, t as Command } from "../../command-tFzjgzge.js";
 import { n as RadioGroupFieldProps, t as RadioGroupField } from "../../radio-group-field-wlqeiLN3.js";
 import { n as SelectFieldProps, r as SelectFieldRaw, t as SelectField } from "../../select-field-C97QIhUL.js";
-import { n as EnumFieldProps, t as EnumField } from "../../enum-field-UxIet5Lp.js";
+import { n as EnumFieldProps, t as EnumField } from "../../enum-field-CwZVs3Ux.js";
 import { n as FormDescriptionProps, t as FormDescription } from "../../form-description-CYkcMEzm.js";
 import { t as FormGroup } from "../../form-group-C8kL6pdZ.js";
 import { n as FormLabelProps, t as FormLabel } from "../../form-label-b6nQi0XO.js";

package/dist/ui/components/input/input.js

@@ -2,7 +2,7 @@ import * as React$1 from "react";
 import { twMerge } from "tailwind-merge";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/components/input/input.tsx
-const inputBaseStyles = twMerge("flex h-9 w-full rounded-md text-sm/5 font-normal text-gray-900 dark:text-slate-50", "border border-gray-300 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", "px-3 py-2", "font-sans placeholder:text-gray-500 dark:placeholder:text-slate-400", "focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 focus-visible:ring-offset-white focus-visible:outline-none", "focus:bg-gray-50 dark:focus:bg-slate-700 dark:focus-visible:ring-slate-400 dark:focus-visible:ring-offset-slate-800", "disabled:cursor-not-allowed", "disabled:border-gray-300 disabled:bg-gray-50 disabled:text-gray-700 dark:disabled:border-slate-500 dark:disabled:bg-slate-700 dark:disabled:placeholder:text-slate-400");
+const inputBaseStyles = twMerge("flex h-9 w-full rounded-md text-sm/5 font-normal text-foreground", "border border-border bg-background", "px-3 py-2", "font-sans placeholder:text-muted-foreground disabled:disabled-effect", "focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:ring-offset-white focus-visible:outline-none", "focus:bg-background focus-visible:ring-offset-background", "disabled:disabled-effect", "disabled:disabled-effect");
 const Input = /* @__PURE__ */ React$1.forwardRef(({ className, type, ...props }, ref) => {
 	return /* @__PURE__ */ jsx("input", {
 		type,

package/dist/ui/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["React","twMerge","inputBaseStyles","Input","forwardRef","className","type","props","ref","displayName"],"sources":["../../../../src/ui/components/input/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nconst inputBaseStyles = twMerge(\n  // Base styles\n  \"flex h-9 w-full rounded-md text-sm/5 font-normal text-gray-900 dark:text-slate-50\",\n  // Border & Background\n  \"border border-gray-300 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100\",\n  // Padding\n  \"px-3 py-2\",\n  // Placeholder\n  \"font-sans placeholder:text-gray-500 dark:placeholder:text-slate-400\",\n  // Focus styles\n  \"focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 focus-visible:ring-offset-white focus-visible:outline-none\",\n  \"focus:bg-gray-50 dark:focus:bg-slate-700 dark:focus-visible:ring-slate-400 dark:focus-visible:ring-offset-slate-800\",\n  // Disabled state\n  \"disabled:cursor-not-allowed\",\n  \"disabled:border-gray-300 disabled:bg-gray-50 disabled:text-gray-700 dark:disabled:border-slate-500 dark:disabled:bg-slate-700 dark:disabled:placeholder:text-slate-400\",\n);\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={twMerge(inputBaseStyles, className)}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n\nexport { Input };\n"],"mappings":";;;;AAKA,MAAME,kBAAkBD,QAEtB,qFAEA,iGAEA,aAEA,uEAEA,2IACA,uHAEA,+BACA,yKACD;AAED,MAAME,QAAQH,wBAAMI,YACjB,EAAEC,WAAWC,MAAM,GAAGC,SAASC,QAAQ;AACtC,QACE,oBAAC,SAAD;EACQF;EACN,WAAWL,QAAQC,iBAAiBG,UAAU;EACzCG;EACL,GAAID;EACJ,CAAA;EAGP;AAEDJ,MAAMM,cAAc"}
+{"version":3,"file":"input.js","names":["React","twMerge","inputBaseStyles","Input","forwardRef","className","type","props","ref","displayName"],"sources":["../../../../src/ui/components/input/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nconst inputBaseStyles = twMerge(\n  // Base styles\n  \"flex h-9 w-full rounded-md text-sm/5 font-normal text-foreground\",\n  // Border & Background\n  \"border border-border bg-background\",\n  // Padding\n  \"px-3 py-2\",\n  // Placeholder\n  \"font-sans placeholder:text-muted-foreground disabled:disabled-effect\",\n  // Focus styles\n  \"focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:ring-offset-white focus-visible:outline-none\",\n  \"focus:bg-background focus-visible:ring-offset-background\",\n  // Disabled state\n  \"disabled:disabled-effect\",\n  \"disabled:disabled-effect\",\n);\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={twMerge(inputBaseStyles, className)}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n\nexport { Input };\n"],"mappings":";;;;AAKA,MAAME,kBAAkBD,QAEtB,oEAEA,sCAEA,aAEA,wEAEA,uIACA,4DAEA,4BACA,2BACD;AAED,MAAME,QAAQH,wBAAMI,YACjB,EAAEC,WAAWC,MAAM,GAAGC,SAASC,QAAQ;AACtC,QACE,oBAAC,SAAD;EACQF;EACN,WAAWL,QAAQC,iBAAiBG,UAAU;EACzCG;EACL,GAAID;EACJ,CAAA;EAGP;AAEDJ,MAAMM,cAAc"}

package/dist/ui/components/input/splitted-input-diff.js

@@ -26,7 +26,7 @@ const CopyIcon = ({ value, hasCopied, setHasCopied, hasHover }) => {
 			children: /* @__PURE__ */ jsx(Icon, {
 				name: "Copy",
 				size: 16,
-				className: twMerge("text-gray-500 dark:text-slate-400")
+				className: twMerge("text-muted-foreground")
 			})
 		})
 	}) });
@@ -53,7 +53,7 @@ const SplittedInputDiff = ({ baseValue, value, viewMode, diffMode, showCopyIcon
 					hasHover
 				})]
 			}),
-			/* @__PURE__ */ jsx("div", { className: twMerge("mx-3 h-[34px] w-px bg-gray-300 dark:bg-slate-600 dark:text-slate-100") }),
+			/* @__PURE__ */ jsx("div", { className: twMerge("mx-3 h-[34px] w-px bg-secondary") }),
 			/* @__PURE__ */ jsxs("div", {
 				className: twMerge("flex flex-1 items-center gap-2 truncate [&>span]:truncate"),
 				children: [/* @__PURE__ */ jsx(TextDiff, {