@nice2dev/icons 1.3.4 → 1.3.6

package/dist/esm/NiceIconStacker.js

@@ -0,0 +1,181 @@
+import { jsxs, jsx } 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';
+
+const ALIGNS = [
+    'center',
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'top-left',
+    'top-right',
+    'bottom-left',
+    'bottom-right',
+    'half-top',
+    'half-bottom',
+    'half-left',
+    'half-right',
+    'half-top-left',
+    'half-top-right',
+    'half-bottom-left',
+    'half-bottom-right',
+];
+const PREVIEW_SIZES = [96, 48, 24];
+const NO_LAYERS = [];
+/** What a colour field shows while the colour is unset (follows the parent). */
+const AUTO_SWATCH = '#808080';
+/** The layers in tree order (each followed by what sits in it), with their depth. */
+function walk(layers) {
+    const out = [];
+    const visit = (layer, depth) => {
+        out.push({ layer, depth });
+        for (const child of stackChildrenOf(layers, layer.id)) {
+            visit(child, depth + 1);
+        }
+    };
+    if (layers[0]) {
+        visit(layers[0], 0);
+    }
+    return out;
+}
+/** Removes a layer; what sat in it moves up into its parent (a removed base hands over to its first child). */
+function removeLayer(layers, id) {
+    const base = layers[0];
+    if (!base) {
+        return [];
+    }
+    if (id !== base.id) {
+        const gone = layers.find((l) => l.id === id);
+        const up = gone ? stackParentId(layers, gone) : undefined;
+        return layers
+            .filter((l) => l.id !== id)
+            .map((l) => (l.parent === id ? { ...l, parent: up === base.id ? undefined : up } : l));
+    }
+    const [heir, ...siblings] = stackChildrenOf(layers, base.id);
+    if (!heir) {
+        return [];
+    }
+    const newBase = {
+        ...heir,
+        parent: undefined,
+        align: undefined,
+        size: undefined,
+        rotation: undefined,
+    };
+    return [
+        newBase,
+        ...layers
+            .filter((l) => l.id !== base.id && l.id !== heir.id)
+            .map((l) => siblings.includes(l)
+            ? { ...l, parent: heir.id }
+            : l.parent === heir.id
+                ? { ...l, parent: undefined }
+                : l),
+    ];
+}
+/** A colour of the layer's own, or "auto" — following its parent — until one is picked. */
+function ColorField({ label, value, onChange, autoLabel, resetLabel }) {
+    return (jsxs("span", { className: "nice-icon-stacker__color", children: [jsxs("label", { className: "nice-icon-stacker__field", children: [jsx("span", { children: label }), jsx("input", { type: "color", value: value !== null && value !== void 0 ? value : AUTO_SWATCH, onChange: (e) => onChange(e.target.value) })] }), value ? (jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => onChange(undefined), "aria-label": resetLabel, title: resetLabel, children: jsx(NtdClose, { size: 12 }) })) : (jsx("small", { className: "nice-icon-stacker__auto", children: autoLabel }))] }));
+}
+/**
+ * NiceIconStacker (1.3.5) — builds an icon stack: the base icon and the icons stacked in it, each
+ * with its position, size, turn and colours, nested any number of levels deep (1.3.6) with text
+ * innermost — its size, colour and the value it is bound to — shown live at three sizes and as the
+ * JSX that draws it. The "add" button puts `current` into the selected layer and selects it, so
+ * adding again goes one level deeper; select an outer layer to add side by side. Layers leave one
+ * by one or all at once. `NiceIconStack` draws a stack built here from data.
+ */
+const NiceIconStacker = forwardRef(function NiceIconStacker({ icons, layers: layersProp, defaultLayers, onLayersChange, current, previewProps, className }, ref) {
+    var _a, _b, _c, _d;
+    const { t } = useNiceTranslation();
+    const [layers, setLayers] = useControllableState({
+        value: layersProp,
+        defaultValue: defaultLayers,
+        fallbackValue: NO_LAYERS,
+        onChange: onLayersChange,
+        componentName: 'NiceIconStacker',
+    });
+    const nextId = useRef(0);
+    const targetGroup = useId();
+    const [copied, setCopied] = useState(false);
+    // The layer the next icon goes into — the newest by default, so adding nests deeper.
+    const [selected, setSelected] = useState(undefined);
+    const base = layers[0];
+    const target = (_b = (_a = layers.find((l) => l.id === selected)) !== null && _a !== void 0 ? _a : layers[layers.length - 1]) !== null && _b !== void 0 ? _b : undefined;
+    const resolve = useCallback((name) => (typeof icons === 'function' ? icons(name) : icons[name]), [icons]);
+    const tree = useMemo(() => walk(layers), [layers]);
+    const code = useMemo(() => niceIconStackCode(layers), [layers]);
+    const update = (id, patch) => setLayers((prev) => prev.map((l) => (l.id === id ? { ...l, ...patch } : l)));
+    const add = () => {
+        if (!current) {
+            return;
+        }
+        nextId.current += 1;
+        const id = `${current.icon}-${Date.now().toString(36)}-${nextId.current}`;
+        setLayers((prev) => {
+            const into = prev.find((l) => l.id === (target === null || target === void 0 ? void 0 : target.id));
+            const layer = {
+                id,
+                icon: current.icon,
+                variant: current.variant,
+                ...(into && into !== prev[0] ? { parent: into.id } : {}),
+            };
+            return [...prev, layer];
+        });
+        setSelected(id);
+    };
+    const remove = (id) => {
+        setLayers((prev) => removeLayer(prev, id));
+        if (selected === id) {
+            setSelected(undefined);
+        }
+    };
+    const clear = () => {
+        setLayers(NO_LAYERS);
+        setSelected(undefined);
+    };
+    useImperativeHandle(ref, () => ({ add, clear }));
+    const copy = () => {
+        var _a;
+        void ((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(code).then(() => {
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1500);
+        }));
+    };
+    const autoLabel = t('iconStacker.auto', 'auto');
+    const resetLabel = t('iconStacker.reset', 'Back to auto');
+    const addLabel = base && target
+        ? t('iconStacker.addInto', 'Add {icon} into {target}')
+            .replace('{icon}', (_c = current === null || current === void 0 ? void 0 : current.icon) !== null && _c !== void 0 ? _c : '')
+            .replace('{target}', target.icon)
+        : t('iconStacker.add', 'Add {icon} to the stack').replace('{icon}', (_d = current === null || current === void 0 ? void 0 : current.icon) !== null && _d !== void 0 ? _d : '');
+    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;
+                            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 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 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));
+                        }) }), 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')] })] })] }))] }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    NiceIconStacker.displayName = 'NiceIconStacker';
+}
+
+export { NiceIconStacker, niceIconStackCode };

