@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/dist/components/core/illustration-card/IllustrationCard.js

@@ -1,8 +1,9 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef } from 'react';
 import './IllustrationCard.css';
 import './illustration-card-impl.css';
+import { useArrival } from '../../arrival.js';
 import { illustrationCardDefaults, illustrationCardParts, } from './IllustrationCard.types.js';
 /**
  * A pane of glass holding a picture of the product, in one of three shapes.
@@ -16,13 +17,19 @@ import { illustrationCardDefaults, illustrationCardParts, } from './Illustration
  * `label`, and its contents are `inert`: real components draw it, so it looks exactly like the
  * product, and none of them can be focused, pressed or typed into.
  *
+ * It can move once, as it arrives — frosting over its photograph, or playing two states of the
+ * product, the second after the first — and whatever moves inside it waits for it to land: it is
+ * the host its parts' arrivals follow (see arrival.ts).
+ *
  * And it scales like a picture. The UI is laid out at its own size and, where the pane is too small
  * to hold it, scaled down as a whole to fit — never up — so a pane on a phone shows the same picture
  * smaller rather than text overlapping or cut off. The scale is worked out when the pane changes
  * size and at no other time.
  */
-export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label, children, ...rest }) {
-    const pane = useRef(null);
+export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label, motion, then, children, ...rest }) {
+    // The pane arrives as one thing and is the host the motions inside it follow, so it runs its
+    // arrival whether or not it moves itself: a figure that rolls inside it waits for it to land.
+    const [pane, arrival] = useArrival();
     const content = useRef(null);
     useLayoutEffect(() => {
         const root = pane.current;
@@ -30,6 +37,11 @@ export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label
         if (root === null || inner === null || typeof ResizeObserver === 'undefined')
             return undefined;
         const fit = () => {
+            // Back to the UI's own size before the pane is measured. A pane whose height follows what it
+            // holds — a strip at the foot of a scene, capped at a share of it — is only as tall as its
+            // last fit left the UI; measured first, each fit would find less room than the last.
+            inner.style.transform = '';
+            inner.style.inlineSize = '';
             const style = getComputedStyle(root);
             const across = root.clientWidth - Number.parseFloat(style.paddingInlineStart) - Number.parseFloat(style.paddingInlineEnd);
             const down = root.clientHeight - Number.parseFloat(style.paddingBlockStart) - Number.parseFloat(style.paddingBlockEnd);
@@ -37,18 +49,32 @@ export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label
                 return;
             // Laid out unscaled at the pane's own width, to see how much room the UI wants there — down,
             // and across, since a line that cannot wrap (a large figure) overflows sideways.
-            inner.style.transform = '';
             inner.style.inlineSize = `${across}px`;
             const tall = inner.scrollHeight;
             const wide = inner.scrollWidth;
-            const scale = Math.min(1, down / tall, across / wide);
+            let scale = Math.min(1, down / tall, across / wide);
             if (scale >= 1) {
                 inner.style.inlineSize = '';
                 return;
             }
             // Scaled, the UI is narrower than the pane too; laying it out wider by the same factor gives
-            // the width back, so the picture fills the pane across as well as down. Wider, it can only
-            // wrap less and so be shorter, which keeps it inside the pane.
+            // the width back, so the picture fills the pane across as well as down. Wider, it wraps less
+            // and is shorter — so the scale found at the pane's own width is a floor, not the answer, and
+            // in a wide, short pane (a strip at the foot of a scene) a far smaller one than the UI needs.
+            // The largest scale whose widened layout still fits is found by halving the gap a few times;
+            // each try is one layout, and this runs only when the pane changes size.
+            const fits = (candidate) => {
+                inner.style.inlineSize = `${across / candidate}px`;
+                return inner.scrollHeight * candidate <= down && inner.scrollWidth * candidate <= across + 0.5;
+            };
+            let ceiling = 1;
+            for (let step = 0; step < 6; step += 1) {
+                const middle = (scale + ceiling) / 2;
+                if (fits(middle))
+                    scale = middle;
+                else
+                    ceiling = middle;
+            }
             inner.style.inlineSize = `${across / scale}px`;
             inner.style.transformOrigin = style.direction === 'rtl' ? 'top right' : 'top left';
             inner.style.transform = `scale(${scale})`;
@@ -78,5 +104,5 @@ export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label
                 cancelAnimationFrame(queued);
         };
     }, []);
-    return (_jsx("div", { ...rest, ref: pane, className: illustrationCardParts.root, "data-ratio": ratio, "data-theme": "dark", role: "img", "aria-label": label, children: _jsx("div", { ref: content, className: illustrationCardParts.content, inert: true, children: children }) }));
+    return (_jsx("div", { ...rest, ref: pane, className: illustrationCardParts.root, "data-ratio": ratio, "data-theme": "dark", "data-arrival-host": "", "data-arrival": arrival === 'still' ? undefined : arrival, "data-motion": then ? undefined : motion, role: "img", "aria-label": label, children: _jsx("div", { ref: content, className: illustrationCardParts.content, "data-story": then ? '' : undefined, inert: true, children: then ? (_jsxs(_Fragment, { children: [_jsx("div", { className: illustrationCardParts.stage, "data-stage": "first", children: children }), _jsx("div", { className: illustrationCardParts.stage, "data-stage": "then", children: then })] })) : (children) }) }));
 }

