@nice2dev/icons 1.3.6 → 1.3.8

package/CHANGELOG.md

@@ -1,5 +1,93 @@
 # @nice2dev/icons — Changelog
 
+## 1.3.8
+
+### Patch Changes
+
+- f389149: Duotone draws the larger area in primary. 373 of the 541 core icons drew their body in pale
+  secondary under a primary outline.
+
+  - Icons with details now draw duotone as the solid, with those details in full secondary
+    (`paths.duotone` may be left out; `createIcon` derives it that way).
+  - Icons without details, and the fills-only splits whose larger part was secondary (Download,
+    Upload, User, Dollar, PieChart, Undo / Redo, Wifi, …), have their colours swapped through the
+    new `swapDuotone` helper: body primary, outline and details secondary.
+  - NtdSearch / NtdZoomIn / NtdZoomOut fill the lens in primary under a secondary handle and glyph.
+  - NtdForge got a duotone of its own.
+
+  A duotone without a `secondaryColor` now reads as one colour where it used to rely on
+  `secondaryOpacity`; pass a secondary colour for two tones.
+
+- a947882: Icon feedback round 39:
+
+  - NtdBriefcase: the handle is 1.5 × the stroke width on the filled cases.
+  - NtdCode: twice the stroke width in every variant but outline (vivid had a fixed 2.2), with sharp
+    points. Duotone is vivid's split: right bracket primary, left secondary.
+  - NtdMoreHorizontal / NtdMoreVertical: in vivid, the outer dots are primary and the middle one
+    secondary. The last dot was a fixed `#3B82F6`, and the white sheen is gone.
+  - NtdTrash: the lid is flat with its ends bent down, as round as the bin's bottom corners.
+
+- cbee657: Core container icons keep a spot for stacked icons and text. Each spot was measured as the largest
+  circle inside the icon's silhouette, then checked by eye: NtdBell / NtdBellRing (the body above
+  the clapper), NtdBookmark, NtdBubble, NtdChat, NtdCalendar, NtdCamera, NtdClipboard, NtdCloud,
+  NtdCoffee, NtdDroplet, NtdEgg, NtdFile and every paper icon (the page below the fold), NtdFolder /
+  NtdFolderOpen, NtdMonitor, NtdAward, NtdTrophy, NtdLock, NtdBriefcase, NtdBattery, NtdBackspace,
+  NtdDiamond, NtdPentagon, NtdPlay, NtdVideo, NtdFlag, NtdGhost, NtdWishlist and the gaming
+  NtdShield / NtdStar / NtdTrophy.
+- 8eca993: Icons keep a spot for what is stacked in them. `createIcon` takes `perfectStackX` /
+  `perfectStackY` (the spot's centre in the 24-unit box), `perfectStackRotation` and
+  `perfectStackSize`. A child without a `stackAlign` goes there (the new default `'perfect'`), and
+  so does text, turned with it and scaled to it. Without them, the spot is the icon's `textCenter`,
+  else the box centre. `stackAlign="center"` is still the middle of the box. NtdPin keeps its head,
+  NtdTag the stretch past its hole, turned 45° along the tag. NtdPin no longer has the dot; the pin
+  with the dot is the new `NtdMapPin` (`'map-pin'` in the resolver). NiceIconStacker offers
+  `perfect` first, shows the spot's size and turn as the layer's defaults, and writes `stackAlign`
+  only for another position.
+
+## 1.3.7
+
+### Patch Changes
+
+- f527e94: Icon fixes from showcase feedback round 37:
+
+  - **NtdHamburger:** the wavy sauce is gone, leaving three even layers. Duotone uses fills only.
+  - **NtdBook / NtdBookBookmark:** the front cover is 20% lower and carries a line of title.
+  - **NtdMountain:** solid is all primary, with the snow line cut in the accent colour.
+  - **NtdBriefcase:**
+    - the band and clasp sit higher;
+    - the outline's band ends flush with the sides and follows `strokeWidth`;
+    - vivid's clasp is all accent.
+  - **NtdPercent:** the rings are 20% bigger and the slash is twice the stroke width.
+  - **NtdBus:** the wheels are lower.
+  - **NtdMonitor:** the stand no longer reaches over the screen.
+  - **NtdPieChart:** turned 45° clockwise.
+  - **NtdPromoTag:** gains a percent sign turned 45° clockwise.
+
+- d4d6211: Icon fixes from showcase feedback round 38:
+
+  - **NtdBook:** the title sits higher and the block of pages is 50% thicker. NtdBookBookmark keeps
+    its title below the ribbon.
+  - **NtdAdmin:** the tie is twice as wide.
+  - **NtdTag:** the hole sits closer to the point.
+  - **NtdTrash:** the lid and the handle are smaller. Vivid uses the theme colours instead of a fixed
+    blue.
+  - **NtdDna:** redrawn as a double helix that stays inside the box, with eight thin base pairs
+    running strand to strand.
+
+- b321834: Stacked icons can be moved precisely:
+
+  - **`stackOffsetX` / `stackOffsetY`:** move a stacked icon from where `stackAlign` puts it. The
+    value is a percent of the parent icon's width or height, so the move scales with the icon:
+    positive X is right, positive Y is down. A turn (`stackRotation`) follows the moved icon's
+    centre.
+  - **NiceIconStacker:** "Shift right" and "Shift down" sliders (−50…50%) under "More", written to
+    the code. The layers keep them as `offsetX` / `offsetY`, which `NiceIconStack` draws.
+  - **Translations:** new keys `iconStacker.offsetX` and `iconStacker.offsetY`.
+
+- 9f58a4e: The default `strokeWidth` of the icons is now 1 (it was 2, and 1.5 in the server-component
+  icons), so the icons draw thinner lines by default. Glyph strokes on filled variants follow it at
+  twice the width. Pass `strokeWidth={2}` to keep the old weight.
+
 ## 1.3.6
 
 ### Patch Changes

package/README.md

@@ -105,7 +105,7 @@ Every icon component accepts these props (extends `SVGProps<SVGSVGElement>`):
 | `primaryOpacity`    | `number`                        | `1`              | Opacity of primary elements (0–1)   |
 | `secondaryOpacity`  | `number`                        | `0.4`            | Opacity of secondary elements (0–1) |
 | `accentOpacity`     | `number`                        | `1`              | Opacity of accent elements (0–1)    |
-| `strokeWidth`       | `number`                        | `2`              | Base stroke width for outline/duotone |
+| `strokeWidth`       | `number`                        | `1`              | Base stroke width for outline/duotone |
 | `strokeLinecap`     | `'round' \| 'square' \| 'butt'` | `'round'`        | Stroke line cap style                 |
 | `strokeLinejoin`    | `'round' \| 'miter' \| 'bevel'` | `'round'`        | Stroke line join style                |
 | `animation`         | `IconAnimation`                 | `undefined`      | CSS animation name                    |
@@ -207,12 +207,13 @@ See [Full Animation Catalog](#full-animation-catalog) for the complete list.
 
 ### Stacking icons
 
-Nest icons to stack them in one SVG. A child icon sits where its `stackAlign` says, and text is
-centred on the icon:
+Nest icons to stack them in one SVG. A child icon sits where its `stackAlign` says. Without one, it
+goes to the spot its parent keeps for stacked icons (a pin's head, along a tag), or the centre if
+the parent keeps none. Text goes to that spot too:
 
 ```tsx
 <NtdSquare variant="solid">
-  <NtdStar stackAlign="center">1</NtdStar>
+  <NtdStar>1</NtdStar>
 </NtdSquare>
 
 <NtdFolder>
@@ -221,6 +222,12 @@ centred on the icon:
 
 <NtdCircle>42</NtdCircle>
 
+<NtdPin>
+  <NtdStar />
+</NtdPin>
+
+<NtdTag>SALE</NtdTag>
+
 <NtdBitcoin>
   <NtdStar>
     <NtdSparkle>1</NtdSparkle>
@@ -230,10 +237,19 @@ centred on the icon:
 
 Stacks nest any number of levels deep, with the colours flipping at every level.
 
-- **`stackAlign`:** `center` (default), `top`, `bottom`, `left`, `right`, `top-left`,
-  `top-right`, `bottom-left`, `bottom-right`, plus each of them with `half-` (`half-top`,
-  `half-bottom-right`, …), halfway from the centre to that edge or corner.
-- **`stackSize`:** the child's share of its parent. Default `0.6` centred, `0.5` elsewhere.
+- **`stackAlign`:** `perfect` (default: the parent's own spot), `center` (the middle of the box),
+  `top`, `bottom`, `left`, `right`, `top-left`, `top-right`, `bottom-left`, `bottom-right`, plus
+  each of them with `half-` (`half-top`, `half-bottom-right`, …), halfway from the centre to that
+  edge or corner.
+- **The parent's own spot:** an icon declares it with `createIcon`'s `perfectStackX` /
+  `perfectStackY` (its centre in the 24-unit box), `perfectStackRotation` (degrees clockwise) and
+  `perfectStackSize` (a child's share). For example, `NtdPin` keeps its head (12, 10, half the
+  pin) and `NtdTag` the stretch past its hole, turned 45° along the tag. Without them, the spot is
+  the icon's `textCenter`, else the centre. A child there takes the spot's size and turn, unless
+  it sets its own `stackSize` / `stackRotation`; text there turns with it and scales to its size.
+  `NtdMapPin` is the pin with the dot in its head (`NtdPin` had it until 1.3.8).
+- **`stackSize`:** the child's share of its parent. Default: the spot's size at `perfect`, `0.6`
+  centred, `0.5` elsewhere.
 - **Colours** follow the parent unless the child sets its own:
   - In the centre or at an edge, a filled parent cuts the content out. The child takes the
     parent's accent and its text the parent's primary. On `outline` / `wireframe` everything stays
@@ -241,6 +257,9 @@ Stacks nest any number of levels deep, with the colours flipping at every level.
   - A corner badge keeps the parent's colours and sits on an accent-coloured gap.
 - **`stackRotation`:** turns a stacked icon about its own centre, in degrees clockwise. Its
   contents and text turn with it.
+- **`stackOffsetX` / `stackOffsetY`:** move a stacked icon from where `stackAlign` puts it, in
+  percent of the parent's width or height (positive is right or down). Being relative, the nudge
+  scales with the icon: `<NtdStar stackAlign="top-right" stackOffsetX={-5} stackOffsetY={5} />`.
 - **Text:** the default size is 9, 7.5, 6 or 5 in the 24-unit box (by length). `textColor` and
   `textSize` override the text's colour and size.
 - **Data:** `NiceIconStack` draws a stack kept as data (NiceIconStacker's layers), its bound text
@@ -418,14 +437,15 @@ export const NtdMyIcon = createIcon({
 
 ### CreateIconOptions
 
-| Field           | Type               | Default       | Description                   |
-| --------------- | ------------------ | ------------- | ----------------------------- |
-| `displayName`   | `string`           | **required**  | React display name            |
-| `viewBox`       | `string`           | `'0 0 24 24'` | SVG viewBox                   |
-| `paths.solid`   | `IconPathRenderer` | **required**  | Solid variant renderer        |
-| `paths.outline` | `IconPathRenderer` | **required**  | Outline variant renderer      |
-| `paths.duotone` | `IconPathRenderer` | **required**  | Duotone variant renderer      |
-| `paths.flat`    | `IconPathRenderer` | **required**  | Flat (badge) variant renderer |
+| Field                                                                           | Type               | Default                           | Description                                               |
+| ------------------------------------------------------------------------------- | ------------------ | --------------------------------- | --------------------------------------------------------- |
+| `displayName`                                                                   | `string`           | **required**                      | React display name                                        |
+| `viewBox`                                                                       | `string`           | `'0 0 24 24'`                     | SVG viewBox                                               |
+| `paths.solid`                                                                   | `IconPathRenderer` | **required**                      | Solid variant renderer                                    |
+| `paths.outline`                                                                 | `IconPathRenderer` | **required**                      | Outline variant renderer                                  |
+| `paths.duotone`                                                                 | `IconPathRenderer` | solid, details in secondary       | Duotone variant renderer: the larger part primary (1.3.8) |
+| `perfectStackX` / `perfectStackY` / `perfectStackRotation` / `perfectStackSize` | `number`           | `textCenter` / box centre, 0, 0.6 | The spot stacked icons and text go to (1.3.8)             |
+| `paths.flat`                                                                    | `IconPathRenderer` | **required**                      | Flat (badge) variant renderer                             |
 
 ### IconPathRenderer
 
@@ -464,7 +484,7 @@ Properties passed to every path renderer (pre-resolved from user props):
 
 ### UI & Status (27 icons)
 
-`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`
+`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` · `NtdMapPin` · `NtdSun` · `NtdMoon`
 
 ### Media & Communication (19 icons)
 

package/dist/cjs/NiceIconStacker.js

@@ -9,6 +9,7 @@ var iconStack = require('./iconStack.js');
 var stacking = require('./stacking.js');
 
 const ALIGNS = [
+    'perfect',
     'center',
     'top',
     'bottom',
@@ -68,6 +69,8 @@ function removeLayer(layers, id) {
         align: undefined,
         size: undefined,
         rotation: undefined,
+        offsetX: undefined,
+        offsetY: undefined,
     };
     return [
         newBase,
@@ -159,19 +162,30 @@ const NiceIconStacker = React.forwardRef(function NiceIconStacker({ icons, layer
     return (jsxRuntime.jsxs("div", { className: ['nice-icon-stacker', className].filter(Boolean).join(' '), children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__toolbar", children: [jsxRuntime.jsxs("button", { type: "button", onClick: add, disabled: !current, children: [jsxRuntime.jsx(actions.NtdPlus, { size: 14 }), " ", addLabel] }), jsxRuntime.jsxs("button", { type: "button", onClick: clear, disabled: layers.length === 0, children: [jsxRuntime.jsx(actions.NtdTrash, { size: 14 }), " ", t('iconStacker.clear', 'Clear the stack')] })] }), !base ? (jsxRuntime.jsx("p", { className: "nice-icon-stacker__empty", children: t('iconStacker.empty', 'The stack is empty. Add an icon to start one.') })) : (jsxRuntime.jsxs("div", { className: "nice-icon-stacker__body", children: [jsxRuntime.jsx("div", { className: "nice-icon-stacker__preview", "aria-label": t('iconStacker.preview', 'Preview'), role: "group", children: PREVIEW_SIZES.map((s) => (jsxRuntime.jsxs("span", { className: "nice-icon-stacker__preview-cell", children: [iconStack.renderIconStack(layers, icons, {
                                     baseProps: { ...previewProps, size: s, title: base.icon },
                                 }), jsxRuntime.jsxs("small", { children: [s, "px"] })] }, s))) }), jsxRuntime.jsx("ol", { className: "nice-icon-stacker__layers", "aria-label": t('iconStacker.layers', 'Layers'), children: tree.map(({ layer: l, depth }) => {
-                            var _a, _b, _c, _d, _e, _f, _g, _h;
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                             const Icon = resolve(l.icon);
                             const isBase = l === base;
-                            const align = (_a = l.align) !== null && _a !== void 0 ? _a : 'center';
-                            const share = (_b = l.size) !== null && _b !== void 0 ? _b : stacking.defaultStackSize(align);
+                            const align = (_a = l.align) !== null && _a !== void 0 ? _a : 'perfect';
+                            // the spot the parent keeps for stacked icons (1.3.8): its size and turn are the
+                            // layer's defaults while it sits there
+                            const parentId = iconStack.stackParentId(layers, l);
+                            const parentLayer = parentId ? layers.find((p) => p.id === parentId) : undefined;
+                            const spot = (parentLayer && stacking.perfectStackOf(resolve(parentLayer.icon))) || stacking.BOX_PERFECT_STACK;
+                            const atSpot = align === 'perfect';
+                            const share = (_b = l.size) !== null && _b !== void 0 ? _b : (atSpot ? spot.size : stacking.defaultStackSize(align));
+                            const turnDefault = atSpot ? spot.rotation : 0;
+                            const turn = (_c = l.rotation) !== null && _c !== void 0 ? _c : turnDefault;
                             const innermost = iconStack.stackChildrenOf(layers, l.id).length === 0;
-                            const textSize = (_c = l.textSize) !== null && _c !== void 0 ? _c : stacking.defaultTextSize(((_d = l.text) !== null && _d !== void 0 ? _d : '').length || 1);
+                            const textSize = (_d = l.textSize) !== null && _d !== void 0 ? _d : stacking.defaultTextSize(((_e = l.text) !== null && _e !== void 0 ? _e : '').length || 1, (_f = stacking.perfectStackOf(Icon)) === null || _f === void 0 ? void 0 : _f.size);
                             const bindingInvalid = !!l.textBinding && !iconStack.isValidTextBinding(l.textBinding);
                             const depthStyle = {
                                 ['--nice-icon-stacker-depth']: String(depth),
                             };
                             const label = (key, fallback) => t(key, fallback).replace('{icon}', l.icon);
-                            return (jsxRuntime.jsxs("li", { className: "nice-icon-stacker__layer", style: depthStyle, children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__layer-row", children: [jsxRuntime.jsx("input", { type: "radio", name: targetGroup, checked: (target === null || target === void 0 ? void 0 : target.id) === l.id, onChange: () => setSelected(l.id), "aria-label": label('iconStacker.target', 'Add the next icon into {icon}'), title: label('iconStacker.target', 'Add the next icon into {icon}') }), jsxRuntime.jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsxRuntime.jsx(Icon, { size: 24, variant: l.variant }) : null }), jsxRuntime.jsxs("span", { className: "nice-icon-stacker__layer-name", children: [l.icon, isBase && (jsxRuntime.jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') }))] }), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.align', 'Position') }), jsxRuntime.jsx("select", { value: align, onChange: (e) => update(l.id, { align: e.target.value }), children: ALIGNS.map((a) => (jsxRuntime.jsx("option", { value: a, children: a }, a))) })] })), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.size', 'Size') }), jsxRuntime.jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(l.id, { size: Number(e.target.value) }) }), jsxRuntime.jsxs("output", { children: [Math.round(share * 100), "%"] })] })), jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__remove", onClick: () => remove(l.id), "aria-label": label('iconStacker.remove', 'Remove {icon}'), title: label('iconStacker.remove', 'Remove {icon}'), children: jsxRuntime.jsx(actions.NtdTrash, { size: 14 }) })] }), jsxRuntime.jsxs("details", { className: "nice-icon-stacker__more", children: [jsxRuntime.jsx("summary", { children: t('iconStacker.more', 'More') }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__more-body", children: [!isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.rotation', 'Turn') }), jsxRuntime.jsx("input", { type: "range", min: -180, max: 180, step: 15, value: (_e = l.rotation) !== null && _e !== void 0 ? _e : 0, onChange: (e) => update(l.id, { rotation: Number(e.target.value) || undefined }) }), jsxRuntime.jsxs("output", { children: [(_f = l.rotation) !== null && _f !== void 0 ? _f : 0, "\u00B0"] })] })), jsxRuntime.jsx(ColorField, { label: t('iconStacker.primary', 'Primary'), value: l.primaryColor, onChange: (v) => update(l.id, { primaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.secondary', 'Secondary'), value: l.secondaryColor, onChange: (v) => update(l.id, { secondaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.accent', 'Accent'), value: l.accentColor, onChange: (v) => update(l.id, { accentColor: v }), autoLabel: autoLabel, resetLabel: resetLabel })] })] }), (innermost || l.text || l.textBinding) && (jsxRuntime.jsxs("div", { className: "nice-icon-stacker__text", children: [jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.text', 'Text') }), jsxRuntime.jsx("input", { type: "text", value: (_g = l.text) !== null && _g !== void 0 ? _g : '', maxLength: 4, onChange: (e) => update(l.id, { text: e.target.value || undefined }) })] }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.textSize', 'Text size') }), jsxRuntime.jsx("input", { type: "range", min: 3, max: 14, step: 0.5, value: textSize, onChange: (e) => update(l.id, { textSize: Number(e.target.value) }) }), jsxRuntime.jsx("output", { children: textSize }), l.textSize !== undefined && (jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => update(l.id, { textSize: undefined }), "aria-label": resetLabel, title: resetLabel, children: jsxRuntime.jsx(navigation.NtdClose, { size: 12 }) }))] }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.textColor', 'Text colour'), value: l.textColor, onChange: (v) => update(l.id, { textColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.bind', 'Bind to') }), jsxRuntime.jsx("input", { type: "text", value: (_h = l.textBinding) !== null && _h !== void 0 ? _h : '', "aria-invalid": bindingInvalid || undefined, title: t('iconStacker.bindHint', 'The name of the value the text shows, e.g. count — the text above is a sample'), onChange: (e) => update(l.id, { textBinding: e.target.value.trim() || undefined }) })] })] }))] }, l.id));
+                            return (jsxRuntime.jsxs("li", { className: "nice-icon-stacker__layer", style: depthStyle, children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__layer-row", children: [jsxRuntime.jsx("input", { type: "radio", name: targetGroup, checked: (target === null || target === void 0 ? void 0 : target.id) === l.id, onChange: () => setSelected(l.id), "aria-label": label('iconStacker.target', 'Add the next icon into {icon}'), title: label('iconStacker.target', 'Add the next icon into {icon}') }), jsxRuntime.jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsxRuntime.jsx(Icon, { size: 24, variant: l.variant }) : null }), jsxRuntime.jsxs("span", { className: "nice-icon-stacker__layer-name", children: [l.icon, isBase && (jsxRuntime.jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') }))] }), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.align', 'Position') }), jsxRuntime.jsx("select", { value: align, onChange: (e) => update(l.id, { align: e.target.value }), children: ALIGNS.map((a) => (jsxRuntime.jsx("option", { value: a, children: a }, a))) })] })), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.size', 'Size') }), jsxRuntime.jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(l.id, { size: Number(e.target.value) }) }), jsxRuntime.jsxs("output", { children: [Math.round(share * 100), "%"] })] })), jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__remove", onClick: () => remove(l.id), "aria-label": label('iconStacker.remove', 'Remove {icon}'), title: label('iconStacker.remove', 'Remove {icon}'), children: jsxRuntime.jsx(actions.NtdTrash, { size: 14 }) })] }), jsxRuntime.jsxs("details", { className: "nice-icon-stacker__more", children: [jsxRuntime.jsx("summary", { children: t('iconStacker.more', 'More') }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__more-body", children: [!isBase && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.rotation', 'Turn') }), jsxRuntime.jsx("input", { type: "range", min: -180, max: 180, step: 15, value: turn, onChange: (e) => {
+                                                                            const v = Number(e.target.value);
+                                                                            update(l.id, { rotation: v === turnDefault ? undefined : v });
+                                                                        } }), jsxRuntime.jsxs("output", { children: [turn, "\u00B0"] })] }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.offsetX', 'Shift right') }), jsxRuntime.jsx("input", { type: "range", min: -50, max: 50, step: 1, value: (_g = l.offsetX) !== null && _g !== void 0 ? _g : 0, onChange: (e) => update(l.id, { offsetX: Number(e.target.value) || undefined }) }), jsxRuntime.jsxs("output", { children: [(_h = l.offsetX) !== null && _h !== void 0 ? _h : 0, "%"] })] }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.offsetY', 'Shift down') }), jsxRuntime.jsx("input", { type: "range", min: -50, max: 50, step: 1, value: (_j = l.offsetY) !== null && _j !== void 0 ? _j : 0, onChange: (e) => update(l.id, { offsetY: Number(e.target.value) || undefined }) }), jsxRuntime.jsxs("output", { children: [(_k = l.offsetY) !== null && _k !== void 0 ? _k : 0, "%"] })] })] })), jsxRuntime.jsx(ColorField, { label: t('iconStacker.primary', 'Primary'), value: l.primaryColor, onChange: (v) => update(l.id, { primaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.secondary', 'Secondary'), value: l.secondaryColor, onChange: (v) => update(l.id, { secondaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.accent', 'Accent'), value: l.accentColor, onChange: (v) => update(l.id, { accentColor: v }), autoLabel: autoLabel, resetLabel: resetLabel })] })] }), (innermost || l.text || l.textBinding) && (jsxRuntime.jsxs("div", { className: "nice-icon-stacker__text", children: [jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.text', 'Text') }), jsxRuntime.jsx("input", { type: "text", value: (_l = l.text) !== null && _l !== void 0 ? _l : '', maxLength: 4, onChange: (e) => update(l.id, { text: e.target.value || undefined }) })] }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.textSize', 'Text size') }), jsxRuntime.jsx("input", { type: "range", min: 3, max: 14, step: 0.5, value: textSize, onChange: (e) => update(l.id, { textSize: Number(e.target.value) }) }), jsxRuntime.jsx("output", { children: textSize }), l.textSize !== undefined && (jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => update(l.id, { textSize: undefined }), "aria-label": resetLabel, title: resetLabel, children: jsxRuntime.jsx(navigation.NtdClose, { size: 12 }) }))] }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.textColor', 'Text colour'), value: l.textColor, onChange: (v) => update(l.id, { textColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.bind', 'Bind to') }), jsxRuntime.jsx("input", { type: "text", value: (_m = l.textBinding) !== null && _m !== void 0 ? _m : '', "aria-invalid": bindingInvalid || undefined, title: t('iconStacker.bindHint', 'The name of the value the text shows, e.g. count — the text above is a sample'), onChange: (e) => update(l.id, { textBinding: e.target.value.trim() || undefined }) })] })] }))] }, l.id));
                         }) }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__code", children: [jsxRuntime.jsx("pre", { children: code }), jsxRuntime.jsxs("button", { type: "button", onClick: copy, children: [copied ? jsxRuntime.jsx(actions.NtdCheck, { size: 14 }) : jsxRuntime.jsx(actions.NtdCopy, { size: 14 }), ' ', copied
                                         ? t('iconStacker.copied', 'Copied')
                                         : t('iconStacker.copy', 'Copy the code')] })] })] }))] }));

package/dist/cjs/createIcon.js

@@ -115,12 +115,20 @@ function renderCutoutShape(shape, fill, maskId) {
     }
 }
 function createIcon(options) {
+    var _a, _b, _c, _d;
     const { displayName, viewBox = '0 0 24 24', paths, textCenter = BOX_CENTER } = options;
-    const Icon = React.forwardRef(({ size = 'md', variant = 'solid', cutoutShape = 'rounded-square', color, lightColor, darkColor, primaryColor: propPrimaryColor = 'currentColor', secondaryColor, accentColor, primaryOpacity = 1, secondaryOpacity = 0.4, accentOpacity = 1, strokeWidth = 2, strokeLinecap: propLinecap, strokeLinejoin: propLinejoin, animation, animationDuration, smilAnimation, smilDuration = 1, smilRepeatCount = 'indefinite', smilEasing = 'ease-in-out', smilDelay = 0, gradient, gradientType = 'linear', gradientAngle = 135, gradientAnimation, 
+    const solidDuotone = (props) => paths.solid({ ...props, accentColor: props.secondaryColor, accentOpacity: 1 });
+    const perfect = {
+        x: (_a = options.perfectStackX) !== null && _a !== void 0 ? _a : textCenter[0],
+        y: (_b = options.perfectStackY) !== null && _b !== void 0 ? _b : textCenter[1],
+        rotation: (_c = options.perfectStackRotation) !== null && _c !== void 0 ? _c : stacking.BOX_PERFECT_STACK.rotation,
+        size: (_d = options.perfectStackSize) !== null && _d !== void 0 ? _d : stacking.BOX_PERFECT_STACK.size,
+    };
+    const Icon = React.forwardRef(({ size = 'md', variant = 'solid', cutoutShape = 'rounded-square', color, lightColor, darkColor, primaryColor: propPrimaryColor = 'currentColor', secondaryColor, accentColor, primaryOpacity = 1, secondaryOpacity = 0.4, accentOpacity = 1, strokeWidth = 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, stackRotation: _stackRotation, 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 = types.SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
         const gradId = React.useId();
@@ -158,10 +166,13 @@ function createIcon(options) {
         };
         // Resolve renderer with fallback chain. `wireframe` has no authored layer
         // at all — it is a mechanical re-draw of the full `solid` construction, so
-        // it never indexes `paths`.
+        // it never indexes `paths`. A duotone left out is the solid with its details
+        // in secondary (1.3.8): the body keeps primary, the larger area.
         const renderer = variant === 'wireframe'
             ? paths.solid
-            : ((_g = (_f = (_e = (_d = (_c = (_b = paths[variant]) !== null && _b !== void 0 ? _b : (variant === 'sharp' ? paths.solid : undefined)) !== null && _c !== void 0 ? _c : (variant === 'rounded' ? paths.solid : undefined)) !== null && _d !== void 0 ? _d : (variant === 'mini' ? paths.solid : undefined)) !== null && _e !== void 0 ? _e : (variant === '3d' ? paths.solid : undefined)) !== null && _f !== void 0 ? _f : (variant === 'vivid' ? paths.solid : undefined)) !== null && _g !== void 0 ? _g : paths.solid);
+            : variant === 'duotone' && !paths.duotone
+                ? solidDuotone
+                : ((_g = (_f = (_e = (_d = (_c = (_b = paths[variant]) !== null && _b !== void 0 ? _b : (variant === 'sharp' ? paths.solid : undefined)) !== null && _c !== void 0 ? _c : (variant === 'rounded' ? paths.solid : undefined)) !== null && _d !== void 0 ? _d : (variant === 'mini' ? paths.solid : undefined)) !== null && _e !== void 0 ? _e : (variant === '3d' ? paths.solid : undefined)) !== null && _f !== void 0 ? _f : (variant === 'vivid' ? paths.solid : undefined)) !== null && _g !== void 0 ? _g : paths.solid);
         // 3D variant uses a filter for depth effect
         const is3d = variant === '3d';
         const filterId = React.useId();
@@ -236,7 +247,7 @@ function createIcon(options) {
             accentColor: resolvedAccent,
             tileColor: gradient ? effectivePrimary : resolvedSecondary,
             strokeWidth,
-            textCenter,
+            perfect,
             textColor,
             textSize,
         });
@@ -254,8 +265,10 @@ function createIcon(options) {
                                 }) })] }) })), smilAnimation ? (needsSmilScaleWrapper ? (jsxRuntime.jsxs("g", { transform: `translate(${center.x}, ${center.y})`, filter: is3d ? `url(#${filterId})` : undefined, children: [jsxRuntime.jsx("g", { transform: `translate(-${center.x}, -${center.y})`, children: iconContent }), smilAnimationElements] })) : (jsxRuntime.jsxs("g", { filter: is3d ? `url(#${filterId})` : undefined, children: [iconContent, smilAnimationElements] }))) : is3d ? (jsxRuntime.jsx("g", { filter: `url(#${filterId})`, children: iconContent })) : (iconContent)] }));
     });
     Icon.displayName = displayName;
-    // lets a parent icon tell this one among its children (stacking, 1.3.5)
+    // lets a parent icon tell this one among its children (stacking, 1.3.5), and tells the stacker
+    // where a child of this one goes by default (1.3.8)
     Icon[stacking.NTD_ICON_MARK] = true;
+    Icon[stacking.PERFECT_STACK] = perfect;
     return Icon;
 }
 

package/dist/cjs/iconParts.js

@@ -11,6 +11,19 @@ var createIcon = require('./createIcon.js');
 function detailColor({ variant, secondaryColor, accentColor }) {
     return variant === 'cutout' ? accentColor : secondaryColor;
 }
+/**
+ * A duotone renderer with its two colours swapped, at full strength (1.3.8) — for a duotone that
+ * drew its larger area in secondary (a pale body under a primary outline): the body turns
+ * primary, the outline and the details secondary.
+ */
+function swapDuotone(render) {
+    return (props) => render({
+        ...props,
+        primaryColor: props.secondaryColor,
+        secondaryColor: props.primaryColor,
+        secondaryOpacity: 1,
+    });
+}
 /**
  * `content` drawn only inside `shape` — for accent lines that read as a cut through a shape (a
  * pencil's band, a calendar's header line, an envelope's flap): clipped, they meet the shape's
@@ -42,6 +55,10 @@ function bellIcon(displayName, ringing) {
     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,
+        // stacked icons and text go into the bell's body, above the clapper (1.3.8)
+        perfectStackX: 12,
+        perfectStackY: 10.5,
+        perfectStackSize: 0.4,
         paths: {
             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" })),
@@ -60,17 +77,21 @@ const PAPER_FOLD_SHARP = 'M12 2v8h8z';
  * A paper icon — NtdFile, and every document drawn on the same page (NtdFileText, NtdInvoice,
  * NtdContract, …), so their pages and folds match. The fold is secondary when the page is filled;
  * `text` is the document's writing, a path of strokes kept below the fold (y ≥ 11, x 7–17),
- * drawn in the accent colour on a filled page and in primary on a stroked one.
+ * drawn in the accent colour on a filled page (secondary in duotone) and in primary on a stroked one.
  */
 function paperIcon(displayName, text = '') {
     return createIcon.createIcon({
         displayName,
+        // stacked icons and text go onto the page below the fold (1.3.8), the same on every paper
+        perfectStackX: 12,
+        perfectStackY: 14,
+        perfectStackSize: 0.5,
         paths: {
             solid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PAPER, fill: primaryColor }), jsxRuntime.jsx("path", { d: PAPER_FOLD, fill: secondaryColor }), text && (jsxRuntime.jsx("path", { d: text, stroke: accentColor, strokeOpacity: accentOpacity, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }))] })),
             // square at every corner, the fold included — the derived `sharp` keeps a path's arcs round
             sharp: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PAPER_SHARP, fill: primaryColor }), jsxRuntime.jsx("path", { d: PAPER_FOLD_SHARP, fill: secondaryColor }), text && (jsxRuntime.jsx("path", { d: text, stroke: accentColor, strokeOpacity: accentOpacity, strokeWidth: "1.5", fill: "none" }))] })),
             outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: `${PAPER}${PAPER_FOLD_LINE}${text}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
-            duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PAPER, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: PAPER_FOLD_SHARP, fill: primaryColor, opacity: secondaryOpacity + 0.1 }), jsxRuntime.jsx("path", { d: `${PAPER}${PAPER_FOLD_LINE}${text}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
+            // duotone (1.3.8): createIcon's default — the solid page, its writing in secondary like the fold
             vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PAPER, fill: primaryColor }), jsxRuntime.jsx("path", { d: PAPER, fill: "white", opacity: "0.1" }), jsxRuntime.jsx("path", { d: PAPER_FOLD, fill: secondaryColor }), text && (jsxRuntime.jsx("path", { d: text, stroke: "white", strokeOpacity: "0.9", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }))] })),
         },
     });
