@nice2dev/icons 1.3.3 → 1.3.5

package/CHANGELOG.md

@@ -1,5 +1,80 @@
 # @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
+
+- 15f3a18: Icon browser feedback, round 34:
+
+  - Twice the stroke width in every variant but `outline`:
+    - `NtdMusic`: the stems move left so they still end flush with the note heads.
+    - `NtdClock`: the hands.
+    - `NtdShare`: the links.
+    - `NtdRepeat`: shafts and heads, redrawn tighter so they stay in the box; the shafts stop
+      short of the heads' points, so nothing sticks out in `sharp`.
+  - `NtdRefresh`: smaller heads, each pointing at the start of the other arrow's tail with a
+    clear gap.
+  - `NtdWifi`: the inner arc sits further from the dot, the arcs closer together.
+  - `NtdList`: dots a quarter smaller.
+  - Colours:
+    - `NtdHeart`: vivid outlines the split heart in the accent colour instead of an accent seam.
+    - `NtdBellRing`: the ring marks are primary when filled, accent in vivid.
+    - `NtdBriefcase`: the clasp is in the accent colour with a primary lock square.
+    - `NtdSmartphone`: filled, a primary frame round an accent screen with a primary button.
+  - Shapes:
+    - `NtdBook`: a notch in the right edge beside the pages, leaving a narrow strip of cover.
+    - `NtdNotebook`: a wider, shorter cover.
+    - `NtdAward`: the ribbon's inside between the two earlier sizes.
+    - `NtdApartment`: a thin primary sill under the door when filled.
+    - `NtdBus`: a front view with a big windscreen, the driver, headlights and rectangular wheels.
+    - `NtdBrush`: redrawn as a paintbrush — handle, ferrule and pointed bristles.
+  - Hardcoded colours (`#3B82F6`, white) are gone from `NtdShare` and `NtdRepeat`.
+
+- 4fae5a4: `NtdHourglass` and the `turn` animation:
+
+  - `NtdHourglass`: two plates and a curved glass, the sand running from the top bulb through a
+    thread onto a pile in the bottom one. `NiceIcon` resolves it as `hourglass`.
+  - `animation="turn"` works on every icon: it turns the icon upside down, holds, turns it back
+    and holds again. On `NtdHourglass` the sand pours during the holds, in step with the turns.
+  - `animationDuration` now also sets the `--ntd-anim-duration` CSS variable, so parts an icon
+    animates inside itself (the hourglass sand) keep the same duration.
+
 ## 1.3.3
 
 ### Patch Changes

package/README.md

@@ -193,10 +193,49 @@ Apply an animation by name:
 
 Each animation maps to a CSS class `.ntd-anim-{name}` defined in `animations.css` (auto-imported).
 
+`turn` turns any icon upside down, holds, turns it back and holds again. On `NtdHourglass` the
+sand pours while it holds, in step with the turns at any `animationDuration`:
+
+```tsx
+<NtdHourglass animation="turn" />
+<NtdHourglass animation="turn" animationDuration="6s" />
+```
+
 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:
@@ -406,9 +445,9 @@ Properties passed to every path renderer (pre-resolved from user props):
 
 `NtdSearch` · `NtdEdit` · `NtdTrash` · `NtdSave` · `NtdDownload` · `NtdUpload` · `NtdShare` · `NtdCopy` · `NtdClipboard` · `NtdPlus` · `NtdMinus` · `NtdCheck` · `NtdFilter` · `NtdSort` · `NtdPrint` · `NtdZoomIn` · `NtdZoomOut` · `NtdUndo` · `NtdRedo` · `NtdLink` · `NtdSettings` · `NtdLogIn` · `NtdLogOut` · `NtdLock` · `NtdUnlock`
 
-### UI & Status (26 icons)
+### UI & Status (27 icons)
 
