@yahoo/uds 3.159.1 → 3.160.0

package/dist/automated-config/dist/properties.cjs

@@ -1,9 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 const require_index = require("../../css-tokens/dist/index.cjs");
+const require_index$1 = require("../../motion-tokens/dist/index.cjs");
 const require_assertUnreachable = require("../../utils/dist/assertUnreachable.cjs");
 const require_mapTextVariantFixtureToValue = require("./mapTextVariantFixtureToValue.cjs");
 const require_mapColorFixtureToValue = require("./utils/mapColorFixtureToValue.cjs");
-const require_index$1 = require("../../motion-tokens/dist/index.cjs");
 //#region ../automated-config/dist/properties.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
 const isInputWrapperCtx = (context) => {

package/dist/automated-config/dist/properties.js

@@ -1,9 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { BACKGROUND_BLUR_COLOR_PREFIX, BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX, BORDER_RADIUS_PREFIX, BUTTON_SCALE_EFFECT, DROP_SHADOW_PREFIX, getShadowLayerValue, textVariantsSafe } from "../../css-tokens/dist/index.js";
+import { SCALE_EFFECTS } from "../../motion-tokens/dist/index.js";
 import { assertUnreachable } from "../../utils/dist/assertUnreachable.js";
 import { mapTextVariantFixtureToValue } from "./mapTextVariantFixtureToValue.js";
 import { mapColorFixtureToValue } from "./utils/mapColorFixtureToValue.js";
-import { SCALE_EFFECTS } from "../../motion-tokens/dist/index.js";
 //#region ../automated-config/dist/properties.js
 /*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
 const isInputWrapperCtx = (context) => {

package/dist/components/Text.cjs

@@ -82,7 +82,7 @@ const asMap = {
 *
 * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
 */
-const Text = (0, react.forwardRef)(function Text({ className, asChild, color = "primary", variant = "body1", as = asMap[variant], italic, tabularNumbers, fontFamily, fontSize, fontWeight, lineHeight, textTransform, textAlign, letterSpacing, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }, ref) {
+const Text = (0, react.forwardRef)(function Text({ className, asChild, color = "primary", variant = "body1", as = asMap[variant], italic, tabularNumbers, fontFamily, fontSize, fontWeight, lineHeight, textTransform, textAlign, letterSpacing, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, ...props }, ref) {
 	const classNames = require_styles_styler.getStyles({
 		className,
 		...color && color !== "inherit" ? { color } : {},
@@ -143,7 +143,9 @@ const Text = (0, react.forwardRef)(function Text({ className, asChild, color = "
 		offsetStart,
 		offsetTop,
 		columnGap,
-		rowGap
+		rowGap,
+		width,
+		height
 	});
 	const Comp = asChild ? Slot : as;
 	const additionalStyles = {

package/dist/components/Text.js

@@ -80,7 +80,7 @@ const asMap = {
 *
 * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
 */
-const Text = forwardRef(function Text({ className, asChild, color = "primary", variant = "body1", as = asMap[variant], italic, tabularNumbers, fontFamily, fontSize, fontWeight, lineHeight, textTransform, textAlign, letterSpacing, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }, ref) {
+const Text = forwardRef(function Text({ className, asChild, color = "primary", variant = "body1", as = asMap[variant], italic, tabularNumbers, fontFamily, fontSize, fontWeight, lineHeight, textTransform, textAlign, letterSpacing, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, ...props }, ref) {
 	const classNames = getStyles({
 		className,
 		...color && color !== "inherit" ? { color } : {},
@@ -141,7 +141,9 @@ const Text = forwardRef(function Text({ className, asChild, color = "primary", v
 		offsetStart,
 		offsetTop,
 		columnGap,
-		rowGap
+		rowGap,
+		width,
+		height
 	});
 	const Comp = asChild ? Slot : as;
 	const additionalStyles = {

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

@@ -0,0 +1,213 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = 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_components_IconSlot = require("../../IconSlot.cjs");
+const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
+const require_components_client_Button_ButtonBase = require("./ButtonBase.cjs");
+require("./buttonConstants.cjs");
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
+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/Button/Button.tsx
+const iconContainerMotionVariants = {
+	hide: {
+		display: "none",
+		width: "0px",
+		opacity: 0
+	},
+	loading: {
+		display: "flex",
+		width: "auto",
+		opacity: 1
+	},
+	icon: {
+		display: "flex",
+		width: "auto",
+		opacity: 1
+	}
+};
+const SCALE_DOWN = .7;
+const hiddenState = {
+	scale: SCALE_DOWN,
+	opacity: 0
+};
+const visibleState = {
+	scale: [
+		SCALE_DOWN,
+		SCALE_DOWN,
+		1
+	],
+	opacity: [
+		0,
+		0,
+		1
+	],
+	transition: { times: [
+		0,
+		.5,
+		1
+	] }
+};
+const iconMotionVariants = {
+	hide: hiddenState,
+	icon: visibleState,
+	loading: hiddenState
+};
+const loadingMotionVariants = {
+	hide: hiddenState,
+	icon: hiddenState,
+	loading: visibleState
+};
+/**
+* **🖲️ A button element that can be used to trigger an action**
+*
+* @componentType Client component
+*/
+const Button = (0, react.forwardRef)(function Button(props, forwardedRef) {
+	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const disableMotion = !!props.disableEffects || !!props.disabled;
+	const layoutVariant = prefersReducedMotion ? "smooth" : "subtle";
+	const endVariant = props.endIcon ? "icon" : "hide";
+	const gapVariant = props.loading || props.startIcon || props.endIcon ? "withIcon" : "withoutIcon";
+	const startVariant = props.loading ? "loading" : props.startIcon ? "icon" : "hide";
+	const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
+	const MotionSlot = (0, react.useMemo)(() => motion_react.m.create(Slot), [Slot]);
+	const buttonVariants = (0, react.useMemo)(() => ({
+		rest: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_REST})` },
+		hover: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_HOVER})` },
+		pressed: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_PRESSED})` },
+		withIcon: { columnGap: `var(${require_index.BUTTON_GAP_VAR})` },
+		withoutIcon: { columnGap: "0px" }
+	}), [disableMotion]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Button_ButtonBase.ButtonBase, {
+		...props,
+		ref: forwardedRef,
+		renderStartContent: ({ iconVariant, loading, startIcon, iconContainerClassName, loadingIconClassName, iconClassName, startIconClassName, startIconSlotProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+			className: iconContainerClassName,
+			initial: false,
+			variants: iconContainerMotionVariants,
+			animate: startVariant,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.AnimatePresence, {
+				initial: false,
+				mode: "popLayout",
+				children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+					variants: loadingMotionVariants,
+					initial: "hide",
+					animate: "loading",
+					exit: "hide",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+						className: loadingIconClassName,
+						size: "sm",
+						name: _yahoo_uds_icons.Progress,
+						variant: iconVariant,
+						color: "current"
+					})
+				}, "loading"), startIcon && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+					variants: iconMotionVariants,
+					initial: "hide",
+					animate: "icon",
+					exit: "hide",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+						className: [iconClassName, startIconClassName].filter(Boolean).join(" "),
+						icon: startIcon,
+						iconProps: {
+							size: "sm",
+							variant: iconVariant,
+							color: "current"
+						},
+						...startIconSlotProps
+					})
+				})]
+			})
+		}),
+		renderEndContent: ({ endIcon, iconVariant, iconContainerClassName, iconClassName, endIconClassName, endIconSlotProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+			className: iconContainerClassName,
+			initial: false,
+			variants: iconContainerMotionVariants,
+			animate: endVariant,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
+				initial: false,
+				mode: "popLayout",
+				children: endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+					variants: iconMotionVariants,
+					initial: "hide",
+					animate: "icon",
+					exit: "hide",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+						className: [iconClassName, endIconClassName].filter(Boolean).join(" "),
+						icon: endIcon,
+						iconProps: {
+							size: "sm",
+							variant: iconVariant,
+							color: "current"
+						},
+						...endIconSlotProps
+					})
+				})
+			})
+		}),
+		renderRoot: ({ asChild, children, buttonRef, type, rootClassName, rest, contentClassName, contentSlotProps, startContent, endContent }) => {
+			if (asChild && (0, react.isValidElement)(children)) {
+				const childProps = children.props;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+					layoutSpeed: "3",
+					layoutVariant,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionSlot, {
+						type,
+						className: rootClassName,
+						initial: ["rest", gapVariant],
+						animate: [
+							"hide",
+							"rest",
+							gapVariant
+						],
+						variants: buttonVariants,
+						whileHover: "hover",
+						whileTap: "pressed",
+						...rest,
+						children: require_components_client_Button_ButtonBase.renderButtonChildren(children, childProps, startContent, contentClassName, contentSlotProps, endContent)
+					})
+				});
+			}
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+				layoutSpeed: "3",
+				layoutVariant,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.m.button, {
+					ref: buttonRef,
+					type,
+					className: rootClassName,
+					initial: ["rest", gapVariant],
+					animate: [
+						"hide",
+						"rest",
+						gapVariant
+					],
+					variants: buttonVariants,
+					whileHover: "hover",
+					whileTap: "pressed",
+					...rest,
+					children: [
+						startContent,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: contentClassName,
+							...contentSlotProps,
+							children
+						}),
+						endContent
+					]
+				})
+			});
+		}
+	});
+});
+Button.displayName = "Button";
+//#endregion
+exports.Button = Button;
+exports.iconMotionVariants = iconMotionVariants;
+exports.loadingMotionVariants = loadingMotionVariants;

package/dist/components/client/Button/Button.d.cts

@@ -0,0 +1,50 @@
+
+import { ButtonProps as ButtonProps$1 } from "./ButtonBase.cjs";
+import React, { ForwardRefExoticComponent } from "react";
+import { HTMLMotionProps } from "motion/react";
+
+//#region src/components/client/Button/Button.d.ts
+declare const iconMotionVariants: {
+  hide: {
+    scale: number;
+    opacity: number;
+  };
+  icon: {
+    scale: number[];
+    opacity: number[];
+    transition: {
+      times: number[];
+    };
+  };
+  loading: {
+    scale: number;
+    opacity: number;
+  };
+};
+declare const loadingMotionVariants: {
+  hide: {
+    scale: number;
+    opacity: number;
+  };
+  icon: {
+    scale: number;
+    opacity: number;
+  };
+  loading: {
+    scale: number[];
+    opacity: number[];
+    transition: {
+      times: number[];
+    };
+  };
+};
+type HtmlButtonProps = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+type ButtonProps = ButtonProps$1 & HtmlButtonProps;
+/**
+ * **🖲️ A button element that can be used to trigger an action**
+ *
+ * @componentType Client component
+ */
+declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Button, type ButtonProps, iconMotionVariants, loadingMotionVariants };

package/dist/components/client/Button/Button.d.ts

@@ -0,0 +1,51 @@
+
+"use client";
+import { ButtonProps as ButtonProps$1 } from "./ButtonBase.js";
+import React, { ForwardRefExoticComponent } from "react";
+import { HTMLMotionProps } from "motion/react";
+
+//#region src/components/client/Button/Button.d.ts
+declare const iconMotionVariants: {
+  hide: {
+    scale: number;
+    opacity: number;
+  };
+  icon: {
+    scale: number[];
+    opacity: number[];
+    transition: {
+      times: number[];
+    };
+  };
+  loading: {
+    scale: number;
+    opacity: number;
+  };
+};
+declare const loadingMotionVariants: {
+  hide: {
+    scale: number;
+    opacity: number;
+  };
+  icon: {
+    scale: number;
+    opacity: number;
+  };
+  loading: {
+    scale: number[];
+    opacity: number[];
+    transition: {
+      times: number[];
+    };
+  };
+};
+type HtmlButtonProps = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+type ButtonProps = ButtonProps$1 & HtmlButtonProps;
+/**
+ * **🖲️ A button element that can be used to trigger an action**
+ *
+ * @componentType Client component
+ */
+declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Button, type ButtonProps, iconMotionVariants, loadingMotionVariants };

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

@@ -0,0 +1,208 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { BUTTON_GAP_VAR, 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 { IconSlot } from "../../IconSlot.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";
+//#region src/components/client/Button/Button.tsx
+const iconContainerMotionVariants = {
+	hide: {
+		display: "none",
+		width: "0px",
+		opacity: 0
+	},
+	loading: {
+		display: "flex",
+		width: "auto",
+		opacity: 1
+	},
+	icon: {
+		display: "flex",
+		width: "auto",
+		opacity: 1
+	}
+};
+const SCALE_DOWN = .7;
+const hiddenState = {
+	scale: SCALE_DOWN,
+	opacity: 0
+};
+const visibleState = {
+	scale: [
+		SCALE_DOWN,
+		SCALE_DOWN,
+		1
+	],
+	opacity: [
+		0,
+		0,
+		1
+	],
+	transition: { times: [
+		0,
+		.5,
+		1
+	] }
+};
+const iconMotionVariants = {
+	hide: hiddenState,
+	icon: visibleState,
+	loading: hiddenState
+};
+const loadingMotionVariants = {
+	hide: hiddenState,
+	icon: hiddenState,
+	loading: visibleState
+};
+/**
+* **🖲️ A button element that can be used to trigger an action**
+*
+* @componentType Client component
+*/
+const Button = forwardRef(function Button(props, forwardedRef) {
+	const prefersReducedMotion = useReducedMotion();
+	const disableMotion = !!props.disableEffects || !!props.disabled;
+	const layoutVariant = prefersReducedMotion ? "smooth" : "subtle";
+	const endVariant = props.endIcon ? "icon" : "hide";
+	const gapVariant = props.loading || props.startIcon || props.endIcon ? "withIcon" : "withoutIcon";
+	const startVariant = props.loading ? "loading" : props.startIcon ? "icon" : "hide";
+	const Slot = useMemo(() => createSlot(), []);
+	const MotionSlot = useMemo(() => m.create(Slot), [Slot]);
+	const buttonVariants = useMemo(() => ({
+		rest: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_REST})` },
+		hover: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_HOVER})` },
+		pressed: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_PRESSED})` },
+		withIcon: { columnGap: `var(${BUTTON_GAP_VAR})` },
+		withoutIcon: { columnGap: "0px" }
+	}), [disableMotion]);
+	return /* @__PURE__ */ jsx(ButtonBase, {
+		...props,
+		ref: forwardedRef,
+		renderStartContent: ({ iconVariant, loading, startIcon, iconContainerClassName, loadingIconClassName, iconClassName, startIconClassName, startIconSlotProps }) => /* @__PURE__ */ jsx(m.span, {
+			className: iconContainerClassName,
+			initial: false,
+			variants: iconContainerMotionVariants,
+			animate: startVariant,
+			children: /* @__PURE__ */ jsxs(AnimatePresence, {
+				initial: false,
+				mode: "popLayout",
+				children: [loading && /* @__PURE__ */ jsx(m.span, {
+					variants: loadingMotionVariants,
+					initial: "hide",
+					animate: "loading",
+					exit: "hide",
+					children: /* @__PURE__ */ jsx(Icon, {
+						className: loadingIconClassName,
+						size: "sm",
+						name: Progress,
+						variant: iconVariant,
+						color: "current"
+					})
+				}, "loading"), startIcon && !loading && /* @__PURE__ */ jsx(m.span, {
+					variants: iconMotionVariants,
+					initial: "hide",
+					animate: "icon",
+					exit: "hide",
+					children: /* @__PURE__ */ jsx(IconSlot, {
+						className: [iconClassName, startIconClassName].filter(Boolean).join(" "),
+						icon: startIcon,
+						iconProps: {
+							size: "sm",
+							variant: iconVariant,
+							color: "current"
+						},
+						...startIconSlotProps
+					})
+				})]
+			})
+		}),
+		renderEndContent: ({ endIcon, iconVariant, iconContainerClassName, iconClassName, endIconClassName, endIconSlotProps }) => /* @__PURE__ */ jsx(m.span, {
+			className: iconContainerClassName,
+			initial: false,
+			variants: iconContainerMotionVariants,
+			animate: endVariant,
+			children: /* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				mode: "popLayout",
+				children: endIcon && /* @__PURE__ */ jsx(m.span, {
+					variants: iconMotionVariants,
+					initial: "hide",
+					animate: "icon",
+					exit: "hide",
+					children: /* @__PURE__ */ jsx(IconSlot, {
+						className: [iconClassName, endIconClassName].filter(Boolean).join(" "),
+						icon: endIcon,
+						iconProps: {
+							size: "sm",
+							variant: iconVariant,
+							color: "current"
+						},
+						...endIconSlotProps
+					})
+				})
+			})
+		}),
+		renderRoot: ({ asChild, children, buttonRef, type, rootClassName, rest, contentClassName, contentSlotProps, startContent, endContent }) => {
+			if (asChild && isValidElement(children)) {
+				const childProps = children.props;
+				return /* @__PURE__ */ jsx(SpringMotionConfig, {
+					layoutSpeed: "3",
+					layoutVariant,
+					children: /* @__PURE__ */ jsx(MotionSlot, {
+						type,
+						className: rootClassName,
+						initial: ["rest", gapVariant],
+						animate: [
+							"hide",
+							"rest",
+							gapVariant
+						],
+						variants: buttonVariants,
+						whileHover: "hover",
+						whileTap: "pressed",
+						...rest,
+						children: renderButtonChildren(children, childProps, startContent, contentClassName, contentSlotProps, endContent)
+					})
+				});
+			}
+			return /* @__PURE__ */ jsx(SpringMotionConfig, {
+				layoutSpeed: "3",
+				layoutVariant,
+				children: /* @__PURE__ */ jsxs(m.button, {
+					ref: buttonRef,
+					type,
+					className: rootClassName,
+					initial: ["rest", gapVariant],
+					animate: [
+						"hide",
+						"rest",
+						gapVariant
+					],
+					variants: buttonVariants,
+					whileHover: "hover",
+					whileTap: "pressed",
+					...rest,
+					children: [
+						startContent,
+						/* @__PURE__ */ jsx("span", {
+							className: contentClassName,
+							...contentSlotProps,
+							children
+						}),
+						endContent
+					]
+				})
+			});
+		}
+	});
+});
+Button.displayName = "Button";
+//#endregion
+export { Button, iconMotionVariants, loadingMotionVariants };