@sanity/ui 4.0.7 → 4.1.1

package/dist/tooltip.js

@@ -1,12 +1,12 @@
 "use client";
 import { c as POPOVER_MOTION_PROPS, n as _getArrayProp } from "./helpers-C8xxXAQC.js";
-import { _ as useTheme_v2, d as createGlobalScopedContext, i as usePrefersReducedMotion, s as Card } from "./useLayer-jUJIz8mh.js";
-import { n as AnimateActivity, r as origin, t as getElementRef } from "./getElementRef-5HZQ-Owu.js";
-import { a as useBoundaryElement, n as Portal, r as usePortal, t as Arrow } from "./arrow-CL8xmdbg.js";
-import { t as Layer } from "./layer-DGn7KJIB.js";
+import { _ as useTheme_v2, d as createGlobalScopedContext, i as usePrefersReducedMotion, s as Card } from "./useLayer-D1usxIE0.js";
+import { i as origin, n as AnimateActivity, r as getTransformOrigin, t as getElementRef } from "./getElementRef-Jw7gY0eV.js";
+import { a as useBoundaryElement, n as Portal, r as usePortal, t as Arrow } from "./arrow-DKn5YKdy.js";
+import { t as Layer } from "./layer-BfwisMR6.js";
 import { c } from "react/compiler-runtime";