package/dist/components/core/illustration-card/IllustrationCard.types.d.ts

@@ -8,14 +8,21 @@ export interface IllustrationCardOwnProps {
     ratio?: 'landscape' | 'square' | 'upright';
     /** Always. What the picture shows, in a sentence — "Trade ticket: buy Gold to rise over 5 minutes, staking 10 USD". The pane is one image to assistive technology and this is its whole description; nothing inside it is read out on its own */
     label: string;
+    /**
+     * `frost` — The pane frosts over its photograph as it arrives: the glass blurs in over motion.duration.dramatic, and what it holds fades in a step of motion.duration.stagger apart once the glass is mostly there. For a pane in an IllustrationScene, where there is a photograph to soften
+     */
+    motion?: 'frost';
+    /** A second state of the same product, played once after the first: the order goes in, then the position is open. The pane shows what it holds for motion.duration.hold, then that gives way to this — out over motion.duration.slow, in over motion.duration.reveal. Still, and for a reader who asked for less movement, the pane is this second state, so `label` describes it */
+    then?: ReactNode;
     /** Allowed: any content */
     children: ReactNode;
 }
-export type IllustrationCardProps = IllustrationCardOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio' | 'label'>;
+export type IllustrationCardProps = IllustrationCardOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio' | 'label' | 'motion' | 'then'>;
 /** The class each part carries. Apply these — do not retype them. */
 export declare const illustrationCardParts: {
     readonly root: "dds-illustrationcard";
     readonly content: "dds-illustrationcard__content";
+    readonly stage: "dds-illustrationcard__stage";
 };
 /** Generated so defaults cannot drift from the contract. */
 export declare const illustrationCardDefaults: {

package/dist/components/core/illustration-card/IllustrationCard.types.js

@@ -3,6 +3,7 @@
 export const illustrationCardParts = {
     root: 'dds-illustrationcard',
     content: 'dds-illustrationcard__content',
+    stage: 'dds-illustrationcard__stage',
 };
 /** Generated so defaults cannot drift from the contract. */
 export const illustrationCardDefaults = { ratio: 'landscape' };

package/dist/components/core/illustration-card/illustration-card-impl.css

@@ -45,3 +45,116 @@
 :where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > * {
   flex-shrink: 0;
 }
+
+/*
+ * The motions the pane plays once, as it arrives.
+ *
+ * `data-arrival` is the pane's own answer from useArrival (arrival.ts): `waiting` holds each motion
+ * at its first frame, `playing` runs it, and no attribute at all — a server's render, a reader who
+ * asked for less movement — is the pane at rest in its final state. Every motion is declared on
+ * both answers, with `both` fill and the waiting one paused, so the first frame is on screen before
+ * anything moves and the last one stays when it is done. The package's motion tokens throughout.
+ */
+
+/* Two states of one pane in one cell, so the second takes the first one's place. */
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content[data-story] {
+  display: grid;
+}
+
+/* Both states in the one cell. */
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__stage {
+  grid-area: 1 / 1;
+}
+
+/* At rest the pane is its second state, the one `label` describes. */
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__stage[data-stage='first'] {
+  visibility: hidden;
+}
+
+@keyframes dds-illustrationcard-frost {
+  from {
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+    background-color: transparent;
+    background-image: none;
+  }
+}
+
+@keyframes dds-illustrationcard-fade-in {
+  from {
+    opacity: var(--opacity-hidden);
+  }
+}
+
+@keyframes dds-illustrationcard-story-leave {
+  from {
+    visibility: visible;
+  }
+
+  to {
+    opacity: var(--opacity-hidden);
+    translate: 0 calc(-1 * var(--space-gap-sm));
+    visibility: hidden;
+  }
+}
+
+@keyframes dds-illustrationcard-story-arrive {
+  from {
+    opacity: var(--opacity-hidden);
+    translate: var(--motion-translate-hover);
+  }
+}
+
+/*
+ * `motion="frost"`: the glass blurs in over the photograph, then what it holds fades in, a step of
+ * motion.duration.stagger apart, once the glass is most of the way there — motion.duration.slow in.
+ * The steps are counted down the pane's own column; a ninth thing and after share the eighth's step.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-motion='frost'][data-arrival] {
+  animation: dds-illustrationcard-frost var(--motion-duration-dramatic) var(--motion-easing-reveal) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-motion='frost'][data-arrival] .dds-illustrationcard__content > * {
+  animation: dds-illustrationcard-fade-in var(--motion-duration-reveal) var(--motion-easing-reveal) both;
+  animation-delay: calc(var(--motion-duration-slow) + var(--dds-illustrationcard-step, 0) * var(--motion-duration-stagger));
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(2) { --dds-illustrationcard-step: 1; }
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(3) { --dds-illustrationcard-step: 2; }
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(4) { --dds-illustrationcard-step: 3; }
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(5) { --dds-illustrationcard-step: 4; }
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(6) { --dds-illustrationcard-step: 5; }
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(7) { --dds-illustrationcard-step: 6; }
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(n + 8) { --dds-illustrationcard-step: 7; }
+
+/*
+ * `then`: the first state holds for motion.duration.hold, then gives way — out over
+ * motion.duration.slow, rising a little — and the second comes up into its place a step of
+ * motion.duration.fast behind, over motion.duration.reveal.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival] .dds-illustrationcard__stage[data-stage='first'] {
+  animation: dds-illustrationcard-story-leave var(--motion-duration-slow) var(--motion-easing-reveal) var(--motion-duration-hold) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival] .dds-illustrationcard__stage[data-stage='then'] {
+  animation: dds-illustrationcard-story-arrive var(--motion-duration-reveal) var(--motion-easing-reveal)
+    calc(var(--motion-duration-hold) + var(--motion-duration-fast)) both;
+}
+
+/*
+ * Waiting: every motion above held at its first frame. `!important` because each motion is an
+ * `animation` shorthand, which resets the play state, and several are more specific than this.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival='waiting'],
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival='waiting'] .dds-illustrationcard__content > *,
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival='waiting'] .dds-illustrationcard__stage {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival],
+  :where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival] .dds-illustrationcard__content > *,
+  :where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival] .dds-illustrationcard__stage {
+    animation: none;
+  }
+}

package/dist/components/core/illustration-check/IllustrationCheck.css

@@ -0,0 +1,25 @@
+/* GENERATED from illustrationcheck.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck {
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck .dds-illustrationcheck__ring {
+  stroke-width: var(--border-width-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck .dds-illustrationcheck__tick {
+  stroke-width: var(--border-width-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck[data-size="lg"] {
+  height: var(--icon-size-lg);
+  width: var(--icon-size-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck[data-size="xl"] {
+  height: var(--icon-size-xl);
+  width: var(--icon-size-xl);
+}
+

package/dist/components/core/illustration-check/IllustrationCheck.d.ts

@@ -0,0 +1,16 @@
+import './IllustrationCheck.css';
+import './illustration-check-impl.css';
+import { type IllustrationCheckProps } from './IllustrationCheck.types.js';
+export type { IllustrationCheckProps };
+/**
+ * A ring with a tick in it: the mark a picture of the product shows when something has gone
+ * through.
+ *
+ * Drawn rather than taken from the glyph set, because it moves in parts — the ring spins and closes,
+ * then the tick draws in — and a glyph is one shape. Both strokes measure their own length as one
+ * (`pathLength`), so the stylesheet draws them in by that fraction whatever the drawing's size.
+ * In the colour of the text around it, like an Icon.
+ *
+ * No script of its own: a mark that resolves on arrival is wrapped to take one (arrives.tsx).
+ */
+export declare function IllustrationCheck({ size, motion, label, ...rest }: IllustrationCheckProps): import("react").JSX.Element;

package/dist/components/core/illustration-check/IllustrationCheck.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './IllustrationCheck.css';
+import './illustration-check-impl.css';
+import { Arrives } from '../../arrives.js';
+import { given } from '../../given.js';
+import { illustrationCheckDefaults, illustrationCheckParts, } from './IllustrationCheck.types.js';
+/**
+ * A ring with a tick in it: the mark a picture of the product shows when something has gone
+ * through.
+ *
+ * Drawn rather than taken from the glyph set, because it moves in parts — the ring spins and closes,
+ * then the tick draws in — and a glyph is one shape. Both strokes measure their own length as one
+ * (`pathLength`), so the stylesheet draws them in by that fraction whatever the drawing's size.
+ * In the colour of the text around it, like an Icon.
+ *
+ * No script of its own: a mark that resolves on arrival is wrapped to take one (arrives.tsx).
+ */
+export function IllustrationCheck({ size = illustrationCheckDefaults.size, motion, label, ...rest }) {
+    const named = given(label);
+    const mark = (_jsx("span", { ...rest, className: illustrationCheckParts.root, "data-size": size, "data-motion": motion, role: named ? 'img' : undefined, "aria-label": named ? label : undefined, "aria-hidden": named ? undefined : true, children: _jsxs("svg", { viewBox: "0 0 56 56", width: "100%", height: "100%", fill: "none", stroke: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { className: illustrationCheckParts.ring, cx: "28", cy: "28", r: "25", pathLength: 1 }), _jsx("path", { className: illustrationCheckParts.tick, d: "M17 29.5l7.5 7.5L40 21", pathLength: 1, strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
+    return motion === undefined ? mark : _jsx(Arrives, { children: mark });
+}

package/dist/components/core/illustration-check/IllustrationCheck.types.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'react';
+export interface IllustrationCheckOwnProps {
+    /**
+     * `lg` — Thirty-two pixels, icon.size.lg. Beside a line of words in a pane
+     * `xl` — Forty-eight pixels, icon.size.xl, and the default. The mark as the subject of a pane
+     */
+    size?: 'lg' | 'xl';
+    /**
+     * `resolve` — The ring spins open like a Spinner for two turns, closes, and the tick draws in — the moment something goes through
+     */
+    motion?: 'resolve';
+    /** Only where the mark says something nothing beside it does — rarely. It names the mark as an image */
+    label?: string;
+}
+export type IllustrationCheckProps = IllustrationCheckOwnProps & Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'size' | 'motion' | 'label'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const illustrationCheckParts: {
+    readonly root: "dds-illustrationcheck";
+    readonly ring: "dds-illustrationcheck__ring";
+    readonly tick: "dds-illustrationcheck__tick";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const illustrationCheckDefaults: {
+    readonly size: "xl";
+};

package/dist/components/core/illustration-check/IllustrationCheck.types.js

@@ -0,0 +1,9 @@
+// GENERATED from illustration-check.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const illustrationCheckParts = {
+    root: 'dds-illustrationcheck',
+    ring: 'dds-illustrationcheck__ring',
+    tick: 'dds-illustrationcheck__tick',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const illustrationCheckDefaults = { size: 'xl' };

package/dist/components/core/illustration-check/illustration-check-impl.css

@@ -0,0 +1,76 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `motion="resolve"`: the ring spins open, closes, and the tick draws in, once. `data-arrival` is
+ * the mark's own answer from useArrival (arrival.ts): `waiting` holds the first frame — an open arc,
+ * no tick — `playing` runs it, and no attribute — a server, a reader who asked for less movement —
+ * is the finished mark. Both strokes measure one (`pathLength`), so these fractions hold at any size.
+ *
+ *   two turns of motion.duration.spinner on its linear easing — the Spinner's own turn — as a short
+ *   arc, the way a Spinner reads;
+ *   the arc closes round over motion.duration.shift;
+ *   the tick draws in over motion.duration.slow.
+ *
+ * The svg turns rather than the ring, so the arc and its closing are one stroke that stops turning
+ * at the top. A vector stroke scales with the drawing; this one keeps border.width.strong.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcheck svg {
+  display: block;
+  overflow: visible;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck :is(.dds-illustrationcheck__ring, .dds-illustrationcheck__tick) {
+  vector-effect: non-scaling-stroke;
+}
+
+@keyframes dds-illustrationcheck-spin {
+  to {
+    rotate: 1turn;
+  }
+}
+
+@keyframes dds-illustrationcheck-close {
+  from {
+    stroke-dasharray: 0.28 1;
+  }
+
+  to {
+    stroke-dasharray: 1 0;
+  }
+}
+
+@keyframes dds-illustrationcheck-draw {
+  from {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1;
+  }
+
+  to {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck[data-motion='resolve'][data-arrival] svg {
+  animation: dds-illustrationcheck-spin var(--motion-duration-spinner) var(--motion-easing-spinner) 2;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck[data-motion='resolve'][data-arrival] .dds-illustrationcheck__ring {
+  animation: dds-illustrationcheck-close var(--motion-duration-shift) var(--motion-easing-reveal)
+    calc(2 * var(--motion-duration-spinner)) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck[data-motion='resolve'][data-arrival] .dds-illustrationcheck__tick {
+  animation: dds-illustrationcheck-draw var(--motion-duration-slow) var(--motion-easing-reveal)
+    calc(2 * var(--motion-duration-spinner) + var(--motion-duration-shift)) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck[data-motion='resolve'][data-arrival='waiting'] :is(svg, .dds-illustrationcheck__ring, .dds-illustrationcheck__tick) {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-illustrationcheck[data-motion='resolve'][data-arrival] :is(svg, .dds-illustrationcheck__ring, .dds-illustrationcheck__tick) {
+    animation: none;
+  }
+}

package/dist/components/core/illustration-choice/IllustrationChoice.css

@@ -0,0 +1,62 @@
+/* GENERATED from illustrationchoice.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice {
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  position: relative;
+  row-gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__option {
+  align-items: center;
+  display: grid;
+  background-color: var(--color-bg-subtle);
+  border-radius: var(--radius-control-md);
+  color: var(--color-fg-default);
+  column-gap: var(--space-gap-sm);
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__radio {
+  border-style: solid;
+  display: grid;
+  flex-shrink: 0;
+  place-items: center;
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-emphasis);
+  height: var(--icon-size-sm);
+  width: var(--icon-size-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__dot {
+  display: block;
+  border-radius: var(--radius-pill);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__outline {
+  border-style: solid;
+  pointer-events: none;
+  border-color: var(--color-border-info);
+  border-radius: var(--radius-control-md);
+  border-width: var(--border-width-emphasis);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__description {
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__label {
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+}
+

package/dist/components/core/illustration-choice/IllustrationChoice.d.ts

@@ -0,0 +1,16 @@
+import './IllustrationChoice.css';
+import './illustration-choice-impl.css';
+import { type IllustrationChoiceProps } from './IllustrationChoice.types.js';
+export type { IllustrationChoiceProps };
+/**
+ * A drawn set of options with one picked — a picture of the product making a choice, never a
+ * control.
+ *
+ * The outline is a grid item laid in the picked option's row, so the stylesheet places it without
+ * measuring anything. Picking on arrival, it starts a row away — the option after the picked one,
+ * or the one before where the picked one is last — and slides; which way is handed to the
+ * stylesheet as a sign, with the row it starts on marked so its circle can empty as it leaves.
+ *
+ * No script of its own: a choice that picks on arrival is wrapped to take one (arrives.tsx).
+ */
+export declare function IllustrationChoice({ options, value, motion, label, ...rest }: IllustrationChoiceProps): import("react").JSX.Element | null;

package/dist/components/core/illustration-choice/IllustrationChoice.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './IllustrationChoice.css';
+import './illustration-choice-impl.css';
+import { Arrives } from '../../arrives.js';
+import { given } from '../../given.js';
+import { illustrationChoiceParts, } from './IllustrationChoice.types.js';
+/**
+ * A drawn set of options with one picked — a picture of the product making a choice, never a
+ * control.
+ *
+ * The outline is a grid item laid in the picked option's row, so the stylesheet places it without
+ * measuring anything. Picking on arrival, it starts a row away — the option after the picked one,
+ * or the one before where the picked one is last — and slides; which way is handed to the
+ * stylesheet as a sign, with the row it starts on marked so its circle can empty as it leaves.
+ *
+ * No script of its own: a choice that picks on arrival is wrapped to take one (arrives.tsx).
+ */
+export function IllustrationChoice({ options, value, motion, label, ...rest }) {
+    // A record from a feed or an editor is not typed: a missing list draws nothing rather than
+    // taking the page down.
+    if (!Array.isArray(options) || options.length === 0)
+        return null;
+    const picked = Math.max(0, options.findIndex((option) => option.value === value));
+    // Where the outline starts when it picks: the next option, or the one before if the pick is last.
+    const start = picked < options.length - 1 ? picked + 1 : picked - 1;
+    // A lone option has no other to start from, so it is drawn picked and still.
+    const moves = motion !== undefined && options.length > 1;
+    const named = given(label);
+    const choice = (_jsxs("div", { ...rest, className: illustrationChoiceParts.root, "data-motion": moves ? motion : undefined, role: named ? 'img' : undefined, "aria-label": named ? label : undefined, style: { '--dds-illustrationchoice-from': start - picked }, children: [options.map((option, at) => (_jsxs("div", { className: illustrationChoiceParts.option, "data-picked": at === picked ? '' : undefined, "data-start": moves && at === start ? '' : undefined, style: { gridRow: at + 1 }, children: [_jsx("span", { className: illustrationChoiceParts.radio, style: { gridRow: given(option.description) ? 'span 2' : undefined }, children: _jsx("span", { className: illustrationChoiceParts.dot }) }), _jsx("span", { className: illustrationChoiceParts.label, children: option.label }), given(option.description) ? (_jsx("span", { className: illustrationChoiceParts.description, children: option.description })) : null] }, option.value))), _jsx("span", { className: illustrationChoiceParts.outline, "aria-hidden": "true", style: { gridRow: picked + 1 } })] }));
+    return moves ? _jsx(Arrives, { children: choice }) : choice;
+}

package/dist/components/core/illustration-choice/IllustrationChoice.types.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'react';
+import type { IllustrationChoiceOption } from '../../illustration-data.js';
+export interface IllustrationChoiceOwnProps {
+    /** Always. Two to four options, each a name in a few words and a line under it where it needs one */
+    options: IllustrationChoiceOption[];
+    /** Always. The `value` of the option shown picked */
+    value: string;
+    /**
+     * `pick` — The outline starts on a neighbouring option and slides to the picked one, whose circle then fills — the product making the choice
+     */
+    motion?: 'pick';
+    /** Where the picture stands on its own and its options say less than a sentence would — "Choosing an account: the demo account". It names the whole as one image */
+    label?: string;
+}
+export type IllustrationChoiceProps = IllustrationChoiceOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'options' | 'value' | 'motion' | 'label'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const illustrationChoiceParts: {
+    readonly root: "dds-illustrationchoice";
+    readonly option: "dds-illustrationchoice__option";
+    readonly radio: "dds-illustrationchoice__radio";
+    readonly dot: "dds-illustrationchoice__dot";
+    readonly label: "dds-illustrationchoice__label";
+    readonly description: "dds-illustrationchoice__description";
+    readonly outline: "dds-illustrationchoice__outline";
+};

package/dist/components/core/illustration-choice/IllustrationChoice.types.js

@@ -0,0 +1,11 @@
+// GENERATED from illustration-choice.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const illustrationChoiceParts = {
+    root: 'dds-illustrationchoice',
+    option: 'dds-illustrationchoice__option',
+    radio: 'dds-illustrationchoice__radio',
+    dot: 'dds-illustrationchoice__dot',
+    label: 'dds-illustrationchoice__label',
+    description: 'dds-illustrationchoice__description',
+    outline: 'dds-illustrationchoice__outline',
+};