@nice2dev/icons 1.3.15 → 1.3.17

package/dist/cjs/rsc.js

@@ -1,205 +1,187 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var sharpen = require('./sharpen.js');
-var types = require('./types.js');
-
-/* ────────────────────────────────────────────────────────────────────────────
-   RSC-COMPATIBLE ICON FACTORY
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Creates a React Server Component compatible icon.
- *
- * Unlike the standard `createIcon`, this version:
- * - Does NOT use React hooks (useId, useSyncExternalStore, etc.)
- * - Does NOT support animations
- * - Does NOT support automatic dark/light mode detection
- * - IS fully streamable and SSR-safe
- *
- * @param options - Icon configuration
- * @returns A React function component (not using forwardRef)
- *
- * @example
- * ```tsx
- * export const NtdHomeRSC = createIconRSC({
- *   displayName: 'NtdHomeRSC',
- *   paths: {
- *     solid: ({ primaryColor }) => <path d="..." fill={primaryColor} />,
- *     outline: ({ primaryColor, strokeWidth }) => <path d="..." stroke={primaryColor} />,
- *     duotone: ({ primaryColor, secondaryColor }) => <path d="..." />,
- *   },
- * });
- * ```
- */
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const sharpen = require("./sharpen.js");
+const types = require("./types.js");
 function createIconRSC(options) {
-    const { displayName, viewBox = '0 0 24 24', paths } = options;
-    function IconRSC(props) {
-        var _a;
-        const { size = 'md', variant = 'solid', cutoutShape = 'rounded-square', primaryColor: primaryColorProp, secondaryColor: secondaryColorProp, accentColor: accentColorProp, secondaryOpacity = 0.35, strokeWidth = 1, gradient, gradientDirection = 135, color, rotate, flipX, flipY, scale, className, style, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, title, role = ariaLabel ? 'img' : 'presentation', 'data-testid': testId, } = props;
-        // Resolve size
-        const resolvedSize = typeof size === 'number' ? size : types.SIZE_MAP[size] || types.SIZE_MAP.md;
-        // Resolve colors with semantic color support
-        let primaryColor = primaryColorProp !== null && primaryColorProp !== void 0 ? primaryColorProp : 'currentColor';
-        const secondaryColor = secondaryColorProp !== null && secondaryColorProp !== void 0 ? secondaryColorProp : 'currentColor';
-        const accentColor = accentColorProp !== null && accentColorProp !== void 0 ? accentColorProp : primaryColor;
-        if (color && types.SEMANTIC_COLOR_DEFAULTS[color]) {
-            if (!primaryColorProp) {
-                primaryColor = types.SEMANTIC_COLOR_DEFAULTS[color];
-            }
-        }
-        // Resolve variant with fallback. `wireframe` always starts from `solid`
-        // (the full construction) — it is re-drawn mechanically, not authored.
-        const isCutout = variant === 'cutout';
-        const pathRenderer = isCutout || variant === 'wireframe' ? paths.solid : ((_a = paths[variant]) !== null && _a !== void 0 ? _a : paths.solid);
-        // Build render props
-        const renderProps = {
-            primaryColor,
-            secondaryColor,
-            accentColor,
-            secondaryOpacity,
-            strokeWidth,
-        };
-        // Build transforms
-        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})`);
-        }
-        // Build gradient defs if needed
-        let gradientDefs = null;
-        let gradientId = null;
-        if (gradient && types.GRADIENT_PRESETS[gradient]) {
-            const colors = types.GRADIENT_PRESETS[gradient];
-            // Generate a deterministic ID based on displayName and gradient
-            gradientId = `${displayName}-${gradient}-grad`;
-            const x1 = Math.round(50 - 50 * Math.cos((gradientDirection * Math.PI) / 180));
-            const y1 = Math.round(50 - 50 * Math.sin((gradientDirection * Math.PI) / 180));
-            const x2 = Math.round(50 + 50 * Math.cos((gradientDirection * Math.PI) / 180));
-            const y2 = Math.round(50 + 50 * Math.sin((gradientDirection * Math.PI) / 180));
-            gradientDefs = (jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("linearGradient", { id: gradientId, x1: `${x1}%`, y1: `${y1}%`, x2: `${x2}%`, y2: `${y2}%`, children: colors.map((color, i) => (jsxRuntime.jsx("stop", { offset: `${(i / (colors.length - 1)) * 100}%`, stopColor: color }, i))) }) }));
-            // Override primary color with gradient reference
-            renderProps.primaryColor = `url(#${gradientId})`;
-        }
-        // Final styles
-        const finalStyle = {
-            width: resolvedSize,
-            height: resolvedSize,
-            ...style,
-            ...(transforms.length > 0 && { transform: transforms.join(' ') }),
-        };
-        // Cutout mask ID (deterministic for SSR)
-        const cutoutMaskId = isCutout ? `${displayName}-cutout-mask` : null;
-        // Cutout shape renderer
-        const cutoutBg = isCutout
-            ? (() => {
-                const fill = renderProps.primaryColor !== 'currentColor'
-                    ? renderProps.secondaryColor
-                    : renderProps.primaryColor;
-                const mask = `url(#${cutoutMaskId})`;
-                switch (cutoutShape) {
-                    case 'circle':
-                        return jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "11", fill: fill, mask: mask });
-                    case 'square':
-                        return jsxRuntime.jsx("rect", { x: "1", y: "1", width: "22", height: "22", fill: fill, mask: mask });
-                    case 'hexagon':
-                        return (jsxRuntime.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 jsxRuntime.jsx("polygon", { points: "12,1 23,12 12,23 1,12", fill: fill, mask: mask });
-                    case 'shield':
-                        return (jsxRuntime.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 (jsxRuntime.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 }));
-                    default:
-                        return jsxRuntime.jsx("rect", { x: "1", y: "1", width: "22", height: "22", rx: "4", fill: fill, mask: mask });
-                }
-            })()
-            : null;
-        // Mirrors the client renderer in createIcon.tsx: `sharp` / `rounded` /
-        // `wireframe` / `mini` all reuse `paths.solid`, so each needs its own pass
-        // to be distinguishable.
-        const rendered = isCutout
-            ? cutoutBg
-            : variant === 'sharp'
-                ? sharpen.sharpenTree(pathRenderer(renderProps))
-                : variant === 'rounded'
-                    ? sharpen.roundTree(pathRenderer(renderProps))
-                    : variant === 'wireframe'
-                        ? sharpen.wireTree(pathRenderer(renderProps), renderProps.primaryColor)
-                        : pathRenderer(renderProps);
-        const iconContent = variant === 'mini' ? (jsxRuntime.jsx("g", { transform: `translate(12 12) scale(${sharpen.MINI_SCALE}) translate(-12 -12)`, children: rendered })) : (rendered);
-        return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, width: resolvedSize, height: resolvedSize, fill: "none", className: className, style: finalStyle, role: role, "aria-label": ariaLabel, "aria-hidden": ariaHidden !== null && ariaHidden !== void 0 ? ariaHidden : !ariaLabel, "data-testid": testId, children: [title && jsxRuntime.jsx("title", { children: title }), gradientDefs, isCutout && (jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("mask", { id: cutoutMaskId, children: [jsxRuntime.jsx("rect", { x: "0", y: "0", width: "24", height: "24", fill: "white" }), jsxRuntime.jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: paths.solid({
-                                    ...renderProps,
-                                    primaryColor: 'black',
-                                    secondaryColor: 'black',
-                                    accentColor: 'white',
-                                }) })] }) })), iconContent] }));
+  const { displayName, viewBox = "0 0 24 24", paths } = options;
+  function IconRSC(props) {
+    const {
+      size = "md",
+      variant = "solid",
+      cutoutShape = "rounded-square",
+      primaryColor: primaryColorProp,
+      secondaryColor: secondaryColorProp,
+      accentColor: accentColorProp,
+      secondaryOpacity = 0.35,
+      strokeWidth = 1,
+      gradient,
+      gradientDirection = 135,
+      color,
+      rotate,
+      flipX,
+      flipY,
+      scale,
+      className,
+      style,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaHidden,
+      title,
+      role = ariaLabel ? "img" : "presentation",
+      "data-testid": testId
+    } = props;
+    const resolvedSize = typeof size === "number" ? size : types.SIZE_MAP[size] || types.SIZE_MAP.md;
+    let primaryColor = primaryColorProp ?? "currentColor";
+    const secondaryColor = secondaryColorProp ?? "currentColor";
+    const accentColor = accentColorProp ?? primaryColor;
+    if (color && types.SEMANTIC_COLOR_DEFAULTS[color]) {
+      if (!primaryColorProp) {
+        primaryColor = types.SEMANTIC_COLOR_DEFAULTS[color];
+      }
     }
-    IconRSC.displayName = displayName;
-    return IconRSC;
-}
-/* ────────────────────────────────────────────────────────────────────────────
-   STREAMING-FRIENDLY UTILITIES
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Renders an icon to a static SVG string (for streaming/SSR).
- * Useful for generating static assets or email templates.
- */
-function renderIconToString(Icon, props = {}) {
-    var _a;
-    try {
-        // Import react-dom/server for SSR rendering
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const { renderToStaticMarkup } = require('react-dom/server');
-        const element = Icon(props);
-        return renderToStaticMarkup(element);
+    const isCutout = variant === "cutout";
+    const pathRenderer = isCutout || variant === "wireframe" ? paths.solid : paths[variant] ?? paths.solid;
+    const renderProps = {
+      primaryColor,
+      secondaryColor,
+      accentColor,
+      secondaryOpacity,
+      strokeWidth
+    };
+    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})`);
     }
-    catch (_b) {
-        // Fallback: construct SVG manually
-        const { size = 'md', primaryColor = 'currentColor', variant: _variant = 'solid', className = '', } = props;
-        const sizeValue = (_a = types.SIZE_MAP[size]) !== null && _a !== void 0 ? _a : (typeof size === 'number' ? size : 24);
-        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${sizeValue}" height="${sizeValue}" class="${className}" fill="${primaryColor}"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" fill="${primaryColor}"></path></svg>`;
+    let gradientDefs = null;
+    let gradientId = null;
+    if (gradient && types.GRADIENT_PRESETS[gradient]) {
+      const colors = types.GRADIENT_PRESETS[gradient];
+      gradientId = `${displayName}-${gradient}-grad`;
+      const x1 = Math.round(50 - 50 * Math.cos(gradientDirection * Math.PI / 180));
+      const y1 = Math.round(50 - 50 * Math.sin(gradientDirection * Math.PI / 180));
+      const x2 = Math.round(50 + 50 * Math.cos(gradientDirection * Math.PI / 180));
+      const y2 = Math.round(50 + 50 * Math.sin(gradientDirection * Math.PI / 180));
+      gradientDefs = /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("linearGradient", { id: gradientId, x1: `${x1}%`, y1: `${y1}%`, x2: `${x2}%`, y2: `${y2}%`, children: colors.map((color2, i) => /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: `${i / (colors.length - 1) * 100}%`, stopColor: color2 }, i)) }) });
+      renderProps.primaryColor = `url(#${gradientId})`;
     }
