@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/stats/stats-count.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The arithmetic of a Stats figure counting up: which figures can, what one reads partway there,
+ * and the curve it climbs on. Pure, so it is tested without a browser to animate in.
+ */
+/** A figure that can count: the one number in it, and what is written either side. */
+export interface Countable {
+    before: string;
+    whole: number;
+    /** How many places after the point the figure is written to — '1.2B' counts in tenths. */
+    places: number;
+    /** Whether the figure groups its thousands with commas — '1,000+' climbs as '640', '1,000'. */
+    grouped: boolean;
+    after: string;
+}
+/**
+ * The number in a figure, where it has exactly one.
+ *
+ * Exactly one, because a value with two is not a quantity: '24/7' counted up is '3/7' on the way,
+ * which is a different claim rather than a smaller one. A value with none — 'Free', 'Always' —
+ * simply shows. Everything either side of the number is kept as written, so '$' and 'M+' stand
+ * still while the digits climb.
+ */
+export declare function countable(value: string): Countable | null;
+/** The figure at a share of the way to its value, written the way the value is. */
+export declare function partway(figure: Countable, share: number): string;
+/**
+ * A `cubic-bezier()` easing, as a function of time.
+ *
+ * The count moves on motion.easing.reveal, the curve the figure itself rises on, so the number and
+ * the words under it settle together. A transition can name the token; a number drawn frame by
+ * frame cannot, so the curve is read off the token and walked here. Anything that is not a
+ * `cubic-bezier()` — a keyword, or nothing — counts evenly rather than on a curve invented here.
+ */
+export declare function easing(value: string): (time: number) => number;

package/dist/components/blocks/stats/stats-count.js

@@ -0,0 +1,61 @@
+/**
+ * The arithmetic of a Stats figure counting up: which figures can, what one reads partway there,
+ * and the curve it climbs on. Pure, so it is tested without a browser to animate in.
+ */
+/**
+ * The number in a figure, where it has exactly one.
+ *
+ * Exactly one, because a value with two is not a quantity: '24/7' counted up is '3/7' on the way,
+ * which is a different claim rather than a smaller one. A value with none — 'Free', 'Always' —
+ * simply shows. Everything either side of the number is kept as written, so '$' and 'M+' stand
+ * still while the digits climb.
+ */
+export function countable(value) {
+    const match = /^(\D*)(\d{1,3}(?:,\d{3})+|\d+)(?:\.(\d+))?(\D*)$/.exec(value);
+    if (match === null)
+        return null;
+    const [, before = '', digits = '', fraction = '', after = ''] = match;
+    return {
+        before,
+        whole: Number.parseFloat(`${digits.replace(/,/g, '')}.${fraction || '0'}`),
+        places: fraction.length,
+        grouped: digits.includes(','),
+        after,
+    };
+}
+/** The figure at a share of the way to its value, written the way the value is. */
+export function partway(figure, share) {
+    const [whole = '0', fraction] = (figure.whole * share).toFixed(figure.places).split('.');
+    const digits = figure.grouped ? whole.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : whole;
+    return `${figure.before}${digits}${fraction === undefined ? '' : `.${fraction}`}${figure.after}`;
+}
+/**
+ * A `cubic-bezier()` easing, as a function of time.
+ *
+ * The count moves on motion.easing.reveal, the curve the figure itself rises on, so the number and
+ * the words under it settle together. A transition can name the token; a number drawn frame by
+ * frame cannot, so the curve is read off the token and walked here. Anything that is not a
+ * `cubic-bezier()` — a keyword, or nothing — counts evenly rather than on a curve invented here.
+ */
+export function easing(value) {
+    const points = /cubic-bezier\(([^)]*)\)/.exec(value)?.[1]?.split(',').map(Number);
+    if (points?.length !== 4 || points.some((point) => !Number.isFinite(point)))
+        return (time) => time;
+    const [x1 = 0, y1 = 0, x2 = 1, y2 = 1] = points;
+    const along = (a, b, s) => 3 * a * s * (1 - s) ** 2 + 3 * b * s * s * (1 - s) + s ** 3;
+    return (time) => {
+        // Halving for the point on the curve whose x is the time: monotonic in x, so it always lands,
+        // and twenty halvings is closer than a pixel of any figure this draws.
+        let low = 0;
+        let high = 1;
+        let s = time;
+        for (let step = 0; step < 20; step += 1) {
+            s = (low + high) / 2;
+            if (along(x1, x2, s) < time)
+                low = s;
+            else
+                high = s;
+        }
+        return along(y1, y2, s);
+    };
+}

