@nice2dev/icons 1.3.5 → 1.3.7

package/dist/esm/createIcon.js

@@ -3,7 +3,7 @@ import { forwardRef, useId, useSyncExternalStore } from 'react';
 import { sharpenTree, roundTree, wireTree, MINI_SCALE } from './sharpen.js';
 import { generateSmilAnimation } from './smilAnimations.js';
 import { renderStackChildren, NTD_ICON_MARK } from './stacking.js';
-import { SIZE_MAP, SEMANTIC_COLOR_VARS, SEMANTIC_COLOR_DEFAULTS, GRADIENT_PRESETS } from './types.js';
+import { SEMANTIC_COLOR_VARS, SEMANTIC_COLOR_DEFAULTS, SIZE_MAP, GRADIENT_PRESETS } from './types.js';
 
 /* ── Dark mode detection hook ───────────────────────── */
 // No `matchMedia` (jsdom without a polyfill, some embedded webviews): light, and nothing to
@@ -114,11 +114,11 @@ function renderCutoutShape(shape, fill, maskId) {
 }
 function createIcon(options) {
     const { displayName, viewBox = '0 0 24 24', paths, textCenter = BOX_CENTER } = options;
-    const Icon = forwardRef(({ size = 'md', variant = 'solid', cutoutShape = 'rounded-square', color, lightColor, darkColor, primaryColor: propPrimaryColor = 'currentColor', secondaryColor, accentColor, primaryOpacity = 1, secondaryOpacity = 0.4, accentOpacity = 1, strokeWidth = 2, strokeLinecap: propLinecap, strokeLinejoin: propLinejoin, animation, animationDuration, smilAnimation, smilDuration = 1, smilRepeatCount = 'indefinite', smilEasing = 'ease-in-out', smilDelay = 0, gradient, gradientType = 'linear', gradientAngle = 135, gradientAnimation, 
+    const Icon = forwardRef(({ size = 'md', variant = 'solid', cutoutShape = 'rounded-square', color, lightColor, darkColor, primaryColor: propPrimaryColor = 'currentColor', secondaryColor, accentColor, primaryOpacity = 1, secondaryOpacity = 0.4, accentOpacity = 1, strokeWidth = 1, strokeLinecap: propLinecap, strokeLinejoin: propLinejoin, animation, animationDuration, smilAnimation, smilDuration = 1, smilRepeatCount = 'indefinite', smilEasing = 'ease-in-out', smilDelay = 0, gradient, gradientType = 'linear', gradientAngle = 135, gradientAnimation, 
     // Transform props
     rotate, flipX, flipY, scale, transition, transformOrigin = 'center center', 
     // stacking (1.3.5): the parent icon reads a child's own align / size from its props
-    children, stackAlign: _stackAlign, stackSize: _stackSize, textColor, textSize, title, className, style, ...rest }, ref) => {
+    children, stackAlign: _stackAlign, stackSize: _stackSize, stackRotation: _stackRotation, stackOffsetX: _stackOffsetX, stackOffsetY: _stackOffsetY, textColor, textSize, title, className, style, ...rest }, ref) => {
         var _a, _b, _c, _d, _e, _f, _g;
         const resolvedSize = typeof size === 'number' ? size : ((_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
         const gradId = useId();

package/dist/esm/iconParts.js

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

package/dist/esm/iconStack.js

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

package/dist/esm/icons/actions.js

@@ -49,13 +49,20 @@ const NtdEditDetail = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: EDIT_DETAIL_FRAME, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: EDIT_DETAIL_PENCIL, fill: primaryColor }), within(uid, 'band', jsx("path", { d: EDIT_DETAIL_PENCIL }), jsx("path", { d: EDIT_DETAIL_BAND, stroke: secondaryColor, strokeWidth: "1.3" }))] })),
     },
 });