+import { clsx } from "clsx/lite";
 import { Activity, cloneElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import { styled } from "styled-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { arrow, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react-dom";
 import { motion } from "motion/react";
@@ -115,40 +115,43 @@ const DEFAULT_FALLBACK_PLACEMENTS = {
 		"top-end",
 		"bottom-end"
 	]
-}, MotionCard = styled(motion.create(Card)).withConfig({
-	displayName: "MotionCard",
-	componentId: "sc-0hzi5o-0"
-})`will-change:transform;`;
+};
+var tooltipCard = "_54iwec1", tooltipLayer = "_54iwec0";
+const MotionCard = motion.create(Card);
 /**
 * @internal
 */
 function TooltipCard(props) {
-	let $ = c(41), animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, ref, restProps, scheme, shadow, style;
-	$[0] === props ? (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], originX = $[7], originY = $[8], padding = $[9], placement = $[10], radius = $[11], ref = $[12], restProps = $[13], scheme = $[14], shadow = $[15], style = $[16]) : ({animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, ref, scheme, shadow, style, ...restProps} = props, $[0] = props, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = originX, $[8] = originY, $[9] = padding, $[10] = placement, $[11] = radius, $[12] = ref, $[13] = restProps, $[14] = scheme, $[15] = shadow, $[16] = style);
-	let t0 = animate ? "transform" : void 0, t1;
-	$[17] !== originX || $[18] !== originY || $[19] !== style || $[20] !== t0 ? (t1 = {
-		originX,
-		originY,
-		willChange: t0,
+	let $ = c(47), animate, arrow, arrowRef, arrowX, arrowY, children, className, originX, originY, padding, placement, radius, ref, restProps, scheme, shadow, style;
+	$[0] === props ? (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], className = $[7], originX = $[8], originY = $[9], padding = $[10], placement = $[11], radius = $[12], ref = $[13], restProps = $[14], scheme = $[15], shadow = $[16], style = $[17]) : ({animate, arrow, arrowRef, arrowX, arrowY, children, className, originX, originY, padding, placement, radius, ref, scheme, shadow, style, ...restProps} = props, $[0] = props, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = className, $[8] = originX, $[9] = originY, $[10] = padding, $[11] = placement, $[12] = radius, $[13] = ref, $[14] = restProps, $[15] = scheme, $[16] = shadow, $[17] = style);
+	let t0;
+	$[18] !== originX || $[19] !== originY ? (t0 = getTransformOrigin(originX, originY), $[18] = originX, $[19] = originY, $[20] = t0) : t0 = $[20];
+	let t1 = animate ? "transform" : void 0, t2;
+	$[21] !== style || $[22] !== t0 || $[23] !== t1 ? (t2 = {
+		transformOrigin: t0,
+		willChange: t1,
 		...style
-	}, $[17] = originX, $[18] = originY, $[19] = style, $[20] = t0, $[21] = t1) : t1 = $[21];
-	let rootStyle = t1, t2 = arrowX === null ? void 0 : arrowX, t3 = arrowY === null ? void 0 : arrowY, t4;
-	$[22] !== t2 || $[23] !== t3 ? (t4 = {
-		left: t2,
-		top: t3,
+	}, $[21] = style, $[22] = t0, $[23] = t1, $[24] = t2) : t2 = $[24];
+	let rootStyle = t2, t3 = arrowX === null ? void 0 : arrowX, t4 = arrowY === null ? void 0 : arrowY, t5;
+	$[25] !== t3 || $[26] !== t4 ? (t5 = {
+		left: t3,
+		top: t4,
 		right: void 0,
 		bottom: void 0
-	}, $[22] = t2, $[23] = t3, $[24] = t4) : t4 = $[24];
-	let arrowStyle = t4, t5 = animate ? POPOVER_MOTION_PROPS : void 0, t6;
-	$[25] !== arrow || $[26] !== arrowRef || $[27] !== arrowStyle ? (t6 = arrow && /* @__PURE__ */ jsx(Arrow, {
+	}, $[25] = t3, $[26] = t4, $[27] = t5) : t5 = $[27];
+	let arrowStyle = t5, t6;
+	$[28] === className ? t6 = $[29] : (t6 = clsx(tooltipCard, className), $[28] = className, $[29] = t6);
+	let t7 = animate ? POPOVER_MOTION_PROPS : void 0, t8;
+	$[30] !== arrow || $[31] !== arrowRef || $[32] !== arrowStyle ? (t8 = arrow && /* @__PURE__ */ jsx(Arrow, {
 		ref: arrowRef,
 		style: arrowStyle,
 		width: 15,
 		height: 6,
 		radius: 2
-	}), $[25] = arrow, $[26] = arrowRef, $[27] = arrowStyle, $[28] = t6) : t6 = $[28];
-	let t7;
-	return $[29] !== children || $[30] !== padding || $[31] !== placement || $[32] !== radius || $[33] !== ref || $[34] !== restProps || $[35] !== rootStyle || $[36] !== scheme || $[37] !== shadow || $[38] !== t5 || $[39] !== t6 ? (t7 = /* @__PURE__ */ jsxs(MotionCard, {
+	}), $[30] = arrow, $[31] = arrowRef, $[32] = arrowStyle, $[33] = t8) : t8 = $[33];
+	let t9;
+	return $[34] !== children || $[35] !== padding || $[36] !== placement || $[37] !== radius || $[38] !== ref || $[39] !== restProps || $[40] !== rootStyle || $[41] !== scheme || $[42] !== shadow || $[43] !== t6 || $[44] !== t7 || $[45] !== t8 ? (t9 = /* @__PURE__ */ jsxs(MotionCard, {
+		className: t6,
 		"data-ui": "Tooltip__card",
 		...restProps,
 		"data-placement": placement,
@@ -158,9 +161,9 @@ function TooltipCard(props) {
 		scheme,
 		shadow,
 		style: rootStyle,
-		...t5,
-		children: [children, t6]
-	}), $[29] = children, $[30] = padding, $[31] = placement, $[32] = radius, $[33] = ref, $[34] = restProps, $[35] = rootStyle, $[36] = scheme, $[37] = shadow, $[38] = t5, $[39] = t6, $[40] = t7) : t7 = $[40], t7;
+		...t7,
+		children: [children, t8]
+	}), $[34] = children, $[35] = padding, $[36] = placement, $[37] = radius, $[38] = ref, $[39] = restProps, $[40] = rootStyle, $[41] = scheme, $[42] = shadow, $[43] = t6, $[44] = t7, $[45] = t8, $[46] = t9) : t9 = $[46], t9;
 }
 /**
 * @beta
@@ -172,100 +175,94 @@ const TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/t
 function useTooltipDelayGroup() {
 	return useContext(TooltipDelayGroupContext);
 }
-const StyledTooltip = styled(Layer).withConfig({
-	displayName: "StyledTooltip",
-	componentId: "sc-nx2p4f-0"
-})`pointer-events:none;`;
 /**
 * Tooltips display information when hovering, focusing or tapping.
 *
 * @public
 */
 function Tooltip(props) {
-	let $ = c(138), boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), _boundaryElement, _fallbackPlacementsProp, _zOffset, childProp, content, delay, disabled, forwardedRef, portalProp, restProps, scheme, t0, t1, t2, t3, t4, t5;
-	$[0] === props ? (_boundaryElement = $[1], _fallbackPlacementsProp = $[2], _zOffset = $[3], childProp = $[4], content = $[5], delay = $[6], disabled = $[7], forwardedRef = $[8], portalProp = $[9], restProps = $[10], scheme = $[11], t0 = $[12], t1 = $[13], t2 = $[14], t3 = $[15], t4 = $[16], t5 = $[17]) : ({animate: t0, arrow: t1, boundaryElement: _boundaryElement, children: childProp, content, disabled, fallbackPlacements: _fallbackPlacementsProp, padding: t2, placement: t3, portal: portalProp, radius: t4, ref: forwardedRef, scheme, shadow: t5, zOffset: _zOffset, delay, ...restProps} = props, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacementsProp, $[3] = _zOffset, $[4] = childProp, $[5] = content, $[6] = delay, $[7] = disabled, $[8] = forwardedRef, $[9] = portalProp, $[10] = restProps, $[11] = scheme, $[12] = t0, $[13] = t1, $[14] = t2, $[15] = t3, $[16] = t4, $[17] = t5);
-	let _animate = t0 !== void 0 && t0, arrowProp = t1 !== void 0 && t1, padding = t2 === void 0 ? 2 : t2, placementProp = t3 === void 0 ? "bottom" : t3, radius = t4 === void 0 ? 2 : t4, shadow = t5 === void 0 ? 2 : t5, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = !usePrefersReducedMotion() && _animate, t6;
-	$[18] === fallbackPlacementsProp ? t6 = $[19] : (t6 = _getArrayProp(fallbackPlacementsProp), $[18] = fallbackPlacementsProp, $[19] = t6);
+	let $ = c(122), boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), { animate: t0, arrow: t1, boundaryElement: _boundaryElement, children: childProp, content, disabled, fallbackPlacements: _fallbackPlacementsProp, padding: t2, placement: t3, portal: portalProp, radius: t4, ref: forwardedRef, scheme, shadow: t5, zOffset: _zOffset, delay, ...restProps } = props, _animate = t0 !== void 0 && t0, arrowProp = t1 !== void 0 && t1, padding = t2 === void 0 ? 2 : t2, placementProp = t3 === void 0 ? "bottom" : t3, radius = t4 === void 0 ? 2 : t4, shadow = t5 === void 0 ? 2 : t5, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = !usePrefersReducedMotion() && _animate, t6;
+	$[0] === fallbackPlacementsProp ? t6 = $[1] : (t6 = _getArrayProp(fallbackPlacementsProp), $[0] = fallbackPlacementsProp, $[1] = t6);
 	let fallbackPlacements = t6, ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = useState(0), t7;
