chore: fixed error with typings

frontend/src/components/AddTagPopoverContent/AddTagPopoverContent.tsx

@@ -0,0 +1,78 @@
+
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Checkbox, PopoverContent } from "@app/components/v2";
+
+import { WsTag } from "../../hooks/api/tags/types";
+
+interface Props {
+    wsTags: WsTag[] | undefined;
+    secKey: string;
+    selectedTagIds: Record<string, boolean>;
+    handleSelectTag: (wsTag: WsTag) => void;
+    handleTagOnMouseEnter: (wsTag: WsTag) => void;
+    handleTagOnMouseLeave: () => void;
+    checkIfTagIsVisible: (wsTag: WsTag) => boolean;
+    handleOnCreateTagOpen: () => void
+}
+
+const AddTagPopoverContent = ({
+    wsTags,
+    secKey,
+    selectedTagIds,
+    handleSelectTag,
+    handleTagOnMouseEnter,
+    handleTagOnMouseLeave,
+    checkIfTagIsVisible,
+    handleOnCreateTagOpen
+}: Props) => {
+    return (
+        <PopoverContent
+            side="left"
+            className="relative max-h-96 w-auto min-w-[200px] p-2 overflow-y-auto overflow-x-hidden border border-mineshaft-600 bg-mineshaft-800 text-bunker-200"
+            hideCloseBtn
+        >
+            <div className=" text-center text-sm font-medium text-bunker-200">
+                Add tags to {secKey || "this secret"}
+            </div>
+            <div className="absolute left-0 w-full border-mineshaft-600 border-t mt-2" />
+            <div className="flex flex-col space-y-1.5">
+                {wsTags?.map((wsTag: WsTag) => (
+                    <div key={`tag-${wsTag._id}`} className="mt-4 h-[32px] relative flex items-center  justify-start hover:border-mineshaft-600 hover:border   hover:bg-mineshaft-700  p-2 rounded-md  hover:text-bunker-200 bg-none"
+                        onClick={() => handleSelectTag(wsTag)}
+                        onMouseEnter={() => handleTagOnMouseEnter(wsTag)}
+                        onMouseLeave={() => handleTagOnMouseLeave()}
+                        tabIndex={0} role="button"
+                        onKeyDown={() => { }}>
+                        {
+
+                            (checkIfTagIsVisible(wsTag) || selectedTagIds?.[wsTag.slug]) && <Checkbox
+                                id="autoCapitalization"
+                                isChecked={selectedTagIds?.[wsTag.slug]}
+                                className="absolute top-[50%] translate-y-[-50%] left-[10px] "
+                                checkIndicatorBg={`${!selectedTagIds?.[wsTag.slug] ? "text-transparent" : "text-mineshaft-800"}`}
+                            />
+                        }
+                        <div className="ml-7 flex items-center gap-3">
+                            <div className="w-[10px] h-[10px] rounded-full" style={{ background: wsTag?.tagColor ? wsTag.tagColor : "#bec2c8" }}> </div>
+                            <span >
+                                {wsTag.slug}
+                            </span>
+                        </div>
+                    </div>
+                ))}
+                <div
+                    className="h-[32px] relative flex items-center cursor-pointer   justify-start  border-mineshaft-600 border   bg-mineshaft-700 p-2 rounded-md  hover:text-bunker-200 bg-none"
+                    onClick={() => handleOnCreateTagOpen()}
+                    tabIndex={0} role="button"
+                    onKeyDown={() => { }}>
+                    <FontAwesomeIcon icon={faPlus} className="ml-1 mr-2" />
+                    <span> Add new tag</span>
+                </div>
+            </div>
+        </PopoverContent>
+    )
+}
+
+export default AddTagPopoverContent

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -8,11 +8,12 @@ export type CheckboxProps = Omit<
   CheckboxPrimitive.CheckboxProps,
   "checked" | "disabled" | "required"
 > & {
-  children: ReactNode;
+  children?: ReactNode;
   id: string;
   isDisabled?: boolean;
   isChecked?: boolean;
   isRequired?: boolean;
+  checkIndicatorBg?: string | undefined;
 };
 
 export const Checkbox = ({
@@ -22,6 +23,7 @@ export const Checkbox = ({
   isChecked,
   isDisabled,
   isRequired,
+  checkIndicatorBg,
   ...props
 }: CheckboxProps): JSX.Element => {
   return (
@@ -39,7 +41,7 @@ export const Checkbox = ({
         {...props}
         id={id}
       >
-        <CheckboxPrimitive.Indicator className="text-bunker-800">
+        <CheckboxPrimitive.Indicator className={`${checkIndicatorBg || "text-bunker-800"}`}>
           <FontAwesomeIcon icon={faCheck} size="sm" />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>

frontend/src/components/v2/Tag/Tag.tsx

@@ -1,17 +1,10 @@
 import { ReactNode } from "react";
-import { faClose } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { cva, VariantProps } from "cva";
 import { twMerge } from "tailwind-merge";
 
 type Props = {
   children: ReactNode;
   className?: string;
-  onClose?: () => void;
-  color?: string;
-  styles?: Record<string, string>
-  isDisabled?: boolean;
-  tagColor: string;
 } & VariantProps<typeof tagVariants>;
 
 const tagVariants = cva(
@@ -34,12 +27,7 @@ export const Tag = ({
   children,
   className,
   colorSchema = "gray",
-  color,
-  isDisabled,
-  size = "sm",
-  onClose,
-  styles = {}
-}: Props) => (
+  size = "sm" }: Props) => (
   <div
     className={twMerge(tagVariants({ colorSchema, className, size }))}
   >