package/dist/components/blocks/stats/stats-impl.css

@@ -0,0 +1,284 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * A heading with no line under it closes up. Its bound step is the distance to the line, and with
+ * nothing there it would only add to the step from the header to the figures. `:last-child` is the
+ * condition itself, TestimonialRow's way, rather than a prop standing in for it.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * The figure as written and the running number share one cell.
+ *
+ * Both in the first row and column, so the cell is as wide as the wider of the two — which is the
+ * final figure, the running number never having more digits than the one it is climbing to. That
+ * is what holds the width while it counts: the label under it and the figures beside it stay where
+ * they are. A grid area is a pair of lines rather than a keyword, so it cannot sit in the contract.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__value > * {
+  grid-area: 1 / 1;
+}
+
+/*
+ * While it counts, the figure as written steps back behind the running number.
+ *
+ * Transparent rather than hidden: `visibility` and `display` would take it out of the accessibility
+ * tree, and it is the one thing there a screen reader should hear — the final figure, once. It also
+ * still holds the cell's width, which a hidden element would not.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__value[data-counting="true"] > .dds-stats__amount {
+  opacity: var(--opacity-hidden);
+}
+
+/*
+ * Two to a row on a phone. `minmax(0, 1fr)` rather than `1fr`, so a figure that will not break —
+ * a long one, at the figure's size — shrinks to its column instead of pushing the row past the page.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+/*
+ * On a phone, the wheel: one figure in place, the one before it smaller above, the next smaller
+ * below, turning on every motion.duration.hold — the reference site's mobile stats. useWheel sets
+ * `data-wheel` only below the fold, for two figures or more, and never for a reader who asked for
+ * less motion; without it the figures are the grid above.
+ *
+ * Start-aligned, as the heading is on a phone, and larger than the grid's figures — font.figure-lg
+ * for the number and body.lg for its label: one figure has the row to itself, and it is the one
+ * thing the band is showing.
+ *
+ * Every figure stands in the same cell, so the list is as tall as the tallest figure and each one
+ * is moved off it rather than laid out beside it. A step is a whole figure's own height — `100%` of
+ * the item, which the cell stretches to the tallest — rather than the arithmetic below: that sum is
+ * one line of label, and a label that wraps to two in German, or stands taller in Tamil, set every
+ * figure on the wheel into the next. The sum still sizes the room above and below. `--item` is a figure's height, the figure's line
+ * and the label's under it, so a step on the wheel is one figure: the one above sits a whole figure
+ * higher, at --dds-stats-wheel-side of its size (0.65) — the reference's scale, small enough that the one in place is plainly
+ * the one being read. The block padding is the room the side figures need, which is what is left of
+ * a figure's height once it is that far out and that much smaller.
+ *
+ * The side figures fade towards the band by a mask rather than by an ink of their own, so the wheel
+ * reads on every ground without a colour per ground.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] {
+  --dds-stats-wheel-item: calc(
+    var(--font-figure-lg-size) * var(--font-figure-lg-line-height) + var(--space-gap-sm) + var(--font-body-lg-size) *
+      var(--font-body-lg-line-height)
+  );
+
+  /* The wheel's geometry, the reference's numbers, named once. The side figures' scale; the scale a
+     figure shrinks to out of sight; the share of a figure's height the side figures need as room
+     above and below; and where the mask's fade stops, from either edge. */
+  --dds-stats-wheel-side: 0.65;
+  --dds-stats-wheel-away: 0.4;
+  --dds-stats-wheel-room: 0.85;
+  --dds-stats-wheel-fade: 35%;
+
+  grid-template-columns: minmax(0, 1fr);
+  mask-image: linear-gradient(
+    transparent,
+    black var(--dds-stats-wheel-fade),
+    black calc(100% - var(--dds-stats-wheel-fade)),
+    transparent
+  );
+  padding-block: calc(var(--dds-stats-wheel-item) * var(--dds-stats-wheel-room));
+}
+
+/*
+ * The wheel is a tab stop while it turns — focus holds it still — so it shows where focus is. The
+ * ring is drawn inside: the mask would fade one drawn outside at its top and foot.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel]:focus-visible {
+  outline: var(--border-width-focus) solid var(--color-border-focus);
+  outline-offset: calc(-1 * var(--border-width-focus));
+}
+
+:where([data-dds-context="marketing"]) .dds-stats[data-ground="strong"] .dds-stats__list[data-wheel]:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] > .dds-stats__item {
+  grid-area: 1 / 1;
+  transform-origin: left center;
+  transition-duration: var(--motion-duration-turn);
+  transition-property: opacity, scale, translate;
+  transition-timing-function: var(--motion-easing-reveal);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] .dds-stats__value {
+  font-family: var(--font-figure-lg-family);
+  font-size: var(--font-figure-lg-size);
+  font-weight: var(--font-figure-lg-weight);
+  letter-spacing: var(--font-figure-lg-letter-spacing);
+  line-height: var(--font-figure-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] .dds-stats__label {
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] > [data-slot='above'] {
+  scale: var(--dds-stats-wheel-side);
+  translate: 0 -100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] > [data-slot='below'] {
+  animation: dds-stats-wheel-in var(--motion-duration-turn) var(--motion-easing-reveal);
+  scale: var(--dds-stats-wheel-side);
+  translate: 0 100%;
+}
+
+/*
+ * Out of sight, a figure waits where the one above leaves to — risen and shrunk away — so leaving is
+ * a movement on, never back. It comes in below by an arrival of its own, from further down and
+ * smaller, rather than by crossing the wheel to get there.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] > [data-slot='hidden'] {
+  opacity: var(--opacity-hidden);
+  scale: var(--dds-stats-wheel-away);
+  translate: 0 -100%;
+}
+
+@keyframes dds-stats-wheel-in {
+  from {
+    opacity: var(--opacity-hidden);
+    scale: var(--dds-stats-wheel-away);
+    translate: 0 200%;
+  }
+}
+
+/*
+ * A reader who asked for less motion never gets the wheel — useWheel leaves the figures a grid — so
+ * this only says so in the sheet as well: were a wheel ever drawn for them, it would change places
+ * without moving.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] > .dds-stats__item {
+    animation: none;
+    transition: none;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__dot {
+    transition: none;
+  }
+}
+
+/*
+ * The wheel's dots on its start edge, and the figures beside them.
+ *
+ * While the wheel turns the section is a grid of two columns: the dots as wide as a dot, the figures
+ * the rest, the heading across both. The dots stand level with the figure in place, which is the
+ * middle of the list. Between the two, space.gap.md — the step between a control and what it
+ * describes.
+ *
+ * The dot in place is drawn long, size.dot.current, at full strength: PaginationDots' current dot
+ * on end, growing as the next figure turns in, the dots after it moving along to make room. It is
+ * the brand's coral, color.bg.brand, where the rest take the band's ink: the one mark of colour in
+ * the section says which figure is being read, and it holds on all three grounds.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__inner:has(> .dds-stats__list[data-wheel]) {
+  column-gap: var(--space-gap-md);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__inner:has(> .dds-stats__list[data-wheel]) > .dds-stats__header {
+  grid-column: 1 / -1;
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__inner:has(> .dds-stats__list[data-wheel]) > .dds-stats__dots {
+  align-self: center;
+  display: flex;
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__dot {
+  transition-duration: var(--motion-duration-turn);
+  transition-property: background-color, block-size, opacity;
+  transition-timing-function: var(--motion-easing-reveal);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__dot[data-current="true"] {
+  background-color: var(--color-bg-brand);
+  block-size: var(--size-dot-current);
+  opacity: var(--opacity-dot-current);
+}
+
+/*
+ * The figures shrink towards the edge they start at, so the one above and the one below stay in line
+ * with the one in place and with the heading over them.
+ */
+:where([data-dds-context="marketing"]) .dds-stats:dir(rtl) .dds-stats__list[data-wheel] > .dds-stats__item {
+  transform-origin: right center;
+}
+
+/*
+ * From the fold, the header and every figure are centred, the heading over the set it names.
+ *
+ * FeatureCards' rule and its reason: centred text starts every line at a different edge, which
+ * costs little across a wide measure and a great deal across a narrow one. The header and the line
+ * under it are capped narrower than the column, so `margin-inline: auto` is what centres those
+ * boxes rather than their words inside a box left at the start edge. A figure is centred in its
+ * column, so a row of them sits under the middle of the heading rather than to its start.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition, and it is the
+ * width the rest of this package folds at.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__item {
+    align-items: center;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__value {
+    justify-items: center;
+  }
+
+  /*
+   * How many figures share a row, read from the figures — FeatureCards' way, `:has()` asking the
+   * markup for the count it already holds rather than a prop restating it.
+   *
+   * Three to a row by default, which is five as three and two, and six as two rows of three. Three
+   * or fewer take one row of their own. Four are two rows of two here and one row at full width:
+   * four figures across a tablet's column are each narrower than a figure is wide at this size.
+   *
+   * Where `:has()` is not supported every count takes three to a row: the set still reads, only
+   * less exactly.
+   */
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list:has(> :nth-child(4):last-child),
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list:has(> :nth-child(2):last-child) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list:has(> :only-child) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list:has(> :nth-child(4):last-child) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}