-	$[20] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[20] = t7) : t7 = $[20], useImperativeHandle(forwardedRef, t7);
+	$[2] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[2] = t7) : t7 = $[2], useImperativeHandle(forwardedRef, t7);
 	let portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, t8;
-	$[21] !== animate || $[22] !== arrowProp || $[23] !== boundaryElement || $[24] !== fallbackPlacements ? (t8 = {
+	$[3] !== animate || $[4] !== arrowProp || $[5] !== boundaryElement || $[6] !== fallbackPlacements ? (t8 = {
 		animate,
 		arrowProp,
 		arrowRef,
 		boundaryElement,
 		fallbackPlacements,
 		rootBoundary: "viewport"
-	}, $[21] = animate, $[22] = arrowProp, $[23] = boundaryElement, $[24] = fallbackPlacements, $[25] = t8) : t8 = $[25];
+	}, $[3] = animate, $[4] = arrowProp, $[5] = boundaryElement, $[6] = fallbackPlacements, $[7] = t8) : t8 = $[7];
 	let middleware = useMiddleware(t8), t9;
-	$[26] === referenceElement ? t9 = $[27] : (t9 = { reference: referenceElement }, $[26] = referenceElement, $[27] = t9);
+	$[8] === referenceElement ? t9 = $[9] : (t9 = { reference: referenceElement }, $[8] = referenceElement, $[9] = t9);
 	let t10;
