@nice2dev/icons 1.0.8 → 1.0.10

package/dist/esm/icons/devtech.js

@@ -1,140 +1,174 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createIcon } from '../createIcon.js';
 
-createIcon({ displayName: 'NtdCode',
+createIcon({
+    displayName: 'NtdCode',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "16,18 22,12 16,6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("polyline", { points: "8,6 2,12 8,18", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "16,18 22,12 16,6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("polyline", { points: "8,6 2,12 8,18", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "16,18 22,12 16,6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("polyline", { points: "8,6 2,12 8,18", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.3 })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("polyline", { points: "16,18 22,12 16,6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("polyline", { points: "8,6 2,12 8,18", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "16,18 22,12 16,6", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsx("polyline", { points: "8,6 2,12 8,18", stroke: secondaryColor, strokeWidth: "2", fill: "none" })] })),
     },
 });
-const NtdBrackets = createIcon({ displayName: 'NtdBrackets',
+const NtdBrackets = createIcon({
+    displayName: 'NtdBrackets',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M8 3H6a2 2 0 00-2 2v5.5L2 12l2 1.5V19a2 2 0 002 2h2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M16 3h2a2 2 0 012 2v5.5l2 1.5-2 1.5V19a2 2 0 01-2 2h-2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M8 3H6a2 2 0 00-2 2v5.5L2 12l2 1.5V19a2 2 0 002 2h2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M16 3h2a2 2 0 012 2v5.5l2 1.5-2 1.5V19a2 2 0 01-2 2h-2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M8 3H6a2 2 0 00-2 2v5.5L2 12l2 1.5V19a2 2 0 002 2h2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M16 3h2a2 2 0 012 2v5.5l2 1.5-2 1.5V19a2 2 0 01-2 2h-2", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.3 })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M8 3H6a2 2 0 00-2 2v5.5L2 12l2 1.5V19a2 2 0 002 2h2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M16 3h2a2 2 0 012 2v5.5l2 1.5-2 1.5V19a2 2 0 01-2 2h-2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M8 3H6a2 2 0 00-2 2v5.5L2 12l2 1.5V19a2 2 0 002 2h2", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsx("path", { d: "M16 3h2a2 2 0 012 2v5.5l2 1.5-2 1.5V19a2 2 0 01-2 2h-2", stroke: secondaryColor, strokeWidth: "2", fill: "none" })] })),
     },
 });
