@nice2dev/icons 1.3.4 → 1.3.5

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @nice2dev/icons — Changelog
 
+## 1.3.5
+
+### Patch Changes
+
+- 2b49cd7: Icon browser feedback, round 36:
+
+  - `NtdMonitor`: neck and base twice the stroke width in every variant but `outline`; the base
+    30% wider. Vivid's stand is secondary (it had a fixed `#3B82F6`).
+  - `NtdPieChart`: the larger part is a proper three-quarter sector from the centre (it was a segment
+    cut off by a chord). The two sectors have a gap between them; duotone uses fills only.
+  - `NtdCopy`:
+    - the front, filled sheet at the top right;
+    - the back sheet's line stops 1 short of it at any stroke width;
+    - `sharp` draws the back sheet with square corners;
+    - duotone uses fills only.
+  - `NtdStar4` is now a deprecated alias of `NtdSparkle`, and `NtdHydropower` of `NtdDroplet`. Both
+    are duplicates; the old names still work.
+
+- 16d420b: Stack icons by nesting them, and build stacks in NiceIconStacker:
+
+  - An icon draws its children in its own SVG:
+    `<NtdSquare><NtdStar stackAlign="center">1</NtdStar></NtdSquare>`.
+    - **Child icons** sit where `stackAlign` says: `center`, an edge or a corner. `stackSize` sets
+      their share of the parent (default 0.6 centred, 0.5 elsewhere).
+    - **Text children** are centred on the icon's visual centre. `NtdStar`, `NtdHeart`, `NtdShield`
+      and `NtdTriangle` have their own centre (`textCenter` in `createIcon`). `textColor` and
+      `textSize` override the text's colour and size.
+    - **Colours** follow the parent: a filled parent cuts centred and edge content out (the parent's
+      accent); a corner badge keeps the parent's colours on an accent-coloured gap. Colours given on
+      a child win.
+  - `NiceIconStacker`:
+    - lists the base icon and the icons stacked in it, each with its position, size and text;
+    - adds the `current` icon, removes one or clears the stack;
+    - previews the stack at three sizes and writes its JSX (`niceIconStackCode`).
+  - New translation keys `iconStacker.*` (en, pl, de, fr, es, uk).
+
 ## 1.3.4
 
 ### Patch Changes

package/README.md