-`NtdHome` · `NtdUser` · `NtdUsers` · `NtdHeart` · `NtdStar` · `NtdBell` · `NtdEye` · `NtdEyeOff` · `NtdInfo` · `NtdWarning` · `NtdError` · `NtdSuccess` · `NtdHelp` · `NtdClock` · `NtdCalendar` · `NtdTag` · `NtdBookmark` · `NtdFlag` · `NtdThumbUp` · `NtdThumbDown` · `NtdShield` · `NtdGlobe` · `NtdMap` · `NtdPin` · `NtdSun` · `NtdMoon`
+`NtdHome` · `NtdUser` · `NtdUsers` · `NtdHeart` · `NtdStar` · `NtdBell` · `NtdEye` · `NtdEyeOff` · `NtdInfo` · `NtdWarning` · `NtdError` · `NtdSuccess` · `NtdHelp` · `NtdClock` · `NtdHourglass` · `NtdCalendar` · `NtdTag` · `NtdBookmark` · `NtdFlag` · `NtdThumbUp` · `NtdThumbDown` · `NtdShield` · `NtdGlobe` · `NtdMap` · `NtdPin` · `NtdSun` · `NtdMoon`
 
 ### Media & Communication (19 icons)
 
@@ -466,9 +505,9 @@ Properties passed to every path renderer (pre-resolved from user props):
 
 ## Full Animation Catalog
 
-### Core Transforms (13)
+### Core Transforms (14)
 
