@nice2dev/icons 1.3.3 → 1.3.4

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @nice2dev/icons — Changelog
 
+## 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,6 +193,14 @@ 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.
 
 ---
@@ -406,9 +414,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 +474,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/createIcon.js

@@ -189,7 +189,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 } : {}),

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,13 +104,21 @@ 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),
     },
 });
 const NtdCopy = /* @__PURE__ */ createIcon.createIcon({

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: {

package/dist/cjs/icons/files.js

@@ -153,12 +153,12 @@ const NtdGrid = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1.5", fill: secondaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1.5", fill: "#3B82F6" }), jsxRuntime.jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1.5", fill: "#F59E0B" })] })),
     },
 });
-// NtdList: in every variant but `outline` the lines are 1.5 × the stroke width and the dots r 2.25
-// — half again as heavy as they were; the lines start at 9 to keep clear of the bigger dots.
+// NtdList: in every variant but `outline` the lines are 1.5 × the stroke width and the dots r 1.7
+// (r 2.25 was too big, a quarter smaller); the lines start at 9 to keep clear of the dots.
 // Duotone and vivid: the lines primary, the dots secondary.
 const LIST_LINES = 'M9 6h12M9 12h12M9 18h12';
 function listFilled(lines, dots, strokeWidth) {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: LIST_LINES, stroke: lines, strokeWidth: strokeWidth * 1.5 }), jsxRuntime.jsxs("g", { fill: dots, children: [jsxRuntime.jsx("circle", { cx: "3.75", cy: "6", r: "2.25" }), jsxRuntime.jsx("circle", { cx: "3.75", cy: "12", r: "2.25" }), jsxRuntime.jsx("circle", { cx: "3.75", cy: "18", r: "2.25" })] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: LIST_LINES, stroke: lines, strokeWidth: strokeWidth * 1.5 }), jsxRuntime.jsxs("g", { fill: dots, children: [jsxRuntime.jsx("circle", { cx: "3.75", cy: "6", r: "1.7" }), jsxRuntime.jsx("circle", { cx: "3.75", cy: "12", r: "1.7" }), jsxRuntime.jsx("circle", { cx: "3.75", cy: "18", r: "1.7" })] })] }));
 }
 const NtdList = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdList',
@@ -178,10 +178,12 @@ const NtdTable = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: "2" }), jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: "white", opacity: "0.1" }), jsxRuntime.jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9", stroke: secondaryColor, strokeWidth: "1.8" }), jsxRuntime.jsx("line", { x1: "3", y1: "15", x2: "21", y2: "15", stroke: "#3B82F6", strokeWidth: "1.5" }), jsxRuntime.jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
     },
 });
+// NtdSmartphone: filled, the case stays a primary frame round a screen in the accent colour, and
+// the button is a primary dot on the screen — bigger and lower than the accent dot it was.
 const NtdSmartphone = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdSmartphone',
     paths: {
-        solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: primaryColor }), jsxRuntime.jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18", stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
+        solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "6.5", y: "3.5", width: "11", height: "17", rx: "0.75", fill: accentColor, opacity: accentOpacity }), jsxRuntime.jsx("circle", { cx: "12", cy: "18.4", r: "1.25", fill: primaryColor })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
         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" })] })),
@@ -230,11 +232,11 @@ const NtdKey = /* @__PURE__ */ createIcon.createIcon({
     },
 });
 // NtdAward: the ribbon has a secondary inside within its primary edge (it was open, so the page
-// showed through), and goes under the medal. The inside is the ribbon inset by 2 — it filled the
-// ribbon almost to its edge. Duotone is the same; vivid draws the ribbon's edge in the accent
-// colour.
+// showed through), and goes under the medal. The inside is the ribbon inset by 1.5 — between the
+// half stroke it filled to before (too full) and the 2 after (too small). Duotone is the same;
+// vivid draws the ribbon's edge in the accent colour.
 const AWARD_RIBBON = 'M8.21 13.89L7 23l5-3 5 3-1.21-9.12';
