@nice2dev/icons 1.0.8 → 1.0.10

package/dist/esm/icons/ui.js

@@ -1,212 +1,264 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createIcon } from '../createIcon.js';
 
-const NtdHome = createIcon({ displayName: 'NtdHome',
+const NtdHome = createIcon({
+    displayName: 'NtdHome',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M3 9.5L12 2l9 7.5V20a2 2 0 01-2 2H5a2 2 0 01-2-2V9.5z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 9.5L12 2l9 7.5V20a2 2 0 01-2 2H5a2 2 0 01-2-2V9.5z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M9 22V12h6v10", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 9.5L12 2l9 7.5V20a2 2 0 01-2 2H5a2 2 0 01-2-2V9.5z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 9.5L12 2l9 7.5V20a2 2 0 01-2 2H5a2 2 0 01-2-2V9.5z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M9 22V12h6v10", stroke: primaryColor, strokeWidth: strokeWidth, 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: "M3 9.5L12 2l9 7.5V20a2 2 0 01-2 2H5a2 2 0 01-2-2V9.5z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 9.5L12 2l9 7.5V20a2 2 0 01-2 2H5a2 2 0 01-2-2V9.5z", fill: primaryColor }), jsx("path", { d: "M3 9.5L12 2l9 7.5V20a2 2 0 01-2 2H5a2 2 0 01-2-2V9.5z", fill: "white", opacity: "0.1" })] })),
     },
 });
-const NtdUser = createIcon({ displayName: 'NtdUser',
+const NtdUser = createIcon({
+    displayName: 'NtdUser',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7", r: "4", fill: primaryColor }), jsx("path", { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7", r: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "7", r: "4", fill: primaryColor }), jsx("path", { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("circle", { cx: "12", cy: "7", r: "4", fill: primaryColor }), jsx("path", { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7", r: "4", fill: primaryColor }), jsx("circle", { cx: "12", cy: "7", r: "4", fill: "white", opacity: "0.08" }), jsx("path", { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2", fill: secondaryColor })] })),
     },
 });
-const NtdUsers = createIcon({ displayName: 'NtdUsers',
+const NtdUsers = createIcon({
+    displayName: 'NtdUsers',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "9", cy: "7", r: "4", fill: primaryColor }), jsx("path", { d: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2", fill: primaryColor }), jsx("path", { d: "M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "9", cy: "7", r: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "9", cy: "7", r: "4", fill: primaryColor }), jsx("path", { d: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", 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("circle", { cx: "9", cy: "7", r: "4", fill: primaryColor }), jsx("path", { d: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2", fill: primaryColor }), jsx("path", { d: "M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "9", cy: "7", r: "4", fill: primaryColor }), jsx("circle", { cx: "9", cy: "7", r: "4", fill: "white", opacity: "0.08" }), jsx("path", { d: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2", fill: secondaryColor }), jsx("path", { d: "M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75", stroke: "white", strokeWidth: "1", fill: "none" })] })),
     },
 });
-const NtdHeart = createIcon({ displayName: 'NtdHeart',
+const NtdHeart = createIcon({
+    displayName: 'NtdHeart',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", 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: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", fill: primaryColor }), jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", fill: "white", opacity: "0.1" })] })),
     },
 });
-const NtdStar = createIcon({ displayName: 'NtdStar',
+const NtdStar = createIcon({
+    displayName: 'NtdStar',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", fill: primaryColor }), jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", fill: "white", opacity: "0.1" })] })),
     },
 });
-const NtdBell = createIcon({ displayName: 'NtdBell',
+const NtdBell = createIcon({
+    displayName: 'NtdBell',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9zM13.73 21a2 2 0 01-3.46 0", fill: primaryColor, stroke: primaryColor, strokeWidth: "1" })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", 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 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9zM13.73 21a2 2 0 01-3.46 0", fill: primaryColor, stroke: primaryColor, strokeWidth: "1" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9zM13.73 21a2 2 0 01-3.46 0", fill: primaryColor, stroke: primaryColor, strokeWidth: "1" }), jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9zM13.73 21a2 2 0 01-3.46 0", fill: "white", opacity: "0.1" })] })),
     },
 });
-const NtdEye = createIcon({ displayName: 'NtdEye',
+const NtdEye = createIcon({
+    displayName: 'NtdEye',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: "2" }), jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: secondaryColor })] })),
     },
 });
-const NtdEyeOff = createIcon({ displayName: 'NtdEyeOff',
+const NtdEyeOff = createIcon({
+    displayName: 'NtdEyeOff',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22", stroke: primaryColor, strokeWidth: strokeWidth })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22", stroke: primaryColor, strokeWidth: strokeWidth })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: secondaryColor, opacity: secondaryOpacity * 0.5 }), jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 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("path", { d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22", stroke: primaryColor, strokeWidth: "2.2" }) })),
     },
 });