@@ -205,6 +205,37 @@ See [Full Animation Catalog](#full-animation-catalog) for the complete list.
 
 ---
 
+### Stacking icons
+
+Nest icons to stack them in one SVG. A child icon sits where its `stackAlign` says, and text is
+centred on the icon:
+
+```tsx
+<NtdSquare variant="solid">
+  <NtdStar stackAlign="center">1</NtdStar>
+</NtdSquare>
+
+<NtdFolder>
+  <NtdPlus stackAlign="top-right" />
+</NtdFolder>
+
+<NtdCircle>42</NtdCircle>
+```
+
+- **`stackAlign`:** `center` (default), `top`, `bottom`, `left`, `right`, `top-left`,
+  `top-right`, `bottom-left`, `bottom-right`.
+- **`stackSize`:** the child's share of its parent. Default `0.6` centred, `0.5` elsewhere.
+- **Colours** follow the parent unless the child sets its own:
+  - In the centre or at an edge, a filled parent cuts the content out. The child takes the
+    parent's accent and its text the parent's primary. On `outline` / `wireframe` everything stays
+    in primary.
+  - A corner badge keeps the parent's colours and sits on an accent-coloured gap.
+- **Text:** `textColor` and `textSize` override the text's colour and size.
+- **Builder:** `NiceIconStacker` builds a stack interactively and writes the JSX
+  (`niceIconStackCode`).
+
+---
+
 ### Gradient Fills
 
 Apply gradient fills using the `gradient` prop with one of 12 built-in presets:

package/dist/cjs/NiceIconStacker.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiCore = require('@nice2dev/ui-core');
+var React = require('react');
+var actions = require('./icons/actions.js');
+var stacking = require('./stacking.js');
+
+const ALIGNS = [
+    'center',
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'top-left',
+    'top-right',
+    'bottom-left',
+    'bottom-right',
+];
+const PREVIEW_SIZES = [96, 48, 24];
+const NO_LAYERS = [];
+/** The stack as JSX, the base wrapping its layers. */
+function niceIconStackCode(layers) {
+    const [base, ...rest] = layers;
+    if (!base) {
+        return '';
+    }
+    const baseAttrs = base.variant ? ` variant="${base.variant}"` : '';
+    if (rest.length === 0) {
+        return base.text
+            ? `<${base.icon}${baseAttrs}>${base.text}</${base.icon}>`
+            : `<${base.icon}${baseAttrs} />`;
+    }
+    const lines = rest.map((l) => {
+        var _a;
+        const attrs = [
+            `stackAlign="${(_a = l.align) !== null && _a !== void 0 ? _a : 'center'}"`,
+            l.size !== undefined ? `stackSize={${l.size}}` : '',
+            l.variant && l.variant !== base.variant ? `variant="${l.variant}"` : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return l.text ? `  <${l.icon} ${attrs}>${l.text}</${l.icon}>` : `  <${l.icon} ${attrs} />`;
+    });
+    return [
+        `<${base.icon}${baseAttrs}>`,
+        ...(base.text ? [`  ${base.text}`] : []),
+        ...lines,
+        `</${base.icon}>`,
+    ].join('\n');
+}
+/**
+ * NiceIconStacker (1.3.5) — builds an icon stack: the base icon and the icons stacked in it, each
+ * with its position, size and text, shown live at three sizes and as the JSX that draws it. Icons
+ * come in through `current` (the "add" button) and leave one by one or all at once.
+ */
+function NiceIconStacker({ icons, layers: layersProp, defaultLayers, onLayersChange, current, previewProps, className, }) {
+    var _a;
+    const { t } = uiCore.useNiceTranslation();
+    const [layers, setLayers] = uiCore.useControllableState({
+        value: layersProp,
+        defaultValue: defaultLayers,
+        fallbackValue: NO_LAYERS,
+        onChange: onLayersChange,
+        componentName: 'NiceIconStacker',
+    });
+    const nextId = React.useRef(0);
+    const [copied, setCopied] = React.useState(false);
+    const resolve = React.useCallback((name) => (typeof icons === 'function' ? icons(name) : icons[name]), [icons]);
+    const [base, ...rest] = layers;
+    const code = React.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 layer = {
+            id: `${current.icon}-${nextId.current}`,
+            icon: current.icon,
+            variant: current.variant,
+        };
+        setLayers((prev) => [...prev, layer]);
+    };
+    const remove = (id) => setLayers((prev) => prev.filter((l) => l.id !== id));
+    const clear = () => setLayers(NO_LAYERS);
+    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 renderStack = (size) => {
+        var _a;
+        const Base = base ? resolve(base.icon) : undefined;
+        if (!base || !Base) {
+            return null;
+        }
+        return (jsxRuntime.jsxs(Base, { ...previewProps, variant: (_a = base.variant) !== null && _a !== void 0 ? _a : previewProps === null || previewProps === void 0 ? void 0 : previewProps.variant, size: size, title: base.icon, children: [base.text, rest.map((l) => {
+                    var _a;
+                    const Layer = resolve(l.icon);
+                    return Layer ? (jsxRuntime.jsx(Layer, { stackAlign: (_a = l.align) !== null && _a !== void 0 ? _a : 'center', stackSize: l.size, variant: l.variant !== base.variant ? l.variant : undefined, children: l.text }, l.id)) : null;
+                })] }));
+    };
+    return (jsxRuntime.jsxs("div", { className: ['nice-icon-stacker', className].filter(Boolean).join(' '), children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__toolbar", children: [jsxRuntime.jsxs("button", { type: "button", onClick: add, disabled: !current, children: [jsxRuntime.jsx(actions.NtdPlus, { size: 14 }), ' ', t('iconStacker.add', 'Add {icon} to the stack').replace('{icon}', (_a = current === null || current === void 0 ? void 0 : current.icon) !== null && _a !== void 0 ? _a : '')] }), jsxRuntime.jsxs("button", { type: "button", onClick: clear, disabled: layers.length === 0, children: [jsxRuntime.jsx(actions.NtdTrash, { size: 14 }), " ", t('iconStacker.clear', 'Clear the stack')] })] }), layers.length === 0 ? (jsxRuntime.jsx("p", { className: "nice-icon-stacker__empty", children: t('iconStacker.empty', 'The stack is empty. Add an icon to start one.') })) : (jsxRuntime.jsxs("div", { className: "nice-icon-stacker__body", children: [jsxRuntime.jsx("div", { className: "nice-icon-stacker__preview", "aria-label": t('iconStacker.preview', 'Preview'), role: "group", children: PREVIEW_SIZES.map((s) => (jsxRuntime.jsxs("span", { className: "nice-icon-stacker__preview-cell", children: [renderStack(s), jsxRuntime.jsxs("small", { children: [s, "px"] })] }, s))) }), jsxRuntime.jsx("ol", { className: "nice-icon-stacker__layers", "aria-label": t('iconStacker.layers', 'Layers'), children: layers.map((l, i) => {
+                            var _a, _b, _c;
+                            const Icon = resolve(l.icon);
+                            const isBase = i === 0;
+                            const align = (_a = l.align) !== null && _a !== void 0 ? _a : 'center';
+                            const share = (_b = l.size) !== null && _b !== void 0 ? _b : stacking.defaultStackSize(align);
+                            return (jsxRuntime.jsxs("li", { className: "nice-icon-stacker__layer", children: [jsxRuntime.jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsxRuntime.jsx(Icon, { size: 24, variant: l.variant }) : null }), jsxRuntime.jsxs("span", { className: "nice-icon-stacker__layer-name", children: [l.icon, isBase && (jsxRuntime.jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') }))] }), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.align', 'Position') }), jsxRuntime.jsx("select", { value: align, onChange: (e) => update(l.id, { align: e.target.value }), children: ALIGNS.map((a) => (jsxRuntime.jsx("option", { value: a, children: a }, a))) })] })), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.size', 'Size') }), jsxRuntime.jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(l.id, { size: Number(e.target.value) }) }), jsxRuntime.jsxs("output", { children: [Math.round(share * 100), "%"] })] })), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.text', 'Text') }), jsxRuntime.jsx("input", { type: "text", value: (_c = l.text) !== null && _c !== void 0 ? _c : '', maxLength: 4, onChange: (e) => update(l.id, { text: e.target.value || undefined }) })] }), jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__remove", onClick: () => remove(l.id), "aria-label": t('iconStacker.remove', 'Remove {icon}').replace('{icon}', l.icon), title: t('iconStacker.remove', 'Remove {icon}').replace('{icon}', l.icon), children: jsxRuntime.jsx(actions.NtdTrash, { size: 14 }) })] }, l.id));
+                        }) }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__code", children: [jsxRuntime.jsx("pre", { children: code }), jsxRuntime.jsxs("button", { type: "button", onClick: copy, children: [copied ? jsxRuntime.jsx(actions.NtdCheck, { size: 14 }) : jsxRuntime.jsx(actions.NtdCopy, { size: 14 }), ' ', copied ? t('iconStacker.copied', 'Copied') : t('iconStacker.copy', 'Copy the code')] })] })] }))] }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    NiceIconStacker.displayName = 'NiceIconStacker';
+}
+
+exports.NiceIconStacker = NiceIconStacker;
+exports.niceIconStackCode = niceIconStackCode;

