react-native-inapp-inspector 2.3.19 → 2.3.21

package/dist/esm/components/NetworkIcons.js

@@ -1,851 +1,536 @@
-import React from 'react';
-import Svg, { Circle, Ellipse, Line, Path, Rect } from 'react-native-svg';
-import { AppColors } from '../styles/AppColors';
-export const EmptyRadarIcon = ({ color = AppColors.purple, size = 32 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-      <Circle cx="12" cy="11" r="3" stroke={color} strokeWidth="1.5"/>
-      <Path d="M12 14v3" stroke={color} strokeWidth="1.5" strokeLinecap="round"/>
-    </Svg>);
-};
-export const MapPinIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Circle cx="12" cy="10" r="3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const ScreenIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Rect x="3" y="4" width="18" height="16" rx="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M3 8h18M8 20V8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const ExpandCollapseIcon = ({ isExpanded, color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      {isExpanded ? (<Path d="M4 14h6v6M20 10h-6V4M14 10l7-7M10 14l-7 7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>) : (<Path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>)}
-    </Svg>);
-};
-export const SearchIcon = ({ color = AppColors.primaryLight, size = 18, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="11" cy="11" r="8" stroke={color} strokeWidth="2"/>
-      <Line x1="16.5" y1="16.5" x2="22" y2="22" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const ClearIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const ClockIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
-      <Line x1="12" y1="12" x2="12" y2="7" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Line x1="12" y1="12" x2="16" y2="14" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const CalendarIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Rect x="3" y="4" width="18" height="18" rx="2" stroke={color} strokeWidth="2"/>
-      <Line x1="3" y1="9" x2="21" y2="9" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Line x1="8" y1="2" x2="8" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Line x1="16" y1="2" x2="16" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const StatusIcon = ({ color = AppColors.grayTextWeak }) => {
-    return (<Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
-      <Line x1="12" y1="8" x2="12" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Circle cx="12" cy="16" r="1" fill={color}/>
-    </Svg>);
-};
-export const SizeIcon = ({ color = AppColors.grayTextWeak }) => {
-    return (<Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
-      <Path d="M4 6h16M4 10h10M4 14h13M4 18h7" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const RequestIcon = ({ color = AppColors.offerPurple }) => {
-    return (<Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
-      <Path d="M5 12h14M13 6l6 6-6 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const ResponseIcon = ({ color = AppColors.greenColor }) => {
-    return (<Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
-      <Path d="M19 12H5M11 18l-6-6 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const HeadersIcon = ({ color = AppColors.skyBlue }) => {
-    return (<Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
-      <Path d="M4 6h16M4 12h16M4 18h10" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const CopyIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M9 9V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Rect x="3" y="7" width="10" height="14" rx="2" stroke={color} strokeWidth="2"/>
-    </Svg>);
-};
-export const FetchIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M8 9l3 3-3 3M13 15h3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Rect x="3" y="3" width="18" height="18" rx="2" stroke={color} strokeWidth="2"/>
-    </Svg>);
-};
-export const TerminalIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M4 17l6-6-6-6M12 19h8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const CheckIcon = ({ color = AppColors.greenColor, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M20 6L9 17l-5-5" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const CircleCheckIcon = ({ color = AppColors.greenColor, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="2"/>
-      <Path d="M8.5 12.5l2.5 2.5 5-5.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const CircleXIcon = ({ color = AppColors.errorColor, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="2"/>
-      <Path d="M9.5 9.5l5 5M14.5 9.5l-5 5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const CircleAlertIcon = ({ color = AppColors.warningIconGold, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="2"/>
-      <Path d="M12 7.5v5.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Circle cx="12" cy="16.5" r="1.1" fill={color}/>
-    </Svg>);
-};
-export const FailIcon = ({ color = AppColors.errorColor, size = 10 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const TrashIcon = ({ color = AppColors.primaryLight, size = 18 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const HeaderPauseIcon = ({ isPaused, color = AppColors.primaryLight, size = 20, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      {isPaused ? (<Path d="M5 3l14 9-14 9V3z" fill={color}/>) : (<Path d="M6 5h3v14H6V5zm9 0h3v14h-3V5z" fill={color}/>)}
-    </Svg>);
-};
-export const ExportIcon = ({ color = AppColors.primaryLight, size = 18, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const SignalIcon = ({ color = AppColors.primaryLight, size = 18, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M2 20h.01M7 20v-4M12 20v-8M17 20V8M22 20V4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const DiffIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M7 8h10M12 3v10" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Path d="M7 19h10" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const GlobeIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
-      <Path d="M12 2C8 7 8 17 12 22M12 2c4 5 4 15 0 20M2 12h20" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const SortArrowIcon = ({ color = AppColors.primaryLight, size = 20, direction = 'down', }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      {direction === 'down' ? (<>
-          <Path d="M4 6h10M4 12h7M4 18h4" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-          <Path d="M18 6v12m0 0l-3-3m3 3l3-3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-        </>) : (<>
-          <Path d="M4 6h4M4 12h7M4 18h10" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-          <Path d="M18 18V6m0 0l-3 3m3-3l3 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-        </>)}
-    </Svg>);
-};
-export const ChevronIcon = ({ color = AppColors.grayTextWeak, size = 14, direction = 'down', }) => {
-    let path = 'M6 9l6 6 6-6';
-    if (direction === 'up')
-        path = 'M18 15l-6-6-6 6';
-    else if (direction === 'right')
-        path = 'M9 18l6-6-6-6';
-    else if (direction === 'left')
-        path = 'M15 18l-6-6 6-6';
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d={path} stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const FilterIcon = ({ color = AppColors.grayTextWeak, size = 18, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M4 6h16M7 12h10M10 18h4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const DownloadIcon = ({ color = AppColors.primaryLight, size = 18, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const CloseWhite = ({ color = AppColors.white, size = 20 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const WhiteBackNavigation = ({ color = AppColors.white, size = 20 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M19 12H5M12 19l-7-7 7-7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const AnalyticsIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M18 20V10M12 20V4M6 20v-6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const InsightsIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M2 17l6-6 4 4 10-10M22 12V7h-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const DebugIcon = ({ color = AppColors.white, size = 18 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Rect as B}from"react-native-svg";import{AppColors as p}from"../styles/AppColors";export const EmptyRadarIcon=({color:e=p.purple,size:t=32})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"stroke={e}strokeWidth="1.5"strokeLinecap="round"strokeLinejoin="round"/>
+      <M cx="12"cy="11"r="3"stroke={e}strokeWidth="1.5"/>
+      <L d="M12 14v3"stroke={e}strokeWidth="1.5"strokeLinecap="round"/>
+    </W>,MapPinIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <M cx="12"cy="10"r="3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,ScreenIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <B x="3"y="4"width="18"height="16"rx="2"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <L d="M3 8h18M8 20V8"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,ExpandCollapseIcon=({isExpanded:e,color:t=p.grayTextWeak,size:I=14})=><W width={I}height={I}viewBox="0 0 24 24"fill="none">
+      {e?<L d="M4 14h6v6M20 10h-6V4M14 10l7-7M10 14l-7 7"stroke={t}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>:<L d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"stroke={t}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>}
+    </W>,SearchIcon=({color:e=p.primaryLight,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="11"cy="11"r="8"stroke={e}strokeWidth="2"/>
+      <S x1="16.5"y1="16.5"x2="22"y2="22"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,ClearIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M18 6L6 18M6 6l12 12"stroke={e}strokeWidth="2.5"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,ClockIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="10"stroke={e}strokeWidth="2"/>
+      <S x1="12"y1="12"x2="12"y2="7"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <S x1="12"y1="12"x2="16"y2="14"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,CalendarIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <B x="3"y="4"width="18"height="18"rx="2"stroke={e}strokeWidth="2"/>
+      <S x1="3"y1="9"x2="21"y2="9"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <S x1="8"y1="2"x2="8"y2="6"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <S x1="16"y1="2"x2="16"y2="6"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,StatusIcon=({color:e=p.grayTextWeak})=><W width={14}height={14}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="10"stroke={e}strokeWidth="2"/>
+      <S x1="12"y1="8"x2="12"y2="12"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <M cx="12"cy="16"r="1"fill={e}/>
+    </W>,SizeIcon=({color:e=p.grayTextWeak})=><W width={14}height={14}viewBox="0 0 24 24"fill="none">
+      <L d="M4 6h16M4 10h10M4 14h13M4 18h7"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,RequestIcon=({color:e=p.offerPurple})=><W width={14}height={14}viewBox="0 0 24 24"fill="none">
+      <L d="M5 12h14M13 6l6 6-6 6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,ResponseIcon=({color:e=p.greenColor})=><W width={14}height={14}viewBox="0 0 24 24"fill="none">
+      <L d="M19 12H5M11 18l-6-6 6-6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,HeadersIcon=({color:e=p.skyBlue})=><W width={14}height={14}viewBox="0 0 24 24"fill="none">
+      <L d="M4 6h16M4 12h16M4 18h10"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,CopyIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M9 9V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-4"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <B x="3"y="7"width="10"height="14"rx="2"stroke={e}strokeWidth="2"/>
+    </W>,FetchIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M8 9l3 3-3 3M13 15h3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <B x="3"y="3"width="18"height="18"rx="2"stroke={e}strokeWidth="2"/>
+    </W>,TerminalIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M4 17l6-6-6-6M12 19h8"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,CheckIcon=({color:e=p.greenColor,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M20 6L9 17l-5-5"stroke={e}strokeWidth="2.5"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,CircleCheckIcon=({color:e=p.greenColor,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="9"stroke={e}strokeWidth="2"/>
+      <L d="M8.5 12.5l2.5 2.5 5-5.5"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,CircleXIcon=({color:e=p.errorColor,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="9"stroke={e}strokeWidth="2"/>
+      <L d="M9.5 9.5l5 5M14.5 9.5l-5 5"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,CircleAlertIcon=({color:e=p.warningIconGold,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="9"stroke={e}strokeWidth="2"/>
+      <L d="M12 7.5v5.5"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <M cx="12"cy="16.5"r="1.1"fill={e}/>
+    </W>,FailIcon=({color:e=p.errorColor,size:t=10})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M18 6L6 18M6 6l12 12"stroke={e}strokeWidth="3"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,TrashIcon=({color:e=p.primaryLight,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,HeaderPauseIcon=({isPaused:e,color:t=p.primaryLight,size:I=20})=><W width={I}height={I}viewBox="0 0 24 24"fill="none">
+      {e?<L d="M5 3l14 9-14 9V3z"fill={t}/>:<L d="M6 5h3v14H6V5zm9 0h3v14h-3V5z"fill={t}/>}
+    </W>,ExportIcon=({color:e=p.primaryLight,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,ShareIcon=({color:e=p.white,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,SignalIcon=({color:e=p.primaryLight,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M2 20h.01M7 20v-4M12 20v-8M17 20V8M22 20V4"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,DiffIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M7 8h10M12 3v10"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <L d="M7 19h10"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,GlobeIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="10"stroke={e}strokeWidth="2"/>
+      <L d="M12 2C8 7 8 17 12 22M12 2c4 5 4 15 0 20M2 12h20"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,SortArrowIcon=({color:e=p.primaryLight,size:t=20,direction:I="down"})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      {I==="down"?<>
+          <L d="M4 6h10M4 12h7M4 18h4"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+          <L d="M18 6v12m0 0l-3-3m3 3l3-3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+        </>:<>
+          <L d="M4 6h4M4 12h7M4 18h10"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+          <L d="M18 18V6m0 0l-3 3m3-3l3 3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+        </>}
+    </W>,ChevronIcon=({color:e=p.grayTextWeak,size:t=14,direction:I="down"})=>{let C="M6 9l6 6 6-6";return I==="up"?C="M18 15l-6-6-6 6":I==="right"?C="M9 18l6-6-6-6":I==="left"&&(C="M15 18l-6-6 6-6"),<W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d={C}stroke={e}strokeWidth="2.5"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>},FilterIcon=({color:e=p.grayTextWeak,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M4 6h16M7 12h10M10 18h4"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,DownloadIcon=({color:e=p.primaryLight,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,CloseWhite=({color:e=p.white,size:t=20})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M18 6L6 18M6 6l12 12"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,WhiteBackNavigation=({color:e=p.white,size:t=20})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M19 12H5M12 19l-7-7 7-7"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,AnalyticsIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M18 20V10M12 20V4M6 20v-6"stroke={e}strokeWidth="2.5"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,InsightsIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M2 17l6-6 4 4 10-10M22 12V7h-5"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,DebugIcon=({color:e=p.white,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
       
       
-      <Path d="M6 18l8-8" stroke={color} strokeWidth="2.5" strokeLinecap="round"/>
+      <L d="M6 18l8-8"stroke={e}strokeWidth="2.5"strokeLinecap="round"/>
       
-      <Path d="M13.5 10.5l2-2 1.5 1.5-2 2-1.5-1.5z" fill={color}/>
-      <Path d="M15.5 8.5L19 5c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7L17.2 10.2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <L d="M13.5 10.5l2-2 1.5 1.5-2 2-1.5-1.5z"fill={e}/>
+      <L d="M15.5 8.5L19 5c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7L17.2 10.2"stroke={e}strokeWidth="2"strokeLinecap="round"/>
 
       
       
-      <Path d="M15 15l4 4" stroke={color} strokeWidth="3.5" strokeLinecap="round"/>
+      <L d="M15 15l4 4"stroke={e}strokeWidth="3.5"strokeLinecap="round"/>
       
-      <Path d="M15 15L8.5 8.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <L d="M15 15L8.5 8.5"stroke={e}strokeWidth="2"strokeLinecap="round"/>
       
-      <Path d="M9 9L5 5M4.5 6.5l2-2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const SunIcon = ({ color = AppColors.white, size = 16 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="5" stroke={color} strokeWidth="2"/>
-      <Path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const MoonIcon = ({ color = AppColors.white, size = 16 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export { BrandCircleIcon } from './BrandCircleIcon';
-export { BrandSquareIcon } from './BrandSquareIcon';
-export const HtmlIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M17.5 8.5L21 12l-3.5 3.5M6.5 8.5L3 12l3.5 3.5M14 4.5l-4 15" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const CssIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const JsIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Rect x="3" y="3" width="18" height="18" rx="4" stroke={color} strokeWidth="2"/>
-      <Path d="M8 12v2.5a1.5 1.5 0 003 0V11M13 15.5a1 1 0 001.5.8h.5a1 1 0 001-1v-.5a1 1 0 00-1-1h-1a1 1 0 01-1-1v-.5a1 1 0 011-1h.5a1 1 0 011.5.8" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const EyeIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Circle cx="12" cy="12" r="3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const SettingsIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Circle cx="12" cy="12" r="3" stroke={color} strokeWidth="2"/>
-    </Svg>);
-};
-export const FolderIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const WipeIcon = ({ color = AppColors.white, size = 16 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <L d="M9 9L5 5M4.5 6.5l2-2"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,SunIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="5"stroke={e}strokeWidth="2"/>
+      <L d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,MoonIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"fill={e}stroke={e}strokeWidth="1.5"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>;export{BrandCircleIcon}from"./BrandCircleIcon";export{BrandSquareIcon}from"./BrandSquareIcon";export const HtmlIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M17.5 8.5L21 12l-3.5 3.5M6.5 8.5L3 12l3.5 3.5M14 4.5l-4 15"stroke={e}strokeWidth="2.5"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,CssIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,JsIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <B x="3"y="3"width="18"height="18"rx="4"stroke={e}strokeWidth="2"/>
+      <L d="M8 12v2.5a1.5 1.5 0 003 0V11M13 15.5a1 1 0 001.5.8h.5a1 1 0 001-1v-.5a1 1 0 00-1-1h-1a1 1 0 01-1-1v-.5a1 1 0 011-1h.5a1 1 0 011.5.8"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,EyeIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <M cx="12"cy="12"r="3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,SettingsIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <M cx="12"cy="12"r="3"stroke={e}strokeWidth="2"/>
+    </W>,FolderIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,WipeIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
       
-      <Path d="M19.5 3.5L12.7 10.3" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <L d="M19.5 3.5L12.7 10.3"stroke={e}strokeWidth="2"strokeLinecap="round"/>
       
-      <Path d="M13.5 9.5l1.5 1.5c.8.8.8 2 0 2.8L10 19l-5-5 5.2-5.5c.8-.8 2-.8 2.8 0z" stroke={color} strokeWidth="2" strokeLinejoin="round"/>
+      <L d="M13.5 9.5l1.5 1.5c.8.8.8 2 0 2.8L10 19l-5-5 5.2-5.5c.8-.8 2-.8 2.8 0z"stroke={e}strokeWidth="2"strokeLinejoin="round"/>
       
-      <Path d="M7.5 16.5L5.5 18.5M10 19l-1.5 1.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <L d="M7.5 16.5L5.5 18.5M10 19l-1.5 1.5"stroke={e}strokeWidth="2"strokeLinecap="round"/>
       
-      <Path d="M3 11.5h.01M5.5 8.5h.01" stroke={color} strokeWidth="2.4" strokeLinecap="round"/>
-    </Svg>);
-};
-export const LayersIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const UserIcon = ({ color = AppColors.grayTextWeak, size = 12 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Circle cx="12" cy="7" r="4" stroke={color} strokeWidth="2"/>
-    </Svg>);
-};
-export const InfoCircleIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
-      <Path d="M12 16v-4M12 8h.01" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const WarningTriangleIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M12 9v4M12 17h.01" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const ErrorCircleIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
-      <Path d="M15 9l-6 6M9 9l6 6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const TrendingUpIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M23 6l-9.5 9.5-5-5L1 18" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M17 6h6v6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const MotionIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M5 3l14 9-14 9V3z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const SortIcon = ({ ascending, color = AppColors.purple, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M12 4l-6 6h12z" fill={ascending ? color : AppColors.grayTextWeak}/>
-      <Path d="M12 20l6-6H6z" fill={!ascending ? color : AppColors.grayTextWeak}/>
-    </Svg>);
-};
-export const PrettyIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const RawIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Line x1="21" y1="6" x2="3" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Line x1="21" y1="12" x2="3" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Line x1="17" y1="18" x2="3" y2="18" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const TableIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Rect x="3" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
-      <Rect x="14" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
-      <Rect x="14" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
-      <Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
-    </Svg>);
-};
-export const PackageIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M16.5 9.4 7.55 4.24a1.78 1.78 0 0 0-2.5 1.55v12.42a1.78 1.78 0 0 0 .86 1.52l8.95 5.16a1.78 1.78 0 0 0 1.78 0l8.95-5.16a1.78 1.78 0 0 0 .86-1.52V5.79a1.78 1.78 0 0 0-2.5-1.55L16.5 9.4z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M3.29 7 12 12.01 20.71 7M12 22.08V12" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const ForwardChevronIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M9 18l6-6-6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const BundleIcon = PackageIcon;
-export const LiveStateIcon = ({ color = AppColors.purple, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="1.8" strokeDasharray="3 3" opacity={0.6}/>
-      <Circle cx="12" cy="12" r="4.5" stroke={color} strokeWidth="1.8"/>
-      <Circle cx="12" cy="12" r="2" fill={color}/>
-      <Path d="M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-    </Svg>);
-};
-export const TimelineIcon = ({ color = AppColors.purple, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M6 3v18" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Circle cx="6" cy="6" r="2.5" stroke={color} strokeWidth="1.8" fill={`${color}25`}/>
-      <Path d="M6 12h5a3 3 0 0 0 3-3V6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Circle cx="14" cy="6" r="2.5" stroke={color} strokeWidth="1.8" fill={color}/>
-      <Circle cx="6" cy="18" r="2.5" stroke={color} strokeWidth="1.8" fill={color}/>
-      <Path d="M6 18h8" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Circle cx="17" cy="18" r="2.5" stroke={color} strokeWidth="1.8" fill={`${color}25`}/>
-    </Svg>);
-};
-export const RefreshCcwIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const StorageIcon = ({ color = AppColors.purple, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Ellipse cx="12" cy="5" rx="8" ry="2.5" stroke={color} strokeWidth="1.8"/>
-      <Path d="M4 5v4.5c0 1.38 3.58 2.5 8 2.5s8-1.12 8-2.5V5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Path d="M4 9.5v4.5c0 1.38 3.58 2.5 8 2.5s8-1.12 8-2.5v-4.5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Path d="M4 14v4.5c0 1.38 3.58 2.5 8 2.5s8-1.12 8-2.5V14" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-    </Svg>);
-};
-export const MetadataIcon = ({ color = AppColors.purple, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Rect x="3" y="3" width="18" height="18" rx="4" stroke={color} strokeWidth="1.8"/>
-      <Path d="M7 8h10M7 12h6M7 16h7" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Circle cx="16.5" cy="12" r="1.5" fill={color}/>
-      <Circle cx="16.5" cy="16" r="1.5" fill={color}/>
-    </Svg>);
-};
-export const ReduxIcon = ({ color = AppColors.purple, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="4" stroke={color} strokeWidth="1.8"/>
-      <Path d="M12 3a9 9 0 0 1 9 9M12 21a9 9 0 0 1-9-9" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Circle cx="21" cy="12" r="1.5" fill={color}/>
-      <Circle cx="3" cy="12" r="1.5" fill={color}/>
-    </Svg>);
-};
-export const PerformanceIcon = ({ color = AppColors.purple, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M12 3v2M5.636 5.636l1.414 1.414M18.364 5.636l-1.414 1.414M3 12h2M19 12h2" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Path d="M12 19a7 7 0 1 0-7-7c0 1.93.784 3.68 2.05 4.95" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Path d="M12 12l3.5-3.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Circle cx="12" cy="12" r="1.5" fill={color}/>
-    </Svg>);
-};
-export const BoltIcon = ({ color = AppColors.amber500, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M13 2 4.5 13.5 H10.5 L9 22 19.5 9.5 H13.5 Z" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const BanIcon = ({ color = AppColors.errorColor, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="8.5" stroke={color} strokeWidth="1.8"/>
-      <Path d="M5.5 5.5 18.5 18.5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-    </Svg>);
-};
-export const FolderOpenIcon = ({ color = AppColors.amber500, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M8.4 11 10 5.5a2 2 0 0 1 1.9-1.5h3.7a1.5 1.5 0 0 1 1.4 2L15.5 11" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
-      <Path d="M6.7 20.4 4.3 12.9A1.6 1.6 0 0 1 5.8 11h14.6a1.6 1.6 0 0 1 1.6 1.9l-2.4 7.5a2 2 0 0 1-2 1.4H8.7a2 2 0 0 1-2-1.4Z" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const DocIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
-      <Path d="M14 2v4a2 2 0 0 0 2 2h4" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
-      <Path d="M8 13h8 M8 17h8" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-    </Svg>);
-};
-export const LightbulbIcon = ({ color = AppColors.amber500, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1.3.5 2.6 1.5 3.5.8.8 1.3 1.5 1.5 2.5" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M9 18h6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Path d="M10 22h4" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-    </Svg>);
-};
-export const SparkleIcon = ({ color = AppColors.amber500, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M11.1 3.9c.2-.6 1-.6 1.2 0l1.2 4.2 4.2 1.2c.6.2.6 1 0 1.2l-4.2 1.2-1.2 4.2c-.2.6-1 .6-1.2 0l-1.2-4.2-4.2-1.2c-.6-.2-.6-1 0-1.2l4.2-1.2Z" fill={color}/>
-      <Path d="M18.5 3.5v4 M16.5 5.5h4" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-    </Svg>);
-};
-export const MapIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M3 5.5 9 3.5l6 2 6-2v15l-6 2-6-2-6 2Z" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
-      <Path d="M9 3.5v15M15 5.5v15" stroke={color} strokeWidth="1.8"/>
-      <Circle cx="12" cy="11" r="1.9" stroke={color} strokeWidth="1.6"/>
-    </Svg>);
-};
-export const AtomIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Ellipse cx="12" cy="12" rx="9" ry="3.8" stroke={color} strokeWidth="1.6"/>
-      <Ellipse cx="12" cy="12" rx="9" ry="3.8" stroke={color} strokeWidth="1.6" transform="rotate(60 12 12)"/>
-      <Ellipse cx="12" cy="12" rx="9" ry="3.8" stroke={color} strokeWidth="1.6" transform="rotate(120 12 12)"/>
-      <Circle cx="12" cy="12" r="1.6" fill={color}/>
-    </Svg>);
-};
-export const BrainIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M9.5 2a2.5 2.5 0 0 0-2.5 2.5v.5a2.5 2.5 0 0 0-3 3.17A2.5 2.5 0 0 0 2 10.5c0 .76.34 1.44.88 1.9A2.5 2.5 0 0 0 2 15.5c0 .76.34 1.44.88 1.9A2.5 2.5 0 0 0 5 19.75c0 .75.5 1.5 1.25 1.75A2.5 2.5 0 0 0 8.5 23h.25a2.5 2.5 0 0 0 2.5-2.5V4a2.5 2.5 0 0 0-1.75-2ZM14.5 2a2.5 2.5 0 0 1 2.5 2.5v.5a2.5 2.5 0 0 1 3 3.17A2.5 2.5 0 0 1 22 10.5c0 .76-.34 1.44-.88 1.9a2.5 2.5 0 0 1 .88 1.9c0 .76-.34 1.44-.88 1.9A2.5 2.5 0 0 1 19 19.75c0 .75-.5 1.5-1.25 1.75A2.5 2.5 0 0 1 15.5 23h-.25a2.5 2.5 0 0 1-2.5-2.5V4a2.5 2.5 0 0 1 1.75-2Z" stroke={color} strokeWidth="1.6" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const TextAaIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M4 19 7.5 7 11 19" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
-      <Path d="M5.5 15h4" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Path d="M16 19l1.7-6.6 1.7 6.6" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
-      <Path d="M16.9 15.8h1.6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-    </Svg>);
-};
-export const CartIcon = ({ color = AppColors.amber500, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="9.5" cy="20" r="1.3" stroke={color} strokeWidth="1.8"/>
-      <Circle cx="18.5" cy="20" r="1.3" stroke={color} strokeWidth="1.8"/>
-      <Path d="M3 3.5h1.8a1 1 0 0 1 .97.75l3.1 9.75a1.5 1.5 0 0 0 1.44 1.1h9.2a1 1 0 0 0 .95-.7l2.5-7.5a.8.8 0 0 0-.75-1.05H7" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const MoneyIcon = ({ color = AppColors.emerald500, size = 14 }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="8.5" stroke={color} strokeWidth="1.8"/>
-      <Path d="M12 7v10M14.5 9.5c-.6-1-1.5-1.5-2.5-1.5-1.5 0-2.5.9-2.5 2s1 1.8 2.5 2 2.5.8 2.5 2-1 2-2.5 2c-1 0-1.9-.5-2.5-1.5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-    </Svg>);
-};
-export const ExternalLinkIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M15 3h6v6M10 14L21 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const PackageBoxIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const StarIcon = ({ color = '#F59E0B', size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
-      <Path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const GitHubIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const LinkChainIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const AppleIcon = ({ color = AppColors.white, size = 12, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
-      <Path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.37c.61-.75 1.04-1.8 0.92-2.87-.9.04-1.99.6-2.63 1.35-.56.65-1.06 1.71-.93 2.74 1.01.08 2.03-.47 2.64-1.22z"/>
-    </Svg>);
-};
-export const AndroidIcon = ({ color = AppColors.white, size = 12, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
-      <Path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v6c0 .83.67 1.5 1.5 1.5S5 16.33 5 15.5v-6C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v6c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-6c0-.83-.67-1.5-1.5-1.5zm-4.97-4.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 2.23 12.95 2 12 2c-.96 0-1.86.23-2.66.63L7.85 1.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.73 4.26 5.54 6 5.16 8h13.68c-.38-2-1.57-3.74-3.31-4.84zM9 6c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
-    </Svg>);
-};
-export const CodeBracketsIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M16 18l6-6-6-6M8 6l-6 6 6 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const FlameIcon = ({ color = AppColors.darkOrange, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 3z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const HourglassIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M5 22h14M5 2h14M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const PinIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M12 21s-6-5.333-6-10a6 6 0 0 1 12 0c0 4.667-6 10-6 10z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-      <Circle cx="12" cy="11" r="2" fill={color}/>
-    </Svg>);
-};
-export const RepeatIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const TargetGoalIcon = ({ color = AppColors.brandPurple, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="1.8"/>
-      <Circle cx="12" cy="12" r="6" stroke={color} strokeWidth="1.8"/>
-      <Circle cx="12" cy="12" r="2" fill={color}/>
-    </Svg>);
-};
-export const UserCheckIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-      <Circle cx="9" cy="7" r="4" stroke={color} strokeWidth="1.8"/>
-      <Path d="M16 11l2 2 4-4" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const CrashIcon = ({ color = AppColors.errorColor, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <L d="M3 11.5h.01M5.5 8.5h.01"stroke={e}strokeWidth="2.4"strokeLinecap="round"/>
+    </W>,LayersIcon=({color:e=p.grayTextWeak,size:t=12})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,UserIcon=({color:e=p.grayTextWeak,size:t=12})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <M cx="12"cy="7"r="4"stroke={e}strokeWidth="2"/>
+    </W>,InfoCircleIcon=({color:e=p.grayTextWeak,size:t=12})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="10"stroke={e}strokeWidth="2"/>
+      <L d="M12 16v-4M12 8h.01"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,WarningTriangleIcon=({color:e=p.grayTextWeak,size:t=12})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <L d="M12 9v4M12 17h.01"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,ErrorCircleIcon=({color:e=p.grayTextWeak,size:t=12})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="10"stroke={e}strokeWidth="2"/>
+      <L d="M15 9l-6 6M9 9l6 6"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,TrendingUpIcon=({color:e=p.grayTextWeak,size:t=12})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M23 6l-9.5 9.5-5-5L1 18"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <L d="M17 6h6v6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,MotionIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M5 3l14 9-14 9V3z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,SortIcon=({ascending:e,color:t=p.purple,size:I=14})=><W width={I}height={I}viewBox="0 0 24 24"fill="none">
+      <L d="M12 4l-6 6h12z"fill={e?t:p.grayTextWeak}/>
+      <L d="M12 20l6-6H6z"fill={e?p.grayTextWeak:t}/>
+    </W>,PrettyIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <L d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,RawIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <S x1="21"y1="6"x2="3"y2="6"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <S x1="21"y1="12"x2="3"y2="12"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <S x1="17"y1="18"x2="3"y2="18"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    </W>,TableIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <B x="3"y="3"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
+      <B x="14"y="3"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
+      <B x="14"y="14"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
+      <B x="3"y="14"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
+    </W>,PackageIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M16.5 9.4 7.55 4.24a1.78 1.78 0 0 0-2.5 1.55v12.42a1.78 1.78 0 0 0 .86 1.52l8.95 5.16a1.78 1.78 0 0 0 1.78 0l8.95-5.16a1.78 1.78 0 0 0 .86-1.52V5.79a1.78 1.78 0 0 0-2.5-1.55L16.5 9.4z"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+      <L d="M3.29 7 12 12.01 20.71 7M12 22.08V12"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,ForwardChevronIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M9 18l6-6-6-6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,BundleIcon=PackageIcon,LiveStateIcon=({color:e=p.purple,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="9"stroke={e}strokeWidth="1.8"strokeDasharray="3 3"opacity={.6}/>
+      <M cx="12"cy="12"r="4.5"stroke={e}strokeWidth="1.8"/>
+      <M cx="12"cy="12"r="2"fill={e}/>
+      <L d="M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    </W>,TimelineIcon=({color:e=p.purple,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M6 3v18"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <M cx="6"cy="6"r="2.5"stroke={e}strokeWidth="1.8"fill={`${e}25`}/>
+      <L d="M6 12h5a3 3 0 0 0 3-3V6"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <M cx="14"cy="6"r="2.5"stroke={e}strokeWidth="1.8"fill={e}/>
+      <M cx="6"cy="18"r="2.5"stroke={e}strokeWidth="1.8"fill={e}/>
+      <L d="M6 18h8"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <M cx="17"cy="18"r="2.5"stroke={e}strokeWidth="1.8"fill={`${e}25`}/>
+    </W>,RefreshCcwIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,StorageIcon=({color:e=p.purple,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <T cx="12"cy="5"rx="8"ry="2.5"stroke={e}strokeWidth="1.8"/>
+      <L d="M4 5v4.5c0 1.38 3.58 2.5 8 2.5s8-1.12 8-2.5V5"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <L d="M4 9.5v4.5c0 1.38 3.58 2.5 8 2.5s8-1.12 8-2.5v-4.5"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <L d="M4 14v4.5c0 1.38 3.58 2.5 8 2.5s8-1.12 8-2.5V14"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    </W>,MetadataIcon=({color:e=p.purple,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <B x="3"y="3"width="18"height="18"rx="4"stroke={e}strokeWidth="1.8"/>
+      <L d="M7 8h10M7 12h6M7 16h7"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <M cx="16.5"cy="12"r="1.5"fill={e}/>
+      <M cx="16.5"cy="16"r="1.5"fill={e}/>
+    </W>,ReduxIcon=({color:e=p.purple,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="4"stroke={e}strokeWidth="1.8"/>
+      <L d="M12 3a9 9 0 0 1 9 9M12 21a9 9 0 0 1-9-9"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <M cx="21"cy="12"r="1.5"fill={e}/>
+      <M cx="3"cy="12"r="1.5"fill={e}/>
+    </W>,PerformanceIcon=({color:e=p.purple,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M12 3v2M5.636 5.636l1.414 1.414M18.364 5.636l-1.414 1.414M3 12h2M19 12h2"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <L d="M12 19a7 7 0 1 0-7-7c0 1.93.784 3.68 2.05 4.95"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <L d="M12 12l3.5-3.5"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <M cx="12"cy="12"r="1.5"fill={e}/>
+    </W>,BoltIcon=({color:e=p.amber500,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M13 2 4.5 13.5 H10.5 L9 22 19.5 9.5 H13.5 Z"stroke={e}strokeWidth="1.8"strokeLinejoin="round"/>
+    </W>,BanIcon=({color:e=p.errorColor,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="8.5"stroke={e}strokeWidth="1.8"/>
+      <L d="M5.5 5.5 18.5 18.5"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    </W>,FolderOpenIcon=({color:e=p.amber500,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M8.4 11 10 5.5a2 2 0 0 1 1.9-1.5h3.7a1.5 1.5 0 0 1 1.4 2L15.5 11"stroke={e}strokeWidth="1.8"strokeLinejoin="round"/>
+      <L d="M6.7 20.4 4.3 12.9A1.6 1.6 0 0 1 5.8 11h14.6a1.6 1.6 0 0 1 1.6 1.9l-2.4 7.5a2 2 0 0 1-2 1.4H8.7a2 2 0 0 1-2-1.4Z"stroke={e}strokeWidth="1.8"strokeLinejoin="round"/>
+    </W>,DocIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"stroke={e}strokeWidth="1.8"strokeLinejoin="round"/>
+      <L d="M14 2v4a2 2 0 0 0 2 2h4"stroke={e}strokeWidth="1.8"strokeLinejoin="round"/>
+      <L d="M8 13h8 M8 17h8"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    </W>,LightbulbIcon=({color:e=p.amber500,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1.3.5 2.6 1.5 3.5.8.8 1.3 1.5 1.5 2.5"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+      <L d="M9 18h6"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <L d="M10 22h4"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    </W>,SparkleIcon=({color:e=p.amber500,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M11.1 3.9c.2-.6 1-.6 1.2 0l1.2 4.2 4.2 1.2c.6.2.6 1 0 1.2l-4.2 1.2-1.2 4.2c-.2.6-1 .6-1.2 0l-1.2-4.2-4.2-1.2c-.6-.2-.6-1 0-1.2l4.2-1.2Z"fill={e}/>
+      <L d="M18.5 3.5v4 M16.5 5.5h4"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    </W>,MapIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M3 5.5 9 3.5l6 2 6-2v15l-6 2-6-2-6 2Z"stroke={e}strokeWidth="1.8"strokeLinejoin="round"/>
+      <L d="M9 3.5v15M15 5.5v15"stroke={e}strokeWidth="1.8"/>
+      <M cx="12"cy="11"r="1.9"stroke={e}strokeWidth="1.6"/>
+    </W>,AtomIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <T cx="12"cy="12"rx="9"ry="3.8"stroke={e}strokeWidth="1.6"/>
+      <T cx="12"cy="12"rx="9"ry="3.8"stroke={e}strokeWidth="1.6"transform="rotate(60 12 12)"/>
+      <T cx="12"cy="12"rx="9"ry="3.8"stroke={e}strokeWidth="1.6"transform="rotate(120 12 12)"/>
+      <M cx="12"cy="12"r="1.6"fill={e}/>
+    </W>,BrainIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M9.5 2a2.5 2.5 0 0 0-2.5 2.5v.5a2.5 2.5 0 0 0-3 3.17A2.5 2.5 0 0 0 2 10.5c0 .76.34 1.44.88 1.9A2.5 2.5 0 0 0 2 15.5c0 .76.34 1.44.88 1.9A2.5 2.5 0 0 0 5 19.75c0 .75.5 1.5 1.25 1.75A2.5 2.5 0 0 0 8.5 23h.25a2.5 2.5 0 0 0 2.5-2.5V4a2.5 2.5 0 0 0-1.75-2ZM14.5 2a2.5 2.5 0 0 1 2.5 2.5v.5a2.5 2.5 0 0 1 3 3.17A2.5 2.5 0 0 1 22 10.5c0 .76-.34 1.44-.88 1.9a2.5 2.5 0 0 1 .88 1.9c0 .76-.34 1.44-.88 1.9A2.5 2.5 0 0 1 19 19.75c0 .75-.5 1.5-1.25 1.75A2.5 2.5 0 0 1 15.5 23h-.25a2.5 2.5 0 0 1-2.5-2.5V4a2.5 2.5 0 0 1 1.75-2Z"stroke={e}strokeWidth="1.6"strokeLinejoin="round"/>
+    </W>,TextAaIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M4 19 7.5 7 11 19"stroke={e}strokeWidth="1.8"strokeLinejoin="round"/>
+      <L d="M5.5 15h4"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <L d="M16 19l1.7-6.6 1.7 6.6"stroke={e}strokeWidth="1.8"strokeLinejoin="round"/>
+      <L d="M16.9 15.8h1.6"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    </W>,CartIcon=({color:e=p.amber500,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="9.5"cy="20"r="1.3"stroke={e}strokeWidth="1.8"/>
+      <M cx="18.5"cy="20"r="1.3"stroke={e}strokeWidth="1.8"/>
+      <L d="M3 3.5h1.8a1 1 0 0 1 .97.75l3.1 9.75a1.5 1.5 0 0 0 1.44 1.1h9.2a1 1 0 0 0 .95-.7l2.5-7.5a.8.8 0 0 0-.75-1.05H7"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,MoneyIcon=({color:e=p.emerald500,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="8.5"stroke={e}strokeWidth="1.8"/>
+      <L d="M12 7v10M14.5 9.5c-.6-1-1.5-1.5-2.5-1.5-1.5 0-2.5.9-2.5 2s1 1.8 2.5 2 2.5.8 2.5 2-1 2-2.5 2c-1 0-1.9-.5-2.5-1.5"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    </W>,ExternalLinkIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <L d="M15 3h6v6M10 14L21 3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,PackageBoxIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+      <L d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,StarIcon=({color:e="#F59E0B",size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill={e}>
+      <L d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"stroke={e}strokeWidth="1.5"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,GitHubIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,LinkChainIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <L d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,AppleIcon=({color:e=p.white,size:t=12})=><W width={t}height={t}viewBox="0 0 24 24"fill={e}>
+      <L d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.37c.61-.75 1.04-1.8 0.92-2.87-.9.04-1.99.6-2.63 1.35-.56.65-1.06 1.71-.93 2.74 1.01.08 2.03-.47 2.64-1.22z"/>
+    </W>,AndroidIcon=({color:e=p.white,size:t=12})=><W width={t}height={t}viewBox="0 0 24 24"fill={e}>
+      <L d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v6c0 .83.67 1.5 1.5 1.5S5 16.33 5 15.5v-6C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v6c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-6c0-.83-.67-1.5-1.5-1.5zm-4.97-4.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 2.23 12.95 2 12 2c-.96 0-1.86.23-2.66.63L7.85 1.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.73 4.26 5.54 6 5.16 8h13.68c-.38-2-1.57-3.74-3.31-4.84zM9 6c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
+    </W>,CodeBracketsIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M16 18l6-6-6-6M8 6l-6 6 6 6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,FlameIcon=({color:e=p.darkOrange,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 3z"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,HourglassIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M5 22h14M5 2h14M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,PinIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M12 21s-6-5.333-6-10a6 6 0 0 1 12 0c0 4.667-6 10-6 10z"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+      <M cx="12"cy="11"r="2"fill={e}/>
+    </W>,RepeatIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,TargetGoalIcon=({color:e=p.brandPurple,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="10"stroke={e}strokeWidth="1.8"/>
+      <M cx="12"cy="12"r="6"stroke={e}strokeWidth="1.8"/>
+      <M cx="12"cy="12"r="2"fill={e}/>
+    </W>,UserCheckIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+      <M cx="9"cy="7"r="4"stroke={e}strokeWidth="1.8"/>
+      <L d="M16 11l2 2 4-4"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,CrashIcon=({color:e=p.errorColor,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
       
-      <Path d="M12 2v3M4.93 4.93l2.12 2.12M19.07 4.93l-2.12 2.12M9 10h6M8 14h8M9 18h6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Path d="M12 8a6 6 0 0 1 6 6v3a6 6 0 0 1-12 0v-3a6 6 0 0 1 6-6z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M3 13h3M18 13h3M4 19l2.5-1.5M20 19l-2.5-1.5M4 9l2.5 1.5M20 9l-2.5 1.5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-    </Svg>);
-};
-export const ShieldAlertIcon = ({ color = AppColors.errorColor, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-      <Line x1="12" y1="8" x2="12" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Circle cx="12" cy="16" r="1" fill={color}/>
-    </Svg>);
-};
-export const SkullIcon = ({ color = AppColors.errorColor, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="1.8"/>
-      <Circle cx="9" cy="11" r="1.6" fill={color}/>
-      <Circle cx="15" cy="11" r="1.6" fill={color}/>
-      <Path d="M8 16c1.2 1 3.2 1.2 4 1.2.8 0 2.8-.2 4-1.2" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Line x1="12" y1="16" x2="12" y2="18" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-    </Svg>);
-};
-export const ChipIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Rect x="7" y="7" width="10" height="10" rx="2" stroke={color} strokeWidth="1.8"/>
-      <Rect x="10" y="10" width="4" height="4" fill={color}/>
-      <Line x1="9" y1="3" x2="9" y2="7" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
-      <Line x1="15" y1="3" x2="15" y2="7" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
-      <Line x1="9" y1="17" x2="9" y2="21" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
-      <Line x1="15" y1="17" x2="15" y2="21" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
-      <Line x1="3" y1="9" x2="7" y2="9" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
-      <Line x1="3" y1="15" x2="7" y2="15" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
-      <Line x1="17" y1="9" x2="21" y2="9" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
-      <Line x1="17" y1="15" x2="21" y2="15" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
-    </Svg>);
-};
-export const LayoutIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Rect x="3" y="3" width="18" height="18" rx="2" stroke={color} strokeWidth="1.8"/>
-      <Line x1="3" y1="9" x2="21" y2="9" stroke={color} strokeWidth="1.8"/>
-      <Line x1="9" y1="9" x2="9" y2="21" stroke={color} strokeWidth="1.8"/>
-      <Rect x="12" y="12" width="6" height="6" fill={color}/>
-    </Svg>);
-};
-export const StackTraceIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M4 6h16M4 10h11M4 14h16M4 18h9" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Path d="M7.5 12.5 4 14l3.5 1.5" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const DiagnosticsIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M3 12h3l2-5 3 9 2-6 1.5 2H21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-      <Line x1="4" y1="19" x2="20" y2="19" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
-    </Svg>);
-};
-export const TrailIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Circle cx="5" cy="18" r="2" fill={color}/>
-      <Circle cx="12" cy="12" r="2" fill={color}/>
-      <Circle cx="19" cy="6" r="2" fill={color}/>
-      <Path d="M6.5 16.5 10.5 13.5M13.5 10.5 17.5 7.5" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
-    </Svg>);
-};
-export const RawJsonIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M8 3c-2 1-3 2.5-3 5 0 2-1 3.5-2 4 1 .5 2 2 2 4 0 2.5 1 4 3 5M16 3c2 1 3 2.5 3 5 0 2 1 3.5 2 4-1 .5-2 2-2 4 0 2.5-1 4-3 5" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const AppFramesIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M4 6h16M4 10h11M4 14h16M4 18h9" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Path d="M18 12.5l2 2 3-3.5" stroke="#059669" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const AllFramesIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M4 4h16M4 8h16M4 12h16M4 16h16M4 20h10" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <Rect x="16" y="16" width="4" height="4" rx="1" fill={color}/>
-    </Svg>);
-};
-export const ListenerIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M3 18v-6a9 9 0 0 1 18 0v6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <Path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3v5zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3v5z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>);
-};
-export const LoadingSpinnerIcon = ({ color = AppColors.amber800Warm, size = 12, }) => {
-    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke={color} strokeWidth="2.2" strokeLinecap="round"/>
-    </Svg>);
-};
-export const FlaskIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M10 2v5.5L4.4 18.2A2 2 0 0 0 6.2 21h11.6a2 2 0 0 0 1.8-2.8L14 7.5V2M8.5 2h7M7 15h10" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    <Circle cx="12" cy="18" r="1" fill={color}/>
-  </Svg>);
-export const ZapIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const DiceIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Rect x="3" y="3" width="18" height="18" rx="4" stroke={color} strokeWidth="1.8"/>
-    <Circle cx="8.5" cy="8.5" r="1.5" fill={color}/>
-    <Circle cx="15.5" cy="8.5" r="1.5" fill={color}/>
-    <Circle cx="12" cy="12" r="1.5" fill={color}/>
-    <Circle cx="8.5" cy="15.5" r="1.5" fill={color}/>
-    <Circle cx="15.5" cy="15.5" r="1.5" fill={color}/>
-  </Svg>);
-export const BarChartIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M18 20V10M12 20V4M6 20v-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const KeyIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Circle cx="7.5" cy="15.5" r="4.5" stroke={color} strokeWidth="1.8"/>
-    <Path d="m11 12 8.5-8.5M16 4.5l3 3M19 7.5l2-2" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const SmartphoneIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Rect x="5" y="2" width="14" height="20" rx="3" stroke={color} strokeWidth="1.8"/>
-    <Path d="M12 18h.01" stroke={color} strokeWidth="2.5" strokeLinecap="round"/>
-  </Svg>);
-export const AlertTriangleIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M12 9v4M12 17h.01" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-  </Svg>);
-export const BugIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Rect width="8" height="12" x="8" y="8" rx="4" stroke={color} strokeWidth="1.8"/>
-    <Path d="m19 7-3 2M5 7l3 2M19 19l-3-2M5 19l3-2M20 13h-4M4 13h4M10 4l2 2 2-2" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const TagIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8 8a2 2 0 0 0 2.828 0l7.172-7.172a2 2 0 0 0 0-2.828l-8-8z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-    <Circle cx="7.5" cy="7.5" r="1.5" fill={color}/>
-  </Svg>);
-export const NpmIcon = ({ color = '#CB3837', size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 256 256" fill="none">
-    <Rect width="256" height="256" rx="32" fill={color}/>
-    <Path d="M48 48h160v160h-32V96h-32v112H48V48z" fill="#FFFFFF"/>
-  </Svg>);
-export const ResetIcon = ({ color = AppColors.white, size = 16 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M3 3v5h5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const ChevronDownIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const CpuIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Rect x="4" y="4" width="16" height="16" rx="2" stroke={color} strokeWidth="2"/>
-    <Rect x="9" y="9" width="6" height="6" stroke={color} strokeWidth="2"/>
-    <Path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-  </Svg>);
-export const WifiIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-  </Svg>);
-export const ShieldCheckIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M9 12l2 2 4-4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const DatabaseIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Ellipse cx="12" cy="5" rx="9" ry="3" stroke={color} strokeWidth="2"/>
-    <Path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    <Path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-  </Svg>);
-export const PencilIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const PlusIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M12 5v14M5 12h14" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const LockIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M7 11V7a5 5 0 0 1 10 0v4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const QrCodeIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Rect x="3" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
-    <Rect x="14" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
-    <Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
-    <Path d="M14 14h3v3h-3zM18 18h3v3h-3zM14 19h3v2h-3zM19 14h2v3h-2z" fill={color}/>
-  </Svg>);
-export const UnlockIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M7 11V7a5 5 0 0 1 9.9-1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const RocketIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09zM12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6.05 11a22.35 22.35 0 0 1-3.95 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M9 12l-4 4M15 6l-3 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const TurtleIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Ellipse cx="12" cy="14" rx="7" ry="5" stroke={color} strokeWidth="2"/>
-    <Circle cx="12" cy="6" r="3" stroke={color} strokeWidth="2"/>
-    <Path d="M5 12l-2-2M19 12l2-2M6 18l-2 2M18 18l2 2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-  </Svg>);
-export const HeadphonesIcon = ({ color = AppColors.white, size = 20, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M3 18v-6a9 9 0 0 1 18 0v6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3v5zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3v5z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const HelpCircleIcon = ({ color = AppColors.white, size = 20, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
-    <Path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Line x1="12" y1="17" x2="12.01" y2="17" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-  </Svg>);
-export const SendIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M22 2L11 13" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M22 2L15 22L11 13L2 9L22 2Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const LifeBuoyIcon = ({ color = AppColors.white, size = 20, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
-    <Circle cx="12" cy="12" r="4" stroke={color} strokeWidth="2"/>
-    <Line x1="4.93" y1="4.93" x2="9.17" y2="9.17" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    <Line x1="14.83" y1="9.17" x2="19.07" y2="4.93" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    <Line x1="14.83" y1="14.83" x2="19.07" y2="19.07" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    <Line x1="4.93" y1="19.07" x2="9.17" y2="14.83" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-  </Svg>);
-export const CameraIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Circle cx="12" cy="13" r="4" stroke={color} strokeWidth="2"/>
-  </Svg>);
-export const VideoCameraIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M23 7l-7 5 7 5V7z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Rect x="1" y="5" width="15" height="14" rx="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const MicrophoneIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M19 10v2a7 7 0 0 1-14 0v-2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Line x1="12" y1="19" x2="12" y2="23" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    <Line x1="8" y1="23" x2="16" y2="23" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-  </Svg>);
-export const GifIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Rect x="2" y="4" width="20" height="16" rx="3" stroke={color} strokeWidth="2"/>
-    <Path d="M7 10h-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h1v-2H6.5" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M12 10v4" stroke={color} strokeWidth="1.75" strokeLinecap="round"/>
-    <Path d="M18 10h-2v4M16 12h1.5" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const PlayIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M5 3l14 9-14 9V3z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const PauseIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Rect x="6" y="4" width="4" height="16" fill={color} rx="1"/>
-    <Rect x="14" y="4" width="4" height="16" fill={color} rx="1"/>
-  </Svg>);
-export const ImageIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Rect x="3" y="3" width="18" height="18" rx="2" stroke={color} strokeWidth="2"/>
-    <Circle cx="8.5" cy="8.5" r="1.5" fill={color}/>
-    <Path d="M21 15l-5-5L5 21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const FilmIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Rect x="2" y="2" width="20" height="20" rx="2.18" stroke={color} strokeWidth="2"/>
-    <Line x1="7" y1="2" x2="7" y2="22" stroke={color} strokeWidth="2"/>
-    <Line x1="17" y1="2" x2="17" y2="22" stroke={color} strokeWidth="2"/>
-    <Line x1="2" y1="12" x2="22" y2="12" stroke={color} strokeWidth="2"/>
-    <Line x1="2" y1="7" x2="7" y2="7" stroke={color} strokeWidth="2"/>
-    <Line x1="2" y1="17" x2="7" y2="17" stroke={color} strokeWidth="2"/>
-    <Line x1="17" y1="17" x2="22" y2="17" stroke={color} strokeWidth="2"/>
-    <Line x1="17" y1="7" x2="22" y2="7" stroke={color} strokeWidth="2"/>
-  </Svg>);
-export const ScreencastIcon = ({ color = AppColors.white, size = 18, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 20h.01" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const ListIcon = ({ color = AppColors.white, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Line x1="8" y1="6" x2="21" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    <Line x1="8" y1="12" x2="21" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    <Line x1="8" y1="18" x2="21" y2="18" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-    <Circle cx="4" cy="6" r="1.5" fill={color}/>
-    <Circle cx="4" cy="12" r="1.5" fill={color}/>
-    <Circle cx="4" cy="18" r="1.5" fill={color}/>
-  </Svg>);
-export const GridIcon = ({ color = AppColors.white, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Rect x="3" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
-    <Rect x="14" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
-    <Rect x="14" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
-    <Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
-  </Svg>);
-export const MinimizeWindowIcon = ({ color = AppColors.white, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M4 14h6v6M20 10h-6V4M14 10l7-7M10 14l-7 7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
+      <L d="M12 2v3M4.93 4.93l2.12 2.12M19.07 4.93l-2.12 2.12M9 10h6M8 14h8M9 18h6"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <L d="M12 8a6 6 0 0 1 6 6v3a6 6 0 0 1-12 0v-3a6 6 0 0 1 6-6z"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+      <L d="M3 13h3M18 13h3M4 19l2.5-1.5M20 19l-2.5-1.5M4 9l2.5 1.5M20 9l-2.5 1.5"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    </W>,ShieldAlertIcon=({color:e=p.errorColor,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+      <S x1="12"y1="8"x2="12"y2="12"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <M cx="12"cy="16"r="1"fill={e}/>
+    </W>,SkullIcon=({color:e=p.errorColor,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="12"cy="12"r="9"stroke={e}strokeWidth="1.8"/>
+      <M cx="9"cy="11"r="1.6"fill={e}/>
+      <M cx="15"cy="11"r="1.6"fill={e}/>
+      <L d="M8 16c1.2 1 3.2 1.2 4 1.2.8 0 2.8-.2 4-1.2"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <S x1="12"y1="16"x2="12"y2="18"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    </W>,ChipIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <B x="7"y="7"width="10"height="10"rx="2"stroke={e}strokeWidth="1.8"/>
+      <B x="10"y="10"width="4"height="4"fill={e}/>
+      <S x1="9"y1="3"x2="9"y2="7"stroke={e}strokeWidth="1.6"strokeLinecap="round"/>
+      <S x1="15"y1="3"x2="15"y2="7"stroke={e}strokeWidth="1.6"strokeLinecap="round"/>
+      <S x1="9"y1="17"x2="9"y2="21"stroke={e}strokeWidth="1.6"strokeLinecap="round"/>
+      <S x1="15"y1="17"x2="15"y2="21"stroke={e}strokeWidth="1.6"strokeLinecap="round"/>
+      <S x1="3"y1="9"x2="7"y2="9"stroke={e}strokeWidth="1.6"strokeLinecap="round"/>
+      <S x1="3"y1="15"x2="7"y2="15"stroke={e}strokeWidth="1.6"strokeLinecap="round"/>
+      <S x1="17"y1="9"x2="21"y2="9"stroke={e}strokeWidth="1.6"strokeLinecap="round"/>
+      <S x1="17"y1="15"x2="21"y2="15"stroke={e}strokeWidth="1.6"strokeLinecap="round"/>
+    </W>,LayoutIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <B x="3"y="3"width="18"height="18"rx="2"stroke={e}strokeWidth="1.8"/>
+      <S x1="3"y1="9"x2="21"y2="9"stroke={e}strokeWidth="1.8"/>
+      <S x1="9"y1="9"x2="9"y2="21"stroke={e}strokeWidth="1.8"/>
+      <B x="12"y="12"width="6"height="6"fill={e}/>
+    </W>,StackTraceIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M4 6h16M4 10h11M4 14h16M4 18h9"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <L d="M7.5 12.5 4 14l3.5 1.5"stroke={e}strokeWidth="1.4"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,DiagnosticsIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M3 12h3l2-5 3 9 2-6 1.5 2H21"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+      <S x1="4"y1="19"x2="20"y2="19"stroke={e}strokeWidth="1.6"strokeLinecap="round"/>
+    </W>,TrailIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <M cx="5"cy="18"r="2"fill={e}/>
+      <M cx="12"cy="12"r="2"fill={e}/>
+      <M cx="19"cy="6"r="2"fill={e}/>
+      <L d="M6.5 16.5 10.5 13.5M13.5 10.5 17.5 7.5"stroke={e}strokeWidth="1.6"strokeLinecap="round"/>
+    </W>,RawJsonIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M8 3c-2 1-3 2.5-3 5 0 2-1 3.5-2 4 1 .5 2 2 2 4 0 2.5 1 4 3 5M16 3c2 1 3 2.5 3 5 0 2 1 3.5 2 4-1 .5-2 2-2 4 0 2.5-1 4-3 5"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,AppFramesIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M4 6h16M4 10h11M4 14h16M4 18h9"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <L d="M18 12.5l2 2 3-3.5"stroke="#059669"strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,AllFramesIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M4 4h16M4 8h16M4 12h16M4 16h16M4 20h10"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+      <B x="16"y="16"width="4"height="4"rx="1"fill={e}/>
+    </W>,ListenerIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M3 18v-6a9 9 0 0 1 18 0v6"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+      <L d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3v5zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3v5z"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,LoadingSpinnerIcon=({color:e=p.amber800Warm,size:t=12})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"stroke={e}strokeWidth="2.2"strokeLinecap="round"/>
+    </W>,FlaskIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M10 2v5.5L4.4 18.2A2 2 0 0 0 6.2 21h11.6a2 2 0 0 0 1.8-2.8L14 7.5V2M8.5 2h7M7 15h10"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    <M cx="12"cy="18"r="1"fill={e}/>
+  </W>,ZapIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,DiceIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="3"y="3"width="18"height="18"rx="4"stroke={e}strokeWidth="1.8"/>
+    <M cx="8.5"cy="8.5"r="1.5"fill={e}/>
+    <M cx="15.5"cy="8.5"r="1.5"fill={e}/>
+    <M cx="12"cy="12"r="1.5"fill={e}/>
+    <M cx="8.5"cy="15.5"r="1.5"fill={e}/>
+    <M cx="15.5"cy="15.5"r="1.5"fill={e}/>
+  </W>,BarChartIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M18 20V10M12 20V4M6 20v-6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,KeyIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <M cx="7.5"cy="15.5"r="4.5"stroke={e}strokeWidth="1.8"/>
+    <L d="m11 12 8.5-8.5M16 4.5l3 3M19 7.5l2-2"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,SmartphoneIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="5"y="2"width="14"height="20"rx="3"stroke={e}strokeWidth="1.8"/>
+    <L d="M12 18h.01"stroke={e}strokeWidth="2.5"strokeLinecap="round"/>
+  </W>,AlertTriangleIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M12 9v4M12 17h.01"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,BugIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B width="8"height="12"x="8"y="8"rx="4"stroke={e}strokeWidth="1.8"/>
+    <L d="m19 7-3 2M5 7l3 2M19 19l-3-2M5 19l3-2M20 13h-4M4 13h4M10 4l2 2 2-2"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,TagIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8 8a2 2 0 0 0 2.828 0l7.172-7.172a2 2 0 0 0 0-2.828l-8-8z"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    <M cx="7.5"cy="7.5"r="1.5"fill={e}/>
+  </W>,NpmIcon=({color:e=p.npmRed,size:t=14})=><W width={t}height={t}viewBox="0 0 256 256"fill="none">
+    <B width="256"height="256"rx="32"fill={e}/>
+    <L d="M48 48h160v160h-32V96h-32v112H48V48z"fill={p.white}/>
+  </W>,ResetIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M3 3v5h5"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,ChevronDownIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M6 9l6 6 6-6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,MaximizeIcon=({color:e=p.white,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,MinimizeIcon=({color:e=p.white,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,CpuIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="4"y="4"width="16"height="16"rx="2"stroke={e}strokeWidth="2"/>
+    <B x="9"y="9"width="6"height="6"stroke={e}strokeWidth="2"/>
+    <L d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,WifiIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,ShieldCheckIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M9 12l2 2 4-4"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,DatabaseIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <T cx="12"cy="5"rx="9"ry="3"stroke={e}strokeWidth="2"/>
+    <L d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <L d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,PencilIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,PlusIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M12 5v14M5 12h14"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,LockIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="3"y="11"width="18"height="11"rx="2"ry="2"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M7 11V7a5 5 0 0 1 10 0v4"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,QrCodeIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="3"y="3"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
+    <B x="14"y="3"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
+    <B x="3"y="14"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
+    <L d="M14 14h3v3h-3zM18 18h3v3h-3zM14 19h3v2h-3zM19 14h2v3h-2z"fill={e}/>
+  </W>,UnlockIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="3"y="11"width="18"height="11"rx="2"ry="2"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M7 11V7a5 5 0 0 1 9.9-1"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,RocketIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09zM12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6.05 11a22.35 22.35 0 0 1-3.95 2z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M9 12l-4 4M15 6l-3 3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,TurtleIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <T cx="12"cy="14"rx="7"ry="5"stroke={e}strokeWidth="2"/>
+    <M cx="12"cy="6"r="3"stroke={e}strokeWidth="2"/>
+    <L d="M5 12l-2-2M19 12l2-2M6 18l-2 2M18 18l2 2"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,HeadphonesIcon=({color:e=p.white,size:t=20})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M3 18v-6a9 9 0 0 1 18 0v6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3v5zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3v5z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,HelpCircleIcon=({color:e=p.white,size:t=20})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <M cx="12"cy="12"r="10"stroke={e}strokeWidth="2"/>
+    <L d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <S x1="12"y1="17"x2="12.01"y2="17"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,SendIcon=({color:e=p.white,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M22 2L11 13"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M22 2L15 22L11 13L2 9L22 2Z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,LifeBuoyIcon=({color:e=p.white,size:t=20})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <M cx="12"cy="12"r="10"stroke={e}strokeWidth="2"/>
+    <M cx="12"cy="12"r="4"stroke={e}strokeWidth="2"/>
+    <S x1="4.93"y1="4.93"x2="9.17"y2="9.17"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="14.83"y1="9.17"x2="19.07"y2="4.93"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="14.83"y1="14.83"x2="19.07"y2="19.07"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="4.93"y1="19.07"x2="9.17"y2="14.83"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,CameraIcon=({color:e=p.white,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <M cx="12"cy="13"r="4"stroke={e}strokeWidth="2"/>
+  </W>,VideoCameraIcon=({color:e=p.white,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M23 7l-7 5 7 5V7z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <B x="1"y="5"width="15"height="14"rx="2"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,MicrophoneIcon=({color:e=p.white,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M19 10v2a7 7 0 0 1-14 0v-2"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <S x1="12"y1="19"x2="12"y2="23"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="8"y1="23"x2="16"y2="23"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,GifIcon=({color:e=p.white,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="2"y="4"width="20"height="16"rx="3"stroke={e}strokeWidth="2"/>
+    <L d="M7 10h-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h1v-2H6.5"stroke={e}strokeWidth="1.75"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M12 10v4"stroke={e}strokeWidth="1.75"strokeLinecap="round"/>
+    <L d="M18 10h-2v4M16 12h1.5"stroke={e}strokeWidth="1.75"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,PlayIcon=({color:e=p.white,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M5 3l14 9-14 9V3z"fill={e}stroke={e}strokeWidth="1.5"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,PauseIcon=({color:e=p.white,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="6"y="4"width="4"height="16"fill={e}rx="1"/>
+    <B x="14"y="4"width="4"height="16"fill={e}rx="1"/>
+  </W>,ImageIcon=({color:e=p.white,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="3"y="3"width="18"height="18"rx="2"stroke={e}strokeWidth="2"/>
+    <M cx="8.5"cy="8.5"r="1.5"fill={e}/>
+    <L d="M21 15l-5-5L5 21"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,FilmIcon=({color:e=p.white,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="2"y="2"width="20"height="20"rx="2.18"stroke={e}strokeWidth="2"/>
+    <S x1="7"y1="2"x2="7"y2="22"stroke={e}strokeWidth="2"/>
+    <S x1="17"y1="2"x2="17"y2="22"stroke={e}strokeWidth="2"/>
+    <S x1="2"y1="12"x2="22"y2="12"stroke={e}strokeWidth="2"/>
+    <S x1="2"y1="7"x2="7"y2="7"stroke={e}strokeWidth="2"/>
+    <S x1="2"y1="17"x2="7"y2="17"stroke={e}strokeWidth="2"/>
+    <S x1="17"y1="17"x2="22"y2="17"stroke={e}strokeWidth="2"/>
+    <S x1="17"y1="7"x2="22"y2="7"stroke={e}strokeWidth="2"/>
+  </W>,ScreencastIcon=({color:e=p.white,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 20h.01"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,ListIcon=({color:e=p.white,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <S x1="8"y1="6"x2="21"y2="6"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="8"y1="12"x2="21"y2="12"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="8"y1="18"x2="21"y2="18"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <M cx="4"cy="6"r="1.5"fill={e}/>
+    <M cx="4"cy="12"r="1.5"fill={e}/>
+    <M cx="4"cy="18"r="1.5"fill={e}/>
+  </W>,GridIcon=({color:e=p.white,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="3"y="3"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
+    <B x="14"y="3"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
+    <B x="14"y="14"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
+    <B x="3"y="14"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
+  </W>,MinimizeWindowIcon=({color:e=p.white,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M4 14h6v6M20 10h-6V4M14 10l7-7M10 14l-7 7"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,BookOpenIcon=({color:e=p.purple,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,WrenchIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,ChevronUpIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M18 15l-6-6-6 6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,MessageSquareIcon=({color:e=p.grayTextWeak,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,SparklesIcon=({color:e=p.amber500,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M12 2L14.4 7.6L20 10L14.4 12.4L12 18L9.6 12.4L4 10L9.6 7.6L12 2Z"fill={e}stroke={e}strokeWidth="1"strokeLinejoin="round"/>
+    <L d="M19 15L20.2 17.8L23 19L20.2 20.2L19 23L17.8 20.2L15 19L17.8 17.8L19 15Z"fill={e}/>
+    <L d="M5 16L5.9 18.1L8 19L5.9 19.9L5 22L4.1 19.9L2 19L4.1 18.1L5 16Z"fill={e}/>
+  </W>,AngryFaceIcon=({color:e=p.red500,size:t=20})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <M cx="12"cy="12"r="10"stroke={e}strokeWidth="1.8"/>
+    <L d="M7.5 8.5L10.5 10M16.5 8.5L13.5 10"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    <M cx="9"cy="11.5"r="1"fill={e}/>
+    <M cx="15"cy="11.5"r="1"fill={e}/>
+    <L d="M8.5 16.5C9.5 15.3 10.7 14.7 12 14.7C13.3 14.7 14.5 15.3 15.5 16.5"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+  </W>,NeutralFaceIcon=({color:e=p.amber500,size:t=20})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <M cx="12"cy="12"r="10"stroke={e}strokeWidth="1.8"/>
+    <M cx="9"cy="10"r="1.2"fill={e}/>
+    <M cx="15"cy="10"r="1.2"fill={e}/>
+    <L d="M8 15.5H16"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+  </W>,SmileFaceIcon=({color:e=p.emerald500,size:t=20})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <M cx="12"cy="12"r="10"stroke={e}strokeWidth="1.8"/>
+    <M cx="9"cy="9.5"r="1.2"fill={e}/>
+    <M cx="15"cy="9.5"r="1.2"fill={e}/>
+    <L d="M8 14C8 14 9.5 17 12 17C14.5 17 16 14 16 14"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+  </W>,StarFaceIcon=({color:e=p.purple500,size:t=20})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <M cx="12"cy="12"r="10"stroke={e}strokeWidth="1.8"/>
+    
+    <L d="M9 7.8L9.6 9.4L11.2 9.5L10 10.5L10.4 12.1L9 11.1L7.6 12.1L8 10.5L6.8 9.5L8.4 9.4L9 7.8Z"fill={e}/>
+    
+    <L d="M15 7.8L15.6 9.4L17.2 9.5L16 10.5L16.4 12.1L15 11.1L13.6 12.1L14 10.5L12.8 9.5L14.4 9.4L15 7.8Z"fill={e}/>
+    <L d="M8 14.2C8.5 16.5 10.1 17.5 12 17.5C13.9 17.5 15.5 16.5 16 14.2H8Z"fill={e}/>
+  </W>,HeartFaceIcon=({color:e=p.pink500,size:t=20})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <M cx="12"cy="12"r="10"stroke={e}strokeWidth="1.8"/>
+    
+    <L d="M9 8.2C8.3 7.4 7.2 7.5 6.7 8.2C6.1 9 6.4 10.1 9 11.6C11.6 10.1 11.9 9 11.3 8.2C10.8 7.5 9.7 7.4 9 8.2Z"fill={e}/>
+    
+    <L d="M15 8.2C14.3 7.4 13.2 7.5 12.7 8.2C12.1 9 12.4 10.1 15 11.6C17.6 10.1 17.9 9 17.3 8.2C16.8 7.5 15.7 7.4 15 8.2Z"fill={e}/>
+    <L d="M8 14.5C8 14.5 9.5 17.5 12 17.5C14.5 17.5 16 14.5 16 14.5"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+  </W>;