package/dist/esm/client.js

@@ -1,5 +1,7 @@
 export { AnimationController, InteractiveIcon, PRESET_INTERACTIONS, PRESET_SEQUENCES, createAnimationSequence, createClickAnimation, createHoverAnimation, createVisibilityAnimation, useAnimationSequence } from './animationControls.js';
 export { NiceIconPicker } from './NiceIconPicker.js';
+export { NiceIconStacker } from './NiceIconStacker.js';
+export { NiceIconStack, isValidTextBinding, niceIconStackCode, renderIconStack } from './iconStack.js';
 export { NtdIconMorph, NtdMorphPair, NtdPathMorph, useMorphState } from './NtdIconMorph.js';
 export { NtdBadge, NtdIconOverlay, NtdIconStack, NtdStatusDot } from './NtdIconBadge.js';
 export { SMIL_ANIMATION_TYPES, SmilAnimationWrapper, createSmilAnimationDef, generateSmilAnimation, isSmilSupported } from './smilAnimations.js';

package/dist/esm/createIcon.js

@@ -1,8 +1,9 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+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 { SIZE_MAP, SEMANTIC_COLOR_VARS, SEMANTIC_COLOR_DEFAULTS, GRADIENT_PRESETS } from './types.js';
+import { renderStackChildren, NTD_ICON_MARK } 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
@@ -25,6 +26,7 @@ function subscribeColorScheme(callback) {
 function useColorScheme() {
     return useSyncExternalStore(subscribeColorScheme, getColorScheme, () => 'light');
 }
+const BOX_CENTER = [12, 12];
 /**
  * Factory function that creates a React icon component from SVG path renderers.
  *
@@ -111,10 +113,12 @@ function renderCutoutShape(shape, fill, maskId) {
     }
 }
 function createIcon(options) {
-    const { displayName, viewBox = '0 0 24 24', paths } = options;
+    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, 
     // Transform props
-    rotate, flipX, flipY, scale, transition, transformOrigin = 'center center', title, className, style, ...rest }, ref) => {
+    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) => {
         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();
@@ -223,7 +227,19 @@ function createIcon(options) {
                     : variant === 'wireframe'
                         ? wireTree(renderer(renderProps), effectivePrimary)
                         : renderer(renderProps);
-        const iconContent = variant === 'mini' ? (jsx("g", { transform: `translate(${center.x} ${center.y}) scale(${MINI_SCALE}) translate(${-center.x} ${-center.y})`, children: rendered })) : (rendered);
+        // 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,
+            textCenter,
+            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',
@@ -236,6 +252,8 @@ 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)
+    Icon[NTD_ICON_MARK] = true;
     return Icon;
 }
 

package/dist/esm/iconParts.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createIcon } from './createIcon.js';
 
 /**

package/dist/esm/iconStack.js

@@ -0,0 +1,104 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createElement } from 'react';
+
+/** A name `textBinding` can take: a JavaScript identifier. */
+function isValidTextBinding(name) {
+    return !!name && /^[A-Za-z_$][\w$]*$/.test(name);
+}
+/** The id of the layer `layer` sits in, `undefined` for the base. */
+function stackParentId(layers, layer) {
+    var _a, _b;
+    return layer === layers[0] ? undefined : ((_a = layer.parent) !== null && _a !== void 0 ? _a : (_b = layers[0]) === null || _b === void 0 ? void 0 : _b.id);
+}
+/** The layers that sit directly in layer `id`, in order. */
+function stackChildrenOf(layers, id) {
+    return layers.filter((l) => l !== layers[0] && stackParentId(layers, l) === id);
+}
+const COLOR_PROPS = ['primaryColor', 'secondaryColor', 'accentColor', 'textColor'];
+/** The stack as JSX: every layer wrapping the layers that sit in it, text innermost. */
+function niceIconStackCode(layers) {
+    const base = layers[0];
+    if (!base) {
+        return '';
+    }
+    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'}"` : '',
+            parent && layer.size !== undefined ? `stackSize={${layer.size}}` : '',
+            parent && layer.rotation ? `stackRotation={${layer.rotation}}` : '',
+            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}}` : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const open = `${layer.icon}${attrs ? ` ${attrs}` : ''}`;
+        const text = isValidTextBinding(layer.textBinding) ? `{${layer.textBinding}}` : layer.text;
+        const inner = stackChildrenOf(layers, layer.id);
+        if (inner.length === 0) {
+            return text ? `${indent}<${open}>${text}</${layer.icon}>` : `${indent}<${open} />`;
+        }
+        return [
+            `${indent}<${open}>`,
+            ...(text ? [`${indent}  ${text}`] : []),
+            ...inner.map((child) => write(child, layer, `${indent}  `)),
+            `${indent}</${layer.icon}>`,
+        ].join('\n');
+    };
+    const notes = bound.map((l) => `// {${l.textBinding}}: bound text${l.text ? `, e.g. "${l.text}"` : ''}`);
+    return [...notes, write(base, undefined, '')].join('\n');
+}
+/**
+ * The stack drawn as icons — the base wrapping the layers that sit in it, text innermost (1.3.6).
+ * One SVG, as nesting the icons by hand would give.
+ */
+function renderIconStack(layers, icons, { baseProps, values } = {}) {
+    const resolve = (name) => (typeof icons === 'function' ? icons(name) : icons[name]);
+    const draw = (layer, parent) => {
+        var _a, _b;
+        const Icon = resolve(layer.icon);
+        if (!Icon) {
+            return null;
+        }
+        const bound = isValidTextBinding(layer.textBinding) ? values === null || values === void 0 ? void 0 : values[layer.textBinding] : undefined;
+        const text = bound !== null && bound !== void 0 ? bound : layer.text;
+        const own = {
+            primaryColor: layer.primaryColor,
+            secondaryColor: layer.secondaryColor,
+            accentColor: layer.accentColor,
+            textColor: layer.textColor,
+            textSize: layer.textSize,
+        };
+        const inner = stackChildrenOf(layers, layer.id).map((child) => draw(child, layer));
+        if (!parent) {
+            const props = { ...baseProps };
+            for (const [k, v] of Object.entries(own)) {
+                if (v !== undefined) {
+                    props[k] = v;
+                }
+            }
+            return (createElement(Icon, { ...props, key: layer.id, variant: (_a = layer.variant) !== null && _a !== void 0 ? _a : baseProps === null || baseProps === void 0 ? void 0 : baseProps.variant },
+                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 },
+            inner,
+            text));
+    };
+    return layers[0] ? draw(layers[0], undefined) : null;
+}
+/**
+ * NiceIconStack (1.3.6) — draws a stack kept as data (NiceIconStacker's layers) as one icon, its
+ * bound text filled from `values`: `<NiceIconStack layers={stack} icons={icons} values={{ count }} />`.
+ * The rest of the props go to the base icon.
+ */
+function NiceIconStack({ layers, icons, values, ...baseProps }) {
+    return jsx(Fragment, { children: renderIconStack(layers, icons, { baseProps, values }) });
+}
+if (process.env.NODE_ENV !== 'production') {
+    NiceIconStack.displayName = 'NiceIconStack';
+}
+
+export { NiceIconStack, isValidTextBinding, niceIconStackCode, renderIconStack, stackChildrenOf, stackParentId };