-`spin` · `spin-reverse` · `pulse` · `bounce` · `shake` · `float` · `flip` · `glow` · `wiggle` · `rubber` · `swing` · `tada` · `heartbeat`
+`spin` · `spin-reverse` · `pulse` · `bounce` · `shake` · `float` · `flip` · `glow` · `wiggle` · `rubber` · `swing` · `tada` · `heartbeat` · `turn`
 
 ### Entrance Animations (22)
 

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();
@@ -189,7 +193,10 @@ function createIcon(options) {
                 ? `transform ${transition}`
                 : undefined;
         const animStyle = {
-            ...(animationDuration ? { animationDuration } : {}),
+            // the variable carries the duration to the parts an icon animates inside itself
+            ...(animationDuration
+                ? { animationDuration, '--ntd-anim-duration': animationDuration }
+                : {}),
             ...(transformString ? { transform: transformString } : {}),
             ...(transformString ? { transformOrigin } : {}),
             ...(transitionValue ? { transition: transitionValue } : {}),
@@ -222,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',
@@ -235,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/figmaExport.js

@@ -106,6 +106,7 @@ function exportIconToSvgString(svgElement, options = {}) {
         clone.style.animation = '';
         clone.style.animationName = '';
         clone.style.animationDuration = '';
+        clone.style.removeProperty('--ntd-anim-duration');
         // Remove SMIL animation elements
         clone.querySelectorAll('animate, animateTransform, animateMotion').forEach((el) => el.remove());
     }

package/dist/cjs/iconParts.js

@@ -35,17 +35,18 @@ const BELL_CLAPPER_LINE = 'M9 19a3 3 0 006 0';
 const BELL_RINGS = 'M2 4l1.5 1.5M22 4l-1.5 1.5';
 /**
  * NtdBell and NtdBellRing, so the two share one bell; `ringing` adds the ring marks. Duotone and
- * vivid are fills only: the bell primary, the clapper (and the marks) secondary.
+ * vivid are fills only: the bell primary, the clapper secondary. The marks are primary on the solid
+ * bell, secondary in duotone and in the accent colour in vivid.
  */
 function bellIcon(displayName, ringing) {
-    const parts = ({ primaryColor, secondaryColor, strokeWidth }, detail) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BELL, fill: primaryColor }), jsxRuntime.jsx("path", { d: BELL_CLAPPER, fill: detail }), ringing && jsxRuntime.jsx("path", { d: BELL_RINGS, stroke: secondaryColor, strokeWidth: strokeWidth })] }));
+    const parts = ({ primaryColor, strokeWidth }, detail, rings, ringsOpacity = 1) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BELL, fill: primaryColor }), jsxRuntime.jsx("path", { d: BELL_CLAPPER, fill: detail }), ringing && (jsxRuntime.jsx("path", { d: BELL_RINGS, stroke: rings, strokeWidth: strokeWidth, opacity: ringsOpacity }))] }));
     return createIcon.createIcon({
         displayName,
         paths: {
-            solid: (props) => parts(props, props.primaryColor),
+            solid: (props) => parts(props, props.primaryColor, props.primaryColor),
             outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: `${BELL}${BELL_CLAPPER_LINE}${ringing ? BELL_RINGS : ''}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
-            duotone: (props) => parts(props, props.secondaryColor),
-            vivid: (props) => parts(props, props.secondaryColor),
+            duotone: (props) => parts(props, props.secondaryColor, props.secondaryColor),
+            vivid: (props) => parts(props, props.secondaryColor, props.accentColor, props.accentOpacity),
         },
     });
 }

package/dist/cjs/icons/actions.js

@@ -104,22 +104,51 @@ const NtdUpload = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: "M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
     },
 });
+// NtdShare: three nodes joined by two links, the links twice the stroke width in every variant but
+// `outline`. Duotone and vivid, fills only: the nodes primary, the links secondary (vivid had a
+// fixed #3B82F6 node and white links that vanished on a light page).
+const SHARE_NODES = 'M18 2a3 3 0 110 6 3 3 0 110-6zM6 9a3 3 0 110 6 3 3 0 110-6zM18 16a3 3 0 110 6 3 3 0 110-6z';
+const SHARE_LINKS = 'M8.59 13.51L15.42 17.49M15.41 6.51L8.59 10.49';
+function shareFilled(nodes, links, strokeWidth) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: SHARE_LINKS, stroke: links, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: SHARE_NODES, fill: nodes })] }));
+}
 const NtdShare = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdShare',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "3", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "3", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "18", cy: "19", r: "3", fill: primaryColor }), jsxRuntime.jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "15.41", y1: "6.51", x2: "8.59", y2: "10.49", stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        solid: ({ primaryColor, strokeWidth }) => shareFilled(primaryColor, primaryColor, strokeWidth),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsxRuntime.jsx("circle", { cx: "18", cy: "19", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsxRuntime.jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49", stroke: primaryColor, strokeWidth: strokeWidth * 0.75 }), jsxRuntime.jsx("line", { x1: "15.41", y1: "6.51", x2: "8.59", y2: "10.49", stroke: primaryColor, strokeWidth: strokeWidth * 0.75 })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("circle", { cx: "18", cy: "19", r: "3", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsxRuntime.jsx("circle", { cx: "18", cy: "19", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }), jsxRuntime.jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49", stroke: primaryColor, strokeWidth: strokeWidth * 0.75 }), jsxRuntime.jsx("line", { x1: "15.41", y1: "6.51", x2: "8.59", y2: "10.49", stroke: primaryColor, strokeWidth: strokeWidth * 0.75 })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "3", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "3", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "3", fill: secondaryColor }), jsxRuntime.jsx("circle", { cx: "18", cy: "19", r: "3", fill: "#3B82F6" }), jsxRuntime.jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49", stroke: "white", strokeWidth: "1" }), jsxRuntime.jsx("line", { x1: "15.41", y1: "6.51", x2: "8.59", y2: "10.49", stroke: "white", strokeWidth: "1" })] })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => shareFilled(primaryColor, secondaryColor, strokeWidth),
+        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/business.js

@@ -5,21 +5,22 @@ var createIcon = require('../createIcon.js');
 var iconParts = require('../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,
-// secondary on the filled case (the accent colour in vivid, its third colour).
+// sides flush (its round caps stuck out of both). A clasp hangs from its middle: low and wide, in
+// the accent colour like the band on the filled case (secondary in duotone), with a primary lock
+// square in it where it had a slot showing the band through.
 const BRIEFCASE_CASE = { x: 2, y: 7, width: 20, height: 14, rx: 2 };
 const BRIEFCASE_HANDLE = 'M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2';
-/** The clasp over the band, hanging down from it, with its slot (even-odd). */
+/** The clasp over the band, hanging down from it. */
 const BRIEFCASE_CLASP = 'M10.6 11.3h2.8a.8.8 0 01.8.8v2.6a.8.8 0 01-.8.8h-2.8a.8.8 0 01-.8-.8v-2.6a.8.8 0 01.8-.8z';
-const BRIEFCASE_SLOT = 'M11.2 13.2h1.6v.9h-1.6z';
+const BRIEFCASE_LOCK = { x: 11.2, y: 12.6, width: 1.6, height: 1.6 };
 const NtdBriefcase = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdBriefcase',
     paths: {
-        solid: (props) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: props.primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: props.primaryColor, strokeWidth: props.strokeWidth, fill: "none" }), iconParts.within(props.uid, 'band', jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE }), jsxRuntime.jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: props.accentColor, strokeWidth: "1.5", opacity: props.accentOpacity })), jsxRuntime.jsx("path", { d: `${BRIEFCASE_CLASP}${BRIEFCASE_SLOT}`, fillRule: "evenodd", fill: iconParts.detailColor(props) })] })),
+        solid: (props) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: props.primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: props.primaryColor, strokeWidth: props.strokeWidth, fill: "none" }), iconParts.within(props.uid, 'band', jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE }), jsxRuntime.jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: props.accentColor, strokeWidth: "1.5", opacity: props.accentOpacity })), jsxRuntime.jsx("path", { d: BRIEFCASE_CLASP, fill: props.accentColor, opacity: props.accentOpacity }), jsxRuntime.jsx("rect", { ...BRIEFCASE_LOCK, fill: props.primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: primaryColor, strokeWidth: "1.5" }), jsxRuntime.jsx("path", { d: BRIEFCASE_CLASP, fill: primaryColor })] })),
         // fills only: the case and the handle primary, the band and the clasp secondary
-        duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), iconParts.within(uid, 'band', jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE }), jsxRuntime.jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: secondaryColor, strokeWidth: "1.5" })), jsxRuntime.jsx("path", { d: `${BRIEFCASE_CLASP}${BRIEFCASE_SLOT}`, fillRule: "evenodd", fill: secondaryColor })] })),
-        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), iconParts.within(uid, 'band', jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE }), jsxRuntime.jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: secondaryColor, strokeWidth: "1.5" })), jsxRuntime.jsx("path", { d: `${BRIEFCASE_CLASP}${BRIEFCASE_SLOT}`, fillRule: "evenodd", fill: accentColor, opacity: accentOpacity })] })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), iconParts.within(uid, 'band', jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE }), jsxRuntime.jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: secondaryColor, strokeWidth: "1.5" })), jsxRuntime.jsx("path", { d: BRIEFCASE_CLASP, fill: secondaryColor }), jsxRuntime.jsx("rect", { ...BRIEFCASE_LOCK, fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), iconParts.within(uid, 'band', jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE }), jsxRuntime.jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: secondaryColor, strokeWidth: "1.5" })), jsxRuntime.jsx("path", { d: BRIEFCASE_CLASP, fill: accentColor, opacity: accentOpacity }), jsxRuntime.jsx("rect", { ...BRIEFCASE_LOCK, fill: primaryColor })] })),
     },
 });
 // NtdDollar: a line glyph, twice the stroke width in every variant but `outline`; the stem runs

package/dist/cjs/icons/education.js

@@ -46,14 +46,17 @@ const NtdUniversity = /* @__PURE__ */ createIcon.createIcon({
    LEARNING TOOLS
 ───────────────────────────────────────────────────────────────────────────── */
 // NtdBook: a closed book, not a page — the rounded spine on the left, the block of pages showing
-// at the bottom between the front cover and the line of the back cover. Down the right edge it is
-// cover, then the pages set in 2.5 from that edge (the cover showing beside them), then cover
-// again; the outline marks where the pages end with a line. The cover is plain, so another glyph
-// can sit on it; NtdBookBookmark adds a ribbon.
-const BOOK_SILHOUETTE = 'M7 2h12a1 1 0 011 1v17a1 1 0 01-1 1H7a2.5 2.5 0 01-2.5-2.5v-14A2.5 2.5 0 017 2z';
-const BOOK_PAGES = 'M6.6 17.6h10.9v2.3H6.6a1.15 1.15 0 010-2.3z';
+// at the bottom between the front cover and the back cover. Down the right edge it is cover, then
+// a notch cut in 0.9 at the pages, then cover again: beside the pages only a narrow strip of cover
+// is left (it was a 2.5 wide bar). The outline ends the pages with a line short of the edge, the back
+// cover running on under the notch. The cover is plain, so another glyph can sit on it;
+// NtdBookBookmark adds a ribbon.
+const BOOK_SILHOUETTE = 'M7 2h12a1 1 0 011 1v14.2h-.9v2.1H20v.7a1 1 0 01-1 1H7a2.5 2.5 0 01-2.5-2.5v-14A2.5 2.5 0 017 2z';
+const BOOK_PAGES = 'M6.6 17.2h11.4v2.1H6.6a1.05 1.05 0 010-2.1z';
 const BOOK_RIBBON = 'M9.5 2v6.5l1.75-1.3L13 8.5V2z';
-const BOOK_OUTLINE = 'M4.5 18.5v-14A2.5 2.5 0 017 2h12a1 1 0 011 1v17a1 1 0 01-1 1H7a2.5 2.5 0 010-5h13M17.5 16v5';
+const BOOK_OUTLINE = 'M4.5 18.5v-14A2.5 2.5 0 017 2h12a1 1 0 011 1v13H7a2.5 2.5 0 000 5h13M18.7 16v5';
+/** The inside of the outline, for duotone's fill under it. */
+const BOOK_OUTLINE_FILL = 'M7 2h12a1 1 0 011 1v13h-1.3v5H7a2.5 2.5 0 01-2.5-2.5v-14A2.5 2.5 0 017 2z';
 /** The book, with the ribbon bookmark or without it. */
 function bookIcon(displayName, ribbon) {
     return createIcon.createIcon({
@@ -61,7 +64,7 @@ function bookIcon(displayName, ribbon) {
         paths: {
             solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxRuntime.jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsxRuntime.jsx("path", { d: BOOK_PAGES }), ribbon && jsxRuntime.jsx("path", { d: BOOK_RIBBON })] })] })),
             outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_OUTLINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && (jsxRuntime.jsx("path", { d: "M9.5 2.5v6l1.75-1.3L13 8.5v-6", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }))] })),
-            duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_SILHOUETTE, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: BOOK_OUTLINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && jsxRuntime.jsx("path", { d: BOOK_RIBBON, fill: primaryColor })] })),
+            duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_OUTLINE_FILL, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: BOOK_OUTLINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && jsxRuntime.jsx("path", { d: BOOK_RIBBON, fill: primaryColor })] })),
             vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BOOK_PAGES, fill: accentColor, opacity: accentOpacity }), ribbon && jsxRuntime.jsx("path", { d: BOOK_RIBBON, fill: secondaryColor })] })),
         },
     });
@@ -78,12 +81,13 @@ const NtdOpenBook = /* @__PURE__ */ createIcon.createIcon({
     },
 });
 // NtdNotebook: a cover with short binder rings across its left edge (they stuck out further) and
-// three lines of writing — in the accent colour when filled, as the outline draws them. Duotone,
-// fills only: the cover primary, the rings and the writing secondary; vivid: the rings secondary,
-// the writing in the accent colour.
-const NOTEBOOK_COVER = { x: 5, y: 2, width: 15, height: 20, rx: 2 };
-const NOTEBOOK_RINGS = 'M3.5 6h3M3.5 10h3M3.5 14h3M3.5 18h3';
-const NOTEBOOK_TEXT = 'M9 7h7M9 11h7M9 15h4';
+// three lines of writing — in the accent colour when filled, as the outline draws them. The cover
+// is 16.5 × 19 (it was 15 × 20, tall and slim for an exercise book). Duotone, fills only: the
+// cover primary, the rings and the writing secondary; vivid: the rings secondary, the writing in
+// the accent colour.
+const NOTEBOOK_COVER = { x: 4.5, y: 2.5, width: 16.5, height: 19, rx: 2 };
+const NOTEBOOK_RINGS = 'M3 6h3M3 10h3M3 14h3M3 18h3';
+const NOTEBOOK_TEXT = 'M9 7.5h8.5M9 11.5h8.5M9 15.5h4.5';
 const NtdNotebook = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdNotebook',
     paths: {