react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
244 lines (243 loc) • 44.4 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { cn } from '../../../utils';
// SVG Icon Collection - All icons use kebab-case naming
const ICONS = {
// Documentation Icons
alert: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 3v12" }), _jsx("path", { d: "M12 19v.01" }), _jsx("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" })] })),
badge: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "8" }), _jsx("path", { d: "M8.5 9.5l3.5 3.5 3.5-3.5" })] })),
card: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" })] })),
icon: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M12 3v3m0 12v3m9-9h-3m-12 0h-3" }), _jsx("path", { d: "M18.364 5.636l-2.121 2.121m-8.486 8.486l-2.121 2.121m12.728 0l-2.121-2.121m-8.486-8.486l-2.121-2.121" })] })),
input: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "6", width: "18", height: "12", rx: "2" }), _jsx("line", { x1: "7", y1: "12", x2: "17", y2: "12" })] })),
modal: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }), _jsx("line", { x1: "17", y1: "6", x2: "19", y2: "6" })] })),
progress: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "10", width: "18", height: "4", rx: "2" }), _jsx("rect", { x: "3", y: "10", width: "12", height: "4", rx: "2", fill: "currentColor" })] })),
select: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "6", width: "18", height: "12", rx: "2" }), _jsx("path", { d: "M15 10l-3 3-3-3" })] })),
toggle: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "8", width: "18", height: "8", rx: "4" }), _jsx("circle", { cx: "15", cy: "12", r: "3", fill: "currentColor" })] })),
text: (_jsxs(_Fragment, { children: [_jsx("line", { x1: "4", y1: "7", x2: "20", y2: "7" }), _jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }), _jsx("line", { x1: "4", y1: "17", x2: "20", y2: "17" })] })),
form: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("line", { x1: "7", y1: "8", x2: "17", y2: "8" }), _jsx("line", { x1: "7", y1: "12", x2: "17", y2: "12" }), _jsx("line", { x1: "7", y1: "16", x2: "13", y2: "16" })] })),
stats: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3 3v18h18" }), _jsx("path", { d: "M7 12l4-4 4 4 4-4" }), _jsx("path", { d: "M7 17l4-4 4 4 4-4" })] })),
tabs: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("path", { d: "M3 9h18" }), _jsx("path", { d: "M3 9c0-2 2-3 3-3h4c1 0 3 1 3 3" })] })),
footer: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "12", width: "18", height: "9", rx: "2" }), _jsx("line", { x1: "7", y1: "16", x2: "17", y2: "16" })] })),
navbar: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "6", rx: "2" }), _jsx("circle", { cx: "7", cy: "6", r: "1" }), _jsx("line", { x1: "11", y1: "6", x2: "17", y2: "6" })] })),
sidebar: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "6", height: "18", rx: "2" }), _jsx("line", { x1: "12", y1: "7", x2: "20", y2: "7" }), _jsx("line", { x1: "12", y1: "12", x2: "20", y2: "12" }), _jsx("line", { x1: "12", y1: "17", x2: "20", y2: "17" })] })),
atom: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M12 21.7C7 21.7 2.3 17 2.3 12S7 2.3 12 2.3 21.7 7 21.7 12 17 21.7 12 21.7z" }), _jsx("path", { d: "M12 16.7c-4.7 0-8.4-2.1-8.4-4.7s3.7-4.7 8.4-4.7 8.4 2.1 8.4 4.7-3.7 4.7-8.4 4.7z" })] })),
molecule: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "6", r: "3" }), _jsx("circle", { cx: "6", cy: "18", r: "3" }), _jsx("circle", { cx: "18", cy: "18", r: "3" }), _jsx("line", { x1: "12", y1: "9", x2: "6", y2: "15" }), _jsx("line", { x1: "12", y1: "9", x2: "18", y2: "15" })] })),
organism: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("circle", { cx: "4", cy: "12", r: "2" }), _jsx("circle", { cx: "20", cy: "12", r: "2" }), _jsx("circle", { cx: "12", cy: "4", r: "2" }), _jsx("circle", { cx: "12", cy: "20", r: "2" }), _jsx("line", { x1: "12", y1: "6", x2: "12", y2: "9" }), _jsx("line", { x1: "12", y1: "15", x2: "12", y2: "18" }), _jsx("line", { x1: "6", y1: "12", x2: "9", y2: "12" }), _jsx("line", { x1: "15", y1: "12", x2: "18", y2: "12" })] })),
// Alert Icons
success: (_jsx("path", { d: "M20 6L9 17l-5-5" })),
warning: (_jsxs(_Fragment, { children: [_jsx("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" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] })),
'alert-triangle': (_jsxs(_Fragment, { children: [_jsx("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" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] })),
error: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] })),
'x-circle': (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] })),
cross: (_jsxs(_Fragment, { children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] })),
fail: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] })),
info: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })] })),
'alert-circle': (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] })),
'help-circle': (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] })),
// Navigation Icons
hamburger: (_jsxs(_Fragment, { children: [_jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })] })),
close: (_jsxs(_Fragment, { children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] })),
x: (_jsxs(_Fragment, { children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] })),
login: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "12", cy: "7", r: "4" })] })),
logout: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }), _jsx("polyline", { points: "16,17 21,12 16,7" }), _jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })] })),
// Action Icons
search: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "m21 21-4.35-4.35" })] })),
'mouse-pointer': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" }), _jsx("path", { d: "M13 13l6 6" })] })),
'chevron-down': (_jsx("polyline", { points: "6,9 12,15 18,9" })),
'chevron-up': (_jsx("polyline", { points: "18,15 12,9 6,15" })),
'chevron-left': (_jsx("polyline", { points: "15,18 9,12 15,6" })),
'chevron-right': (_jsx("polyline", { points: "9,18 15,12 9,6" })),
'arrow-left': (_jsxs(_Fragment, { children: [_jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }), _jsx("polyline", { points: "12,19 5,12 12,5" })] })),
'arrow-right': (_jsxs(_Fragment, { children: [_jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }), _jsx("polyline", { points: "12,5 19,12 12,19" })] })),
'arrow-up': (_jsxs(_Fragment, { children: [_jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }), _jsx("polyline", { points: "5,12 12,5 19,12" })] })),
'arrow-down': (_jsxs(_Fragment, { children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("polyline", { points: "19,12 12,19 5,12" })] })),
// Media Icons
camera: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" }), _jsx("circle", { cx: "12", cy: "13", r: "3" })] })),
play: (_jsx(_Fragment, { children: _jsx("polygon", { points: "5,3 19,12 5,21 5,3" }) })),
'play-circle': (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("polygon", { points: "10,8 16,12 10,16 10,8" })] })),
sun: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "5" }), _jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }), _jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }), _jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }), _jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }), _jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }), _jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }), _jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }), _jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })] })),
moon: (_jsx(_Fragment, { children: _jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) })),
pause: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "6", y: "4", width: "4", height: "16" }), _jsx("rect", { x: "14", y: "4", width: "4", height: "16" })] })),
'skip-back': (_jsxs(_Fragment, { children: [_jsx("polygon", { points: "19,20 9,12 19,4 19,20" }), _jsx("line", { x1: "5", y1: "19", x2: "5", y2: "5" })] })),
'skip-forward': (_jsxs(_Fragment, { children: [_jsx("polygon", { points: "5,4 15,12 5,20 5,4" }), _jsx("line", { x1: "19", y1: "5", x2: "19", y2: "19" })] })),
volume: (_jsxs(_Fragment, { children: [_jsx("polygon", { points: "11,5 6,9 2,9 2,15 6,15 11,19 11,5" }), _jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }), _jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })] })),
'volume-off': (_jsxs(_Fragment, { children: [_jsx("polygon", { points: "11,5 6,9 2,9 2,15 6,15 11,19 11,5" }), _jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })] })),
'volume-1': (_jsxs(_Fragment, { children: [_jsx("polygon", { points: "11,5 6,9 2,9 2,15 6,15 11,19 11,5" }), _jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })] })),
'volume-2': (_jsxs(_Fragment, { children: [_jsx("polygon", { points: "11,5 6,9 2,9 2,15 6,15 11,19 11,5" }), _jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }), _jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })] })),
// Action Icons
check: (_jsx("polyline", { points: "20,6 9,17 4,12" })),
'check-square': (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("polyline", { points: "9,12 11,14 15,10" })] })),
square: (_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" })),
plus: (_jsxs(_Fragment, { children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] })),
'plus-circle': (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "8", x2: "12", y2: "16" }), _jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12" })] })),
minus: (_jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })),
settings: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.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-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-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-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 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 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })] })),
// User & Social Icons
user: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "12", cy: "7", r: "4" })] })),
'thumbs-up': (_jsx(_Fragment, { children: _jsx("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }) })),
'thumbs-down': (_jsx(_Fragment, { children: _jsx("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.28a2 2 0 0 1 2 1.7l1.38 9a2 2 0 0 1-2 2.3H17" }) })),
'user-plus': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "8.5", cy: "7", r: "4" }), _jsx("line", { x1: "20", y1: "8", x2: "20", y2: "14" }), _jsx("line", { x1: "23", y1: "11", x2: "17", y2: "11" })] })),
'user-x': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "8.5", cy: "7", r: "4" }), _jsx("line", { x1: "18", y1: "8", x2: "22", y2: "12" }), _jsx("line", { x1: "22", y1: "8", x2: "18", y2: "12" })] })),
'user-check': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "8.5", cy: "7", r: "4" }), _jsx("path", { d: "M17 11l3 3-7 7-4-4" })] })),
home: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("polyline", { points: "9,22 9,12 15,12 15,22" })] })),
mail: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }), _jsx("polyline", { points: "22,6 12,13 2,6" })] })),
phone: (_jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" })),
heart: (_jsx(_Fragment, { children: _jsx("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" }) })),
'heart-filled': (_jsx(_Fragment, { children: _jsx("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z", fill: "currentColor" }) })),
star: (_jsx(_Fragment, { children: _jsx("polygon", { points: "12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" }) })),
share: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "18", cy: "5", r: "3" }), _jsx("circle", { cx: "6", cy: "12", r: "3" }), _jsx("circle", { cx: "18", cy: "19", r: "3" }), _jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49" }), _jsx("line", { x1: "15.41", y1: "6.51", x2: "8.59", y2: "10.49" })] })),
eye: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] })),
'eye-off': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), _jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })] })),
// File & Document Icons
'file-text': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14,2 14,8 20,8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }), _jsx("polyline", { points: "10,9 9,9 8,9" })] })),
attachment: (_jsx(_Fragment, { children: _jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) })),
download: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "7,10 12,15 17,10" }), _jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] })),
upload: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "17,8 12,3 7,8" }), _jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })] })),
edit: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), _jsx("path", { d: "m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z" })] })),
'edit-3': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 20h9" }), _jsx("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })] })),
trash: (_jsxs(_Fragment, { children: [_jsx("polyline", { points: "3,6 5,6 21,6" }), _jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })] })),
'trash-2': (_jsxs(_Fragment, { children: [_jsx("polyline", { points: "3,6 5,6 21,6" }), _jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }), _jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }), _jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })] })),
copy: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] })),
link: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }), _jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })] })),
'external-link': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), _jsx("polyline", { points: "15,3 21,3 21,9" }), _jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] })),
// Time & Date Icons
calendar: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), _jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), _jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] })),
clock: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("polyline", { points: "12,6 12,12 16,14" })] })),
'map-pin': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }), _jsx("circle", { cx: "12", cy: "10", r: "3" })] })),
tag: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" }), _jsx("line", { x1: "7", y1: "7", x2: "7.01", y2: "7" })] })),
filter: (_jsx(_Fragment, { children: _jsx("polygon", { points: "22,3 2,3 10,12.46 10,19 14,21 14,12.46" }) })),
refresh: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M23 4v6h-6" }), _jsx("path", { d: "M1 20v-6h6" }), _jsx("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })] })),
'refresh-cw': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M23 4v6h-6" }), _jsx("path", { d: "M1 20v-6h6" }), _jsx("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })] })),
spinner: (_jsx(_Fragment, { children: _jsx("path", { d: "M21 12a9 9 0 11-6.219-8.56" }) })),
'loader-2': (_jsx(_Fragment, { children: _jsx("path", { d: "M21 12a9 9 0 11-6.219-8.56" }) })),
// Additional Icons for Showcase
menu: (_jsxs(_Fragment, { children: [_jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })] })),
dollar: (_jsxs(_Fragment, { children: [_jsx("line", { x1: "12", y1: "1", x2: "12", y2: "23" }), _jsx("path", { d: "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" })] })),
'dollar-sign': (_jsxs(_Fragment, { children: [_jsx("line", { x1: "12", y1: "1", x2: "12", y2: "23" }), _jsx("path", { d: "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" })] })),
euro: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M16 6c-6 0-10 2.7-10 6s4 6 10 6" }), _jsx("line", { x1: "4", y1: "10", x2: "13", y2: "10" }), _jsx("line", { x1: "4", y1: "14", x2: "13", y2: "14" })] })),
'euro-sign': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M18 6c-3.3 0-6 2.7-6 6s2.7 6 6 6" }), _jsx("line", { x1: "6", y1: "9", x2: "18", y2: "9" }), _jsx("line", { x1: "6", y1: "15", x2: "18", y2: "15" })] })),
currency: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 6v12" }), _jsx("path", { d: "M8 9h8" }), _jsx("path", { d: "M8 15h8" })] })),
users: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "9", cy: "7", r: "4" }), _jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }), _jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] })),
// Activity & Analytics Icons
activity: (_jsx(_Fragment, { children: _jsx("polyline", { points: "22,12 18,12 15,21 9,3 6,12 2,12" }) })),
chart: (_jsxs(_Fragment, { children: [_jsx("line", { x1: "18", y1: "20", x2: "18", y2: "10" }), _jsx("line", { x1: "12", y1: "20", x2: "12", y2: "4" }), _jsx("line", { x1: "6", y1: "20", x2: "6", y2: "14" })] })),
'bar-chart-2': (_jsxs(_Fragment, { children: [_jsx("line", { x1: "18", y1: "20", x2: "18", y2: "10" }), _jsx("line", { x1: "12", y1: "20", x2: "12", y2: "4" }), _jsx("line", { x1: "6", y1: "20", x2: "6", y2: "14" })] })),
target: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("circle", { cx: "12", cy: "12", r: "6" }), _jsx("circle", { cx: "12", cy: "12", r: "2" })] })),
zap: (_jsx(_Fragment, { children: _jsx("polygon", { points: "13,2 3,14 12,14 11,22 21,10 12,10" }) })),
'trending-up': (_jsxs(_Fragment, { children: [_jsx("polyline", { points: "23,6 13.5,15.5 8.5,10.5 1,18" }), _jsx("polyline", { points: "17,6 23,6 23,12" })] })),
'trending-down': (_jsxs(_Fragment, { children: [_jsx("polyline", { points: "23,18 13.5,8.5 8.5,13.5 1,6" }), _jsx("polyline", { points: "17,18 23,18 23,12" })] })),
repeat: (_jsxs(_Fragment, { children: [_jsx("polyline", { points: "17,1 21,5 17,9" }), _jsx("path", { d: "M3,11V9a4,4,0,0,1,4-4h14" }), _jsx("polyline", { points: "7,23 3,19 7,15" }), _jsx("path", { d: "M21,13v2a4,4,0,0,1-4,4H3" })] })),
// Award & Recognition Icons
award: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "8", r: "6" }), _jsx("path", { d: "M15.477 12.89L17 22l-5-3-5 3 1.523-9.11" })] })),
gift: (_jsxs(_Fragment, { children: [_jsx("polyline", { points: "20,12 20,22 4,22 4,12" }), _jsx("rect", { x: "2", y: "7", width: "20", height: "5" }), _jsx("line", { x1: "12", y1: "22", x2: "12", y2: "7" }), _jsx("path", { d: "M7 7h.01" }), _jsx("path", { d: "M17 7h.01" })] })),
// Design & UI Icons
palette: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "13.5", cy: "6.5", r: "2.5" }), _jsx("circle", { cx: "17.5", cy: "10.5", r: "2.5" }), _jsx("circle", { cx: "8.5", cy: "7.5", r: "2.5" }), _jsx("circle", { cx: "6.5", cy: "12.5", r: "2.5" }), _jsx("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" })] })),
components: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "7", height: "7" }), _jsx("rect", { x: "14", y: "3", width: "7", height: "7" }), _jsx("rect", { x: "14", y: "14", width: "7", height: "7" }), _jsx("rect", { x: "3", y: "14", width: "7", height: "7" })] })),
responsive: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }), _jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21" }), _jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21" })] })),
smartphone: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }), _jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })] })),
code: (_jsxs(_Fragment, { children: [_jsx("polyline", { points: "16,18 22,12 16,6" }), _jsx("polyline", { points: "8,6 2,12 8,18" })] })),
'shield-check': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }), _jsx("path", { d: "M9 12l2 2 4-4" })] })),
'shield-off': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M19.69 14a6.9 6.9 0 0 0 .31-2V5l-8-3-3.16 1.18" }), _jsx("path", { d: "M4.73 4.73L4 5v7c0 6 8 10 8 10a20.29 20.29 0 0 0 5.62-4.38" }), _jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })] })),
accessibility: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }), _jsx("rect", { x: "8", y: "2", width: "8", height: "4", rx: "1", ry: "1" }), _jsx("path", { d: "M9 14h6" }), _jsx("path", { d: "M9 18h6" }), _jsx("path", { d: "M9 10h6" })] })),
// Knowledge & Learning Icons
book: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M4 19.5A2.5 2.5 0 0 1 6.5 17H20" }), _jsx("path", { d: "M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" })] })),
'book-open': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" }), _jsx("path", { d: "M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" })] })),
'graduation-cap': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M22 10v6M2 10l10-5 10 5-10 5z" }), _jsx("path", { d: "M6 12v5c3 3 9 3 12 0v-5" })] })),
lessons: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" }), _jsx("path", { d: "M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" })] })),
// Security & System Icons
lock: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), _jsx("circle", { cx: "12", cy: "16", r: "1" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] })),
block: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] })),
cpu: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", ry: "2" }), _jsx("rect", { x: "9", y: "9", width: "6", height: "6" }), _jsx("line", { x1: "9", y1: "1", x2: "9", y2: "4" }), _jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4" }), _jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23" }), _jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23" }), _jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9" }), _jsx("line", { x1: "20", y1: "14", x2: "23", y2: "14" }), _jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9" }), _jsx("line", { x1: "1", y1: "14", x2: "4", y2: "14" })] })),
'hard-drive': (_jsxs(_Fragment, { children: [_jsx("line", { x1: "22", y1: "12", x2: "2", y2: "12" }), _jsx("path", { d: "M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" }), _jsx("line", { x1: "6", y1: "16", x2: "6.01", y2: "16" }), _jsx("line", { x1: "10", y1: "16", x2: "10.01", y2: "16" })] })),
// Status & Feedback Icons
circle: (_jsx("circle", { cx: "12", cy: "12", r: "10" })),
'check-circle': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), _jsx("polyline", { points: "22,4 12,14.01 9,11.01" })] })),
// Business & Commerce Icons
'shopping-cart': (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "9", cy: "21", r: "1" }), _jsx("circle", { cx: "20", cy: "21", r: "1" }), _jsx("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })] })),
receipt: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1-2-1z" }), _jsx("path", { d: "M14 8H8" }), _jsx("path", { d: "M16 12H8" }), _jsx("path", { d: "M13 16H8" })] })),
undo: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3 7v6h6" }), _jsx("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })] })),
'shopping-bag': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" }), _jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }), _jsx("path", { d: "M16 10a4 4 0 0 1-8 0" })] })),
'credit-card': (_jsxs(_Fragment, { children: [_jsx("rect", { x: "1", y: "4", width: "22", height: "16", rx: "2", ry: "2" }), _jsx("line", { x1: "1", y1: "10", x2: "23", y2: "10" })] })),
// Media & Content Icons
cloud: (_jsx(_Fragment, { children: _jsx("path", { d: "M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" }) })),
image: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), _jsx("polyline", { points: "21,15 16,10 5,21" })] })),
file: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14,2 14,8 20,8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }), _jsx("polyline", { points: "10,9 9,9 8,9" })] })),
video: (_jsxs(_Fragment, { children: [_jsx("polygon", { points: "23,7 16,12 23,17 23,7" }), _jsx("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })] })),
// Communication Icons
chat: (_jsx(_Fragment, { children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4v-4H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" }) })),
'message-square': (_jsx(_Fragment, { children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4v-4H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" }) })),
headphones: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3 14v3a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" }), _jsx("path", { d: "M21 14v3a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2z" }), _jsx("path", { d: "M5 12h4" }), _jsx("path", { d: "M15 12h4" }), _jsx("path", { d: "M9 12v-2a3 3 0 0 1 6 0v2" })] })),
ticket: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z" }), _jsx("path", { d: "M13 5v2" }), _jsx("path", { d: "M13 11v2" }), _jsx("path", { d: "M13 17v2" })] })),
timer: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("polyline", { points: "12,6 12,12 16,14" })] })),
message: (_jsx(_Fragment, { children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4v-4H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" }) })),
'message-circle': (_jsx(_Fragment, { children: _jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }) })),
// Professional & Business Icons
briefcase: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "2", y: "7", width: "20", height: "14", rx: "2", ry: "2" }), _jsx("path", { d: "M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" })] })),
// Social Media Icons
twitter: (_jsx("path", { d: "M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" })),
// Additional Action Icons
save: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }), _jsx("polyline", { points: "17,21 17,13 7,13 7,21" }), _jsx("polyline", { points: "7,3 7,8 15,8" })] })),
folder: (_jsx("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" })),
facebook: (_jsx(_Fragment, { children: _jsx("path", { d: "M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" }) })),
instagram: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "5", ry: "5" }), _jsx("path", { d: "M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" }), _jsx("line", { x1: "17.5", y1: "6.5", x2: "17.51", y2: "6.5" })] })),
youtube: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" }), _jsx("polygon", { points: "9.75,15.02 15.5,11.75 9.75,8.48 9.75,15.02" })] })),
github: (_jsx(_Fragment, { children: _jsx("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" }) })),
linkedin: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" }), _jsx("rect", { x: "2", y: "9", width: "4", height: "12" }), _jsx("circle", { cx: "4", cy: "4", r: "2" })] })),
discord: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M9 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" }), _jsx("path", { d: "M15 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" }), _jsx("path", { d: "M7.835 12c0 3.314-2.686 6-6 6s-6-2.686-6-6 2.686-6 6-6 6 2.686 6 6z" }), _jsx("path", { d: "M16.165 12c0 3.314 2.686 6 6 6s6-2.686 6-6-2.686-6-6-6-6 2.686-6 6z" }), _jsx("path", { d: "M7.835 12c0-3.314-2.686-6-6-6s-6 2.686-6 6 2.686 6 6 6 6-2.686 6-6z" }), _jsx("path", { d: "M16.165 12c0-3.314 2.686-6 6-6s6 2.686 6 6-2.686 6-6 6-6-2.686-6-6z" })] })),
reddit: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" }), _jsx("path", { d: "M16 12c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2z" }), _jsx("path", { d: "M8 12c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2z" }), _jsx("path", { d: "M12 18c-2.5 0-4.5-1.5-5.5-3.5" })] })),
twitch: (_jsx(_Fragment, { children: _jsx("path", { d: "M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7" }) })),
snapchat: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" }), _jsx("path", { d: "M8 12c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2z" }), _jsx("path", { d: "M12 8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })] })),
tiktok: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M9 12a3 3 0 1 0 3 3V9a6 6 0 0 0 6 6" }), _jsx("path", { d: "M15 9a3 3 0 1 1-3 3V3a6 6 0 0 1 6 6" })] })),
whatsapp: (_jsx(_Fragment, { children: _jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }) })),
telegram: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M22 2L11 13" }), _jsx("path", { d: "M22 2l-7 20-4-9-9-4 20-7z" })] })),
pinterest: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" }), _jsx("path", { d: "M8 12c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2z" }), _jsx("path", { d: "M12 8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })] })),
spotify: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" }), _jsx("path", { d: "M8 12c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2z" }), _jsx("path", { d: "M12 8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })] })),
shield: (_jsx(_Fragment, { children: _jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) })),
truck: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "1", y: "3", width: "15", height: "13" }), _jsx("polygon", { points: "16,8 20,8 23,11 23,16 16,16 16,8" }), _jsx("circle", { cx: "5.5", cy: "18.5", r: "2.5" }), _jsx("circle", { cx: "18.5", cy: "18.5", r: "2.5" })] })),
// Layout & Navigation Icons
grid: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "7", height: "7" }), _jsx("rect", { x: "14", y: "3", width: "7", height: "7" }), _jsx("rect", { x: "14", y: "14", width: "7", height: "7" }), _jsx("rect", { x: "3", y: "14", width: "7", height: "7" })] })),
list: (_jsxs(_Fragment, { children: [_jsx("line", { x1: "8", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "8", y1: "18", x2: "21", y2: "18" }), _jsx("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }), _jsx("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }), _jsx("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })] })),
'list-ordered': (_jsxs(_Fragment, { children: [_jsx("line", { x1: "10", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "10", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "10", y1: "18", x2: "21", y2: "18" }), _jsx("path", { d: "M4 6h1v4" }), _jsx("path", { d: "M4 10h2" }), _jsx("path", { d: "M5 18V4a2 2 0 0 1 2-2h.5a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-.5a2 2 0 0 1-2-2z" })] })),
bold: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }), _jsx("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })] })),
italic: (_jsxs(_Fragment, { children: [_jsx("line", { x1: "21", y1: "4", x2: "8", y2: "4" }), _jsx("line", { x1: "7", y1: "20", x2: "19", y2: "20" }), _jsx("line", { x1: "15", y1: "4", x2: "13", y2: "20" })] })),
underline: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" }), _jsx("line", { x1: "4", y1: "21", x2: "20", y2: "21" })] })),
'indent-increase': (_jsxs(_Fragment, { children: [_jsx("polyline", { points: "17 8 21 12 17 16" }), _jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "3", y1: "6", x2: "3", y2: "6" }), _jsx("line", { x1: "3", y1: "18", x2: "3", y2: "18" })] })),
'indent-decrease': (_jsxs(_Fragment, { children: [_jsx("polyline", { points: "9 8 5 12 9 16" }), _jsx("line", { x1: "21", y1: "12", x2: "3", y2: "12" }), _jsx("line", { x1: "21", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "21", y1: "18", x2: "21", y2: "18" })] })),
// Notification Icons
bell: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), _jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })] })),
megaphone: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3 11l18-5v12l-18-5z" }), _jsx("path", { d: "M11.6 6.2a3 3 0 0 1 5.8 1.4c0 1.3-2 2-2 2" }), _jsx("path", { d: "M9 17v-3a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v3" })] })),
// Global & Location Icons
globe: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }), _jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })] })),
flag: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }), _jsx("line", { x1: "4", y1: "22", x2: "4", y2: "15" })] })),
status: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M12 1v6m0 6v6" }), _jsx("path", { d: "M19.78 4.22l-4.24 4.24m0 7.08l4.24 4.24" }), _jsx("path", { d: "M4.22 4.22l4.24 4.24m0 7.08l-4.24 4.24" })] })),
// Additional Icons for Documentation
api: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M4 7h16" }), _jsx("path", { d: "M4 12h16" }), _jsx("path", { d: "M4 17h16" }), _jsx("circle", { cx: "8", cy: "7", r: "1" }), _jsx("circle", { cx: "8", cy: "12", r: "1" }), _jsx("circle", { cx: "8", cy: "17", r: "1" })] })),
level: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("rect", { x: "6", y: "6", width: "12", height: "3", rx: "1", ry: "1", fill: "currentColor" }), _jsx("rect", { x: "6", y: "12", width: "8", height: "3", rx: "1", ry: "1", fill: "currentColor" }), _jsx("rect", { x: "6", y: "18", width: "4", height: "3", rx: "1", ry: "1", fill: "currentColor" })] })),
expand: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M7 10l5 5 5-5" }), _jsx("path", { d: "M3 4h18" }), _jsx("path", { d: "M3 20h18" })] })),
'maximize-2': (_jsxs(_Fragment, { children: [_jsx("polyline", { points: "15,3 21,3 21,9" }), _jsx("polyline", { points: "9,21 3,21 3,15" }), _jsx("line", { x1: "21", y1: "3", x2: "14", y2: "10" }), _jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })] })),
animation: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 6v6l4 2" }), _jsx("path", { d: "M8 8l8 8" }), _jsx("path", { d: "M16 8l-8 8" })] })),
server: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2", ry: "2" }), _jsx("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2", ry: "2" }), _jsx("line", { x1: "6", y1: "6", x2: "6.01", y2: "6" }), _jsx("line", { x1: "6", y1: "18", x2: "6.01", y2: "18" })] })),
database: (_jsxs(_Fragment, { children: [_jsx("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }), _jsx("path", { d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" }), _jsx("path", { d: "M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" })] })),
// Utility & General Icons
'more-horizontal': (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "1" }), _jsx("circle", { cx: "19", cy: "12", r: "1" }), _jsx("circle", { cx: "5", cy: "12", r: "1" })] })),
// Travel & Documents Icons
passport: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "4", y: "3", width: "16", height: "18", rx: "2", ry: "2" }), _jsx("circle", { cx: "12", cy: "10", r: "3" }), _jsx("line", { x1: "12", y1: "7", x2: "12", y2: "13" }), _jsx("line", { x1: "9", y1: "10", x2: "15", y2: "10" }), _jsx("line", { x1: "8", y1: "16", x2: "16", y2: "16" })] })),
food: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M18 8h1a4 4 0 0 1 0 8h-1" }), _jsx("path", { d: "M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4Z" }), _jsx("line", { x1: "6", y1: "1", x2: "6", y2: "4" }), _jsx("line", { x1: "10", y1: "1", x2: "10", y2: "4" }), _jsx("line", { x1: "14", y1: "1", x2: "14", y2: "4" })] })),
};
export const Icon = ({ name, size = 'md', color, variant, className, isHoverable = true, ...props }) => {
const iconContent = ICONS[name];
if (!iconContent) {
console.warn(`Icon "${name}" not found`);
return null;
}
const sizeMap = {
xs: 12,
sm: 16,
md: 20,
lg: 24,
xl: 32,
xxl: 48,
};
const iconSize = typeof size === 'number' ? size : sizeMap[size];
return (_jsx("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn('icon', `icon--${size}`, variant && `icon--${variant}`, isHoverable && 'icon--hoverable', className), style: color ? { color } : undefined, ...props, children: iconContent }));
};