package/dist/cjs/client.js

@@ -2,6 +2,7 @@
 
 var animationControls = require('./animationControls.js');
 var NiceIconPicker = require('./NiceIconPicker.js');
+var NiceIconStacker = require('./NiceIconStacker.js');
 var NtdIconMorph = require('./NtdIconMorph.js');
 var NtdIconBadge = require('./NtdIconBadge.js');
 var smilAnimations = require('./smilAnimations.js');
@@ -18,6 +19,8 @@ exports.createHoverAnimation = animationControls.createHoverAnimation;
 exports.createVisibilityAnimation = animationControls.createVisibilityAnimation;
 exports.useAnimationSequence = animationControls.useAnimationSequence;
 exports.NiceIconPicker = NiceIconPicker.NiceIconPicker;
+exports.NiceIconStacker = NiceIconStacker.NiceIconStacker;
+exports.niceIconStackCode = NiceIconStacker.niceIconStackCode;
 exports.NtdIconMorph = NtdIconMorph.NtdIconMorph;
 exports.NtdMorphPair = NtdIconMorph.NtdMorphPair;
 exports.NtdPathMorph = NtdIconMorph.NtdPathMorph;

package/dist/cjs/createIcon.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var sharpen = require('./sharpen.js');
 var smilAnimations = require('./smilAnimations.js');