-	$[28] !== middleware || $[29] !== placementProp || $[30] !== t9 ? (t10 = {
+	$[10] !== middleware || $[11] !== placementProp || $[12] !== t9 ? (t10 = {
 		middleware,
 		placement: placementProp,
 		whileElementsMounted: autoUpdate,
 		elements: t9
-	}, $[28] = middleware, $[29] = placementProp, $[30] = t9, $[31] = t10) : t10 = $[31];
+	}, $[10] = middleware, $[11] = placementProp, $[12] = t9, $[13] = t10) : t10 = $[13];
 	let { floatingStyles, placement, middlewareData, refs, update } = useFloating(t10), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), t11;
-	$[32] === delayGroupContext ? t11 = $[33] : (t11 = delayGroupContext || {}, $[32] = delayGroupContext, $[33] = t11);
+	$[14] === delayGroupContext ? t11 = $[15] : (t11 = delayGroupContext || {}, $[14] = delayGroupContext, $[15] = t11);
 	let { setIsGroupActive, setOpenTooltipId } = t11, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, t12;
-	$[34] !== closeDelay || $[35] !== isInsideGroup || $[36] !== openDelay || $[37] !== setIsGroupActive || $[38] !== setIsOpen || $[39] !== setOpenTooltipId || $[40] !== tooltipId ? (t12 = (open, immediate) => {
+	$[16] !== closeDelay || $[17] !== isInsideGroup || $[18] !== openDelay || $[19] !== setIsGroupActive || $[20] !== setIsOpen || $[21] !== setOpenTooltipId || $[22] !== tooltipId ? (t12 = (open, immediate) => {
 		if (isInsideGroup) {
 			if (open) {
 				let groupedOpenDelay = immediate ? 0 : openDelay;
 				setIsGroupActive?.(open, groupedOpenDelay), setOpenTooltipId?.(tooltipId, groupedOpenDelay);
 			} else setIsGroupActive?.(open, closeDelay > 200 ? closeDelay : 200), setOpenTooltipId?.(null, immediate ? 0 : closeDelay);
 		} else setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-	}, $[34] = closeDelay, $[35] = isInsideGroup, $[36] = openDelay, $[37] = setIsGroupActive, $[38] = setIsOpen, $[39] = setOpenTooltipId, $[40] = tooltipId, $[41] = t12) : t12 = $[41];
+	}, $[16] = closeDelay, $[17] = isInsideGroup, $[18] = openDelay, $[19] = setIsGroupActive, $[20] = setIsOpen, $[21] = setOpenTooltipId, $[22] = tooltipId, $[23] = t12) : t12 = $[23];
 	let handleIsOpenChange = t12, t13;
-	$[42] !== childProp?.props || $[43] !== handleIsOpenChange ? (t13 = (e) => {
+	$[24] !== childProp?.props || $[25] !== handleIsOpenChange ? (t13 = (e) => {
 		handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-	}, $[42] = childProp?.props, $[43] = handleIsOpenChange, $[44] = t13) : t13 = $[44], childProp?.props;
+	}, $[24] = childProp?.props, $[25] = handleIsOpenChange, $[26] = t13) : t13 = $[26], childProp?.props;
 	let handleBlur = t13, t14;
-	$[45] !== childProp?.props || $[46] !== handleIsOpenChange ? (t14 = (e_0) => {
+	$[27] !== childProp?.props || $[28] !== handleIsOpenChange ? (t14 = (e_0) => {
 		handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-	}, $[45] = childProp?.props, $[46] = handleIsOpenChange, $[47] = t14) : t14 = $[47], childProp?.props;
+	}, $[27] = childProp?.props, $[28] = handleIsOpenChange, $[29] = t14) : t14 = $[29], childProp?.props;
 	let handleClick = t14, t15;