+// NtdTrash: the lid overhangs the bin by 1 a side (16 across; it was 18) and the handle is 6 by 3
+// (it was 8 by 4). Vivid: the lid and the handle secondary, the grooves accent (they were a fixed
+// #3B82F6).
+const TRASH_LID = 'M4 6h16';
+const TRASH_HANDLE = 'M9 6V4.5a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5V6';
+const TRASH_BIN = 'M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14H5z';
+const TRASH_GROOVES = 'M10 10.5v7M14 10.5v7';
 const NtdTrash = /* @__PURE__ */ createIcon({
     displayName: 'NtdTrash',
     paths: {
-        solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 6h18", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14H5z", fill: primaryColor }), jsx("line", { x1: "10", y1: "10.5", x2: "10", y2: "17.5", stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity }), jsx("line", { x1: "14", y1: "10.5", x2: "14", y2: "17.5", stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 6h18", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "10", y1: "10.5", x2: "10", y2: "17.5", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "14", y1: "10.5", x2: "14", y2: "17.5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14H5z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 6h18", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "10", y1: "10.5", x2: "10", y2: "17.5", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "14", y1: "10.5", x2: "14", y2: "17.5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14H5z", fill: primaryColor }), jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14H5z", fill: "white", opacity: "0.1" }), jsx("path", { d: "M3 6h18", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("path", { d: "M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("line", { x1: "10", y1: "10.5", x2: "10", y2: "17.5", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("line", { x1: "14", y1: "10.5", x2: "14", y2: "17.5", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
+        solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRASH_LID, stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: TRASH_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_BIN, fill: primaryColor }), jsx("line", { x1: "10", y1: "10.5", x2: "10", y2: "17.5", stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity }), jsx("line", { x1: "14", y1: "10.5", x2: "14", y2: "17.5", stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRASH_LID, stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: TRASH_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_GROOVES, stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRASH_BIN, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: TRASH_LID, stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: TRASH_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_GROOVES, stroke: primaryColor, strokeWidth: strokeWidth })] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRASH_BIN, fill: primaryColor }), jsx("path", { d: TRASH_LID, stroke: secondaryColor, strokeWidth: strokeWidth }), jsx("path", { d: TRASH_HANDLE, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_GROOVES, stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity })] })),
     },
 });
 // NtdSave: a 3.5" floppy — the clipped corner, a wide metal shutter at the top edge with its

package/dist/esm/icons/business.js

@@ -2,23 +2,30 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createIcon } from '../createIcon.js';
 import { paperIcon, within } from '../iconParts.js';
 
-// The band sits halfway down the case and is a cut through it: kept inside the case it meets the
-// sides flush (its round caps stuck out of both). A clasp hangs from its middle: low and wide, in
-// 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.
+// The band sits a third of the way down the case (11.5; it was halfway, 12.5) and is a cut through
+// it: kept inside the case it meets the sides flush (its round caps stuck out of both), in the
+// outline too, where it ends on the sides' centre line. 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. Vivid: the clasp is all
+// accent, without the square, which made it read as an accent ring round a primary middle.
 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';
+const BRIEFCASE_BAND = 'M2 11.5h20';
 /** 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_LOCK = { x: 11.2, y: 12.6, width: 1.6, height: 1.6 };
+const BRIEFCASE_CLASP = 'M10.6 10.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_LOCK = { x: 11.2, y: 11.6, width: 1.6, height: 1.6 };
+/** The band, clipped to the case so it ends flush with the sides. */
+function briefcaseBand(uid, color, width, opacity = 1) {
+    return within(uid, 'band', jsx("rect", { ...BRIEFCASE_CASE }), jsx("path", { d: BRIEFCASE_BAND, stroke: color, strokeWidth: width, opacity: opacity }));
+}
 const NtdBriefcase = /* @__PURE__ */ createIcon({
     displayName: 'NtdBriefcase',
     paths: {
-        solid: (props) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, fill: props.primaryColor }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: props.primaryColor, strokeWidth: props.strokeWidth, fill: "none" }), within(props.uid, 'band', jsx("rect", { ...BRIEFCASE_CASE }), jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: props.accentColor, strokeWidth: "1.5", opacity: props.accentOpacity })), jsx("path", { d: BRIEFCASE_CLASP, fill: props.accentColor, opacity: props.accentOpacity }), jsx("rect", { ...BRIEFCASE_LOCK, fill: props.primaryColor })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: primaryColor, strokeWidth: "1.5" }), jsx("path", { d: BRIEFCASE_CLASP, fill: primaryColor })] })),
+        solid: (props) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, fill: props.primaryColor }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: props.primaryColor, strokeWidth: props.strokeWidth, fill: "none" }), briefcaseBand(props.uid, props.accentColor, props.strokeWidth * 1.5, props.accentOpacity), jsx("path", { d: BRIEFCASE_CLASP, fill: props.accentColor, opacity: props.accentOpacity }), jsx("rect", { ...BRIEFCASE_LOCK, fill: props.primaryColor })] })),
+        outline: ({ primaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), briefcaseBand(uid, primaryColor, strokeWidth), 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 }) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), within(uid, 'band', jsx("rect", { ...BRIEFCASE_CASE }), jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: secondaryColor, strokeWidth: "1.5" })), jsx("path", { d: BRIEFCASE_CLASP, fill: secondaryColor }), jsx("rect", { ...BRIEFCASE_LOCK, fill: primaryColor })] })),
-        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), within(uid, 'band', jsx("rect", { ...BRIEFCASE_CASE }), jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: secondaryColor, strokeWidth: "1.5" })), jsx("path", { d: BRIEFCASE_CLASP, fill: accentColor, opacity: accentOpacity }), jsx("rect", { ...BRIEFCASE_LOCK, fill: primaryColor })] })),
+        duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), briefcaseBand(uid, secondaryColor, strokeWidth * 1.5), jsx("path", { d: BRIEFCASE_CLASP, fill: secondaryColor }), jsx("rect", { ...BRIEFCASE_LOCK, fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsx("path", { d: BRIEFCASE_HANDLE, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), briefcaseBand(uid, secondaryColor, strokeWidth * 1.5), jsx("path", { d: BRIEFCASE_CLASP, fill: accentColor, opacity: accentOpacity })] })),
     },
 });
 // NtdDollar: a line glyph, twice the stroke width in every variant but `outline`; the stem runs