-createIcon({ displayName: 'NtdDatabase',
+createIcon({
+    displayName: 'NtdDatabase',
     paths: {
         solid: ({ primaryColor, secondaryColor, 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: secondaryColor, strokeWidth: "1.5", fill: "none", opacity: 0.5 }), 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("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: secondaryColor, strokeWidth: "1.5", fill: "none", opacity: 0.5 }), 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 NtdServer = createIcon({ displayName: 'NtdServer',
+const NtdServer = createIcon({
+    displayName: 'NtdServer',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2", fill: primaryColor }), jsx("circle", { cx: "6", cy: "6", r: "1", fill: accentColor, opacity: accentOpacity }), jsx("circle", { cx: "6", cy: "18", r: "1", fill: accentColor, opacity: accentOpacity }), jsx("line", { x1: "10", y1: "6", x2: "18", y2: "6", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity * 0.5 }), jsx("line", { x1: "10", y1: "18", x2: "18", y2: "18", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity * 0.5 })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "6", cy: "6", r: "1", fill: primaryColor }), jsx("circle", { cx: "6", cy: "18", r: "1", fill: primaryColor })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "6", cy: "6", r: "1", fill: primaryColor }), jsx("circle", { cx: "6", cy: "18", r: "1", 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: "2", y: "2", width: "20", height: "8", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2", fill: primaryColor }), jsx("circle", { cx: "6", cy: "6", r: "1", fill: accentColor, opacity: accentOpacity }), jsx("circle", { cx: "6", cy: "18", r: "1", fill: accentColor, opacity: accentOpacity }), jsx("line", { x1: "10", y1: "6", x2: "18", y2: "6", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity * 0.5 }), jsx("line", { x1: "10", y1: "18", x2: "18", y2: "18", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity * 0.5 })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2", fill: "white", opacity: "0.08" }), jsx("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2", fill: secondaryColor }), jsx("circle", { cx: "6", cy: "6", r: "1", fill: "#3B82F6" }), jsx("circle", { cx: "6", cy: "18", r: "1", fill: "#10B981" }), jsx("line", { x1: "10", y1: "6", x2: "18", y2: "6", stroke: "white", strokeWidth: "1", opacity: "0.35" }), jsx("line", { x1: "10", y1: "18", x2: "18", y2: "18", stroke: "white", strokeWidth: "1", opacity: "0.35" })] })),
     },
 });
-createIcon({ displayName: '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" })] })),
     },
 });
-createIcon({ displayName: '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 }), jsx("polyline", { points: "16,16 12,12 8,16", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "20", 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("polyline", { points: "16,16 12,12 8,16", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "20", 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("polyline", { points: "16,16 12,12 8,16", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "20", 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 }), jsx("polyline", { points: "16,16 12,12 8,16", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "20", 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 }), jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: "white", opacity: "0.1" }), jsx("polyline", { points: "16,16 12,12 8,16", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "20", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
-createIcon({ displayName: '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 }), jsx("polyline", { points: "8,16 12,20 16,16", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "20", 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("polyline", { points: "8,16 12,20 16,16", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "20", 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("polyline", { points: "8,16 12,20 16,16", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "20", 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 }), jsx("polyline", { points: "8,16 12,20 16,16", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "20", 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 }), jsx("path", { d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z", fill: "white", opacity: "0.1" }), jsx("polyline", { points: "8,16 12,20 16,16", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "20", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
-const NtdGitBranch = createIcon({ displayName: 'NtdGitBranch',
+const NtdGitBranch = createIcon({
+    displayName: 'NtdGitBranch',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "6", cy: "6", r: "3", fill: primaryColor }), jsx("circle", { cx: "18", cy: "6", r: "3", fill: primaryColor }), jsx("circle", { cx: "6", cy: "18", r: "3", fill: primaryColor }), jsx("line", { x1: "6", y1: "9", x2: "6", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M18 9c0 6-12 6-12 9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [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("circle", { cx: "6", cy: "18", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "6", y1: "9", x2: "6", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M18 9c0 6-12 6-12 9", 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: "6", cy: "18", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), 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("circle", { cx: "6", cy: "18", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "6", y1: "9", x2: "6", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M18 9c0 6-12 6-12 9", 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: "6", cy: "6", r: "3", fill: primaryColor }), jsx("circle", { cx: "18", cy: "6", r: "3", fill: primaryColor }), jsx("circle", { cx: "6", cy: "18", r: "3", fill: primaryColor }), jsx("line", { x1: "6", y1: "9", x2: "6", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M18 9c0 6-12 6-12 9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "6", cy: "6", r: "3", fill: primaryColor }), jsx("circle", { cx: "6", cy: "6", r: "3", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "18", cy: "6", r: "3", fill: secondaryColor }), jsx("circle", { cx: "6", cy: "18", r: "3", fill: "#3B82F6" }), jsx("line", { x1: "6", y1: "9", x2: "6", y2: "15", stroke: "white", strokeWidth: "1" }), jsx("path", { d: "M18 9c0 6-12 6-12 9", stroke: "white", strokeWidth: "1", fill: "none" })] })),
     },
 });
-const NtdGitCommit = createIcon({ displayName: 'NtdGitCommit',
+const NtdGitCommit = createIcon({
+    displayName: 'NtdGitCommit',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "4", fill: primaryColor }), jsx("line", { x1: "1.05", y1: "12", x2: "8", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "16", y1: "12", x2: "22.95", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "1.05", y1: "12", x2: "8", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "16", y1: "12", x2: "22.95", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "4", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "1.05", y1: "12", x2: "8", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "16", y1: "12", x2: "22.95", y2: "12", 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: "12", r: "4", fill: primaryColor }), jsx("line", { x1: "1.05", y1: "12", x2: "8", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "16", y1: "12", x2: "22.95", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "4", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "4", fill: "white", opacity: "0.1" }), jsx("line", { x1: "1.05", y1: "12", x2: "8", y2: "12", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "16", y1: "12", x2: "22.95", y2: "12", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
-const NtdGitMerge = createIcon({ displayName: 'NtdGitMerge',
+const NtdGitMerge = createIcon({
+    displayName: 'NtdGitMerge',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "18", cy: "18", r: "3", fill: primaryColor }), jsx("circle", { cx: "6", cy: "6", r: "3", fill: primaryColor }), jsx("path", { d: "M6 9v12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M6 9c0 6 12 6 12 9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "18", 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("path", { d: "M6 9v12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M6 9c0 6 12 6 12 9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "18", cy: "18", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "6", cy: "6", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", 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("path", { d: "M6 9v12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M6 9c0 6 12 6 12 9", 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: "18", cy: "18", r: "3", fill: primaryColor }), jsx("circle", { cx: "6", cy: "6", r: "3", fill: primaryColor }), jsx("path", { d: "M6 9v12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M6 9c0 6 12 6 12 9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "18", cy: "18", r: "3", fill: primaryColor }), jsx("circle", { cx: "18", cy: "18", r: "3", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "6", cy: "6", r: "3", fill: secondaryColor }), jsx("path", { d: "M6 9v12", stroke: "white", strokeWidth: "1" }), jsx("path", { d: "M6 9c0 6 12 6 12 9", stroke: "white", strokeWidth: "1", fill: "none" })] })),
     },
 });
-createIcon({ displayName: 'NtdCpu',
+createIcon({
+    displayName: 'NtdCpu',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: primaryColor }), jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", fill: accentColor, opacity: accentOpacity }), jsx("line", { x1: "9", y1: "1", x2: "9", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "20", y1: "15", x2: "23", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "1", y1: "15", x2: "4", y2: "15", 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("line", { x1: "9", y1: "1", x2: "9", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "20", y1: "15", x2: "23", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "1", y1: "15", x2: "4", y2: "15", 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", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "9", y1: "1", x2: "9", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "20", y1: "15", x2: "23", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "1", y1: "15", x2: "4", y2: "15", 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: "4", y: "4", width: "16", height: "16", rx: "2", fill: primaryColor }), jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", fill: accentColor, opacity: accentOpacity }), jsx("line", { x1: "9", y1: "1", x2: "9", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "20", y1: "15", x2: "23", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "1", y1: "15", x2: "4", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: primaryColor }), 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("line", { x1: "9", y1: "1", x2: "9", y2: "4", stroke: "white", strokeWidth: "1" }), jsx("line", { x1: "15", y1: "1", x2: "15", y2: "4", stroke: "white", strokeWidth: "1" }), jsx("line", { x1: "9", y1: "20", x2: "9", y2: "23", stroke: "white", strokeWidth: "1" }), jsx("line", { x1: "15", y1: "20", x2: "15", y2: "23", stroke: "white", strokeWidth: "1" }), jsx("line", { x1: "20", y1: "9", x2: "23", y2: "9", stroke: "white", strokeWidth: "1" }), jsx("line", { x1: "20", y1: "15", x2: "23", y2: "15", stroke: "white", strokeWidth: "1" }), jsx("line", { x1: "1", y1: "9", x2: "4", y2: "9", stroke: "white", strokeWidth: "1" }), jsx("line", { x1: "1", y1: "15", x2: "4", y2: "15", stroke: "white", strokeWidth: "1" })] })),
     },
 });
-createIcon({ displayName: 'NtdWifi',
+createIcon({
+    displayName: 'NtdWifi',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 12.55a11 11 0 0114.08 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M1.42 9a16 16 0 0121.16 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8.53 16.11a6 6 0 016.95 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "20", r: "1.5", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 12.55a11 11 0 0114.08 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M1.42 9a16 16 0 0121.16 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8.53 16.11a6 6 0 016.95 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "20", r: "1", fill: primaryColor })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1.42 9a16 16 0 0121.16 0", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.1 }), jsx("path", { d: "M5 12.55a11 11 0 0114.08 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8.53 16.11a6 6 0 016.95 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "20", 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: "M5 12.55a11 11 0 0114.08 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M1.42 9a16 16 0 0121.16 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8.53 16.11a6 6 0 016.95 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "20", r: "1.5", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "20", r: "1.5", fill: primaryColor }), jsx("circle", { cx: "12", cy: "20", r: "1.5", fill: "white", opacity: "0.1" }), jsx("path", { d: "M5 12.55a11 11 0 0114.08 0", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("path", { d: "M1.42 9a16 16 0 0121.16 0", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" }), jsx("path", { d: "M8.53 16.11a6 6 0 016.95 0", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" })] })),
     },
 });