@@ -79,4 +100,5 @@ function paperIcon(displayName, text = '') {
 exports.bellIcon = bellIcon;
 exports.detailColor = detailColor;
 exports.paperIcon = paperIcon;
+exports.swapDuotone = swapDuotone;
 exports.within = within;

package/dist/cjs/iconStack.js

@@ -25,11 +25,13 @@ function niceIconStackCode(layers) {
     }
     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'}"` : '',
+            // the parent's own spot is the default (1.3.8), so only another position is written
+            parent && layer.align && layer.align !== 'perfect' ? `stackAlign="${layer.align}"` : '',
             parent && layer.size !== undefined ? `stackSize={${layer.size}}` : '',
-            parent && layer.rotation ? `stackRotation={${layer.rotation}}` : '',
+            parent && layer.rotation !== undefined ? `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}}` : '',
@@ -59,7 +61,7 @@ function niceIconStackCode(layers) {
 function renderIconStack(layers, icons, { baseProps, values } = {}) {
     const resolve = (name) => (typeof icons === 'function' ? icons(name) : icons[name]);
     const draw = (layer, parent) => {
-        var _a, _b;
+        var _a;
         const Icon = resolve(layer.icon);
         if (!Icon) {
             return null;
@@ -85,7 +87,7 @@ function renderIconStack(layers, icons, { baseProps, values } = {}) {
                 inner,
                 text));
         }
-        return (React.createElement(Icon, { ...own, key: layer.id, stackAlign: (_b = layer.align) !== null && _b !== void 0 ? _b : 'center', stackSize: layer.size, stackRotation: layer.rotation, variant: layer.variant !== parent.variant ? layer.variant : undefined },
+        return (React.createElement(Icon, { ...own, key: layer.id, stackAlign: layer.align, stackSize: layer.size, stackRotation: layer.rotation, stackOffsetX: layer.offsetX, stackOffsetY: layer.offsetY, variant: layer.variant !== parent.variant ? layer.variant : undefined },
             inner,
             text));
     };

package/dist/cjs/icons/accessibility.js

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var createIcon = require('../createIcon.js');
+var iconParts = require('../iconParts.js');
 
 /* ────────────────────────────────────────────────────────────────────────────
    UNIVERSAL ACCESS
@@ -49,7 +50,7 @@ const NtdDeaf = /* @__PURE__ */ createIcon.createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: "2", fill: "none", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M7 8a3 3 0 013-3", stroke: primaryColor, strokeWidth: "2", fill: "none", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M4 4l16 16", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M7 8a3 3 0 013-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M4 4l16 16", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "10", r: "6", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M7 8a3 3 0 013-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M4 4l16 16", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] })),
+        duotone: iconParts.swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "10", r: "6", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M7 8a3 3 0 013-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M4 4l16 16", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] }))),
         vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: "2", fill: "none", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M7 8a3 3 0 013-3", stroke: secondaryColor, strokeWidth: "1.8", fill: "none", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M4 4l16 16", stroke: "#3B82F6", strokeWidth: "1.5", strokeLinecap: "round" })] })),
     },
 });