package/dist/components/blocks/stats/use-wheel.d.ts

@@ -0,0 +1,37 @@
+import { type FocusEvent, type PointerEvent, type RefObject } from 'react';
+/** Where a figure stands on the wheel, relative to the one in place. */
+export type WheelSlot = 'active' | 'above' | 'below' | 'hidden';
+/**
+ * A figure's place on the wheel at a given turn: the one in place, the one it replaced above it, the
+ * one coming in below it, and every other figure out of sight.
+ *
+ * With two figures there is no "above" — the one that leaves comes straight back in below — and with
+ * three the one above goes straight to below, which the stylesheet draws as an arrival from below
+ * rather than as a figure crossing the wheel.
+ */
+export declare function slotOf(at: number, turn: number, count: number): WheelSlot;
+/**
+ * The phone's wheel of figures — the reference site's mobile stats: one figure in place, the one
+ * before it smaller above and the next smaller below, turning on to the next every
+ * motion.duration.hold plus motion.duration.turn.
+ *
+ * It turns only where every condition for it holds, and otherwise hands back `wheeling: false` and
+ * the figures are the grid they are from the fold:
+ * - the section is narrower than the fold, read off the section itself — a container, not the
+ *   viewport, as the stylesheet reads it;
+ * - there are two figures or more;
+ * - the reader has not asked for less motion — the grid is the still version of the same set;
+ * - the section is on screen. A wheel nobody can see does not turn, and starts again where it was;
+ * - nothing holds or has stopped it — see `hold`.
+ */
+export declare function useWheel(section: RefObject<HTMLElement | null>, count: number): {
+    wheeling: boolean;
+    turn: number;
+    hold: {
+        onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
+        onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+        onFocus: () => void;
+        onBlur: (event: FocusEvent<HTMLElement>) => void;
+        onPointerDownCapture: (event: PointerEvent<HTMLElement>) => void;
+    };
+};