-const AWARD_RIBBON_INNER = 'M10.17 14.3L13.83 14.3L14.47 19.15L12 17.67L9.53 19.15z';
+const AWARD_RIBBON_INNER = 'M9.67 14.3L8.9 20.11L12 18.25L15.1 20.11L14.32 14.3z';
 function awardFilled({ primaryColor, secondaryColor, strokeWidth }, ribbonEdge) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: AWARD_RIBBON, fill: ribbonEdge, stroke: ribbonEdge, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: AWARD_RIBBON_INNER, fill: secondaryColor }), jsxRuntime.jsx("circle", { cx: "12", cy: "8", r: "7", fill: primaryColor })] }));
 }

package/dist/cjs/icons/index.js

@@ -91,6 +91,7 @@ exports.NtdGlobe = ui.NtdGlobe;
 exports.NtdHeart = ui.NtdHeart;
 exports.NtdHelp = ui.NtdHelp;
 exports.NtdHome = ui.NtdHome;
+exports.NtdHourglass = ui.NtdHourglass;
 exports.NtdInfo = ui.NtdInfo;
 exports.NtdMap = ui.NtdMap;
 exports.NtdMoon = ui.NtdMoon;

package/dist/cjs/icons/media.js

@@ -133,17 +133,30 @@ const NtdMicrophoneOff = /* @__PURE__ */ createIcon.createIcon({
 // NtdMusic: the note heads are tilted ellipses whose right edge is the stem's right edge, and the
 // stems end where that edge is vertical, so stem and head meet without a step (the heads stuck
 // out right of the stems). The outline heads are the filled ones moved in by half a stroke, so
-// their stroke meets the stem the same way.
+// their stroke meets the stem the same way. Every variant but `outline` draws the stems and the
+// beam twice the stroke width; the stems move left by the extra half width, so their right edge
+// stays on the heads' (9.3 and 21.3), and the beam drops half a unit to keep a mitred corner in
+// the box.
 const MUSIC_STEMS = 'M8.3 17.22V5l12-2v12.22';
+/** The stems and the beam for a line `width` wide; `sharp` stops them half a width higher. */
+function musicStems(width, sharp = false) {
+    const left = 9.3 - width / 2;
+    const right = 21.3 - width / 2;
+    const end = sharp ? width / 2 : 0;
+    return `M${left} ${17.22 - end}V5.5L${right} 3.5V${15.22 - end}`;
+}
+function musicFilled(stems, heads, strokeWidth, sharp = false) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: musicStems(strokeWidth * 2, sharp), stroke: stems, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("ellipse", { cx: "5.97", cy: "18", rx: "3.5", ry: "2.3", transform: "rotate(-24 5.97 18)", fill: heads[0] }), jsxRuntime.jsx("ellipse", { cx: "17.97", cy: "16", rx: "3.5", ry: "2.3", transform: "rotate(-24 17.97 16)", fill: heads[1] })] }));
+}
 const NtdMusic = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdMusic',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: MUSIC_STEMS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsxs("g", { fill: primaryColor, children: [jsxRuntime.jsx("ellipse", { cx: "5.97", cy: "18", rx: "3.5", ry: "2.3", transform: "rotate(-24 5.97 18)" }), jsxRuntime.jsx("ellipse", { cx: "17.97", cy: "16", rx: "3.5", ry: "2.3", transform: "rotate(-24 17.97 16)" })] })] })),