@@ -113,16 +120,19 @@ const NtdTrendDown = /* @__PURE__ */ createIcon({
     },
 });
 // NtdPercent: the dots are rings in every variant, a hole in each (they were plain discs when
-// filled).
-const PERCENT_DOT_TOP = 'M6.5 3.9a2.6 2.6 0 100 5.2 2.6 2.6 0 100-5.2zM6.5 5.4a1.1 1.1 0 100 2.2 1.1 1.1 0 100-2.2z';
-const PERCENT_DOT_BOTTOM = 'M17.5 14.9a2.6 2.6 0 100 5.2 2.6 2.6 0 100-5.2zM17.5 16.4a1.1 1.1 0 100 2.2 1.1 1.1 0 100-2.2z';
+// filled), 20% bigger than they were (r 3.1 with a 1.3 hole; 3 in the outline). The slash is a
+// line glyph: twice the stroke width in every variant but `outline`.
+const PERCENT_DOT_TOP = 'M6.5 3.4a3.1 3.1 0 100 6.2 3.1 3.1 0 100-6.2zM6.5 5.2a1.3 1.3 0 100 2.6 1.3 1.3 0 100-2.6z';
+const PERCENT_DOT_BOTTOM = 'M17.5 14.4a3.1 3.1 0 100 6.2 3.1 3.1 0 100-6.2zM17.5 16.2a1.3 1.3 0 100 2.6 1.3 1.3 0 100-2.6z';
+const PERCENT_SLASH = 'M19 5L5 19';
 const NtdPercent = /* @__PURE__ */ createIcon({
     displayName: 'NtdPercent',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "19", y1: "5", x2: "5", y2: "19", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: `${PERCENT_DOT_TOP}${PERCENT_DOT_BOTTOM}`, fillRule: "evenodd", fill: primaryColor })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "19", y1: "5", x2: "5", y2: "19", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "6.5", cy: "6.5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "17.5", cy: "17.5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "19", y1: "5", x2: "5", y2: "19", stroke: secondaryColor, strokeWidth: strokeWidth, opacity: secondaryOpacity + 0.2 }), jsx("path", { d: `${PERCENT_DOT_TOP}${PERCENT_DOT_BOTTOM}`, fillRule: "evenodd", fill: primaryColor })] })),
-        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "19", y1: "5", x2: "5", y2: "19", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: PERCENT_DOT_TOP, fillRule: "evenodd", fill: primaryColor }), jsx("path", { d: PERCENT_DOT_BOTTOM, fillRule: "evenodd", fill: secondaryColor })] })),
+        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: PERCENT_SLASH, stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: `${PERCENT_DOT_TOP}${PERCENT_DOT_BOTTOM}`, fillRule: "evenodd", fill: primaryColor })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: PERCENT_SLASH, stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "6.5", cy: "6.5", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "17.5", cy: "17.5", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        // fills only: the slash secondary, the rings primary
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: PERCENT_SLASH, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: `${PERCENT_DOT_TOP}${PERCENT_DOT_BOTTOM}`, fillRule: "evenodd", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: PERCENT_SLASH, stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: PERCENT_DOT_TOP, fillRule: "evenodd", fill: primaryColor }), jsx("path", { d: PERCENT_DOT_BOTTOM, fillRule: "evenodd", fill: secondaryColor })] })),
     },
 });
 // NtdInvoice: NtdFile's page with a short title, two rows of item and amount, and the total on

package/dist/esm/icons/ecommerce.js

@@ -77,13 +77,23 @@ const NtdDiscount = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "8", cy: "8", r: "2", fill: secondaryColor }), jsx("circle", { cx: "16", cy: "16", r: "2", fill: "#F59E0B" }), jsx("path", { d: "M7 17L17 7", stroke: "white", strokeWidth: "1", opacity: "0.35" })] })),
     },
 });