-createIcon({ displayName: 'NtdBluetooth',
+createIcon({
+    displayName: 'NtdBluetooth',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M6.5 6.5l11 11L12 23V1l5.5 5.5-11 11", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M6.5 6.5l11 11L12 23V1l5.5 5.5-11 11", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 1l5.5 5.5L12 12l5.5 5.5L12 23", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsx("path", { d: "M6.5 6.5L12 12l-5.5 5.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "1", x2: "12", y2: "23", 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: "M6.5 6.5l11 11L12 23V1l5.5 5.5-11 11", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M6.5 6.5l11 11L12 23V1l5.5 5.5-11 11", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }) })),
     },
 });
-const NtdBattery = createIcon({ displayName: 'NtdBattery',
+const NtdBattery = createIcon({
+    displayName: 'NtdBattery',
     paths: {
         solid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "1", y: "6", width: "18", height: "12", rx: "2", fill: primaryColor }), jsx("line", { x1: "23", y1: "10", x2: "23", y2: "14", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("rect", { x: "4", y: "9", width: "8", height: "6", rx: "1", fill: secondaryColor, opacity: 0.4 })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "1", y: "6", width: "18", height: "12", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "23", y1: "10", x2: "23", y2: "14", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "1", y: "6", width: "18", height: "12", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "1", y: "6", width: "18", height: "12", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "23", y1: "10", x2: "23", y2: "14", 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: "1", y: "6", width: "18", height: "12", rx: "2", fill: primaryColor }), jsx("line", { x1: "23", y1: "10", x2: "23", y2: "14", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("rect", { x: "4", y: "9", width: "8", height: "6", rx: "1", fill: secondaryColor, opacity: 0.4 })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "1", y: "6", width: "18", height: "12", rx: "2", fill: primaryColor }), jsx("rect", { x: "1", y: "6", width: "18", height: "12", rx: "2", fill: "white", opacity: "0.08" }), jsx("rect", { x: "4", y: "9", width: "8", height: "6", rx: "1", fill: secondaryColor }), jsx("line", { x1: "23", y1: "10", x2: "23", y2: "14", stroke: "white", strokeWidth: "1" })] })),
     },
 });
-const NtdSlash = createIcon({ displayName: 'NtdSlash',
+const NtdSlash = createIcon({
+    displayName: 'NtdSlash',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("line", { x1: "14", y1: "2", x2: "10", y2: "22", stroke: primaryColor, strokeWidth: "2.5" })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("line", { x1: "14", y1: "2", x2: "10", y2: "22", stroke: primaryColor, strokeWidth: strokeWidth })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsx("line", { x1: "14", y1: "2", x2: "10", y2: "22", 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("line", { x1: "14", y1: "2", x2: "10", y2: "22", stroke: primaryColor, strokeWidth: "2.5" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsx(Fragment, { children: jsx("line", { x1: "14", y1: "2", x2: "10", y2: "22", stroke: primaryColor, strokeWidth: "2.2" }) })),
     },
 });
-const NtdHash = createIcon({ displayName: 'NtdHash',
+const NtdHash = createIcon({
+    displayName: 'NtdHash',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "10", y1: "3", x2: "8", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "16", y1: "3", x2: "14", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "10", y1: "3", x2: "8", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "16", y1: "3", x2: "14", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "10", y1: "3", x2: "8", y2: "21", stroke: secondaryColor, strokeWidth: strokeWidth, opacity: secondaryOpacity + 0.2 }), jsx("line", { x1: "16", y1: "3", x2: "14", y2: "21", stroke: secondaryColor, strokeWidth: strokeWidth, opacity: secondaryOpacity + 0.2 })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "10", y1: "3", x2: "8", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "16", y1: "3", x2: "14", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9", stroke: primaryColor, strokeWidth: "2" }), jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "10", y1: "3", x2: "8", y2: "21", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("line", { x1: "16", y1: "3", x2: "14", y2: "21", stroke: secondaryColor, strokeWidth: "1.5" })] })),
     },
 });
-const NtdBugDev = createIcon({ displayName: 'NtdBugDev',
+const NtdBugDev = createIcon({
+    displayName: 'NtdBugDev',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "8", y: "8", width: "8", height: "12", rx: "4", fill: primaryColor }), jsx("line", { x1: "12", y1: "8", x2: "12", y2: "20", stroke: accentColor, strokeWidth: "1", opacity: accentOpacity * 0.5 }), jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: accentColor, strokeWidth: "1", opacity: accentOpacity * 0.5 }), jsx("path", { d: "M8 10H4M8 14H3M8 18H4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M16 10h4M16 14h5M16 18h4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M9 5l-1-2M15 5l1-2", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "10", cy: "3", r: "0.5", fill: primaryColor }), jsx("circle", { cx: "14", cy: "3", r: "0.5", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "8", y: "8", width: "8", height: "12", rx: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 10H4M8 14H3M8 18H4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M16 10h4M16 14h5M16 18h4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M9 8l-1-3M15 8l1-3", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "8", y: "8", width: "8", height: "12", rx: "4", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "8", y: "8", width: "8", height: "12", rx: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 10H4M8 14H3M8 18H4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M16 10h4M16 14h5M16 18h4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M9 8l-1-3M15 8l1-3", 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: "8", y: "8", width: "8", height: "12", rx: "4", fill: primaryColor }), jsx("line", { x1: "12", y1: "8", x2: "12", y2: "20", stroke: accentColor, strokeWidth: "1", opacity: accentOpacity * 0.5 }), jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: accentColor, strokeWidth: "1", opacity: accentOpacity * 0.5 }), jsx("path", { d: "M8 10H4M8 14H3M8 18H4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M16 10h4M16 14h5M16 18h4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M9 5l-1-2M15 5l1-2", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "10", cy: "3", r: "0.5", fill: primaryColor }), jsx("circle", { cx: "14", cy: "3", r: "0.5", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "8", y: "8", width: "8", height: "12", rx: "4", fill: primaryColor }), jsx("rect", { x: "8", y: "8", width: "8", height: "12", rx: "4", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "10", cy: "3", r: "0.5", fill: secondaryColor }), jsx("circle", { cx: "14", cy: "3", r: "0.5", fill: "#3B82F6" }), jsx("line", { x1: "12", y1: "8", x2: "12", y2: "20", stroke: "white", strokeWidth: "1", opacity: "0.35" }), jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: "white", strokeWidth: "1", opacity: "0.35" }), jsx("path", { d: "M8 10H4M8 14H3M8 18H4", stroke: "white", strokeWidth: "1" }), jsx("path", { d: "M16 10h4M16 14h5M16 18h4", stroke: "white", strokeWidth: "1" }), jsx("path", { d: "M9 5l-1-2M15 5l1-2", stroke: "white", strokeWidth: "1" })] })),
     },
 });
 // ── Relocated from brand packs ──