+    const finalStyle = {
+      width: resolvedSize,
+      height: resolvedSize,
+      ...style,
+      ...transforms.length > 0 && { transform: transforms.join(" ") }
+    };
+    const cutoutMaskId = isCutout ? `${displayName}-cutout-mask` : null;
+    const cutoutBg = isCutout ? (() => {
+      const fill = renderProps.primaryColor !== "currentColor" ? renderProps.secondaryColor : renderProps.primaryColor;
+      const mask = `url(#${cutoutMaskId})`;
+      switch (cutoutShape) {
+        case "circle":
+          return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "11", fill, mask });
+        case "square":
+          return /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "1", width: "22", height: "22", fill, mask });
+        case "hexagon":
+          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polygon", { points: "12,1 23,12 12,23 1,12", fill, mask });
+        case "shield":
+          return /* @__PURE__ */ jsxRuntime.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
+            }
+          );
+        case "squircle":
+          return /* @__PURE__ */ jsxRuntime.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
+            }
+          );
+        default:
+          return /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "1", width: "22", height: "22", rx: "4", fill, mask });
+      }
+    })() : null;
+    const rendered = isCutout ? cutoutBg : variant === "sharp" ? sharpen.sharpenTree(pathRenderer(renderProps)) : variant === "rounded" ? sharpen.roundTree(pathRenderer(renderProps)) : variant === "wireframe" ? sharpen.wireTree(pathRenderer(renderProps), renderProps.primaryColor) : pathRenderer(renderProps);
+    const iconContent = variant === "mini" ? /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(12 12) scale(${sharpen.MINI_SCALE}) translate(-12 -12)`, children: rendered }) : rendered;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox,
+        width: resolvedSize,
+        height: resolvedSize,
+        fill: "none",
+        className,
+        style: finalStyle,
+        role,
+        "aria-label": ariaLabel,
+        "aria-hidden": ariaHidden ?? !ariaLabel,
+        "data-testid": testId,
+        children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }),
+          gradientDefs,
+          isCutout && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("mask", { id: cutoutMaskId, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "24", height: "24", fill: "white" }),
+            /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: paths.solid({
+              ...renderProps,
+              primaryColor: "black",
+              secondaryColor: "black",
+              accentColor: "white"
+            }) })
+          ] }) }),
+          iconContent
+        ]
+      }
+    );
+  }
+  IconRSC.displayName = displayName;
+  return IconRSC;
+}
+function renderIconToString(Icon, props = {}) {
+  try {
+    const { renderToStaticMarkup } = require("react-dom/server");
+    const element = Icon(props);
+    return renderToStaticMarkup(element);
+  } catch {
+    const {
+      size = "md",
+      primaryColor = "currentColor",
+      variant: _variant = "solid",
+      className = ""
+    } = props;
+    const sizeValue = types.SIZE_MAP[size] ?? (typeof size === "number" ? size : 24);
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${sizeValue}" height="${sizeValue}" class="${className}" fill="${primaryColor}"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" fill="${primaryColor}"></path></svg>`;
+  }
 }
