@nice2dev/icons 1.3.15 → 1.3.17

package/dist/cjs/iconStyles.js

@@ -1,85 +1,229 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-
-// ────────────────── Shared styles ──────────────────
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const animationSpeed = require("./animationSpeed.js");
 const wrapperBase = {
-    position: 'relative',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center"
 };
 const overlayBase = {
-    position: 'absolute',
-    pointerEvents: 'none',
-    overflow: 'visible',
+  position: "absolute",
+  pointerEvents: "none",
+  overflow: "visible"
 };
-// ══════════════════════════════════════════════════════
-//  1. NtdIconFloral 🌸
-//  Botanical vines, leaves & flowers wrapping the icon
-// ══════════════════════════════════════════════════════
 const NtdIconFloral = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ children, animate = true, duration = 2, intensity = 'normal', vineColor = '#22c55e', petalColor = '#f472b6', leafColor, className, style, }, ref) => {
-    const lc = leafColor !== null && leafColor !== void 0 ? leafColor : vineColor;
-    const dur = `${duration}s`;
-    const halfDur = `${duration * 0.5}s`;
-    const bloomAt = `${duration * 0.55}s`;
-    const flowerAt = `${duration * 0.75}s`;
-    // Vine paths (viewBox 0 0 100 100, icon occupies ~20-80)
-    const vine1 = 'M12,88 C6,72 4,52 10,38 C16,24 28,14 42,10';
-    const vine2 = 'M88,12 C94,28 96,48 90,62 C84,76 72,86 58,90';
-    const vine3 = 'M18,8 C32,4 52,2 68,8';
-    const vine4 = 'M82,92 C68,96 48,98 32,92';
-    const showExtra = intensity !== 'subtle';
-    // Teardrop leaf
-    const leafD = 'M0,-4 C2.5,-3.5 4.5,-1 4.5,1 C4.5,3 2,5 0,3 C-1.5,1.5 -1.5,-2.5 0,-4Z';
-    const baseLeaves = [
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      children,
+      animate = true,
+      duration: durationProp,
+      animationSpeed: animationSpeed$1,
+      intensity = "normal",
+      vineColor = "#22c55e",
+      petalColor = "#f472b6",
+      leafColor,
+      className,
+      style
+    }, ref) => {
+      const duration = durationProp ?? 2;
+      const lc = leafColor ?? vineColor;
+      const dur = `${duration}s`;
+      const halfDur = `${duration * 0.5}s`;
+      const bloomAt = `${duration * 0.55}s`;
+      const flowerAt = `${duration * 0.75}s`;
+      const vine1 = "M12,88 C6,72 4,52 10,38 C16,24 28,14 42,10";
+      const vine2 = "M88,12 C94,28 96,48 90,62 C84,76 72,86 58,90";
+      const vine3 = "M18,8 C32,4 52,2 68,8";
+      const vine4 = "M82,92 C68,96 48,98 32,92";
+      const showExtra = intensity !== "subtle";
+      const leafD = "M0,-4 C2.5,-3.5 4.5,-1 4.5,1 C4.5,3 2,5 0,3 C-1.5,1.5 -1.5,-2.5 0,-4Z";
+      const baseLeaves = [
         { x: 10, y: 38, a: -50 },
         { x: 28, y: 14, a: 30 },
         { x: 90, y: 62, a: 140 },
-        { x: 72, y: 86, a: -150 },
-    ];
-    const denseLeaves = intensity === 'dense'
-        ? [
-            { x: 6, y: 60, a: -80 },
-            { x: 94, y: 40, a: 100 },
-            { x: 50, y: 4, a: 5 },
-            { x: 50, y: 96, a: 175 },
-        ]
-        : [];
-    const allLeaves = [...baseLeaves, ...denseLeaves];
-    // 5-petal flower helper
-    const petalOffsets = [
+        { x: 72, y: 86, a: -150 }
+      ];
+      const denseLeaves = intensity === "dense" ? [
+        { x: 6, y: 60, a: -80 },
+        { x: 94, y: 40, a: 100 },
+        { x: 50, y: 4, a: 5 },
+        { x: 50, y: 96, a: 175 }
+      ] : [];
+      const allLeaves = [...baseLeaves, ...denseLeaves];
+      const petalOffsets = [
         [0, -1],
         [0.95, -0.31],
         [0.59, 0.81],
         [-0.59, 0.81],
-        [-0.95, -0.31],
-    ];
-    const flowerPositions = [
+        [-0.95, -0.31]
+      ];
+      const flowerPositions = [
         { x: 42, y: 10, r: 3.5 },
-        ...(intensity !== 'subtle' ? [{ x: 58, y: 90, r: 3 }] : []),
-        ...(intensity === 'dense'
-            ? [
-                { x: 8, y: 55, r: 2.5 },
-                { x: 92, y: 45, r: 2.5 },
-            ]
-            : []),
-    ];
-    const dashLen = 250;
-    return (jsxRuntime.jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [children, jsxRuntime.jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-30%', width: '160%', height: '160%' }, "aria-hidden": true, children: [[vine1, vine2, ...(showExtra ? [vine3, vine4] : [])].map((d, i) => (jsxRuntime.jsx("path", { d: d, fill: "none", stroke: vineColor, strokeWidth: i < 2 ? 1.5 : 1, strokeLinecap: "round", opacity: i < 2 ? 0.85 : 0.55, ...(animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {}), children: animate && (jsxRuntime.jsx("animate", { attributeName: "stroke-dashoffset", from: `${dashLen}`, to: "0", dur: dur, fill: "freeze", begin: i < 2 ? '0s' : `${duration * 0.3}s` })) }, `v${i}`))), allLeaves.map((l, i) => (jsxRuntime.jsx("g", { transform: `translate(${l.x},${l.y}) rotate(${l.a})`, children: jsxRuntime.jsxs("g", { opacity: animate ? 0 : 0.8, children: [jsxRuntime.jsx("path", { d: leafD, fill: lc }), jsxRuntime.jsx("line", { x1: 0, y1: -3, x2: 0, y2: 2.5, stroke: lc, strokeWidth: "0.4", opacity: 0.4 }), animate && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.8", dur: halfDur, begin: bloomAt, fill: "freeze" }), jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "scale", values: "0 0;1 1", keyTimes: "0;1", keySplines: "0.34 1 0.64 1", calcMode: "spline", dur: halfDur, begin: bloomAt, fill: "freeze" })] }))] }) }, `l${i}`))), flowerPositions.map((f, fi) => (jsxRuntime.jsxs("g", { opacity: animate ? 0 : 1, children: [petalOffsets.map(([ox, oy], pi) => (jsxRuntime.jsx("circle", { cx: f.x + ox * f.r, cy: f.y + oy * f.r, r: f.r * 0.5, fill: petalColor, opacity: 0.85 }, pi))), jsxRuntime.jsx("circle", { cx: f.x, cy: f.y, r: f.r * 0.3, fill: "#fde047" }), animate && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "1", dur: halfDur, begin: flowerAt, fill: "freeze" }), jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "scale", values: "0.3 0.3;1 1", keyTimes: "0;1", keySplines: "0.34 1 0.64 1", calcMode: "spline", dur: halfDur, begin: flowerAt, fill: "freeze" })] }))] }, `f${fi}`))), animate && (jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "rotate", values: "0 50 50;1 50 50;-1 50 50;0 50 50", dur: "4s", repeatCount: "indefinite", begin: `${duration}s` }))] })] }));
-}), { displayName: 'NtdIconFloral' });
-// ══════════════════════════════════════════════════════
-//  2. NtdIconFestive 🎉
-//  Confetti burst, stars & sparkles
-// ══════════════════════════════════════════════════════
+        ...intensity !== "subtle" ? [{ x: 58, y: 90, r: 3 }] : [],
+        ...intensity === "dense" ? [
+          { x: 8, y: 55, r: 2.5 },
+          { x: 92, y: 45, r: 2.5 }
+        ] : []
+      ];
+      const dashLen = 250;
+      return animationSpeed.retimeTree(
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%" },
+              "aria-hidden": true,
+              children: [
+                [vine1, vine2, ...showExtra ? [vine3, vine4] : []].map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d,
+                    fill: "none",
+                    stroke: vineColor,
+                    strokeWidth: i < 2 ? 1.5 : 1,
+                    strokeLinecap: "round",
+                    opacity: i < 2 ? 0.85 : 0.55,
+                    ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                      "animate",
+                      {
+                        attributeName: "stroke-dashoffset",
+                        from: `${dashLen}`,
+                        to: "0",
+                        dur,
+                        fill: "freeze",
+                        begin: i < 2 ? "0s" : `${duration * 0.3}s`
+                      }
+                    )
+                  },
+                  `v${i}`
+                )),
+                allLeaves.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${l.x},${l.y}) rotate(${l.a})`, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { opacity: animate ? 0 : 0.8, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: leafD, fill: lc }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "line",
+                    {
+                      x1: 0,
+                      y1: -3,
+                      x2: 0,
+                      y2: 2.5,
+                      stroke: lc,
+                      strokeWidth: "0.4",
+                      opacity: 0.4
+                    }
+                  ),
+                  animate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "animate",
+                      {
+                        attributeName: "opacity",
+                        from: "0",
+                        to: "0.8",
+                        dur: halfDur,
+                        begin: bloomAt,
+                        fill: "freeze"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "animateTransform",
+                      {
+                        attributeName: "transform",
+                        type: "scale",
+                        values: "0 0;1 1",
+                        keyTimes: "0;1",
+                        keySplines: "0.34 1 0.64 1",
+                        calcMode: "spline",
+                        dur: halfDur,
+                        begin: bloomAt,
+                        fill: "freeze"
+                      }
+                    )
+                  ] })
+                ] }) }, `l${i}`)),
+                flowerPositions.map((f, fi) => /* @__PURE__ */ jsxRuntime.jsxs("g", { opacity: animate ? 0 : 1, children: [
+                  petalOffsets.map(([ox, oy], pi) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      cx: f.x + ox * f.r,
+                      cy: f.y + oy * f.r,
+                      r: f.r * 0.5,
+                      fill: petalColor,
+                      opacity: 0.85
+                    },
+                    pi
+                  )),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: f.x, cy: f.y, r: f.r * 0.3, fill: "#fde047" }),
+                  animate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "animate",
+                      {
+                        attributeName: "opacity",
+                        from: "0",
+                        to: "1",
+                        dur: halfDur,
+                        begin: flowerAt,
+                        fill: "freeze"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "animateTransform",
+                      {
+                        attributeName: "transform",
+                        type: "scale",
+                        values: "0.3 0.3;1 1",
+                        keyTimes: "0;1",
+                        keySplines: "0.34 1 0.64 1",
+                        calcMode: "spline",
+                        dur: halfDur,
+                        begin: flowerAt,
+                        fill: "freeze"
+                      }
+                    )
+                  ] })
+                ] }, `f${fi}`)),
+                animate && /* @__PURE__ */ jsxRuntime.jsx(
+                  "animateTransform",
+                  {
+                    attributeName: "transform",
+                    type: "rotate",
+                    values: "0 50 50;1 50 50;-1 50 50;0 50 50",
+                    dur: "4s",
+                    repeatCount: "indefinite",
+                    begin: `${duration}s`
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+      );
+    }
+  ),
+  { displayName: "NtdIconFloral" }
+);
 const NtdIconFestive = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ children, animate = true, duration = 1.5, intensity = 'normal', colors, sparkleColor = '#fbbf24', className, style, }, ref) => {
-    const cols = colors !== null && colors !== void 0 ? colors : ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#a855f7', '#ec4899'];
-    const dur = `${duration * 0.6}s`;
-    // Confetti pieces: position relative to center, rotation, color index
-    const baseConfetti = [
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      children,
+      animate = true,
+      duration: durationProp,
+      animationSpeed: animationSpeed$1,
+      intensity = "normal",
+      colors,
+      sparkleColor = "#fbbf24",
+      className,
+      style
+    }, ref) => {
+      const duration = durationProp ?? 1.5;
+      const cols = colors ?? ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#a855f7", "#ec4899"];
+      const dur = `${duration * 0.6}s`;
+      const baseConfetti = [
         { x: 15, y: 15, r: 45, ci: 0 },
         { x: 80, y: 10, r: -30, ci: 1 },
         { x: 90, y: 75, r: 60, ci: 2 },
@@ -87,177 +231,539 @@ const NtdIconFestive = /* @__PURE__ */ Object.assign(
         { x: 50, y: 5, r: 20, ci: 4 },
         { x: 50, y: 95, r: -15, ci: 5 },
         { x: 5, y: 50, r: 75, ci: 0 },
-        { x: 95, y: 50, r: -60, ci: 1 },
-    ];
-    const denseConfetti = intensity === 'dense'
-        ? [
-            { x: 30, y: 5, r: 35, ci: 2 },
-            { x: 70, y: 5, r: -25, ci: 3 },
-            { x: 30, y: 95, r: 50, ci: 4 },
-            { x: 70, y: 95, r: -40, ci: 5 },
-            { x: 5, y: 30, r: 65, ci: 0 },
-            { x: 95, y: 30, r: -55, ci: 1 },
-            { x: 5, y: 70, r: 40, ci: 2 },
-            { x: 95, y: 70, r: -35, ci: 3 },
-        ]
-        : [];
-    const allConfetti = [
-        ...(intensity === 'subtle' ? baseConfetti.slice(0, 4) : baseConfetti),
-        ...denseConfetti,
-    ];
-    // 4-point star path
-    const starD = 'M0,-5 L1.2,-1.2 L5,0 L1.2,1.2 L0,5 L-1.2,1.2 L-5,0 L-1.2,-1.2Z';
-    const stars = [
+        { x: 95, y: 50, r: -60, ci: 1 }
+      ];
+      const denseConfetti = intensity === "dense" ? [
+        { x: 30, y: 5, r: 35, ci: 2 },
+        { x: 70, y: 5, r: -25, ci: 3 },
+        { x: 30, y: 95, r: 50, ci: 4 },
+        { x: 70, y: 95, r: -40, ci: 5 },
+        { x: 5, y: 30, r: 65, ci: 0 },
+        { x: 95, y: 30, r: -55, ci: 1 },
+        { x: 5, y: 70, r: 40, ci: 2 },
+        { x: 95, y: 70, r: -35, ci: 3 }
+      ] : [];
+      const allConfetti = [
+        ...intensity === "subtle" ? baseConfetti.slice(0, 4) : baseConfetti,
+        ...denseConfetti
+      ];
+      const starD = "M0,-5 L1.2,-1.2 L5,0 L1.2,1.2 L0,5 L-1.2,1.2 L-5,0 L-1.2,-1.2Z";
+      const stars = [
         { x: 20, y: 8, s: 0.6 },
         { x: 85, y: 20, s: 0.5 },
-        ...(intensity !== 'subtle'
-            ? [
-                { x: 15, y: 85, s: 0.5 },
-                { x: 80, y: 88, s: 0.4 },
-            ]
-            : []),
-        ...(intensity === 'dense'
-            ? [
-                { x: 50, y: 2, s: 0.7 },
-                { x: 95, y: 55, s: 0.45 },
-            ]
-            : []),
-    ];
-    // Sparkle dots
-    const sparkles = [
+        ...intensity !== "subtle" ? [
+          { x: 15, y: 85, s: 0.5 },
+          { x: 80, y: 88, s: 0.4 }
+        ] : [],
+        ...intensity === "dense" ? [
+          { x: 50, y: 2, s: 0.7 },
+          { x: 95, y: 55, s: 0.45 }
+        ] : []
+      ];
+      const sparkles = [
         { cx: 8, cy: 12, r: 1.5 },
         { cx: 92, cy: 88, r: 1.2 },
         { cx: 45, cy: 2, r: 1 },
         { cx: 55, cy: 98, r: 1 },
-        ...(intensity !== 'subtle'
-            ? [
-                { cx: 3, cy: 55, r: 1.3 },
-                { cx: 97, cy: 45, r: 1.1 },
-            ]
-            : []),
-    ];
-    return (jsxRuntime.jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [children, jsxRuntime.jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-30%', width: '160%', height: '160%' }, "aria-hidden": true, children: [allConfetti.map((c, i) => {
-                        const delay = `${(i * 0.07).toFixed(2)}s`;
-                        const col = cols[c.ci % cols.length];
-                        return (jsxRuntime.jsx("g", { transform: "translate(50,50)", children: jsxRuntime.jsxs("g", { opacity: animate ? 0 : 0.85, children: [jsxRuntime.jsx("rect", { x: c.x - 50 - 1.5, y: c.y - 50 - 3, width: 3, height: 6, rx: 0.5, fill: col, transform: `rotate(${c.r} ${c.x - 50} ${c.y - 50})` }), animate && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.85", dur: "0.4s", begin: delay, fill: "freeze" }), jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "scale", values: "0 0;1 1", keyTimes: "0;1", keySplines: "0.34 1 0.64 1", calcMode: "spline", dur: dur, begin: delay, fill: "freeze" })] }))] }) }, `c${i}`));
-                    }), stars.map((s, i) => (jsxRuntime.jsxs("g", { transform: `translate(${s.x},${s.y}) scale(${s.s})`, children: [jsxRuntime.jsx("path", { d: starD, fill: sparkleColor, opacity: animate ? 0 : 0.9, children: animate && (jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.9", dur: "0.5s", begin: `${(i * 0.15 + 0.3).toFixed(2)}s`, fill: "freeze" })) }), animate && (jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "scale", values: `${s.s};${s.s * 1.3};${s.s}`, dur: "1.5s", repeatCount: "indefinite", begin: `${duration + 0.5}s` }))] }, `s${i}`))), sparkles.map((sp, i) => (jsxRuntime.jsx("circle", { cx: sp.cx, cy: sp.cy, r: sp.r, fill: sparkleColor, opacity: animate ? 0 : 0.7, children: animate && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.7", dur: "0.3s", begin: `${(duration * 0.4 + i * 0.08).toFixed(2)}s`, fill: "freeze" }), jsxRuntime.jsx("animate", { attributeName: "opacity", values: "0.3;0.9;0.3", dur: `${1 + i * 0.3}s`, repeatCount: "indefinite", begin: `${duration}s` })] })) }, `sp${i}`)))] })] }));
-}), { displayName: 'NtdIconFestive' });
-// ══════════════════════════════════════════════════════
-//  3. NtdIconNeon 💡
-//  Multi-layered glow with neon sign flicker
-// ══════════════════════════════════════════════════════
+        ...intensity !== "subtle" ? [
+          { cx: 3, cy: 55, r: 1.3 },
+          { cx: 97, cy: 45, r: 1.1 }
+        ] : []
+      ];
+      return animationSpeed.retimeTree(
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%" },
+              "aria-hidden": true,
+              children: [
+                allConfetti.map((c, i) => {
+                  const delay = `${(i * 0.07).toFixed(2)}s`;
+                  const col = cols[c.ci % cols.length];
+                  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(50,50)", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { opacity: animate ? 0 : 0.85, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "rect",
+                      {
+                        x: c.x - 50 - 1.5,
+                        y: c.y - 50 - 3,
+                        width: 3,
+                        height: 6,
+                        rx: 0.5,
+                        fill: col,
+                        transform: `rotate(${c.r} ${c.x - 50} ${c.y - 50})`
+                      }
+                    ),
+                    animate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: "0.85",
+                          dur: "0.4s",
+                          begin: delay,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animateTransform",
+                        {
+                          attributeName: "transform",
+                          type: "scale",
+                          values: "0 0;1 1",
+                          keyTimes: "0;1",
+                          keySplines: "0.34 1 0.64 1",
+                          calcMode: "spline",
+                          dur,
+                          begin: delay,
+                          fill: "freeze"
+                        }
+                      )
+                    ] })
+                  ] }) }, `c${i}`);
+                }),
+                stars.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${s.x},${s.y}) scale(${s.s})`, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: starD, fill: sparkleColor, opacity: animate ? 0 : 0.9, children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      from: "0",
+                      to: "0.9",
+                      dur: "0.5s",
+                      begin: `${(i * 0.15 + 0.3).toFixed(2)}s`,
+                      fill: "freeze"
+                    }
+                  ) }),
+                  animate && /* @__PURE__ */ jsxRuntime.jsx(
+                    "animateTransform",
+                    {
+                      attributeName: "transform",
+                      type: "scale",
+                      values: `${s.s};${s.s * 1.3};${s.s}`,
+                      dur: "1.5s",
+                      repeatCount: "indefinite",
+                      begin: `${duration + 0.5}s`
+                    }
+                  )
+                ] }, `s${i}`)),
+                sparkles.map((sp, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: sp.cx,
+                    cy: sp.cy,
+                    r: sp.r,
+                    fill: sparkleColor,
+                    opacity: animate ? 0 : 0.7,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: "0.7",
+                          dur: "0.3s",
+                          begin: `${(duration * 0.4 + i * 0.08).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: "0.3;0.9;0.3",
+                          dur: `${1 + i * 0.3}s`,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      )
+                    ] })
+                  },
+                  `sp${i}`
+                ))
+              ]
+            }
+          )
+        ] }),
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+      );
+    }
+  ),
+  { displayName: "NtdIconFestive" }
+);
 const NtdIconNeon = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ children, animate = true, duration = 4, intensity = 'normal', glowColor = '#0ff', secondaryGlow, flicker = true, className, style, }, ref) => {
-    const uid = React.useId().replace(/[^a-zA-Z0-9]/g, '_');
-    const glow2 = secondaryGlow !== null && secondaryGlow !== void 0 ? secondaryGlow : glowColor;
-    const blur = intensity === 'dense' ? 8 : intensity === 'subtle' ? 3 : 5;
-    const spread = intensity === 'dense' ? 20 : intensity === 'subtle' ? 8 : 12;
-    const filterValue = [
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      children,
+      animate = true,
+      duration: durationProp,
+      animationSpeed: animationSpeed$1,
+      intensity = "normal",
+      glowColor = "#0ff",
+      secondaryGlow,
+      flicker = true,
+      className,
+      style
+    }, ref) => {
+      const duration = durationProp ?? 4;
+      const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
+      const glow2 = secondaryGlow ?? glowColor;
+      const blur = intensity === "dense" ? 8 : intensity === "subtle" ? 3 : 5;
+      const spread = intensity === "dense" ? 20 : intensity === "subtle" ? 8 : 12;
+      const filterValue = [
         `drop-shadow(0 0 ${blur * 0.3}px ${glowColor})`,
         `drop-shadow(0 0 ${blur}px ${glowColor})`,
         `drop-shadow(0 0 ${spread}px ${glow2}80)`,
-        intensity === 'dense' ? `drop-shadow(0 0 ${spread * 1.5}px ${glow2}40)` : '',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const dimFilter = `drop-shadow(0 0 ${blur * 0.2}px ${glowColor})`;
-    const animName = `ntd_neon_${uid}`;
-    return (jsxRuntime.jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [animate && flicker && (jsxRuntime.jsx("style", { children: `
-            @keyframes ${animName} {
-              0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; filter: ${filterValue}; }
-              20%, 24%, 55% { opacity: 0.5; filter: ${dimFilter}; }
-            }
-          ` })), jsxRuntime.jsx("span", { style: {
-                    display: 'inline-flex',
-                    filter: filterValue,
-                    ...(animate && flicker ? { animation: `${animName} ${duration}s infinite` } : {}),
-                }, children: children })] }));
-}), { displayName: 'NtdIconNeon' });
-// ══════════════════════════════════════════════════════
-//  4. NtdIconSketch ✏️
-//  Hand-drawn look with SVG turbulence + scribble overlay
-// ══════════════════════════════════════════════════════
+        intensity === "dense" ? `drop-shadow(0 0 ${spread * 1.5}px ${glow2}40)` : ""
+      ].filter(Boolean).join(" ");
+      const dimFilter = `drop-shadow(0 0 ${blur * 0.2}px ${glowColor})`;
+      const animName = `ntd_neon_${uid}`;
+      return animationSpeed.retimeTree(
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          animate && flicker && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+            @keyframes ${animName} {
+              0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; filter: ${filterValue}; }
+              20%, 24%, 55% { opacity: 0.5; filter: ${dimFilter}; }
+            }
+          ` }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                filter: filterValue,
+                ...animate && flicker ? { animation: `${animName} ${duration}s infinite` } : {}
+              },
+              children
+            }
+          )
+        ] }),
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+      );
+    }
+  ),
+  { displayName: "NtdIconNeon" }
+);
 const NtdIconSketch = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ children, animate = true, duration = 1.5, intensity = 'normal', strokeColor = '#374151', roughness = 2, className, style, }, ref) => {
-    const uid = React.useId().replace(/[^a-zA-Z0-9]/g, '_');
-    const filterId = `ntd_sketch_${uid}`;
-    const dur = `${duration}s`;
-    const dashLen = 100;
-    // Scribble paths
-    const scribbleMain = 'M18,82 C25,80 35,84 50,81 C65,78 75,82 82,80';
-    const scribbleExtra = ['M20,16 C28,18 38,15 48,17', 'M55,85 C65,83 75,86 82,84'];
-    // Cross-hatch mark positions
-    const hatchCount = intensity === 'dense' ? 6 : intensity === 'subtle' ? 2 : 4;
-    const hatchPositions = [
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      children,
+      animate = true,
+      duration: durationProp,
+      animationSpeed: animationSpeed$1,
+      intensity = "normal",
+      strokeColor = "#374151",
+      roughness = 2,
+      className,
+      style
+    }, ref) => {
+      const duration = durationProp ?? 1.5;
+      const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
+      const filterId = `ntd_sketch_${uid}`;
+      const dur = `${duration}s`;
+      const dashLen = 100;
+      const scribbleMain = "M18,82 C25,80 35,84 50,81 C65,78 75,82 82,80";
+      const scribbleExtra = ["M20,16 C28,18 38,15 48,17", "M55,85 C65,83 75,86 82,84"];
+      const hatchCount = intensity === "dense" ? 6 : intensity === "subtle" ? 2 : 4;
+      const hatchPositions = [
         { x1: 8, y1: 8, x2: 14, y2: 14 },
         { x1: 86, y1: 8, x2: 92, y2: 14 },
         { x1: 8, y1: 86, x2: 14, y2: 92 },
         { x1: 86, y1: 86, x2: 92, y2: 92 },
         { x1: 10, y1: 12, x2: 16, y2: 10 },
-        { x1: 84, y1: 12, x2: 90, y2: 10 },
-    ];
-    return (jsxRuntime.jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsxRuntime.jsx("svg", { style: { position: 'absolute', width: 0, height: 0 }, "aria-hidden": true, children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: filterId, children: [jsxRuntime.jsx("feTurbulence", { type: "turbulence", baseFrequency: 0.02 + roughness * 0.008, numOctaves: 3, seed: 2, result: "noise" }), jsxRuntime.jsx("feDisplacementMap", { in: "SourceGraphic", in2: "noise", scale: roughness, xChannelSelector: "R", yChannelSelector: "G" })] }) }) }), jsxRuntime.jsx("span", { style: { display: 'inline-flex', filter: `url(#${filterId})` }, children: children }), jsxRuntime.jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-20%', width: '140%', height: '140%' }, "aria-hidden": true, children: [jsxRuntime.jsx("path", { d: scribbleMain, fill: "none", stroke: strokeColor, strokeWidth: "1", strokeLinecap: "round", opacity: 0.5, ...(animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {}), children: animate && (jsxRuntime.jsx("animate", { attributeName: "stroke-dashoffset", from: `${dashLen}`, to: "0", dur: dur, fill: "freeze" })) }), intensity !== 'subtle' &&
-                        scribbleExtra.slice(0, intensity === 'dense' ? 2 : 1).map((d, i) => (jsxRuntime.jsx("path", { d: d, fill: "none", stroke: strokeColor, strokeWidth: "0.8", strokeLinecap: "round", opacity: 0.35, ...(animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {}), children: animate && (jsxRuntime.jsx("animate", { attributeName: "stroke-dashoffset", from: `${dashLen}`, to: "0", dur: dur, fill: "freeze", begin: `${0.3 + i * 0.2}s` })) }, `se${i}`))), hatchPositions.slice(0, hatchCount).map((p, i) => (jsxRuntime.jsx("line", { x1: p.x1, y1: p.y1, x2: p.x2, y2: p.y2, stroke: strokeColor, strokeWidth: "0.6", strokeLinecap: "round", opacity: animate ? 0 : 0.3, children: animate && (jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.3", dur: "0.3s", begin: `${duration * 0.7 + i * 0.1}s`, fill: "freeze" })) }, `h${i}`)))] })] }));
-}), { displayName: 'NtdIconSketch' });
-// ══════════════════════════════════════════════════════
-//  5. NtdIconWatercolor 🎨
-//  Soft paint blobs & bleed effect behind the icon
-// ══════════════════════════════════════════════════════
+        { x1: 84, y1: 12, x2: 90, y2: 10 }
+      ];
+      return animationSpeed.retimeTree(
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: filterId, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "feTurbulence",
+              {
+                type: "turbulence",
+                baseFrequency: 0.02 + roughness * 8e-3,
+                numOctaves: 3,
+                seed: 2,
+                result: "noise"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "feDisplacementMap",
+              {
+                in: "SourceGraphic",
+                in2: "noise",
+                scale: roughness,
+                xChannelSelector: "R",
+                yChannelSelector: "G"
+              }
+            )
+          ] }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", filter: `url(#${filterId})` }, children }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%" },
+              "aria-hidden": true,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: scribbleMain,
+                    fill: "none",
+                    stroke: strokeColor,
+                    strokeWidth: "1",
+                    strokeLinecap: "round",
+                    opacity: 0.5,
+                    ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                      "animate",
+                      {
+                        attributeName: "stroke-dashoffset",
+                        from: `${dashLen}`,
+                        to: "0",
+                        dur,
+                        fill: "freeze"
+                      }
+                    )
+                  }
+                ),
+                intensity !== "subtle" && scribbleExtra.slice(0, intensity === "dense" ? 2 : 1).map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d,
+                    fill: "none",
+                    stroke: strokeColor,
+                    strokeWidth: "0.8",
+                    strokeLinecap: "round",
+                    opacity: 0.35,
+                    ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                      "animate",
+                      {
+                        attributeName: "stroke-dashoffset",
+                        from: `${dashLen}`,
+                        to: "0",
+                        dur,
+                        fill: "freeze",
+                        begin: `${0.3 + i * 0.2}s`
+                      }
+                    )
+                  },
+                  `se${i}`
+                )),
+                hatchPositions.slice(0, hatchCount).map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "line",
+                  {
+                    x1: p.x1,
+                    y1: p.y1,
+                    x2: p.x2,
+                    y2: p.y2,
+                    stroke: strokeColor,
+                    strokeWidth: "0.6",
+                    strokeLinecap: "round",
+                    opacity: animate ? 0 : 0.3,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                      "animate",
+                      {
+                        attributeName: "opacity",
+                        from: "0",
+                        to: "0.3",
+                        dur: "0.3s",
+                        begin: `${duration * 0.7 + i * 0.1}s`,
+                        fill: "freeze"
+                      }
+                    )
+                  },
+                  `h${i}`
+                ))
+              ]
+            }
+          )
+        ] }),
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+      );
+    }
+  ),
+  { displayName: "NtdIconSketch" }
+);
 const NtdIconWatercolor = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ children, animate = true, duration = 2, intensity = 'normal', tintColor = '#818cf8', bleedColor = '#f0abfc', className, style, }, ref) => {
-    const uid = React.useId().replace(/[^a-zA-Z0-9]/g, '_');
-    const filterId = `ntd_wc_${uid}`;
-    const blobFilter = `${filterId}_blob`;
-    // Paint splotches
-    const splotches = [
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      children,
+      animate = true,
+      duration: durationProp,
+      animationSpeed: animationSpeed$1,
+      intensity = "normal",
+      tintColor = "#818cf8",
+      bleedColor = "#f0abfc",
+      className,
+      style
+    }, ref) => {
+      const duration = durationProp ?? 2;
+      const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
+      const filterId = `ntd_wc_${uid}`;
+      const blobFilter = `${filterId}_blob`;
+      const splotches = [
         { cx: 30, cy: 35, r: 18, color: tintColor, op: 0.2 },
         { cx: 70, cy: 65, r: 15, color: bleedColor, op: 0.18 },
         { cx: 50, cy: 50, r: 22, color: tintColor, op: 0.12 },
-        ...(intensity !== 'subtle'
-            ? [
-                { cx: 25, cy: 70, r: 12, color: bleedColor, op: 0.15 },
-                { cx: 75, cy: 30, r: 10, color: tintColor, op: 0.15 },
-            ]
-            : []),
-        ...(intensity === 'dense'
-            ? [
-                { cx: 15, cy: 50, r: 14, color: bleedColor, op: 0.12 },
-                { cx: 85, cy: 50, r: 12, color: tintColor, op: 0.12 },
-                { cx: 50, cy: 15, r: 10, color: bleedColor, op: 0.1 },
-                { cx: 50, cy: 85, r: 11, color: tintColor, op: 0.1 },
-            ]
-            : []),
-    ];
-    // Splatter dots
-    const splatters = [
+        ...intensity !== "subtle" ? [
+          { cx: 25, cy: 70, r: 12, color: bleedColor, op: 0.15 },
+          { cx: 75, cy: 30, r: 10, color: tintColor, op: 0.15 }
+        ] : [],
+        ...intensity === "dense" ? [
+          { cx: 15, cy: 50, r: 14, color: bleedColor, op: 0.12 },
+          { cx: 85, cy: 50, r: 12, color: tintColor, op: 0.12 },
+          { cx: 50, cy: 15, r: 10, color: bleedColor, op: 0.1 },
+          { cx: 50, cy: 85, r: 11, color: tintColor, op: 0.1 }
+        ] : []
+      ];
+      const splatters = [
         { cx: 12, cy: 20, r: 2 },
         { cx: 88, cy: 80, r: 1.5 },
         { cx: 20, cy: 85, r: 1.8 },
         { cx: 80, cy: 15, r: 1.3 },
-        ...(intensity !== 'subtle'
-            ? [
-                { cx: 8, cy: 45, r: 1.2 },
-                { cx: 92, cy: 55, r: 1 },
-            ]
-            : []),
-    ];
-    return (jsxRuntime.jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsxRuntime.jsx("svg", { style: { position: 'absolute', width: 0, height: 0 }, "aria-hidden": true, children: jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [jsxRuntime.jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.04", numOctaves: 4, seed: 5, result: "noise" }), jsxRuntime.jsx("feDisplacementMap", { in: "SourceGraphic", in2: "noise", scale: 3, xChannelSelector: "R", yChannelSelector: "G", result: "displaced" }), jsxRuntime.jsx("feGaussianBlur", { in: "displaced", stdDeviation: "0.5" })] }), jsxRuntime.jsx("filter", { id: blobFilter, children: jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "3" }) })] }) }), jsxRuntime.jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-25%', width: '150%', height: '150%', zIndex: 0 }, "aria-hidden": true, children: [splotches.map((s, i) => (jsxRuntime.jsx("circle", { cx: s.cx, cy: s.cy, r: animate ? 0 : s.r, fill: s.color, opacity: s.op, filter: `url(#${blobFilter})`, children: animate && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("animate", { attributeName: "r", from: "0", to: `${s.r}`, dur: `${duration * 0.7}s`, begin: `${(i * 0.15).toFixed(2)}s`, fill: "freeze" }), jsxRuntime.jsx("animate", { attributeName: "opacity", values: `${s.op};${s.op * 1.3};${s.op}`, dur: "3s", begin: `${duration}s`, repeatCount: "indefinite" })] })) }, `sp${i}`))), splatters.map((d, i) => (jsxRuntime.jsx("circle", { cx: d.cx, cy: d.cy, r: d.r, fill: i % 2 === 0 ? tintColor : bleedColor, opacity: animate ? 0 : 0.3, filter: `url(#${blobFilter})`, children: animate && (jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.3", dur: "0.3s", begin: `${(duration * 0.5 + i * 0.1).toFixed(2)}s`, fill: "freeze" })) }, `dot${i}`)))] }), jsxRuntime.jsx("span", { style: {
-                    display: 'inline-flex',
-                    filter: `url(#${filterId})`,
-                    position: 'relative',
-                    zIndex: 1,
-                }, children: children })] }));
-}), { displayName: 'NtdIconWatercolor' });
-// ══════════════════════════════════════════════════════
-//  6. NtdIconCosmic ✨
-//  Stars, nebula glow & constellation lines
-// ══════════════════════════════════════════════════════
+        ...intensity !== "subtle" ? [
+          { cx: 8, cy: 45, r: 1.2 },
+          { cx: 92, cy: 55, r: 1 }
+        ] : []
+      ];
+      return animationSpeed.retimeTree(
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "feTurbulence",
+                {
+                  type: "fractalNoise",
+                  baseFrequency: "0.04",
+                  numOctaves: 4,
+                  seed: 5,
+                  result: "noise"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "feDisplacementMap",
+                {
+                  in: "SourceGraphic",
+                  in2: "noise",
+                  scale: 3,
+                  xChannelSelector: "R",
+                  yChannelSelector: "G",
+                  result: "displaced"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "displaced", stdDeviation: "0.5" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("filter", { id: blobFilter, children: /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "3" }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                splotches.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: s.cx,
+                    cy: s.cy,
+                    r: animate ? 0 : s.r,
+                    fill: s.color,
+                    opacity: s.op,
+                    filter: `url(#${blobFilter})`,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "r",
+                          from: "0",
+                          to: `${s.r}`,
+                          dur: `${duration * 0.7}s`,
+                          begin: `${(i * 0.15).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: `${s.op};${s.op * 1.3};${s.op}`,
+                          dur: "3s",
+                          begin: `${duration}s`,
+                          repeatCount: "indefinite"
+                        }
+                      )
+                    ] })
+                  },
+                  `sp${i}`
+                )),
+                splatters.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: d.cx,
+                    cy: d.cy,
+                    r: d.r,
+                    fill: i % 2 === 0 ? tintColor : bleedColor,
+                    opacity: animate ? 0 : 0.3,
+                    filter: `url(#${blobFilter})`,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                      "animate",
+                      {
+                        attributeName: "opacity",
+                        from: "0",
+                        to: "0.3",
+                        dur: "0.3s",
+                        begin: `${(duration * 0.5 + i * 0.1).toFixed(2)}s`,
+                        fill: "freeze"
+                      }
+                    )
+                  },
+                  `dot${i}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                filter: `url(#${filterId})`,
+                position: "relative",
+                zIndex: 1
+              },
+              children
+            }
+          )
+        ] }),
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+      );
+    }
+  ),
+  { displayName: "NtdIconWatercolor" }
+);
 const NtdIconCosmic = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ children, animate = true, duration = 2, intensity = 'normal', starColor = '#e2e8f0', nebulaColor = '#7c3aed', nebulaColor2 = '#2563eb', className, style, }, ref) => {
-    const uid = React.useId().replace(/[^a-zA-Z0-9]/g, '_');
-    const nebulaFilter = `ntd_cosm_${uid}`;
-    // Stars
-    const baseStars = [
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      children,
+      animate = true,
+      duration: durationProp,
+      animationSpeed: animationSpeed$1,
+      intensity = "normal",
+      starColor = "#e2e8f0",
+      nebulaColor = "#7c3aed",
+      nebulaColor2 = "#2563eb",
+      className,
+      style
+    }, ref) => {
+      const duration = durationProp ?? 2;
+      const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
+      const nebulaFilter = `ntd_cosm_${uid}`;
+      const baseStars = [
         { cx: 8, cy: 15, r: 1.2 },
         { cx: 22, cy: 5, r: 0.9 },
         { cx: 45, cy: 8, r: 1 },
@@ -268,206 +774,590 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
         { cx: 12, cy: 82, r: 1.1 },
         { cx: 35, cy: 92, r: 0.8 },
         { cx: 72, cy: 88, r: 1 },
-        { cx: 88, cy: 78, r: 0.7 },
-    ];
-    const denseStars = intensity === 'dense'
-        ? [
-            { cx: 55, cy: 3, r: 0.6 },
-            { cx: 3, cy: 65, r: 0.8 },
-            { cx: 97, cy: 35, r: 0.5 },
-            { cx: 60, cy: 97, r: 0.7 },
-            { cx: 15, cy: 35, r: 0.5 },
-            { cx: 85, cy: 42, r: 0.6 },
-        ]
-        : [];
-    const allStars = [
-        ...(intensity === 'subtle' ? baseStars.slice(0, 6) : baseStars),
-        ...denseStars,
-    ];
-    // Constellation lines connecting nearby stars
-    const constellations = [
+        { cx: 88, cy: 78, r: 0.7 }
+      ];
+      const denseStars = intensity === "dense" ? [
+        { cx: 55, cy: 3, r: 0.6 },
+        { cx: 3, cy: 65, r: 0.8 },
+        { cx: 97, cy: 35, r: 0.5 },
+        { cx: 60, cy: 97, r: 0.7 },
+        { cx: 15, cy: 35, r: 0.5 },
+        { cx: 85, cy: 42, r: 0.6 }
+      ] : [];
+      const allStars = [
+        ...intensity === "subtle" ? baseStars.slice(0, 6) : baseStars,
+        ...denseStars
+      ];
+      const constellations = [
         { from: [8, 15], to: [22, 5] },
         { from: [22, 5], to: [45, 8] },
         { from: [78, 12], to: [92, 22] },
-        ...(intensity !== 'subtle'
-            ? [
-                { from: [12, 82], to: [35, 92] },
-                { from: [72, 88], to: [88, 78] },
-            ]
-            : []),
-        ...(intensity === 'dense'
-            ? [
-                { from: [45, 8], to: [78, 12] },
-                { from: [5, 42], to: [12, 82] },
-            ]
-            : []),
-    ];
-    // Nebula blobs
-    const nebulae = [
+        ...intensity !== "subtle" ? [
+          { from: [12, 82], to: [35, 92] },
+          { from: [72, 88], to: [88, 78] }
+        ] : [],
+        ...intensity === "dense" ? [
+          { from: [45, 8], to: [78, 12] },
+          { from: [5, 42], to: [12, 82] }
+        ] : []
+      ];
+      const nebulae = [
         { cx: 25, cy: 25, r: 16, color: nebulaColor, op: 0.12 },
         { cx: 75, cy: 75, r: 18, color: nebulaColor2, op: 0.1 },
-        ...(intensity !== 'subtle'
-            ? [{ cx: 50, cy: 50, r: 14, color: nebulaColor, op: 0.08 }]
-            : []),
-        ...(intensity === 'dense'
-            ? [
-                { cx: 80, cy: 20, r: 12, color: nebulaColor2, op: 0.09 },
-                { cx: 20, cy: 80, r: 13, color: nebulaColor, op: 0.09 },
-            ]
-            : []),
-    ];
-    const lineLen = 80;
-    return (jsxRuntime.jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsxRuntime.jsx("svg", { style: { position: 'absolute', width: 0, height: 0 }, "aria-hidden": true, children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("filter", { id: nebulaFilter, children: jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }), jsxRuntime.jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-30%', width: '160%', height: '160%', zIndex: 0 }, "aria-hidden": true, children: [nebulae.map((n, i) => (jsxRuntime.jsx("circle", { cx: n.cx, cy: n.cy, r: n.r, fill: n.color, opacity: animate ? 0 : n.op, filter: `url(#${nebulaFilter})`, children: animate && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: `${n.op}`, dur: `${duration}s`, fill: "freeze" }), jsxRuntime.jsx("animate", { attributeName: "opacity", values: `${n.op};${n.op * 1.5};${n.op}`, dur: "5s", repeatCount: "indefinite", begin: `${duration}s` }), jsxRuntime.jsx("animate", { attributeName: "r", values: `${n.r};${n.r * 1.1};${n.r}`, dur: "6s", repeatCount: "indefinite", begin: `${duration}s` })] })) }, `nb${i}`))), constellations.map((c, i) => (jsxRuntime.jsx("line", { x1: c.from[0], y1: c.from[1], x2: c.to[0], y2: c.to[1], stroke: starColor, strokeWidth: "0.3", opacity: 0.25, ...(animate ? { strokeDasharray: lineLen, strokeDashoffset: lineLen } : {}), children: animate && (jsxRuntime.jsx("animate", { attributeName: "stroke-dashoffset", from: `${lineLen}`, to: "0", dur: `${duration * 0.8}s`, begin: `${(i * 0.2).toFixed(1)}s`, fill: "freeze" })) }, `cl${i}`)))] }), jsxRuntime.jsx("span", { style: { display: 'inline-flex', position: 'relative', zIndex: 1 }, children: children }), jsxRuntime.jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-30%', width: '160%', height: '160%', zIndex: 2 }, "aria-hidden": true, children: [allStars.map((s, i) => (jsxRuntime.jsx("circle", { cx: s.cx, cy: s.cy, r: s.r, fill: starColor, opacity: animate ? 0 : 0.8, children: animate && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.8", dur: `${duration * 0.5}s`, begin: `${(i * 0.1).toFixed(2)}s`, fill: "freeze" }), jsxRuntime.jsx("animate", { attributeName: "opacity", values: "0.4;1;0.4", dur: `${1.5 + (i % 4) * 0.4}s`, repeatCount: "indefinite", begin: `${duration}s` }), jsxRuntime.jsx("animate", { attributeName: "r", values: `${s.r};${s.r * 1.4};${s.r}`, dur: `${2 + (i % 3) * 0.5}s`, repeatCount: "indefinite", begin: `${duration}s` })] })) }, `st${i}`))), animate && (jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 50 50", to: "360 50 50", dur: "120s", repeatCount: "indefinite" }))] })] }));
-}), { displayName: 'NtdIconCosmic' });
-// ══════════════════════════════════════════════════════
-//  7. NtdIconSteampunk ⚙️
-//  Rotating gears, copper pipes, brass rivets & steam puffs
-// ══════════════════════════════════════════════════════
+        ...intensity !== "subtle" ? [{ cx: 50, cy: 50, r: 14, color: nebulaColor, op: 0.08 }] : [],
+        ...intensity === "dense" ? [
+          { cx: 80, cy: 20, r: 12, color: nebulaColor2, op: 0.09 },
+          { cx: 20, cy: 80, r: 13, color: nebulaColor, op: 0.09 }
+        ] : []
+      ];
+      const lineLen = 80;
+      return animationSpeed.retimeTree(
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("filter", { id: nebulaFilter, children: /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                nebulae.map((n, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: n.cx,
+                    cy: n.cy,
+                    r: n.r,
+                    fill: n.color,
+                    opacity: animate ? 0 : n.op,
+                    filter: `url(#${nebulaFilter})`,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: `${n.op}`,
+                          dur: `${duration}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: `${n.op};${n.op * 1.5};${n.op}`,
+                          dur: "5s",
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "r",
+                          values: `${n.r};${n.r * 1.1};${n.r}`,
+                          dur: "6s",
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      )
+                    ] })
+                  },
+                  `nb${i}`
+                )),
+                constellations.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "line",
+                  {
+                    x1: c.from[0],
+                    y1: c.from[1],
+                    x2: c.to[0],
+                    y2: c.to[1],
+                    stroke: starColor,
+                    strokeWidth: "0.3",
+                    opacity: 0.25,
+                    ...animate ? { strokeDasharray: lineLen, strokeDashoffset: lineLen } : {},
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                      "animate",
+                      {
+                        attributeName: "stroke-dashoffset",
+                        from: `${lineLen}`,
+                        to: "0",
+                        dur: `${duration * 0.8}s`,
+                        begin: `${(i * 0.2).toFixed(1)}s`,
+                        fill: "freeze"
+                      }
+                    )
+                  },
+                  `cl${i}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 2 },
+              "aria-hidden": true,
+              children: [
+                allStars.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: s.cx,
+                    cy: s.cy,
+                    r: s.r,
+                    fill: starColor,
+                    opacity: animate ? 0 : 0.8,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: "0.8",
+                          dur: `${duration * 0.5}s`,
+                          begin: `${(i * 0.1).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: "0.4;1;0.4",
+                          dur: `${1.5 + i % 4 * 0.4}s`,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "r",
+                          values: `${s.r};${s.r * 1.4};${s.r}`,
+                          dur: `${2 + i % 3 * 0.5}s`,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      )
+                    ] })
+                  },
+                  `st${i}`
+                )),
+                animate && /* @__PURE__ */ jsxRuntime.jsx(
+                  "animateTransform",
+                  {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: "0 50 50",
+                    to: "360 50 50",
+                    dur: "120s",
+                    repeatCount: "indefinite"
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+      );
+    }
+  ),
+  { displayName: "NtdIconCosmic" }
+);
 const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ children, animate = true, duration = 3, intensity = 'normal', brassColor = '#b45309', pipeColor = '#78350f', steamColor = '#d1d5db', className, style, }, ref) => {
-    // Build toothed gear path from a center point, radius and tooth count
-    const makeGear = (cx, cy, r, teeth) => {
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      children,
+      animate = true,
+      duration: durationProp,
+      animationSpeed: animationSpeed$1,
+      intensity = "normal",
+      brassColor = "#b45309",
+      pipeColor = "#78350f",
+      steamColor = "#d1d5db",
+      className,
+      style
+    }, ref) => {
+      const duration = durationProp ?? 3;
+      const makeGear = (cx, cy, r, teeth) => {
         const inner = r * 0.68;
-        const step = (Math.PI * 2) / teeth;
+        const step = Math.PI * 2 / teeth;
         const pt = (radius, angle) => `${(cx + radius * Math.cos(angle)).toFixed(2)},${(cy + radius * Math.sin(angle)).toFixed(2)}`;
-        let d = '';
+        let d = "";
         for (let i = 0; i < teeth; i++) {
-            const a0 = i * step;
-            d +=
-                `${i === 0 ? 'M' : 'L'}${pt(inner, a0)} ` +
-                    `L${pt(r, a0 + step * 0.3)} L${pt(r, a0 + step * 0.7)} ` +
-                    `L${pt(inner, a0 + step)} `;
+          const a0 = i * step;
+          d += `${i === 0 ? "M" : "L"}${pt(inner, a0)} L${pt(r, a0 + step * 0.3)} L${pt(r, a0 + step * 0.7)} L${pt(inner, a0 + step)} `;
         }
-        return d + 'Z';
-    };
-    const gears = [
+        return d + "Z";
+      };
+      const gears = [
         { cx: 15, cy: 15, r: 11, teeth: 8, dir: 1, dm: 1 },
         { cx: 85, cy: 85, r: 9, teeth: 7, dir: -1, dm: 0.8 },
-        ...(intensity !== 'subtle'
-            ? [
-                { cx: 85, cy: 15, r: 7, teeth: 6, dir: 1, dm: 1.1 },
-                { cx: 15, cy: 85, r: 6, teeth: 5, dir: -1, dm: 0.9 },
-            ]
-            : []),
-        ...(intensity === 'dense' ? [{ cx: 50, cy: 3, r: 5, teeth: 5, dir: 1, dm: 1.3 }] : []),
-    ];
-    const pipes = [
-        { d: 'M27,15 H48', w: 3.5 },
-        { d: 'M85,28 V48', w: 3.5 },
-        ...(intensity !== 'subtle'
-            ? [
-                { d: 'M52,85 H73', w: 3.5 },
-                { d: 'M15,52 V73', w: 3.5 },
-            ]
-            : []),
-    ];
-    const rivets = intensity === 'subtle'
-        ? [
-            { cx: 50, cy: 2 },
-            { cx: 50, cy: 98 },
-        ]
-        : intensity === 'dense'
-            ? [
-                { cx: 50, cy: 2 },
-                { cx: 50, cy: 98 },
-                { cx: 2, cy: 50 },
-                { cx: 98, cy: 50 },
-                { cx: 25, cy: 2 },
-                { cx: 75, cy: 2 },
-                { cx: 25, cy: 98 },
-                { cx: 75, cy: 98 },
-            ]
-            : [
-                { cx: 50, cy: 2 },
-                { cx: 50, cy: 98 },
-                { cx: 2, cy: 50 },
-                { cx: 98, cy: 50 },
-            ];
-    const steamPuffs = [
+        ...intensity !== "subtle" ? [
+          { cx: 85, cy: 15, r: 7, teeth: 6, dir: 1, dm: 1.1 },
+          { cx: 15, cy: 85, r: 6, teeth: 5, dir: -1, dm: 0.9 }
+        ] : [],
+        ...intensity === "dense" ? [{ cx: 50, cy: 3, r: 5, teeth: 5, dir: 1, dm: 1.3 }] : []
+      ];
+      const pipes = [
+        { d: "M27,15 H48", w: 3.5 },
+        { d: "M85,28 V48", w: 3.5 },
+        ...intensity !== "subtle" ? [
+          { d: "M52,85 H73", w: 3.5 },
+          { d: "M15,52 V73", w: 3.5 }
+        ] : []
+      ];
+      const rivets = intensity === "subtle" ? [
+        { cx: 50, cy: 2 },
+        { cx: 50, cy: 98 }
+      ] : intensity === "dense" ? [
+        { cx: 50, cy: 2 },
+        { cx: 50, cy: 98 },
+        { cx: 2, cy: 50 },
+        { cx: 98, cy: 50 },
+        { cx: 25, cy: 2 },
+        { cx: 75, cy: 2 },
+        { cx: 25, cy: 98 },
+        { cx: 75, cy: 98 }
+      ] : [
+        { cx: 50, cy: 2 },
+        { cx: 50, cy: 98 },
+        { cx: 2, cy: 50 },
+        { cx: 98, cy: 50 }
+      ];
+      const steamPuffs = [
         { cx: 50, cy: 3, r: 3 },
         { cx: 55, cy: -4, r: 2.2 },
-        { cx: 47, cy: -10, r: 1.6 },
-    ];
-    return (jsxRuntime.jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsxRuntime.jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-20%', width: '140%', height: '140%', zIndex: 0 }, "aria-hidden": true, children: [pipes.map((p, i) => (jsxRuntime.jsx("path", { d: p.d, stroke: pipeColor, strokeWidth: p.w, fill: "none", strokeLinecap: "round", opacity: 0.55 }, `pipe${i}`))), rivets.map((rv, i) => (jsxRuntime.jsx("circle", { cx: rv.cx, cy: rv.cy, r: 1.5, fill: brassColor, opacity: 0.7 }, `rv${i}`)))] }), jsxRuntime.jsx("span", { style: { display: 'inline-flex', position: 'relative', zIndex: 1 }, children: children }), jsxRuntime.jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-20%', width: '140%', height: '140%', zIndex: 2 }, "aria-hidden": true, children: [gears.map((g, i) => (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: makeGear(g.cx, g.cy, g.r, g.teeth), fill: brassColor, opacity: 0.78, children: animate && (jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${g.cx} ${g.cy}`, to: `${g.dir * 360} ${g.cx} ${g.cy}`, dur: `${duration * g.dm}s`, repeatCount: "indefinite" })) }), jsxRuntime.jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.3, fill: pipeColor, opacity: 0.85 }), jsxRuntime.jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.12, fill: brassColor, opacity: 0.6 })] }, `gear${i}`))), animate &&
-                        steamPuffs.map((sp, i) => (jsxRuntime.jsxs("circle", { cx: sp.cx, cy: sp.cy, r: sp.r, fill: steamColor, opacity: 0, children: [jsxRuntime.jsx("animate", { attributeName: "opacity", values: "0;0.45;0", dur: "2.4s", begin: `${i * 0.7}s`, repeatCount: "indefinite" }), jsxRuntime.jsx("animate", { attributeName: "cy", values: `${sp.cy};${sp.cy - 12}`, dur: "2.4s", begin: `${i * 0.7}s`, repeatCount: "indefinite" }), jsxRuntime.jsx("animate", { attributeName: "r", values: `${sp.r};${sp.r * 2.2}`, dur: "2.4s", begin: `${i * 0.7}s`, repeatCount: "indefinite" })] }, `stm${i}`)))] })] }));
-}), { displayName: 'NtdIconSteampunk' });
-// ══════════════════════════════════════════════════════
-//  8. NtdIconFrost ❄️
-//  Hexagonal snowflake crystals, sparkles & frozen glow
-// ══════════════════════════════════════════════════════
+        { cx: 47, cy: -10, r: 1.6 }
+      ];
+      return animationSpeed.retimeTree(
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%", zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                pipes.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: p.d,
+                    stroke: pipeColor,
+                    strokeWidth: p.w,
+                    fill: "none",
+                    strokeLinecap: "round",
+                    opacity: 0.55
+                  },
+                  `pipe${i}`
+                )),
+                rivets.map((rv, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: rv.cx,
+                    cy: rv.cy,
+                    r: 1.5,
+                    fill: brassColor,
+                    opacity: 0.7
+                  },
+                  `rv${i}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%", zIndex: 2 },
+              "aria-hidden": true,
+              children: [
+                gears.map((g, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: makeGear(g.cx, g.cy, g.r, g.teeth), fill: brassColor, opacity: 0.78, children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                    "animateTransform",
+                    {
+                      attributeName: "transform",
+                      type: "rotate",
+                      from: `0 ${g.cx} ${g.cy}`,
+                      to: `${g.dir * 360} ${g.cx} ${g.cy}`,
+                      dur: `${duration * g.dm}s`,
+                      repeatCount: "indefinite"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.3, fill: pipeColor, opacity: 0.85 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.12, fill: brassColor, opacity: 0.6 })
+                ] }, `gear${i}`)),
+                animate && steamPuffs.map((sp, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "circle",
+                  {
+                    cx: sp.cx,
+                    cy: sp.cy,
+                    r: sp.r,
+                    fill: steamColor,
+                    opacity: 0,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: "0;0.45;0",
+                          dur: "2.4s",
+                          begin: `${i * 0.7}s`,
+                          repeatCount: "indefinite"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "cy",
+                          values: `${sp.cy};${sp.cy - 12}`,
+                          dur: "2.4s",
+                          begin: `${i * 0.7}s`,
+                          repeatCount: "indefinite"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "r",
+                          values: `${sp.r};${sp.r * 2.2}`,
+                          dur: "2.4s",
+                          begin: `${i * 0.7}s`,
+                          repeatCount: "indefinite"
+                        }
+                      )
+                    ]
+                  },
+                  `stm${i}`
+                ))
+              ]
+            }
+          )
+        ] }),
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+      );
+    }
+  ),
+  { displayName: "NtdIconSteampunk" }
+);
 const NtdIconFrost = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ children, animate = true, duration = 2, intensity = 'normal', crystalColor = '#bae6fd', glowColor = '#38bdf8', className, style, }, ref) => {
-    const uid = React.useId().replace(/[^a-zA-Z0-9]/g, '_');
-    const glowFilterId = `ntd_frost_${uid}`;
-    const crystalDefs = [
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      children,
+      animate = true,
+      duration: durationProp,
+      animationSpeed: animationSpeed$1,
+      intensity = "normal",
+      crystalColor = "#bae6fd",
+      glowColor = "#38bdf8",
+      className,
+      style
+    }, ref) => {
+      const duration = durationProp ?? 2;
+      const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
+      const glowFilterId = `ntd_frost_${uid}`;
+      const crystalDefs = [
         { cx: 8, cy: 8, len: 7, pi: 0 },
         { cx: 92, cy: 8, len: 6, pi: 1 },
         { cx: 8, cy: 92, len: 6, pi: 2 },
         { cx: 92, cy: 92, len: 7, pi: 3 },
-        ...(intensity !== 'subtle'
-            ? [
-                { cx: 50, cy: 2, len: 5, pi: 4 },
-                { cx: 50, cy: 98, len: 5, pi: 5 },
-                { cx: 2, cy: 50, len: 5, pi: 6 },
-                { cx: 98, cy: 50, len: 5, pi: 7 },
-            ]
-            : []),
-        ...(intensity === 'dense'
-            ? [
-                { cx: 28, cy: 4, len: 4, pi: 8 },
-                { cx: 72, cy: 4, len: 4, pi: 9 },
-            ]
-            : []),
-    ];
-    // Each snowflake = 6 arms radiating from center
-    const allArms = crystalDefs.flatMap(({ cx, cy, len, pi }) => Array.from({ length: 6 }, (_, ai) => {
-        const angle = (ai * 60 * Math.PI) / 180;
-        return {
+        ...intensity !== "subtle" ? [
+          { cx: 50, cy: 2, len: 5, pi: 4 },
+          { cx: 50, cy: 98, len: 5, pi: 5 },
+          { cx: 2, cy: 50, len: 5, pi: 6 },
+          { cx: 98, cy: 50, len: 5, pi: 7 }
+        ] : [],
+        ...intensity === "dense" ? [
+          { cx: 28, cy: 4, len: 4, pi: 8 },
+          { cx: 72, cy: 4, len: 4, pi: 9 }
+        ] : []
+      ];
+      const allArms = crystalDefs.flatMap(
+        ({ cx, cy, len, pi }) => Array.from({ length: 6 }, (_, ai) => {
+          const angle = ai * 60 * Math.PI / 180;
+          return {
             x1: cx,
             y1: cy,
             x2: cx + len * Math.cos(angle),
             y2: cy + len * Math.sin(angle),
-            delay: pi * 0.12 + ai * 0.02,
-        };
-    }));
-    // Small perpendicular tick marks at midpoint of each arm
-    const allTicks = crystalDefs.flatMap(({ cx, cy, len }, ci) => Array.from({ length: 6 }, (_, ai) => {
-        const angle = (ai * 60 * Math.PI) / 180;
-        const mx = cx + len * 0.55 * Math.cos(angle);
-        const my = cy + len * 0.55 * Math.sin(angle);
-        const p = angle + Math.PI / 2;
-        const tl = len * 0.22;
-        return {
+            delay: pi * 0.12 + ai * 0.02
+          };
+        })
+      );
+      const allTicks = crystalDefs.flatMap(
+        ({ cx, cy, len }, ci) => Array.from({ length: 6 }, (_, ai) => {
+          const angle = ai * 60 * Math.PI / 180;
+          const mx = cx + len * 0.55 * Math.cos(angle);
+          const my = cy + len * 0.55 * Math.sin(angle);
+          const p = angle + Math.PI / 2;
+          const tl = len * 0.22;
+          return {
             x1: mx - tl * Math.cos(p),
             y1: my - tl * Math.sin(p),
             x2: mx + tl * Math.cos(p),
             y2: my + tl * Math.sin(p),
-            delay: ci * 0.12 + duration * 0.5,
-        };
-    }));
-    const sparkles = [
+            delay: ci * 0.12 + duration * 0.5
+          };
+        })
+      );
+      const sparkles = [
         { cx: 14, cy: 4, r: 1.1 },
         { cx: 86, cy: 4, r: 0.9 },
         { cx: 4, cy: 14, r: 0.8 },
-        { cx: 96, cy: 14, r: 1.0 },
+        { cx: 96, cy: 14, r: 1 },
         { cx: 4, cy: 86, r: 0.9 },
         { cx: 96, cy: 86, r: 0.8 },
-        { cx: 14, cy: 96, r: 1.0 },
-        { cx: 86, cy: 96, r: 1.1 },
-    ];
-    return (jsxRuntime.jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsxRuntime.jsx("svg", { style: { position: 'absolute', width: 0, height: 0 }, "aria-hidden": true, children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("filter", { id: glowFilterId, children: jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "6" }) }) }) }), jsxRuntime.jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-25%', width: '150%', height: '150%', zIndex: 0 }, "aria-hidden": true, children: [jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "30", fill: glowColor, opacity: 0.07, filter: `url(#${glowFilterId})`, children: animate && (jsxRuntime.jsx("animate", { attributeName: "opacity", values: "0.04;0.11;0.04", dur: "4s", repeatCount: "indefinite" })) }), allArms.map((arm, i) => (jsxRuntime.jsx("line", { x1: arm.x1, y1: arm.y1, x2: arm.x2, y2: arm.y2, stroke: crystalColor, strokeWidth: "0.9", strokeLinecap: "round", opacity: animate ? 0 : 0.7, children: animate && (jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.7", dur: `${duration * 0.4}s`, begin: `${arm.delay.toFixed(2)}s`, fill: "freeze" })) }, `arm${i}`))), allTicks.map((tick, i) => (jsxRuntime.jsx("line", { x1: tick.x1, y1: tick.y1, x2: tick.x2, y2: tick.y2, stroke: crystalColor, strokeWidth: "0.6", strokeLinecap: "round", opacity: animate ? 0 : 0.45, children: animate && (jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.45", dur: `${duration * 0.3}s`, begin: `${tick.delay.toFixed(2)}s`, fill: "freeze" })) }, `tick${i}`))), sparkles.slice(0, intensity === 'subtle' ? 4 : 8).map((sp, i) => (jsxRuntime.jsx("circle", { cx: sp.cx, cy: sp.cy, r: sp.r, fill: glowColor, opacity: animate ? 0 : 0.8, children: animate && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.8", dur: "0.35s", begin: `${(duration * 0.65 + i * 0.08).toFixed(2)}s`, fill: "freeze" }), jsxRuntime.jsx("animate", { attributeName: "opacity", values: "0.3;1;0.3", dur: `${1 + i * 0.2}s`, repeatCount: "indefinite", begin: `${duration}s` })] })) }, `fsp${i}`)))] }), jsxRuntime.jsx("span", { style: { display: 'inline-flex', position: 'relative', zIndex: 1 }, children: children })] }));
-}), { displayName: 'NtdIconFrost' });
-// ══════════════════════════════════════════════════════
-//  9. NtdIconPixel 👾
-//  Retro pixel corners, scanline scroll & glitch animation
-// ══════════════════════════════════════════════════════
+        { cx: 14, cy: 96, r: 1 },
+        { cx: 86, cy: 96, r: 1.1 }
+      ];
+      return animationSpeed.retimeTree(
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("filter", { id: glowFilterId, children: /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "6" }) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: "50",
+                    cy: "50",
+                    r: "30",
+                    fill: glowColor,
+                    opacity: 0.07,
+                    filter: `url(#${glowFilterId})`,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                      "animate",
+                      {
+                        attributeName: "opacity",
+                        values: "0.04;0.11;0.04",
+                        dur: "4s",
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  }
+                ),
+                allArms.map((arm, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "line",
+                  {
+                    x1: arm.x1,
+                    y1: arm.y1,
+                    x2: arm.x2,
+                    y2: arm.y2,
+                    stroke: crystalColor,
+                    strokeWidth: "0.9",
+                    strokeLinecap: "round",
+                    opacity: animate ? 0 : 0.7,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                      "animate",
+                      {
+                        attributeName: "opacity",
+                        from: "0",
+                        to: "0.7",
+                        dur: `${duration * 0.4}s`,
+                        begin: `${arm.delay.toFixed(2)}s`,
+                        fill: "freeze"
+                      }
+                    )
+                  },
+                  `arm${i}`
+                )),
+                allTicks.map((tick, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "line",
+                  {
+                    x1: tick.x1,
+                    y1: tick.y1,
+                    x2: tick.x2,
+                    y2: tick.y2,
+                    stroke: crystalColor,
+                    strokeWidth: "0.6",
+                    strokeLinecap: "round",
+                    opacity: animate ? 0 : 0.45,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                      "animate",
+                      {
+                        attributeName: "opacity",
+                        from: "0",
+                        to: "0.45",
+                        dur: `${duration * 0.3}s`,
+                        begin: `${tick.delay.toFixed(2)}s`,
+                        fill: "freeze"
+                      }
+                    )
+                  },
+                  `tick${i}`
+                )),
+                sparkles.slice(0, intensity === "subtle" ? 4 : 8).map((sp, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: sp.cx,
+                    cy: sp.cy,
+                    r: sp.r,
+                    fill: glowColor,
+                    opacity: animate ? 0 : 0.8,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: "0.8",
+                          dur: "0.35s",
+                          begin: `${(duration * 0.65 + i * 0.08).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: "0.3;1;0.3",
+                          dur: `${1 + i * 0.2}s`,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      )
+                    ] })
+                  },
+                  `fsp${i}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
+        ] }),
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+      );
+    }
+  ),
+  { displayName: "NtdIconFrost" }
+);
 const NtdIconPixel = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ children, animate = true, duration = 0.5, intensity = 'normal', pixelColor = '#22d3ee', scanlineColor = '#000000', glitchEffect = true, className, style, }, ref) => {
-    const uid = React.useId().replace(/[^a-zA-Z0-9]/g, '_');
-    const scanAnimName = `ntd_pixel_scan_${uid}`;
-    const glitchAnimName = `ntd_pixel_glitch_${uid}`;
-    const SZ = 4; // pixel block size (SVG units out of 100)
-    const basePixels = [
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      children,
+      animate = true,
+      duration: durationProp,
+      animationSpeed: animationSpeed$1,
+      intensity = "normal",
+      pixelColor = "#22d3ee",
+      scanlineColor = "#000000",
+      glitchEffect = true,
+      className,
+      style
+    }, ref) => {
+      const duration = durationProp ?? 0.5;
+      const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
+      const scanAnimName = `ntd_pixel_scan_${uid}`;
+      const glitchAnimName = `ntd_pixel_glitch_${uid}`;
+      const SZ = 4;
+      const basePixels = [
         // top-left bracket
         { x: 0, y: 0 },
         { x: SZ, y: 0 },
@@ -491,148 +1381,419 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
         { x: 100 - SZ * 2, y: 100 - SZ },
         { x: 100 - SZ, y: 100 - SZ },
         { x: 100 - SZ, y: 100 - SZ * 2 },
-        { x: 100 - SZ, y: 100 - SZ * 3 },
-    ];
-    const extraPixels = intensity === 'dense'
-        ? [
-            { x: 48, y: 0 },
-            { x: 0, y: 48 },
-            { x: 96, y: 48 },
-            { x: 48, y: 96 },
-        ]
-        : [];
-    const allPixels = intensity === 'subtle'
-        ? basePixels.filter((_, i) => i % 2 === 0)
-        : [...basePixels, ...extraPixels];
-    return (jsxRuntime.jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [animate && (jsxRuntime.jsx("style", { children: `
-            @keyframes ${scanAnimName} {
-              from { transform: translateY(-100%); }
-              to   { transform: translateY(200%);  }
-            }
-            @keyframes ${glitchAnimName} {
-              0%, 90%, 100% { transform: translate(0); filter: none; }
-              92%  { transform: translate(-3px, 1px); filter: hue-rotate(90deg); }
-              94%  { transform: translate(3px, -1px); clip-path: inset(25% 0 25% 0); }
-              96%  { transform: translate(-1px, 2px); clip-path: none; }
-            }
-          ` })), jsxRuntime.jsx("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-5%', width: '110%', height: '110%', zIndex: 2 }, "aria-hidden": true, children: allPixels.map((p, i) => (jsxRuntime.jsx("rect", { x: p.x, y: p.y, width: SZ - 0.5, height: SZ - 0.5, fill: pixelColor, opacity: 0.75, children: animate && (jsxRuntime.jsx("animate", { attributeName: "opacity", values: "0.3;1;0.3", dur: `${0.7 + (i % 5) * 0.17}s`, repeatCount: "indefinite", begin: `${((i * 0.06) % 1).toFixed(2)}s` })) }, `px${i}`))) }), jsxRuntime.jsx("span", { style: {
-                    display: 'inline-flex',
-                    position: 'relative',
-                    zIndex: 1,
-                    ...(animate && glitchEffect ? { animation: `${glitchAnimName} 4s infinite` } : {}),
-                }, children: children }), animate && (jsxRuntime.jsx("span", { style: {
-                    position: 'absolute',
-                    inset: 0,
-                    overflow: 'hidden',
-                    pointerEvents: 'none',
-                    zIndex: 3,
-                    background: `repeating-linear-gradient(0deg, transparent, transparent 3px, ${scanlineColor}1a 3px, ${scanlineColor}1a 4px)`,
-                }, children: jsxRuntime.jsx("span", { style: {
-                        display: 'block',
-                        width: '100%',
-                        height: '30%',
-                        background: `linear-gradient(transparent, ${pixelColor}20, transparent)`,
-                        animation: `${scanAnimName} ${duration + 2}s linear infinite`,
-                    } }) }))] }));
-}), { displayName: 'NtdIconPixel' });
-// ══════════════════════════════════════════════════════
-//  10. NtdIconOrganic 🦠
-//  Pulsing cell blobs, membrane rings & floating bubbles
-// ══════════════════════════════════════════════════════
+        { x: 100 - SZ, y: 100 - SZ * 3 }
+      ];
+      const extraPixels = intensity === "dense" ? [
+        { x: 48, y: 0 },
+        { x: 0, y: 48 },
+        { x: 96, y: 48 },
+        { x: 48, y: 96 }
+      ] : [];
+      const allPixels = intensity === "subtle" ? basePixels.filter((_, i) => i % 2 === 0) : [...basePixels, ...extraPixels];
+      return animationSpeed.retimeTree(
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          animate && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+            @keyframes ${scanAnimName} {
+              from { transform: translateY(-100%); }
+              to   { transform: translateY(200%);  }
+            }
+            @keyframes ${glitchAnimName} {
+              0%, 90%, 100% { transform: translate(0); filter: none; }
+              92%  { transform: translate(-3px, 1px); filter: hue-rotate(90deg); }
+              94%  { transform: translate(3px, -1px); clip-path: inset(25% 0 25% 0); }
+              96%  { transform: translate(-1px, 2px); clip-path: none; }
+            }
+          ` }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-5%", width: "110%", height: "110%", zIndex: 2 },
+              "aria-hidden": true,
+              children: allPixels.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: p.x,
+                  y: p.y,
+                  width: SZ - 0.5,
+                  height: SZ - 0.5,
+                  fill: pixelColor,
+                  opacity: 0.75,
+                  children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      values: "0.3;1;0.3",
+                      dur: `${0.7 + i % 5 * 0.17}s`,
+                      repeatCount: "indefinite",
+                      begin: `${(i * 0.06 % 1).toFixed(2)}s`
+                    }
+                  )
+                },
+                `px${i}`
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                position: "relative",
+                zIndex: 1,
+                ...animate && glitchEffect ? { animation: `${glitchAnimName} 4s infinite` } : {}
+              },
+              children
+            }
+          ),
+          animate && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                overflow: "hidden",
+                pointerEvents: "none",
+                zIndex: 3,
+                background: `repeating-linear-gradient(0deg, transparent, transparent 3px, ${scanlineColor}1a 3px, ${scanlineColor}1a 4px)`
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    display: "block",
+                    width: "100%",
+                    height: "30%",
+                    background: `linear-gradient(transparent, ${pixelColor}20, transparent)`,
+                    animation: `${scanAnimName} ${duration + 2}s linear infinite`
+                  }
+                }
+              )
+            }
+          )
+        ] }),
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+      );
+    }
+  ),
+  { displayName: "NtdIconPixel" }
+);
 const NtdIconOrganic = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ children, animate = true, duration = 3, intensity = 'normal', cellColor = '#86efac', membraneColor = '#4ade80', nucleusColor = '#fbbf24', className, style, }, ref) => {
-    const uid = React.useId().replace(/[^a-zA-Z0-9]/g, '_');
-    const blobFilterId = `ntd_org_${uid}`;
-    const cells = [
-        { cx: 8, cy: 8, r: 9, color: cellColor, op: 0.18, pd: '4.2s' },
-        { cx: 92, cy: 8, r: 8, color: membraneColor, op: 0.15, pd: '3.8s' },
-        { cx: 8, cy: 92, r: 8, color: membraneColor, op: 0.16, pd: '4.5s' },
-        { cx: 92, cy: 92, r: 9, color: cellColor, op: 0.18, pd: '3.5s' },
-        ...(intensity !== 'subtle'
-            ? [
-                { cx: 50, cy: 2, r: 6, color: cellColor, op: 0.12, pd: '5.1s' },
-                { cx: 50, cy: 98, r: 6, color: membraneColor, op: 0.12, pd: '4.8s' },
-                { cx: 2, cy: 50, r: 6, color: cellColor, op: 0.12, pd: '4.3s' },
-                { cx: 98, cy: 50, r: 6, color: membraneColor, op: 0.12, pd: '5.2s' },
-            ]
-            : []),
-        ...(intensity === 'dense'
-            ? [
-                { cx: 25, cy: 5, r: 5, color: nucleusColor, op: 0.09, pd: '3.9s' },
-                { cx: 75, cy: 5, r: 5, color: cellColor, op: 0.09, pd: '4.4s' },
-                { cx: 5, cy: 25, r: 5, color: membraneColor, op: 0.09, pd: '4.6s' },
-                { cx: 5, cy: 75, r: 5, color: cellColor, op: 0.09, pd: '3.7s' },
-            ]
-            : []),
-    ];
-    const bubbles = [
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      children,
+      animate = true,
+      duration: durationProp,
+      animationSpeed: animationSpeed$1,
+      intensity = "normal",
+      cellColor = "#86efac",
+      membraneColor = "#4ade80",
+      nucleusColor = "#fbbf24",
+      className,
+      style
+    }, ref) => {
+      const duration = durationProp ?? 3;
+      const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "_");
+      const blobFilterId = `ntd_org_${uid}`;
+      const cells = [
+        { cx: 8, cy: 8, r: 9, color: cellColor, op: 0.18, pd: "4.2s" },
+        { cx: 92, cy: 8, r: 8, color: membraneColor, op: 0.15, pd: "3.8s" },
+        { cx: 8, cy: 92, r: 8, color: membraneColor, op: 0.16, pd: "4.5s" },
+        { cx: 92, cy: 92, r: 9, color: cellColor, op: 0.18, pd: "3.5s" },
+        ...intensity !== "subtle" ? [
+          { cx: 50, cy: 2, r: 6, color: cellColor, op: 0.12, pd: "5.1s" },
+          { cx: 50, cy: 98, r: 6, color: membraneColor, op: 0.12, pd: "4.8s" },
+          { cx: 2, cy: 50, r: 6, color: cellColor, op: 0.12, pd: "4.3s" },
+          { cx: 98, cy: 50, r: 6, color: membraneColor, op: 0.12, pd: "5.2s" }
+        ] : [],
+        ...intensity === "dense" ? [
+          { cx: 25, cy: 5, r: 5, color: nucleusColor, op: 0.09, pd: "3.9s" },
+          { cx: 75, cy: 5, r: 5, color: cellColor, op: 0.09, pd: "4.4s" },
+          { cx: 5, cy: 25, r: 5, color: membraneColor, op: 0.09, pd: "4.6s" },
+          { cx: 5, cy: 75, r: 5, color: cellColor, op: 0.09, pd: "3.7s" }
+        ] : []
+      ];
+      const bubbles = [
         { cx: 15, cy: 18, r: 2 },
         { cx: 85, cy: 18, r: 1.8 },
         { cx: 12, cy: 78, r: 1.5 },
         { cx: 88, cy: 82, r: 2 },
         { cx: 40, cy: 5, r: 1.5 },
-        { cx: 60, cy: 95, r: 1.5 },
-    ];
-    const bubbleCount = intensity === 'subtle' ? 2 : intensity === 'dense' ? 6 : 4;
-    return (jsxRuntime.jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsxRuntime.jsx("svg", { style: { position: 'absolute', width: 0, height: 0 }, "aria-hidden": true, children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("filter", { id: blobFilterId, children: jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }), jsxRuntime.jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-25%', width: '150%', height: '150%', zIndex: 0 }, "aria-hidden": true, children: [cells.map((c, i) => (jsxRuntime.jsx("circle", { cx: c.cx, cy: c.cy, r: c.r, fill: c.color, opacity: animate ? 0 : c.op, filter: `url(#${blobFilterId})`, children: animate && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: `${c.op}`, dur: `${duration * 0.55}s`, begin: `${(i * 0.2).toFixed(2)}s`, fill: "freeze" }), jsxRuntime.jsx("animate", { attributeName: "r", values: `${c.r};${c.r * 1.3};${c.r}`, dur: c.pd, repeatCount: "indefinite", begin: `${duration}s` }), jsxRuntime.jsx("animate", { attributeName: "opacity", values: `${c.op};${c.op * 1.7};${c.op}`, dur: c.pd, repeatCount: "indefinite", begin: `${duration}s` })] })) }, `oc${i}`))), intensity !== 'subtle' &&
-                        [
-                            { cx: 8, cy: 8, r: 10 },
-                            { cx: 92, cy: 92, r: 10 },
-                        ].map((ring, i) => (jsxRuntime.jsx("circle", { cx: ring.cx, cy: ring.cy, r: ring.r, fill: "none", stroke: membraneColor, strokeWidth: "0.7", opacity: animate ? 0 : 0.35, children: animate && (jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.35", dur: `${duration * 0.7}s`, fill: "freeze" })) }, `ring${i}`))), bubbles.slice(0, bubbleCount).map((b, i) => (jsxRuntime.jsx("circle", { cx: b.cx, cy: b.cy, r: b.r, fill: nucleusColor, opacity: animate ? 0 : 0.28, children: animate && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.28", dur: "0.5s", begin: `${(duration * 0.65 + i * 0.18).toFixed(2)}s`, fill: "freeze" }), jsxRuntime.jsx("animate", { attributeName: "cy", values: `${b.cy};${b.cy - 5};${b.cy}`, dur: `${2.2 + i * 0.45}s`, repeatCount: "indefinite", begin: `${duration}s` })] })) }, `ob${i}`)))] }), jsxRuntime.jsx("span", { style: { display: 'inline-flex', position: 'relative', zIndex: 1 }, children: children })] }));
-}), { displayName: 'NtdIconOrganic' });
-// ══════════════════════════════════════════════════════
-//  11. NtdIconGeometric 🔷
-//  Sacred geometry: concentric rings, Star of David
-//  triangles & slowly rotating corner diamonds
-// ══════════════════════════════════════════════════════
+        { cx: 60, cy: 95, r: 1.5 }
+      ];
+      const bubbleCount = intensity === "subtle" ? 2 : intensity === "dense" ? 6 : 4;
+      return animationSpeed.retimeTree(
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("filter", { id: blobFilterId, children: /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                cells.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: c.cx,
+                    cy: c.cy,
+                    r: c.r,
+                    fill: c.color,
+                    opacity: animate ? 0 : c.op,
+                    filter: `url(#${blobFilterId})`,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: `${c.op}`,
+                          dur: `${duration * 0.55}s`,
+                          begin: `${(i * 0.2).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "r",
+                          values: `${c.r};${c.r * 1.3};${c.r}`,
+                          dur: c.pd,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          values: `${c.op};${c.op * 1.7};${c.op}`,
+                          dur: c.pd,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      )
+                    ] })
+                  },
+                  `oc${i}`
+                )),
+                intensity !== "subtle" && [
+                  { cx: 8, cy: 8, r: 10 },
+                  { cx: 92, cy: 92, r: 10 }
+                ].map((ring, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: ring.cx,
+                    cy: ring.cy,
+                    r: ring.r,
+                    fill: "none",
+                    stroke: membraneColor,
+                    strokeWidth: "0.7",
+                    opacity: animate ? 0 : 0.35,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                      "animate",
+                      {
+                        attributeName: "opacity",
+                        from: "0",
+                        to: "0.35",
+                        dur: `${duration * 0.7}s`,
+                        fill: "freeze"
+                      }
+                    )
+                  },
+                  `ring${i}`
+                )),
+                bubbles.slice(0, bubbleCount).map((b, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: b.cx,
+                    cy: b.cy,
+                    r: b.r,
+                    fill: nucleusColor,
+                    opacity: animate ? 0 : 0.28,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: "0.28",
+                          dur: "0.5s",
+                          begin: `${(duration * 0.65 + i * 0.18).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "cy",
+                          values: `${b.cy};${b.cy - 5};${b.cy}`,
+                          dur: `${2.2 + i * 0.45}s`,
+                          repeatCount: "indefinite",
+                          begin: `${duration}s`
+                        }
+                      )
+                    ] })
+                  },
+                  `ob${i}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
+        ] }),
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+      );
+    }
+  ),
+  { displayName: "NtdIconOrganic" }
+);
 const NtdIconGeometric = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ children, animate = true, duration = 8, intensity = 'normal', primaryColor = '#6366f1', secondaryColor = '#8b5cf6', accentColor = '#a78bfa', className, style, }, ref) => {
-    const makeTriangle = (cx, cy, r, rotDeg) => Array.from({ length: 3 }, (_, i) => {
-        const a = ((i * 120 - 90 + rotDeg) * Math.PI) / 180;
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      children,
+      animate = true,
+      duration: durationProp,
+      animationSpeed: animationSpeed$1,
+      intensity = "normal",
+      primaryColor = "#6366f1",
+      secondaryColor = "#8b5cf6",
+      accentColor = "#a78bfa",
+      className,
+      style
+    }, ref) => {
+      const duration = durationProp ?? 8;
+      const makeTriangle = (cx, cy, r, rotDeg) => Array.from({ length: 3 }, (_, i) => {
+        const a = (i * 120 - 90 + rotDeg) * Math.PI / 180;
         return `${(cx + r * Math.cos(a)).toFixed(2)},${(cy + r * Math.sin(a)).toFixed(2)}`;
-    }).join(' ');
-    const rings = [
-        { r: 45, dash: '4 6', color: primaryColor, dir: 1, dur: duration, op: 0.22 },
-        { r: 38, dash: '2 4', color: secondaryColor, dir: -1, dur: duration * 0.75, op: 0.18 },
-        ...(intensity !== 'subtle'
-            ? [{ r: 41, dash: '1 9', color: accentColor, dir: 1, dur: duration * 1.4, op: 0.12 }]
-            : []),
-        ...(intensity === 'dense'
-            ? [{ r: 48, dash: '0.5 4', color: primaryColor, dir: -1, dur: duration * 1.8, op: 0.08 }]
-            : []),
-    ];
-    const triangles = [
+      }).join(" ");
+      const rings = [
+        { r: 45, dash: "4 6", color: primaryColor, dir: 1, dur: duration, op: 0.22 },
+        { r: 38, dash: "2 4", color: secondaryColor, dir: -1, dur: duration * 0.75, op: 0.18 },
+        ...intensity !== "subtle" ? [{ r: 41, dash: "1 9", color: accentColor, dir: 1, dur: duration * 1.4, op: 0.12 }] : [],
+        ...intensity === "dense" ? [{ r: 48, dash: "0.5 4", color: primaryColor, dir: -1, dur: duration * 1.8, op: 0.08 }] : []
+      ];
+      const triangles = [
         { r: 34, rot: 0, color: primaryColor, op: 0.14, dur: duration * 2, dir: 1 },
         { r: 34, rot: 60, color: accentColor, op: 0.1, dur: duration * 1.6, dir: -1 },
-        ...(intensity !== 'subtle'
-            ? [{ r: 24, rot: 15, color: secondaryColor, op: 0.12, dur: duration * 1.9, dir: 1 }]
-            : []),
-        ...(intensity === 'dense'
-            ? [{ r: 44, rot: 30, color: accentColor, op: 0.07, dur: duration * 2.2, dir: -1 }]
-            : []),
-    ];
-    const diamonds = [
+        ...intensity !== "subtle" ? [{ r: 24, rot: 15, color: secondaryColor, op: 0.12, dur: duration * 1.9, dir: 1 }] : [],
+        ...intensity === "dense" ? [{ r: 44, rot: 30, color: accentColor, op: 0.07, dur: duration * 2.2, dir: -1 }] : []
+      ];
+      const diamonds = [
         { cx: 8, cy: 8 },
         { cx: 92, cy: 8 },
         { cx: 8, cy: 92 },
         { cx: 92, cy: 92 },
-        ...(intensity !== 'subtle'
-            ? [
-                { cx: 50, cy: 2 },
-                { cx: 50, cy: 98 },
-            ]
-            : []),
-        ...(intensity === 'dense'
-            ? [
-                { cx: 2, cy: 50 },
-                { cx: 98, cy: 50 },
-            ]
-            : []),
-    ];
-    const diamondPath = (cx, cy, s = 3) => `M${cx},${cy - s} L${cx + s},${cy} L${cx},${cy + s} L${cx - s},${cy}Z`;
-    return (jsxRuntime.jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsxRuntime.jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-30%', width: '160%', height: '160%', zIndex: 0 }, "aria-hidden": true, children: [rings.map((ring, i) => (jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: ring.r, fill: "none", stroke: ring.color, strokeWidth: "0.6", strokeDasharray: ring.dash, opacity: ring.op, children: animate && (jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 50 50", to: `${ring.dir * 360} 50 50`, dur: `${ring.dur}s`, repeatCount: "indefinite" })) }, `rng${i}`))), triangles.map((t, i) => (jsxRuntime.jsx("polygon", { points: makeTriangle(50, 50, t.r, t.rot), fill: "none", stroke: t.color, strokeWidth: "0.5", opacity: t.op, children: animate && (jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 50 50", to: `${t.dir * 360} 50 50`, dur: `${t.dur}s`, repeatCount: "indefinite" })) }, `tri${i}`))), diamonds.map((d, i) => (jsxRuntime.jsx("path", { d: diamondPath(d.cx, d.cy), fill: accentColor, opacity: animate ? 0 : 0.5, children: animate && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("animate", { attributeName: "opacity", from: "0", to: "0.5", dur: `${duration * 0.25}s`, begin: `${(i * 0.09).toFixed(2)}s`, fill: "freeze" }), jsxRuntime.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${d.cx} ${d.cy}`, to: `360 ${d.cx} ${d.cy}`, dur: `${3 + i * 0.6}s`, repeatCount: "indefinite" })] })) }, `dm${i}`)))] }), jsxRuntime.jsx("span", { style: { display: 'inline-flex', position: 'relative', zIndex: 1 }, children: children })] }));
-}), { displayName: 'NtdIconGeometric' });
-
+        ...intensity !== "subtle" ? [
+          { cx: 50, cy: 2 },
+          { cx: 50, cy: 98 }
+        ] : [],
+        ...intensity === "dense" ? [
+          { cx: 2, cy: 50 },
+          { cx: 98, cy: 50 }
+        ] : []
+      ];
+      const diamondPath = (cx, cy, s = 3) => `M${cx},${cy - s} L${cx + s},${cy} L${cx},${cy + s} L${cx - s},${cy}Z`;
+      return animationSpeed.retimeTree(
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 100 100",
+              style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                rings.map((ring, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: "50",
+                    cy: "50",
+                    r: ring.r,
+                    fill: "none",
+                    stroke: ring.color,
+                    strokeWidth: "0.6",
+                    strokeDasharray: ring.dash,
+                    opacity: ring.op,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                      "animateTransform",
+                      {
+                        attributeName: "transform",
+                        type: "rotate",
+                        from: "0 50 50",
+                        to: `${ring.dir * 360} 50 50`,
+                        dur: `${ring.dur}s`,
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  },
+                  `rng${i}`
+                )),
+                triangles.map((t, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "polygon",
+                  {
+                    points: makeTriangle(50, 50, t.r, t.rot),
+                    fill: "none",
+                    stroke: t.color,
+                    strokeWidth: "0.5",
+                    opacity: t.op,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsx(
+                      "animateTransform",
+                      {
+                        attributeName: "transform",
+                        type: "rotate",
+                        from: "0 50 50",
+                        to: `${t.dir * 360} 50 50`,
+                        dur: `${t.dur}s`,
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  },
+                  `tri${i}`
+                )),
+                diamonds.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: diamondPath(d.cx, d.cy),
+                    fill: accentColor,
+                    opacity: animate ? 0 : 0.5,
+                    children: animate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animate",
+                        {
+                          attributeName: "opacity",
+                          from: "0",
+                          to: "0.5",
+                          dur: `${duration * 0.25}s`,
+                          begin: `${(i * 0.09).toFixed(2)}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "animateTransform",
+                        {
+                          attributeName: "transform",
+                          type: "rotate",
+                          from: `0 ${d.cx} ${d.cy}`,
+                          to: `360 ${d.cx} ${d.cy}`,
+                          dur: `${3 + i * 0.6}s`,
+                          repeatCount: "indefinite"
+                        }
+                      )
+                    ] })
+                  },
+                  `dm${i}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
+        ] }),
+        animationSpeed.durationScale(durationProp !== void 0, animationSpeed$1)
+      );
+    }
+  ),
+  { displayName: "NtdIconGeometric" }
+);
 exports.NtdIconCosmic = NtdIconCosmic;
 exports.NtdIconFestive = NtdIconFestive;
 exports.NtdIconFloral = NtdIconFloral;