package/dist/esm/icons/actions.js

@@ -119,13 +119,34 @@ const NtdShare = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor, strokeWidth }) => shareFilled(primaryColor, secondaryColor, strokeWidth),
     },
 });
+// NtdCopy: the front sheet at the top right (it was at the bottom right), the back one showing at
+// the bottom left as a line that stops 1 short of the front — closer than before. The gap is
+// worked out from the stroke width, so it stays the same at any weight; `sharp` draws the back
+// sheet with square corners (the derived one kept their arcs). Duotone, fills only: the back sheet
+// secondary under the primary front one; vivid: the back line secondary.
+const COPY_FRONT = { x: 8.5, y: 3, width: 12.5, height: 12.5, rx: 2.5 };
+const COPY_BACK = { x: 3, y: 8.5, width: 12.5, height: 12.5, rx: 2.5 };
+/** What shows of the back sheet: its edges outside the front one, `gap` short of it. */
+function copyBack(gap, square = false) {
+    const top = COPY_FRONT.x - gap;
+    const right = COPY_FRONT.y + COPY_FRONT.height + gap;
+    return square
+        ? `M${top} 8.5H3V21h12.5V${right}`
+        : `M${top} 8.5H5.5a2.5 2.5 0 00-2.5 2.5v7.5a2.5 2.5 0 002.5 2.5h7.5a2.5 2.5 0 002.5-2.5V${right}`;
+}
+/** The front sheet filled and the back one as a line 1 short of it (past its round cap). */
+function copyFilled(front, back, strokeWidth, square = false) {
+    return (jsxs(Fragment, { children: [jsx("rect", { ...COPY_FRONT, fill: front }), jsx("path", { d: copyBack(1 + strokeWidth / 2, square), stroke: back, strokeWidth: strokeWidth, fill: "none" })] }));
+}
 const NtdCopy = /* @__PURE__ */ createIcon({
     displayName: 'NtdCopy',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: primaryColor }), jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "13", height: "13", rx: "2.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: primaryColor }), jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: "white", opacity: "0.1" }), jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1", stroke: secondaryColor, strokeWidth: "1.8" })] })),
