@yahoo/uds 3.160.0 → 3.161.0

package/dist/components/client/BottomSheet/BottomSheet.cjs

@@ -5,6 +5,7 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_styles_styler = require("../../../styles/styler.cjs");
 const require_components_Box = require("../../Box.cjs");
 const require_components_Scrim = require("../../Scrim.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_utils_exposeAriakitScrollbarWidth = require("../../../utils/exposeAriakitScrollbarWidth.cjs");
 const require_components_client_BottomSheet_BottomSheetHandle = require("./BottomSheetHandle.cjs");
 const require_components_client_BottomSheet_BottomSheetInternalContext = require("./BottomSheetInternalContext.cjs");
@@ -19,7 +20,6 @@ const require_components_client_BottomSheet_useVirtualKeyboard = require("./useV
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ariakit_react = require("@ariakit/react");
-let motion_react = require("motion/react");
 //#region src/components/client/BottomSheet/BottomSheet.tsx
 /**
 * Drag-to-dismiss distance threshold as a ratio of the lowest snap point's
@@ -43,7 +43,7 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 	const isOpen = dialogStore.useState().open;
 	const keyboardHeightPx = require_components_client_BottomSheet_useVirtualKeyboard.useVirtualKeyboard(isOpen);
 	const viewportHeightPx = require_components_client_BottomSheet_useViewportHeight.useViewportHeight();
-	const prefersReducedMotion = (0, motion_react.useReducedMotion)() ?? false;
+	const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
 	const reducedMotion = forceReduceMotion || prefersReducedMotion;
 	const isDraggingRef = (0, react.useRef)(false);
 	const forceZeroMarginsRef = (0, react.useRef)(false);

package/dist/components/client/BottomSheet/BottomSheet.js

@@ -3,6 +3,7 @@
 import { cx, getStyles } from "../../../styles/styler.js";
 import { Box } from "../../Box.js";
 import { Scrim } from "../../Scrim.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { exposeAriakitScrollbarWidth } from "../../../utils/exposeAriakitScrollbarWidth.js";
 import { BottomSheetHandle } from "./BottomSheetHandle.js";
 import { BottomSheetInternalContext } from "./BottomSheetInternalContext.js";
@@ -17,7 +18,6 @@ import { useVirtualKeyboard } from "./useVirtualKeyboard.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog, useDialogContext } from "@ariakit/react";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/BottomSheet/BottomSheet.tsx
 /**
 * Drag-to-dismiss distance threshold as a ratio of the lowest snap point's
@@ -41,7 +41,7 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 	const isOpen = dialogStore.useState().open;
 	const keyboardHeightPx = useVirtualKeyboard(isOpen);
 	const viewportHeightPx = useViewportHeight();
-	const prefersReducedMotion = useReducedMotion() ?? false;
+	const prefersReducedMotion = usePrefersReducedMotion();
 	const reducedMotion = forceReduceMotion || prefersReducedMotion;
 	const isDraggingRef = useRef(false);
 	const forceZeroMarginsRef = useRef(false);

package/dist/components/client/Button/Button.cjs

@@ -6,6 +6,7 @@ const require_index = require("../../../css-tokens/dist/index.cjs");
 const require_utils_createSlot = require("../../../utils/createSlot.cjs");
 const require_components_Icon = require("../../Icon.cjs");
 const require_components_IconSlot = require("../../IconSlot.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
 const require_components_client_Button_ButtonBase = require("./ButtonBase.cjs");
 require("./buttonConstants.cjs");
@@ -70,7 +71,7 @@ const loadingMotionVariants = {
 * @componentType Client component
 */
 const Button = (0, react.forwardRef)(function Button(props, forwardedRef) {
-	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
 	const disableMotion = !!props.disableEffects || !!props.disabled;
 	const layoutVariant = prefersReducedMotion ? "smooth" : "subtle";
 	const endVariant = props.endIcon ? "icon" : "hide";

package/dist/components/client/Button/Button.js

@@ -4,13 +4,14 @@ import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED,
 import { createSlot } from "../../../utils/createSlot.js";
 import { Icon } from "../../Icon.js";
 import { IconSlot } from "../../IconSlot.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { SpringMotionConfig } from "../SpringMotionConfig.js";
 import { ButtonBase, renderButtonChildren } from "./ButtonBase.js";
 import "./buttonConstants.js";
 import { Progress } from "@yahoo/uds-icons";
 import { forwardRef, isValidElement, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence, m, useReducedMotion } from "motion/react";
+import { AnimatePresence, m } from "motion/react";
 //#region src/components/client/Button/Button.tsx
 const iconContainerMotionVariants = {
 	hide: {
@@ -67,7 +68,7 @@ const loadingMotionVariants = {
 * @componentType Client component
 */
 const Button = forwardRef(function Button(props, forwardedRef) {
-	const prefersReducedMotion = useReducedMotion();
+	const prefersReducedMotion = usePrefersReducedMotion();
 	const disableMotion = !!props.disableEffects || !!props.disabled;
 	const layoutVariant = prefersReducedMotion ? "smooth" : "subtle";
 	const endVariant = props.endIcon ? "icon" : "hide";

package/dist/components/client/Checkbox.cjs

@@ -6,6 +6,7 @@ const require_styles_styler = require("../../styles/styler.cjs");
 const require_components_Icon = require("../Icon.cjs");
 const require_components_Box = require("../Box.cjs");
 const require_components_FormLabel = require("../FormLabel.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_SpringMotionConfig = require("./SpringMotionConfig.cjs");
 let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
@@ -116,7 +117,7 @@ const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedP
 		if (!innerRef.current) return;
 		innerRef.current.indeterminate = isIndeterminate(checked_);
 	};
-	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
 	/**

package/dist/components/client/Checkbox.js

@@ -4,11 +4,12 @@ import { cx, getStyles } from "../../styles/styler.js";
 import { Icon } from "../Icon.js";
 import { Box } from "../Box.js";
 import { FormLabel } from "../FormLabel.js";
+import { usePrefersReducedMotion } from "../../hooks/usePrefersReducedMotion.js";
 import { SpringMotionConfig } from "./SpringMotionConfig.js";
 import { Check, Minus } from "@yahoo/uds-icons";
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { m, useReducedMotion } from "motion/react";
+import { m } from "motion/react";
 //#region src/components/client/Checkbox.tsx
 const VARIANTS = ["primary", "secondary"];
 const SIZES = ["sm", "md"];
@@ -113,7 +114,7 @@ const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaul
 		if (!innerRef.current) return;
 		innerRef.current.indeterminate = isIndeterminate(checked_);
 	};
-	const prefersReducedMotion = useReducedMotion();
+	const prefersReducedMotion = usePrefersReducedMotion();
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
 	/**

package/dist/components/client/Chip/ChipBase.cjs

@@ -6,16 +6,16 @@ const require_styles_styler = require("../../../styles/styler.cjs");
 const require_components_IconSlot = require("../../IconSlot.cjs");
 const require_components_Text = require("../../Text.cjs");
 const require_components_HStack = require("../../HStack.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let motion_react = require("motion/react");
 //#region src/components/client/Chip/ChipBase.tsx
 const SIZE_DEFAULT = "md";
 const VARIANT_DEFAULT = "primary";
 const MAX_WIDTH_DEFAULT = 200;
 const ChipBase = (0, react.forwardRef)(function ChipBase({ size = SIZE_DEFAULT, minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, as: As = "div", reduceMotion: forceReduceMotion, disabled = false, className, slotProps, children, ...rest }, ref) {
-	const cssAnimationDuration = (0, motion_react.useReducedMotion)() || forceReduceMotion ? "duration-0" : "duration-120";
+	const cssAnimationDuration = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() || forceReduceMotion ? "duration-0" : "duration-120";
 	const { className: textClassName, ...textProps } = slotProps?.text ?? {};
 	const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
 	const { className: endIconClassName, ...endIconProps } = slotProps?.endIcon ?? {};

package/dist/components/client/Chip/ChipBase.js

@@ -4,15 +4,15 @@ import { cx, getStyles } from "../../../styles/styler.js";
 import { IconSlot } from "../../IconSlot.js";
 import { Text } from "../../Text.js";
 import { HStack } from "../../HStack.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/Chip/ChipBase.tsx
 const SIZE_DEFAULT = "md";
 const VARIANT_DEFAULT = "primary";
 const MAX_WIDTH_DEFAULT = 200;
 const ChipBase = forwardRef(function ChipBase({ size = SIZE_DEFAULT, minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, as: As = "div", reduceMotion: forceReduceMotion, disabled = false, className, slotProps, children, ...rest }, ref) {
-	const cssAnimationDuration = useReducedMotion() || forceReduceMotion ? "duration-0" : "duration-120";
+	const cssAnimationDuration = usePrefersReducedMotion() || forceReduceMotion ? "duration-0" : "duration-120";
 	const { className: textClassName, ...textProps } = slotProps?.text ?? {};
 	const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
 	const { className: endIconClassName, ...endIconProps } = slotProps?.endIcon ?? {};

package/dist/components/client/IconButton/IconButton.cjs

@@ -5,6 +5,7 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../../../css-tokens/dist/index.cjs");
 const require_utils_createSlot = require("../../../utils/createSlot.cjs");
 const require_components_Icon = require("../../Icon.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
 require("../Button/buttonConstants.cjs");
 const require_components_client_Button_Button = require("../Button/Button.cjs");
@@ -20,7 +21,7 @@ let motion_react = require("motion/react");
 * @componentType Client component
 */
 const IconButton = (0, react.forwardRef)(function IconButton(props, forwardedRef) {
-	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
 	const disableMotion = !!props.disableEffects || !!props.disabled;
 	const layoutVariant = (0, react.useMemo)(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
 	const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);

package/dist/components/client/IconButton/IconButton.js

@@ -3,6 +3,7 @@
 import { BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../../css-tokens/dist/index.js";
 import { createSlot } from "../../../utils/createSlot.js";
 import { Icon } from "../../Icon.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { SpringMotionConfig } from "../SpringMotionConfig.js";
 import "../Button/buttonConstants.js";
 import { iconMotionVariants, loadingMotionVariants } from "../Button/Button.js";
@@ -10,7 +11,7 @@ import { IconButtonBase, renderIconButtonAsChild } from "./IconButtonBase.js";
 import { Progress } from "@yahoo/uds-icons";
 import { forwardRef, isValidElement, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence, m, useReducedMotion } from "motion/react";
+import { AnimatePresence, m } from "motion/react";
 //#region src/components/client/IconButton/IconButton.tsx
 /**
 * **⚙️️ An icon button element that can be used to trigger an action**
@@ -18,7 +19,7 @@ import { AnimatePresence, m, useReducedMotion } from "motion/react";
 * @componentType Client component
 */
 const IconButton = forwardRef(function IconButton(props, forwardedRef) {
-	const prefersReducedMotion = useReducedMotion();
+	const prefersReducedMotion = usePrefersReducedMotion();
 	const disableMotion = !!props.disableEffects || !!props.disabled;
 	const layoutVariant = useMemo(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
 	const Slot = useMemo(() => createSlot(), []);

package/dist/components/client/Input/Input.cjs

@@ -7,13 +7,13 @@ const require_components_IconSlot = require("../../IconSlot.cjs");
 const require_components_Box = require("../../Box.cjs");
 const require_components_HStack = require("../../HStack.cjs");
 const require_components_VStack = require("../../VStack.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_AnimateHeightChange = require("../AnimateHeightChange.cjs");
 const require_components_client_Input_InputHelpTextInternal = require("./InputHelpTextInternal.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lodash_isFunction_js = require("lodash/isFunction.js");
 lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
-let motion_react = require("motion/react");
 //#region src/components/client/Input/Input.tsx
 function setNativeInputValue(input, next) {
 	(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
@@ -132,7 +132,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 		onFocus,
 		slotProps
 	]);
-	const layoutVariant = (0, motion_react.useReducedMotion)() ? "smooth" : "bouncy";
+	const layoutVariant = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() ? "smooth" : "bouncy";
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const isInteractive = !readOnly && !disabled;
 	const classNames = {

package/dist/components/client/Input/Input.js

@@ -5,12 +5,12 @@ import { IconSlot } from "../../IconSlot.js";
 import { Box } from "../../Box.js";
 import { HStack } from "../../HStack.js";
 import { VStack } from "../../VStack.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { AnimateHeightChange } from "../AnimateHeightChange.js";
 import { InputHelpTextInternal as InputHelpTextInternalMemo } from "./InputHelpTextInternal.js";
 import { forwardRef, memo, useCallback, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isFunction } from "lodash-es";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/Input/Input.tsx
 function setNativeInputValue(input, next) {
 	(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
@@ -129,7 +129,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 		onFocus,
 		slotProps
 	]);
-	const layoutVariant = useReducedMotion() ? "smooth" : "bouncy";
+	const layoutVariant = usePrefersReducedMotion() ? "smooth" : "bouncy";
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const isInteractive = !readOnly && !disabled;
 	const classNames = {

package/dist/components/client/Modal/ManagedModal.cjs

@@ -2,6 +2,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../../_virtual/_rolldown/runtime.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_Modal_modalStore = require("./modalStore.cjs");
 const require_components_client_Modal_UDSModalConfigProvider = require("./UDSModalConfigProvider.cjs");
 const require_components_client_Modal_ModalActions = require("./ModalActions.cjs");
@@ -11,12 +12,11 @@ const require_components_client_Modal_ModalTitle = require("./ModalTitle.cjs");
 const require_components_client_Modal_Modal = require("./Modal.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let motion_react = require("motion/react");
 //#region src/components/client/Modal/ManagedModal.tsx
 const ManagedModal = ({ slot }) => {
 	const { animationDuration } = require_components_client_Modal_UDSModalConfigProvider.useModalConfig();
 	const durationOut = typeof animationDuration === "number" ? animationDuration : animationDuration.out;
-	const exitDuration = (0, motion_react.useReducedMotion)() || slot.props.reduceMotion ? 0 : durationOut;
+	const exitDuration = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() || slot.props.reduceMotion ? 0 : durationOut;
 	(0, react.useEffect)(() => {
 		if (!slot.closing) return;
 		const ownerId = slot.ownerId;

package/dist/components/client/Modal/ManagedModal.js

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { closeModalEntry, removeModalEntry } from "./modalStore.js";
 import { useModalConfig } from "./UDSModalConfigProvider.js";
 import { ModalActions } from "./ModalActions.js";
@@ -9,12 +10,11 @@ import { ModalTitle } from "./ModalTitle.js";
 import { Modal } from "./Modal.js";
 import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/Modal/ManagedModal.tsx
 const ManagedModal = ({ slot }) => {
 	const { animationDuration } = useModalConfig();
 	const durationOut = typeof animationDuration === "number" ? animationDuration : animationDuration.out;
-	const exitDuration = useReducedMotion() || slot.props.reduceMotion ? 0 : durationOut;
+	const exitDuration = usePrefersReducedMotion() || slot.props.reduceMotion ? 0 : durationOut;
 	useEffect(() => {
 		if (!slot.closing) return;
 		const ownerId = slot.ownerId;

package/dist/components/client/Modal/Modal.cjs

@@ -9,6 +9,7 @@ const require_components_Box = require("../../Box.cjs");
 const require_components_HStack = require("../../HStack.cjs");
 const require_components_VStack = require("../../VStack.cjs");
 const require_components_Scrim = require("../../Scrim.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_utils_exposeAriakitScrollbarWidth = require("../../../utils/exposeAriakitScrollbarWidth.cjs");
 const require_components_client_Modal_ModalContext = require("./ModalContext.cjs");
 const require_components_client_Modal_UDSModalConfigProvider = require("./UDSModalConfigProvider.cjs");
@@ -21,7 +22,6 @@ let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ariakit_react = require("@ariakit/react");
-let motion_react = require("motion/react");
 //#region src/components/client/Modal/Modal.tsx
 require_utils_exposeAriakitScrollbarWidth.exposeAriakitScrollbarWidth();
 const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, includeScrim, closeAriaLabel = "Close", slotProps, hideDismissButton = false, reduceMotion: forceReduceMotion = false, closeIcon = _yahoo_uds_icons.Cross, maxWidth = "auto", maxHeight: maxHeightProp = "auto", fullWidth = false, fullHeight = false, title: titleProp, description: descriptionProp, content: contentProp, actions: actionsProp, scrollBehavior = "outside", className, style }) => {
@@ -37,7 +37,7 @@ const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, i
 		out: animationEasing
 	} : animationEasing;
 	const { title: modalTitle, description: modalDescription, content: modalContent, actions: modalActions } = require_components_client_Modal_utils.separateChildren(children);
-	const reducedMotion = (0, motion_react.useReducedMotion)() || forceReduceMotion;
+	const reducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() || forceReduceMotion;
 	(0, react.useEffect)(() => {
 		if (open && !prevOpen.current) onOpen?.();
 		prevOpen.current = open;

package/dist/components/client/Modal/Modal.js

@@ -7,6 +7,7 @@ import { Box } from "../../Box.js";
 import { HStack } from "../../HStack.js";
 import { VStack } from "../../VStack.js";
 import { Scrim } from "../../Scrim.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { exposeAriakitScrollbarWidth } from "../../../utils/exposeAriakitScrollbarWidth.js";
 import { ModalContext } from "./ModalContext.js";
 import { useModalConfig } from "./UDSModalConfigProvider.js";
@@ -19,7 +20,6 @@ import { Cross } from "@yahoo/uds-icons";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog, DialogDismiss } from "@ariakit/react";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/Modal/Modal.tsx
 exposeAriakitScrollbarWidth();
 const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, includeScrim, closeAriaLabel = "Close", slotProps, hideDismissButton = false, reduceMotion: forceReduceMotion = false, closeIcon = Cross, maxWidth = "auto", maxHeight: maxHeightProp = "auto", fullWidth = false, fullHeight = false, title: titleProp, description: descriptionProp, content: contentProp, actions: actionsProp, scrollBehavior = "outside", className, style }) => {
@@ -35,7 +35,7 @@ const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, i
 		out: animationEasing
 	} : animationEasing;
 	const { title: modalTitle, description: modalDescription, content: modalContent, actions: modalActions } = separateChildren(children);
-	const reducedMotion = useReducedMotion() || forceReduceMotion;
+	const reducedMotion = usePrefersReducedMotion() || forceReduceMotion;
 	useEffect(() => {
 		if (open && !prevOpen.current) onOpen?.();
 		prevOpen.current = open;

package/dist/components/client/Popover/Popover.cjs

@@ -2,12 +2,12 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../../_virtual/_rolldown/runtime.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_Popover_PopoverContext = require("./PopoverContext.cjs");
 const require_components_client_Popover_UDSPopoverConfigProvider = require("./UDSPopoverConfigProvider.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ariakit_react = require("@ariakit/react");
-let motion_react = require("motion/react");
 //#region src/components/client/Popover/Popover.tsx
 const POPOVER_OPEN_EVENT = "uds:popover-open";
 /**
@@ -61,7 +61,7 @@ function Popover({ children, placement, open, defaultOpen = false, portal = true
 		return () => document.removeEventListener(POPOVER_OPEN_EVENT, handler);
 	}, [id, store]);
 	const isControlled = open !== void 0;
-	const reducedMotion = (0, motion_react.useReducedMotion)() || forceReduceMotion;
+	const reducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() || forceReduceMotion;
 	const animationDuration = reducedMotion ? 0 : animationDurationConfig;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Popover_PopoverContext.PopoverInternalContext.Provider, {
 		value: {

package/dist/components/client/Popover/Popover.js

@@ -1,11 +1,11 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { PopoverInternalContext } from "./PopoverContext.js";
 import { usePopoverConfig } from "./UDSPopoverConfigProvider.js";
 import { useCallback, useEffect, useId } from "react";
 import { jsx } from "react/jsx-runtime";
 import { PopoverProvider, usePopoverStore } from "@ariakit/react";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/Popover/Popover.tsx
 const POPOVER_OPEN_EVENT = "uds:popover-open";
 /**
@@ -59,7 +59,7 @@ function Popover({ children, placement, open, defaultOpen = false, portal = true
 		return () => document.removeEventListener(POPOVER_OPEN_EVENT, handler);
 	}, [id, store]);
 	const isControlled = open !== void 0;
-	const reducedMotion = useReducedMotion() || forceReduceMotion;
+	const reducedMotion = usePrefersReducedMotion() || forceReduceMotion;
 	const animationDuration = reducedMotion ? 0 : animationDurationConfig;
 	return /* @__PURE__ */ jsx(PopoverInternalContext.Provider, {
 		value: {

package/dist/components/client/Radio/Radio.cjs

@@ -5,6 +5,7 @@ const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 const require_styles_styler = require("../../../styles/styler.cjs");
 const require_components_Box = require("../../Box.cjs");
 const require_components_FormLabel = require("../../FormLabel.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
 const require_components_client_Radio_useRadioGroup = require("./useRadioGroup.cjs");
 let react = require("react");
@@ -117,7 +118,7 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 	const handleTapEnd = (0, react.useCallback)(() => {
 		setIsPressed(false);
 	}, []);
-	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
 	const classNames = {

package/dist/components/client/Radio/Radio.js

@@ -3,11 +3,12 @@
 import { cx, getStyles } from "../../../styles/styler.js";
 import { Box } from "../../Box.js";
 import { FormLabel } from "../../FormLabel.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { SpringMotionConfig } from "../SpringMotionConfig.js";
 import { useRadioGroup } from "./useRadioGroup.js";
 import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { m, useReducedMotion } from "motion/react";
+import { m } from "motion/react";
 //#region src/components/client/Radio/Radio.tsx
 const RADIO_VARIANTS = ["primary", "secondary"];
 const RADIO_SIZES = ["sm", "md"];
@@ -114,7 +115,7 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 	const handleTapEnd = useCallback(() => {
 		setIsPressed(false);
 	}, []);
-	const prefersReducedMotion = useReducedMotion();
+	const prefersReducedMotion = usePrefersReducedMotion();
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
 	const classNames = {

package/dist/components/client/Switch/Switch.cjs

@@ -5,8 +5,8 @@ const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 const require_styles_styler = require("../../../styles/styler.cjs");
 const require_components_IconSlot = require("../../IconSlot.cjs");
 const require_components_Box = require("../../Box.cjs");
-const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
 const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
+const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
 const require_components_client_Switch_SwitchBase = require("./SwitchBase.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react);

package/dist/components/client/Switch/Switch.js

@@ -3,8 +3,8 @@
 import { cx, getStyles } from "../../../styles/styler.js";
 import { IconSlot } from "../../IconSlot.js";
 import { Box } from "../../Box.js";
-import { SpringMotionConfig } from "../SpringMotionConfig.js";
 import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
+import { SpringMotionConfig } from "../SpringMotionConfig.js";
 import { SwitchBase } from "./SwitchBase.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/client/Tabs/TabList.cjs

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../../_virtual/_rolldown/runtime.cjs");
 const require_styles_styler = require("../../../styles/styler.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_Tabs_tabsContext = require("./tabsContext.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ariakit_react = require("@ariakit/react");
-let motion_react = require("motion/react");
 //#region src/components/client/Tabs/TabList.tsx
 /** Matches {@link Tab} per-tab underline (token CSS variables on the indicator root). */
 const tabRootUnderlineClassName = require_styles_styler.cx("pointer-events-none absolute bottom-0 left-0 right-0", "h-[var(--uds-tab-underline-width,0px)] bg-[var(--uds-tab-underline-color,transparent)]", "transition-[height,background-color] duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]");
@@ -21,7 +21,7 @@ const TabList = (0, react.forwardRef)(function TabList({ children, scrollable, c
 	const listRef = (0, react.useRef)(null);
 	const indicatorRef = (0, react.useRef)(null);
 	const skipNextTransitionRef = (0, react.useRef)(true);
-	const reducedMotion = (0, motion_react.useReducedMotion)();
+	const reducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
 	const applyIndicator = (0, react.useCallback)(() => {
 		const listEl = listRef.current;
 		const indicatorEl = indicatorRef.current;

package/dist/components/client/Tabs/TabList.js

@@ -1,11 +1,11 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../../styles/styler.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { useTabsContext } from "./tabsContext.js";
 import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { TabList as TabList$1, useStoreState, useTabContext } from "@ariakit/react";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/Tabs/TabList.tsx
 /** Matches {@link Tab} per-tab underline (token CSS variables on the indicator root). */
 const tabRootUnderlineClassName = cx("pointer-events-none absolute bottom-0 left-0 right-0", "h-[var(--uds-tab-underline-width,0px)] bg-[var(--uds-tab-underline-color,transparent)]", "transition-[height,background-color] duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]");
@@ -19,7 +19,7 @@ const TabList = forwardRef(function TabList({ children, scrollable, className, .
 	const listRef = useRef(null);
 	const indicatorRef = useRef(null);
 	const skipNextTransitionRef = useRef(true);
-	const reducedMotion = useReducedMotion();
+	const reducedMotion = usePrefersReducedMotion();
 	const applyIndicator = useCallback(() => {
 		const listEl = listRef.current;
 		const indicatorEl = indicatorRef.current;

package/dist/components/client/Toast/Toast.cjs

@@ -6,12 +6,12 @@ const require_styles_styler = require("../../../styles/styler.cjs");
 const require_components_client_Pressable = require("../Pressable.cjs");
 const require_components_IconSlot = require("../../IconSlot.cjs");
 const require_components_Text = require("../../Text.cjs");
+const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
 const require_components_client_Button_Button = require("../Button/Button.cjs");
 const require_components_client_Toast_UDSToastConfigProvider = require("./UDSToastConfigProvider.cjs");
 const require_components_client_Toast_ToastContainer = require("./ToastContainer.cjs");
 let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-let motion_react = require("motion/react");
 //#region src/components/client/Toast/Toast.tsx
 const iconMap = {
 	loading: _yahoo_uds_icons.Progress,
@@ -48,7 +48,7 @@ const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantPr
 	const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
 	const { className: closeIconContainerClassName, ...closeIconContainerProps } = slotProps?.closeIconContainer ?? {};
 	const { className: closeIconClassName, ...closeIconProps } = slotProps?.closeIcon ?? {};
-	const reducedMotion = (0, motion_react.useReducedMotion)() || forceReduceMotion;
+	const reducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() || forceReduceMotion;
 	const handleClose = () => {
 		closeToast?.();
 		onClickCloseButton?.(id);

package/dist/components/client/Toast/Toast.js

@@ -4,12 +4,12 @@ import { cx, getStyles } from "../../../styles/styler.js";
 import { Pressable } from "../Pressable.js";
 import { IconSlot } from "../../IconSlot.js";
 import { Text } from "../../Text.js";
+import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { Button } from "../Button/Button.js";
 import { useToastConfig } from "./UDSToastConfigProvider.js";
 import { ToastContainer } from "./ToastContainer.js";
 import { CheckCircle, Cross, Error, Info, Progress, Warning } from "@yahoo/uds-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useReducedMotion } from "motion/react";
 //#region src/components/client/Toast/Toast.tsx
 const iconMap = {
 	loading: Progress,
@@ -46,7 +46,7 @@ const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantPr
 	const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
 	const { className: closeIconContainerClassName, ...closeIconContainerProps } = slotProps?.closeIconContainer ?? {};
 	const { className: closeIconClassName, ...closeIconProps } = slotProps?.closeIcon ?? {};
-	const reducedMotion = useReducedMotion() || forceReduceMotion;
+	const reducedMotion = usePrefersReducedMotion() || forceReduceMotion;
 	const handleClose = () => {
 		closeToast?.();
 		onClickCloseButton?.(id);