refactor(ui): replace inline svg icons with icon components

- replace inline checkmark svg in ColorPicker with Tick02Icon
- replace inline sort arrow svg in Table with ArrowDown01Icon
- add ArrowDown01Icon to shared icons index

src/shared/components/ColorPicker.client.js

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useRef, useEffect } from 'react';
+import { Tick02Icon } from '@zen/core/shared/icons';
 
 const ROW1 = ['#4489ed', '#2a9db0', '#43b53c', '#5e7b4e', '#f5c211', '#f7581f', '#ff2b2b', '#ff2e63', '#f540ed', '#b34ce9', '#818faf', '#c0bfbc'];
 const ROW2 = ['#2657cf', '#24687a', '#287124', '#384d2f', '#c68408', '#c0280e', '#ca0505', '#ce0245', '#b417a7', '#8021aa', '#4e5b7e', '#75746f'];
@@ -9,11 +10,7 @@ const PRESET_COLORS = [...ROW1, ...ROW2, ...ROW3];
 
 const isValidHex = (hex) => /^#[0-9a-fA-F]{6}$/.test(hex);
 
-const Checkmark = () => (
-    <svg className="w-4 h-4 text-white drop-shadow-sm" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
-    </svg>
-);
+const Checkmark = () => <Tick02Icon className="w-4 h-4 text-white drop-shadow-sm" />;
 
 const ColorPicker = ({
     value,

src/shared/components/Table.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import Badge from './Badge';
 import Button from './Button';
-import { TorriGateIcon } from '../icons/index.js';
+import { TorriGateIcon, ArrowDown01Icon } from '@zen/core/shared/icons';
 
 const ROW_SIZE = {
     sm: { cell: 'px-4 py-[11px]', header: 'px-4 py-[9px]', mobile: 'p-4' },
@@ -41,13 +41,7 @@ const Table = ({
         const isDesc = isActive && sortOrder === 'desc';
         return (
             <span className="ml-1">
-                <svg
-                    className={`w-4 h-4 transition-transform ${isActive ? (isDesc ? 'rotate-180' : '') : 'text-neutral-500 dark:text-neutral-400'}`}
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                >
-                    <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
-                </svg>
+                <ArrowDown01Icon className={`w-4 h-4 transition-transform ${isActive ? (isDesc ? 'rotate-180' : '') : 'text-neutral-500 dark:text-neutral-400'}`} />
             </span>
         );
     };