@nice2dev/icons 1.3.15 → 1.3.17

package/dist/esm/createIcon.js

@@ -1,273 +1,397 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useSyncExternalStore } from 'react';
-import { sharpenTree, roundTree, wireTree, MINI_SCALE } from './sharpen.js';
-import { generateSmilAnimation } from './smilAnimations.js';
-import { BOX_PERFECT_STACK, renderStackChildren, NTD_ICON_MARK, PERFECT_STACK } from './stacking.js';
-import { SEMANTIC_COLOR_VARS, SEMANTIC_COLOR_DEFAULTS, SIZE_MAP, GRADIENT_PRESETS } from './types.js';
-
-/* ── Dark mode detection hook ───────────────────────── */
-// No `matchMedia` (jsdom without a polyfill, some embedded webviews): light, and nothing to
-// subscribe to — an icon must not throw where a page renders.
-const hasMatchMedia = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useId, useSyncExternalStore } from "react";
+import { durationScale, retimeTree, animationScale } from "./animationSpeed.js";
+import { sharpenTree, roundTree, wireTree, MINI_SCALE } from "./sharpen.js";
+import { generateSmilAnimation } from "./smilAnimations.js";
+import { BOX_PERFECT_STACK, renderStackChildren, NTD_ICON_MARK, PERFECT_STACK } from "./stacking.js";
+import { SIZE_MAP, SEMANTIC_COLOR_VARS, SEMANTIC_COLOR_DEFAULTS, GRADIENT_PRESETS } from "./types.js";
+const hasMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
 function getColorScheme() {
-    if (!hasMatchMedia()) {
-        return 'light';
-    }
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  if (!hasMatchMedia()) {
+    return "light";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 function subscribeColorScheme(callback) {
-    if (!hasMatchMedia()) {
-        return () => { };
-    }
-    const mq = window.matchMedia('(prefers-color-scheme: dark)');
-    mq.addEventListener('change', callback);
-    return () => mq.removeEventListener('change', callback);
+  if (!hasMatchMedia()) {
+    return () => {
+    };
+  }
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  mq.addEventListener("change", callback);
+  return () => mq.removeEventListener("change", callback);
 }
 function useColorScheme() {
-    return useSyncExternalStore(subscribeColorScheme, getColorScheme, () => 'light');
+  return useSyncExternalStore(subscribeColorScheme, getColorScheme, () => "light");
 }
 const BOX_CENTER = [12, 12];
-/**
- * Factory function that creates a React icon component from SVG path renderers.
- *
- * Returns a `React.forwardRef` component that accepts {@link NtdIconProps} and
- * renders an accessible `<svg>` element with the correct variant, colors,
- * size, animation class, and ARIA attributes.
- *
- * @param options - Icon configuration (display name, viewBox, variant renderers).
- * @returns A `ForwardRefExoticComponent` ready for use as `<NtdMyIcon />`.
- *
- * @example
- * ```tsx
- * import { createIcon } from '@nicetodev/icons';
- *
- * export const NtdStar = createIcon({
- *   displayName: 'NtdStar',
- *   paths: {
- *     solid:   ({ primaryColor }) => <path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z" fill={primaryColor} />,
- *     outline: ({ primaryColor, strokeWidth }) => <path d="..." stroke={primaryColor} strokeWidth={strokeWidth} fill="none" />,
- *     duotone: ({ primaryColor, secondaryColor, secondaryOpacity }) => (
- *       <>
- *         <path d="..." fill={secondaryColor} opacity={secondaryOpacity} />
- *         <path d="..." stroke={primaryColor} fill="none" />
- *       </>
- *     ),
- *   },
- * });
- * ```
- */
-/* ── Gradient helper ───────────────────────────────── */
-function renderGradientDef(id, preset, type, angle, animation) {
-    const stops = GRADIENT_PRESETS[preset];
-    if (!stops) {
-        return null;
-    }
-    const stopEls = stops.map((color, i) => {
-        const offset = `${Math.round((i / (stops.length - 1)) * 100)}%`;
-        const nextColor = stops[(i + 1) % stops.length];
-        if (animation === 'pulse') {
-            return (jsx("stop", { offset: offset, stopColor: color, children: jsx("animate", { attributeName: "stop-color", values: `${color};${nextColor};${color}`, dur: "3s", repeatCount: "indefinite" }) }, i));
+function renderGradientDef(id, preset, type, angle, animation, timeScale = 1) {
+  const stops = GRADIENT_PRESETS[preset];
+  if (!stops) {
+    return null;
+  }
+  const loop = `${Number((3 * timeScale).toFixed(4))}s`;
+  const stopEls = stops.map((color, i) => {
+    const offset = `${Math.round(i / (stops.length - 1) * 100)}%`;
+    const nextColor = stops[(i + 1) % stops.length];
+    if (animation === "pulse") {
+      return /* @__PURE__ */ jsx("stop", { offset, stopColor: color, children: /* @__PURE__ */ jsx(
+        "animate",
+        {
+          attributeName: "stop-color",
+          values: `${color};${nextColor};${color}`,
+          dur: loop,
+          repeatCount: "indefinite"
         }
-        return jsx("stop", { offset: offset, stopColor: color }, i);
-    });
-    if (type === 'radial') {
-        return (jsx("radialGradient", { id: id, cx: "50%", cy: "50%", r: "50%", children: stopEls }));
+      ) }, i);
     }
-    // Linear gradient: use gradientTransform for angle
-    const animateEls = [];
-    if (animation === 'spin') {
-        animateEls.push(jsx("animateTransform", { attributeName: "gradientTransform", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "3s", repeatCount: "indefinite" }, "spin"));
+    return /* @__PURE__ */ jsx("stop", { offset, stopColor: color }, i);
+  });
+  if (type === "radial") {
+    return /* @__PURE__ */ jsx("radialGradient", { id, cx: "50%", cy: "50%", r: "50%", children: stopEls });
+  }
+  const animateEls = [];
+  if (animation === "spin") {
+    animateEls.push(
+      /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "gradientTransform",
+          type: "rotate",
+          from: "0 12 12",
+          to: "360 12 12",
+          dur: loop,
+          repeatCount: "indefinite"
+        },
+        "spin"
+      )
+    );
+  }
+  if (animation === "shift") {
+    animateEls.push(
+      /* @__PURE__ */ jsx(
+        "animate",
+        {
+          attributeName: "x1",
+          values: "-24;24;-24",
+          dur: loop,
+          repeatCount: "indefinite"
+        },
+        "shift-x1"
+      ),
+      /* @__PURE__ */ jsx(
+        "animate",
+        {
+          attributeName: "x2",
+          values: "0;48;0",
+          dur: loop,
+          repeatCount: "indefinite"
+        },
+        "shift-x2"
+      )
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "linearGradient",
+    {
+      id,
+      x1: "0",
+      y1: "0",
+      x2: "24",
+      y2: "0",
+      gradientUnits: "userSpaceOnUse",
+      gradientTransform: animation === "spin" ? void 0 : `rotate(${angle}, 12, 12)`,
+      children: [
+        stopEls,
+        animateEls
+      ]
     }
-    if (animation === 'shift') {
-        animateEls.push(jsx("animate", { attributeName: "x1", values: "-24;24;-24", dur: "3s", repeatCount: "indefinite" }, "shift-x1"), jsx("animate", { attributeName: "x2", values: "0;48;0", dur: "3s", repeatCount: "indefinite" }, "shift-x2"));
-    }
-    return (jsxs("linearGradient", { id: id, x1: "0", y1: "0", x2: "24", y2: "0", gradientUnits: "userSpaceOnUse", gradientTransform: animation === 'spin' ? undefined : `rotate(${angle}, 12, 12)`, children: [stopEls, animateEls] }));
+  );
 }
-/* ── 3D filter helper ───────────────────────────────── */
 function render3dFilterDef(filterId) {
-    return (
+  return (
     // The region is the icon's box plus a margin for the shadow, not a share of the shape's
     // bounding box: a lone horizontal or vertical line (NtdMinus) has a zero-height box, and a
     // filter region of 140% of zero rendered nothing.
-    jsxs("filter", { id: filterId, filterUnits: "userSpaceOnUse", x: "-4", y: "-4", width: "32", height: "32", children: [jsx("feDropShadow", { dx: "0", dy: "1.5", stdDeviation: "1", floodOpacity: "0.35" }), jsxs("feComponentTransfer", { in: "SourceGraphic", result: "highlight", children: [jsx("feFuncR", { type: "linear", slope: "1.2", intercept: "0.1" }), jsx("feFuncG", { type: "linear", slope: "1.2", intercept: "0.1" }), jsx("feFuncB", { type: "linear", slope: "1.2", intercept: "0.1" })] }), jsx("feComposite", { operator: "in", in: "highlight", in2: "SourceGraphic", result: "highlightMask" }), jsx("feMerge", { children: jsx("feMergeNode", { in: "SourceGraphic" }) })] }));
+    /* @__PURE__ */ jsxs("filter", { id: filterId, filterUnits: "userSpaceOnUse", x: "-4", y: "-4", width: "32", height: "32", children: [
+      /* @__PURE__ */ jsx("feDropShadow", { dx: "0", dy: "1.5", stdDeviation: "1", floodOpacity: "0.35" }),
+      /* @__PURE__ */ jsxs("feComponentTransfer", { in: "SourceGraphic", result: "highlight", children: [
+        /* @__PURE__ */ jsx("feFuncR", { type: "linear", slope: "1.2", intercept: "0.1" }),
+        /* @__PURE__ */ jsx("feFuncG", { type: "linear", slope: "1.2", intercept: "0.1" }),
+        /* @__PURE__ */ jsx("feFuncB", { type: "linear", slope: "1.2", intercept: "0.1" })
+      ] }),
+      /* @__PURE__ */ jsx("feComposite", { operator: "in", in: "highlight", in2: "SourceGraphic", result: "highlightMask" }),
+      /* @__PURE__ */ jsx("feMerge", { children: /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" }) })
+    ] })
+  );
 }
-/* ── Cutout shape helper ──────────────────────────── */
 function renderCutoutShape(shape, fill, maskId) {
-    const mask = `url(#${maskId})`;
-    switch (shape) {
-        case 'circle':
-            return jsx("circle", { cx: "12", cy: "12", r: "11", fill: fill, mask: mask });
-        case 'square':
-            return jsx("rect", { x: "1", y: "1", width: "22", height: "22", fill: fill, mask: mask });
-        case 'hexagon':
-            return (jsx("polygon", { points: "12,1 22.39,6.5 22.39,17.5 12,23 1.61,17.5 1.61,6.5", fill: fill, mask: mask }));
-        case 'diamond':
-            return jsx("polygon", { points: "12,1 23,12 12,23 1,12", fill: fill, mask: mask });
-        case 'shield':
-            return (jsx("path", { d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5L12 1z", fill: fill, mask: mask }));
-        case 'squircle':
-            return (jsx("path", { d: "M12 1C5.5 1 1 5.5 1 8.5v7C1 18.5 5.5 23 12 23s11-4.5 11-7.5v-7C23 5.5 18.5 1 12 1z", fill: fill, mask: mask }));
-        case 'rounded-square':
-        default:
-            return jsx("rect", { x: "1", y: "1", width: "22", height: "22", rx: "4", fill: fill, mask: mask });
-    }
-}
-function createIcon(options) {
-    var _a, _b, _c, _d;
-    const { displayName, viewBox = '0 0 24 24', paths, textCenter = BOX_CENTER } = options;
-    const solidDuotone = (props) => paths.solid({ ...props, accentColor: props.secondaryColor, accentOpacity: 1 });
-    const perfect = {
-        x: (_a = options.perfectStackX) !== null && _a !== void 0 ? _a : textCenter[0],
-        y: (_b = options.perfectStackY) !== null && _b !== void 0 ? _b : textCenter[1],
-        rotation: (_c = options.perfectStackRotation) !== null && _c !== void 0 ? _c : BOX_PERFECT_STACK.rotation,
-        size: (_d = options.perfectStackSize) !== null && _d !== void 0 ? _d : BOX_PERFECT_STACK.size,
-    };
-    const Icon = forwardRef(({ size = 'md', variant = 'solid', cutoutShape = 'rounded-square', color, lightColor, darkColor, primaryColor: propPrimaryColor = 'currentColor', secondaryColor, accentColor, primaryOpacity = 1, secondaryOpacity = 0.4, accentOpacity = 1, strokeWidth = 1, strokeLinecap: propLinecap, strokeLinejoin: propLinejoin, animation, animationDuration, smilAnimation, smilDuration = 1, smilRepeatCount = 'indefinite', smilEasing = 'ease-in-out', smilDelay = 0, gradient, gradientType = 'linear', gradientAngle = 135, gradientAnimation, 
-    // Transform props
-    rotate, flipX, flipY, scale, transition, transformOrigin = 'center center', 
-    // stacking (1.3.5): the parent icon reads a child's own align / size from its props
-    children, stackAlign: _stackAlign, stackSize: _stackSize, stackRotation: _stackRotation, stackOffsetX: _stackOffsetX, stackOffsetY: _stackOffsetY, textColor, textSize, title, className, style, ...rest }, ref) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const resolvedSize = typeof size === 'number' ? size : ((_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
-        const gradId = useId();
-        // the prefix of the ids of the clip paths the renderers draw (IconRenderProps.uid)
-        const uid = useId();
-        const center = { x: 12, y: 12 }; // Default center for 24x24 viewBox
-        // Use dark/light mode detection when both colors are specified
-        const colorScheme = useColorScheme();
-        const adaptiveColor = lightColor && darkColor ? (colorScheme === 'dark' ? darkColor : lightColor) : undefined;
-        // Resolve semantic color to actual color value
-        // Priority: adaptiveColor > semantic color > propPrimaryColor
-        const primaryColor = adaptiveColor !== null && adaptiveColor !== void 0 ? adaptiveColor : (color
-            ? `var(${SEMANTIC_COLOR_VARS[color]}, ${SEMANTIC_COLOR_DEFAULTS[color]})`
-            : propPrimaryColor);
-        const resolvedSecondary = secondaryColor !== null && secondaryColor !== void 0 ? secondaryColor : primaryColor;
-        const resolvedAccent = accentColor !== null && accentColor !== void 0 ? accentColor : '#ffffff';
-        const effectivePrimary = gradient ? `url(#${gradId})` : primaryColor;
-        // Sharp variant uses square line caps and mitered joins
-        const strokeLinecap = variant === 'sharp' ? 'square' : (propLinecap !== null && propLinecap !== void 0 ? propLinecap : 'round');
-        const strokeLinejoin = variant === 'sharp' ? 'miter' : (propLinejoin !== null && propLinejoin !== void 0 ? propLinejoin : 'round');
-        // Mini variant uses thinner strokes
-        const effectiveStrokeWidth = variant === 'mini' ? Math.max(1.5, strokeWidth - 0.5) : strokeWidth;
-        const renderProps = {
-            variant,
-            primaryColor: effectivePrimary,
-            secondaryColor: resolvedSecondary,
-            accentColor: resolvedAccent,
-            primaryOpacity,
-            secondaryOpacity,
-            accentOpacity,
-            strokeWidth: effectiveStrokeWidth,
-            strokeLinecap,
-            strokeLinejoin,
-            uid,
-        };
-        // Resolve renderer with fallback chain. `wireframe` has no authored layer
-        // at all — it is a mechanical re-draw of the full `solid` construction, so
-        // it never indexes `paths`. A duotone left out is the solid with its details
-        // in secondary (1.3.8): the body keeps primary, the larger area.
-        const renderer = variant === 'wireframe'
-            ? paths.solid
-            : variant === 'duotone' && !paths.duotone
-                ? solidDuotone
-                : ((_g = (_f = (_e = (_d = (_c = (_b = paths[variant]) !== null && _b !== void 0 ? _b : (variant === 'sharp' ? paths.solid : undefined)) !== null && _c !== void 0 ? _c : (variant === 'rounded' ? paths.solid : undefined)) !== null && _d !== void 0 ? _d : (variant === 'mini' ? paths.solid : undefined)) !== null && _e !== void 0 ? _e : (variant === '3d' ? paths.solid : undefined)) !== null && _f !== void 0 ? _f : (variant === 'vivid' ? paths.solid : undefined)) !== null && _g !== void 0 ? _g : paths.solid);
-        // 3D variant uses a filter for depth effect
-        const is3d = variant === '3d';
-        const filterId = useId();
-        // Cutout variant uses SVG mask for knockout/cutout effect
-        const isCutout = variant === 'cutout';
-        const maskId = useId();
-        const classes = ['ntd-icon', animation ? `ntd-anim-${animation}` : '', className !== null && className !== void 0 ? className : '']
-            .filter(Boolean)
-            .join(' ');
-        // Build CSS transform string from props
-        const transforms = [];
-        if (rotate) {
-            transforms.push(`rotate(${rotate}deg)`);
+  const mask = `url(#${maskId})`;
+  switch (shape) {
+    case "circle":
+      return /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "11", fill, mask });
+    case "square":
+      return /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "22", height: "22", fill, mask });
+    case "hexagon":
+      return /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: "12,1 22.39,6.5 22.39,17.5 12,23 1.61,17.5 1.61,6.5",
+          fill,
+          mask
+        }
+      );
+    case "diamond":
+      return /* @__PURE__ */ jsx("polygon", { points: "12,1 23,12 12,23 1,12", fill, mask });
+    case "shield":
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5L12 1z",
+          fill,
+          mask
         }
-        if (flipX) {
-            transforms.push('scaleX(-1)');
+      );
+    case "squircle":
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12 1C5.5 1 1 5.5 1 8.5v7C1 18.5 5.5 23 12 23s11-4.5 11-7.5v-7C23 5.5 18.5 1 12 1z",
+          fill,
+          mask
         }
-        if (flipY) {
-            transforms.push('scaleY(-1)');
+      );
+    case "rounded-square":
+    default:
+      return /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "22", height: "22", rx: "4", fill, mask });
+  }
+}
+function createIcon(options) {
+  const {
+    displayName,
+    viewBox = "0 0 24 24",
+    paths,
+    textCenter = BOX_CENTER,
+    animated = false
+  } = options;
+  const solidDuotone = (props) => paths.solid({ ...props, accentColor: props.secondaryColor, accentOpacity: 1 });
+  const perfect = {
+    x: options.perfectStackX ?? textCenter[0],
+    y: options.perfectStackY ?? textCenter[1],
+    rotation: options.perfectStackRotation ?? BOX_PERFECT_STACK.rotation,
+    size: options.perfectStackSize ?? BOX_PERFECT_STACK.size
+  };
+  const Icon = forwardRef(
+    ({
+      size = "md",
+      variant = "solid",
+      cutoutShape = "rounded-square",
+      color,
+      lightColor,
+      darkColor,
+      primaryColor: propPrimaryColor = "currentColor",
+      secondaryColor,
+      accentColor,
+      primaryOpacity = 1,
+      secondaryOpacity = 0.4,
+      accentOpacity = 1,
+      strokeWidth = 1,
+      strokeLinecap: propLinecap,
+      strokeLinejoin: propLinejoin,
+      animation,
+      animationDuration,
+      animationSpeed,
+      smilAnimation,
+      smilDuration,
+      smilRepeatCount = "indefinite",
+      smilEasing = "ease-in-out",
+      smilDelay = 0,
+      gradient,
+      gradientType = "linear",
+      gradientAngle = 135,
+      gradientAnimation,
+      // Transform props
+      rotate,
+      flipX,
+      flipY,
+      scale,
+      transition,
+      transformOrigin = "center center",
+      // stacking (1.3.5): the parent icon reads a child's own align / size from its props
+      children,
+      stackAlign: _stackAlign,
+      stackSize: _stackSize,
+      stackRotation: _stackRotation,
+      stackOffsetX: _stackOffsetX,
+      stackOffsetY: _stackOffsetY,
+      textColor,
+      textSize,
+      title,
+      className,
+      style,
+      ...rest
+    }, ref) => {
+      const resolvedSize = typeof size === "number" ? size : SIZE_MAP[size] ?? 24;
+      const gradId = useId();
+      const uid = useId();
+      const center = { x: 12, y: 12 };
+      const colorScheme = useColorScheme();
+      const adaptiveColor = lightColor && darkColor ? colorScheme === "dark" ? darkColor : lightColor : void 0;
+      const primaryColor = adaptiveColor ?? (color ? `var(${SEMANTIC_COLOR_VARS[color]}, ${SEMANTIC_COLOR_DEFAULTS[color]})` : propPrimaryColor);
+      const resolvedSecondary = secondaryColor ?? primaryColor;
+      const resolvedAccent = accentColor ?? "#ffffff";
+      const effectivePrimary = gradient ? `url(#${gradId})` : primaryColor;
+      const strokeLinecap = variant === "sharp" ? "square" : propLinecap ?? "round";
+      const strokeLinejoin = variant === "sharp" ? "miter" : propLinejoin ?? "round";
+      const effectiveStrokeWidth = variant === "mini" ? Math.max(1.5, strokeWidth - 0.5) : strokeWidth;
+      const renderProps = {
+        variant,
+        primaryColor: effectivePrimary,
+        secondaryColor: resolvedSecondary,
+        accentColor: resolvedAccent,
+        primaryOpacity,
+        secondaryOpacity,
+        accentOpacity,
+        strokeWidth: effectiveStrokeWidth,
+        strokeLinecap,
+        strokeLinejoin,
+        uid
+      };
+      const renderer = variant === "wireframe" ? paths.solid : variant === "duotone" && !paths.duotone ? solidDuotone : paths[variant] ?? (variant === "sharp" ? paths.solid : void 0) ?? (variant === "rounded" ? paths.solid : void 0) ?? (variant === "mini" ? paths.solid : void 0) ?? (variant === "3d" ? paths.solid : void 0) ?? (variant === "vivid" ? paths.solid : void 0) ?? paths.solid;
+      const is3d = variant === "3d";
+      const filterId = useId();
+      const isCutout = variant === "cutout";
+      const maskId = useId();
+      const classes = ["ntd-icon", animation ? `ntd-anim-${animation}` : "", className ?? ""].filter(Boolean).join(" ");
+      const transforms = [];
+      if (rotate) {
+        transforms.push(`rotate(${rotate}deg)`);
+      }
+      if (flipX) {
+        transforms.push("scaleX(-1)");
+      }
+      if (flipY) {
+        transforms.push("scaleY(-1)");
+      }
+      if (scale && scale !== 1) {
+        transforms.push(`scale(${scale})`);
+      }
+      const transformString = transforms.length > 0 ? transforms.join(" ") : void 0;
+      const transitionValue = transition === true ? "transform 0.3s ease" : typeof transition === "string" ? `transform ${transition}` : void 0;
+      const timeScale = animationScale(animationSpeed);
+      const animStyle = {
+        // the variable carries the duration to the parts an icon animates inside itself
+        ...animationDuration ? { animationDuration, "--ntd-anim-duration": animationDuration } : {},
+        // animations.css multiplies its times by it (default 2 there, the slowdown)
+        ...animationSpeed !== void 0 ? { "--ntd-anim-scale": String(timeScale) } : {},
+        ...transformString ? { transform: transformString } : {},
+        ...transformString ? { transformOrigin } : {},
+        ...transitionValue ? { transition: transitionValue } : {},
+        ...style
+      };
+      const smilAnimationElements = smilAnimation ? generateSmilAnimation(
+        {
+          type: smilAnimation,
+          // 1 s before 1.3.17 by default; a given smilDuration keeps its length
+          duration: (smilDuration ?? 1) * durationScale(smilDuration !== void 0, animationSpeed),
+          repeatCount: smilRepeatCount,
+          easing: smilEasing,
+          delay: smilDelay
+        },
+        center
+      ) : null;
+      const needsSmilScaleWrapper = smilAnimation && ["heartbeat", "scale-pulse", "grow", "shrink", "rubber", "pop"].includes(smilAnimation);
+      const rendered = isCutout ? renderCutoutShape(cutoutShape, gradient ? effectivePrimary : resolvedSecondary, maskId) : variant === "sharp" ? sharpenTree(renderer(renderProps)) : variant === "rounded" ? roundTree(renderer(renderProps)) : variant === "wireframe" ? wireTree(renderer(renderProps), effectivePrimary) : renderer(renderProps);
+      const paced = animated ? retimeTree(rendered, timeScale) : rendered;
+      const stacked = renderStackChildren(children, {
+        variant,
+        primaryColor: effectivePrimary,
+        accentColor: resolvedAccent,
+        tileColor: gradient ? effectivePrimary : resolvedSecondary,
+        strokeWidth,
+        perfect,
+        textColor,
+        textSize
+      });
+      const drawn = stacked ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        paced,
+        stacked
+      ] }) : paced;
+      const iconContent = variant === "mini" ? /* @__PURE__ */ jsx(
+        "g",
+        {
+          transform: `translate(${center.x} ${center.y}) scale(${MINI_SCALE}) translate(${-center.x} ${-center.y})`,
+          children: drawn
         }
-        if (scale && scale !== 1) {
-            transforms.push(`scale(${scale})`);
+      ) : drawn;
+      return /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          ref,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox,
+          width: resolvedSize,
+          height: resolvedSize,
+          fill: "none",
+          strokeLinecap,
+          strokeLinejoin,
+          className: classes,
+          style: animStyle,
+          role: title ? "img" : "presentation",
+          "aria-hidden": title ? void 0 : true,
+          "aria-label": title,
+          ...rest,
+          children: [
+            title && /* @__PURE__ */ jsx("title", { children: title }),
+            gradient && /* @__PURE__ */ jsx("defs", { children: renderGradientDef(
+              gradId,
+              gradient,
+              gradientType,
+              gradientAngle,
+              gradientAnimation,
+              timeScale
+            ) }),
+            is3d && /* @__PURE__ */ jsx("defs", { children: render3dFilterDef(filterId) }),
+            isCutout && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
+              /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "24", height: "24", fill: "white" }),
+              /* @__PURE__ */ jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: (() => {
+                const mask = paths.solid({
+                  ...renderProps,
+                  primaryColor: "black",
+                  secondaryColor: "black",
+                  accentColor: "white",
+                  primaryOpacity: 1,
+                  secondaryOpacity: 1,
+                  accentOpacity: 1,
+                  uid: `${uid}m`
+                });
+                return animated ? retimeTree(mask, timeScale) : mask;
+              })() })
+            ] }) }),
+            smilAnimation ? needsSmilScaleWrapper ? /* @__PURE__ */ jsxs(
+              "g",
+              {
+                transform: `translate(${center.x}, ${center.y})`,
+                filter: is3d ? `url(#${filterId})` : void 0,
+                children: [
+                  /* @__PURE__ */ jsx("g", { transform: `translate(-${center.x}, -${center.y})`, children: iconContent }),
+                  smilAnimationElements
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("g", { filter: is3d ? `url(#${filterId})` : void 0, children: [
+              iconContent,
+              smilAnimationElements
+            ] }) : is3d ? /* @__PURE__ */ jsx("g", { filter: `url(#${filterId})`, children: iconContent }) : iconContent
+          ]
         }
-        const transformString = transforms.length > 0 ? transforms.join(' ') : undefined;
-        // Build transition style
-        const transitionValue = transition === true
-            ? 'transform 0.3s ease'
-            : typeof transition === 'string'
-                ? `transform ${transition}`
-                : undefined;
-        const animStyle = {
-            // the variable carries the duration to the parts an icon animates inside itself
-            ...(animationDuration
-                ? { animationDuration, '--ntd-anim-duration': animationDuration }
-                : {}),
-            ...(transformString ? { transform: transformString } : {}),
-            ...(transformString ? { transformOrigin } : {}),
-            ...(transitionValue ? { transition: transitionValue } : {}),
-            ...style,
-        };
-        // Generate SMIL animation elements if requested
-        const smilAnimationElements = smilAnimation
-            ? generateSmilAnimation({
-                type: smilAnimation,
-                duration: smilDuration,
-                repeatCount: smilRepeatCount,
-                easing: smilEasing,
-                delay: smilDelay,
-            }, center)
-            : null;
-        // For scale-based SMIL animations, we need to wrap content in transform groups
-        const needsSmilScaleWrapper = smilAnimation &&
-            ['heartbeat', 'scale-pulse', 'grow', 'shrink', 'rubber', 'pop'].includes(smilAnimation);
-        // `sharp`, `rounded` and `wireframe` have no per-icon paths — all three
-        // reuse `solid` and are re-drawn here, otherwise they would render
-        // identically to `solid` for fill-based icons. `mini` likewise only thins
-        // the stroke, which does nothing to a filled shape, so it also gets scaled
-        // down about the centre.
-        const rendered = isCutout
-            ? renderCutoutShape(cutoutShape, gradient ? effectivePrimary : resolvedSecondary, maskId)
-            : variant === 'sharp'
-                ? sharpenTree(renderer(renderProps))
-                : variant === 'rounded'
-                    ? roundTree(renderer(renderProps))
-                    : variant === 'wireframe'
-                        ? wireTree(renderer(renderProps), effectivePrimary)
-                        : renderer(renderProps);
-        // Children stacked in the icon (1.3.5) — drawn as they are, not re-drawn as the variant.
-        const stacked = renderStackChildren(children, {
-            variant,
-            primaryColor: effectivePrimary,
-            accentColor: resolvedAccent,
-            tileColor: gradient ? effectivePrimary : resolvedSecondary,
-            strokeWidth,
-            perfect,
-            textColor,
-            textSize,
-        });
-        const drawn = stacked ? (jsxs(Fragment, { children: [rendered, stacked] })) : (rendered);
-        const iconContent = variant === 'mini' ? (jsx("g", { transform: `translate(${center.x} ${center.y}) scale(${MINI_SCALE}) translate(${-center.x} ${-center.y})`, children: drawn })) : (drawn);
-        return (jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, width: resolvedSize, height: resolvedSize, fill: "none", strokeLinecap: strokeLinecap, strokeLinejoin: strokeLinejoin, className: classes, style: animStyle, role: title ? 'img' : 'presentation', "aria-hidden": title ? undefined : true, "aria-label": title, ...rest, children: [title && jsx("title", { children: title }), gradient && (jsx("defs", { children: renderGradientDef(gradId, gradient, gradientType, gradientAngle, gradientAnimation) })), is3d && jsx("defs", { children: render3dFilterDef(filterId) }), isCutout && (jsx("defs", { children: jsxs("mask", { id: maskId, children: [jsx("rect", { x: "0", y: "0", width: "24", height: "24", fill: "white" }), jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: paths.solid({
-                                    ...renderProps,
-                                    primaryColor: 'black',
-                                    secondaryColor: 'black',
-                                    accentColor: 'white',
-                                    primaryOpacity: 1,
-                                    secondaryOpacity: 1,
-                                    accentOpacity: 1,
-                                    uid: `${uid}m`,
-                                }) })] }) })), smilAnimation ? (needsSmilScaleWrapper ? (jsxs("g", { transform: `translate(${center.x}, ${center.y})`, filter: is3d ? `url(#${filterId})` : undefined, children: [jsx("g", { transform: `translate(-${center.x}, -${center.y})`, children: iconContent }), smilAnimationElements] })) : (jsxs("g", { filter: is3d ? `url(#${filterId})` : undefined, children: [iconContent, smilAnimationElements] }))) : is3d ? (jsx("g", { filter: `url(#${filterId})`, children: iconContent })) : (iconContent)] }));
-    });
-    Icon.displayName = displayName;
-    // lets a parent icon tell this one among its children (stacking, 1.3.5), and tells the stacker
-    // where a child of this one goes by default (1.3.8)
-    Icon[NTD_ICON_MARK] = true;
-    Icon[PERFECT_STACK] = perfect;
-    return Icon;
+      );
+    }
+  );
+  Icon.displayName = displayName;
+  Icon[NTD_ICON_MARK] = true;
+  Icon[PERFECT_STACK] = perfect;
+  return Icon;
 }
-
-export { createIcon };
+export {
+  createIcon
+};