-        // the stems stop a unit higher: the square caps of `sharp` then end at the heads' edge
-        sharp: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M8.3 16.22V5l12-2v11.22", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsxs("g", { fill: primaryColor, children: [jsxRuntime.jsx("ellipse", { cx: "5.97", cy: "18", rx: "3.5", ry: "2.3", transform: "rotate(-24 5.97 18)" }), jsxRuntime.jsx("ellipse", { cx: "17.97", cy: "16", rx: "3.5", ry: "2.3", transform: "rotate(-24 17.97 16)" })] })] })),
+        solid: ({ primaryColor, strokeWidth }) => musicFilled(primaryColor, [primaryColor, primaryColor], strokeWidth),
+        // the square caps of `sharp` then end at the heads' edge
+        sharp: ({ primaryColor, strokeWidth }) => musicFilled(primaryColor, [primaryColor, primaryColor], strokeWidth, true),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: MUSIC_STEMS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsxs("g", { stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", children: [jsxRuntime.jsx("ellipse", { cx: "5.97", cy: "18", rx: "2.5", ry: "1.3", transform: "rotate(-24 5.97 18)" }), jsxRuntime.jsx("ellipse", { cx: "17.97", cy: "16", rx: "2.5", ry: "1.3", transform: "rotate(-24 17.97 16)" })] })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M8.3 5l12-2v12.22", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsxRuntime.jsx("path", { d: MUSIC_STEMS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsxs("g", { fill: primaryColor, children: [jsxRuntime.jsx("ellipse", { cx: "5.97", cy: "18", rx: "3.5", ry: "2.3", transform: "rotate(-24 5.97 18)" }), jsxRuntime.jsx("ellipse", { cx: "17.97", cy: "16", rx: "3.5", ry: "2.3", transform: "rotate(-24 17.97 16)" })] })] })),
-        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: MUSIC_STEMS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("ellipse", { cx: "5.97", cy: "18", rx: "3.5", ry: "2.3", transform: "rotate(-24 5.97 18)", fill: primaryColor }), jsxRuntime.jsx("ellipse", { cx: "17.97", cy: "16", rx: "3.5", ry: "2.3", transform: "rotate(-24 17.97 16)", fill: secondaryColor })] })),
+        duotone: ({ primaryColor, strokeWidth }) => musicFilled(primaryColor, [primaryColor, primaryColor], strokeWidth),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => musicFilled(primaryColor, [primaryColor, secondaryColor], strokeWidth),
     },
 });
 // The flap is a cut through the envelope, kept inside it: its ends meet the sides flush (the
@@ -223,12 +236,13 @@ const NtdNotification = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "18", cy: "4", r: "3.5", fill: secondaryColor }), jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: "white", strokeWidth: "1" })] })),
     },
 });
-// NtdWifi: three arcs round the dot (r 4.4 / 9.1 / 13.8 about 12,19.5, ±45°), 1.5 × the stroke
+// NtdWifi: three arcs round the dot (r 5.2 / 9.5 / 13.8 about 12,19.5, ±45°), 1.5 × the stroke
 // width in every variant but `outline` — half again as heavy. Concentric, so the heavier arcs keep
-// even gaps, and small enough that the outer one's square caps in `sharp` stay in the box.
-// Duotone and vivid: the dot and the inner arc primary, the outer arcs secondary.
-const WIFI_INNER = 'M8.89 16.39A4.4 4.4 0 0 1 15.11 16.39';
-const WIFI_OUTER = 'M5.57 13.07A9.1 9.1 0 0 1 18.43 13.07M2.24 9.74A13.8 13.8 0 0 1 21.76 9.74';
+// even gaps, and small enough that the outer one's square caps in `sharp` stay in the box. The
+// inner arc sits further from the dot (it was r 4.4) and the arcs closer together, the outer one
+// where it was. Duotone and vivid: the dot and the inner arc primary, the outer arcs secondary.
+const WIFI_INNER = 'M8.32 15.82A5.2 5.2 0 0 1 15.68 15.82';
+const WIFI_OUTER = 'M5.28 12.78A9.5 9.5 0 0 1 18.72 12.78M2.24 9.74A13.8 13.8 0 0 1 21.76 9.74';
 function wifiFilled(near, far, strokeWidth) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: WIFI_OUTER, stroke: far, strokeWidth: strokeWidth * 1.5, fill: "none" }), jsxRuntime.jsx("path", { d: WIFI_INNER, stroke: near, strokeWidth: strokeWidth * 1.5, fill: "none" }), jsxRuntime.jsx("circle", { cx: "12", cy: "19.5", r: "1.5", fill: near })] }));
 }
@@ -260,13 +274,25 @@ const NtdPalette = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 3a9 9 0 100 18h1a2 2 0 000-4h-1a2 2 0 110-4h1a3 3 0 103-3 3 3 0 01-3-3V6a3 3 0 00-1-3z", fill: primaryColor, opacity: "0.25" }), jsxRuntime.jsx("path", { d: "M12 3a9 9 0 100 18h1a2 2 0 000-4h-1a2 2 0 110-4h1a3 3 0 103-3 3 3 0 01-3-3V6a3 3 0 00-1-3z", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "7", cy: "9", r: "1.2", fill: secondaryColor }), jsxRuntime.jsx("circle", { cx: "10", cy: "7", r: "1.2", fill: "#8B5CF6" }), jsxRuntime.jsx("circle", { cx: "7", cy: "13", r: "1.2", fill: "#EF4444" })] })),
     },
 });