-	$[48] !== childProp?.props || $[49] !== handleIsOpenChange ? (t15 = (e_1) => {
+	$[30] !== childProp?.props || $[31] !== handleIsOpenChange ? (t15 = (e_1) => {
 		handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-	}, $[48] = childProp?.props, $[49] = handleIsOpenChange, $[50] = t15) : t15 = $[50], childProp?.props;
+	}, $[30] = childProp?.props, $[31] = handleIsOpenChange, $[32] = t15) : t15 = $[32], childProp?.props;
 	let handleContextMenu = t15, t16;
-	$[51] !== childProp?.props || $[52] !== handleIsOpenChange ? (t16 = (e_2) => {
+	$[33] !== childProp?.props || $[34] !== handleIsOpenChange ? (t16 = (e_2) => {
 		handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-	}, $[51] = childProp?.props, $[52] = handleIsOpenChange, $[53] = t16) : t16 = $[53], childProp?.props;
+	}, $[33] = childProp?.props, $[34] = handleIsOpenChange, $[35] = t16) : t16 = $[35], childProp?.props;
 	let handleFocus = t16, t17;
-	$[54] !== childProp?.props || $[55] !== handleIsOpenChange ? (t17 = (e_3) => {
+	$[36] !== childProp?.props || $[37] !== handleIsOpenChange ? (t17 = (e_3) => {
 		handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-	}, $[54] = childProp?.props, $[55] = handleIsOpenChange, $[56] = t17) : t17 = $[56], childProp?.props;
+	}, $[36] = childProp?.props, $[37] = handleIsOpenChange, $[38] = t17) : t17 = $[38], childProp?.props;
 	let handleMouseEnter = t17, t18;
-	$[57] !== childProp?.props || $[58] !== handleIsOpenChange ? (t18 = (e_4) => {
+	$[39] !== childProp?.props || $[40] !== handleIsOpenChange ? (t18 = (e_4) => {
 		handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
-	}, $[57] = childProp?.props, $[58] = handleIsOpenChange, $[59] = t18) : t18 = $[59], childProp?.props;
+	}, $[39] = childProp?.props, $[40] = handleIsOpenChange, $[41] = t18) : t18 = $[41], childProp?.props;
 	let handleMouseLeave = t18, t19;
-	$[60] !== handleIsOpenChange || $[61] !== isInsideGroup || $[62] !== referenceElement || $[63] !== showTooltip ? (t19 = {
+	$[42] !== handleIsOpenChange || $[43] !== isInsideGroup || $[44] !== referenceElement || $[45] !== showTooltip ? (t19 = {
 		handleIsOpenChange,
 		referenceElement,
 		showTooltip,
 		isInsideGroup
-	}, $[60] = handleIsOpenChange, $[61] = isInsideGroup, $[62] = referenceElement, $[63] = showTooltip, $[64] = t19) : t19 = $[64], useCloseOnMouseLeave(t19);
+	}, $[42] = handleIsOpenChange, $[43] = isInsideGroup, $[44] = referenceElement, $[45] = showTooltip, $[46] = t19) : t19 = $[46], useCloseOnMouseLeave(t19);
 	let t20, t21;
-	$[65] !== disabled || $[66] !== handleIsOpenChange || $[67] !== showTooltip ? (t20 = () => {
+	$[47] !== disabled || $[48] !== handleIsOpenChange || $[49] !== showTooltip ? (t20 = () => {
 		disabled && showTooltip && handleIsOpenChange(!1);
 	}, t21 = [
 		disabled,
 		handleIsOpenChange,
 		showTooltip
-	], $[65] = disabled, $[66] = handleIsOpenChange, $[67] = showTooltip, $[68] = t20, $[69] = t21) : (t20 = $[68], t21 = $[69]), useEffect(t20, t21);
+	], $[47] = disabled, $[48] = handleIsOpenChange, $[49] = showTooltip, $[50] = t20, $[51] = t21) : (t20 = $[50], t21 = $[51]), useEffect(t20, t21);
 	let t22, t23;