-/**
- * Type guard to check if a component is an RSC-compatible icon
- */
 function isRSCIcon(component) {
-    return (typeof component === 'function' &&
-        'displayName' in component &&
-        typeof component.displayName === 'string' &&
-        component.displayName.endsWith('RSC'));
+  return typeof component === "function" && "displayName" in component && typeof component.displayName === "string" && component.displayName.endsWith("RSC");
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   RSC ICON WRAPPER
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Creates an RSC version from an existing icon's path config.
- * This allows creating RSC-compatible versions from standard icons.
- *
- * @example
- * ```tsx
- * import { NtdHome } from '@nice2dev/icons';
- * import { wrapAsRSC } from '@nice2dev/icons/rsc';
- *
- * // Note: This requires access to the original path config
- * const NtdHomeRSC = wrapAsRSC(NtdHome);
- * ```
- */
 function wrapAsRSC(originalPaths, displayName) {
-    return createIconRSC({
-        displayName: `${displayName}RSC`,
-        paths: originalPaths,
-    });
+  return createIconRSC({
+    displayName: `${displayName}RSC`,
+    paths: originalPaths
+  });
 }
-
 exports.GRADIENT_PRESETS = types.GRADIENT_PRESETS;
 exports.SEMANTIC_COLOR_DEFAULTS = types.SEMANTIC_COLOR_DEFAULTS;
 exports.SIZE_MAP = types.SIZE_MAP;

package/dist/cjs/sharpen.js

@@ -1,145 +1,88 @@
-'use strict';
-
-var React = require('react');
-
-/**
- * Tags whose `rx`/`ry` express a *corner rounding* rather than the shape
- * itself. `circle` / `ellipse` are deliberately absent — a circle has to stay
- * a circle in every variant.
- */
-const ROUNDED_CORNER_TAGS = new Set(['rect']);
-/**
- * Scale factor of the `mini` variant, about the icon centre. Shared by the
- * client (`createIcon`) and RSC (`rsc`) renderers so the two stay identical.
- *
- * Thinning the stroke — what `mini` did on its own — is invisible on a filled
- * shape, which left `mini` indistinguishable from `solid` for most of the set.
- */
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const ROUNDED_CORNER_TAGS = /* @__PURE__ */ new Set(["rect"]);
 const MINI_SCALE = 0.875;
-/**
- * Corner radius `rounded` gives a `<rect>`, as a fraction of its shorter side.
- * Relative rather than absolute so it reads the same on a 16-unit detail rect
- * and on a full-bleed 22-unit background.
- */
 const ROUND_RADIUS_RATIO = 0.25;
-/** SVG lengths arrive as numbers or numeric strings; anything else is unusable. */
 function toNumber(value) {
-    const n = typeof value === 'number' ? value : typeof value === 'string' ? Number(value) : NaN;
-    return Number.isFinite(n) ? n : undefined;
+  const n = typeof value === "number" ? value : typeof value === "string" ? Number(value) : NaN;
+  return Number.isFinite(n) ? n : void 0;
 }
-/**
- * Turns a rendered `solid` tree into its `sharp` equivalent: square line caps,
- * mitered joins and zeroed corner radii, applied recursively.
- *
- * The `sharp` variant has no per-icon path data — it reuses `paths.solid` — so
- * without this pass it would be pixel-identical to `solid` for every fill-based
- * icon. Overriding rather than defaulting matters: some icons hardcode their
- * own `strokeLinecap` / `strokeLinejoin`, and those must not survive here.
- *
- * Intrinsic (string-typed) elements only — fragments are traversed but never
- * receive SVG attributes.
- */
 function sharpenTree(node) {
-    return React.Children.map(node, (child) => {
-        if (!React.isValidElement(child)) {
-            return child;
-        }
-        const el = child;
-        const next = {};
-        if (typeof el.type === 'string') {
-            next.strokeLinecap = 'square';
-            next.strokeLinejoin = 'miter';
-            if (ROUNDED_CORNER_TAGS.has(el.type)) {
-                next.rx = 0;
-                next.ry = 0;
-            }
-        }
-        const { children } = el.props;
-        if (children != null) {
-            next.children = sharpenTree(children);
-        }
-        return React.cloneElement(el, next);
-    });
+  return React.Children.map(node, (child) => {
+    if (!React.isValidElement(child)) {
+      return child;
+    }
+    const el = child;
+    const next = {};
+    if (typeof el.type === "string") {
+      next.strokeLinecap = "square";
+      next.strokeLinejoin = "miter";
+      if (ROUNDED_CORNER_TAGS.has(el.type)) {
+        next.rx = 0;
+        next.ry = 0;
+      }
+    }
+    const { children } = el.props;
+    if (children != null) {
+      next.children = sharpenTree(children);
+    }
+    return React.cloneElement(el, next);
+  });
 }
-/**
- * The mirror of {@link sharpenTree}: round line caps and joins, and `<rect>`
- * corners rounded to {@link ROUND_RADIUS_RATIO} of the shorter side.
- *
- * `rounded` reuses `paths.solid` exactly like `sharp` does, so without this pass
- * it is indistinguishable from `solid`. Same override-don't-default rule — icons
- * that hardcode square caps have to lose them here.
- *
- * A rect whose `width`/`height` cannot be read keeps whatever radius it had:
- * guessing a radius without knowing the box would deform the shape. Rectangles
- * drawn as `<path>` are out of reach either way — the same limitation
- * `sharpenTree` documents above.
- */
 function roundTree(node) {
-    return React.Children.map(node, (child) => {
-        var _a;
-        if (!React.isValidElement(child)) {
-            return child;
-        }
-        const el = child;
-        const next = {};
-        if (typeof el.type === 'string') {
-            next.strokeLinecap = 'round';
-            next.strokeLinejoin = 'round';
-            if (ROUNDED_CORNER_TAGS.has(el.type)) {
-                const width = toNumber(el.props.width);
-                const height = toNumber(el.props.height);
-                if (width !== undefined && height !== undefined) {
-                    const radius = Math.max((_a = toNumber(el.props.rx)) !== null && _a !== void 0 ? _a : 0, Math.min(width, height) * ROUND_RADIUS_RATIO);
-                    next.rx = radius;
-                    next.ry = radius;
-                }
-            }
+  return React.Children.map(node, (child) => {
+    if (!React.isValidElement(child)) {
+      return child;
+    }
+    const el = child;
+    const next = {};
+    if (typeof el.type === "string") {
+      next.strokeLinecap = "round";
+      next.strokeLinejoin = "round";
+      if (ROUNDED_CORNER_TAGS.has(el.type)) {
+        const width = toNumber(el.props.width);
+        const height = toNumber(el.props.height);
+        if (width !== void 0 && height !== void 0) {
+          const radius = Math.max(
+            toNumber(el.props.rx) ?? 0,
+            Math.min(width, height) * ROUND_RADIUS_RATIO
+          );
+          next.rx = radius;
+          next.ry = radius;
         }
-        const { children } = el.props;
-        if (children != null) {
-            next.children = roundTree(children);
-        }
-        return React.cloneElement(el, next);
-    });
+      }
+    }
+    const { children } = el.props;
+    if (children != null) {
+      next.children = roundTree(children);
+    }
+    return React.cloneElement(el, next);
+  });
 }
-/**
- * Stroke width of the `wireframe` variant — a thin, uniform construction line,
- * deliberately independent of the caller's `strokeWidth` so a wireframe grid
- * draws at one consistent weight.
- */
 const WIREFRAME_STROKE = 1;
-/**
- * Turns a rendered tree into its `wireframe` equivalent: every shape becomes an
- * unfilled thin outline in the primary colour, keeping the interior construction
- * that `outline` drops (creases, inner discs, duotone underlays).
- *
- * Fed from `paths.solid`, because that layer carries the whole construction —
- * `outline` is the silhouette only. Per-shape `opacity` is cleared as well, so a
- * faint duotone wash does not survive as a ghost line.
- */
 function wireTree(node, color) {
-    return React.Children.map(node, (child) => {
-        if (!React.isValidElement(child)) {
-            return child;
-        }
-        const el = child;
-        const next = {};
-        if (typeof el.type === 'string') {
-            next.fill = 'none';
-            next.stroke = color;
-            next.strokeWidth = WIREFRAME_STROKE;
-            next.strokeLinecap = 'round';
-            next.strokeLinejoin = 'round';
-            next.opacity = undefined;
-        }
-        const { children } = el.props;
-        if (children != null) {
-            next.children = wireTree(children, color);
-        }
-        return React.cloneElement(el, next);
-    });
+  return React.Children.map(node, (child) => {
+    if (!React.isValidElement(child)) {
+      return child;
+    }
+    const el = child;
+    const next = {};
+    if (typeof el.type === "string") {
+      next.fill = "none";
+      next.stroke = color;
+      next.strokeWidth = WIREFRAME_STROKE;
+      next.strokeLinecap = "round";
+      next.strokeLinejoin = "round";
+      next.opacity = void 0;
+    }
+    const { children } = el.props;
+    if (children != null) {
+      next.children = wireTree(children, color);
+    }
+    return React.cloneElement(el, next);
+  });
 }
-
 exports.MINI_SCALE = MINI_SCALE;
 exports.WIREFRAME_STROKE = WIREFRAME_STROKE;
 exports.roundTree = roundTree;