@nice2dev/icons 1.0.6 → 1.0.10

package/dist/esm/icons/files.js

@@ -1,252 +1,314 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createIcon } from '../createIcon.js';
 
-const NtdFile = createIcon({ displayName: 'NtdFile',
+const NtdFile = createIcon({
+    displayName: 'NtdFile',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13 2v7h7", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13 2v7h7", stroke: primaryColor, strokeWidth: strokeWidth, fill: primaryColor, opacity: secondaryOpacity + 0.1 })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", fill: primaryColor }), jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", fill: "white", opacity: "0.1" })] })),
     },
 });
-const NtdFileText = createIcon({ displayName: 'NtdFileText',
+const NtdFileText = createIcon({
+    displayName: 'NtdFileText',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", fill: primaryColor }), jsx("line", { x1: "8", y1: "13", x2: "16", y2: "13", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }), jsx("line", { x1: "8", y1: "17", x2: "14", y2: "17", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13 2v7h7", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "13", x2: "16", y2: "13", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "17", x2: "14", y2: "17", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13 2v7h7", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "13", x2: "16", y2: "13", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "17", x2: "14", y2: "17", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", fill: primaryColor }), jsx("line", { x1: "8", y1: "13", x2: "16", y2: "13", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }), jsx("line", { x1: "8", y1: "17", x2: "14", y2: "17", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", fill: primaryColor }), jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7z", fill: "white", opacity: "0.1" }), jsx("line", { x1: "8", y1: "13", x2: "16", y2: "13", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "8", y1: "17", x2: "14", y2: "17", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
-const NtdFolder = createIcon({ displayName: 'NtdFolder',
+const NtdFolder = createIcon({
+    displayName: 'NtdFolder',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", fill: primaryColor }), jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", fill: "white", opacity: "0.1" })] })),
     },
 });
-const NtdFolderOpen = createIcon({ displayName: 'NtdFolderOpen',
+const NtdFolderOpen = createIcon({
+    displayName: 'NtdFolderOpen',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", fill: primaryColor, opacity: "0.3" }), jsx("path", { d: "M2 10h20M4 21l2-11h16l-2 11H4z", stroke: primaryColor, strokeWidth: strokeWidth, fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 10h20", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 10h20", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", fill: primaryColor, opacity: "0.3" }), jsx("path", { d: "M2 10h20M4 21l2-11h16l-2 11H4z", stroke: primaryColor, strokeWidth: strokeWidth, fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", fill: primaryColor, opacity: "0.3" }), jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z", fill: "white", opacity: "0.08" }), jsx("path", { d: "M2 10h20M4 21l2-11h16l-2 11H4z", stroke: secondaryColor, strokeWidth: "2", fill: secondaryColor })] })),
     },
 });
-const NtdArchive = createIcon({ displayName: 'NtdArchive',
+const NtdArchive = createIcon({
+    displayName: 'NtdArchive',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "5", rx: "1", fill: primaryColor }), jsx("path", { d: "M4 8v11a2 2 0 002 2h12a2 2 0 002-2V8", fill: primaryColor, opacity: "0.7" }), jsx("line", { x1: "10", y1: "12", x2: "14", y2: "12", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "5", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M4 8v11a2 2 0 002 2h12a2 2 0 002-2V8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "10", y1: "12", x2: "14", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 8v11a2 2 0 002 2h12a2 2 0 002-2V8H4z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "3", width: "20", height: "5", rx: "1", fill: primaryColor, opacity: secondaryOpacity + 0.1, stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M4 8v11a2 2 0 002 2h12a2 2 0 002-2V8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "10", y1: "12", x2: "14", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "2", y: "3", width: "20", height: "5", rx: "1", fill: primaryColor }), jsx("path", { d: "M4 8v11a2 2 0 002 2h12a2 2 0 002-2V8", fill: primaryColor, opacity: "0.7" }), jsx("line", { x1: "10", y1: "12", x2: "14", y2: "12", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "5", rx: "1", fill: primaryColor }), jsx("rect", { x: "2", y: "3", width: "20", height: "5", rx: "1", fill: "white", opacity: "0.08" }), jsx("path", { d: "M4 8v11a2 2 0 002 2h12a2 2 0 002-2V8", fill: secondaryColor, opacity: "0.7" }), jsx("line", { x1: "10", y1: "12", x2: "14", y2: "12", stroke: "white", strokeWidth: "1", opacity: "0.4" })] })),
     },
 });