-const NtdInfo = createIcon({ displayName: 'NtdInfo',
+const NtdInfo = createIcon({
+    displayName: 'NtdInfo',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "8", r: "1", fill: accentColor, opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "8", r: "1", fill: primaryColor })] })),
         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("line", { x1: "12", y1: "16", x2: "12", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "8", 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("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "8", r: "1", fill: accentColor, opacity: accentOpacity })] })),
+        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("circle", { cx: "12", cy: "8", r: "1", fill: secondaryColor }), jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12", stroke: "white", strokeWidth: "1", opacity: "0.4" })] })),
     },
 });
-const NtdWarning = createIcon({ displayName: 'NtdWarning',
+const NtdWarning = createIcon({
+    displayName: 'NtdWarning',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", fill: primaryColor }), jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "17", r: "1", fill: accentColor, opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "17", r: "1", fill: primaryColor })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "17", 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("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", fill: primaryColor }), jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "17", r: "1", fill: accentColor, opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", fill: primaryColor }), jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "12", cy: "17", r: "1", fill: secondaryColor }), jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: "white", strokeWidth: "1", opacity: "0.4" })] })),
     },
 });
-const NtdError = createIcon({ displayName: 'NtdError',
+const NtdError = createIcon({
+    displayName: 'NtdError',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity }), jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15", 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("line", { x1: "15", y1: "9", x2: "9", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "9", y1: "9", x2: "15", 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("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity }), jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
+        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("line", { x1: "15", y1: "9", x2: "9", y2: "15", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
-const NtdSuccess = createIcon({ displayName: 'NtdSuccess',
+const NtdSuccess = createIcon({
+    displayName: 'NtdSuccess',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("path", { d: "M9 12l2 2 4-4", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M9 12l2 2 4-4", 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: "M9 12l2 2 4-4", 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("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("path", { d: "M9 12l2 2 4-4", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
+        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: "M9 12l2 2 4-4", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
-const NtdHelp = createIcon({ displayName: 'NtdHelp',
+const NtdHelp = createIcon({
+    displayName: 'NtdHelp',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3", stroke: accentColor, strokeWidth: strokeWidth, fill: "none", opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "17", r: "1", fill: accentColor, opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "17", r: "1", fill: primaryColor })] })),
         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: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "17", 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("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3", stroke: accentColor, strokeWidth: strokeWidth, fill: "none", opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "17", r: "1", fill: accentColor, opacity: accentOpacity })] })),
+        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("circle", { cx: "12", cy: "17", r: "1", fill: secondaryColor }), jsx("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3", stroke: "white", strokeWidth: "1", fill: "none", opacity: "0.4" })] })),
     },
 });
-const NtdClock = createIcon({ displayName: 'NtdClock',
+const NtdClock = createIcon({
+    displayName: 'NtdClock',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("path", { d: "M12 6v6l4 2", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M12 6v6l4 2", 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: "M12 6v6l4 2", 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("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("path", { d: "M12 6v6l4 2", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
+        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: "M12 6v6l4 2", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
-const NtdCalendar = createIcon({ displayName: 'NtdCalendar',
+const NtdCalendar = createIcon({
+    displayName: 'NtdCalendar',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", fill: primaryColor }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "3", y: "4", width: "18", height: "6", rx: "2", fill: primaryColor, opacity: secondaryOpacity + 0.1 }), jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", fill: primaryColor }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", fill: primaryColor }), jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", fill: "white", opacity: "0.1" }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
-const NtdTag = createIcon({ displayName: 'NtdTag',
+const NtdTag = createIcon({
+    displayName: 'NtdTag',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: primaryColor }), jsx("circle", { cx: "7", cy: "7", r: "1.5", fill: accentColor, opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "7", cy: "7", r: "1", fill: primaryColor })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "7", cy: "7", r: "1.5", fill: primaryColor })] })),
         flat: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: primaryColor }), jsx("circle", { cx: "7", cy: "7", r: "1.5", fill: accentColor, opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: primaryColor }), jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "7", cy: "7", r: "1.5", fill: secondaryColor })] })),
     },
 });