+// NtdBrush: a paintbrush lying at 45° — a tapering handle with a round end, the metal ferrule, and
+// the bristles swelling out of it to a point at the bottom left (it was a pencil-like wedge with a
+// blob). Filled, the ferrule is set off from the handle and the bristles by two accent cuts.
+// Duotone, fills only: the handle and the ferrule primary, the bristles secondary; vivid puts the
+// ferrule in the accent colour.
+const BRUSH_HANDLE = 'M19.35 2.81A1.3 1.3 0 0 1 21.19 4.65L13.91 12.49L11.51 10.09Z';
+const BRUSH_FERRULE = 'M11.08 9.67L14.33 12.92L11.36 15.89L8.11 12.64Z';
+const BRUSH_BRISTLES = 'M8.11 12.64L11.36 15.89C9.95 18.43 7.76 20.49 2.81 21.19C3.51 16.24 5.57 14.05 8.11 12.64Z';
+const BRUSH_CUTS = 'M10.37 8.96L15.04 13.63M7.4 11.93L12.07 16.6';
+function brushFilled(handle, ferrule, bristles, ferruleOpacity = 1) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BRUSH_HANDLE, fill: handle }), jsxRuntime.jsx("path", { d: BRUSH_FERRULE, fill: ferrule, opacity: ferruleOpacity }), jsxRuntime.jsx("path", { d: BRUSH_BRISTLES, fill: bristles })] }));
+}
 const NtdBrush = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdBrush',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M14 4l6 6-8 8-6 2 2-6zM4 20c1.5 0 3-.8 3-2.5S6 15 4.5 15 2 16.2 2 18s.5 2 2 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M14 4l6 6-8 8-6 2 2-6zM4 20c1.5 0 3-.8 3-2.5S6 15 4.5 15 2 16.2 2 18s.5 2 2 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M14 4l6 6-8 8-6 2 2-6z", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M14 4l6 6-8 8-6 2 2-6zM4 20c1.5 0 3-.8 3-2.5S6 15 4.5 15 2 16.2 2 18s.5 2 2 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("path", { d: "M14 4l6 6-8 8-6 2 2-6zM4 20c1.5 0 3-.8 3-2.5S6 15 4.5 15 2 16.2 2 18s.5 2 2 2z", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }) })),