+        solid: ({ primaryColor, strokeWidth }) => copyFilled(primaryColor, primaryColor, strokeWidth),
+        sharp: ({ primaryColor, strokeWidth }) => copyFilled(primaryColor, primaryColor, strokeWidth, true),
+        // both sheets stroked: the back line stops 1 short of the front sheet's line
+        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...COPY_FRONT, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: copyBack(1 + strokeWidth), stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { ...COPY_BACK, fill: secondaryColor }), jsx("rect", { ...COPY_FRONT, fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => copyFilled(primaryColor, secondaryColor, strokeWidth),
     },
 });
 /** NtdClipboard's two lines of text, high on the board (they sat below its middle). */

package/dist/esm/icons/ai.js

@@ -130,6 +130,8 @@ const NtdSparkle = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z", fill: primaryColor }), jsx("path", { d: "M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z", fill: "white", opacity: "0.1" })] })),
     },
 });
+/** @deprecated The same four-pointed star as {@link NtdSparkle} — use that. */
+const NtdStar4 = NtdSparkle;
 const NtdMagicWand = /* @__PURE__ */ createIcon({
     displayName: 'NtdMagicWand',
     paths: {
@@ -170,4 +172,4 @@ const aiIcons = {
     NtdPrompt,
 };
 
-export { NtdBrain, NtdChatbot, NtdDataset, NtdDeepLearning, NtdGradient, NtdInference, NtdMagicWand, NtdModel, NtdNeuralNetwork, NtdPrompt, NtdRobot, NtdSparkle, NtdTensor, NtdTraining, NtdVoiceAssistant, aiIcons };
+export { NtdBrain, NtdChatbot, NtdDataset, NtdDeepLearning, NtdGradient, NtdInference, NtdMagicWand, NtdModel, NtdNeuralNetwork, NtdPrompt, NtdRobot, NtdSparkle, NtdStar4, NtdTensor, NtdTraining, NtdVoiceAssistant, aiIcons };

package/dist/esm/icons/business.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createIcon } from '../createIcon.js';
-import { paperIcon, within } from '../iconParts.js';
+import { within, paperIcon } from '../iconParts.js';
 
 // The band sits halfway down the case and is a cut through it: kept inside the case it meets the
 // sides flush (its round caps stuck out of both). A clasp hangs from its middle: low and wide, in

package/dist/esm/icons/files.js

@@ -1,6 +1,6 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createIcon } from '../createIcon.js';
-import { paperIcon, within } from '../iconParts.js';
+import { within, paperIcon } from '../iconParts.js';
 
 // NtdFile is the page every paper icon is drawn on (`paperIcon` in iconParts.tsx): the fold is
 // 8 now (7 before — the duotone's stroked fold looked the largest), secondary when the page is
@@ -187,13 +187,21 @@ const NtdSmartphone = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: primaryColor }), jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: "white", opacity: "0.1" }), jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18", stroke: secondaryColor, strokeWidth: "1.8" })] })),
     },
 });