-const NtdBookmark = createIcon({ displayName: 'NtdBookmark',
+const NtdBookmark = createIcon({
+    displayName: 'NtdBookmark',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2v16z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2v16z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2v16z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2v16z", 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: "M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2v16z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2v16z", fill: primaryColor }), jsx("path", { d: "M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2v16z", fill: "white", opacity: "0.1" })] })),
     },
 });
-const NtdFlag = createIcon({ displayName: 'NtdFlag',
+const NtdFlag = createIcon({
+    displayName: 'NtdFlag',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z", fill: primaryColor }), jsx("line", { x1: "4", y1: "22", x2: "4", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "4", y1: "22", x2: "4", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "4", y1: "22", x2: "4", y2: "15", 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: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z", fill: primaryColor }), jsx("line", { x1: "4", y1: "22", x2: "4", y2: "15", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z", fill: primaryColor }), jsx("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z", fill: "white", opacity: "0.1" }), jsx("line", { x1: "4", y1: "22", x2: "4", y2: "15", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
-const NtdThumbUp = createIcon({ displayName: 'NtdThumbUp',
+const NtdThumbUp = createIcon({
+    displayName: 'NtdThumbUp',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14zM7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14zM7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M7 11H4a2 2 0 00-2 2v7a2 2 0 002 2h3V11z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14zM7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3", 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: "M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14zM7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14zM7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3", fill: primaryColor }), jsx("path", { d: "M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14zM7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3", fill: "white", opacity: "0.1" })] })),
     },
 });
-const NtdThumbDown = createIcon({ displayName: 'NtdThumbDown',
+const NtdThumbDown = createIcon({
+    displayName: 'NtdThumbDown',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10zM17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10zM17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17V2z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10zM17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17", 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: "M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10zM17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10zM17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17", fill: primaryColor }), jsx("path", { d: "M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10zM17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17", fill: "white", opacity: "0.1" })] })),
     },
 });
-const NtdShield = createIcon({ displayName: 'NtdShield',
+const NtdShield = createIcon({
+    displayName: 'NtdShield',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M9 12l2 2 4-4", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", fill: primaryColor }), jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", fill: "white", opacity: "0.1" })] })),
     },
 });
-const NtdGlobe = createIcon({ displayName: 'NtdGlobe',
+const NtdGlobe = createIcon({
+    displayName: 'NtdGlobe',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10A15.3 15.3 0 0112 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10A15.3 15.3 0 0112 2z", 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("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10A15.3 15.3 0 0112 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10A15.3 15.3 0 0112 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsx("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10A15.3 15.3 0 0112 2z", stroke: secondaryColor, strokeWidth: "2", fill: "none" })] })),
     },
 });
-const NtdMap = createIcon({ displayName: 'NtdMap',
+const NtdMap = createIcon({
+    displayName: 'NtdMap',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4zM8 2v16M16 6v16", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4zM8 2v16M16 6v16", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M8 2l8 4v16l-8-4V2z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4zM8 2v16M16 6v16", 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: "M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4zM8 2v16M16 6v16", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4zM8 2v16M16 6v16", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }) })),
     },
 });
-const NtdPin = createIcon({ displayName: 'NtdPin',
+const NtdPin = createIcon({
+    displayName: 'NtdPin',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z", fill: primaryColor }), jsx("circle", { cx: "12", cy: "10", r: "3", fill: accentColor, opacity: accentOpacity })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "10", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "10", r: "3", 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("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z", fill: primaryColor }), jsx("circle", { cx: "12", cy: "10", r: "3", fill: accentColor, opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z", fill: primaryColor }), jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "12", cy: "10", r: "3", fill: secondaryColor })] })),
     },
 });
-const NtdSun = createIcon({ displayName: 'NtdSun',
+const NtdSun = createIcon({
+    displayName: 'NtdSun',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "5", fill: primaryColor }), jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42", stroke: secondaryColor, strokeWidth: strokeWidth, opacity: secondaryOpacity + 0.2 }), jsx("circle", { cx: "12", cy: "12", r: "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("circle", { cx: "12", cy: "12", r: "5", fill: primaryColor }), jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "5", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "5", fill: "white", opacity: "0.1" }), jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
-const NtdMoon = createIcon({ displayName: 'NtdMoon',
+const NtdMoon = createIcon({
+    displayName: 'NtdMoon',
     paths: {
         solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z", 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: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z", fill: primaryColor }), jsx("path", { d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z", fill: "white", opacity: "0.1" })] })),
     },
 });
 // ── Relocated from brand packs ──
@@ -214,18 +266,20 @@ const NtdCursor = createIcon({
     displayName: 'NtdCursor',
     paths: {
         solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 3l12 8-5 1.5L14 20l-3 1-2-7-4 2z", fill: primaryColor }), jsx("line", { x1: "16", y1: "5", x2: "20", y2: "3", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M5 3l12 8-5 1.5L14 20l-3 1-2-7-4 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M5 3l12 8-5 1.5L14 20l-3 1-2-7-4 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 3l12 8-5 1.5L14 20l-3 1-2-7-4 2z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M5 3l12 8-5 1.5L14 20l-3 1-2-7-4 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         flat: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "4", fill: secondaryColor }), jsx("path", { d: "M5 3l12 8-5 1.5L14 20l-3 1-2-7-4 2z", fill: primaryColor }), jsx("line", { x1: "16", y1: "5", x2: "20", y2: "3", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 3l12 8-5 1.5L14 20l-3 1-2-7-4 2z", fill: primaryColor }), jsx("path", { d: "M5 3l12 8-5 1.5L14 20l-3 1-2-7-4 2z", fill: "white", opacity: "0.1" }), jsx("line", { x1: "16", y1: "5", x2: "20", y2: "3", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
 const NtdWireframe = createIcon({
     displayName: 'NtdWireframe',
     paths: {
         solid: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 9h18M8 9v11M14 9v11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => jsx("path", { d: "M3 4h18v16H3zM3 9h18M8 9v11M14 9v11", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
+        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M3 4h18v16H3zM3 9h18M8 9v11M14 9v11", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 4h18v16H3zM3 9h18M8 9v11M14 9v11", 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: "4", width: "18", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 9h18M8 9v11M14 9v11", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2", fill: primaryColor }), jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2", fill: "white", opacity: "0.1" }), jsx("path", { d: "M3 9h18M8 9v11M14 9v11", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });