hunk.code_window: 			if (!disabled) {
   				if (isRenaming && !allowRename) setAllowRename(true);
   				else explorerStore.isRenaming = allowRename;
   			} else resetState();
   		}, [isRenaming, disabled, allowRename]);
   		useEffect(() => {
   			const onMouseDown = (event: MouseEvent) => {
   				if (!ref.current?.contains(event.target as Node)) blur();
   			};
  
hunk.labels: keep keep keep keep replace keep keep keep keep keep
hunk.after_edit: 		}, [isRenaming, disabled, allowRename, toggleBy]);
  
hunk.file_path: interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx
hunk.type: replace
file: import clsx from 'clsx';
  import { HexColorInput, HexColorPicker } from 'react-colorful';
  import { FieldValues, useController, UseControllerProps } from 'react-hook-form';
  import { inputStyles, Popover, usePopover } from '@sd/ui';
  
  interface Props<T extends FieldValues> extends UseControllerProps<T> {
  	className?: string;
  }
  
  export const ColorPicker = <T extends FieldValues>({ className, ...props }: Props<T>) => {
  	const { field } = useController({ name: props.name });
  
  	return (
  		<Popover
  			popover={usePopover()}
  			trigger={
  				<div
  					className={clsx('h-4 w-4 rounded-full shadow', className)}
  					style={{ backgroundColor: field.value }}
  				/>
  			}
  			className="p-3"
  			sideOffset={5}
  		>
  			<HexColorPicker color={field.value} onChange={field.onChange} />
  			<HexColorInput
  				color={field.value}
  				onChange={field.onChange}
  				className={inputStyles({ size: 'md', className: '!mt-5 bg-app px-3' })}
  			/>
  		</Popover>
  	);
  };
  