@@ -58,7 +59,7 @@ const NtdSignLanguage = /* @__PURE__ */ createIcon.createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: primaryColor }) })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] })),
+        duotone: iconParts.swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: "white", opacity: "0.1" })] })),
     },
 });
@@ -76,7 +77,7 @@ const NtdAudioDescription = /* @__PURE__ */ createIcon.createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: primaryColor }), jsxRuntime.jsx("text", { x: "7", y: "15", fill: "white", fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "AD" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("text", { x: "7", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "AD" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("text", { x: "7", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "AD" })] })),
+        duotone: iconParts.swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("text", { x: "7", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "AD" })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: "white", opacity: "0.1" })] })),
     },
 });
@@ -85,7 +86,7 @@ const NtdClosedCaptions = /* @__PURE__ */ createIcon.createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: primaryColor }), jsxRuntime.jsx("text", { x: "6", y: "15", fill: "white", fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "CC" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("text", { x: "6", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "CC" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("text", { x: "6", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "CC" })] })),
+        duotone: iconParts.swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("text", { x: "6", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "CC" })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: "white", opacity: "0.1" })] })),
     },
 });
@@ -97,7 +98,7 @@ const NtdDyslexia = /* @__PURE__ */ createIcon.createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: primaryColor, strokeWidth: "1.5", strokeLinecap: "round" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: primaryColor, strokeWidth: "1.5", strokeLinecap: "round" })] })),
+        duotone: iconParts.swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: primaryColor, strokeWidth: "1.5", strokeLinecap: "round" })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: "white", opacity: "0.1" }), jsxRuntime.jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })] })),
     },
 });
