weasel-icons 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Weasel contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,75 @@
-# Temporary Holding Version
+# Weasel Icons
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Icons that overreact beautifully. Stateful React SVG icons with smooth transitions and optional continuous behavior.
+
+Version `0.2.0` contains 28 icons. See the repository design docs for supported states and verification evidence.
+
+## Install
+
+```sh
+npm install weasel-icons
+# or
+pnpm add weasel-icons
+```
+
+Supports React / React DOM 18.3 or 19. Motion is installed as a dependency. No stylesheet, provider, Tailwind, or Next.js dependency is required. The package is ESM with TypeScript declarations and per-icon exports.
+
+## Use
+
+```tsx
+import { DogIcon } from 'weasel-icons';
+// Alternatively: import { DogIcon } from 'weasel-icons/dog';
+
+export function HappyDog() {
+  return <DogIcon state="happy" alive size={32} color="#75002f" accentColor="#ff5ca3" />;
+}
+```
+
+Import only the icons you use. Compatible production bundlers can tree-shake the others.
+
+## Change a state
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import { HeartIcon } from 'weasel-icons';
+
+export function LikeButton() {
+  const [liked, setLiked] = useState(false);
+  return (
+    <button aria-label="Like" aria-pressed={liked} onClick={() => setLiked(!liked)}>
+      <HeartIcon state={liked ? 'liked' : 'unliked'} size={24} />
+    </button>
+  );
+}
+```
+
+The existing SVG smoothly transitions when `state` changes, including during an unfinished transition. Use your own button or wrapper for hover, click, keyboard, and sequence behavior. Next.js App Router client boundaries are preserved in the package.
+
+## Icons and props
+
+Exports in the current local build: `DogIcon`, `MonkeyIcon`, `HeartIcon`, `ShipIcon`, `RocketIcon`, `SearchIcon`, `BellIcon`, `DownloadIcon`, `ShieldIcon`, `CursorIcon`, `ClapperboardIcon`, `PlugIcon`, `BulbIcon`, `AlertIcon`, `BadgeCheckIcon`, `ReplaceIcon`, `DeleteIcon`, `SwapIcon`, `SparklesIcon`, `SparkleIcon`, `StarIcon`, `WaveIcon`, `RefreshIcon`, `CopyIcon`, `EyeIcon`, `LinkIcon`, `CheckIcon`, and `CloseIcon`. Each icon exports its own state type and list, for example `DogState` and `dogStates`, or `BadgeCheckState` and `badgeCheckStates`. TypeScript autocompletion shows the valid states for each icon.
+
+### Upgrading from 0.1.0
+
+Version `0.2.0` also includes `SparklesIcon` and the single-contour `SparkleIcon` (both `idle`, `shimmering`, `blink`, `dimmed`), `StarIcon` (`idle`, `shooting`, `starred`, `loading`) and `WaveIcon` (`idle`, `flowing`, `energetic`, `flat`), with direct exports at `/sparkles`, `/sparkle`, `/star` and `/wave`. Sparkles uses `blink` and Star uses `shooting`. `RefreshIcon`, `CopyIcon` and `LinkIcon` have four states; `EyeIcon`, `CheckIcon` and `CloseIcon` intentionally have three.
+
+`0.2.0` adds Shield, Cursor, Clapperboard, Plug, Bulb, Alert, Badge Check, Replace, Delete and Swap, with the latest state feedback fixes. Leaf and its `weasel-icons/leaf` export have been removed; remove or replace any Leaf imports before upgrading. Existing retained icon imports continue to work. The new motions have geometry and lifecycle regression coverage, but are not newly browser-profiled performance guarantees.
+
+Common optional props: `state`, `size`, `color`, `accentColor`, `strokeWidth`, `speed`, `alive`, `className`.
+
+- `alive={false}` (default) transitions to the state, then settles.
+- `strokeWidth` defaults to `1.65` SVG units; pass a different width to override it.
+- `alive` adds varied continuous in-state behavior. System reduced-motion preferences take precedence.
+- `color` and `accentColor` default to `currentColor`.
+- Dog, monkey, heart, ship and alert accept small icon-specific `colors` objects, with exported types such as `DogColors`. Alert's critical punctuation defaults to red; use `colors={{ critical: 'your-colour' }}` to override it without recolouring the triangle.
+- Dog and ship have neutral interiors using `--weasel-surface` (white by default). Set this CSS variable on their parent for other backgrounds. Monkey supports `colors.face`.
+
+SVGs are decorative and hidden from screen readers. Label the containing control or adjacent status text. Do not communicate state using only color or animation.
+
+This package installs into `node_modules`; it does not copy source into your components directory and does not expose an `npx` command. Upgrading the dependency brings new icons and fixes; it does not update already deployed websites until you rebuild and deploy them.
+
+## License
+
+Original code is MIT licensed. Adapted source geometry retains its upstream notices in `THIRD_PARTY_NOTICES.md`, included with this package. The website, mascot, fonts, tests, and authoring tools are not part of this package.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,103 @@
+# Third-party notices
+
+The animated components in this project use original Weasel motion design on top of the following source geometry.
+
+## Lucide
+
+Rocket, Dog, Heart, Ship, Bell, Search, Download, Shield, Cursor, Clapperboard, and Plug base SVG geometry is adapted from [Lucide](https://github.com/lucide-icons/lucide), licensed under the ISC License, with the additional Feather notice below for Search and Download. The current front-facing ship replaces the earlier Fluent side-profile implementation. Source SVGs for Bell, Search, Download and their inspected state references are retained in `docs/references/lucide-*.svg`. Shield uses `shield`; Cursor uses `mouse-pointer-2`; Clapperboard adapts `clapperboard` into a left-hinged rig; Plug articulates the two halves of `unplug`. Their source links and design decisions are recorded in `docs/TRACE_ICONS.md`.
+
+Bulb, Alert, Badge Check, Replace, Delete and Swap additionally adapt Lucide's `lightbulb`, `triangle-alert`, `badge-check`, `replace`, `delete` and `arrow-left-right` assets. Their motion, rays, filament and status details are original to this project. No `lucide-react` runtime dependency is installed or redistributed.
+
+Refresh, Copy, Eye, Link, Check and Close additionally adapt `refresh-cw`, `copy`, `eye` / `eye-off` landmarks, `link` (previously `link-2`), `check` and `x`. Eye uses a compatible cubic eyelid rather than swapping complete SVGs. Reference geometry and state-specific choreography are recorded in `docs/TRACE_UTILITY_ICONS.md`. Check, Link and Close retain the additional Feather MIT notice below.
+
+The retained Lucide geometry carries the following [Lucide ISC notice](https://lucide.dev/license):
+Star, Sparkles and Sparkle additionally adapt the current `star` and central `sparkles` contours. Sparkle is the single-contour composition; Sparkles' satellite diamonds and the single-line Wave geometry are original to Weasel. Wave follows the user's visual reference, not Lucide's stacked wave glyph.
+
+
+```text
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+```
+
+## Feather-derived Lucide icons
+
+Search, Download, Alert (listed upstream under its former `alert-triangle` name), Check, Link (`link-2`) and Close (`x`) are listed by Lucide as derived from Feather. Their additional notice is retained from the [upstream license](https://github.com/lucide-icons/lucide/blob/main/LICENSE):
+
+```text
+The MIT License (MIT)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+## Microsoft Fluent Emoji
+
+Monkey Face base SVG geometry is adapted from [Microsoft Fluent Emoji](https://github.com/microsoft/fluentui-emoji), licensed under the MIT License. Historical ship and dog references (not used by the current outline components), and the complete Microsoft copyright/permission notice are retained in `docs/references/`.
+
+```text
+MIT License
+
+Copyright (c) Microsoft Corporation.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE
+```
+
+The animation choreography, state behavior and state effects are independently authored for this project. This does not grant rights to third-party artwork displayed by the website.
+
+## Website-only illustration references and brand draft
+
+The red-panda sheet under `public/art` and its reference-derived raster cutout match [Madi / madivoid's Red Panda Spread Art Print](https://www.etsy.com/listing/1624097837/red-panda-spread-art-print-animal-art), visually checked on October 24, 2026. Reuse permission has not been obtained; the physical-print listing is not a commercial website or branding licence. The website currently uses six poses from this sheet. Older dog/cat sheets remain local historical files but are not rendered; the animated SVG box-cat component has been removed. The eyes/nose/apple logo in `public/weasel-mark.svg` has newly drawn paths, but has not received copyright or trademark clearance. The requested red-panda head crop has not replaced it. See `docs/reference-artwork.md` for provenance, source-research limits and required pre-launch checks. Keep these website design assets local; they are not part of the npm icon package, and its MIT licence does not license the supplied illustrations.
+
+## Motion study reference
+
+The animation system was informed by the part-level motion principles demonstrated by [lucide-animated](https://github.com/pqoqubbw/icons), licensed under the MIT License. Weasel does not redistribute its React components; the state model and choreography in this project are independently authored.
+
+## Website fonts
+
+The playground self-hosts unmodified Latin WOFF2 assets for [Anton](https://github.com/google/fonts/tree/main/ofl/anton) and [DM Sans](https://github.com/google/fonts/tree/main/ofl/dmsans), distributed by Google Fonts under the SIL Open Font License 1.1. Their complete copyright and license notices are included alongside the assets at `public/fonts/anton/OFL.txt` and `public/fonts/dm-sans/OFL.txt`. These website assets are not included in the icon installation payloads.

package/dist/icons/alert/alert-icon.d.ts

@@ -0,0 +1,6 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type AlertState } from "./alert-rig.js";
+import type { AlertColors } from "../../shared/icon-colors.js";
+export { alertStates, type AlertState } from "./alert-rig.js";
+export type AlertIconProps = StatefulIconProps<AlertState, AlertColors>;
+export declare const AlertIcon: import("react").NamedExoticComponent<AlertIconProps>;

package/dist/icons/alert/alert-icon.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useRef } from 'react';
+import { motion, useTransform } from 'motion/react';
+import { usePoseWeight, useBehaviorClock, useActionProgress } from "../../shared/use-icon-motion.js";
+import { useMotionPreference } from "../../shared/use-motion-preference.js";
+import { ALERT_SHELL, sampleAlert } from "./alert-rig.js";
+export { alertStates } from "./alert-rig.js";
+const ORIGIN = { originX: '0px', originY: '0px', transformBox: 'view-box' };
+export const AlertIcon = memo(function AlertIcon({ state = 'idle', size = 24, color = 'currentColor', colors, strokeWidth = 1.65, speed = 1, alive = false, className, }) {
+    const reduced = useMotionPreference(), element = useRef(null);
+    const pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
+    const idle = usePoseWeight(state === 'idle', pace, reduced), warning = usePoseWeight(state === 'warning', pace, reduced), critical = usePoseWeight(state === 'critical', pace, reduced), resolved = usePoseWeight(state === 'resolved', pace, reduced);
+    const performs = alive && !reduced && state !== 'idle', life = usePoseWeight(performs, pace, reduced), time = useBehaviorClock(element, performs, pace, life);
+    const warningEntry = useActionProgress(state === 'warning', pace, reduced, 1.4);
+    const criticalEntry = useActionProgress(state === 'critical', pace, reduced, 1.4);
+    const rig = useTransform(() => sampleAlert([idle.get(), warning.get(), critical.get(), resolved.get()], time.get(), life.get(), warningEntry.get(), criticalEntry.get()));
+    const criticalColor = colors?.critical ?? '#ef4444';
+    const blendedColor = useTransform(critical, [0, 1], [color, criticalColor]);
+    const body = useTransform(rig, (r) => r.body), shell = useTransform(rig, (r) => r.shell), mark = useTransform(rig, (r) => r.mark), markOpacity = useTransform(rig, (r) => r.markOpacity), dot = useTransform(rig, (r) => r.dot * r.markOpacity), dotY = useTransform(rig, (r) => r.dotY), markColor = useTransform(() => critical.get() === 0 ? color : critical.get() === 1 ? criticalColor : blendedColor.get());
+    return (_jsx("svg", { ref: element, className: className, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", pointerEvents: "none", style: { display: 'block', overflow: 'visible' }, children: _jsxs(motion.g, { "data-layer": "alert-body", transform: body, style: ORIGIN, children: [_jsx(motion.path, { "data-part": "shell", "data-layer": "alert-shell", d: ALERT_SHELL, transform: shell, style: ORIGIN, stroke: color, strokeWidth: strokeWidth }), _jsx(motion.path, { "data-layer": "alert-mark", d: mark, opacity: markOpacity, stroke: markColor, strokeWidth: Math.min(strokeWidth, 1.7) }), _jsx(motion.circle, { "data-layer": "alert-dot", cx: "12", cy: dotY, r: Math.min(strokeWidth * 0.55, 1.1), opacity: dot, fill: markColor })] }) }));
+});

package/dist/icons/alert/alert-rig.d.ts

@@ -0,0 +1,12 @@
+export declare const alertStates: readonly ["idle", "warning", "critical", "resolved"];
+export type AlertState = (typeof alertStates)[number];
+export declare const ALERT_SHELL = "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3";
+export declare function sampleAlert(weights: readonly number[], time?: number, alive?: number, entry?: number, criticalEntry?: number): {
+    body: string;
+    shell: string;
+    mark: string;
+    markOpacity: number;
+    dot: number;
+    dotY: number;
+    resolved: number;
+};

package/dist/icons/alert/alert-rig.js

@@ -0,0 +1,25 @@
+import { behaviorBeat } from "../../shared/behavior-curves.js";
+export const alertStates = ['idle', 'warning', 'critical', 'resolved'];
+export const ALERT_SHELL = 'm21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3';
+export function sampleAlert(weights, time = 0, alive = 0, entry = 1, criticalEntry = entry) {
+    const clamp = (n) => Math.max(0, Math.min(1, n));
+    const [, warning, critical, resolved] = weights.map(clamp), life = clamp(alive);
+    const actionTime = clamp(entry) * 1.4;
+    const envelope = entry >= 1 ? 0 : behaviorBeat(actionTime, 0, 0.15, 0.8, 0.45);
+    const blink = Math.max((envelope * (1 - Math.cos(actionTime * Math.PI * 4))) / 2, (life * (1 - Math.cos((time * Math.PI * 2) / 1.4))) / 2);
+    const criticalTime = clamp(criticalEntry) * 1.4;
+    const criticalEnvelope = criticalEntry >= 1 ? 0 : behaviorBeat(criticalTime, 0, 0.15, 0.8, 0.45);
+    const vibration = critical *
+        ((1 - life) * criticalEnvelope * Math.sin(criticalTime * Math.PI * 10) +
+            life * Math.sin(time * Math.PI * 10));
+    return {
+        body: 'translate(12px, 12px) scale(0.8) translate(-12px, -12px)',
+        shell: `translate(12px, 13px) rotate(${vibration * 3.2}deg) translate(-12px, -13px)`,
+        // Corresponding three landmarks fold the upright stem into one interior check.
+        mark: `M${12 - 2.6 * resolved} ${9 + 5 * resolved}L${12 - 0.7 * resolved} ${11 + 4.9 * resolved}L${12 + 2.1 * resolved} ${13 - 0.1 * resolved}`,
+        markOpacity: 1 - warning * blink * 0.85,
+        dot: 1 - resolved,
+        dotY: 17,
+        resolved,
+    };
+}

package/dist/icons/badge-check/badge-check-icon.d.ts

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type BadgeCheckState } from "./badge-check-rig.js";
+export { badgeCheckStates, type BadgeCheckState } from "./badge-check-rig.js";
+export type BadgeCheckIconProps = StatefulIconProps<BadgeCheckState>;
+export declare const BadgeCheckIcon: import("react").NamedExoticComponent<BadgeCheckIconProps>;

package/dist/icons/badge-check/badge-check-icon.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useRef } from 'react';
+import { motion, useTransform } from 'motion/react';
+import { usePoseWeight, useBehaviorClock, useActionProgress } from "../../shared/use-icon-motion.js";
+import { useMotionPreference } from "../../shared/use-motion-preference.js";
+import { BADGE_SHELL, sampleBadgeCheck } from "./badge-check-rig.js";
+export { badgeCheckStates } from "./badge-check-rig.js";
+const ORIGIN = { originX: '0px', originY: '0px', transformBox: 'view-box' };
+export const BadgeCheckIcon = memo(function BadgeCheckIcon({ state = 'idle', size = 24, color = 'currentColor', accentColor = 'currentColor', strokeWidth = 1.65, speed = 1, alive = false, className, }) {
+    const reduced = useMotionPreference(), element = useRef(null);
+    const pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
+    const idle = usePoseWeight(state === 'idle', pace, reduced), checking = usePoseWeight(state === 'checking', pace, reduced), verified = usePoseWeight(state === 'verified', pace, reduced), rejected = usePoseWeight(state === 'rejected', pace, reduced);
+    const performs = alive && !reduced && state !== 'idle', life = usePoseWeight(performs, pace, reduced), time = useBehaviorClock(element, performs, pace, life);
+    // Mount an already verified value as a still; replay only on a later entry.
+    const first = useRef(state !== 'verified');
+    const canRestart = useCallback(() => {
+        const invisible = first.current || verified.get() < 0.001;
+        first.current = false;
+        return invisible;
+    }, [verified]);
+    const entry = useActionProgress(state === 'verified', pace, reduced, 0.9, canRestart);
+    const firstRejection = useRef(state !== 'rejected');
+    const canRestartRejection = useCallback(() => {
+        const invisible = firstRejection.current || rejected.get() < 0.001;
+        firstRejection.current = false;
+        return invisible;
+    }, [rejected]);
+    const rejectionEntry = useActionProgress(state === 'rejected', pace, reduced, 0.8, canRestartRejection);
+    const rig = useTransform(() => sampleBadgeCheck([idle.get(), checking.get(), verified.get(), rejected.get()], time.get(), life.get(), entry.get(), rejectionEntry.get()));
+    const body = useTransform(rig, (r) => r.body), mark = useTransform(rig, (r) => r.mark), markOpacity = useTransform(rig, (r) => r.markOpacity), markOffset = useTransform(rig, (r) => r.markOffset), reverse = useTransform(rig, (r) => r.reverse), cross = useTransform(rig, (r) => r.cross), progress = useTransform(rig, (r) => r.progress), progressOffset = useTransform(rig, (r) => r.progressOffset), shine = useTransform(rig, (r) => r.shine);
+    return (_jsx("svg", { ref: element, className: className, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", pointerEvents: "none", style: { display: 'block', overflow: 'visible' }, children: _jsxs(motion.g, { "data-layer": "badge-body", transform: body, style: ORIGIN, children: [_jsx("path", { "data-part": "shell", d: BADGE_SHELL, stroke: color, strokeWidth: strokeWidth }), _jsx(motion.path, { "data-layer": "badge-progress", d: "M12 7.5a4.5 4.5 0 1 1 0 9a4.5 4.5 0 1 1 0-9", opacity: progress, stroke: accentColor, strokeWidth: Math.min(strokeWidth * 0.8, 1.5), strokeDasharray: "7 21.274334", strokeDashoffset: progressOffset }), _jsx(motion.path, { "data-layer": "badge-mark", d: mark, opacity: markOpacity, stroke: color, strokeWidth: strokeWidth, strokeDasharray: "12 12", strokeDashoffset: markOffset }), _jsx(motion.path, { "data-layer": "badge-reverse", d: cross, opacity: reverse, stroke: color, strokeWidth: strokeWidth }), _jsx(motion.path, { "data-layer": "badge-shine", d: "M7.2 6.3a2 2 0 0 1 1.7-.3", opacity: shine, stroke: accentColor, strokeWidth: strokeWidth * 0.65 })] }) }));
+});

package/dist/icons/badge-check/badge-check-rig.d.ts

@@ -0,0 +1,14 @@
+export declare const badgeCheckStates: readonly ["idle", "checking", "verified", "rejected"];
+export type BadgeCheckState = (typeof badgeCheckStates)[number];
+export declare const BADGE_SHELL = "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z";
+export declare function sampleBadgeCheck(weights: readonly number[], time?: number, alive?: number, entry?: number, rejectionEntry?: number): {
+    body: string;
+    mark: string;
+    markOpacity: number;
+    markOffset: number;
+    reverse: number;
+    cross: string;
+    progress: number;
+    progressOffset: number;
+    shine: number;
+};

package/dist/icons/badge-check/badge-check-rig.js

@@ -0,0 +1,36 @@
+import { behaviorBeat } from "../../shared/behavior-curves.js";
+export const badgeCheckStates = ['idle', 'checking', 'verified', 'rejected'];
+export const BADGE_SHELL = 'M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z';
+export function sampleBadgeCheck(weights, time = 0, alive = 0, entry = 1, rejectionEntry = 1) {
+    const clamp = (n) => Math.max(0, Math.min(1, n));
+    const smooth = (n) => {
+        const t = clamp(n);
+        return t * t * t * (t * (t * 6 - 15) + 10);
+    };
+    const [, checking, verified, rejected] = weights.map(clamp), life = clamp(alive);
+    const t = time % 7.2;
+    const stamp = Math.max(behaviorBeat(entry * 0.9, 0.3, 0.18, 0.06, 0.36), life * behaviorBeat(t, 0.5, 0.18, 0.08, 0.55));
+    const shine = behaviorBeat(t, 3.9, 0.45, 0.1, 0.7);
+    const refuse = life * rejected * behaviorBeat(t, 0.35, 0.35, 0.12, 0.7);
+    const draw = smooth(entry / 0.68);
+    const crossDraw = smooth((rejectionEntry - 0.1) / 0.72);
+    const cross = [
+        [8.5, 8.5],
+        [15.5, 8.5],
+        [15.5, 15.5],
+        [8.5, 15.5],
+    ]
+        .map(([x, y]) => `M${x} ${y}L${x + (12 - x) * crossDraw} ${y + (12 - y) * crossDraw}`)
+        .join('');
+    return {
+        body: `translate(12px, 12px) rotate(${-4 * refuse}deg) scale(${0.84 + verified * stamp * 0.027}) translate(-12px, -12px)`,
+        mark: `M${8 + 0.5 * rejected} ${12 - 3.5 * rejected}L${10.5 + 1.5 * rejected} ${14.5 - 2.5 * rejected}L${16 - 0.5 * rejected} ${9 + 6.5 * rejected}`,
+        markOpacity: (1 - checking) * (1 - rejected) * (1 - verified + verified * smooth(draw / 0.025)),
+        markOffset: verified * (1 - draw) * 12,
+        reverse: rejected * smooth(crossDraw / 0.04),
+        cross,
+        progress: checking,
+        progressOffset: -Math.PI * 9 * (time / 1.5) * life,
+        shine: verified * life * shine,
+    };
+}

package/dist/icons/bell/bell-icon.d.ts

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type BellState } from "./bell-rig.js";
+export { bellStates, type BellState } from "./bell-rig.js";
+export type BellIconProps = StatefulIconProps<BellState>;
+export declare const BellIcon: import("react").NamedExoticComponent<BellIconProps>;

package/dist/icons/bell/bell-icon.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useId, useRef } from 'react';
+import { motion, useTransform } from 'motion/react';
+import { useMotionPreference } from "../../shared/use-motion-preference.js";
+import { usePoseWeight, useBehaviorClock } from "../../shared/use-icon-motion.js";
+import { sampleBell, BELL_SHELL, BELL_CLAPPER } from "./bell-rig.js";
+export { bellStates } from "./bell-rig.js";
+const ORIGIN = { originX: 0, originY: 0, transformBox: 'view-box' };
+export const BellIcon = memo(function BellIcon({ state = 'idle', size = 24, color = 'currentColor', accentColor = 'currentColor', strokeWidth = 1.65, speed = 1, alive = false, className, }) {
+    const reduced = useMotionPreference(), element = useRef(null), id = useId();
+    const pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
+    const idle = usePoseWeight(state === 'idle', pace, reduced), ringing = usePoseWeight(state === 'ringing', pace, reduced);
+    const unread = usePoseWeight(state === 'unread', pace, reduced), muted = usePoseWeight(state === 'muted', pace, reduced);
+    const performs = alive && !reduced && (state === 'ringing' || state === 'unread'), life = usePoseWeight(performs, pace, reduced);
+    const time = useBehaviorClock(element, performs, pace, life);
+    const rig = useTransform(() => sampleBell([idle.get(), ringing.get(), unread.get(), muted.get()], time.get(), life.get()));
+    const body = useTransform(rig, (r) => r.body), clapper = useTransform(rig, (r) => r.clapper), cut = useTransform(rig, (r) => r.cut);
+    const ringOpacity = useTransform(rig, (r) => r.ringing), badge = useTransform(rig, (r) => r.badge), mute = useTransform(rig, (r) => r.muted);
+    const badgeRadius = useTransform(rig, (r) => r.badgeScale * 1.65);
+    return (_jsxs("svg", { ref: element, className: className, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", pointerEvents: "none", style: { display: 'block', overflow: 'visible' }, children: [_jsx("defs", { children: _jsx("clipPath", { id: id, children: _jsx(motion.path, { "data-part": "mute-cut", d: cut }) }) }), _jsx(motion.path, { "data-layer": "bell-sound", d: "M2.5 6.5C2.7 5.2 3.2 4.2 4 3.2M20 3.2c.8 1 1.3 2 1.5 3.3", stroke: accentColor, strokeWidth: strokeWidth * 0.65, opacity: ringOpacity }), _jsxs(motion.g, { "data-layer": "bell-body", transform: body, style: ORIGIN, children: [_jsxs("g", { clipPath: `url(#${id})`, children: [_jsx("path", { "data-part": "shell", d: BELL_SHELL, stroke: color, strokeWidth: strokeWidth }), _jsx(motion.path, { "data-part": "clapper", d: BELL_CLAPPER, stroke: color, strokeWidth: strokeWidth, transform: clapper, style: ORIGIN })] }), _jsx(motion.path, { "data-layer": "bell-mute", d: "M3 3l18 18", stroke: color, strokeWidth: strokeWidth, opacity: mute })] }), _jsx(motion.circle, { "data-layer": "bell-badge", cx: "19", cy: "4", r: badgeRadius, fill: accentColor, opacity: badge })] }));
+});

package/dist/icons/bell/bell-rig.d.ts

@@ -0,0 +1,14 @@
+export declare const bellStates: readonly ["idle", "ringing", "unread", "muted"];
+export type BellState = (typeof bellStates)[number];
+export type BellWeights = readonly [number, number, number, number];
+export declare const BELL_SHELL = "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326";
+export declare const BELL_CLAPPER = "M10.268 21a2 2 0 0 0 3.464 0";
+export declare function sampleBell([, ringing, unread, muted]: BellWeights, time?: number, alive?: number): {
+    body: string;
+    clapper: string;
+    cut: string;
+    ringing: number;
+    badge: number;
+    muted: number;
+    badgeScale: number;
+};

package/dist/icons/bell/bell-rig.js

@@ -0,0 +1,21 @@
+export const bellStates = ['idle', 'ringing', 'unread', 'muted'];
+export const BELL_SHELL = 'M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326';
+export const BELL_CLAPPER = 'M10.268 21a2 2 0 0 0 3.464 0';
+const n = (v) => Number(v.toFixed(5));
+export function sampleBell([, ringing, unread, muted], time = 0, alive = 0) {
+    const life = Math.max(0, Math.min(1, alive));
+    const ring = Math.max(0, behaviorBeat(time % 3.4, 0.12, 0.28, 0.9, 0.75));
+    const notify = Math.max(0, behaviorBeat(time % 4.8, 0.3, 0.4, 0.1, 0.8));
+    const angle = ringing * (7 * (1 - life) + life * 10 * Math.sin(time * 10.6) * ring), gap = muted * 1.5;
+    const clapperAngle = ringing * life * -13 * Math.sin(time * 10.6 - 0.55) * ring;
+    return {
+        body: `translate(12px, 12px) scale(.86) translate(-12px, -12px) translate(12px, 4px) rotate(${n(angle)}deg) translate(-12px, -4px)`,
+        clapper: `translate(12px, 17px) rotate(${n(clapperAngle)}deg) translate(-12px, -17px)`,
+        cut: `M${n(gap)} 0H24V${n(24 - gap)}ZM0 ${n(gap)}V24H${n(24 - gap)}Z`,
+        ringing: ringing * (0.4 + life * 0.35 * ring),
+        badge: unread,
+        muted,
+        badgeScale: 1 + life * unread * 0.14 * notify,
+    };
+}
+import { behaviorBeat } from "../../shared/behavior-curves.js";

package/dist/icons/bulb/bulb-icon.d.ts

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type BulbState } from "./bulb-rig.js";
+export { bulbStates, type BulbState } from "./bulb-rig.js";
+export type BulbIconProps = StatefulIconProps<BulbState>;
+export declare const BulbIcon: import("react").NamedExoticComponent<BulbIconProps>;

package/dist/icons/bulb/bulb-icon.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useRef } from 'react';
+import { motion, useTransform } from 'motion/react';
+import { usePoseWeight, useBehaviorClock, useActionProgress } from "../../shared/use-icon-motion.js";
+import { useMotionPreference } from "../../shared/use-motion-preference.js";
+import { BULB_SHELL, sampleBulb } from "./bulb-rig.js";
+export { bulbStates } from "./bulb-rig.js";
+const ORIGIN = { originX: '0px', originY: '0px', transformBox: 'view-box' };
+export const BulbIcon = memo(function BulbIcon({ state = 'off', size = 24, color = 'currentColor', accentColor = 'currentColor', strokeWidth = 1.65, speed = 1, alive = false, className, }) {
+    const reduced = useMotionPreference(), element = useRef(null);
+    const pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
+    const off = usePoseWeight(state === 'off', pace, reduced), thinking = usePoseWeight(state === 'thinking', pace, reduced), on = usePoseWeight(state === 'on', pace, reduced), fault = usePoseWeight(state === 'fault', pace, reduced);
+    const performs = alive && !reduced && state !== 'off', life = usePoseWeight(performs, pace, reduced), time = useBehaviorClock(element, performs, pace, life);
+    const first = useRef(state !== 'on');
+    const canRestart = useCallback(() => {
+        const invisible = first.current || on.get() < 0.001;
+        first.current = false;
+        return invisible;
+    }, [on]);
+    const entry = useActionProgress(state === 'on', pace, reduced, 1, canRestart);
+    const rig = useTransform(() => sampleBulb([off.get(), thinking.get(), on.get(), fault.get()], time.get(), life.get(), entry.get()));
+    const body = useTransform(rig, (r) => r.body), filament = useTransform(rig, (r) => r.filament), filamentOpacity = useTransform(rig, (r) => r.filamentOpacity), light = useTransform(rig, (r) => r.light), rays = useTransform(rig, (r) => r.rays), failure = useTransform(rig, (r) => r.fault), shine = useTransform(rig, (r) => r.shine);
+    return (_jsx("svg", { ref: element, className: className, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", pointerEvents: "none", style: { display: 'block', overflow: 'visible' }, children: _jsxs(motion.g, { "data-layer": "bulb-body", transform: body, style: ORIGIN, children: [_jsx(motion.path, { "data-layer": "bulb-rays", d: rays, opacity: light, stroke: accentColor, strokeWidth: Math.min(strokeWidth * 0.75, 1.4) }), _jsx("path", { "data-part": "shell", d: BULB_SHELL, stroke: color, strokeWidth: strokeWidth }), _jsx("path", { "data-part": "base", d: "M9 18h6M10 22h4", stroke: color, strokeWidth: strokeWidth }), _jsx(motion.path, { "data-layer": "bulb-filament", d: filament, opacity: filamentOpacity, stroke: accentColor, strokeWidth: Math.min(strokeWidth * 0.75, 1.4) }), _jsx(motion.path, { "data-layer": "bulb-fault", d: "m10 8 4 4m0-4-4 4", opacity: failure, stroke: color, strokeWidth: Math.min(strokeWidth * 0.75, 1.4) }), _jsx(motion.path, { "data-layer": "bulb-shine", d: "M8.2 7.2a4 4 0 0 1 1.5-2.4", opacity: shine, stroke: accentColor, strokeWidth: strokeWidth * 0.6 })] }) }));
+});

package/dist/icons/bulb/bulb-rig.d.ts

@@ -0,0 +1,13 @@
+export declare const bulbStates: readonly ["off", "thinking", "on", "fault"];
+export type BulbState = (typeof bulbStates)[number];
+/** Lucide lightbulb contour. Rays and filament are original supporting details. */
+export declare const BULB_SHELL = "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5";
+export declare function sampleBulb(weights: readonly number[], time?: number, alive?: number, entry?: number): {
+    body: string;
+    filament: string;
+    light: number;
+    filamentOpacity: number;
+    rays: string;
+    fault: number;
+    shine: number;
+};

package/dist/icons/bulb/bulb-rig.js

@@ -0,0 +1,37 @@
+import { behaviorBeat } from "../../shared/behavior-curves.js";
+export const bulbStates = ['off', 'thinking', 'on', 'fault'];
+/** Lucide lightbulb contour. Rays and filament are original supporting details. */
+export const BULB_SHELL = 'M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5';
+export function sampleBulb(weights, time = 0, alive = 0, entry = 1) {
+    const clamp = (n) => Math.max(0, Math.min(1, n));
+    const [, thinking, on, fault] = weights.map(clamp), life = clamp(alive);
+    const t = time % 8;
+    // A tentative filament warms twice, then considers; never falsely signals ON.
+    const warm = behaviorBeat(t, 0.2, 0.6, 0.1, 0.55) +
+        0.65 * behaviorBeat(t, 2.05, 0.3, 0.15, 0.6) +
+        0.8 * behaviorBeat(t, 4.9, 0.7, 0.25, 0.7);
+    const glint = behaviorBeat(t, 0.8, 0.35, 0.1, 0.9) + 0.65 * behaviorBeat(t, 5, 0.35, 0.1, 0.8);
+    const bloom = behaviorBeat(clamp(entry), 0.08, 0.23, 0.12, 0.5);
+    const emission = clamp(Math.max(bloom, life * glint));
+    // Five rays grow outwards together; the invisible gap separates each repeat.
+    const reach = 0.2 + emission * 0.8;
+    const rays = [Math.PI, Math.PI * 1.25, Math.PI * 1.5, Math.PI * 1.75, 0]
+        .map((angle) => {
+        const radius = 9.4 + emission * 0.45;
+        const x = 12 + Math.cos(angle) * radius;
+        const y = 8 + Math.sin(angle) * radius;
+        return `M${x} ${y}L${x + Math.cos(angle) * reach} ${y + Math.sin(angle) * reach}`;
+    })
+        .join('');
+    const retry = behaviorBeat(t, 0.35, 0.25, 0.1, 0.5) - 0.65 * behaviorBeat(t, 3.8, 0.3, 0.1, 0.6);
+    const scale = 0.78 + on * 0.015 + thinking * life * warm * 0.014;
+    return {
+        body: `translate(12px, 18px) rotate(${fault * life * retry * -5}deg) scale(${scale}) translate(-12px, -18px)`,
+        filament: 'M10 10.5L12 12.5L14 10.5M12 12.5V15',
+        light: on * emission,
+        filamentOpacity: thinking * (0.3 + life * warm * 0.65) + on,
+        rays,
+        fault,
+        shine: on * emission,
+    };
+}

package/dist/icons/check/check-icon.d.ts

@@ -0,0 +1,5 @@
+import type { StatefulIconProps } from "../../shared/icon-types.js";
+import { type CheckState } from "./check-rig.js";
+export { checkStates, type CheckState } from "./check-rig.js";
+export type CheckIconProps = StatefulIconProps<CheckState>;
+export declare const CheckIcon: import("react").NamedExoticComponent<CheckIconProps>;

package/dist/icons/check/check-icon.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useRef, useCallback } from 'react';
+import { motion, useTransform } from 'motion/react';
+import { usePoseWeight, useBehaviorClock, useActionProgress } from "../../shared/use-icon-motion.js";
+import { useMotionPreference } from "../../shared/use-motion-preference.js";
+import { sampleCheck } from "./check-rig.js";
+export { checkStates } from "./check-rig.js";
+const ORIGIN = { originX: '0px', originY: '0px', transformBox: 'view-box' };
+export const CheckIcon = memo(function CheckIcon({ state = 'checked', size = 24, color = 'currentColor', strokeWidth = 1.65, speed = 1, alive = false, className, }) {
+    const reduced = useMotionPreference(), element = useRef(null);
+    const pace = Number.isFinite(speed) ? Math.min(4, Math.max(0.1, speed)) : 1;
+    const w0 = usePoseWeight(state === 'checked', pace, reduced);
+    const w1 = usePoseWeight(state === 'checking', pace, reduced);
+    const w2 = usePoseWeight(state === 'unchecked', pace, reduced);
+    const performs = alive && !reduced && state === 'checking';
+    const life = usePoseWeight(performs, pace, reduced), time = useBehaviorClock(element, performs, pace, life);
+    const can0 = useCallback(() => w1.get() < 0.001, [w1]);
+    const e0 = useActionProgress(state === 'checking', pace, reduced, 1.1, can0);
+    const can1 = useCallback(() => w0.get() < 0.001, [w0]);
+    const e1 = useActionProgress(state === 'checked', pace, reduced, 0.85, can1);
+    const rig = useTransform(() => sampleCheck([w0.get(), w1.get(), w2.get()], time.get(), life.get(), e0.get(), e1.get()));
+    const mark = useTransform(rig, (r) => r.mark);
+    const confirm = useTransform(rig, (r) => r.confirm);
+    return (_jsx("svg", { ref: element, className: className, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", pointerEvents: "none", style: { display: 'block' }, children: _jsx("g", { "data-layer": "check-body", transform: "translate(12 12) scale(.84) translate(-12 -12)", children: _jsx(motion.path, { "data-layer": "check-mark", "data-part": "mark", d: mark, transform: confirm, style: ORIGIN }) }) }));
+});

package/dist/icons/check/check-rig.d.ts

@@ -0,0 +1,6 @@
+export declare const checkStates: readonly ["checked", "checking", "unchecked"];
+export type CheckState = (typeof checkStates)[number];
+export declare function sampleCheck(weights: readonly number[], time?: number, alive?: number, entry?: number, successEntry?: number): {
+    mark: string;
+    confirm: string;
+};

package/dist/icons/check/check-rig.js

@@ -0,0 +1,38 @@
+import { behaviorBeat } from "../../shared/behavior-curves.js";
+const clamp = (n) => Math.max(0, Math.min(1, Number.isFinite(n) ? n : 0));
+const normalized = (values) => {
+    const w = values.map(clamp), sum = w.reduce((a, b) => a + b, 0) || 1;
+    return w.map((v) => v / sum);
+};
+export const checkStates = ['checked', 'checking', 'unchecked'];
+export function sampleCheck(weights, time = 0, alive = 0, entry = 1, successEntry = 1) {
+    const [checked, checking] = normalized(weights), life = clamp(alive);
+    const entryWave = behaviorBeat(clamp(entry) * 1.1, 0.08, 0.22, 0.05, 0.65);
+    const wave = checking * ((1 - life) * entryWave * 1.2 + life * Math.sin(time * 4.2) * 1.4);
+    const x0 = 8 - checked * 4 - checking * 2, x1 = 12 - checked * 3, x2 = 16 + checked * 4 + checking * 2;
+    const y0 = 12 + checking * life * Math.sin(time * 4.2) * 0.35, crest = checking * 2.6 + wave, knee = 12 + checked * 5;
+    const pop = checked * behaviorBeat(clamp(successEntry) * 0.85, 0.12, 0.15, 0.03, 0.48);
+    return {
+        mark: 'M' +
+            x0 +
+            ' ' +
+            y0 +
+            'Q' +
+            (x0 + x1) / 2 +
+            ' ' +
+            (12 + checked * 2.5 - crest) +
+            ' ' +
+            x1 +
+            ' ' +
+            knee +
+            'Q' +
+            (x1 + x2) / 2 +
+            ' ' +
+            (12 - checked * 0.5 + crest) +
+            ' ' +
+            x2 +
+            ' ' +
+            (12 - checked * 6),
+        confirm: 'translate(9px, 17px) scale(' + (1 + pop * 0.07) + ') translate(-9px, -17px)',
+    };
+}