+// NtdPromoTag: a price tag with its hole and a percent sign on it, the sign turned 45° clockwise
+// — its slash lies across and the two dots sit above and below it. Filled, the sign is in the
+// accent colour like the hole (vivid: the hole secondary); duotone and the outline draw it primary.
+const PROMO_TAG = 'M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z';
+const PROMO_PERCENT_SLASH = 'M10 13h6.4';
+/** The percent sign's two dots, r 1.15, above and below the slash. */
+const PROMO_PERCENT_DOTS = 'M13.2 8.95a1.15 1.15 0 100 2.3 1.15 1.15 0 100-2.3zM13.2 14.75a1.15 1.15 0 100 2.3 1.15 1.15 0 100-2.3z';
+function promoPercent(color, width, opacity = 1) {
+    return (jsxs("g", { opacity: opacity, children: [jsx("path", { d: PROMO_PERCENT_SLASH, stroke: color, strokeWidth: width }), jsx("path", { d: PROMO_PERCENT_DOTS, fill: color })] }));
+}
 const NtdPromoTag = /* @__PURE__ */ createIcon({
     displayName: 'NtdPromoTag',
     paths: {
-        solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: primaryColor }), jsx("circle", { cx: "7", cy: "7", r: "2", fill: accentColor, opacity: accentOpacity })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "7", cy: "7", r: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "7", cy: "7", r: "1.5", fill: primaryColor })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: primaryColor }), jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "7", cy: "7", r: "2", fill: secondaryColor })] })),
+        solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: PROMO_TAG, fill: primaryColor }), jsx("circle", { cx: "7", cy: "7", r: "2", fill: accentColor, opacity: accentOpacity }), promoPercent(accentColor, strokeWidth * 1.5, accentOpacity)] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: PROMO_TAG, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "7", cy: "7", r: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), promoPercent(primaryColor, strokeWidth)] })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: PROMO_TAG, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: PROMO_TAG, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "7", cy: "7", r: "1.5", fill: primaryColor }), promoPercent(primaryColor, strokeWidth * 1.5)] })),
+        vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: PROMO_TAG, fill: primaryColor }), jsx("path", { d: PROMO_TAG, fill: "white", opacity: "0.08" }), jsx("circle", { cx: "7", cy: "7", r: "2", fill: secondaryColor }), promoPercent(accentColor, strokeWidth * 1.5, accentOpacity)] })),
     },
 });
 const NtdGiftCard = /* @__PURE__ */ createIcon({

package/dist/esm/icons/education.js

@@ -47,23 +47,30 @@ const NtdUniversity = /* @__PURE__ */ createIcon({
 // 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 1v13H7a2.5 2.5 0 000 5h13M18.7 16v5';
+// cover running on under the notch. The front cover is 12.2 high (3.5 → 15.7, 20% lower than it
+// was) and the block of pages 50% thicker (3.15, it was 2.1), the book centred in the box. The
+// cover carries one line of title, in the accent colour when filled, in its upper third (a quarter
+// of the way down; it was halfway); NtdBookBookmark adds a ribbon there and keeps the title
+// halfway, below it.
+const BOOK_SILHOUETTE = 'M7 3.5h12a1 1 0 011 1v11.2h-.9v3.15H20v.65a1 1 0 01-1 1H7a2.5 2.5 0 01-2.5-2.5V6A2.5 2.5 0 017 3.5z';
+const BOOK_PAGES = 'M6.6 15.7h11.4v3.15H6.6a1.575 1.575 0 010-3.15z';
+const BOOK_RIBBON = 'M9.5 3.5V8l1.75-1.3L13 8V3.5z';
+const BOOK_TITLE = 'M9.5 6.75h6.5';
+/** The title below NtdBookBookmark's ribbon. */
+const BOOK_TITLE_LOW = 'M9.5 10h6.5';
+const BOOK_OUTLINE = 'M4.5 17.5V6A2.5 2.5 0 017 3.5h12a1 1 0 011 1v10H7.5a3 3 0 000 6H20M18.7 14.5v6';
 /** 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';
+const BOOK_OUTLINE_FILL = 'M7 3.5h12a1 1 0 011 1v10h-1.3v6H7.5a3 3 0 01-3-3V6A2.5 2.5 0 017 3.5z';
 /** The book, with the ribbon bookmark or without it. */
 function bookIcon(displayName, ribbon) {
+    const title = ribbon ? BOOK_TITLE_LOW : BOOK_TITLE;
     return createIcon({
         displayName,
         paths: {
-            solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsx("path", { d: BOOK_PAGES }), ribbon && jsx("path", { d: BOOK_RIBBON })] })] })),
-            outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_OUTLINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && (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 }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_OUTLINE_FILL, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: BOOK_OUTLINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && jsx("path", { d: BOOK_RIBBON, fill: primaryColor })] })),
-            vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsx("path", { d: BOOK_PAGES, fill: accentColor, opacity: accentOpacity }), ribbon && jsx("path", { d: BOOK_RIBBON, fill: secondaryColor })] })),
+            solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsx("path", { d: BOOK_PAGES }), ribbon && jsx("path", { d: BOOK_RIBBON }), jsx("path", { d: title, stroke: accentColor, strokeWidth: "1.5", fill: "none" })] })] })),
+            outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: `${BOOK_OUTLINE}${title}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && (jsx("path", { d: "M9.5 4v4l1.75-1.3L13 8V4", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }))] })),
+            duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_OUTLINE_FILL, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: `${BOOK_OUTLINE}${title}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && jsx("path", { d: BOOK_RIBBON, fill: primaryColor })] })),
+            vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsx("path", { d: BOOK_PAGES }), jsx("path", { d: title, stroke: accentColor, strokeWidth: "1.5", fill: "none" })] }), ribbon && jsx("path", { d: BOOK_RIBBON, fill: secondaryColor })] })),
         },
     });
 }

