@nice2dev/icons 1.3.6 → 1.3.8

package/dist/cjs/stacking.js

@@ -16,6 +16,16 @@ function isNtdIconElement(node) {
         typeof node.type !== 'string' &&
         Boolean(node.type[NTD_ICON_MARK]));
 }
+/** Set on every component createIcon makes, next to {@link NTD_ICON_MARK}: its {@link PerfectStack}. */
+const PERFECT_STACK = 'perfectStack';
+/** The spot icon component `icon` keeps for stacked icons; `undefined` when it is not an icon. */
+function perfectStackOf(icon) {
+    return icon && (typeof icon === 'object' || typeof icon === 'function')
+        ? icon[PERFECT_STACK]
+        : undefined;
+}
+/** A child of the spot's default size and no turn, at the box centre — `'center'`. */
+const BOX_PERFECT_STACK = { rotation: 0, size: 0.6 };
 /** Variants drawn with lines; every other variant is a filled shape. */
 const LINE_VARIANTS = new Set(['outline', 'wireframe']);
 function isFilledVariant(variant) {
@@ -38,6 +48,13 @@ function stackPlacement(align, size) {
     const y = edge.startsWith('top') ? 0 : edge.startsWith('bottom') ? far : mid;
     return half ? [(x + mid) / 2, (y + mid) / 2] : [x, y];
 }
+/**
+ * `at` moved by `percent` of the parent (`stackOffsetX` / `stackOffsetY`, 1.3.7), in the parent's
+ * 24 units. Rounded to a thousandth, so the markup reads 7.2, not 7.199999999999999.
+ */
+function stackOffset(at, percent) {
+    return percent ? Math.round(1000 * at + 240 * percent) / 1000 : at;
+}
 /** A corner badge — a full corner; `half-` corners sit inside the parent like its centre. */
 function isCornerBadge(align) {
     return /^(top|bottom)-(left|right)$/.test(align);
@@ -45,17 +62,25 @@ function isCornerBadge(align) {
 /**
  * Font size of text children by length: one character 9, two 7.5, three 6, more 5 (1.3.6 — three
  * quarters of the first sizes, so a number sits inside a star or a circle with room round it).
+ * In a spot smaller or larger than the default 0.6 (`perfectStackSize`, 1.3.8) it scales with it.
  */
-function defaultTextSize(length) {
-    return length <= 1 ? 9 : length === 2 ? 7.5 : length === 3 ? 6 : 5;
+function defaultTextSize(length, spot = BOX_PERFECT_STACK.size) {
+    const size = length <= 1 ? 9 : length === 2 ? 7.5 : length === 3 ? 6 : 5;
+    return spot === BOX_PERFECT_STACK.size
+        ? size
+        : Math.round((10 * size * spot) / BOX_PERFECT_STACK.size) / 10;
 }
+/** `n` rounded to a thousandth — 7.2 in the markup, not 7.199999999999999. */
+const thousandth = (n) => Math.round(1000 * n) / 1000;
 /** The cutout variant draws its shape at 80% in the tile; its stack follows the shape. */
 const CUTOUT_SHAPE = 'translate(12 12) scale(0.8) translate(-12 -12)';
 /** The gap kept round a corner badge, in the parent's units. */
 const BADGE_GAP = 1;
 /**
- * The children of an icon, drawn into it. Colours given on a child win; otherwise:
- * - content inside — centred, at an edge or halfway out — is cut out of a filled parent: an icon child takes
+ * The children of an icon, drawn into it. A child without a `stackAlign` goes to the spot the icon
+ * keeps for it (`ctx.perfect`: its centre, size and turn), and so does text. Colours given on a
+ * child win; otherwise:
+ * - content inside — at that spot, centred, at an edge or halfway out — is cut out of a filled parent: an icon child takes
  *   the parent's accent as its primary (and the parent's primary as its accent, so its own text
  *   and details read), text the accent; on `outline` / `wireframe` it stays in the parent's
  *   colours; in a cutout it takes the tile's colour, drawn solid in the cut;
@@ -75,13 +100,21 @@ function renderStackChildren(children, ctx) {
     const text = items
         .filter((c) => typeof c === 'string' || typeof c === 'number')
         .join('');
+    const { perfect } = ctx;
     const layers = items.map((child, i) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (isNtdIconElement(child)) {
             const p = child.props;
-            const align = (_a = p.stackAlign) !== null && _a !== void 0 ? _a : 'center';
-            const size = Math.round(24000 * ((_b = p.stackSize) !== null && _b !== void 0 ? _b : defaultStackSize(align))) / 1000;
-            const [x, y] = stackPlacement(align, size);
+            const align = (_a = p.stackAlign) !== null && _a !== void 0 ? _a : 'perfect';
+            // the parent's own spot (1.3.8): its centre, size and turn, unless the child sets them
+            const atSpot = align === 'perfect';
+            const size = thousandth(24 * ((_b = p.stackSize) !== null && _b !== void 0 ? _b : (atSpot ? perfect.size : defaultStackSize(align))));
+            const [alignX, alignY] = atSpot
+                ? [thousandth(perfect.x - size / 2), thousandth(perfect.y - size / 2)]
+                : stackPlacement(align, size);
+            // nudged from the aligned spot (1.3.7) — a share of the parent, so it scales with it
+            const x = stackOffset(alignX, p.stackOffsetX);
+            const y = stackOffset(alignY, p.stackOffsetY);
             const badge = isCornerBadge(align);
             const icon = React.cloneElement(child, {
                 x,
@@ -95,23 +128,28 @@ function renderStackChildren(children, ctx) {
             const cx = x + size / 2;
             const cy = y + size / 2;
             // turned about its own centre (1.3.6) — through a group: a nested <svg> takes no transform
-            const turn = p.stackRotation ? `rotate(${p.stackRotation} ${cx} ${cy})` : undefined;
+            const rotation = (_g = p.stackRotation) !== null && _g !== void 0 ? _g : (atSpot ? perfect.rotation : 0);
+            const turn = rotation ? `rotate(${rotation} ${cx} ${cy})` : undefined;
             if (!badge && !turn) {
                 return icon;
             }
-            return (jsxRuntime.jsxs("g", { transform: turn, children: [badge && jsxRuntime.jsx("circle", { cx: cx, cy: cy, r: size / 2 + BADGE_GAP, fill: ctx.accentColor }), icon] }, (_g = child.key) !== null && _g !== void 0 ? _g : i));
+            return (jsxRuntime.jsxs("g", { transform: turn, children: [badge && jsxRuntime.jsx("circle", { cx: cx, cy: cy, r: size / 2 + BADGE_GAP, fill: ctx.accentColor }), icon] }, (_h = child.key) !== null && _h !== void 0 ? _h : i));
         }
         return React.isValidElement(child) ? child : null;
     });
-    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [layers, text && (jsxRuntime.jsx("text", { x: ctx.textCenter[0], y: ctx.textCenter[1], textAnchor: "middle", dominantBaseline: "central", fontSize: (_a = ctx.textSize) !== null && _a !== void 0 ? _a : defaultTextSize(text.length), fontWeight: 700, fill: (_b = ctx.textColor) !== null && _b !== void 0 ? _b : insidePrimary, stroke: "none", children: text }))] }));
+    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [layers, text && (jsxRuntime.jsx("text", { x: perfect.x, y: perfect.y, transform: perfect.rotation ? `rotate(${perfect.rotation} ${perfect.x} ${perfect.y})` : undefined, textAnchor: "middle", dominantBaseline: "central", fontSize: (_a = ctx.textSize) !== null && _a !== void 0 ? _a : defaultTextSize(text.length, perfect.size), fontWeight: 700, fill: (_b = ctx.textColor) !== null && _b !== void 0 ? _b : insidePrimary, stroke: "none", children: text }))] }));
     return cutout ? jsxRuntime.jsx("g", { transform: CUTOUT_SHAPE, children: content }) : content;
 }
 
+exports.BOX_PERFECT_STACK = BOX_PERFECT_STACK;
 exports.NTD_ICON_MARK = NTD_ICON_MARK;
+exports.PERFECT_STACK = PERFECT_STACK;
 exports.defaultStackSize = defaultStackSize;
 exports.defaultTextSize = defaultTextSize;
 exports.isCornerBadge = isCornerBadge;
 exports.isFilledVariant = isFilledVariant;
 exports.isNtdIconElement = isNtdIconElement;
+exports.perfectStackOf = perfectStackOf;
 exports.renderStackChildren = renderStackChildren;
+exports.stackOffset = stackOffset;
 exports.stackPlacement = stackPlacement;

package/dist/esm/NiceIconStacker.js

@@ -1,12 +1,13 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useNiceTranslation, useControllableState } from '@nice2dev/ui-core';
 import { forwardRef, useRef, useId, useState, useCallback, useMemo, useImperativeHandle } from 'react';
 import { NtdPlus, NtdTrash, NtdCheck, NtdCopy } from './icons/actions.js';
 import { NtdClose } from './icons/navigation.js';
-import { niceIconStackCode, renderIconStack, stackChildrenOf, isValidTextBinding, stackParentId } from './iconStack.js';
-import { defaultStackSize, defaultTextSize } from './stacking.js';
+import { niceIconStackCode, renderIconStack, stackParentId, stackChildrenOf, isValidTextBinding } from './iconStack.js';
+import { BOX_PERFECT_STACK, defaultStackSize, defaultTextSize, perfectStackOf } from './stacking.js';
 
 const ALIGNS = [
+    'perfect',
     'center',
     'top',
     'bottom',
@@ -66,6 +67,8 @@ function removeLayer(layers, id) {
         align: undefined,
         size: undefined,
         rotation: undefined,
+        offsetX: undefined,
+        offsetY: undefined,
     };
     return [
         newBase,
@@ -157,19 +160,30 @@ const NiceIconStacker = forwardRef(function NiceIconStacker({ icons, layers: lay
     return (jsxs("div", { className: ['nice-icon-stacker', className].filter(Boolean).join(' '), children: [jsxs("div", { className: "nice-icon-stacker__toolbar", children: [jsxs("button", { type: "button", onClick: add, disabled: !current, children: [jsx(NtdPlus, { size: 14 }), " ", addLabel] }), jsxs("button", { type: "button", onClick: clear, disabled: layers.length === 0, children: [jsx(NtdTrash, { size: 14 }), " ", t('iconStacker.clear', 'Clear the stack')] })] }), !base ? (jsx("p", { className: "nice-icon-stacker__empty", children: t('iconStacker.empty', 'The stack is empty. Add an icon to start one.') })) : (jsxs("div", { className: "nice-icon-stacker__body", children: [jsx("div", { className: "nice-icon-stacker__preview", "aria-label": t('iconStacker.preview', 'Preview'), role: "group", children: PREVIEW_SIZES.map((s) => (jsxs("span", { className: "nice-icon-stacker__preview-cell", children: [renderIconStack(layers, icons, {
                                     baseProps: { ...previewProps, size: s, title: base.icon },
                                 }), jsxs("small", { children: [s, "px"] })] }, s))) }), jsx("ol", { className: "nice-icon-stacker__layers", "aria-label": t('iconStacker.layers', 'Layers'), children: tree.map(({ layer: l, depth }) => {
-                            var _a, _b, _c, _d, _e, _f, _g, _h;
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                             const Icon = resolve(l.icon);
                             const isBase = l === base;
-                            const align = (_a = l.align) !== null && _a !== void 0 ? _a : 'center';
-                            const share = (_b = l.size) !== null && _b !== void 0 ? _b : defaultStackSize(align);
+                            const align = (_a = l.align) !== null && _a !== void 0 ? _a : 'perfect';
+                            // the spot the parent keeps for stacked icons (1.3.8): its size and turn are the
+                            // layer's defaults while it sits there
+                            const parentId = stackParentId(layers, l);
+                            const parentLayer = parentId ? layers.find((p) => p.id === parentId) : undefined;
+                            const spot = (parentLayer && perfectStackOf(resolve(parentLayer.icon))) || BOX_PERFECT_STACK;
+                            const atSpot = align === 'perfect';
+                            const share = (_b = l.size) !== null && _b !== void 0 ? _b : (atSpot ? spot.size : defaultStackSize(align));
+                            const turnDefault = atSpot ? spot.rotation : 0;
+                            const turn = (_c = l.rotation) !== null && _c !== void 0 ? _c : turnDefault;
                             const innermost = stackChildrenOf(layers, l.id).length === 0;
-                            const textSize = (_c = l.textSize) !== null && _c !== void 0 ? _c : defaultTextSize(((_d = l.text) !== null && _d !== void 0 ? _d : '').length || 1);
+                            const textSize = (_d = l.textSize) !== null && _d !== void 0 ? _d : defaultTextSize(((_e = l.text) !== null && _e !== void 0 ? _e : '').length || 1, (_f = perfectStackOf(Icon)) === null || _f === void 0 ? void 0 : _f.size);
                             const bindingInvalid = !!l.textBinding && !isValidTextBinding(l.textBinding);
                             const depthStyle = {
                                 ['--nice-icon-stacker-depth']: String(depth),
                             };
                             const label = (key, fallback) => t(key, fallback).replace('{icon}', l.icon);
-                            return (jsxs("li", { className: "nice-icon-stacker__layer", style: depthStyle, children: [jsxs("div", { className: "nice-icon-stacker__layer-row", children: [jsx("input", { type: "radio", name: targetGroup, checked: (target === null || target === void 0 ? void 0 : target.id) === l.id, onChange: () => setSelected(l.id), "aria-label": label('iconStacker.target', 'Add the next icon into {icon}'), title: label('iconStacker.target', 'Add the next icon into {icon}') }), jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsx(Icon, { size: 24, variant: l.variant }) : null }), jsxs("span", { className: "nice-icon-stacker__layer-name", children: [l.icon, isBase && (jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') }))] }), !isBase && (jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.align', 'Position') }), jsx("select", { value: align, onChange: (e) => update(l.id, { align: e.target.value }), children: ALIGNS.map((a) => (jsx("option", { value: a, children: a }, a))) })] })), !isBase && (jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.size', 'Size') }), jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(l.id, { size: Number(e.target.value) }) }), jsxs("output", { children: [Math.round(share * 100), "%"] })] })), jsx("button", { type: "button", className: "nice-icon-stacker__remove", onClick: () => remove(l.id), "aria-label": label('iconStacker.remove', 'Remove {icon}'), title: label('iconStacker.remove', 'Remove {icon}'), children: jsx(NtdTrash, { size: 14 }) })] }), jsxs("details", { className: "nice-icon-stacker__more", children: [jsx("summary", { children: t('iconStacker.more', 'More') }), jsxs("div", { className: "nice-icon-stacker__more-body", children: [!isBase && (jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.rotation', 'Turn') }), jsx("input", { type: "range", min: -180, max: 180, step: 15, value: (_e = l.rotation) !== null && _e !== void 0 ? _e : 0, onChange: (e) => update(l.id, { rotation: Number(e.target.value) || undefined }) }), jsxs("output", { children: [(_f = l.rotation) !== null && _f !== void 0 ? _f : 0, "\u00B0"] })] })), jsx(ColorField, { label: t('iconStacker.primary', 'Primary'), value: l.primaryColor, onChange: (v) => update(l.id, { primaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsx(ColorField, { label: t('iconStacker.secondary', 'Secondary'), value: l.secondaryColor, onChange: (v) => update(l.id, { secondaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsx(ColorField, { label: t('iconStacker.accent', 'Accent'), value: l.accentColor, onChange: (v) => update(l.id, { accentColor: v }), autoLabel: autoLabel, resetLabel: resetLabel })] })] }), (innermost || l.text || l.textBinding) && (jsxs("div", { className: "nice-icon-stacker__text", children: [jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.text', 'Text') }), jsx("input", { type: "text", value: (_g = l.text) !== null && _g !== void 0 ? _g : '', maxLength: 4, onChange: (e) => update(l.id, { text: e.target.value || undefined }) })] }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.textSize', 'Text size') }), jsx("input", { type: "range", min: 3, max: 14, step: 0.5, value: textSize, onChange: (e) => update(l.id, { textSize: Number(e.target.value) }) }), jsx("output", { children: textSize }), l.textSize !== undefined && (jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => update(l.id, { textSize: undefined }), "aria-label": resetLabel, title: resetLabel, children: jsx(NtdClose, { size: 12 }) }))] }), jsx(ColorField, { label: t('iconStacker.textColor', 'Text colour'), value: l.textColor, onChange: (v) => update(l.id, { textColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.bind', 'Bind to') }), jsx("input", { type: "text", value: (_h = l.textBinding) !== null && _h !== void 0 ? _h : '', "aria-invalid": bindingInvalid || undefined, title: t('iconStacker.bindHint', 'The name of the value the text shows, e.g. count — the text above is a sample'), onChange: (e) => update(l.id, { textBinding: e.target.value.trim() || undefined }) })] })] }))] }, l.id));
+                            return (jsxs("li", { className: "nice-icon-stacker__layer", style: depthStyle, children: [jsxs("div", { className: "nice-icon-stacker__layer-row", children: [jsx("input", { type: "radio", name: targetGroup, checked: (target === null || target === void 0 ? void 0 : target.id) === l.id, onChange: () => setSelected(l.id), "aria-label": label('iconStacker.target', 'Add the next icon into {icon}'), title: label('iconStacker.target', 'Add the next icon into {icon}') }), jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsx(Icon, { size: 24, variant: l.variant }) : null }), jsxs("span", { className: "nice-icon-stacker__layer-name", children: [l.icon, isBase && (jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') }))] }), !isBase && (jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.align', 'Position') }), jsx("select", { value: align, onChange: (e) => update(l.id, { align: e.target.value }), children: ALIGNS.map((a) => (jsx("option", { value: a, children: a }, a))) })] })), !isBase && (jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.size', 'Size') }), jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(l.id, { size: Number(e.target.value) }) }), jsxs("output", { children: [Math.round(share * 100), "%"] })] })), jsx("button", { type: "button", className: "nice-icon-stacker__remove", onClick: () => remove(l.id), "aria-label": label('iconStacker.remove', 'Remove {icon}'), title: label('iconStacker.remove', 'Remove {icon}'), children: jsx(NtdTrash, { size: 14 }) })] }), jsxs("details", { className: "nice-icon-stacker__more", children: [jsx("summary", { children: t('iconStacker.more', 'More') }), jsxs("div", { className: "nice-icon-stacker__more-body", children: [!isBase && (jsxs(Fragment, { children: [jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.rotation', 'Turn') }), jsx("input", { type: "range", min: -180, max: 180, step: 15, value: turn, onChange: (e) => {
+                                                                            const v = Number(e.target.value);
+                                                                            update(l.id, { rotation: v === turnDefault ? undefined : v });
+                                                                        } }), jsxs("output", { children: [turn, "\u00B0"] })] }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.offsetX', 'Shift right') }), jsx("input", { type: "range", min: -50, max: 50, step: 1, value: (_g = l.offsetX) !== null && _g !== void 0 ? _g : 0, onChange: (e) => update(l.id, { offsetX: Number(e.target.value) || undefined }) }), jsxs("output", { children: [(_h = l.offsetX) !== null && _h !== void 0 ? _h : 0, "%"] })] }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.offsetY', 'Shift down') }), jsx("input", { type: "range", min: -50, max: 50, step: 1, value: (_j = l.offsetY) !== null && _j !== void 0 ? _j : 0, onChange: (e) => update(l.id, { offsetY: Number(e.target.value) || undefined }) }), jsxs("output", { children: [(_k = l.offsetY) !== null && _k !== void 0 ? _k : 0, "%"] })] })] })), jsx(ColorField, { label: t('iconStacker.primary', 'Primary'), value: l.primaryColor, onChange: (v) => update(l.id, { primaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsx(ColorField, { label: t('iconStacker.secondary', 'Secondary'), value: l.secondaryColor, onChange: (v) => update(l.id, { secondaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsx(ColorField, { label: t('iconStacker.accent', 'Accent'), value: l.accentColor, onChange: (v) => update(l.id, { accentColor: v }), autoLabel: autoLabel, resetLabel: resetLabel })] })] }), (innermost || l.text || l.textBinding) && (jsxs("div", { className: "nice-icon-stacker__text", children: [jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.text', 'Text') }), jsx("input", { type: "text", value: (_l = l.text) !== null && _l !== void 0 ? _l : '', maxLength: 4, onChange: (e) => update(l.id, { text: e.target.value || undefined }) })] }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.textSize', 'Text size') }), jsx("input", { type: "range", min: 3, max: 14, step: 0.5, value: textSize, onChange: (e) => update(l.id, { textSize: Number(e.target.value) }) }), jsx("output", { children: textSize }), l.textSize !== undefined && (jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => update(l.id, { textSize: undefined }), "aria-label": resetLabel, title: resetLabel, children: jsx(NtdClose, { size: 12 }) }))] }), jsx(ColorField, { label: t('iconStacker.textColor', 'Text colour'), value: l.textColor, onChange: (v) => update(l.id, { textColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: t('iconStacker.bind', 'Bind to') }), jsx("input", { type: "text", value: (_m = l.textBinding) !== null && _m !== void 0 ? _m : '', "aria-invalid": bindingInvalid || undefined, title: t('iconStacker.bindHint', 'The name of the value the text shows, e.g. count — the text above is a sample'), onChange: (e) => update(l.id, { textBinding: e.target.value.trim() || undefined }) })] })] }))] }, l.id));
                         }) }), jsxs("div", { className: "nice-icon-stacker__code", children: [jsx("pre", { children: code }), jsxs("button", { type: "button", onClick: copy, children: [copied ? jsx(NtdCheck, { size: 14 }) : jsx(NtdCopy, { size: 14 }), ' ', copied
                                         ? t('iconStacker.copied', 'Copied')
                                         : t('iconStacker.copy', 'Copy the code')] })] })] }))] }));

package/dist/esm/createIcon.js

@@ -2,7 +2,7 @@ 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 { renderStackChildren, NTD_ICON_MARK } from './stacking.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 ───────────────────────── */
@@ -113,12 +113,20 @@ function renderCutoutShape(shape, fill, maskId) {
     }
 }
 function createIcon(options) {
+    var _a, _b, _c, _d;
     const { displayName, viewBox = '0 0 24 24', paths, textCenter = BOX_CENTER } = options;
-    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 = 2, strokeLinecap: propLinecap, strokeLinejoin: propLinejoin, animation, animationDuration, smilAnimation, smilDuration = 1, smilRepeatCount = 'indefinite', smilEasing = 'ease-in-out', smilDelay = 0, gradient, gradientType = 'linear', gradientAngle = 135, gradientAnimation, 
+    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, textColor, textSize, title, className, style, ...rest }, ref) => {
+    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();
@@ -156,10 +164,13 @@ function createIcon(options) {
         };
         // 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`.
+        // 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
-            : ((_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);
+            : 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();
@@ -234,7 +245,7 @@ function createIcon(options) {
             accentColor: resolvedAccent,
             tileColor: gradient ? effectivePrimary : resolvedSecondary,
             strokeWidth,
-            textCenter,
+            perfect,
             textColor,
             textSize,
         });
@@ -252,8 +263,10 @@ function createIcon(options) {
                                 }) })] }) })), 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)