@@ -142,117 +176,130 @@ const NtdBlueprint = createIcon({
     displayName: 'NtdBlueprint',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M6 8h12M6 12h7M6 16h10M14 10v8", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M3 3h18v18H3zM6 8h12M6 12h7M6 16h10M14 10v8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M3 3h18v18H3zM6 8h12M6 12h7M6 16h10M14 10v8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         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("path", { d: "M6 8h12M6 12h7M6 16h10M14 10v8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity, 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: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M6 8h12M6 12h7M6 16h10M14 10v8", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: primaryColor }), jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: "white", opacity: "0.1" }), jsx("path", { d: "M6 8h12M6 12h7M6 16h10M14 10v8", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
 const NtdPrototype = createIcon({
     displayName: 'NtdPrototype',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M4 7h6v4H4zM14 7h6v4h-6zM9 11l6 6M10 9h4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M4 7h6v4H4zM14 7h6v4h-6zM9 11l6 6M10 9h4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M4 7h6v4H4zM14 7h6v4h-6zM9 11l6 6M10 9h4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M4 7h6v4H4zM14 7h6v4h-6zM9 11l6 6M10 9h4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "7", width: "6", height: "4", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "14", y: "7", width: "6", height: "4", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M4 7h6v4H4zM14 7h6v4h-6zM9 11l6 6M10 9h4", 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: "M4 7h6v4H4zM14 7h6v4h-6zM9 11l6 6M10 9h4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M4 7h6v4H4zM14 7h6v4h-6zM9 11l6 6M10 9h4", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }) })),
     },
 });
 const NtdComponent = createIcon({
     displayName: 'NtdComponent',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "13", y: "3", width: "8", height: "8", rx: "2", fill: primaryColor }), jsx("rect", { x: "3", y: "13", width: "8", height: "8", rx: "2", fill: primaryColor }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "2", fill: secondaryColor, opacity: secondaryOpacity })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "13", y: "3", width: "8", height: "8", rx: "2", fill: primaryColor }), jsx("rect", { x: "3", y: "13", width: "8", height: "8", rx: "2", fill: primaryColor }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "2", fill: secondaryColor, opacity: secondaryOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "2", fill: primaryColor }), jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "2", fill: "white", opacity: "0.08" }), jsx("rect", { x: "13", y: "3", width: "8", height: "8", rx: "2", fill: secondaryColor }), jsx("rect", { x: "3", y: "13", width: "8", height: "8", rx: "2", fill: "#3B82F6" }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "2", fill: "#10B981" })] })),
     },
 });
 const NtdNodes = createIcon({
     displayName: 'NtdNodes',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "6", cy: "6", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "6", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "18", r: "2", fill: primaryColor }), jsx("path", { d: "M8 6h8M7.5 7.5l3.5 8M16.5 7.5l-3.5 8", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M6 4a2 2 0 100 4 2 2 0 000-4zm12 0a2 2 0 100 4 2 2 0 000-4zm-6 12a2 2 0 100 4 2 2 0 000-4zM8 6h8M7.5 7.5l3.5 8M16.5 7.5l-3.5 8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M6 4a2 2 0 100 4 2 2 0 000-4zm12 0a2 2 0 100 4 2 2 0 000-4zm-6 12a2 2 0 100 4 2 2 0 000-4zM8 6h8M7.5 7.5l3.5 8M16.5 7.5l-3.5 8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "6", cy: "6", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "6", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M8 6h8M7.5 7.5l3.5 8M16.5 7.5l-3.5 8", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "18", r: "2", fill: primaryColor })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("circle", { cx: "6", cy: "6", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "6", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "18", r: "2", fill: primaryColor }), jsx("path", { d: "M8 6h8M7.5 7.5l3.5 8M16.5 7.5l-3.5 8", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "6", cy: "6", r: "2", fill: primaryColor }), jsx("circle", { cx: "6", cy: "6", r: "2", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "18", cy: "6", r: "2", fill: secondaryColor }), jsx("circle", { cx: "12", cy: "18", r: "2", fill: "#3B82F6" }), jsx("path", { d: "M8 6h8M7.5 7.5l3.5 8M16.5 7.5l-3.5 8", stroke: "white", strokeWidth: "1" })] })),
     },
 });
 const NtdFlow = createIcon({
     displayName: 'NtdFlow',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M4 6h8v4H4zM12 14h8v4h-8zM12 8l4 6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M4 6h8v4H4zM12 14h8v4h-8zM12 8l4 6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M4 6h8v4H4zM12 14h8v4h-8zM12 8l4 6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M4 6h8v4H4zM12 14h8v4h-8zM12 8l4 6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "6", width: "8", height: "4", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "12", y: "14", width: "8", height: "4", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M4 6h8v4H4zM12 14h8v4h-8zM12 8l4 6", 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: "M4 6h8v4H4zM12 14h8v4h-8zM12 8l4 6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M4 6h8v4H4zM12 14h8v4h-8zM12 8l4 6", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }) })),
     },
 });
 const NtdAIBrain = createIcon({
     displayName: 'NtdAIBrain',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 5a3 3 0 00-3 3v8a3 3 0 003 3h6a3 3 0 003-3V8a3 3 0 00-3-3z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M10 8v8M14 8v8M9 12h6", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M9 5a3 3 0 00-3 3v8a3 3 0 003 3h6a3 3 0 003-3V8a3 3 0 00-3-3zM10 8v8M14 8v8M9 12h6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M9 5a3 3 0 00-3 3v8a3 3 0 003 3h6a3 3 0 003-3V8a3 3 0 00-3-3zM10 8v8M14 8v8M9 12h6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "6", y: "5", width: "12", height: "14", rx: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M9 5a3 3 0 00-3 3v8a3 3 0 003 3h6a3 3 0 003-3V8a3 3 0 00-3-3zM10 8v8M14 8v8M9 12h6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         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: "M9 5a3 3 0 00-3 3v8a3 3 0 003 3h6a3 3 0 003-3V8a3 3 0 00-3-3z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M10 8v8M14 8v8M9 12h6", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 5a3 3 0 00-3 3v8a3 3 0 003 3h6a3 3 0 003-3V8a3 3 0 00-3-3z", fill: primaryColor }), jsx("path", { d: "M9 5a3 3 0 00-3 3v8a3 3 0 003 3h6a3 3 0 003-3V8a3 3 0 00-3-3z", fill: "white", opacity: "0.1" }), jsx("path", { d: "M10 8v8M14 8v8M9 12h6", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
 const NtdNeural = createIcon({
     displayName: 'NtdNeural',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "6", cy: "8", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "8", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "16", r: "2", fill: primaryColor }), jsx("path", { d: "M8 8h8M7.5 9.5L10.5 14M16.5 9.5L13.5 14", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M6 6a2 2 0 100 4 2 2 0 000-4zm12 0a2 2 0 100 4 2 2 0 000-4zm-6 8a2 2 0 100 4 2 2 0 000-4zM8 8h8M7.5 9.5L10.5 14M16.5 9.5L13.5 14", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M6 6a2 2 0 100 4 2 2 0 000-4zm12 0a2 2 0 100 4 2 2 0 000-4zm-6 8a2 2 0 100 4 2 2 0 000-4zM8 8h8M7.5 9.5L10.5 14M16.5 9.5L13.5 14", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M8 8h8M7.5 9.5L10.5 14M16.5 9.5L13.5 14", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "6", cy: "8", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "8", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "16", r: "2", fill: primaryColor })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("circle", { cx: "6", cy: "8", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "8", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "16", r: "2", fill: primaryColor }), jsx("path", { d: "M8 8h8M7.5 9.5L10.5 14M16.5 9.5L13.5 14", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "6", cy: "8", r: "2", fill: primaryColor }), jsx("circle", { cx: "6", cy: "8", r: "2", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "18", cy: "8", r: "2", fill: secondaryColor }), jsx("circle", { cx: "12", cy: "16", r: "2", fill: "#3B82F6" }), jsx("path", { d: "M8 8h8M7.5 9.5L10.5 14M16.5 9.5L13.5 14", stroke: "white", strokeWidth: "1" })] })),
     },
 });
 const NtdForge = createIcon({
     displayName: 'NtdForge',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l4 7-4 13-4-13z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M12 2l4 7-4 13-4-13z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 9h8", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M12 2l4 7-4 13-4-13zM8 9h8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M12 2l4 7-4 13-4-13zM8 9h8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l4 7-4 13-4-13z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M12 2l4 7-4 13-4-13zM8 9h8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         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: "M12 2l4 7-4 13-4-13z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M12 2l4 7-4 13-4-13z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 9h8", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l4 7-4 13-4-13z", fill: primaryColor }), jsx("path", { d: "M12 2l4 7-4 13-4-13z", fill: "white", opacity: "0.1" }), jsx("path", { d: "M12 2l4 7-4 13-4-13z", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("path", { d: "M8 9h8", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
 const NtdPipeline = createIcon({
     displayName: 'NtdPipeline',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "7", width: "5", height: "4", rx: "1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "10", y: "7", width: "5", height: "4", rx: "1", fill: primaryColor, opacity: "0.85" }), jsx("rect", { x: "17", y: "7", width: "4", height: "4", rx: "1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M8 9h2M15 9h2M5.5 11v5h12V11", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M3 7h5v4H3zM10 7h5v4h-5zM17 7h4v4h-4zM8 9h2M15 9h2M5.5 11v5h12V11", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M3 7h5v4H3zM10 7h5v4h-5zM17 7h4v4h-4zM8 9h2M15 9h2M5.5 11v5h12V11", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "7", width: "5", height: "4", rx: "1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "17", y: "7", width: "4", height: "4", rx: "1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 7h5v4H3zM10 7h5v4h-5zM17 7h4v4h-4zM8 9h2M15 9h2M5.5 11v5h12V11", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "3", y: "7", width: "5", height: "4", rx: "1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "10", y: "7", width: "5", height: "4", rx: "1", fill: primaryColor, opacity: "0.85" }), jsx("rect", { x: "17", y: "7", width: "4", height: "4", rx: "1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M8 9h2M15 9h2M5.5 11v5h12V11", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "7", width: "5", height: "4", rx: "1", fill: primaryColor }), jsx("rect", { x: "3", y: "7", width: "5", height: "4", rx: "1", fill: "white", opacity: "0.08" }), jsx("rect", { x: "10", y: "7", width: "5", height: "4", rx: "1", fill: secondaryColor, opacity: "0.85" }), jsx("rect", { x: "17", y: "7", width: "4", height: "4", rx: "1", fill: "#3B82F6" }), jsx("path", { d: "M8 9h2M15 9h2M5.5 11v5h12V11", stroke: "white", strokeWidth: "1", fill: "none" })] })),
     },
 });
 const NtdDeploy = createIcon({
     displayName: 'NtdDeploy',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 3l4 6h-3v7h-2V9H8l4-6z", fill: primaryColor }), jsx("rect", { x: "4", y: "17", width: "16", height: "4", rx: "1.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "4", y: "17", width: "16", height: "4", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M12 3l4 6h-3v7h-2V9H8l4-6zM4 17h16v4H4z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M12 3l4 6h-3v7h-2V9H8l4-6zM4 17h16v4H4z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "17", width: "16", height: "4", rx: "1.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M12 3l4 6h-3v7h-2V9H8l4-6zM4 17h16v4H4z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         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: "M12 3l4 6h-3v7h-2V9H8l4-6z", fill: primaryColor }), jsx("rect", { x: "4", y: "17", width: "16", height: "4", rx: "1.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "4", y: "17", width: "16", height: "4", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 3l4 6h-3v7h-2V9H8l4-6z", fill: primaryColor }), jsx("path", { d: "M12 3l4 6h-3v7h-2V9H8l4-6z", fill: "white", opacity: "0.08" }), jsx("rect", { x: "4", y: "17", width: "16", height: "4", rx: "1.5", fill: secondaryColor }), jsx("rect", { x: "4", y: "17", width: "16", height: "4", rx: "1.5", stroke: "white", strokeWidth: "1", fill: "none" })] })),
     },
 });
 const NtdGateway = createIcon({
     displayName: 'NtdGateway',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "7", width: "7", height: "10", rx: "1.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "14", y: "7", width: "7", height: "10", rx: "1.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M10 12h4M12 10l2 2-2 2", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M3 7h7v10H3zM14 7h7v10h-7zM10 12h4M12 10l2 2-2 2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M3 7h7v10H3zM14 7h7v10h-7zM10 12h4M12 10l2 2-2 2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "7", width: "7", height: "10", rx: "1.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "14", y: "7", width: "7", height: "10", rx: "1.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 7h7v10H3zM14 7h7v10h-7zM10 12h4M12 10l2 2-2 2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "3", y: "7", width: "7", height: "10", rx: "1.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "14", y: "7", width: "7", height: "10", rx: "1.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M10 12h4M12 10l2 2-2 2", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "7", width: "7", height: "10", rx: "1.5", fill: primaryColor }), jsx("rect", { x: "3", y: "7", width: "7", height: "10", rx: "1.5", fill: "white", opacity: "0.08" }), jsx("rect", { x: "14", y: "7", width: "7", height: "10", rx: "1.5", fill: secondaryColor }), jsx("path", { d: "M10 12h4M12 10l2 2-2 2", stroke: "white", strokeWidth: "1" })] })),
     },
 });
 const NtdDataMesh = createIcon({
     displayName: 'NtdDataMesh',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "6", cy: "6", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "6", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "6", cy: "18", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "18", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "2", fill: primaryColor }), jsx("path", { d: "M8 6h8M6 8v8M18 8v8M8 18h8M7.5 7.5l3.5 3.5M16.5 7.5l-3.5 3.5M7.5 16.5l3.5-3.5M16.5 16.5l-3.5-3.5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M6 4a2 2 0 100 4 2 2 0 000-4zm12 0a2 2 0 100 4 2 2 0 000-4zM6 16a2 2 0 100 4 2 2 0 000-4zm12 0a2 2 0 100 4 2 2 0 000-4zm-6-6a2 2 0 100 4 2 2 0 000-4M8 6h8M6 8v8M18 8v8M8 18h8M7.5 7.5l3.5 3.5M16.5 7.5l-3.5 3.5M7.5 16.5l3.5-3.5M16.5 16.5l-3.5-3.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M6 4a2 2 0 100 4 2 2 0 000-4zm12 0a2 2 0 100 4 2 2 0 000-4zM6 16a2 2 0 100 4 2 2 0 000-4zm12 0a2 2 0 100 4 2 2 0 000-4zm-6-6a2 2 0 100 4 2 2 0 000-4M8 6h8M6 8v8M18 8v8M8 18h8M7.5 7.5l3.5 3.5M16.5 7.5l-3.5 3.5M7.5 16.5l3.5-3.5M16.5 16.5l-3.5-3.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "6", cy: "6", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "6", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "6", cy: "18", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "18", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M8 6h8M6 8v8M18 8v8M8 18h8M7.5 7.5l3.5 3.5M16.5 7.5l-3.5 3.5M7.5 16.5l3.5-3.5M16.5 16.5l-3.5-3.5", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "12", r: "2", fill: primaryColor })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("circle", { cx: "6", cy: "6", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "6", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "6", cy: "18", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "18", cy: "18", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "2", fill: primaryColor }), jsx("path", { d: "M8 6h8M6 8v8M18 8v8M8 18h8M7.5 7.5l3.5 3.5M16.5 7.5l-3.5 3.5M7.5 16.5l3.5-3.5M16.5 16.5l-3.5-3.5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "6", cy: "6", r: "2", fill: primaryColor }), jsx("circle", { cx: "6", cy: "6", r: "2", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "18", cy: "6", r: "2", fill: secondaryColor }), jsx("circle", { cx: "6", cy: "18", r: "2", fill: "#3B82F6" }), jsx("circle", { cx: "18", cy: "18", r: "2", fill: "#10B981" }), jsx("circle", { cx: "12", cy: "12", r: "2", fill: "#F59E0B" }), jsx("path", { d: "M8 6h8M6 8v8M18 8v8M8 18h8M7.5 7.5l3.5 3.5M16.5 7.5l-3.5 3.5M7.5 16.5l3.5-3.5M16.5 16.5l-3.5-3.5", stroke: "white", strokeWidth: "1" })] })),
     },
 });
 const NtdFeatureFlag = createIcon({
     displayName: 'NtdFeatureFlag',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "6", y1: "3", x2: "6", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M6 5h12l-2.5 4L18 13H6z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M6 5h12l-2.5 4L18 13H6z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M6 3v18M6 5h12l-2.5 4L18 13H6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M6 3v18M6 5h12l-2.5 4L18 13H6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M6 5h12l-2.5 4L18 13H6z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M6 3v18M6 5h12l-2.5 4L18 13H6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("line", { x1: "6", y1: "3", x2: "6", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M6 5h12l-2.5 4L18 13H6z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M6 5h12l-2.5 4L18 13H6z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M6 5h12l-2.5 4L18 13H6z", fill: primaryColor }), jsx("path", { d: "M6 5h12l-2.5 4L18 13H6z", fill: "white", opacity: "0.1" }), jsx("line", { x1: "6", y1: "3", x2: "6", y2: "21", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("path", { d: "M6 5h12l-2.5 4L18 13H6z", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" })] })),
     },
 });
 // ── DevTech Logo Icons ──
