@yahoo/uds 3.159.2 → 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/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 };

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

@@ -0,0 +1,120 @@
+/*! © 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_styles_styler = require("../../../styles/styler.cjs");
+const require_utils_createSlot = require("../../../utils/createSlot.cjs");
+const require_generateDefaultClassName = require("../../../automated-config/dist/utils/generateDefaultClassName.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/client/Button/ButtonBase.tsx
+const defaultVariantRootClass = require_generateDefaultClassName.generateDefaultClassName("button", "variant", "root");
+const defaultVariantIconClass = require_generateDefaultClassName.generateDefaultClassName("button", "variant", "icon");
+const defaultSizeRootClass = require_generateDefaultClassName.generateDefaultClassName("button", "size", "root");
+const defaultSizeIconClass = require_generateDefaultClassName.generateDefaultClassName("button", "size", "icon");
+const ButtonBase = (0, react.forwardRef)(function ButtonBase({ size, variant, startIcon, endIcon, iconVariant, loading, disableEffects, children, asChild = false, slotProps, type = "button", className, width, renderStartContent, renderEndContent, renderRoot, ...rest }, forwardedRef) {
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const { className: contentClassName, ...contentSlotProps } = slotProps?.content ?? {};
+	const gapVariant = loading || startIcon || endIcon ? "withIcon" : "withoutIcon";
+	const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
+	const rootSizeClass = (0, react.useMemo)(() => size ? require_styles_styler.getStyles({ buttonSizeRoot: size }) : defaultSizeRootClass, [size]);
+	const rootVariantClass = (0, react.useMemo)(() => variant ? require_styles_styler.getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
+	const iconSizeClass = (0, react.useMemo)(() => size ? require_styles_styler.getStyles({ buttonSizeIcon: size }) : defaultSizeIconClass, [size]);
+	const iconVariantClass = (0, react.useMemo)(() => variant ? require_styles_styler.getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
+	const styles = (0, react.useMemo)(() => ({
+		root: require_styles_styler.getStyles({
+			width,
+			className: require_styles_styler.cx([
+				"uds-ring",
+				"uds-hit-target",
+				"inline-flex max-w-full overflow-hidden justify-center items-center whitespace-nowrap select-none",
+				"[transform-origin:center]",
+				"[backface-visibility:hidden]",
+				"[transition-property:color,background-color,border-color,box-shadow,text-decoration-color,fill,stroke]",
+				"[transition-timing-function:cubic-bezier(0,0,0.2,1)]",
+				"[transition-duration:220ms]",
+				rootSizeClass,
+				rootVariantClass,
+				rest?.disabled && "cursor-not-allowed",
+				loading && "uds-button-loading",
+				disableEffects && "uds-button-without-effects",
+				gapVariant === "withIcon" && "uds-button-with-gap",
+				className
+			])
+		}),
+		iconContainer: require_styles_styler.cx(["flex shrink-0 overflow-clip uds-button-icon-container"]),
+		icon: require_styles_styler.getStyles({ className: require_styles_styler.cx([iconSizeClass, iconVariantClass]) }),
+		loadingIcon: require_styles_styler.getStyles({ className: require_styles_styler.cx([
+			"animate-spin",
+			iconSizeClass,
+			iconVariantClass
+		]) }),
+		content: require_styles_styler.cx(["min-w-0 truncate"])
+	}), [
+		className,
+		disableEffects,
+		gapVariant,
+		iconSizeClass,
+		iconVariantClass,
+		loading,
+		rest?.disabled,
+		rootSizeClass,
+		rootVariantClass,
+		width
+	]);
+	const iconRenderArgs = (0, react.useMemo)(() => ({
+		iconVariant,
+		loading,
+		startIcon,
+		endIcon,
+		iconClassName: styles.icon,
+		loadingIconClassName: styles.loadingIcon,
+		iconContainerClassName: styles.iconContainer,
+		startIconClassName,
+		endIconClassName,
+		startIconSlotProps,
+		endIconSlotProps
+	}), [
+		endIcon,
+		endIconClassName,
+		endIconSlotProps,
+		iconVariant,
+		loading,
+		startIcon,
+		startIconClassName,
+		startIconSlotProps,
+		styles.icon,
+		styles.iconContainer,
+		styles.loadingIcon
+	]);
+	return renderRoot({
+		asChild,
+		Slot,
+		children,
+		buttonRef: forwardedRef,
+		type,
+		rootClassName: styles.root,
+		rest,
+		contentClassName: require_styles_styler.cx(styles.content, contentClassName),
+		contentSlotProps,
+		startContent: renderStartContent(iconRenderArgs),
+		endContent: renderEndContent(iconRenderArgs)
+	});
+});
+ButtonBase.displayName = "ButtonBase";
+function renderButtonChildren(children, childProps, startContent, contentClassName, contentSlotProps, endContent) {
+	return (0, react.cloneElement)(children, childProps, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		startContent,
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: contentClassName,
+			...contentSlotProps,
+			children: children.props.children
+		}),
+		endContent
+	] }));
+}
+//#endregion
+exports.ButtonBase = ButtonBase;
+exports.renderButtonChildren = renderButtonChildren;