package/dist/esm/icons/files.js

@@ -1,6 +1,6 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createIcon } from '../createIcon.js';
-import { paperIcon, within } from '../iconParts.js';
+import { within, paperIcon } from '../iconParts.js';
 
 // NtdFile is the page every paper icon is drawn on (`paperIcon` in iconParts.tsx): the fold is
 // 8 now (7 before — the duotone's stroked fold looked the largest), secondary when the page is
@@ -189,19 +189,25 @@ const NtdSmartphone = /* @__PURE__ */ createIcon({
 });
 // NtdMonitor: the neck and the base are twice the stroke width in every variant but `outline`, and
 // the base is 30% wider — 13 across with its caps (it was 10); it sits at 21.5 so the heavier line
-// stays in the box. Vivid: the stand secondary (it had a fixed #3B82F6 neck).
+// stays in the box. Vivid: the stand secondary (it had a fixed #3B82F6 neck). The stand is clipped
+// to below the screen's bottom edge: the neck's round cap reached up over the screen, which showed
+// through duotone's see-through screen.
 const MONITOR_SCREEN = { x: 2, y: 3, width: 20, height: 14, rx: 2 };
 /** Neck and base for a line twice the stroke width: base 9 long + 2 × 2 of cap = 13. */
 const MONITOR_STAND = 'M12 17v4.5M7.5 21.5h9';
 /** The outline's neck and base, at the stroke width: base 11 long + 2 × 1 of cap = 13. */
 const MONITOR_STAND_LINE = 'M12 17v4M6.5 21h11';
+/** The stand, drawn only below the screen's bottom edge (y 17). */
+function monitorStand(uid, d, color, width) {
+    return within(uid, 'stand', jsx("rect", { x: "0", y: "17", width: "24", height: "7" }), jsx("path", { d: d, stroke: color, strokeWidth: width }));
+}
 const NtdMonitor = /* @__PURE__ */ createIcon({
     displayName: 'NtdMonitor',
     paths: {
-        solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...MONITOR_SCREEN, fill: primaryColor }), jsx("path", { d: MONITOR_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...MONITOR_SCREEN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: MONITOR_STAND_LINE, stroke: primaryColor, strokeWidth: strokeWidth })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...MONITOR_SCREEN, fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { ...MONITOR_SCREEN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: MONITOR_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
-        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...MONITOR_SCREEN, fill: primaryColor }), jsx("path", { d: MONITOR_STAND, stroke: secondaryColor, strokeWidth: strokeWidth * 2 })] })),
+        solid: ({ primaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...MONITOR_SCREEN, fill: primaryColor }), monitorStand(uid, MONITOR_STAND, primaryColor, strokeWidth * 2)] })),
+        outline: ({ primaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...MONITOR_SCREEN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), monitorStand(uid, MONITOR_STAND_LINE, primaryColor, strokeWidth)] })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...MONITOR_SCREEN, fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { ...MONITOR_SCREEN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), monitorStand(uid, MONITOR_STAND, primaryColor, strokeWidth * 2)] })),
+        vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...MONITOR_SCREEN, fill: primaryColor }), monitorStand(uid, MONITOR_STAND, secondaryColor, strokeWidth * 2)] })),
     },
 });
 // NtdCpu: filled, the body and its pins primary and the die in the accent colour (the body was a
@@ -297,12 +303,14 @@ const NtdCreditCard = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...CARD_BODY, fill: primaryColor }), jsx("rect", { ...CARD_BODY, fill: "white", opacity: "0.1" }), within(uid, 'stripe', jsx("rect", { ...CARD_BODY }), jsx("rect", { ...CARD_STRIPE, fill: "black", opacity: "0.35" })), jsx("rect", { ...CARD_SIGNATURE, fill: accentColor, opacity: accentOpacity }), jsx("rect", { ...CARD_CVV, fill: accentColor, opacity: accentOpacity })] })),
     },
 });
-// NtdPieChart: filled, two sectors of one pie (r 10) pulled 0.7 apart along the small one's
-// diagonal — a gap between them. The larger is the three-quarter sector from the centre; it was a
-// segment cut off by a chord, which read as an odd shape. The outline keeps its open arc and the
-// slice. Duotone, fills only: the larger sector secondary, the slice primary; vivid the other way.
-const PIE_REST = 'M11.3 12.7V2.7A10 10 0 1 0 21.3 12.7Z';
-const PIE_SLICE = 'M12.7 11.3V1.3A10 10 0 0 1 22.7 11.3Z';
+// NtdPieChart: filled, two sectors of one pie (r 10) pulled 1 apart along the small one's middle
+// — a gap between them. The larger is the three-quarter sector from the centre; it was a segment
+// cut off by a chord, which read as an odd shape. The whole chart is turned 45° clockwise, so the
+// slice points right (it filled the top-right quarter). The outline keeps its open arc and the
+// slice, turned the same way. Duotone, fills only: the larger sector secondary, the slice primary;
+// vivid the other way.
+const PIE_REST = 'M11 12L18.07 4.93A10 10 0 1 0 18.07 19.07Z';
+const PIE_SLICE = 'M13 12L20.07 4.93A10 10 0 0 1 20.07 19.07Z';
 function pieFilled(rest, slice) {
     return (jsxs(Fragment, { children: [jsx("path", { d: PIE_REST, fill: rest }), jsx("path", { d: PIE_SLICE, fill: slice })] }));
 }