-const NtdDatabase = createIcon({ displayName: 'NtdDatabase',
+const NtdDatabase = createIcon({
+    displayName: 'NtdDatabase',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", fill: primaryColor }), jsx("path", { d: "M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5", fill: secondaryColor, opacity: secondaryOpacity * 0.5 }), jsx("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", fill: primaryColor }), jsx("path", { d: "M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", fill: primaryColor }), jsx("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", fill: "white", opacity: "0.1" }), jsx("path", { d: "M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("path", { d: "M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" })] })),
     },
 });
-const NtdCloud = createIcon({ displayName: 'NtdCloud',
+const NtdCloud = createIcon({
+    displayName: 'NtdCloud',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: primaryColor }), jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: "white", opacity: "0.1" })] })),
     },
 });
-const NtdCloudUpload = createIcon({ displayName: 'NtdCloudUpload',
+const NtdCloudUpload = createIcon({
+    displayName: 'NtdCloudUpload',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: primaryColor, opacity: "0.2", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M16 16l-4-4-4 4M12 12v9", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M16 16l-4-4-4 4M12 12v9", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M16 16l-4-4-4 4M12 12v9", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: primaryColor, opacity: "0.2", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M16 16l-4-4-4 4M12 12v9", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: primaryColor, opacity: "0.2", stroke: primaryColor, strokeWidth: "2" }), jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: "white", opacity: "0.1" }), jsx("path", { d: "M16 16l-4-4-4 4M12 12v9", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
-const NtdCloudDownload = createIcon({ displayName: 'NtdCloudDownload',
+const NtdCloudDownload = createIcon({
+    displayName: 'NtdCloudDownload',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: primaryColor, opacity: "0.2", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M8 17l4 4 4-4M12 12v9", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 17l4 4 4-4M12 12v9", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 17l4 4 4-4M12 12v9", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: primaryColor, opacity: "0.2", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M8 17l4 4 4-4M12 12v9", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: primaryColor, opacity: "0.2", stroke: primaryColor, strokeWidth: "2" }), jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: "white", opacity: "0.1" }), jsx("path", { d: "M8 17l4 4 4-4M12 12v9", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
-const NtdTerminal = createIcon({ displayName: 'NtdTerminal',
+const NtdTerminal = createIcon({
+    displayName: 'NtdTerminal',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "18", rx: "2", fill: primaryColor }), jsx("path", { d: "M6 9l4 3-4 3", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity }), jsx("line", { x1: "12", y1: "17", x2: "18", y2: "17", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "18", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M6 9l4 3-4 3", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "12", y1: "17", x2: "18", y2: "17", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "3", width: "20", height: "18", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M6 9l4 3-4 3", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "12", y1: "17", x2: "18", y2: "17", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "2", y: "3", width: "20", height: "18", rx: "2", fill: primaryColor }), jsx("path", { d: "M6 9l4 3-4 3", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity }), jsx("line", { x1: "12", y1: "17", x2: "18", y2: "17", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "18", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "3", width: "20", height: "18", rx: "2", fill: "white", opacity: "0.1" }), jsx("path", { d: "M6 9l4 3-4 3", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "12", y1: "17", x2: "18", y2: "17", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
-const NtdCode = createIcon({ displayName: 'NtdCode',
+const NtdCode = createIcon({
+    displayName: 'NtdCode',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M16 18l6-6-6-6M8 6l-6 6 6 6", stroke: primaryColor, strokeWidth: strokeWidth })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M16 18l6-6-6-6M8 6l-6 6 6 6", stroke: primaryColor, strokeWidth: strokeWidth })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M8 6l-6 6 6 6", stroke: secondaryColor, strokeWidth: strokeWidth, opacity: secondaryOpacity + 0.2 }), jsx("path", { d: "M16 18l6-6-6-6M8 6l-6 6 6 6", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M16 18l6-6-6-6M8 6l-6 6 6 6", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M16 18l6-6-6-6M8 6l-6 6 6 6", stroke: primaryColor, strokeWidth: "2.2" }) })),
     },
 });
-const NtdGit = createIcon({ displayName: 'NtdGit',
+const NtdGit = createIcon({
+    displayName: 'NtdGit',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "18", r: "3", fill: primaryColor }), jsx("circle", { cx: "6", cy: "6", r: "3", fill: primaryColor }), jsx("circle", { cx: "18", cy: "6", r: "3", fill: primaryColor }), jsx("line", { x1: "6", y1: "9", x2: "6", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M18 9v1a2 2 0 01-2 2H8a2 2 0 00-2 2v1", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "18", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "6", cy: "6", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "18", cy: "6", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M6 9v3m0 0a2 2 0 002 2h4m0 0V15m0-1h4a2 2 0 002-2V9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "6", cy: "6", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "6", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "18", r: "3", fill: primaryColor }), jsx("circle", { cx: "6", cy: "6", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "18", cy: "6", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M6 9v3a2 2 0 002 2h4V15m0-1h4a2 2 0 002-2V9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("circle", { cx: "12", cy: "18", r: "3", fill: primaryColor }), jsx("circle", { cx: "6", cy: "6", r: "3", fill: primaryColor }), jsx("circle", { cx: "18", cy: "6", r: "3", fill: primaryColor }), jsx("line", { x1: "6", y1: "9", x2: "6", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M18 9v1a2 2 0 01-2 2H8a2 2 0 00-2 2v1", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "18", r: "3", fill: primaryColor }), jsx("circle", { cx: "12", cy: "18", r: "3", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "6", cy: "6", r: "3", fill: secondaryColor }), jsx("circle", { cx: "18", cy: "6", r: "3", fill: "#3B82F6" }), jsx("line", { x1: "6", y1: "9", x2: "6", y2: "12", stroke: "white", strokeWidth: "1" }), jsx("path", { d: "M18 9v1a2 2 0 01-2 2H8a2 2 0 00-2 2v1", stroke: "white", strokeWidth: "1" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "15", stroke: "white", strokeWidth: "1" })] })),
     },
 });
-const NtdPackage = createIcon({ displayName: 'NtdPackage',
+const NtdPackage = createIcon({
+    displayName: 'NtdPackage',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M16.5 9.4l-9-5.19M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M16.5 9.4l-9-5.19M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 12.01l8.73-5.05L21 8v8a2 2 0 01-1 1.73l-7 4a2 2 0 01-1 .35V12.01z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M16.5 9.4l-9-5.19M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M16.5 9.4l-9-5.19M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: "2" }), jsx("path", { d: "M16.5 9.4l-9-5.19M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", fill: "white", opacity: "0.1" }), jsx("path", { d: "M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
-const NtdLayers = createIcon({ displayName: 'NtdLayers',
+const NtdLayers = createIcon({
+    displayName: 'NtdLayers',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z", fill: primaryColor }), jsx("path", { d: "M2 17l10 5 10-5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 12l10 5 10-5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 17l10 5 10-5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 12l10 5 10-5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 17l10 5 10-5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 12l10 5 10-5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z", fill: primaryColor }), jsx("path", { d: "M2 17l10 5 10-5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 12l10 5 10-5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z", fill: primaryColor }), jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z", fill: "white", opacity: "0.1" }), jsx("path", { d: "M2 17l10 5 10-5", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("path", { d: "M2 12l10 5 10-5", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" })] })),
     },
 });
-const NtdGrid = createIcon({ displayName: 'NtdGrid',
+const NtdGrid = createIcon({
+    displayName: 'NtdGrid',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", fill: primaryColor }), jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1.5", fill: primaryColor }), jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1.5", fill: primaryColor }), jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1.5", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", fill: primaryColor }), jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1.5", fill: primaryColor }), jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1.5", fill: primaryColor }), jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1.5", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", fill: primaryColor }), jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", fill: "white", opacity: "0.08" }), jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1.5", fill: secondaryColor }), jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1.5", fill: "#3B82F6" }), jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1.5", fill: "#F59E0B" })] })),
     },
 });
-const NtdList = createIcon({ displayName: 'NtdList',
+const NtdList = createIcon({
+    displayName: 'NtdList',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "8", y1: "6", x2: "21", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "18", x2: "21", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "3.5", cy: "6", r: "1.5", fill: primaryColor }), jsx("circle", { cx: "3.5", cy: "12", r: "1.5", fill: primaryColor }), jsx("circle", { cx: "3.5", cy: "18", r: "1.5", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "8", y1: "6", x2: "21", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "18", x2: "21", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "3.5", cy: "6", r: "1", stroke: primaryColor, strokeWidth: "1", fill: "none" }), jsx("circle", { cx: "3.5", cy: "12", r: "1", stroke: primaryColor, strokeWidth: "1", fill: "none" }), jsx("circle", { cx: "3.5", cy: "18", r: "1", stroke: primaryColor, strokeWidth: "1", fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12", stroke: secondaryColor, strokeWidth: strokeWidth, opacity: secondaryOpacity + 0.2 }), jsx("line", { x1: "8", y1: "6", x2: "21", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "18", x2: "21", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "3.5", cy: "6", r: "1.5", fill: primaryColor }), jsx("circle", { cx: "3.5", cy: "12", r: "1.5", fill: primaryColor }), jsx("circle", { cx: "3.5", cy: "18", r: "1.5", fill: primaryColor })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("line", { x1: "8", y1: "6", x2: "21", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "18", x2: "21", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "3.5", cy: "6", r: "1.5", fill: primaryColor }), jsx("circle", { cx: "3.5", cy: "12", r: "1.5", fill: primaryColor }), jsx("circle", { cx: "3.5", cy: "18", r: "1.5", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "3.5", cy: "6", r: "1.5", fill: primaryColor }), jsx("circle", { cx: "3.5", cy: "6", r: "1.5", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "3.5", cy: "12", r: "1.5", fill: secondaryColor }), jsx("circle", { cx: "3.5", cy: "18", r: "1.5", fill: "#3B82F6" }), jsx("line", { x1: "8", y1: "6", x2: "21", y2: "6", stroke: "white", strokeWidth: "1" }), jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12", stroke: "white", strokeWidth: "1" }), jsx("line", { x1: "8", y1: "18", x2: "21", y2: "18", stroke: "white", strokeWidth: "1" })] })),
     },
 });
-const NtdTable = createIcon({ displayName: 'NtdTable',
+const NtdTable = createIcon({
+    displayName: 'NtdTable',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "3", y1: "15", x2: "21", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "3", y1: "15", x2: "21", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "3", y1: "15", x2: "21", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "3", y1: "15", x2: "21", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: "2" }), jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: "white", opacity: "0.1" }), jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "3", y1: "15", x2: "21", y2: "15", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
-const NtdSmartphone = createIcon({ displayName: 'NtdSmartphone',
+const NtdSmartphone = createIcon({
+    displayName: 'NtdSmartphone',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: primaryColor }), jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: primaryColor }), jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: primaryColor }), jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: "white", opacity: "0.1" }), jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
-const NtdMonitor = createIcon({ displayName: 'NtdMonitor',
+const NtdMonitor = createIcon({
+    displayName: 'NtdMonitor',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: primaryColor }), jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: primaryColor }), jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: "white", opacity: "0.1" }), jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
-const NtdCpu = createIcon({ displayName: 'NtdCpu',
+const NtdCpu = createIcon({
+    displayName: 'NtdCpu',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", fill: primaryColor }), jsx("path", { d: "M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", fill: primaryColor }), jsx("path", { d: "M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", fill: primaryColor }), jsx("path", { d: "M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: "2" }), jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: "white", opacity: "0.08" }), jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", fill: secondaryColor }), jsx("path", { d: "M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3", stroke: "white", strokeWidth: "1" })] })),
     },
 });