package/dist/components/blocks/stats/use-wheel.js

@@ -0,0 +1,126 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { milliseconds } from '../../css-time.js';
+/**
+ * The width the figures stop turning at and lay out as a grid: the package's fold, in rem. A
+ * number here rather than a token read, because the stylesheet's container query states the same
+ * width longhand — `var()` is not permitted in one — and the two have to agree.
+ */
+const FOLD_REM = 48;
+/**
+ * A figure's place on the wheel at a given turn: the one in place, the one it replaced above it, the
+ * one coming in below it, and every other figure out of sight.
+ *
+ * With two figures there is no "above" — the one that leaves comes straight back in below — and with
+ * three the one above goes straight to below, which the stylesheet draws as an arrival from below
+ * rather than as a figure crossing the wheel.
+ */
+export function slotOf(at, turn, count) {
+    const place = (((at - turn) % count) + count) % count;
+    if (place === 0)
+        return 'active';
+    if (place === 1)
+        return 'below';
+    if (place === count - 1)
+        return 'above';
+    return 'hidden';
+}
+/**
+ * The phone's wheel of figures — the reference site's mobile stats: one figure in place, the one
+ * before it smaller above and the next smaller below, turning on to the next every
+ * motion.duration.hold plus motion.duration.turn.
+ *
+ * It turns only where every condition for it holds, and otherwise hands back `wheeling: false` and
+ * the figures are the grid they are from the fold:
+ * - the section is narrower than the fold, read off the section itself — a container, not the
+ *   viewport, as the stylesheet reads it;
+ * - there are two figures or more;
+ * - the reader has not asked for less motion — the grid is the still version of the same set;
+ * - the section is on screen. A wheel nobody can see does not turn, and starts again where it was;
+ * - nothing holds or has stopped it — see `hold`.
+ */
+export function useWheel(section, count) {
+    const [narrow, setNarrow] = useState(false);
+    const [seen, setSeen] = useState(false);
+    const [turn, setTurn] = useState(0);
+    const [still, setStill] = useState(false);
+    /*
+      A pointer over the wheel or focus on it holds it for as long as it lasts; a press anywhere on
+      it stops it for good — CtaBannerSlider's rule, by way of the WAI carousel pattern: a reader who
+      has touched the thing is reading it. Together they are the way to stop a wheel that would
+      otherwise turn for as long as it is on screen, which WCAG 2.2.2 asks of anything that moves on
+      its own for more than five seconds: the keyboard's way is the wheel's own tab stop, the
+      pointer's is resting on it, and a touch screen's is a tap.
+    */
+    const [held, setHeld] = useState(false);
+    const [stopped, setStopped] = useState(false);
+    const wheeling = narrow && count > 1 && !still;
+    // Asked live rather than once: a reader who turns on reduced motion mid-visit stops the wheel then.
+    useEffect(() => {
+        if (typeof window.matchMedia !== 'function')
+            return undefined;
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const follow = () => setStill(query.matches);
+        follow();
+        query.addEventListener?.('change', follow);
+        return () => query.removeEventListener?.('change', follow);
+    }, []);
+    useEffect(() => {
+        const element = section.current;
+        if (element === null || typeof ResizeObserver === 'undefined')
+            return undefined;
+        const measure = () => {
+            const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            // The layout width, not the drawn one: getBoundingClientRect reports the box after
+            // transforms, so a section shown scaled down — a thumbnail of the page, a zoomed preview —
+            // measured as a phone and turned into the wheel at desktop width. offsetWidth is the width
+            // the section is laid out at, the same one its container queries read.
+            setNarrow(element.offsetWidth < FOLD_REM * rem);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [section]);
+    useEffect(() => {
+        const element = section.current;
+        if (element === null || typeof IntersectionObserver === 'undefined')
+            return undefined;
+        const observer = new IntersectionObserver(([entry]) => setSeen(entry?.isIntersecting ?? false));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [section]);
+    useEffect(() => {
+        const element = section.current;
+        if (!wheeling || !seen || held || stopped || element === null)
+            return undefined;
+        const style = getComputedStyle(element);
+        const every = (milliseconds(style.getPropertyValue('--motion-duration-hold')) ?? 0) +
+            (milliseconds(style.getPropertyValue('--motion-duration-turn')) ?? 0);
+        if (every <= 0)
+            return undefined;
+        const timer = window.setInterval(() => setTurn((at) => at + 1), every);
+        return () => window.clearInterval(timer);
+    }, [section, wheeling, seen, held, stopped]);
+    /** Spread on the wheel's list: what holds it, and what stops it. */
+    const hold = {
+        onPointerEnter: (event) => {
+            if (event.pointerType === 'mouse')
+                setHeld(true);
+        },
+        onPointerLeave: (event) => {
+            if (event.pointerType === 'mouse')
+                setHeld(false);
+        },
+        onFocus: () => setHeld(true),
+        onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setHeld(false);
+        },
+        onPointerDownCapture: (event) => {
+            if (event.isPrimary && (event.pointerType !== 'mouse' || event.button === 0))
+                setStopped(true);
+        },
+    };
+    return { wheeling, turn, hold };
+}