@@ -310,7 +318,7 @@ const NtdPieChart = /* @__PURE__ */ createIcon({
     displayName: 'NtdPieChart',
     paths: {
         solid: ({ primaryColor }) => pieFilled(primaryColor, primaryColor),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21.21 15.89A10 10 0 118 2.83", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M22 12A10 10 0 0012 2v10h10z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M15.76 21.27A10 10 0 1 1 15.65 2.69", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M19.07 19.07A10 10 0 0 0 19.07 4.93L12 12z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
         duotone: ({ primaryColor, secondaryColor }) => pieFilled(secondaryColor, primaryColor),
         vivid: ({ primaryColor, secondaryColor }) => pieFilled(primaryColor, secondaryColor),
     },

package/dist/esm/icons/health.js

@@ -100,29 +100,45 @@ const NtdEgg = /* @__PURE__ */ createIcon({
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("ellipse", { cx: "12", cy: "14", rx: "7", ry: "8", fill: primaryColor }), jsx("ellipse", { cx: "12", cy: "14", rx: "7", ry: "8", fill: "white", opacity: "0.1" })] })),
     },
 });
-// NtdHamburger: even layers of one width — a low domed top bun, a thin wavy band of sauce, the
-// patty and the bottom bun — each standing apart. (The top was a tall half circle and the bottom
-// bun wider than everything above it.) The bun is plain and the sauce half as tall as before.
-const BURGER_TOP = 'M3 9.4C3 6.4 7 4 12 4s9 2.4 9 5.4a1 1 0 01-1 1H4a1 1 0 01-1-1z';
-const BURGER_SAUCE = 'M3 12c1.5-.5 3-.5 4.5 0s3 .5 4.5 0 3-.5 4.5 0 3 .5 4.5 0';
-const BURGER_PATTY = { x: 2.5, y: 13.6, width: 19, height: 2.9, rx: 1.45 };
-const BURGER_BOTTOM = 'M3 17.6h18v1.4a2 2 0 01-2 2H5a2 2 0 01-2-2z';
+// NtdHamburger: three even layers of one width — a low domed top bun, the patty and the bottom bun
+// — each standing apart by the same gap. (The top was a tall half circle and the bottom bun wider
+// than everything above it; the wavy band of sauce between the bun and the patty is gone.)
+// Duotone, fills only: the buns secondary, the patty primary; vivid the patty secondary.
+const BURGER_TOP = 'M3 10C3 6.7 7 4 12 4s9 2.7 9 6a1 1 0 01-1 1H4a1 1 0 01-1-1z';
+const BURGER_PATTY = { x: 2.5, y: 12.3, width: 19, height: 3.4, rx: 1.7 };
+const BURGER_BOTTOM = 'M3 17h18v2a2 2 0 01-2 2H5a2 2 0 01-2-2z';
+function burgerFilled(buns, patty) {
+    return (jsxs(Fragment, { children: [jsx("path", { d: BURGER_TOP, fill: buns }), jsx("rect", { ...BURGER_PATTY, fill: patty }), jsx("path", { d: BURGER_BOTTOM, fill: buns })] }));
+}
 const NtdHamburger = /* @__PURE__ */ createIcon({
     displayName: 'NtdHamburger',
     paths: {
-        solid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: BURGER_TOP, fill: primaryColor }), jsx("path", { d: BURGER_SAUCE, stroke: secondaryColor, strokeWidth: "1.1", fill: "none" }), jsx("rect", { ...BURGER_PATTY, fill: primaryColor }), jsx("path", { d: BURGER_BOTTOM, fill: primaryColor })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: BURGER_TOP, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: BURGER_SAUCE, stroke: primaryColor, strokeWidth: strokeWidth * 0.55, fill: "none" }), jsx("rect", { ...BURGER_PATTY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: BURGER_BOTTOM, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: BURGER_TOP, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: BURGER_TOP, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: BURGER_SAUCE, stroke: primaryColor, strokeWidth: strokeWidth * 0.55, fill: "none" }), jsx("rect", { ...BURGER_PATTY, fill: primaryColor }), jsx("path", { d: BURGER_BOTTOM, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: BURGER_BOTTOM, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: BURGER_TOP, fill: primaryColor }), jsx("path", { d: BURGER_TOP, fill: "white", opacity: "0.12" }), jsx("path", { d: BURGER_SAUCE, stroke: secondaryColor, strokeWidth: "1.1", fill: "none" }), jsx("rect", { ...BURGER_PATTY, fill: primaryColor }), jsx("rect", { ...BURGER_PATTY, fill: "black", opacity: "0.2" }), jsx("path", { d: BURGER_BOTTOM, fill: primaryColor })] })),
+        solid: ({ primaryColor }) => burgerFilled(primaryColor, primaryColor),
+        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: BURGER_TOP, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { ...BURGER_PATTY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: BURGER_BOTTOM, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+        duotone: ({ primaryColor, secondaryColor }) => burgerFilled(secondaryColor, primaryColor),
+        vivid: ({ primaryColor, secondaryColor }) => burgerFilled(primaryColor, secondaryColor),
     },
 });