+    // 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;
 }
 

package/dist/esm/iconParts.js

@@ -9,6 +9,19 @@ import { createIcon } from './createIcon.js';
 function detailColor({ variant, secondaryColor, accentColor }) {
     return variant === 'cutout' ? accentColor : secondaryColor;
 }
+/**
+ * A duotone renderer with its two colours swapped, at full strength (1.3.8) — for a duotone that
+ * drew its larger area in secondary (a pale body under a primary outline): the body turns
+ * primary, the outline and the details secondary.
+ */
+function swapDuotone(render) {
+    return (props) => render({
+        ...props,
+        primaryColor: props.secondaryColor,
+        secondaryColor: props.primaryColor,
+        secondaryOpacity: 1,
+    });
+}
 /**
  * `content` drawn only inside `shape` — for accent lines that read as a cut through a shape (a
  * pencil's band, a calendar's header line, an envelope's flap): clipped, they meet the shape's
@@ -40,6 +53,10 @@ function bellIcon(displayName, ringing) {
     const parts = ({ primaryColor, strokeWidth }, detail, rings, ringsOpacity = 1) => (jsxs(Fragment, { children: [jsx("path", { d: BELL, fill: primaryColor }), jsx("path", { d: BELL_CLAPPER, fill: detail }), ringing && (jsx("path", { d: BELL_RINGS, stroke: rings, strokeWidth: strokeWidth, opacity: ringsOpacity }))] }));
     return createIcon({
         displayName,
+        // stacked icons and text go into the bell's body, above the clapper (1.3.8)
+        perfectStackX: 12,
+        perfectStackY: 10.5,
+        perfectStackSize: 0.4,
         paths: {
             solid: (props) => parts(props, props.primaryColor, props.primaryColor),
             outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${BELL}${BELL_CLAPPER_LINE}${ringing ? BELL_RINGS : ''}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
@@ -58,20 +75,24 @@ const PAPER_FOLD_SHARP = 'M12 2v8h8z';
  * A paper icon — NtdFile, and every document drawn on the same page (NtdFileText, NtdInvoice,
  * NtdContract, …), so their pages and folds match. The fold is secondary when the page is filled;
  * `text` is the document's writing, a path of strokes kept below the fold (y ≥ 11, x 7–17),
- * drawn in the accent colour on a filled page and in primary on a stroked one.
+ * drawn in the accent colour on a filled page (secondary in duotone) and in primary on a stroked one.
  */
 function paperIcon(displayName, text = '') {
     return createIcon({
         displayName,
+        // stacked icons and text go onto the page below the fold (1.3.8), the same on every paper
+        perfectStackX: 12,
+        perfectStackY: 14,
+        perfectStackSize: 0.5,
         paths: {
             solid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: PAPER, fill: primaryColor }), jsx("path", { d: PAPER_FOLD, fill: secondaryColor }), text && (jsx("path", { d: text, stroke: accentColor, strokeOpacity: accentOpacity, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }))] })),
             // square at every corner, the fold included — the derived `sharp` keeps a path's arcs round
             sharp: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: PAPER_SHARP, fill: primaryColor }), jsx("path", { d: PAPER_FOLD_SHARP, fill: secondaryColor }), text && (jsx("path", { d: text, stroke: accentColor, strokeOpacity: accentOpacity, strokeWidth: "1.5", fill: "none" }))] })),
             outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${PAPER}${PAPER_FOLD_LINE}${text}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
