@yahoo/uds-create-config 5.19.1 → 5.21.0

package/dist/entities/system/motion-convert.js

@@ -0,0 +1,517 @@
+import { reject } from "../../framework/rejection.js";
+import { isRef } from "../../framework/utils/refs.js";
+import { isPlainObject } from "../../framework/utils/field-path.js";
+import { MOTION_EASING_NAMES, bezierPoints, motionOfCssKeyword } from "./easings.js";
+import { cssEasing } from "./css-timing.js";
+import { JS_ONLY_FIELDS } from "./Motion.js";
+//#region src/entities/system/motion-convert.ts
+/** The states both runtimes share. */
+const STATES = [
+	"initial",
+	"animate",
+	"exit",
+	"whileHover",
+	"whileTap",
+	"whileFocus"
+];
+/** A JS transition's keys that time a value, rather than name one. */
+const JS_TIMING_KEYS = new Set([
+	"type",
+	"duration",
+	"delay",
+	"ease",
+	"times",
+	"stiffness",
+	"damping",
+	"mass",
+	"bounce",
+	"visualDuration"
+]);
+/** A JS transition's keys that say how a value's animation sits among others, which CSS has none of. */
+const JS_ORCHESTRATION_KEYS = new Set([
+	"when",
+	"delayChildren",
+	"staggerChildren",
+	"staggerDirection",
+	"from",
+	"elapsed",
+	"velocity",
+	"restSpeed",
+	"restDelta"
+]);
+const JS_REPEAT_KEYS = [
+	"repeat",
+	"repeatType",
+	"repeatDelay"
+];
+const CSS_TIME = /^(-?(?:\d+(?:\.\d*)?|\.\d+))(ms|s)$/;
+var Notes = class {
+	dropped = [];
+	approximated = [];
+	refused = [];
+};
+/** `body` as the `to` runtime takes it, with what the conversion left out, changed or refused. */
+function convertMotion({ body, to }) {
+	const notes = new Notes();
+	if (body.runtime === to) return {
+		body,
+		...notes
+	};
+	const converted = to === "css" ? cssOf(body, notes) : jsOf(body, notes);
+	if (notes.refused.length > 0) return { ...notes };
+	return {
+		body: converted,
+		...notes
+	};
+}
+function cssOf(body, notes) {
+	const out = { runtime: "css" };
+	for (const state of STATES) {
+		if (body[state] === void 0) continue;
+		out[state] = cssStateOf({
+			target: body[state],
+			at: state,
+			notes
+		});
+	}
+	if (isPlainObject(body.variants)) out.variants = Object.fromEntries(Object.entries(body.variants).map(([name, target]) => [name, cssStateOf({
+		target,
+		at: `variants.${name}`,
+		notes
+	})]));
+	if (isPlainObject(body.transition)) out.transition = cssTransitionOf({
+		transition: body.transition,
+		at: "transition",
+		notes
+	});
+	if (body.reducedMotion !== void 0) out.reducedMotion = body.reducedMotion;
+	for (const field of JS_ONLY_FIELDS) {
+		if (body[field] === void 0) continue;
+		notes.dropped.push({
+			at: field,
+			reason: `CSS has no \`${field}\`.`
+		});
+	}
+	return out;
+}
+function cssStateOf({ target, at, notes }) {
+	if (!isPlainObject(target)) return target;
+	const out = {};
+	for (const [key, value] of Object.entries(target)) {
+		if (key === "transitionEnd") {
+			notes.dropped.push({
+				at: `${at}.${key}`,
+				reason: "A stylesheet can't set values once a transition ends."
+			});
+			continue;
+		}
+		if (key === "transition") {
+			if (isPlainObject(value)) out.transition = cssTransitionOf({
+				transition: value,
+				at: `${at}.transition`,
+				notes
+			});
+			continue;
+		}
+		if (Array.isArray(value) && value.length > 1 && !holdsThenMoves(value)) notes.approximated.push({
+			at: `${at}.${key}`,
+			reason: "A CSS transition plays a list of keyframes as its last value."
+		});
+		out[key] = value;
+	}
+	return out;
+}
+/** Whether a keyframe list holds its first value and then moves to its last, which CSS plays as a
+*  delay. */
+function holdsThenMoves(value) {
+	if (value.length < 3) return false;
+	const first = JSON.stringify(value[0]);
+	return value.slice(1, -1).every((step) => JSON.stringify(step) === first);
+}
+/**
+* A JS transition as CSS: the timing every value takes (`default` where it sets one, as
+* `motion/react` reads it), and each value's own under `properties`.
+*/
+function cssTransitionOf({ transition, at, notes }) {
+	const out = cssTimingOf({
+		...isPlainObject(transition.default) ? {
+			timing: transition.default,
+			at: `${at}.default`
+		} : {
+			timing: transition,
+			at
+		},
+		notes
+	});
+	const properties = {};
+	for (const [key, value] of Object.entries(transition)) {
+		if (key === "default" || JS_TIMING_KEYS.has(key)) continue;
+		if (JS_ORCHESTRATION_KEYS.has(key) || JS_REPEAT_KEYS.includes(key)) continue;
+		if (!isPlainObject(value) || isRef(value)) {
+			notes.dropped.push({
+				at: `${at}.${key}`,
+				reason: `\`${key}\` is no timing CSS reads.`
+			});
+			continue;
+		}
+		properties[key] = cssTimingOf({
+			timing: value,
+			at: `${at}.${key}`,
+			notes
+		});
+	}
+	if (Object.keys(properties).length > 0) out.properties = properties;
+	return out;
+}
+/** One JS timing as CSS. A timing that sets how a value moves keeps doing so, so a tween that leaves
+*  its duration to `motion/react`'s default writes that default out. */
+function cssTimingOf({ timing, at, notes }) {
+	const out = {};
+	for (const key of JS_REPEAT_KEYS) {
+		if (timing[key] === void 0 || timing[key] === 0) continue;
+		notes.refused.push({
+			at: `${at}.${key}`,
+			reason: "A CSS transition plays once, so it has no repeat."
+		});
+	}
+	if (timing.type === "inertia" || timing.type === "decay") notes.refused.push({
+		at: `${at}.type`,
+		reason: `CSS has no \`${timing.type}\` animation.`
+	});
+	for (const key of Object.keys(timing)) {
+		if (!JS_ORCHESTRATION_KEYS.has(key)) continue;
+		notes.dropped.push({
+			at: `${at}.${key}`,
+			reason: `CSS has no \`${key}\`: each element's transition plays on its own.`
+		});
+	}
+	if (timing.delay !== void 0) out.delay = cssTimeOf({
+		value: timing.delay,
+		at: `${at}.delay`,
+		notes
+	});
+	if (Array.isArray(timing.times)) out.times = timing.times;
+	if (timing.type === "spring") {
+		const spring = {};
+		for (const key of [
+			"stiffness",
+			"damping",
+			"mass",
+			"bounce"
+		]) if (timing[key] !== void 0) spring[key] = timing[key];
+		for (const key of ["duration", "visualDuration"]) {
+			if (timing[key] === void 0) continue;
+			spring[key] = cssTimeOf({
+				value: timing[key],
+				at: `${at}.${key}`,
+				notes
+			});
+		}
+		out.easing = { spring };
+		return out;
+	}
+	if (timing.duration !== void 0) out.duration = cssTimeOf({
+		value: timing.duration,
+		at: `${at}.duration`,
+		notes
+	});
+	if (timing.ease !== void 0) {
+		const easing = cssEaseOf({
+			ease: timing.ease,
+			duration: out.duration
+		});
+		if (easing === void 0) notes.approximated.push({
+			at: `${at}.ease`,
+			reason: "CSS has one easing per transition, so it plays `motion/react`'s default instead."
+		});
+		else out.easing = easing;
+	}
+	if (Object.keys(timing).some((key) => JS_TIMING_KEYS.has(key) && key !== "delay" && timing[key] !== void 0) && out.duration === void 0 && out.easing === void 0 && out.times === void 0) out.duration = "300ms";
+	return out;
+}
+/** A time as CSS: a number is seconds, as `motion/react` reads it. A token or a CSS time stays. */
+function cssTimeOf({ value, at, notes }) {
+	if (typeof value === "number") return `${Math.round(value * 1e3)}ms`;
+	if (typeof value === "string" || isRef(value)) return value;
+	notes.refused.push({
+		at,
+		reason: "This is no time."
+	});
+}
+/** A JS `ease` as a CSS easing, or `undefined` for a list of them, one per keyframe. */
+function cssEaseOf({ ease, duration }) {
+	if (isRef(ease)) return ease;
+	return cssEasing({
+		ease,
+		duration: (typeof duration === "string" ? millisecondsOf(duration) : void 0) ?? 300
+	});
+}
+function millisecondsOf(time) {
+	const match = CSS_TIME.exec(time.trim());
+	if (!match) return void 0;
+	return match[2] === "ms" ? Number(match[1]) : Number(match[1]) * 1e3;
+}
+function jsOf(body, notes) {
+	const out = { runtime: "js" };
+	if (body.keyframes !== void 0) {
+		if (STATES.some((state) => body[state] !== void 0) || body.variants !== void 0) {
+			notes.refused.push({
+				at: "keyframes",
+				reason: "A JS preset plays keyframes as a state, so a preset with both has no single JS form."
+			});
+			return out;
+		}
+		Object.assign(out, jsKeyframesOf(body, notes));
+	}
+	for (const state of STATES) {
+		if (body[state] === void 0) continue;
+		out[state] = jsStateOf({
+			target: body[state],
+			at: state,
+			notes
+		});
+	}
+	if (isPlainObject(body.variants)) out.variants = Object.fromEntries(Object.entries(body.variants).map(([name, target]) => [name, jsStateOf({
+		target,
+		at: `variants.${name}`,
+		notes
+	})]));
+	if (isPlainObject(body.transition)) out.transition = jsTransitionOf({
+		transition: body.transition,
+		at: "transition",
+		notes
+	});
+	if (body.reducedMotion !== void 0) out.reducedMotion = body.reducedMotion;
+	return out;
+}
+function jsStateOf({ target, at, notes }) {
+	if (!isPlainObject(target)) return target;
+	if (!isPlainObject(target.transition)) return target;
+	return {
+		...target,
+		transition: jsTransitionOf({
+			transition: target.transition,
+			at: `${at}.transition`,
+			notes
+		})
+	};
+}
+function jsTransitionOf({ transition, at, notes }) {
+	const { properties, ...timing } = transition;
+	const out = jsTimingOf({
+		timing,
+		at,
+		notes
+	});
+	if (isPlainObject(properties)) for (const [key, value] of Object.entries(properties)) {
+		if (!isPlainObject(value)) continue;
+		out[key] = jsTimingOf({
+			timing: value,
+			at: `${at}.properties.${key}`,
+			notes
+		});
+	}
+	return out;
+}
+function jsTimingOf({ timing, at, notes }) {
+	const out = {};
+	if (timing.delay !== void 0) out.delay = secondsOf({
+		value: timing.delay,
+		at: `${at}.delay`,
+		notes
+	});
+	if (Array.isArray(timing.times)) out.times = timing.times;
+	const easing = timing.easing;
+	if (isPlainObject(easing) && isPlainObject(easing.spring)) {
+		out.type = "spring";
+		for (const [key, value] of Object.entries(easing.spring)) out[key] = key === "duration" || key === "visualDuration" ? secondsOf({
+			value,
+			at: `${at}.easing.spring.${key}`,
+			notes
+		}) : value;
+		if (timing.duration !== void 0) notes.approximated.push({
+			at: `${at}.duration`,
+			reason: "`motion/react` plays a spring for as long as the spring takes, so a duration beside it isn't kept."
+		});
+		return out;
+	}
+	if (timing.duration !== void 0) out.duration = secondsOf({
+		value: timing.duration,
+		at: `${at}.duration`,
+		notes
+	});
+	if (easing !== void 0) out.ease = motionEaseOf({
+		easing,
+		at: `${at}.easing`,
+		notes
+	});
+	return out;
+}
+/** A CSS time as `motion/react` reads it, in seconds. A token stays, since its value is read to
+*  seconds when the preset is built. */
+function secondsOf({ value, at, notes }) {
+	if (isRef(value)) return value;
+	if (typeof value === "string") {
+		const ms = millisecondsOf(value);
+		if (ms !== void 0) return ms / 1e3;
+	}
+	notes.refused.push({
+		at,
+		reason: `\`motion/react\` reads a time as seconds, and \`${String(value)}\` is no plain time.`
+	});
+}
+/** A CSS easing as `motion/react`'s `ease`. A token stays, and is read when the preset is built. */
+function motionEaseOf({ easing, at, notes }) {
+	if (isRef(easing)) return easing;
+	if (typeof easing === "string") {
+		const text = easing.trim();
+		if (MOTION_EASING_NAMES.has(text)) return text;
+		const keyword = motionOfCssKeyword(text);
+		if (keyword !== void 0) return typeof keyword === "string" ? keyword : [...keyword];
+		const curve = bezierPoints(text);
+		if (curve) return [...curve];
+	}
+	notes.refused.push({
+		at,
+		reason: `\`motion/react\` has no easing for \`${String(easing)}\`.`
+	});
+}
+/** CSS `@keyframes` as a JS preset's `animate`: one list per property, at the keyframes' offsets. */
+function jsKeyframesOf(body, notes) {
+	const keyframes = isPlainObject(body.keyframes) ? body.keyframes : {};
+	const frames = Object.entries(keyframes).map(([offset, values]) => ({
+		at: offsetOf(offset),
+		values
+	})).filter((frame) => frame.at !== void 0 && isPlainObject(frame.values)).sort((a, b) => a.at - b.at);
+	if (frames.length !== Object.keys(keyframes).length || frames.length < 2) {
+		notes.refused.push({
+			at: "keyframes",
+			reason: "A JS preset needs keyframes at `from`, `to` or percentages, at least two of them."
+		});
+		return {};
+	}
+	const properties = new Set(frames.flatMap((frame) => Object.keys(frame.values)));
+	const animate = {};
+	for (const property of properties) {
+		const values = frames.map((frame) => frame.values[property]);
+		if (values.some((value) => value === void 0)) {
+			notes.refused.push({
+				at: `keyframes.${property}`,
+				reason: `\`${property}\` isn't set at every keyframe, which \`motion/react\`'s keyframe list needs.`
+			});
+			continue;
+		}
+		animate[camelCase(property)] = values;
+	}
+	const transition = { times: frames.map((frame) => frame.at) };
+	if (body.duration !== void 0) transition.duration = secondsOf({
+		value: body.duration,
+		at: "duration",
+		notes
+	});
+	if (body.delay !== void 0) transition.delay = secondsOf({
+		value: body.delay,
+		at: "delay",
+		notes
+	});
+	if (body.timingFunction !== void 0) transition.ease = motionEaseOf({
+		easing: body.timingFunction,
+		at: "timingFunction",
+		notes
+	});
+	const count = body.iterationCount;
+	if (count === "infinite") notes.refused.push({
+		at: "iterationCount",
+		reason: "`motion/react` repeats forever with `Infinity`, which a stored preset can't hold."
+	});
+	else if (count !== void 0) {
+		const times = Number(count);
+		if (!Number.isInteger(times) || times < 1) notes.refused.push({
+			at: "iterationCount",
+			reason: "`motion/react` repeats a whole number of times."
+		});
+		else if (times > 1) transition.repeat = times - 1;
+	}
+	if (body.direction === "alternate") transition.repeatType = "reverse";
+	else if (body.direction !== void 0 && body.direction !== "normal") notes.refused.push({
+		at: "direction",
+		reason: `\`motion/react\` plays keyframes forwards, or back and forth, so it has no \`${String(body.direction)}\`.`
+	});
+	if (body.fillMode === "none" || body.fillMode === "backwards") notes.approximated.push({
+		at: "fillMode",
+		reason: "`motion/react` holds the last keyframe once it ends."
+	});
+	return {
+		animate,
+		transition
+	};
+}
+/** A keyframe's offset from 0 to 1, from `from`, `to` or a percentage. */
+function offsetOf(offset) {
+	const text = offset.trim();
+	if (text === "from") return 0;
+	if (text === "to") return 1;
+	const percent = /^(\d+(?:\.\d+)?)%$/.exec(text);
+	if (!percent) return void 0;
+	const value = Number(percent[1]) / 100;
+	return value >= 0 && value <= 1 ? value : void 0;
+}
+const camelCase = (property) => property.startsWith("--") ? property : property.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+/** What converting the preset at `path` would do, without doing it. */
+function planMotionConversion({ config, path, to }) {
+	const body = config.resolve("motion", path)?.toJSON();
+	if (!body) reject("NOT_FOUND", `There is no motion preset "${path}".`);
+	const link = config.borrowedFrom("motion", path);
+	const conversion = convertMotion({
+		body,
+		to
+	});
+	return {
+		path,
+		to,
+		...link === void 0 ? {} : { link },
+		dropped: conversion.dropped,
+		approximated: conversion.approximated,
+		refused: conversion.refused,
+		...conversion.refused.length > 0 ? { blocked: refusal({
+			path,
+			to,
+			refused: conversion.refused
+		}) } : {}
+	};
+}
+/**
+* The preset at `path` rewritten for `to`. A preset of this config's own is replaced by its
+* conversion. One borrowed from a linked system takes `runtime: to` on the link, which converts the
+* source's preset as it reads, so it keeps following what the source changes.
+*/
+function convertMotionPreset({ config, path, to }) {
+	const plan = planMotionConversion({
+		config,
+		path,
+		to
+	});
+	if (plan.blocked !== void 0) reject("UNSUPPORTED", plan.blocked);
+	const body = config.resolve("motion", path)?.toJSON();
+	if (body.runtime === to) return config;
+	if (plan.link !== void 0) return config.apply({
+		kind: "motion",
+		operation: "update",
+		path,
+		data: { runtime: to }
+	});
+	return config.apply({
+		kind: "motion",
+		operation: "replace",
+		path,
+		data: convertMotion({
+			body,
+			to
+		}).body
+	});
+}
+function refusal({ path, to, refused }) {
+	return `"${path}" can't be converted to ${to === "css" ? "CSS" : "JS"}. ${refused.map((note) => `\`${note.at}\`: ${note.reason}`).join(" ")}`;
+}
+//#endregion
+export { convertMotion, convertMotionPreset, planMotionConversion };

package/dist/entities/system/motion-presets.d.ts

@@ -1,4 +1,5 @@
 import { Config } from "../../framework/Config.js";
+import { ReducedMotion } from "./reduced-motion.js";
 
 //#region src/entities/system/motion-presets.d.ts
 /**
@@ -23,10 +24,17 @@ interface MotionPresetToken {
 declare function jsMotionPresets(config: Config): Record<string, Record<string, unknown>>;
 /** Every JS preset a style rule writes in place, by its id, resolved as {@link jsMotionPresets} are. */
 declare function inlineMotionProps(config: Config): Record<string, Record<string, unknown>>;
+/** The package JS motion plays through. A system that plays all of its motion as CSS imports none of it. */
+declare const MOTION_PACKAGE = "motion";
 /** Whether anything in the system animates through `motion/react`: a JS preset, named or written in
  *  place in a style rule. */
 declare function hasJsMotion(config: Config): boolean;
 /** The tokens JS presets name that a preset cannot carry as one value, for the build to report. */
 declare function motionPresetTokens(config: Config): MotionPresetToken[];
+/**
+ * Each preset's own `reducedMotion`, the default for a layer that plays it and sets none, by path:
+ * the named presets of either runtime, and the JS presets a style rule writes in place by their id.
+ */
+declare const presetReducedMotions: (config: Config) => Readonly<Record<string, ReducedMotion>>;
 //#endregion
-export { MotionPresetToken, hasJsMotion, inlineMotionProps, jsMotionPresets, motionPresetTokens };
+export { MOTION_PACKAGE, MotionPresetToken, hasJsMotion, inlineMotionProps, jsMotionPresets, motionPresetTokens, presetReducedMotions };

package/dist/entities/system/motion-presets.js

@@ -1,7 +1,9 @@
 import { collectRefs, isRef, kindOf, pathOf } from "../../framework/utils/refs.js";
 import { composedValueFormOf } from "./composed-values.js";
 import { createSliceMemo } from "../../framework/memo.js";
+import { MOTION_EASING_NAMES, bezierPoints, motionOfCssKeyword } from "./easings.js";
 import { inlineMotions } from "./motion-variants.js";
+import { isReducedMotion } from "./reduced-motion.js";
 import { jsMotionPropFields } from "./Motion.js";
 import { tokenValueRow } from "./token-values.js";
 import { renderValue } from "./value-render.js";
@@ -21,34 +23,6 @@ function motionValue(css) {
 	if (time) return time[2] === "ms" ? Number(time[1]) / 1e3 : Number(time[1]);
 	return BARE_NUMBER.test(text) ? Number(text) : text;
 }
-/** The easings `motion/react` names for itself, which a preset may write as they are. */
-const MOTION_EASINGS = new Set([
-	"linear",
-	"easeIn",
-	"easeOut",
-	"easeInOut",
-	"circIn",
-	"circOut",
-	"circInOut",
-	"backIn",
-	"backOut",
-	"backInOut",
-	"anticipate"
-]);
-/** CSS's easing keywords, as `motion/react` spells them. `ease` has no name there, so it is its curve. */
-const CSS_EASINGS = {
-	linear: "linear",
-	"ease-in": "easeIn",
-	"ease-out": "easeOut",
-	"ease-in-out": "easeInOut",
-	ease: [
-		.25,
-		.1,
-		.25,
-		1
-	]
-};
-const CUBIC_BEZIER = /^cubic-bezier\(\s*([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s)]+)\s*\)$/;
 /**
 * An `ease` as `motion/react` reads it: one of its own names, a CSS keyword as its name, a
 * `cubic-bezier(a, b, c, d)` as `[a, b, c, d]`, a curve already written as four numbers, or a list of
@@ -57,15 +31,11 @@ const CUBIC_BEZIER = /^cubic-bezier\(\s*([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s]+
 function motionEasing(value) {
 	if (typeof value === "string") {
 		const text = value.trim();
-		if (MOTION_EASINGS.has(text)) return text;
-		if (Object.hasOwn(CSS_EASINGS, text)) {
-			const easing = CSS_EASINGS[text];
-			return Array.isArray(easing) ? [...easing] : easing;
-		}
-		const curve = CUBIC_BEZIER.exec(text);
-		if (!curve) return void 0;
-		const points = curve.slice(1).map(Number);
-		return points.every(Number.isFinite) ? points : void 0;
+		if (MOTION_EASING_NAMES.has(text)) return text;
+		const keyword = motionOfCssKeyword(text);
+		if (keyword !== void 0) return typeof keyword === "string" ? keyword : [...keyword];
+		const curve = bezierPoints(text);
+		return curve ? [...curve] : void 0;
 	}
 	if (Array.isArray(value)) {
 		if (value.length === 4 && value.every((n) => typeof n === "number")) return value;
@@ -181,6 +151,7 @@ function resolveBody(config, preset, body, tokens) {
 		});
 		if (resolved) props[field] = resolved.value;
 	}
+	if (isReducedMotion(body.reducedMotion)) props.reducedMotion = body.reducedMotion;
 	return props;
 }
 /**
@@ -225,6 +196,8 @@ function jsMotionPresets(config) {
 function inlineMotionProps(config) {
 	return resolveJsMotionPresets(config).inline;
 }
+/** The package JS motion plays through. A system that plays all of its motion as CSS imports none of it. */
+const MOTION_PACKAGE = "motion";
 /** Whether anything in the system animates through `motion/react`: a JS preset, named or written in
 *  place in a style rule. */
 function hasJsMotion(config) {
@@ -235,5 +208,21 @@ function hasJsMotion(config) {
 function motionPresetTokens(config) {
 	return resolveJsMotionPresets(config).tokens;
 }
+/**
+* Each preset's own `reducedMotion`, the default for a layer that plays it and sets none, by path:
+* the named presets of either runtime, and the JS presets a style rule writes in place by their id.
+*/
+const presetReducedMotions = createSliceMemo({
+	kinds: ["motion", "component"],
+	compute: (config) => {
+		const out = {};
+		for (const preset of config.list("motion")) {
+			const { reducedMotion } = preset.toJSON();
+			if (isReducedMotion(reducedMotion)) out[preset.path] = reducedMotion;
+		}
+		for (const entry of inlineMotions(config).valid) if (isReducedMotion(entry.body.reducedMotion)) out[entry.id] = entry.body.reducedMotion;
+		return out;
+	}
+});
 //#endregion
-export { hasJsMotion, inlineMotionProps, jsMotionPresets, motionPresetTokens };
+export { MOTION_PACKAGE, hasJsMotion, inlineMotionProps, jsMotionPresets, motionPresetTokens, presetReducedMotions, resolvePresetValue };