@@ -263,6 +310,7 @@ const NtdViteLogo = createIcon({
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 3L12 22L3 3h7l2 10l2-10h7z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21 3L12 22L3 3h7l2 10l2-10h7z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M21 3L12 22L3 3h7l2 10l2-10h7z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M21 3L12 22L3 3h7l2 10l2-10h7z", fill: primaryColor }), jsx("path", { d: "M10 3l2 10l2-10", fill: accentColor, opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21 3L12 22L3 3h7l2 10l2-10h7z", fill: primaryColor }), jsx("path", { d: "M21 3L12 22L3 3h7l2 10l2-10h7z", fill: "white", opacity: "0.08" }), jsx("path", { d: "M10 3l2 10l2-10", fill: secondaryColor })] })),
     },
 });
 const NtdBunLogo = createIcon({
@@ -272,6 +320,7 @@ const NtdBunLogo = createIcon({
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("ellipse", { cx: "12", cy: "14", rx: "9", ry: "7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("ellipse", { cx: "9", cy: "13", rx: "1.5", ry: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("ellipse", { cx: "15", cy: "13", rx: "1.5", ry: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M6 9c0-3 2.5-6 6-6s6 3 6 6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("ellipse", { cx: "12", cy: "14", rx: "9", ry: "7", fill: secondaryColor, opacity: secondaryOpacity }), jsx("ellipse", { cx: "12", cy: "14", rx: "9", ry: "7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("ellipse", { cx: "9", cy: "13", rx: "1.5", ry: "2", fill: primaryColor }), jsx("ellipse", { cx: "15", cy: "13", rx: "1.5", ry: "2", fill: primaryColor }), jsx("path", { d: "M6 9c0-3 2.5-6 6-6s6 3 6 6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("ellipse", { cx: "12", cy: "14", rx: "9", ry: "7", fill: primaryColor }), jsx("ellipse", { cx: "9", cy: "13", rx: "1.5", ry: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("ellipse", { cx: "15", cy: "13", rx: "1.5", ry: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M6 9c0-3 2.5-6 6-6s6 3 6 6", stroke: primaryColor, strokeWidth: "2", fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("ellipse", { cx: "12", cy: "14", rx: "9", ry: "7", fill: primaryColor }), jsx("ellipse", { cx: "12", cy: "14", rx: "9", ry: "7", fill: "white", opacity: "0.08" }), jsx("ellipse", { cx: "9", cy: "13", rx: "1.5", ry: "2", fill: secondaryColor }), jsx("ellipse", { cx: "15", cy: "13", rx: "1.5", ry: "2", fill: "#3B82F6" }), jsx("path", { d: "M6 9c0-3 2.5-6 6-6s6 3 6 6", stroke: "white", strokeWidth: "1", fill: "none" })] })),
     },
 });
 const NtdDenoLogo = createIcon({
@@ -281,6 +330,7 @@ const NtdDenoLogo = createIcon({
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("ellipse", { cx: "14", cy: "10", rx: "2", ry: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 16c2-1 4-1 6 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("ellipse", { cx: "14", cy: "10", rx: "2", ry: "3", fill: primaryColor }), jsx("path", { d: "M8 16c2-1 4-1 6 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity }) => (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", fill: primaryColor }), jsx("ellipse", { cx: "14", cy: "10", rx: "2", ry: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "14.5", cy: "9.5", r: "0.8", fill: primaryColor }), jsx("path", { d: "M8 16c2-1 4-1 6 0", stroke: secondaryColor, strokeWidth: "1.5", fill: "none", opacity: secondaryOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.08" }), jsx("ellipse", { cx: "14", cy: "10", rx: "2", ry: "3", fill: secondaryColor }), jsx("circle", { cx: "14.5", cy: "9.5", r: "0.8", fill: "#3B82F6" }), jsx("path", { d: "M8 16c2-1 4-1 6 0", stroke: "white", strokeWidth: "1", fill: "none", opacity: "0.35" })] })),
     },
 });
 const NtdTauriLogo = createIcon({
@@ -290,6 +340,7 @@ const NtdTauriLogo = createIcon({
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "8", cy: "8", r: "5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "16", cy: "16", r: "5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "8", cy: "8", r: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "16", cy: "16", r: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M11.5 9.5l1 5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "8", cy: "8", r: "5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "16", cy: "16", r: "5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "8", cy: "8", r: "5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "16", cy: "16", r: "5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "8", cy: "8", r: "2", fill: primaryColor }), jsx("circle", { cx: "16", cy: "16", r: "2", fill: primaryColor }), jsx("path", { d: "M11.5 9.5l1 5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("circle", { cx: "8", cy: "8", r: "5", fill: primaryColor }), jsx("circle", { cx: "16", cy: "16", r: "5", fill: primaryColor }), jsx("circle", { cx: "8", cy: "8", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "16", cy: "16", r: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M11.5 9.5l1 5", stroke: primaryColor, strokeWidth: "2" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "8", cy: "8", r: "5", fill: primaryColor }), jsx("circle", { cx: "8", cy: "8", r: "5", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "16", cy: "16", r: "5", fill: secondaryColor }), jsx("circle", { cx: "8", cy: "8", r: "2", fill: "#3B82F6" }), jsx("circle", { cx: "16", cy: "16", r: "2", fill: "#10B981" }), jsx("path", { d: "M11.5 9.5l1 5", stroke: "white", strokeWidth: "1" })] })),
     },
 });
 const NtdSvelteLogo = createIcon({
@@ -299,6 +350,7 @@ const NtdSvelteLogo = createIcon({
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M20 7c-2-4-7-5-10-3l-5 3c-2 2-3 5-1 8 1 2 3 3 5 3l-1 1c-3 1-6 0-8-3-2-4-1-8 3-10l5-3c4-2 9 0 11 4 1 2 1 5-1 7l-1-2c1-2 1-4 3-5z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20 7c-2-4-7-5-10-3l-5 3c-2 2-3 5-1 8 1 2 3 3 5 3l-1 1c-3 1-6 0-8-3-2-4-1-8 3-10l5-3c4-2 9 0 11 4 1 2 1 5-1 7l-1-2c1-2 1-4 3-5z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M20 7c-2-4-7-5-10-3l-5 3c-2 2-3 5-1 8 1 2 3 3 5 3l-1 1c-3 1-6 0-8-3-2-4-1-8 3-10l5-3c4-2 9 0 11 4 1 2 1 5-1 7l-1-2c1-2 1-4 3-5z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M20 7c-2-4-7-5-10-3l-5 3c-2 2-3 5-1 8 1 2 3 3 5 3l-1 1c-3 1-6 0-8-3-2-4-1-8 3-10l5-3c4-2 9 0 11 4 1 2 1 5-1 7l-1-2c1-2 1-4 3-5z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20 7c-2-4-7-5-10-3l-5 3c-2 2-3 5-1 8 1 2 3 3 5 3l-1 1c-3 1-6 0-8-3-2-4-1-8 3-10l5-3c4-2 9 0 11 4 1 2 1 5-1 7l-1-2c1-2 1-4 3-5z", fill: primaryColor }), jsx("path", { d: "M20 7c-2-4-7-5-10-3l-5 3c-2 2-3 5-1 8 1 2 3 3 5 3l-1 1c-3 1-6 0-8-3-2-4-1-8 3-10l5-3c4-2 9 0 11 4 1 2 1 5-1 7l-1-2c1-2 1-4 3-5z", fill: "white", opacity: "0.1" })] })),
     },
 });
 const NtdNextJsLogo = createIcon({
@@ -308,6 +360,7 @@ const NtdNextJsLogo = createIcon({
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 8v8M8 8l10 12M16 8v8", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 8v8M8 8l10 12M16 8v8", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor }) => (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", fill: primaryColor }), jsx("path", { d: "M8 8v8M8 8l10 12M16 8v8", stroke: "white", strokeWidth: "2" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.1" }), jsx("path", { d: "M8 8v8M8 8l10 12M16 8v8", stroke: "white", strokeWidth: "1.8" })] })),
     },
 });
 const NtdAstroLogo = createIcon({
@@ -317,6 +370,7 @@ const NtdAstroLogo = createIcon({
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M8 21c-1-5 1-8 5-10l1 3c3-2 4-5 4-9l-7 5-5 10c0 1 1 2 2 1z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M8 21c-1-5 1-8 5-10l1 3c3-2 4-5 4-9l-7 5-5 10c0 1 1 2 2 1z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M8 21c-1-5 1-8 5-10l1 3c3-2 4-5 4-9l-7 5-5 10c0 1 1 2 2 1z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M8 21c-1-5 1-8 5-10l1 3c3-2 4-5 4-9l-7 5-5 10c0 1 1 2 2 1z", fill: primaryColor }), jsx("circle", { cx: "10", cy: "17", r: "1.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "14", cy: "15", r: "1", fill: secondaryColor, opacity: secondaryOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M8 21c-1-5 1-8 5-10l1 3c3-2 4-5 4-9l-7 5-5 10c0 1 1 2 2 1z", fill: primaryColor }), jsx("path", { d: "M8 21c-1-5 1-8 5-10l1 3c3-2 4-5 4-9l-7 5-5 10c0 1 1 2 2 1z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "10", cy: "17", r: "1.5", fill: secondaryColor }), jsx("circle", { cx: "14", cy: "15", r: "1", fill: "#3B82F6" })] })),
     },
 });
 const NtdQwikLogo = createIcon({
@@ -326,6 +380,7 @@ const NtdQwikLogo = createIcon({
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2L4 8v8l8 6 8-6V8l-8-6z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M12 8v8l4-4-4-4z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2L4 8v8l8 6 8-6V8l-8-6z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M12 2L4 8v8l8 6 8-6V8l-8-6z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M12 8v8l4-4-4-4z", fill: primaryColor })] })),
         flat: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M12 2L4 8v8l8 6 8-6V8l-8-6z", fill: primaryColor }), jsx("path", { d: "M12 8v8l4-4-4-4z", fill: accentColor, opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2L4 8v8l8 6 8-6V8l-8-6z", fill: primaryColor }), jsx("path", { d: "M12 2L4 8v8l8 6 8-6V8l-8-6z", fill: "white", opacity: "0.08" }), jsx("path", { d: "M12 8v8l4-4-4-4z", fill: secondaryColor })] })),
     },
 });
 const NtdSolidJsLogo = createIcon({
@@ -335,6 +390,7 @@ const NtdSolidJsLogo = createIcon({
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 8l9 6 9-6-9-6-9 6z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M3 12l9 6 9-6-9-6-9 6z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M3 16l9 6 9-6-9-6-9 6z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 8l9 6 9-6-9-6-9 6z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 12l9 6 9-6-9-6-9 6z", fill: secondaryColor, opacity: secondaryOpacity * 0.7 }), jsx("path", { d: "M3 16l9 6 9-6-9-6-9 6z", fill: secondaryColor, opacity: secondaryOpacity * 0.5 }), jsx("path", { d: "M3 8l9 6 9-6-9-6-9 6zM3 12l9 6 9-6-9-6-9 6zM3 16l9 6 9-6-9-6-9 6z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, secondaryOpacity }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M3 8l9 6 9-6-9-6-9 6z", fill: primaryColor }), jsx("path", { d: "M3 12l9 6 9-6-9-6-9 6z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 16l9 6 9-6-9-6-9 6z", fill: primaryColor, opacity: "0.7" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 8l9 6 9-6-9-6-9 6z", fill: primaryColor }), jsx("path", { d: "M3 8l9 6 9-6-9-6-9 6z", fill: "white", opacity: "0.08" }), jsx("path", { d: "M3 12l9 6 9-6-9-6-9 6z", fill: secondaryColor }), jsx("path", { d: "M3 16l9 6 9-6-9-6-9 6z", fill: "#3B82F6", opacity: "0.7" })] })),
     },
 });