+// NtdMonitor: the neck and the base are twice the stroke width in every variant but `outline`, and
+// the base is 30% wider — 13 across with its caps (it was 10); it sits at 21.5 so the heavier line
+// stays in the box. Vivid: the stand secondary (it had a fixed #3B82F6 neck).
+const MONITOR_SCREEN = { x: 2, y: 3, width: 20, height: 14, rx: 2 };
+/** Neck and base for a line twice the stroke width: base 9 long + 2 × 2 of cap = 13. */
+const MONITOR_STAND = 'M12 17v4.5M7.5 21.5h9';
+/** The outline's neck and base, at the stroke width: base 11 long + 2 × 1 of cap = 13. */
+const MONITOR_STAND_LINE = 'M12 17v4M6.5 21h11';
 const NtdMonitor = /* @__PURE__ */ createIcon({
     displayName: 'NtdMonitor',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: primaryColor }), jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: "white", opacity: "0.1" }), jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...MONITOR_SCREEN, fill: primaryColor }), jsx("path", { d: MONITOR_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...MONITOR_SCREEN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: MONITOR_STAND_LINE, stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...MONITOR_SCREEN, fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { ...MONITOR_SCREEN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: MONITOR_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...MONITOR_SCREEN, fill: primaryColor }), jsx("path", { d: MONITOR_STAND, stroke: secondaryColor, strokeWidth: strokeWidth * 2 })] })),
     },
 });
 // NtdCpu: filled, the body and its pins primary and the die in the accent colour (the body was a
@@ -289,13 +297,22 @@ const NtdCreditCard = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...CARD_BODY, fill: primaryColor }), jsx("rect", { ...CARD_BODY, fill: "white", opacity: "0.1" }), within(uid, 'stripe', jsx("rect", { ...CARD_BODY }), jsx("rect", { ...CARD_STRIPE, fill: "black", opacity: "0.35" })), jsx("rect", { ...CARD_SIGNATURE, fill: accentColor, opacity: accentOpacity }), jsx("rect", { ...CARD_CVV, fill: accentColor, opacity: accentOpacity })] })),
     },
 });
+// NtdPieChart: filled, two sectors of one pie (r 10) pulled 0.7 apart along the small one's
+// diagonal — a gap between them. The larger is the three-quarter sector from the centre; it was a
+// segment cut off by a chord, which read as an odd shape. The outline keeps its open arc and the
+// slice. Duotone, fills only: the larger sector secondary, the slice primary; vivid the other way.
+const PIE_REST = 'M11.3 12.7V2.7A10 10 0 1 0 21.3 12.7Z';
+const PIE_SLICE = 'M12.7 11.3V1.3A10 10 0 0 1 22.7 11.3Z';
+function pieFilled(rest, slice) {
+    return (jsxs(Fragment, { children: [jsx("path", { d: PIE_REST, fill: rest }), jsx("path", { d: PIE_SLICE, fill: slice })] }));
+}
 const NtdPieChart = /* @__PURE__ */ createIcon({
     displayName: 'NtdPieChart',
     paths: {
-        solid: ({ primaryColor, secondaryColor: _secondaryColor, secondaryOpacity: _secondaryOpacity, strokeWidth, }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: primaryColor, opacity: "0.3", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", fill: primaryColor })] })),
+        solid: ({ primaryColor }) => pieFilled(primaryColor, primaryColor),
         outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: secondaryColor, opacity: secondaryOpacity, stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", fill: primaryColor, stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: primaryColor, opacity: "0.3", stroke: primaryColor, strokeWidth: "2" }), jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: "white", opacity: "0.08" }), jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", fill: secondaryColor })] })),