+var stacking = require('./stacking.js');
 var types = require('./types.js');
 
 /* ── Dark mode detection hook ───────────────────────── */
@@ -27,6 +28,7 @@ function subscribeColorScheme(callback) {
 function useColorScheme() {
     return React.useSyncExternalStore(subscribeColorScheme, getColorScheme, () => 'light');
 }
+const BOX_CENTER = [12, 12];
 /**
  * Factory function that creates a React icon component from SVG path renderers.
  *
@@ -113,10 +115,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 = React.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, textColor, textSize, title, className, style, ...rest }, ref) => {
         var _a, _b, _c, _d, _e, _f, _g;
         const resolvedSize = typeof size === 'number' ? size : ((_a = types.SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
         const gradId = React.useId();
@@ -225,7 +229,19 @@ function createIcon(options) {
                     : variant === 'wireframe'
                         ? sharpen.wireTree(renderer(renderProps), effectivePrimary)
                         : renderer(renderProps);
-        const iconContent = variant === 'mini' ? (jsxRuntime.jsx("g", { transform: `translate(${center.x} ${center.y}) scale(${sharpen.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 = stacking.renderStackChildren(children, {
+            variant,
+            primaryColor: effectivePrimary,
+            accentColor: resolvedAccent,
+            tileColor: gradient ? effectivePrimary : resolvedSecondary,
+            strokeWidth,
+            textCenter,
+            textColor,
+            textSize,
+        });
+        const drawn = stacked ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [rendered, stacked] })) : (rendered);
+        const iconContent = variant === 'mini' ? (jsxRuntime.jsx("g", { transform: `translate(${center.x} ${center.y}) scale(${sharpen.MINI_SCALE}) translate(${-center.x} ${-center.y})`, children: drawn })) : (drawn);
         return (jsxRuntime.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 && jsxRuntime.jsx("title", { children: title }), gradient && (jsxRuntime.jsx("defs", { children: renderGradientDef(gradId, gradient, gradientType, gradientAngle, gradientAnimation) })), is3d && jsxRuntime.jsx("defs", { children: render3dFilterDef(filterId) }), isCutout && (jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("mask", { id: maskId, children: [jsxRuntime.jsx("rect", { x: "0", y: "0", width: "24", height: "24", fill: "white" }), jsxRuntime.jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: paths.solid({
                                     ...renderProps,
                                     primaryColor: 'black',
@@ -238,6 +254,8 @@ function createIcon(options) {
                                 }) })] }) })), smilAnimation ? (needsSmilScaleWrapper ? (jsxRuntime.jsxs("g", { transform: `translate(${center.x}, ${center.y})`, filter: is3d ? `url(#${filterId})` : undefined, children: [jsxRuntime.jsx("g", { transform: `translate(-${center.x}, -${center.y})`, children: iconContent }), smilAnimationElements] })) : (jsxRuntime.jsxs("g", { filter: is3d ? `url(#${filterId})` : undefined, children: [iconContent, smilAnimationElements] }))) : is3d ? (jsxRuntime.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[stacking.NTD_ICON_MARK] = true;
     return Icon;
 }
 

package/dist/cjs/icons/actions.js

@@ -121,13 +121,34 @@ const NtdShare = /* @__PURE__ */ createIcon.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...COPY_FRONT, fill: front }), jsxRuntime.jsx("path", { d: copyBack(1 + strokeWidth / 2, square), stroke: back, strokeWidth: strokeWidth, fill: "none" })] }));
+}
 const NtdCopy = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdCopy',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: primaryColor }), jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "2", width: "13", height: "13", rx: "2.5", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5", fill: "white", opacity: "0.1" }), jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...COPY_FRONT, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: copyBack(1 + strokeWidth), stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        duotone: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...COPY_BACK, fill: secondaryColor }), jsxRuntime.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/cjs/icons/ai.js

