@yahoo/uds 3.102.0 → 3.103.0

package/dist/cli/commands/sync.cjs

@@ -4,6 +4,7 @@ const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_defaultTokensConfig = require('../../defaultTokensConfig.cjs');
 const require_runtime_breakpointsConfig = require('../../runtime/breakpointsConfig.cjs');
 const require_runtime_toastConfig = require('../../runtime/toastConfig.cjs');
+const require_runtime_tooltipConfig = require('../../runtime/tooltipConfig.cjs');
 const require_analytics = require('../dist/utils/analytics.cjs');
 const require_colors = require('../dist/lib/colors.cjs');
 const require_print = require('../dist/lib/print.cjs');
@@ -60,7 +61,8 @@ const syncCommand = {
 			const exportsJS = [`export const config = ${JSON.stringify(sortedConfig, null, 2)};`];
 			const runtimeConfigs = {
 				breakpoints: [require_runtime_breakpointsConfig.configToBreakpointsConfigContext(sortedConfig), "UDSBreakpointsConfigContextType"],
-				toast: [require_runtime_toastConfig.configToToastConfigContext(sortedConfig), "UDSToastConfigContextType"]
+				toast: [require_runtime_toastConfig.configToToastConfigContext(sortedConfig), "UDSToastConfigContextType"],
+				tooltip: [require_runtime_tooltipConfig.configToTooltipConfigContext(sortedConfig), "UDSTooltipConfigContextType"]
 			};
 			const runtimeTypeImports = [];
 			for (const [name, [json, type]] of Object.entries(runtimeConfigs)) {
@@ -74,10 +76,12 @@ const syncCommand = {
 			exportsTS.push(`export const runtimeConfig: UDSConfigContextType = {
   breakpoints: breakpointsRuntimeConfig,
   toast: toastRuntimeConfig,
+  tooltip: tooltipRuntimeConfig,
 };`);
 			exportsJS.push(`export const runtimeConfig = {
   breakpoints: breakpointsRuntimeConfig,
   toast: toastRuntimeConfig,
+  tooltip: tooltipRuntimeConfig,
 };`);
 			const configContentTs = `${importsTS.join("\n")}\n\n${exportsTS.join("\n\n")}\n`;
 			const configContentJs = `${exportsJS.join("\n\n")}\n`;

package/dist/cli/commands/sync.js

@@ -2,6 +2,7 @@
 import { defaultTokensConfig } from "../../defaultTokensConfig.js";
 import { configToBreakpointsConfigContext } from "../../runtime/breakpointsConfig.js";
 import { configToToastConfigContext } from "../../runtime/toastConfig.js";
+import { configToTooltipConfigContext } from "../../runtime/tooltipConfig.js";
 import { trackEvent } from "../dist/utils/analytics.js";
 import { green, magenta, red, yellow } from "../dist/lib/colors.js";
 import { print } from "../dist/lib/print.js";
@@ -57,7 +58,8 @@ const syncCommand = {
 			const exportsJS = [`export const config = ${JSON.stringify(sortedConfig, null, 2)};`];
 			const runtimeConfigs = {
 				breakpoints: [configToBreakpointsConfigContext(sortedConfig), "UDSBreakpointsConfigContextType"],
-				toast: [configToToastConfigContext(sortedConfig), "UDSToastConfigContextType"]
+				toast: [configToToastConfigContext(sortedConfig), "UDSToastConfigContextType"],
+				tooltip: [configToTooltipConfigContext(sortedConfig), "UDSTooltipConfigContextType"]
 			};
 			const runtimeTypeImports = [];
 			for (const [name, [json, type]] of Object.entries(runtimeConfigs)) {
@@ -71,10 +73,12 @@ const syncCommand = {
 			exportsTS.push(`export const runtimeConfig: UDSConfigContextType = {
   breakpoints: breakpointsRuntimeConfig,
   toast: toastRuntimeConfig,
+  tooltip: tooltipRuntimeConfig,
 };`);
 			exportsJS.push(`export const runtimeConfig = {
   breakpoints: breakpointsRuntimeConfig,
   toast: toastRuntimeConfig,
+  tooltip: tooltipRuntimeConfig,
 };`);
 			const configContentTs = `${importsTS.join("\n")}\n\n${exportsTS.join("\n\n")}\n`;
 			const configContentJs = `${exportsJS.join("\n\n")}\n`;

package/dist/components/client/Button.js

@@ -9,7 +9,7 @@ import { generateDefaultClassName } from "../../automated-config/dist/utils/inde
 import { SpringMotionConfig } from "./SpringMotionConfig.js";
 import React, { cloneElement, forwardRef, isValidElement, useImperativeHandle, useMemo, useRef } from "react";
 import { buttonIconSvgSize } from "@yahoo/uds/fixtures";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Progress } from "@yahoo/uds-icons";
 import { AnimatePresence, m, useReducedMotion } from "motion/react";
 
@@ -266,7 +266,7 @@ const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, i
 				whileHover: "hover",
 				whileTap: "pressed",
 				...rest,
-				children: cloneElement(children, childProps, /* @__PURE__ */ jsxs(Fragment, { children: [
+				children: cloneElement(children, childProps, /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					startContent,
 					/* @__PURE__ */ jsx("span", {
 						className: styles.content,

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

@@ -42,7 +42,7 @@ const iconMap = {
 * <Toast variant="info" message="This is a toast" />
 *```
 *
-* @related Tooltip (coming soon) and Popover (coming soon).
+* @related [Tooltip](https://uds.build/docs/components/tooltip), Popover (coming soon)
 **/
 const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon = _yahoo_uds_icons.Cross, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }) => {
 	const { iconVariant, iconSize, buttonVariant, buttonSize, size, variant, textVariant, textColor } = require_components_client_Toast_UDSToastConfigProvider.useToastConfig(sizeProp, variantProp);

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

@@ -44,7 +44,7 @@ interface ToastProps extends UniversalToastProps, Partial<ReactToastifyContext>
  * <Toast variant="info" message="This is a toast" />
  *```
  *
- * @related Tooltip (coming soon) and Popover (coming soon).
+ * @related [Tooltip](https://uds.build/docs/components/tooltip), Popover (coming soon)
  **/
 declare const Toast: {
   ({

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

@@ -44,7 +44,7 @@ interface ToastProps extends UniversalToastProps, Partial<ReactToastifyContext>
  * <Toast variant="info" message="This is a toast" />
  *```
  *
- * @related Tooltip (coming soon) and Popover (coming soon).
+ * @related [Tooltip](https://uds.build/docs/components/tooltip), Popover (coming soon)
  **/
 declare const Toast: {
   ({

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

@@ -40,7 +40,7 @@ const iconMap = {
 * <Toast variant="info" message="This is a toast" />
 *```
 *
-* @related Tooltip (coming soon) and Popover (coming soon).
+* @related [Tooltip](https://uds.build/docs/components/tooltip), Popover (coming soon)
 **/
 const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantProp, actionButton, onClickActionButton, startIcon, closeIcon = Cross, closeToast, slotProps, className, id, reduceMotion: forceReduceMotion }) => {
 	const { iconVariant, iconSize, buttonVariant, buttonSize, size, variant, textVariant, textColor } = useToastConfig(sizeProp, variantProp);

package/dist/components/client/Tooltip/Tooltip.cjs

@@ -0,0 +1,65 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_components_client_Tooltip_UDSTooltipConfigProvider = require('./UDSTooltipConfigProvider.cjs');
+const require_components_client_Tooltip_tooltipContext = require('./tooltipContext.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+
+//#region src/components/client/Tooltip/Tooltip.tsx
+/**
+* **⚙️️ A Tooltip component that anchors to a trigger element
+*
+* @componentType Client component
+*
+* @description
+* Tooltips provide short, contextual help for UI elements. They appear on hover, focus, or long-press, and should clarify meaning—not introduce new concepts.
+*
+* Tooltips are not meant for critical information or required actions. If the user must take action, use a Dialog, Popover, or Inline messaging instead.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/tooltip Tooltip Docs} for more info
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@yahoo/uds";
+*
+* <Tooltip>
+*   <TooltipTrigger>
+*     <Button>Tooltip Trigger</Button>
+*   </TooltipTrigger>
+*   <TooltipContent>basic tooltip content</TooltipContent>
+* </Tooltip>
+*```
+*
+* @related [Toast](https://uds.build/docs/components/toast), Popover (coming soon).
+**/
+function Tooltip({ children, placement, open, portal = true }) {
+	const hideOnHoverOutside = open === void 0;
+	const controlledProps = open !== void 0 ? {
+		showTimeout: 0,
+		hideTimeout: 0,
+		timeout: 0,
+		mounted: open
+	} : void 0;
+	const { animationDuration, ariaKitPlacement } = require_components_client_Tooltip_UDSTooltipConfigProvider.useTooltipConfig({ placement });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Tooltip_tooltipContext.TooltipInternalContext.Provider, {
+		value: {
+			hideOnHoverOutside,
+			portal
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TooltipProvider, {
+			placement: ariaKitPlacement,
+			animated: animationDuration,
+			open,
+			...controlledProps,
+			children
+		})
+	});
+}
+Tooltip.displayName = "Tooltip";
+
+//#endregion
+exports.Tooltip = Tooltip;

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

@@ -0,0 +1,45 @@
+
+import { UniversalTooltipProps } from "../../../types/dist/index.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Tooltip/Tooltip.d.ts
+type TooltipProps = UniversalTooltipProps;
+/**
+ * **⚙️️ A Tooltip component that anchors to a trigger element
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Tooltips provide short, contextual help for UI elements. They appear on hover, focus, or long-press, and should clarify meaning—not introduce new concepts.
+ *
+ * Tooltips are not meant for critical information or required actions. If the user must take action, use a Dialog, Popover, or Inline messaging instead.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/tooltip Tooltip Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@yahoo/uds";
+ *
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button>Tooltip Trigger</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>basic tooltip content</TooltipContent>
+ * </Tooltip>
+ *```
+ *
+ * @related [Toast](https://uds.build/docs/components/toast), Popover (coming soon).
+ **/
+declare function Tooltip({
+  children,
+  placement,
+  open,
+  portal
+}: TooltipProps): react_jsx_runtime0.JSX.Element;
+declare namespace Tooltip {
+  var displayName: string;
+}
+//#endregion
+export { Tooltip };

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

@@ -0,0 +1,45 @@
+
+import { UniversalTooltipProps } from "../../../types/dist/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Tooltip/Tooltip.d.ts
+type TooltipProps = UniversalTooltipProps;
+/**
+ * **⚙️️ A Tooltip component that anchors to a trigger element
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Tooltips provide short, contextual help for UI elements. They appear on hover, focus, or long-press, and should clarify meaning—not introduce new concepts.
+ *
+ * Tooltips are not meant for critical information or required actions. If the user must take action, use a Dialog, Popover, or Inline messaging instead.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/tooltip Tooltip Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@yahoo/uds";
+ *
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button>Tooltip Trigger</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>basic tooltip content</TooltipContent>
+ * </Tooltip>
+ *```
+ *
+ * @related [Toast](https://uds.build/docs/components/toast), Popover (coming soon).
+ **/
+declare function Tooltip({
+  children,
+  placement,
+  open,
+  portal
+}: TooltipProps): react_jsx_runtime0.JSX.Element;
+declare namespace Tooltip {
+  var displayName: string;
+}
+//#endregion
+export { Tooltip };

package/dist/components/client/Tooltip/Tooltip.js

@@ -0,0 +1,63 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { useTooltipConfig } from "./UDSTooltipConfigProvider.js";
+import { TooltipInternalContext } from "./tooltipContext.js";
+import { jsx } from "react/jsx-runtime";
+import { TooltipProvider } from "@ariakit/react";
+
+//#region src/components/client/Tooltip/Tooltip.tsx
+/**
+* **⚙️️ A Tooltip component that anchors to a trigger element
+*
+* @componentType Client component
+*
+* @description
+* Tooltips provide short, contextual help for UI elements. They appear on hover, focus, or long-press, and should clarify meaning—not introduce new concepts.
+*
+* Tooltips are not meant for critical information or required actions. If the user must take action, use a Dialog, Popover, or Inline messaging instead.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/tooltip Tooltip Docs} for more info
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Tooltip, TooltipTrigger, TooltipContent, Button } from "@yahoo/uds";
+*
+* <Tooltip>
+*   <TooltipTrigger>
+*     <Button>Tooltip Trigger</Button>
+*   </TooltipTrigger>
+*   <TooltipContent>basic tooltip content</TooltipContent>
+* </Tooltip>
+*```
+*
+* @related [Toast](https://uds.build/docs/components/toast), Popover (coming soon).
+**/
+function Tooltip({ children, placement, open, portal = true }) {
+	const hideOnHoverOutside = open === void 0;
+	const controlledProps = open !== void 0 ? {
+		showTimeout: 0,
+		hideTimeout: 0,
+		timeout: 0,
+		mounted: open
+	} : void 0;
+	const { animationDuration, ariaKitPlacement } = useTooltipConfig({ placement });
+	return /* @__PURE__ */ jsx(TooltipInternalContext.Provider, {
+		value: {
+			hideOnHoverOutside,
+			portal
+		},
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			placement: ariaKitPlacement,
+			animated: animationDuration,
+			open,
+			...controlledProps,
+			children
+		})
+	});
+}
+Tooltip.displayName = "Tooltip";
+
+//#endregion
+export { Tooltip };

package/dist/components/client/Tooltip/TooltipContent.cjs

@@ -0,0 +1,188 @@
+"use client";
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+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_components_Box = require('../../Box.cjs');
+const require_components_Text = require('../../Text.cjs');
+const require_components_IconSlot = require('../../IconSlot.cjs');
+const require_components_client_Tooltip_UDSTooltipConfigProvider = require('./UDSTooltipConfigProvider.cjs');
+const require_components_client_Tooltip_tooltipContext = require('./tooltipContext.cjs');
+const require_hooks_useForkRef = require('../../../hooks/useForkRef.cjs');
+const require_components_client_Tooltip_util = require('./util.cjs');
+const require_components_client_Tooltip_useTooltipContent = require('./useTooltipContent.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+
+//#region src/components/client/Tooltip/TooltipContent.tsx
+const TooltipContent = (0, react.forwardRef)(function TooltipContent({ children, maxWidth, startTitleIcon, title, endContent, className, id }, ref) {
+	const store = (0, _ariakit_react.useTooltipContext)();
+	const open = (0, _ariakit_react.useStoreState)(store, "open");
+	const internalContext = (0, react.useContext)(require_components_client_Tooltip_tooltipContext.TooltipInternalContext);
+	const currentPlacement = (0, _ariakit_react.useStoreState)(store, "currentPlacement");
+	const placement = (0, _ariakit_react.useStoreState)(store, "placement");
+	const effectivePlacement = currentPlacement ?? placement ?? "top";
+	const { borderRadius, animationDuration } = require_components_client_Tooltip_UDSTooltipConfigProvider.useTooltipConfig();
+	const defaultBorderRadius = borderRadius["default"];
+	const arrowRef = (0, react.useRef)(null);
+	const { internalRef, shadowFilterId, maxWidthClass, dimensions, shadows, shadowPadding, svgPath, blurStyle, childTransitionStyle, tooltipShift, onPositionUpdate } = require_components_client_Tooltip_useTooltipContent.useTooltipContent({
+		open: open ?? false,
+		effectivePlacement,
+		maxWidth,
+		borderRadius: defaultBorderRadius,
+		arrowRef,
+		animationDuration
+	});
+	const mergedRef = require_hooks_useForkRef.useForkRef(ref, internalRef);
+	const classNames = {
+		root: require_styles_styler.getStyles({
+			tooltipSizeRoot: "default",
+			tooltipVariantRoot: "default",
+			className: require_styles_styler.cx(maxWidthClass, "flex", "z-[9999]", className)
+		}),
+		svg: require_styles_styler.getStyles({
+			tooltipSizeSvg: "default",
+			tooltipVariantSvg: "default",
+			className: require_styles_styler.cx("stroke-1", "uds-bgBlurFillFallback")
+		}),
+		blur: require_styles_styler.getStyles({
+			tooltipVariantBlur: "default",
+			position: "absolute",
+			width: "full",
+			height: "full",
+			className: require_styles_styler.cx("uds-bgBlurFallback", "top-0", "left-0", "z-[1]", "transition-opacity", `duration-[${animationDuration}ms]`, "ease-in-out")
+		}),
+		title: require_styles_styler.getStyles({ tooltipSizeTitle: "default" }),
+		body: require_styles_styler.getStyles({ tooltipSizeBody: "default" }),
+		endContent: require_styles_styler.getStyles({ tooltipSizeEndContent: "default" }),
+		icon: require_styles_styler.getStyles({
+			tooltipSizeIcon: "default",
+			tooltipVariantIcon: "default"
+		})
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Tooltip, {
+		ref: mergedRef,
+		className: classNames.root,
+		hideOnHoverOutside: internalContext ? internalContext.hideOnHoverOutside : void 0,
+		portal: internalContext ? internalContext.portal : true,
+		gutter: 10,
+		updatePosition: onPositionUpdate,
+		style: tooltipShift.x !== 0 || tooltipShift.y !== 0 ? { transform: `translate(${tooltipShift.x}px, ${tooltipShift.y}px)` } : void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+				className: classNames.blur,
+				style: {
+					...blurStyle,
+					...childTransitionStyle
+				}
+			}),
+			svgPath && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				"aria-hidden": true,
+				className: "absolute top-0 left-0 w-full h-full overflow-visible pointer-events-none z-[2]",
+				style: childTransitionStyle,
+				viewBox: `0 0 ${dimensions.width} ${dimensions.height}`,
+				children: [
+					shadows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("filter", {
+						id: shadowFilterId,
+						filterUnits: "userSpaceOnUse",
+						x: -(shadowPadding + require_components_client_Tooltip_util.ARROW_HEIGHT),
+						y: -(shadowPadding + require_components_client_Tooltip_util.ARROW_HEIGHT),
+						width: dimensions.width + 2 * (shadowPadding + require_components_client_Tooltip_util.ARROW_HEIGHT),
+						height: dimensions.height + 2 * (shadowPadding + require_components_client_Tooltip_util.ARROW_HEIGHT),
+						colorInterpolationFilters: "sRGB",
+						children: [
+							shadows.map((shadow, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
+								shadow.spread !== 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMorphology", {
+									in: "SourceAlpha",
+									operator: shadow.spread > 0 ? "dilate" : "erode",
+									radius: Math.abs(shadow.spread),
+									result: `spread${i}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", {
+									in: shadow.spread !== 0 ? `spread${i}` : "SourceAlpha",
+									stdDeviation: shadow.blur / 2,
+									result: `blurred${i}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feOffset", {
+									in: `blurred${i}`,
+									dx: shadow.x,
+									dy: shadow.y,
+									result: `offset${i}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feFlood", {
+									floodColor: shadow.color,
+									result: `color${i}`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feComposite", {
+									in: `color${i}`,
+									in2: `offset${i}`,
+									operator: "in",
+									result: `shadow${i}`
+								})
+							] }, i)),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMerge", {
+								result: "mergedShadows",
+								children: shadows.map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMergeNode", { in: `shadow${i}` }, i))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feComposite", {
+								in: "mergedShadows",
+								in2: "SourceAlpha",
+								operator: "out"
+							})
+						]
+					}) }),
+					shadows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: svgPath,
+						fill: "black",
+						filter: `url(#${shadowFilterId})`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: svgPath,
+						className: classNames.svg
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+				position: "relative",
+				flexDirection: "column",
+				className: "z-[3] gap-[inherit]",
+				style: childTransitionStyle,
+				id,
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+					alignItems: "center",
+					columnGap: "1",
+					children: [startTitleIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+						iconProps: { variant: "fill" },
+						icon: startTitleIcon,
+						className: classNames.icon
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+						className: classNames.title,
+						color: "inherit",
+						children: title
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+					alignItems: "center",
+					columnGap: "1.5",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+						className: classNames.body,
+						color: "inherit",
+						children
+					}), endContent && !(0, react.isValidElement)(endContent) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+						className: classNames.endContent,
+						color: "inherit",
+						children: endContent
+					}) : endContent]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TooltipArrow, {
+				ref: arrowRef,
+				style: { opacity: 0 }
+			})
+		]
+	});
+});
+TooltipContent.displayName = "TooltipContent";
+
+//#endregion
+exports.TooltipContent = TooltipContent;

package/dist/components/client/Tooltip/TooltipContent.d.cts

@@ -0,0 +1,8 @@
+
+import { UniversalTooltipContentProps } from "../../../types/dist/index.cjs";
+import * as react from "react";
+
+//#region src/components/client/Tooltip/TooltipContent.d.ts
+declare const TooltipContent: react.ForwardRefExoticComponent<UniversalTooltipContentProps & react.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { TooltipContent };

package/dist/components/client/Tooltip/TooltipContent.d.ts

@@ -0,0 +1,8 @@
+
+import { UniversalTooltipContentProps } from "../../../types/dist/index.js";
+import * as react from "react";
+
+//#region src/components/client/Tooltip/TooltipContent.d.ts
+declare const TooltipContent: react.ForwardRefExoticComponent<UniversalTooltipContentProps & react.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { TooltipContent };