-const NtdZap = createIcon({ displayName: 'NtdZap',
+const NtdZap = createIcon({
+    displayName: 'NtdZap',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z", fill: primaryColor }), jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z", fill: "white", opacity: "0.1" })] })),
     },
 });
-const NtdKey = createIcon({ displayName: 'NtdKey',
+const NtdKey = createIcon({
+    displayName: 'NtdKey',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.78 7.78 5.5 5.5 0 017.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "7.5", cy: "16.5", r: "1.5", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.78 7.78 5.5 5.5 0 017.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4", stroke: primaryColor, strokeWidth: strokeWidth })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "8", cy: "16", r: "5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.78 7.78 5.5 5.5 0 017.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "7.5", cy: "16.5", r: "1.5", fill: primaryColor })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.78 7.78 5.5 5.5 0 017.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "7.5", cy: "16.5", r: "1.5", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "7.5", cy: "16.5", r: "1.5", fill: primaryColor }), jsx("circle", { cx: "7.5", cy: "16.5", r: "1.5", fill: "white", opacity: "0.1" }), jsx("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.78 7.78 5.5 5.5 0 017.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
-const NtdAward = createIcon({ displayName: 'NtdAward',
+const NtdAward = createIcon({
+    displayName: 'NtdAward',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "8", r: "7", fill: primaryColor }), jsx("path", { d: "M8.21 13.89L7 23l5-3 5 3-1.21-9.12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "8", r: "7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8.21 13.89L7 23l5-3 5 3-1.21-9.12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "8", r: "7", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "8", r: "7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8.21 13.89L7 23l5-3 5 3-1.21-9.12", fill: secondaryColor, opacity: secondaryOpacity, stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("circle", { cx: "12", cy: "8", r: "7", fill: primaryColor }), jsx("path", { d: "M8.21 13.89L7 23l5-3 5 3-1.21-9.12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "8", r: "7", fill: primaryColor }), jsx("circle", { cx: "12", cy: "8", r: "7", fill: "white", opacity: "0.1" }), jsx("path", { d: "M8.21 13.89L7 23l5-3 5 3-1.21-9.12", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" })] })),
     },
 });
