feat(WEB-304): remaning UI from design system primitives

components/Icons/ChevronDown.tsx

@@ -1,17 +1,40 @@
-import Image from "@/components/Image"
+import { iconVariants } from "./variants"
 
 import type { IconProps } from "@/types/components/icon"
 
 export default function ChevronDownIcon({
-  height = 20,
-  width = 20,
+  className,
+  color,
+  ...props
 }: IconProps) {
+  const classNames = iconVariants({ className, color })
   return (
-    <Image
-      alt="Chevron Down Icon"
-      height={height}
-      src="/_static/icons/chevron-down.svg"
-      width={width}
-    />
+    <svg
+      className={classNames}
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        height="24"
+        id="mask0_553_6963"
+        maskUnits="userSpaceOnUse"
+        style={{ maskType: "alpha" }}
+        width="24"
+        x="0"
+        y="0"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_553_6963)">
+        <path
+          d="M12 15.3746L6 9.37461L7.4 7.97461L12 12.5746L16.6 7.97461L18 9.37461L12 15.3746Z"
+          fill="#757575"
+        />
+      </g>
+    </svg>
   )
 }