@@ -106,7 +107,7 @@ const NtdEasyRead = /* @__PURE__ */ createIcon.createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M6 8h5v5H6zM13 8h5M13 11h4M6 16h12M6 19h8", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { x: "6", y: "8", width: "5", height: "5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M13 8h5M13 11h4M6 16h12M6 19h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { x: "6", y: "8", width: "5", height: "5", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M13 8h5M13 11h4M6 16h12M6 19h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] })),
+        duotone: iconParts.swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { x: "6", y: "8", width: "5", height: "5", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M13 8h5M13 11h4M6 16h12M6 19h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: "white", opacity: "0.1" }), jsxRuntime.jsx("path", { d: "M6 8h5v5H6zM13 8h5M13 11h4M6 16h12M6 19h8", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round" })] })),
     },
 });
@@ -118,7 +119,7 @@ const NtdScreenReader = /* @__PURE__ */ createIcon.createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" }), jsxRuntime.jsx("circle", { cx: "16", cy: "7", r: "1.5", fill: "white" }), jsxRuntime.jsx("path", { d: "M14 7c0-1.5 1-2.5 2-2.5s2 1 2 2.5", stroke: "white", strokeWidth: "1", fill: "none" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("circle", { cx: "16", cy: "7", r: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M14 7c0-1.5 1-2.5 2-2.5s2 1 2 2.5", stroke: primaryColor, strokeWidth: "1", fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("circle", { cx: "16", cy: "7", r: "1.5", fill: primaryColor })] })),
+        duotone: iconParts.swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("circle", { cx: "16", cy: "7", r: "1.5", fill: primaryColor })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "16", cy: "7", r: "1.5", fill: "white" }), jsxRuntime.jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: "white", strokeWidth: "1", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: "white", strokeWidth: "1", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M14 7c0-1.5 1-2.5 2-2.5s2 1 2 2.5", stroke: "white", strokeWidth: "1", fill: "none" })] })),
     },
 });
@@ -136,7 +137,7 @@ const NtdAssistiveTech = /* @__PURE__ */ createIcon.createIcon({
     paths: {
         solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3", fill: "white" })] })),
         outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
-        duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] })),
+        duotone: iconParts.swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] }))),
         vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3", fill: "white" }), jsxRuntime.jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: "white", strokeWidth: "1", strokeLinecap: "round" })] })),
     },
 });