+// NtdDna: a double helix inside the box (the strands ran out of it, down to y 26) — two strands,
+// x = 12 ± 6·cos(π(y − 2)/10), crossing at y 7 and 17, apart at the ends and in the middle; eight
+// base pairs (it had three of odd lengths), two units apart and none near a crossing, each running
+// exactly from strand to strand. Line glyph: the strands twice the stroke width in every variant
+// but `outline`, the pairs at the stroke width, drawn under the strands so their ends hide in them.
+const DNA_STRAND_A = 'M18 2C18 3.67 15.14 5.33 12 7S6 10.33 6 12S8.86 15.33 12 17S18 20.33 18 22';
+const DNA_STRAND_B = 'M6 2C6 3.67 8.86 5.33 12 7S18 10.33 18 12S15.14 15.33 12 17S6 20.33 6 22';
+const DNA_PAIRS = 'M6.29 3h11.42M8.47 5h7.06M8.47 9h7.06M6.29 11h11.42M6.29 13h11.42M8.47 15h7.06M8.47 19h7.06M6.29 21h11.42';
+function dnaHelix(strandA, strandB, pairs, strand, pair) {
+    return (jsxs(Fragment, { children: [jsx("path", { d: DNA_PAIRS, stroke: pairs, strokeWidth: pair }), jsx("path", { d: DNA_STRAND_B, stroke: strandB, strokeWidth: strand, fill: "none" }), jsx("path", { d: DNA_STRAND_A, stroke: strandA, strokeWidth: strand, fill: "none" })] }));
+}
 const NtdDna = /* @__PURE__ */ createIcon({
     displayName: 'NtdDna',
     paths: {
-        solid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M6 2c0 5 12 7 12 12s-12 7-12 12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M18 2c0 5-12 7-12 12s12 7 12 12", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: 0.6 }), jsx("line", { x1: "7", y1: "7", x2: "17", y2: "7", stroke: primaryColor, strokeWidth: "1.5" }), jsx("line", { x1: "7", y1: "17", x2: "17", y2: "17", stroke: primaryColor, strokeWidth: "1.5" }), jsx("line", { x1: "6", y1: "12", x2: "18", y2: "12", stroke: primaryColor, strokeWidth: "1.5" })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M6 2c0 5 12 7 12 12s-12 7-12 12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M18 2c0 5-12 7-12 12s12 7 12 12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "7", y1: "7", x2: "17", y2: "7", stroke: primaryColor, strokeWidth: "1.5" }), jsx("line", { x1: "7", y1: "17", x2: "17", y2: "17", stroke: primaryColor, strokeWidth: "1.5" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 2c0 5-12 7-12 12s12 7 12 12", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsx("path", { d: "M6 2c0 5 12 7 12 12s-12 7-12 12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "7", y1: "7", x2: "17", y2: "7", stroke: primaryColor, strokeWidth: "1.5" }), jsx("line", { x1: "7", y1: "17", x2: "17", y2: "17", stroke: primaryColor, strokeWidth: "1.5" })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M6 2c0 5 12 7 12 12s-12 7-12 12", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsx("path", { d: "M18 2c0 5-12 7-12 12s12 7 12 12", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("line", { x1: "7", y1: "7", x2: "17", y2: "7", stroke: "#EF4444", strokeWidth: "1.5" }), jsx("line", { x1: "7", y1: "17", x2: "17", y2: "17", stroke: secondaryColor, strokeWidth: "1.5" }), jsx("line", { x1: "6", y1: "12", x2: "18", y2: "12", stroke: secondaryColor, strokeWidth: "1.5" })] })),
+        solid: ({ primaryColor, strokeWidth }) => dnaHelix(primaryColor, primaryColor, primaryColor, strokeWidth * 2, strokeWidth),
+        outline: ({ primaryColor, strokeWidth }) => dnaHelix(primaryColor, primaryColor, primaryColor, strokeWidth, strokeWidth),
+        // the strands primary, the pairs secondary
+        duotone: ({ primaryColor, secondaryColor, strokeWidth }) => dnaHelix(primaryColor, primaryColor, secondaryColor, strokeWidth * 2, strokeWidth),
+        // one strand primary, the other and the pairs secondary
+        vivid: ({ primaryColor, secondaryColor, strokeWidth }) => dnaHelix(primaryColor, secondaryColor, secondaryColor, strokeWidth * 2, strokeWidth),
     },
 });
 