-	$[70] !== content || $[71] !== handleIsOpenChange || $[72] !== showTooltip ? (t22 = () => {
+	$[52] !== content || $[53] !== handleIsOpenChange || $[54] !== showTooltip ? (t22 = () => {
 		!content && showTooltip && handleIsOpenChange(!1);
 	}, t23 = [
 		content,
 		handleIsOpenChange,
 		showTooltip
-	], $[70] = content, $[71] = handleIsOpenChange, $[72] = showTooltip, $[73] = t22, $[74] = t23) : (t22 = $[73], t23 = $[74]), useEffect(t22, t23);
+	], $[52] = content, $[53] = handleIsOpenChange, $[54] = showTooltip, $[55] = t22, $[56] = t23) : (t22 = $[55], t23 = $[56]), useEffect(t22, t23);
 	let t24, t25;
-	$[75] !== handleIsOpenChange || $[76] !== showTooltip ? (t24 = () => {
+	$[57] !== handleIsOpenChange || $[58] !== showTooltip ? (t24 = () => {
 		if (!showTooltip) return;
 		let handleWindowKeyDown = function handleWindowKeyDown(event) {
 			event.key === "Escape" && handleIsOpenChange(!1, !0);
@@ -273,22 +270,22 @@ function Tooltip(props) {
 		return window.addEventListener("keydown", handleWindowKeyDown), () => {
 			window.removeEventListener("keydown", handleWindowKeyDown);
 		};
-	}, t25 = [handleIsOpenChange, showTooltip], $[75] = handleIsOpenChange, $[76] = showTooltip, $[77] = t24, $[78] = t25) : (t24 = $[77], t25 = $[78]), useEffect(t24, t25);
+	}, t25 = [handleIsOpenChange, showTooltip], $[57] = handleIsOpenChange, $[58] = showTooltip, $[59] = t24, $[60] = t25) : (t24 = $[59], t25 = $[60]), useEffect(t24, t25);
 	let t26;
-	$[79] !== boundaryElement || $[80] !== portalElement?.offsetWidth ? (t26 = () => {
+	$[61] !== boundaryElement || $[62] !== portalElement?.offsetWidth ? (t26 = () => {
 		let availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
 		setTooltipMaxWidth(Math.min(...availableWidths) - 8);
-	}, $[79] = boundaryElement, $[80] = portalElement?.offsetWidth, $[81] = t26) : t26 = $[81];
+	}, $[61] = boundaryElement, $[62] = portalElement?.offsetWidth, $[63] = t26) : t26 = $[63];
 	let t27;
-	$[82] !== boundaryElement || $[83] !== portalElement ? (t27 = [boundaryElement, portalElement], $[82] = boundaryElement, $[83] = portalElement, $[84] = t27) : t27 = $[84], useLayoutEffect(t26, t27);
+	$[64] !== boundaryElement || $[65] !== portalElement ? (t27 = [boundaryElement, portalElement], $[64] = boundaryElement, $[65] = portalElement, $[66] = t27) : t27 = $[66], useLayoutEffect(t26, t27);
 	let t28;
-	$[85] === update ? t28 = $[86] : (t28 = (arrowEl) => {
+	$[67] === update ? t28 = $[68] : (t28 = (arrowEl) => {
 		arrowRef.current = arrowEl, update();
-	}, $[85] = update, $[86] = t28);
+	}, $[67] = update, $[68] = t28);
 	let setArrow = t28, t29;
-	$[87] === refs ? t29 = $[88] : (t29 = (node) => {
+	$[69] === refs ? t29 = $[70] : (t29 = (node) => {
 		ref.current = node, refs.setFloating(node);
-	}, $[87] = refs, $[88] = t29);
+	}, $[69] = refs, $[70] = t29);
 	let setFloating = t29, t30;
 	bb0: {
 		if (!childProp) {
@@ -296,7 +293,7 @@ function Tooltip(props) {
 			break bb0;
 		}
 		let t31;
-		$[89] !== childProp || $[90] !== handleBlur || $[91] !== handleClick || $[92] !== handleContextMenu || $[93] !== handleFocus || $[94] !== handleMouseEnter || $[95] !== handleMouseLeave ? (t31 = cloneElement(childProp, {
+		$[71] !== childProp || $[72] !== handleBlur || $[73] !== handleClick || $[74] !== handleContextMenu || $[75] !== handleFocus || $[76] !== handleMouseEnter || $[77] !== handleMouseLeave ? (t31 = cloneElement(childProp, {
 			onBlur: handleBlur,
 			onFocus: handleFocus,
 			onMouseEnter: handleMouseEnter,
@@ -304,23 +301,23 @@ function Tooltip(props) {
 			onClick: handleClick,
 			onContextMenu: handleContextMenu,
 			ref: setReferenceElement
-		}), $[89] = childProp, $[90] = handleBlur, $[91] = handleClick, $[92] = handleContextMenu, $[93] = handleFocus, $[94] = handleMouseEnter, $[95] = handleMouseLeave, $[96] = t31) : t31 = $[96], t30 = t31;
+		}), $[71] = childProp, $[72] = handleBlur, $[73] = handleClick, $[74] = handleContextMenu, $[75] = handleFocus, $[76] = handleMouseEnter, $[77] = handleMouseLeave, $[78] = t31) : t31 = $[78], t30 = t31;
 	}
 	let child = t30, t31;
-	$[97] === childProp ? t31 = $[98] : (t31 = childProp ? getElementRef(childProp) : null, $[97] = childProp, $[98] = t31);
+	$[79] === childProp ? t31 = $[80] : (t31 = childProp ? getElementRef(childProp) : null, $[79] = childProp, $[80] = t31);
 	let t32, t33;
-	if ($[99] === referenceElement ? (t32 = $[100], t33 = $[101]) : (t32 = () => referenceElement, t33 = [referenceElement], $[99] = referenceElement, $[100] = t32, $[101] = t33), useImperativeHandle(t31, t32, t33), !child) {
+	if ($[81] === referenceElement ? (t32 = $[82], t33 = $[83]) : (t32 = () => referenceElement, t33 = [referenceElement], $[81] = referenceElement, $[82] = t32, $[83] = t33), useImperativeHandle(t31, t32, t33), !child) {
 		let t34;
-		return $[102] === Symbol.for("react.memo_cache_sentinel") ? (t34 = /* @__PURE__ */ jsx(Fragment$1, {}), $[102] = t34) : t34 = $[102], t34;
+		return $[84] === Symbol.for("react.memo_cache_sentinel") ? (t34 = /* @__PURE__ */ jsx(Fragment$1, {}), $[84] = t34) : t34 = $[84], t34;
 	}
 	if (disabled) return child;
-	let t34 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0, t35;
-	$[103] !== floatingStyles || $[104] !== t34 ? (t35 = {
+	let T0 = Layer, t35 = clsx(tooltipLayer, restProps.className), t36 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0, t37;
+	$[85] !== floatingStyles || $[86] !== t36 ? (t37 = {
 		...floatingStyles,
-		maxWidth: t34
-	}, $[103] = floatingStyles, $[104] = t34, $[105] = t35) : t35 = $[105];
-	let t36;
-	$[106] !== animate || $[107] !== arrowProp || $[108] !== arrowX || $[109] !== arrowY || $[110] !== content || $[111] !== originX || $[112] !== originY || $[113] !== padding || $[114] !== placement || $[115] !== radius || $[116] !== restProps || $[117] !== scheme || $[118] !== setArrow || $[119] !== setFloating || $[120] !== shadow ? (t36 = /* @__PURE__ */ jsx(TooltipCard, {
+		maxWidth: t36
+	}, $[85] = floatingStyles, $[86] = t36, $[87] = t37) : t37 = $[87];
+	let t38;
+	$[88] !== animate || $[89] !== arrowProp || $[90] !== arrowX || $[91] !== arrowY || $[92] !== content || $[93] !== originX || $[94] !== originY || $[95] !== padding || $[96] !== placement || $[97] !== radius || $[98] !== restProps || $[99] !== scheme || $[100] !== setArrow || $[101] !== setFloating || $[102] !== shadow ? (t38 = /* @__PURE__ */ jsx(TooltipCard, {
 		...restProps,
 		animate,
 		arrow: arrowProp,
@@ -336,32 +333,33 @@ function Tooltip(props) {
 		scheme,
 		shadow,
 		children: content
-	}), $[106] = animate, $[107] = arrowProp, $[108] = arrowX, $[109] = arrowY, $[110] = content, $[111] = originX, $[112] = originY, $[113] = padding, $[114] = placement, $[115] = radius, $[116] = restProps, $[117] = scheme, $[118] = setArrow, $[119] = setFloating, $[120] = shadow, $[121] = t36) : t36 = $[121];
-	let t37;
-	$[122] !== restProps || $[123] !== setFloating || $[124] !== t35 || $[125] !== t36 || $[126] !== zOffset ? (t37 = /* @__PURE__ */ jsx(StyledTooltip, {
+	}), $[88] = animate, $[89] = arrowProp, $[90] = arrowX, $[91] = arrowY, $[92] = content, $[93] = originX, $[94] = originY, $[95] = padding, $[96] = placement, $[97] = radius, $[98] = restProps, $[99] = scheme, $[100] = setArrow, $[101] = setFloating, $[102] = shadow, $[103] = t38) : t38 = $[103];
+	let t39;
+	$[104] !== T0 || $[105] !== restProps || $[106] !== setFloating || $[107] !== t35 || $[108] !== t37 || $[109] !== t38 || $[110] !== zOffset ? (t39 = /* @__PURE__ */ jsx(T0, {
 		"data-ui": "Tooltip",
 		...restProps,
+		className: t35,
 		ref: setFloating,
-		style: t35,
+		style: t37,
 		zOffset,
-		children: t36
-	}), $[122] = restProps, $[123] = setFloating, $[124] = t35, $[125] = t36, $[126] = zOffset, $[127] = t37) : t37 = $[127];
-	let tooltip = t37, t38;
-	$[128] !== portalProp || $[129] !== tooltip ? (t38 = portalProp ? /* @__PURE__ */ jsx(Portal, {
+		children: t38
+	}), $[104] = T0, $[105] = restProps, $[106] = setFloating, $[107] = t35, $[108] = t37, $[109] = t38, $[110] = zOffset, $[111] = t39) : t39 = $[111];
+	let tooltip = t39, t40;
+	$[112] !== portalProp || $[113] !== tooltip ? (t40 = portalProp ? /* @__PURE__ */ jsx(Portal, {
 		__unstable_name: typeof portalProp == "string" ? portalProp : void 0,
 		children: tooltip
-	}) : tooltip, $[128] = portalProp, $[129] = tooltip, $[130] = t38) : t38 = $[130];
-	let tooltipNode = t38, t39;
-	$[131] !== animate || $[132] !== showTooltip || $[133] !== tooltipNode ? (t39 = animate ? /* @__PURE__ */ jsx(AnimateActivity, {
+	}) : tooltip, $[112] = portalProp, $[113] = tooltip, $[114] = t40) : t40 = $[114];
+	let tooltipNode = t40, t41;
+	$[115] !== animate || $[116] !== showTooltip || $[117] !== tooltipNode ? (t41 = animate ? /* @__PURE__ */ jsx(AnimateActivity, {
 		layoutMode: "default",
 		mode: showTooltip ? "visible" : "hidden",
 		children: tooltipNode
 	}) : /* @__PURE__ */ jsx(Activity, {
 		mode: showTooltip ? "visible" : "hidden",
 		children: tooltipNode
-	}), $[131] = animate, $[132] = showTooltip, $[133] = tooltipNode, $[134] = t39) : t39 = $[134];
-	let t40;
-	return $[135] !== child || $[136] !== t39 ? (t40 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t39, child] }), $[135] = child, $[136] = t39, $[137] = t40) : t40 = $[137], t40;
+	}), $[115] = animate, $[116] = showTooltip, $[117] = tooltipNode, $[118] = t41) : t41 = $[118];
+	let t42;
+	return $[119] !== child || $[120] !== t41 ? (t42 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t41, child] }), $[119] = child, $[120] = t41, $[121] = t42) : t42 = $[121], t42;
 }
 function useMiddleware(t0) {
 	let $ = c(17), { animate, arrowProp, arrowRef, boundaryElement, fallbackPlacements, rootBoundary } = t0, ret;