@@ -132,6 +132,8 @@ const NtdSparkle = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 }), jsxRuntime.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.createIcon({
     displayName: 'NtdMagicWand',
     paths: {
@@ -184,6 +186,7 @@ exports.NtdNeuralNetwork = NtdNeuralNetwork;
 exports.NtdPrompt = NtdPrompt;
 exports.NtdRobot = NtdRobot;
 exports.NtdSparkle = NtdSparkle;
+exports.NtdStar4 = NtdStar4;
 exports.NtdTensor = NtdTensor;
 exports.NtdTraining = NtdTraining;
 exports.NtdVoiceAssistant = NtdVoiceAssistant;

package/dist/cjs/icons/files.js

@@ -189,13 +189,21 @@ const NtdSmartphone = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: "white", opacity: "0.1" }), jsxRuntime.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.createIcon({
     displayName: 'NtdMonitor',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: primaryColor }), jsxRuntime.jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: "white", opacity: "0.1" }), jsxRuntime.jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: secondaryColor, strokeWidth: "1.8" }), jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, fill: primaryColor }), jsxRuntime.jsx("path", { d: MONITOR_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: MONITOR_STAND_LINE, stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: MONITOR_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, fill: primaryColor }), jsxRuntime.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
@@ -291,13 +299,22 @@ const NtdCreditCard = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...CARD_BODY, fill: primaryColor }), jsxRuntime.jsx("rect", { ...CARD_BODY, fill: "white", opacity: "0.1" }), iconParts.within(uid, 'stripe', jsxRuntime.jsx("rect", { ...CARD_BODY }), jsxRuntime.jsx("rect", { ...CARD_STRIPE, fill: "black", opacity: "0.35" })), jsxRuntime.jsx("rect", { ...CARD_SIGNATURE, fill: accentColor, opacity: accentOpacity }), jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PIE_REST, fill: rest }), jsxRuntime.jsx("path", { d: PIE_SLICE, fill: slice })] }));
+}
 const NtdPieChart = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdPieChart',
     paths: {
-        solid: ({ primaryColor, secondaryColor: _secondaryColor, secondaryOpacity: _secondaryOpacity, strokeWidth, }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: primaryColor, opacity: "0.3", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", fill: primaryColor })] })),
+        solid: ({ primaryColor }) => pieFilled(primaryColor, primaryColor),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: secondaryColor, opacity: secondaryOpacity, stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", fill: primaryColor, stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: primaryColor, opacity: "0.3", stroke: primaryColor, strokeWidth: "2" }), jsxRuntime.jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", fill: "white", opacity: "0.08" }), jsxRuntime.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.createIcon({

package/dist/cjs/icons/index.js

@@ -113,7 +113,6 @@ exports.NtdCo2 = sustainability.NtdCo2;
 exports.NtdCompost = sustainability.NtdCompost;
 exports.NtdEcoFriendly = sustainability.NtdEcoFriendly;
 exports.NtdEvCharger = sustainability.NtdEvCharger;
-exports.NtdHydropower = sustainability.NtdHydropower;
 exports.NtdNetZero = sustainability.NtdNetZero;
 exports.NtdOrganic = sustainability.NtdOrganic;
 exports.NtdPlantTree = sustainability.NtdPlantTree;
@@ -229,6 +228,7 @@ exports.NtdDroplet = weather.NtdDroplet;
 exports.NtdFeather = weather.NtdFeather;
 exports.NtdFire = weather.NtdFire;
 exports.NtdFlower = weather.NtdFlower;
+exports.NtdHydropower = weather.NtdHydropower;
 exports.NtdLeaf = weather.NtdLeaf;
 exports.NtdMountain = weather.NtdMountain;
 exports.NtdRain = weather.NtdRain;
@@ -268,7 +268,6 @@ exports.NtdRepeat = shapes.NtdRepeat;
 exports.NtdSegment = shapes.NtdSegment;
 exports.NtdShuffle = shapes.NtdShuffle;
 exports.NtdSquare = shapes.NtdSquare;
-exports.NtdStar4 = shapes.NtdStar4;
 exports.NtdTriangle = shapes.NtdTriangle;
 exports.NtdBank = business.NtdBank;
 exports.NtdBarcode = business.NtdBarcode;
@@ -432,6 +431,7 @@ exports.NtdNeuralNetwork = ai.NtdNeuralNetwork;
 exports.NtdPrompt = ai.NtdPrompt;
 exports.NtdRobot = ai.NtdRobot;
 exports.NtdSparkle = ai.NtdSparkle;
+exports.NtdStar4 = ai.NtdStar4;
 exports.NtdTensor = ai.NtdTensor;
 exports.NtdTraining = ai.NtdTraining;
 exports.aiIcons = ai.aiIcons;

package/dist/cjs/icons/shapes.js

@@ -67,6 +67,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.createIcon({
     displayName: 'NtdTriangle',
+    // text children centre on the centroid, low in the box (stacking, 1.3.5)
+    textCenter: [12, 15.3],
     paths: {
         solid: ({ primaryColor }) => jsxRuntime.jsx("polygon", { points: "12,2 22,22 2,22", fill: primaryColor }),
         rounded: ({ primaryColor }) => jsxRuntime.jsx("path", { d: TRIANGLE_ROUND, fill: primaryColor }),
@@ -126,15 +128,6 @@ const NtdCross = /* @__PURE__ */ createIcon.createIcon({
         rounded: ({ primaryColor }) => (jsxRuntime.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.createIcon({
-    displayName: 'NtdStar4',
-    paths: {
-        solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 }), jsxRuntime.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 }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z", fill: primaryColor }), jsxRuntime.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
@@ -358,5 +351,4 @@ exports.NtdRepeat = NtdRepeat;
 exports.NtdSegment = NtdSegment;
 exports.NtdShuffle = NtdShuffle;
 exports.NtdSquare = NtdSquare;
-exports.NtdStar4 = NtdStar4;
 exports.NtdTriangle = NtdTriangle;

package/dist/cjs/icons/sustainability.js

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var createIcon = require('../createIcon.js');
+var weather = require('./weather.js');
 
 /* ────────────────────────────────────────────────────────────────────────────
    RECYCLING & WASTE
@@ -63,15 +64,6 @@ const NtdEvCharger = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "12", height: "18", rx: "2", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "4", y: "2", width: "12", height: "18", rx: "2", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("path", { d: "M8 8h4v4H8z", fill: "white" }), jsxRuntime.jsx("circle", { cx: "10", cy: "16", r: "1", fill: "white" }), jsxRuntime.jsx("path", { d: "M10 6v2M10 12v2M8 10h4", stroke: "white", strokeWidth: "1", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M16 10h2a2 2 0 012 2v4a2 2 0 01-2 2h-2", stroke: "white", strokeWidth: "1", strokeLinecap: "round" })] })),
     },
 });
-const NtdHydropower = /* @__PURE__ */ createIcon.createIcon({
-    displayName: 'NtdHydropower',
-    paths: {
-        solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 2c-4 4-6 7-6 10a6 6 0 1012 0c0-3-2-6-6-10z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M12 8v4l2-2M12 12l-2-2", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 2c-4 4-6 7-6 10a6 6 0 1012 0c0-3-2-6-6-10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M12 8v4l2-2M12 12l-2-2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 2c-4 4-6 7-6 10a6 6 0 1012 0c0-3-2-6-6-10z", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M12 2c-4 4-6 7-6 10a6 6 0 1012 0c0-3-2-6-6-10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M12 8v4l2-2M12 12l-2-2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 2c-4 4-6 7-6 10a6 6 0 1012 0c0-3-2-6-6-10z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M12 2c-4 4-6 7-6 10a6 6 0 1012 0c0-3-2-6-6-10z", fill: "white", opacity: "0.1" }), jsxRuntime.jsx("path", { d: "M12 8v4l2-2M12 12l-2-2", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })] })),
-    },
-});
 /* ────────────────────────────────────────────────────────────────────────────
    CARBON & CLIMATE
 ───────────────────────────────────────────────────────────────────────────── */
@@ -163,7 +155,7 @@ const sustainabilityIcons = {
     NtdSolarPanel,
     NtdWindTurbine,
     NtdEvCharger,
-    NtdHydropower,
+    NtdHydropower: weather.NtdHydropower,
     NtdCarbonFootprint,
     NtdCo2,
     NtdNetZero,
@@ -180,7 +172,6 @@ exports.NtdCo2 = NtdCo2;
 exports.NtdCompost = NtdCompost;
 exports.NtdEcoFriendly = NtdEcoFriendly;
 exports.NtdEvCharger = NtdEvCharger;
-exports.NtdHydropower = NtdHydropower;
 exports.NtdNetZero = NtdNetZero;
 exports.NtdOrganic = NtdOrganic;
 exports.NtdPlantTree = NtdPlantTree;

package/dist/cjs/icons/ui.js

@@ -64,6 +64,8 @@ const NtdUsers = /* @__PURE__ */ createIcon.createIcon({
 const HEART = 'M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z';
 const NtdHeart = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdHeart',
+    // text children centre on the middle of the lobes and the point (stacking, 1.3.5)
+    textCenter: [12, 11.2],
     paths: {
         solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsxRuntime.jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
@@ -73,6 +75,8 @@ const NtdHeart = /* @__PURE__ */ createIcon.createIcon({
 });
 const NtdStar = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdStar',
+    // text children centre on the middle of the body, below the box centre (stacking, 1.3.5)
+    textCenter: [12, 12.6],
     paths: {
         solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsxRuntime.jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
@@ -276,6 +280,8 @@ const NtdThumbDown = /* @__PURE__ */ createIcon.createIcon({
 });
 const NtdShield = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdShield',
+    // text children centre on the wide upper part of the shield (stacking, 1.3.5)
+    textCenter: [12, 11],
     paths: {
         solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsxRuntime.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", fill: primaryColor })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),

package/dist/cjs/icons/weather.js

@@ -74,6 +74,8 @@ const NtdDroplet = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 2.5C13.1 6.2 17.6 9.4 17.6 14.4a5.6 6.2 0 1 1-11.2 0C6.4 9.4 10.9 6.2 12 2.5z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M12 2.5C13.1 6.2 17.6 9.4 17.6 14.4a5.6 6.2 0 1 1-11.2 0C6.4 9.4 10.9 6.2 12 2.5z", fill: "white", opacity: "0.1" })] })),
     },
 });
+/** @deprecated The same drop as {@link NtdDroplet} — use that. */
+const NtdHydropower = NtdDroplet;
 const NtdThermometer = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdThermometer',
     paths: {
@@ -215,6 +217,7 @@ exports.NtdDroplet = NtdDroplet;
 exports.NtdFeather = NtdFeather;
 exports.NtdFire = NtdFire;
 exports.NtdFlower = NtdFlower;
+exports.NtdHydropower = NtdHydropower;
 exports.NtdLeaf = NtdLeaf;
 exports.NtdMountain = NtdMountain;
 exports.NtdRain = NtdRain;

package/dist/cjs/index.js

@@ -4,6 +4,7 @@ var types = require('./types.js');
 var createIcon = require('./createIcon.js');
 var smilAnimations = require('./smilAnimations.js');
 var NiceIconPicker = require('./NiceIconPicker.js');
+var NiceIconStacker = require('./NiceIconStacker.js');
 var animationControls = require('./animationControls.js');
 var figmaExport = require('./figmaExport.js');
 var navigation = require('./icons/navigation.js');
@@ -68,6 +69,8 @@ exports.createSmilAnimationDef = smilAnimations.createSmilAnimationDef;
 exports.generateSmilAnimation = smilAnimations.generateSmilAnimation;
 exports.isSmilSupported = smilAnimations.isSmilSupported;
 exports.NiceIconPicker = NiceIconPicker.NiceIconPicker;
+exports.NiceIconStacker = NiceIconStacker.NiceIconStacker;
+exports.niceIconStackCode = NiceIconStacker.niceIconStackCode;
 exports.AnimationController = animationControls.AnimationController;
 exports.InteractiveIcon = animationControls.InteractiveIcon;
 exports.NiceAnimationController = animationControls.AnimationController;
@@ -167,7 +170,6 @@ exports.NtdCo2 = sustainability.NtdCo2;
 exports.NtdCompost = sustainability.NtdCompost;
 exports.NtdEcoFriendly = sustainability.NtdEcoFriendly;
 exports.NtdEvCharger = sustainability.NtdEvCharger;
-exports.NtdHydropower = sustainability.NtdHydropower;
 exports.NtdNetZero = sustainability.NtdNetZero;
 exports.NtdOrganic = sustainability.NtdOrganic;
 exports.NtdPlantTree = sustainability.NtdPlantTree;
@@ -283,6 +285,7 @@ exports.NtdDroplet = weather.NtdDroplet;
 exports.NtdFeather = weather.NtdFeather;
 exports.NtdFire = weather.NtdFire;
 exports.NtdFlower = weather.NtdFlower;
+exports.NtdHydropower = weather.NtdHydropower;
 exports.NtdLeaf = weather.NtdLeaf;
 exports.NtdMountain = weather.NtdMountain;
 exports.NtdRain = weather.NtdRain;
@@ -322,7 +325,6 @@ exports.NtdRepeat = shapes.NtdRepeat;
 exports.NtdSegment = shapes.NtdSegment;
 exports.NtdShuffle = shapes.NtdShuffle;
 exports.NtdSquare = shapes.NtdSquare;
-exports.NtdStar4 = shapes.NtdStar4;
 exports.NtdTriangle = shapes.NtdTriangle;
 exports.NtdBank = business.NtdBank;
 exports.NtdBarcode = business.NtdBarcode;
@@ -486,6 +488,7 @@ exports.NtdNeuralNetwork = ai.NtdNeuralNetwork;
 exports.NtdPrompt = ai.NtdPrompt;
 exports.NtdRobot = ai.NtdRobot;
 exports.NtdSparkle = ai.NtdSparkle;
+exports.NtdStar4 = ai.NtdStar4;
 exports.NtdTensor = ai.NtdTensor;
 exports.NtdTraining = ai.NtdTraining;
 exports.aiIcons = ai.aiIcons;