-const NtdCoffee = createIcon({ displayName: 'NtdCoffee',
+const NtdCoffee = createIcon({
+    displayName: 'NtdCoffee',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8h1a4 4 0 010 8h-1M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z", fill: primaryColor }), jsx("line", { x1: "6", y1: "1", x2: "6", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "10", y1: "1", x2: "10", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "14", y1: "1", x2: "14", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8h1a4 4 0 010 8h-1M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "6", y1: "1", x2: "6", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "10", y1: "1", x2: "10", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "14", y1: "1", x2: "14", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M18 8h1a4 4 0 010 8h-1M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "6", y1: "1", x2: "6", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "10", y1: "1", x2: "10", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "14", y1: "1", x2: "14", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M18 8h1a4 4 0 010 8h-1M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z", fill: primaryColor }), jsx("line", { x1: "6", y1: "1", x2: "6", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "10", y1: "1", x2: "10", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "14", y1: "1", x2: "14", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8h1a4 4 0 010 8h-1M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z", fill: primaryColor }), jsx("path", { d: "M18 8h1a4 4 0 010 8h-1M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z", fill: "white", opacity: "0.1" }), jsx("line", { x1: "6", y1: "1", x2: "6", y2: "4", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "10", y1: "1", x2: "10", y2: "4", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("line", { x1: "14", y1: "1", x2: "14", y2: "4", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
-const NtdCart = createIcon({ displayName: 'NtdCart',
+const NtdCart = createIcon({
+    displayName: 'NtdCart',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "9", cy: "21", r: "1.5", fill: primaryColor }), jsx("circle", { cx: "20", cy: "21", r: "1.5", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "9", cy: "21", r: "1", stroke: primaryColor, strokeWidth: "1.5", fill: "none" }), jsx("circle", { cx: "20", cy: "21", r: "1", stroke: primaryColor, strokeWidth: "1.5", fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M6 6h17l-1.68 8.39a2 2 0 01-2 1.61H9.68a2 2 0 01-2-1.61L6 6z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "9", cy: "21", r: "1.5", fill: primaryColor }), jsx("circle", { cx: "20", cy: "21", r: "1.5", fill: primaryColor })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "9", cy: "21", r: "1.5", fill: primaryColor }), jsx("circle", { cx: "20", cy: "21", r: "1.5", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: "2" }), jsx("path", { d: "M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "9", cy: "21", r: "1.5", fill: secondaryColor }), jsx("circle", { cx: "20", cy: "21", r: "1.5", fill: "#3B82F6" })] })),
     },
 });
-const NtdCreditCard = createIcon({ displayName: 'NtdCreditCard',
+const NtdCreditCard = createIcon({
+    displayName: 'NtdCreditCard',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "1", y: "4", width: "22", height: "16", rx: "2", fill: primaryColor }), jsx("line", { x1: "1", y1: "10", x2: "23", y2: "10", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "1", y: "4", width: "22", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "1", y1: "10", x2: "23", y2: "10", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "1", y: "4", width: "22", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "1", y: "4", width: "22", height: "6", rx: "2", fill: primaryColor, opacity: secondaryOpacity + 0.2 }), jsx("rect", { x: "1", y: "4", width: "22", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "1", y1: "10", x2: "23", y2: "10", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "1", y: "4", width: "22", height: "16", rx: "2", fill: primaryColor }), jsx("line", { x1: "1", y1: "10", x2: "23", y2: "10", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "1", y: "4", width: "22", height: "16", rx: "2", fill: primaryColor }), jsx("rect", { x: "1", y: "4", width: "22", height: "16", rx: "2", fill: "white", opacity: "0.1" }), jsx("line", { x1: "1", y1: "10", x2: "23", y2: "10", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
-const NtdPieChart = createIcon({ displayName: 'NtdPieChart',
+const NtdPieChart = createIcon({
+    displayName: 'NtdPieChart',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: primaryColor, opacity: "0.3", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: secondaryColor, opacity: secondaryOpacity, stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", fill: primaryColor, stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: primaryColor, opacity: "0.3", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: primaryColor, opacity: "0.3", stroke: primaryColor, strokeWidth: "2" }), jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: "white", opacity: "0.08" }), jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", fill: secondaryColor })] })),
     },
 });
-const NtdBarChart = createIcon({ displayName: 'NtdBarChart',
+const NtdBarChart = createIcon({
+    displayName: 'NtdBarChart',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "18", y: "8", width: "4", height: "14", rx: "1", fill: primaryColor }), jsx("rect", { x: "10", y: "4", width: "4", height: "18", rx: "1", fill: primaryColor }), jsx("rect", { x: "2", y: "12", width: "4", height: "10", rx: "1", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "18", y: "8", width: "4", height: "14", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "10", y: "4", width: "4", height: "18", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "2", y: "12", width: "4", height: "10", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "18", y: "8", width: "4", height: "14", rx: "1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "12", width: "4", height: "10", rx: "1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "10", y: "4", width: "4", height: "18", rx: "1", fill: primaryColor }), jsx("rect", { x: "18", y: "8", width: "4", height: "14", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "2", y: "12", width: "4", height: "10", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "18", y: "8", width: "4", height: "14", rx: "1", fill: primaryColor }), jsx("rect", { x: "10", y: "4", width: "4", height: "18", rx: "1", fill: primaryColor }), jsx("rect", { x: "2", y: "12", width: "4", height: "10", rx: "1", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "18", y: "8", width: "4", height: "14", rx: "1", fill: primaryColor }), jsx("rect", { x: "18", y: "8", width: "4", height: "14", rx: "1", fill: "white", opacity: "0.08" }), jsx("rect", { x: "10", y: "4", width: "4", height: "18", rx: "1", fill: secondaryColor }), jsx("rect", { x: "2", y: "12", width: "4", height: "10", rx: "1", fill: "#3B82F6" })] })),
     },
 });