+        duotone: ({ primaryColor, secondaryColor }) => pieFilled(secondaryColor, primaryColor),
+        vivid: ({ primaryColor, secondaryColor }) => pieFilled(primaryColor, secondaryColor),
     },
 });
 const NtdBarChart = /* @__PURE__ */ createIcon({

package/dist/esm/icons/index.js

@@ -1,14 +1,14 @@
 export { NtdArrowDown, NtdArrowLeft, NtdArrowRight, NtdArrowUp, NtdChevronDown, NtdChevronLeft, NtdChevronRight, NtdChevronUp, NtdClose, NtdExternalLink, NtdMenu, NtdMoreHorizontal, NtdMoreVertical, NtdRefresh } from './navigation.js';
 export { NtdCheck, NtdClipboard, NtdCopy, NtdDownload, NtdEdit, NtdEditDetail, NtdFilter, NtdGroup, NtdLink, NtdLock, NtdLogIn, NtdLogOut, NtdMinus, NtdPlus, NtdPrint, NtdRedo, NtdReply, NtdSave, NtdSearch, NtdSettings, NtdShare, NtdSort, NtdTrash, NtdUndo, NtdUngroup, NtdUnlock, NtdUpload, NtdZoomIn, NtdZoomOut } from './actions.js';
 export { NtdAdmin, NtdBackspace, NtdBell, NtdBookmark, NtdCalendar, NtdClock, NtdCursor, NtdError, NtdEye, NtdEyeOff, NtdFlag, NtdGlobe, NtdHeart, NtdHelp, NtdHome, NtdHourglass, NtdInfo, NtdMap, NtdMoon, NtdPin, NtdShield, NtdStar, NtdSuccess, NtdSun, NtdTag, NtdThumbDown, NtdThumbUp, NtdUser, NtdUsers, NtdWarning, NtdWireframe } from './ui.js';
-export { NtdBiodegradable, NtdCarbonFootprint, NtdCo2, NtdCompost, NtdEcoFriendly, NtdEvCharger, NtdHydropower, NtdNetZero, NtdOrganic, NtdPlantTree, NtdRecycle, NtdSolarPanel, NtdTrashSort, NtdWildlife, NtdWindTurbine, sustainabilityIcons } from './sustainability.js';
+export { NtdBiodegradable, NtdCarbonFootprint, NtdCo2, NtdCompost, NtdEcoFriendly, NtdEvCharger, NtdNetZero, NtdOrganic, NtdPlantTree, NtdRecycle, NtdSolarPanel, NtdTrashSort, NtdWildlife, NtdWindTurbine, sustainabilityIcons } from './sustainability.js';
 export { NtdAccessibility, NtdAssistiveTech, NtdAudioDescription, NtdBlind, NtdBraille, NtdClosedCaptions, NtdDeaf, NtdDyslexia, NtdEasyRead, NtdHearingAid, NtdScreenReader, NtdSignLanguage, NtdWheelchair, accessibilityIcons } from './accessibility.js';
 export { NtdAudit, NtdCcpa, NtdCertified, NtdCompliance, NtdContract, NtdCookieConsent, NtdCopyright, NtdGdpr, NtdLegalDocument, NtdPatent, NtdPrivacyPolicy, NtdTermsOfService, NtdTrademark, legalIcons } from './legal.js';
 export { NtdBluetooth, NtdBrush, NtdCamera, NtdChat, NtdImage, NtdInbox, NtdMail, NtdMicrophone, NtdMicrophoneOff, NtdMusic, NtdNotification, NtdPalette, NtdPause, NtdPenTool, NtdPhone, NtdPlay, NtdSend, NtdSkipBack, NtdSkipForward, NtdSpline, NtdStop, NtdVideo, NtdVolume, NtdVolumeMute, NtdWifi } from './media.js';
 export { NtdActivity, NtdArchive, NtdAward, NtdBarChart, NtdCart, NtdCloud, NtdCloudDownload, NtdCloudUpload, NtdCode, NtdCoffee, NtdCpu, NtdCreditCard, NtdDatabase, NtdFile, NtdFileText, NtdFolder, NtdFolderOpen, NtdGit, NtdGrid, NtdKey, NtdLayers, NtdList, NtdMonitor, NtdPackage, NtdPieChart, NtdShoppingCart, NtdSmartphone, NtdTable, NtdTarget, NtdTerminal, NtdTruck } from './files.js';
 export { NtdCrown, NtdDice, NtdDumpsterFire, NtdGamepadOldschool, NtdGhost, NtdLightning, NtdPartyPopper, NtdPuzzle, NtdRocket, NtdSad, NtdSkull, NtdSmile, NtdSmiley, NtdTrophy, NtdZap } from './fun.js';
-export { NtdAnchor, NtdBug, NtdCompass, NtdDroplet, NtdFeather, NtdFire, NtdFlower, NtdLeaf, NtdMountain, NtdRain, NtdSnow, NtdSnowflake, NtdSunrise, NtdSunset, NtdThermometer, NtdThunderstorm, NtdTree, NtdUmbrella, NtdWave, NtdWind } from './weather.js';
-export { NtdAngleBisector, NtdArrowDownCircle, NtdArrowLeftCircle, NtdArrowRightCircle, NtdArrowUpCircle, NtdCircle, NtdCornerDownLeft, NtdCornerDownRight, NtdCornerUpLeft, NtdCornerUpRight, NtdCross, NtdDiamond, NtdHexagon, NtdMaximize, NtdMidpoint, NtdMinimize, NtdMove, NtdOctagon, NtdParallel, NtdPentagon, NtdPerpendicular, NtdPoint, NtdRepeat, NtdSegment, NtdShuffle, NtdSquare, NtdStar4, NtdTriangle } from './shapes.js';
+export { NtdAnchor, NtdBug, NtdCompass, NtdDroplet, NtdFeather, NtdFire, NtdFlower, NtdHydropower, NtdLeaf, NtdMountain, NtdRain, NtdSnow, NtdSnowflake, NtdSunrise, NtdSunset, NtdThermometer, NtdThunderstorm, NtdTree, NtdUmbrella, NtdWave, NtdWind } from './weather.js';
+export { NtdAngleBisector, NtdArrowDownCircle, NtdArrowLeftCircle, NtdArrowRightCircle, NtdArrowUpCircle, NtdCircle, NtdCornerDownLeft, NtdCornerDownRight, NtdCornerUpLeft, NtdCornerUpRight, NtdCross, NtdDiamond, NtdHexagon, NtdMaximize, NtdMidpoint, NtdMinimize, NtdMove, NtdOctagon, NtdParallel, NtdPentagon, NtdPerpendicular, NtdPoint, NtdRepeat, NtdSegment, NtdShuffle, NtdSquare, NtdTriangle } from './shapes.js';
 export { NtdBank, NtdBarcode, NtdBriefcase, NtdCalculator, NtdClipboardCheck, NtdCoins, NtdDollar, NtdInvoice, NtdInvoiceDoc, NtdKanban, NtdMilestone, NtdPercent, NtdPiggyBank, NtdPresentation, NtdReceipt, NtdStore, NtdTrendDown, NtdTrendUp, NtdWallet } from './business.js';
 export { NtdAtSign, NtdBellRing, NtdBubble, NtdMegaphone, NtdPhoneOff, NtdQrCode, NtdThumbsDown, NtdThumbsUp } from './social.js';
 export { NtdAIBrain, NtdAstroLogo, NtdBattery, NtdBlueprint, NtdBrackets, NtdBugDev, NtdBunLogo, NtdComponent, NtdDataMesh, NtdDenoLogo, NtdDeploy, NtdFeatureFlag, NtdFlow, NtdForge, NtdGateway, NtdGitBranch, NtdGitCommit, NtdGitMerge, NtdHash, NtdNeural, NtdNextJsLogo, NtdNodes, NtdPipeline, NtdPrototype, NtdQwikLogo, NtdServer, NtdSlash, NtdSolidJsLogo, NtdSvelteLogo, NtdTauriLogo, NtdViteLogo } from './devtech.js';
@@ -19,7 +19,7 @@ export { NtdDoorbell, NtdMotionSensor, NtdRouter, NtdSmartBulb, NtdSmartCamera,
 export { NtdApple, NtdBandaid, NtdCake, NtdDna, NtdEgg, NtdGlass, NtdHamburger, NtdHeartPulse, NtdPill, NtdPizza, NtdStethoscope, NtdSyringe, NtdWeight } from './health.js';
 export { NtdNiceToDev, NtdOmniVerk, NtdOmniVerkAnimated, NtdOmniVerkBadge, NtdOmniVerkLogo, NtdOmniVerkSpinner, NtdOmniVerkWatermark } from './brand.js';
 export { NtdDice as NtdDiceGaming, NtdDiscord, NtdGamepad, NtdGamepadController, NtdHealthBar, NtdJoystick, NtdLeaderboard, NtdPotion, NtdShield as NtdShieldGaming, NtdStar as NtdStarGaming, NtdSword, NtdTrophy as NtdTrophyGaming, NtdTwitch, NtdVrHeadset, NtdXpBar, NtdYoutubeLive, gamingIcons } from './gaming.js';
-export { NtdVoiceAssistant as NtdAIAssistant, NtdBrain, NtdChatbot, NtdDataset, NtdDeepLearning, NtdGradient, NtdInference, NtdMagicWand, NtdModel, NtdNeuralNetwork, NtdPrompt, NtdRobot, NtdSparkle, NtdTensor, NtdTraining, aiIcons } from './ai.js';
+export { NtdVoiceAssistant as NtdAIAssistant, NtdBrain, NtdChatbot, NtdDataset, NtdDeepLearning, NtdGradient, NtdInference, NtdMagicWand, NtdModel, NtdNeuralNetwork, NtdPrompt, NtdRobot, NtdSparkle, NtdStar4, NtdTensor, NtdTraining, aiIcons } from './ai.js';
 export { NtdBackpack, NtdBook, NtdBookBookmark, NtdCalculator as NtdCalculatorEdu, NtdCertificate, NtdDiploma, NtdExam, NtdFlashcard, NtdGraduationCap, NtdNotebook, NtdOnlineCourse, NtdOpenBook, NtdPen, NtdPencil, NtdQuiz, NtdSchool, NtdUniversity, NtdWebinar, educationIcons } from './education.js';
 export { NtdAtom, NtdBeaker, NtdDna as NtdDnaScience, NtdExperiment, NtdFlask, NtdHypothesis, NtdMagnet, NtdMicroscope, NtdMolecule, NtdPeriodictable, NtdPetriDish, NtdPlanet, NtdResearch, NtdRocket as NtdRocketScience, NtdTelescope, NtdTestTube, scienceIcons } from './science.js';
 export { NtdApartment, NtdBathroom, NtdBedroom, NtdCondo, NtdFloorPlan, NtdForRent, NtdForSale, NtdGarage, NtdHouse as NtdHouseRealEstate, NtdKey as NtdKeyRealEstate, NtdMortgage, NtdOfficeBuilding, NtdPool, NtdSold, NtdSquareMeters, NtdVilla, NtdWarehouse, realestateIcons } from './realestate.js';

package/dist/esm/icons/media.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createIcon } from '../createIcon.js';
 import { within } from '../iconParts.js';
 

package/dist/esm/icons/shapes.js

@@ -65,6 +65,8 @@ const TRIANGLE_LINE = 'M12 4.24L20.38 21H3.62Z';
 const TRIANGLE_ROUND = 'M9.76 6.47A2.5 2.5 0 0 1 14.24 6.47L20.19 18.38A2.5 2.5 0 0 1 17.95 22L6.05 22A2.5 2.5 0 0 1 3.81 18.38Z';
 const NtdTriangle = /* @__PURE__ */ createIcon({
     displayName: 'NtdTriangle',
+    // text children centre on the centroid, low in the box (stacking, 1.3.5)
+    textCenter: [12, 15.3],
     paths: {
         solid: ({ primaryColor }) => jsx("polygon", { points: "12,2 22,22 2,22", fill: primaryColor }),
         rounded: ({ primaryColor }) => jsx("path", { d: TRIANGLE_ROUND, fill: primaryColor }),
@@ -124,15 +126,6 @@ const NtdCross = /* @__PURE__ */ createIcon({
         rounded: ({ primaryColor }) => (jsx("path", { d: "M10.5 2h3a1.5 1.5 0 011.5 1.5V8a1 1 0 001 1h4.5a1.5 1.5 0 011.5 1.5v3a1.5 1.5 0 01-1.5 1.5H16a1 1 0 00-1 1v4.5a1.5 1.5 0 01-1.5 1.5h-3A1.5 1.5 0 019 20.5V16a1 1 0 00-1-1H3.5A1.5 1.5 0 012 13.5v-3A1.5 1.5 0 013.5 9H8a1 1 0 001-1V3.5A1.5 1.5 0 0110.5 2z", fill: primaryColor })),
     },
 });
-const NtdStar4 = /* @__PURE__ */ createIcon({
-    displayName: 'NtdStar4',
-    paths: {
-        solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsx("path", { d: "M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z", fill: primaryColor })),
-        outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z", fill: primaryColor }), jsx("path", { d: "M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z", fill: "white", opacity: "0.1" })] })),
-    },
-});
 // The four corner arrows: the tail's level run sits at the height of the arrowhead's tip, so the
 // two meet (it ran 2 units off the tip and the head looked stuck on beside the tail). It stops 2
 // short of the tip: with the square caps of `sharp` it stuck out of the point. The filled variants
@@ -330,4 +323,4 @@ const NtdAngleBisector = /* @__PURE__ */ createIcon({
     },
 });
 
-export { NtdAngleBisector, NtdArrowDownCircle, NtdArrowLeftCircle, NtdArrowRightCircle, NtdArrowUpCircle, NtdCircle, NtdCornerDownLeft, NtdCornerDownRight, NtdCornerUpLeft, NtdCornerUpRight, NtdCross, NtdDiamond, NtdHexagon, NtdMaximize, NtdMidpoint, NtdMinimize, NtdMove, NtdOctagon, NtdParallel, NtdPentagon, NtdPerpendicular, NtdPoint, NtdRepeat, NtdSegment, NtdShuffle, NtdSquare, NtdStar4, NtdTriangle };
+export { NtdAngleBisector, NtdArrowDownCircle, NtdArrowLeftCircle, NtdArrowRightCircle, NtdArrowUpCircle, NtdCircle, NtdCornerDownLeft, NtdCornerDownRight, NtdCornerUpLeft, NtdCornerUpRight, NtdCross, NtdDiamond, NtdHexagon, NtdMaximize, NtdMidpoint, NtdMinimize, NtdMove, NtdOctagon, NtdParallel, NtdPentagon, NtdPerpendicular, NtdPoint, NtdRepeat, NtdSegment, NtdShuffle, NtdSquare, NtdTriangle };