package/dist/esm/icons/media.js

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

package/dist/esm/icons/travel.js

@@ -44,15 +44,15 @@ const NtdCar = /* @__PURE__ */ createIcon({
 // 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.
+// read oddly), showing 2 below it — low-floor (they showed 3). 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';
+const BUS_WHEELS = 'M5.5 18h3v2a1 1 0 01-1 1h-1a1 1 0 01-1-1zM15.5 18h3v2a1 1 0 01-1 1h-1a1 1 0 01-1-1z';
 function busFilled({ primaryColor, uid }, glass, details, detailOpacity) {
     return (jsxs(Fragment, { children: [jsx("path", { d: BUS_WHEELS, fill: primaryColor }), jsx("rect", { ...BUS_BODY, fill: primaryColor }), jsxs("g", { opacity: detailOpacity, children: [jsx("path", { d: BUS_LIGHTS, fill: details }), within(uid, 'body', jsx("rect", { ...BUS_BODY }), jsx("path", { d: BUS_BUMPER, stroke: details, strokeWidth: "1.2" }))] }), jsx("rect", { ...BUS_WINDOW, fill: glass }), within(uid, 'window', jsx("rect", { ...BUS_WINDOW }), jsx("path", { d: BUS_DRIVER, fill: primaryColor }))] }));
 }
@@ -60,7 +60,7 @@ const NtdBus = /* @__PURE__ */ createIcon({
     displayName: 'NtdBus',
     paths: {
         solid: (props) => busFilled(props, props.accentColor, props.accentColor, props.accentOpacity),
-        outline: ({ primaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...BUS_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { ...BUS_WINDOW, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), within(uid, 'window', jsx("rect", { ...BUS_WINDOW }), jsx("path", { d: BUS_DRIVER, fill: primaryColor })), 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 }), 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" })] })),
+        outline: ({ primaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...BUS_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { ...BUS_WINDOW, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), within(uid, 'window', jsx("rect", { ...BUS_WINDOW }), jsx("path", { d: BUS_DRIVER, fill: primaryColor })), 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 }), jsx("path", { d: "M6 19v1a1 1 0 001 1h1a1 1 0 001-1v-1M15 19v1a1 1 0 001 1h1a1 1 0 001-1v-1", 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),

package/dist/esm/icons/ui.js

@@ -34,9 +34,9 @@ const NtdUser = /* @__PURE__ */ createIcon({
 });
 // NtdAdmin: NtdUser in a tie — the same head and shoulders, a knot at the collar and a blade that
 // runs down the chest to the bottom edge, cut off there (a whole short tie with its tip read
-// comic).
+// comic). The tie is twice as wide as it was, knot and blade: 5.2 at the collar, 6.8 at the edge.
 const ADMIN_BODY = 'M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2';
-const ADMIN_TIE = 'M10.7 15.3h2.6l-.65 1.8 1.05 4.8h-3.4l1.05-4.8z';
+const ADMIN_TIE = 'M9.4 15.3h5.2l-1.3 1.8 2.1 4.8H8.6l2.1-4.8z';
 const NtdAdmin = /* @__PURE__ */ createIcon({
     displayName: 'NtdAdmin',
     paths: {
@@ -214,13 +214,14 @@ const NtdCalendar = /* @__PURE__ */ createIcon({
         vivid: calendarFilled,
     },
 });
+// NtdTag: the hole sits on the tag's axis close to the point (5.5, 5.5; it was 7, 7).
 const NtdTag = /* @__PURE__ */ createIcon({
     displayName: 'NtdTag',
     paths: {
-        solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth: _strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: primaryColor }), jsx("circle", { cx: "7", cy: "7", r: "1.5", fill: accentColor, opacity: accentOpacity })] })),
-        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "7", cy: "7", r: "1", fill: primaryColor })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "7", cy: "7", r: "1.5", fill: primaryColor })] })),
-        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: primaryColor }), jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "7", cy: "7", r: "1.5", fill: secondaryColor })] })),
+        solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth: _strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: primaryColor }), jsx("circle", { cx: "5.5", cy: "5.5", r: "1.5", fill: accentColor, opacity: accentOpacity })] })),
+        outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "5.5", cy: "5.5", r: "1", fill: primaryColor })] })),
+        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "5.5", cy: "5.5", r: "1.5", fill: primaryColor })] })),
+        vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: primaryColor }), jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "5.5", cy: "5.5", r: "1.5", fill: secondaryColor })] })),
     },
 });
 /** The backspace key: a key shape pointing left with a cross inside (delete the last character). */