-const NtdActivity = createIcon({ displayName: 'NtdActivity',
+const NtdActivity = createIcon({
+    displayName: 'NtdActivity',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2", stroke: primaryColor, strokeWidth: strokeWidth })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2", stroke: primaryColor, strokeWidth: strokeWidth })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2", stroke: secondaryColor, strokeWidth: "4", opacity: secondaryOpacity }), jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2", stroke: primaryColor, strokeWidth: "2.2" }) })),
     },
 });
-const NtdTarget = createIcon({ displayName: 'NtdTarget',
+const NtdTarget = createIcon({
+    displayName: 'NtdTarget',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "2", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "2", fill: primaryColor })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "2", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "2", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "2", fill: "white", opacity: "0.1" }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "6", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" })] })),
     },
 });
-const NtdTruck = createIcon({ displayName: 'NtdTruck',
+const NtdTruck = createIcon({
+    displayName: 'NtdTruck',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "1", y: "3", width: "15", height: "13", rx: "1", fill: primaryColor }), jsx("path", { d: "M16 8h4l3 3v5h-7V8z", fill: primaryColor, opacity: "0.7", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "5.5", cy: "18.5", r: "2.5", fill: primaryColor, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }), jsx("circle", { cx: "18.5", cy: "18.5", r: "2.5", fill: primaryColor, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 3h15v13H1z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M16 8h4l3 3v5h-7V8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "5.5", cy: "18.5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "18.5", cy: "18.5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 3h15v13H1z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M16 8h4l3 3v5h-7V8z", fill: secondaryColor, opacity: secondaryOpacity + 0.1 }), jsx("path", { d: "M1 3h15v13H1z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M16 8h4l3 3v5h-7V8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "5.5", cy: "18.5", r: "2.5", fill: primaryColor }), jsx("circle", { cx: "18.5", cy: "18.5", r: "2.5", fill: primaryColor })] })),
         flat: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "1", y: "3", width: "15", height: "13", rx: "1", fill: primaryColor }), jsx("path", { d: "M16 8h4l3 3v5h-7V8z", fill: primaryColor, opacity: "0.7", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "5.5", cy: "18.5", r: "2.5", fill: primaryColor, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }), jsx("circle", { cx: "18.5", cy: "18.5", r: "2.5", fill: primaryColor, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "1", y: "3", width: "15", height: "13", rx: "1", fill: primaryColor }), jsx("rect", { x: "1", y: "3", width: "15", height: "13", rx: "1", fill: "white", opacity: "0.08" }), jsx("path", { d: "M16 8h4l3 3v5h-7V8z", fill: secondaryColor, opacity: "0.7", stroke: secondaryColor, strokeWidth: "2" }), jsx("circle", { cx: "5.5", cy: "18.5", r: "2.5", fill: "#3B82F6", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("circle", { cx: "18.5", cy: "18.5", r: "2.5", fill: "#F59E0B", stroke: "#F59E0B", strokeWidth: "1.5" })] })),
     },
 });