-            duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: PAPER, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: PAPER_FOLD_SHARP, fill: primaryColor, opacity: secondaryOpacity + 0.1 }), jsx("path", { d: `${PAPER}${PAPER_FOLD_LINE}${text}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+            // duotone (1.3.8): createIcon's default — the solid page, its writing in secondary like the fold
             vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: PAPER, fill: primaryColor }), jsx("path", { d: PAPER, fill: "white", opacity: "0.1" }), jsx("path", { d: PAPER_FOLD, fill: secondaryColor }), text && (jsx("path", { d: text, stroke: "white", strokeOpacity: "0.9", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }))] })),
         },
     });
 }
 
-export { bellIcon, detailColor, paperIcon, within };
+export { bellIcon, detailColor, paperIcon, swapDuotone, within };

package/dist/esm/iconStack.js

@@ -23,11 +23,13 @@ function niceIconStackCode(layers) {
     }
     const bound = layers.filter((l) => isValidTextBinding(l.textBinding));
     const write = (layer, parent, indent) => {
-        var _a;
         const attrs = [
-            parent ? `stackAlign="${(_a = layer.align) !== null && _a !== void 0 ? _a : 'center'}"` : '',
+            // the parent's own spot is the default (1.3.8), so only another position is written
+            parent && layer.align && layer.align !== 'perfect' ? `stackAlign="${layer.align}"` : '',
             parent && layer.size !== undefined ? `stackSize={${layer.size}}` : '',
-            parent && layer.rotation ? `stackRotation={${layer.rotation}}` : '',
+            parent && layer.rotation !== undefined ? `stackRotation={${layer.rotation}}` : '',
+            parent && layer.offsetX ? `stackOffsetX={${layer.offsetX}}` : '',
+            parent && layer.offsetY ? `stackOffsetY={${layer.offsetY}}` : '',
             layer.variant && layer.variant !== (parent === null || parent === void 0 ? void 0 : parent.variant) ? `variant="${layer.variant}"` : '',
             ...COLOR_PROPS.map((p) => (layer[p] ? `${p}="${layer[p]}"` : '')),
             layer.textSize !== undefined ? `textSize={${layer.textSize}}` : '',
@@ -57,7 +59,7 @@ function niceIconStackCode(layers) {
 function renderIconStack(layers, icons, { baseProps, values } = {}) {
     const resolve = (name) => (typeof icons === 'function' ? icons(name) : icons[name]);
     const draw = (layer, parent) => {
-        var _a, _b;
+        var _a;
         const Icon = resolve(layer.icon);
         if (!Icon) {
             return null;
@@ -83,7 +85,7 @@ function renderIconStack(layers, icons, { baseProps, values } = {}) {
                 inner,
                 text));
         }
-        return (createElement(Icon, { ...own, key: layer.id, stackAlign: (_b = layer.align) !== null && _b !== void 0 ? _b : 'center', stackSize: layer.size, stackRotation: layer.rotation, variant: layer.variant !== parent.variant ? layer.variant : undefined },
+        return (createElement(Icon, { ...own, key: layer.id, stackAlign: layer.align, stackSize: layer.size, stackRotation: layer.rotation, stackOffsetX: layer.offsetX, stackOffsetY: layer.offsetY, variant: layer.variant !== parent.variant ? layer.variant : undefined },
             inner,
             text));
     };

package/dist/esm/icons/accessibility.js

@@ -1,5 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createIcon } from '../createIcon.js';
+import { swapDuotone } from '../iconParts.js';
 
 /* ────────────────────────────────────────────────────────────────────────────
    UNIVERSAL ACCESS
@@ -47,7 +48,7 @@ const NtdDeaf = /* @__PURE__ */ createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: "2", fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M7 8a3 3 0 013-3", stroke: primaryColor, strokeWidth: "2", fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M4 4l16 16", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M7 8a3 3 0 013-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M4 4l16 16", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "10", r: "6", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M7 8a3 3 0 013-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M4 4l16 16", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] })),
+        duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "10", r: "6", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M7 8a3 3 0 013-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M4 4l16 16", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] }))),
         vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: "2", fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M7 8a3 3 0 013-3", stroke: secondaryColor, strokeWidth: "1.8", fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M4 4l16 16", stroke: "#3B82F6", strokeWidth: "1.5", strokeLinecap: "round" })] })),
     },
 });
@@ -56,7 +57,7 @@ const NtdSignLanguage = /* @__PURE__ */ createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: primaryColor }) })),
         outline: ({ primaryColor, strokeWidth }) => (jsx(Fragment, { children: jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] })),
+        duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: primaryColor }), jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: "white", opacity: "0.1" })] })),
     },
 });
@@ -74,7 +75,7 @@ const NtdAudioDescription = /* @__PURE__ */ createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: primaryColor }), jsx("text", { x: "7", y: "15", fill: "white", fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "AD" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("text", { x: "7", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "AD" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("text", { x: "7", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "AD" })] })),
+        duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("text", { x: "7", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "AD" })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: "white", opacity: "0.1" })] })),
     },
 });
@@ -83,7 +84,7 @@ const NtdClosedCaptions = /* @__PURE__ */ createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: primaryColor }), jsx("text", { x: "6", y: "15", fill: "white", fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "CC" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("text", { x: "6", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "CC" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("text", { x: "6", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "CC" })] })),
+        duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("text", { x: "6", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "CC" })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: "white", opacity: "0.1" })] })),
     },
 });
@@ -95,7 +96,7 @@ const NtdDyslexia = /* @__PURE__ */ createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: primaryColor }), jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }), jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: primaryColor, strokeWidth: "1.5", strokeLinecap: "round" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: primaryColor, strokeWidth: "1.5", strokeLinecap: "round" })] })),
+        duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: primaryColor, strokeWidth: "1.5", strokeLinecap: "round" })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: primaryColor }), jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: "white", opacity: "0.1" }), jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round" }), jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })] })),
     },
 });
@@ -104,7 +105,7 @@ const NtdEasyRead = /* @__PURE__ */ createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: primaryColor }), jsx("path", { d: "M6 8h5v5H6zM13 8h5M13 11h4M6 16h12M6 19h8", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "6", y: "8", width: "5", height: "5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13 8h5M13 11h4M6 16h12M6 19h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "6", y: "8", width: "5", height: "5", fill: primaryColor }), jsx("path", { d: "M13 8h5M13 11h4M6 16h12M6 19h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] })),
+        duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "6", y: "8", width: "5", height: "5", fill: primaryColor }), jsx("path", { d: "M13 8h5M13 11h4M6 16h12M6 19h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: "white", opacity: "0.1" }), jsx("path", { d: "M6 8h5v5H6zM13 8h5M13 11h4M6 16h12M6 19h8", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round" })] })),
     },
 });
@@ -116,7 +117,7 @@ const NtdScreenReader = /* @__PURE__ */ createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: primaryColor }), jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round" }), jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" }), jsx("circle", { cx: "16", cy: "7", r: "1.5", fill: "white" }), jsx("path", { d: "M14 7c0-1.5 1-2.5 2-2.5s2 1 2 2.5", stroke: "white", strokeWidth: "1", fill: "none" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "16", cy: "7", r: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M14 7c0-1.5 1-2.5 2-2.5s2 1 2 2.5", stroke: primaryColor, strokeWidth: "1", fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "16", cy: "7", r: "1.5", fill: primaryColor })] })),
+        duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "16", cy: "7", r: "1.5", fill: primaryColor })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: primaryColor }), jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "16", cy: "7", r: "1.5", fill: "white" }), jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: "white", strokeWidth: "1", strokeLinecap: "round" }), jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: "white", strokeWidth: "1", strokeLinecap: "round" }), jsx("path", { d: "M14 7c0-1.5 1-2.5 2-2.5s2 1 2 2.5", stroke: "white", strokeWidth: "1", fill: "none" })] })),
     },
 });
@@ -134,7 +135,7 @@ const NtdAssistiveTech = /* @__PURE__ */ createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: "white" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] })),
+        duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: "white" }), jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: "white", strokeWidth: "1", strokeLinecap: "round" })] })),
     },
 });