+        solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [brushFilled(primaryColor, primaryColor, primaryColor), iconParts.within(uid, 'brush', jsxRuntime.jsx("path", { d: `${BRUSH_HANDLE}${BRUSH_FERRULE}${BRUSH_BRISTLES}` }), jsxRuntime.jsx("path", { d: BRUSH_CUTS, stroke: accentColor, strokeWidth: "1", opacity: accentOpacity }))] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: `${BRUSH_HANDLE}${BRUSH_FERRULE}${BRUSH_BRISTLES}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
+        duotone: ({ primaryColor, secondaryColor }) => brushFilled(primaryColor, primaryColor, secondaryColor),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => brushFilled(primaryColor, accentColor, secondaryColor, accentOpacity),
     },
 });
 const NtdPenTool = /* @__PURE__ */ createIcon.createIcon({

package/dist/cjs/icons/navigation.js

@@ -126,15 +126,17 @@ const NtdExternalLink = /* @__PURE__ */ createIcon.createIcon({
 });
 // NtdRefresh: two arcs round 12,12 (r 7), each ending in a filled head — a line glyph twice the
 // stroke width in every variant but `outline`. The tail stops inside its head, so no cap sticks
-// out of it in `sharp` (the old tails ran into the heads' corners). Duotone and vivid: the top
-// arrow primary, the bottom one secondary.
+// out of it in `sharp` (the old tails ran into the heads' corners). Each head (7.2 wide, 4.2 long)
+// points along the chord to the start of the other arrow's tail, with a clear gap before it — the
+// bigger heads pointed past the tails and nearly touched them. Duotone and vivid: the top arrow
+// primary, the bottom one secondary.
 const REFRESH_TOP = {
-    tail: 'M5.82 8.71A7 7 0 0 1 18 8.39',
-    head: 'M22.25 7L20.75 13.96L14.34 10.86z',
+    tail: 'M6.34 7.89A7 7 0 0 1 17.98 8.37',
+    head: 'M14.59 8.46L17.89 12.9L21.77 8.96z',
 };
 const REFRESH_BOTTOM = {
-    tail: 'M18.18 15.29A7 7 0 0 1 6 15.61',
-    head: 'M1.75 17L3.25 10.04L9.66 13.14z',
+    tail: 'M17.66 16.11A7 7 0 0 1 6.02 15.63',
+    head: 'M9.41 15.54L6.11 11.1L2.23 15.04z',
 };
 function refreshArrows(top, bottom, strokeWidth) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: REFRESH_TOP.tail, stroke: top, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: REFRESH_TOP.head, fill: top }), jsxRuntime.jsx("path", { d: REFRESH_BOTTOM.tail, stroke: bottom, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: REFRESH_BOTTOM.head, fill: bottom })] }));

package/dist/cjs/icons/realestate.js

@@ -28,11 +28,14 @@ const APARTMENT_WINDOWS = [
     { x: 14, y: 13 },
 ];
 const APARTMENT_DOOR = { x: 10, y: 18, width: 4, height: 4 };
+/** The door of the solid variants: it stops short of the ground, leaving a thin primary sill. */
+const APARTMENT_DOOR_SILL = { ...APARTMENT_DOOR, height: 3.25 };
 const NtdApartment = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdApartment',
     paths: {
-        // the windows and the door filled in the accent colour, no frames (round 33)
-        solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...APARTMENT, fill: primaryColor }), jsxRuntime.jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [APARTMENT_WINDOWS.map((w) => (jsxRuntime.jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))), iconParts.within(uid, 'door', jsxRuntime.jsx("rect", { ...APARTMENT }), jsxRuntime.jsx("rect", { ...APARTMENT_DOOR }))] })] })),
+        // the windows and the door filled in the accent colour, no frames (round 33), a sill under the
+        // door (round 34)
+        solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...APARTMENT, fill: primaryColor }), jsxRuntime.jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [APARTMENT_WINDOWS.map((w) => (jsxRuntime.jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))), jsxRuntime.jsx("rect", { ...APARTMENT_DOOR_SILL })] })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs("g", { stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", children: [jsxRuntime.jsx("rect", { ...APARTMENT }), APARTMENT_WINDOWS.map((w) => (jsxRuntime.jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))), jsxRuntime.jsx("rect", { ...APARTMENT_DOOR })] })),
         duotone: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...APARTMENT, fill: primaryColor }), jsxRuntime.jsxs("g", { fill: secondaryColor, children: [APARTMENT_WINDOWS.map((w) => (jsxRuntime.jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))), jsxRuntime.jsx("rect", { ...APARTMENT_DOOR })] })] })),
         vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...APARTMENT, fill: primaryColor }), jsxRuntime.jsx("g", { fill: secondaryColor, children: APARTMENT_WINDOWS.map((w) => (jsxRuntime.jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))) }), jsxRuntime.jsx("rect", { ...APARTMENT_DOOR, fill: accentColor, opacity: accentOpacity })] })),

package/dist/cjs/icons/shapes.js

@@ -240,13 +240,25 @@ const NtdMove = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: moveShape(strokeWidth), fill: primaryColor }), jsxRuntime.jsx("path", { d: moveShape(strokeWidth), fill: "white", opacity: "0.1" })] })),
     },
 });
+// NtdRepeat: two hooked arrows, a line glyph twice the stroke width in every variant but `outline`
+// — redrawn tighter (shafts at y 6 and 18, heads 3 long) so the heavier lines stay in the box. As
+// in NtdMaximize, each shaft stops 0.35 × the line width short of its head's point, so the square
+// cap of `sharp` stays inside the head (it stuck out of both points). Duotone and vivid: one arrow
+// primary, the other secondary (vivid had a fixed #3B82F6 head).
+const REPEAT_HEADS = ['M17 3L20 6L17 9', 'M7 21L4 18L7 15'];
+const REPEAT_OUTLINE = 'M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3';
+function repeatArrows(first, second, strokeWidth) {
+    const width = strokeWidth * 2;
+    const back = width * 0.35;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: `${REPEAT_HEADS[0]}M4 10V9a3 3 0 013-3H${20 - back}`, stroke: first, strokeWidth: width, fill: "none" }), jsxRuntime.jsx("path", { d: `${REPEAT_HEADS[1]}M20 14v1a3 3 0 01-3 3H${4 + back}`, stroke: second, strokeWidth: width, fill: "none" })] }));
+}
 const NtdRepeat = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdRepeat',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "17,1 21,5 17,9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M3 11V9a4 4 0 014-4h14", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("polyline", { points: "7,23 3,19 7,15", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M21 13v2a4 4 0 01-4 4H3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "17,1 21,5 17,9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M3 11V9a4 4 0 014-4h14", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("polyline", { points: "7,23 3,19 7,15", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M21 13v2a4 4 0 01-4 4H3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M3 11V9a4 4 0 014-4h14", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsxRuntime.jsx("path", { d: "M21 13v2a4 4 0 01-4 4H3", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsxRuntime.jsx("polyline", { points: "17,1 21,5 17,9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("polyline", { points: "7,23 3,19 7,15", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "17,1 21,5 17,9", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsxRuntime.jsx("path", { d: "M3 11V9a4 4 0 014-4h14", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsxRuntime.jsx("polyline", { points: "7,23 3,19 7,15", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" }), jsxRuntime.jsx("path", { d: "M21 13v2a4 4 0 01-4 4H3", stroke: secondaryColor, strokeWidth: "1.5", fill: "none" })] })),
+        solid: ({ primaryColor, strokeWidth }) => repeatArrows(primaryColor, primaryColor, strokeWidth),
+        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: REPEAT_OUTLINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => repeatArrows(primaryColor, secondaryColor, strokeWidth),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => repeatArrows(primaryColor, secondaryColor, strokeWidth),
     },
 });
 const NtdShuffle = /* @__PURE__ */ createIcon.createIcon({

package/dist/cjs/icons/travel.js

@@ -43,26 +43,27 @@ const NtdCar = /* @__PURE__ */ createIcon.createIcon({
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M5 11l2-5h10l2 5M3 14v4a1 1 0 001 1h2a1 1 0 001-1v-1h10v1a1 1 0 001 1h2a1 1 0 001-1v-4a2 2 0 00-2-2H5a2 2 0 00-2 2z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M5 11l2-5h10l2 5M3 14v4a1 1 0 001 1h2a1 1 0 001-1v-1h10v1a1 1 0 001 1h2a1 1 0 001-1v-4a2 2 0 00-2-2H5a2 2 0 00-2 2z", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "7", cy: "15", r: "1.5", fill: "white", opacity: "0.5" }), jsxRuntime.jsx("circle", { cx: "17", cy: "15", r: "1.5", fill: "white", opacity: "0.5" })] })),
     },
 });
-// NtdBus: a side view — the body with one long window, a passenger (NtdUser's head and shoulders)
-// in it on the left, a stripe below, and wheels set in arches. Filled, the window, the stripe, the
-// arches and the hubs are in the accent colour (fixed 50% white before) and the passenger primary.
-const BUS_BODY = { x: 2, y: 4, width: 20, height: 13, rx: 2.5 };
-const BUS_WINDOW = { x: 4, y: 6.5, width: 16, height: 4.5, rx: 1 };
-/** The passenger, cut off by the window's bottom edge. */
-const BUS_PASSENGER = 'M7 7.4a1.25 1.25 0 110 2.5 1.25 1.25 0 110-2.5zM4.9 11.6v-.3a1.9 1.9 0 011.9-1.9h.4a1.9 1.9 0 011.9 1.9v.3z';
-const BUS_STRIPE = 'M2 13.5h20';
-const BUS_WHEELS = 'M7 14.5a2.5 2.5 0 110 5 2.5 2.5 0 110-5zM17 14.5a2.5 2.5 0 110 5 2.5 2.5 0 110-5z';
-const BUS_ARCHES = 'M7 13.7a3.3 3.3 0 110 6.6 3.3 3.3 0 110-6.6zM17 13.7a3.3 3.3 0 110 6.6 3.3 3.3 0 110-6.6z';
-const BUS_HUBS = 'M7 16.1a.9.9 0 110 1.8.9.9 0 110-1.8zM17 16.1a.9.9 0 110 1.8.9.9 0 110-1.8z';
+// NtdBus: seen from the front — the body with a big windscreen (its top frame 1.75, 30% less than
+// the side view's), the driver (NtdUser's head and shoulders) in it on the left, two headlights and
+// a bumper line below it, and the wheels as rectangles under the body (round side-view wheels
+// read oddly). Filled, the windscreen, the headlights and the bumper are in the accent colour and
+// the driver primary.
+const BUS_BODY = { x: 3, y: 2, width: 18, height: 17, rx: 2.5 };
+const BUS_WINDOW = { x: 4.75, y: 3.75, width: 14.5, height: 7.5, rx: 1 };
+/** The driver, cut off by the windscreen's bottom edge. */
+const BUS_DRIVER = 'M8.4 5.3a1.6 1.6 0 110 3.2 1.6 1.6 0 110-3.2zM5.6 11.5v-.1a2.3 2.3 0 012.3-2.3h1a2.3 2.3 0 012.3 2.3v.1z';
+const BUS_LIGHTS = 'M6.6 13.7a1.3 1.3 0 110 2.6 1.3 1.3 0 110-2.6zM17.4 13.7a1.3 1.3 0 110 2.6 1.3 1.3 0 110-2.6z';
+const BUS_BUMPER = 'M3 17.4h18';
+const BUS_WHEELS = 'M5.5 18h3v3a1 1 0 01-1 1h-1a1 1 0 01-1-1zM15.5 18h3v3a1 1 0 01-1 1h-1a1 1 0 01-1-1z';
 function busFilled({ primaryColor, uid }, glass, details, detailOpacity) {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BUS_BODY, fill: primaryColor }), iconParts.within(uid, 'body', jsxRuntime.jsx("rect", { ...BUS_BODY }), jsxRuntime.jsxs("g", { opacity: detailOpacity, children: [jsxRuntime.jsx("path", { d: BUS_ARCHES, fill: details }), jsxRuntime.jsx("path", { d: BUS_STRIPE, stroke: details, strokeWidth: "1.2" })] })), jsxRuntime.jsx("rect", { ...BUS_WINDOW, fill: glass }), iconParts.within(uid, 'window', jsxRuntime.jsx("rect", { ...BUS_WINDOW }), jsxRuntime.jsx("path", { d: BUS_PASSENGER, fill: primaryColor })), jsxRuntime.jsx("path", { d: BUS_WHEELS, fill: primaryColor }), jsxRuntime.jsx("path", { d: BUS_HUBS, fill: details, opacity: detailOpacity })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BUS_WHEELS, fill: primaryColor }), jsxRuntime.jsx("rect", { ...BUS_BODY, fill: primaryColor }), jsxRuntime.jsxs("g", { opacity: detailOpacity, children: [jsxRuntime.jsx("path", { d: BUS_LIGHTS, fill: details }), iconParts.within(uid, 'body', jsxRuntime.jsx("rect", { ...BUS_BODY }), jsxRuntime.jsx("path", { d: BUS_BUMPER, stroke: details, strokeWidth: "1.2" }))] }), jsxRuntime.jsx("rect", { ...BUS_WINDOW, fill: glass }), iconParts.within(uid, 'window', jsxRuntime.jsx("rect", { ...BUS_WINDOW }), jsxRuntime.jsx("path", { d: BUS_DRIVER, fill: primaryColor }))] }));
 }
 const NtdBus = /* @__PURE__ */ createIcon.createIcon({
     displayName: 'NtdBus',
     paths: {
         solid: (props) => busFilled(props, props.accentColor, props.accentColor, props.accentOpacity),
-        outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BUS_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { ...BUS_WINDOW, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: BUS_PASSENGER, fill: primaryColor }), jsxRuntime.jsx("path", { d: "M4 13.5h16", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: BUS_WHEELS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        // fills only: the body and the passenger primary, the window and the details secondary
+        outline: ({ primaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BUS_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { ...BUS_WINDOW, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), iconParts.within(uid, 'window', jsxRuntime.jsx("rect", { ...BUS_WINDOW }), jsxRuntime.jsx("path", { d: BUS_DRIVER, fill: primaryColor })), jsxRuntime.jsx("path", { d: "M6.6 14a1 1 0 110 2 1 1 0 110-2zM17.4 14a1 1 0 110 2 1 1 0 110-2z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M6 19v2a1 1 0 001 1h1a1 1 0 001-1v-2M15 19v2a1 1 0 001 1h1a1 1 0 001-1v-2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        // fills only: the body and the driver primary, the windscreen and the details secondary
         duotone: (props) => busFilled(props, props.secondaryColor, props.secondaryColor, 1),
         vivid: (props) => busFilled(props, props.secondaryColor, props.accentColor, props.accentOpacity),
     },