@soroush.tech/design-system 2.0.0 → 2.1.0-alpha.1

package/dist/{Tabs-JvjuCU8m.mjs → Tabs-C_qe9d4p.mjs}

@@ -4,8 +4,9 @@ import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { t as Icon } from "./Icon-XpXU-SuF.mjs";
 import { View } from "./View.mjs";
 import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
-import { t as MenuItem } from "./MenuItem-vXHGPK8g.mjs";
-import { t as Menu } from "./Menu-D4AIpdJv.mjs";
+import { t as Tooltip } from "./Tooltip-CwbuEQzf.mjs";
+import { t as MenuItem } from "./MenuItem-kRGVRI6G.mjs";
+import { t as Menu } from "./Menu-C_4jYHWE.mjs";
 import { a as TabsContext, i as TabIndexContext, n as getDividerShadow, r as getEnclosedPieceStyle, t as getDividerColor } from "./dividerLine-BC8E38Ed.mjs";
 import "./tonalRadius-CvXRueqT.mjs";
 import { TabScrollButton } from "./Tabs/TabScrollButton.mjs";
@@ -594,33 +595,39 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 					children: /* @__PURE__ */ jsx(Menu, {
 						align: "end",
 						onSelect: select,
-						trigger: /* @__PURE__ */ jsx(OverflowButton, {
-							type: "button",
-							...styleProps,
-							"aria-label": overflowLabel,
+						trigger: /* @__PURE__ */ jsx(Tooltip, {
 							title: overflowLabel,
-							children: /* @__PURE__ */ jsx(Icon, {
-								name: "expand_more",
-								size: "sm",
-								color: "inherit"
+							isInteractive: false,
+							children: /* @__PURE__ */ jsx(OverflowButton, {
+								type: "button",
+								...styleProps,
+								"aria-label": overflowLabel,
+								children: /* @__PURE__ */ jsx(Icon, {
+									name: "expand_more",
+									size: "sm",
+									color: "inherit"
+								})
 							})
 						}),
 						children: hiddenTabs.map((tab) => /* @__PURE__ */ jsx(MenuItem, {
 							value: tab.value,
 							disabled: tab.disabled,
 							shouldAnnounceSecondaryAction: shouldAnnounceClose,
-							secondaryAction: tab.closeLabel === void 0 ? void 0 : /* @__PURE__ */ jsx(OverflowClose, {
-								type: "button",
-								color: selectedColor,
-								"aria-hidden": shouldAnnounceClose ? void 0 : true,
-								"aria-label": shouldAnnounceClose ? tab.closeLabel : void 0,
+							secondaryAction: tab.closeLabel === void 0 ? void 0 : /* @__PURE__ */ jsx(Tooltip, {
 								title: tab.closeLabel,
-								tabIndex: -1,
-								onClick: () => onTabClose?.(tab.value),
-								children: /* @__PURE__ */ jsx(Icon, {
-									name: "close",
-									size: "0.75rem",
-									color: "inherit"
+								isInteractive: false,
+								children: /* @__PURE__ */ jsx(OverflowClose, {
+									type: "button",
+									color: selectedColor,
+									"aria-hidden": shouldAnnounceClose ? void 0 : true,
+									"aria-label": shouldAnnounceClose ? tab.closeLabel : void 0,
+									tabIndex: -1,
+									onClick: () => onTabClose?.(tab.value),
+									children: /* @__PURE__ */ jsx(Icon, {
+										name: "close",
+										size: "0.75rem",
+										color: "inherit"
+									})
 								})
 							}),
 							children: tab.label ?? tab.icon

package/dist/{Tabs-BsbX0jFL.cjs → Tabs-DmiA1J--.cjs}

@@ -4,8 +4,9 @@ const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 const require_Icon = require("./Icon-C5Iz5ekp.cjs");
 const require_View = require("./View.cjs");
 const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
-const require_MenuItem = require("./MenuItem-DXRw3Yca.cjs");
-const require_Menu = require("./Menu-Bx9jaHOy.cjs");
+const require_Tooltip = require("./Tooltip-CrPRvmj3.cjs");
+const require_MenuItem = require("./MenuItem-Bg4iRvVe.cjs");
+const require_Menu = require("./Menu-C6eIdA1J.cjs");
 const require_dividerLine = require("./dividerLine-DFuLn1zU.cjs");
 require("./tonalRadius-CU9GHoHx.cjs");
 const require_Tabs_TabScrollButton = require("./Tabs/TabScrollButton.cjs");
@@ -595,33 +596,39 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.Menu, {
 						align: "end",
 						onSelect: select,
-						trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowButton, {
-							type: "button",
-							...styleProps,
-							"aria-label": overflowLabel,
+						trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
 							title: overflowLabel,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
-								name: "expand_more",
-								size: "sm",
-								color: "inherit"
+							isInteractive: false,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowButton, {
+								type: "button",
+								...styleProps,
+								"aria-label": overflowLabel,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+									name: "expand_more",
+									size: "sm",
+									color: "inherit"
+								})
 							})
 						}),
 						children: hiddenTabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
 							value: tab.value,
 							disabled: tab.disabled,
 							shouldAnnounceSecondaryAction: shouldAnnounceClose,
-							secondaryAction: tab.closeLabel === void 0 ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowClose, {
-								type: "button",
-								color: selectedColor,
-								"aria-hidden": shouldAnnounceClose ? void 0 : true,
-								"aria-label": shouldAnnounceClose ? tab.closeLabel : void 0,
+							secondaryAction: tab.closeLabel === void 0 ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
 								title: tab.closeLabel,
-								tabIndex: -1,
-								onClick: () => onTabClose?.(tab.value),
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
-									name: "close",
-									size: "0.75rem",
-									color: "inherit"
+								isInteractive: false,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowClose, {
+									type: "button",
+									color: selectedColor,
+									"aria-hidden": shouldAnnounceClose ? void 0 : true,
+									"aria-label": shouldAnnounceClose ? tab.closeLabel : void 0,
+									tabIndex: -1,
+									onClick: () => onTabClose?.(tab.value),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+										name: "close",
+										size: "0.75rem",
+										color: "inherit"
+									})
 								})
 							}),
 							children: tab.label ?? tab.icon

package/dist/Tabs.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_Tabs_Tab = require("./Tabs/Tab.cjs");
 const require_Tabs_TabContext = require("./Tabs/TabContext.cjs");
 const require_Tabs_TabScrollButton = require("./Tabs/TabScrollButton.cjs");
-const require_Tabs = require("./Tabs-BsbX0jFL.cjs");
+const require_Tabs = require("./Tabs-DmiA1J--.cjs");
 const require_Tabs_TabList = require("./Tabs/TabList.cjs");
 const require_Tabs_TabPanel = require("./Tabs/TabPanel.cjs");
 exports.Tab = require_Tabs_Tab.Tab;

package/dist/Tabs.d.cts

@@ -1,8 +1,8 @@
-import { t as TabValue } from "./TabsContext-MpMEEVuB.cjs";
+import { t as TabValue } from "./TabsContext-DeP8oJpC.cjs";
 import { Tab, TabIconPosition, TabProps } from "./Tabs/Tab.cjs";
 import { TabContext, TabContextProps } from "./Tabs/TabContext.cjs";
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-CQeTS_zL.cjs";
-import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-Bo45R0nD.cjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-DTJN6JL2.cjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-gHMydoIS.cjs";
 import { TabList, TabListProps } from "./Tabs/TabList.cjs";
 import { TabPanel, TabPanelProps } from "./Tabs/TabPanel.cjs";
 export { Tab, TabContext, TabContextProps, TabIconPosition, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, TabScrollButton, TabScrollButtonProps, TabScrollDirection, type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs.d.mts

@@ -1,8 +1,8 @@
-import { t as TabValue } from "./TabsContext-0ZtedNyH.mjs";
+import { t as TabValue } from "./TabsContext-VJcdZQOf.mjs";
 import { Tab, TabIconPosition, TabProps } from "./Tabs/Tab.mjs";
 import { TabContext, TabContextProps } from "./Tabs/TabContext.mjs";
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-C_J58B_n.mjs";
-import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-SotXsXXb.mjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-DlNBgVwb.mjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-BLypGp0N.mjs";
 import { TabList, TabListProps } from "./Tabs/TabList.mjs";
 import { TabPanel, TabPanelProps } from "./Tabs/TabPanel.mjs";
 export { Tab, TabContext, TabContextProps, TabIconPosition, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, TabScrollButton, TabScrollButtonProps, TabScrollDirection, type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs.mjs

@@ -1,7 +1,7 @@
 import { Tab } from "./Tabs/Tab.mjs";
 import { TabContext } from "./Tabs/TabContext.mjs";
 import { TabScrollButton } from "./Tabs/TabScrollButton.mjs";
-import { t as Tabs } from "./Tabs-JvjuCU8m.mjs";
+import { t as Tabs } from "./Tabs-C_qe9d4p.mjs";
 import { TabList } from "./Tabs/TabList.mjs";
 import { TabPanel } from "./Tabs/TabPanel.mjs";
 export { Tab, TabContext, TabList, TabPanel, TabScrollButton, Tabs };

package/dist/{TabsContext-0ZtedNyH.d.mts → TabsContext-DeP8oJpC.d.cts}

@@ -1,4 +1,4 @@
-import "./index-CF_pl72E.mjs";
+import "./index-CtwlReZi.cjs";
 /** A tab's value: what it is chosen as. A `Tab` without one takes its position. */
 type TabValue = string | number;
 export { TabValue as t };

package/dist/{TabsContext-MpMEEVuB.d.cts → TabsContext-VJcdZQOf.d.mts}

@@ -1,4 +1,4 @@
-import "./index-CfB7OceY.cjs";
+import "./index-i8BxMDEC.mjs";
 /** A tab's value: what it is chosen as. A `Tab` without one takes its position. */
 type TabValue = string | number;
 export { TabValue as t };

package/dist/TextInput.d.cts

@@ -1,4 +1,4 @@
-import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { nt as Theme } from "./index-C6a3kDn2.cjs";
 import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 type TextInputColor = keyof Theme['palette'];

package/dist/TextInput.d.mts

@@ -1,4 +1,4 @@
-import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { nt as Theme } from "./index-DOH6uskj.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 type TextInputColor = keyof Theme['palette'];

package/dist/ToggleButton/ToggleButton.d.cts

@@ -1,4 +1,4 @@
-import { i as ButtonProps } from "../index-BzQze7eY.cjs";
+import { i as ButtonProps } from "../index-gxBafJdz.cjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CA-4EgZL.cjs";
 interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {
   /** The value associated with the button inside a `ToggleButtonGroup`. */

package/dist/ToggleButton/ToggleButton.d.mts

@@ -1,4 +1,4 @@
-import { i as ButtonProps } from "../index-BChRNCld.mjs";
+import { i as ButtonProps } from "../index-CCEfrBNN.mjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CA-4EgZL.mjs";
 interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {
   /** The value associated with the button inside a `ToggleButtonGroup`. */

package/dist/ToggleButton/ToggleButtonGroup.d.cts

@@ -1,4 +1,4 @@
-import { a as ButtonGroupProps } from "../index-hoHPfsc1.cjs";
+import { a as ButtonGroupProps } from "../index-Sq75GwA2.cjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CA-4EgZL.cjs";
 interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {
   /** Selected value(s) - single when `isExclusive`, array otherwise. Controlled. */

package/dist/ToggleButton/ToggleButtonGroup.d.mts

@@ -1,4 +1,4 @@
-import { a as ButtonGroupProps } from "../index-tOrd12AJ.mjs";
+import { a as ButtonGroupProps } from "../index-BVDN2XbT.mjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CA-4EgZL.mjs";
 interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {
   /** Selected value(s) - single when `isExclusive`, array otherwise. Controlled. */

package/dist/Tooltip-CrPRvmj3.cjs

@@ -0,0 +1,338 @@
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_getSurfaceRadius = require("./getSurfaceRadius-DwOn3ALC.cjs");
+const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
+const require_Portal = require("./Portal.cjs");
+const require_useAnchoredPlacement = require("./useAnchoredPlacement-BSfjNMut.cjs");
+const require_useMergedRefs = require("./useMergedRefs-BtctsnmX.cjs");
+const require_getTooltipOrigins = require("./getTooltipOrigins-8b5zQafY.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+// src/Tooltip/hooks/useTooltip.ts
+const isKeyboardFocus = (event) => {
+	try {
+		return event.target.matches(":focus-visible");
+	} catch {
+		return true;
+	}
+};
+/**
+* The state of a tooltip: whether it is open (its own, or its owner's), the timers that open and
+* close it, and the handlers its child and the tooltip itself take. Opening and closing are
+* delayed; moving from the child onto the tooltip does not close it, so its text can be read and
+* selected (WCAG 1.4.13); Escape closes it at once.
+*/
+function useTooltip({ isOpen: isOpenProp, defaultOpen, isAtPoint = false, onOpen, onClose, enterDelay, leaveDelay, enterTouchDelay, leaveTouchDelay, shouldOpenOnHover, shouldOpenOnFocus, shouldOpenOnTouch }) {
+	const [isOpen, setIsOpen] = require_useControlled.useControlled({
+		controlled: isOpenProp,
+		default: defaultOpen
+	});
+	const timer = (0, react.useRef)(void 0);
+	const latest = (0, react.useRef)({
+		isOpen,
+		isOpenProp,
+		isAtPoint,
+		onOpen,
+		onClose
+	});
+	(0, react.useEffect)(() => {
+		latest.current = {
+			isOpen,
+			isOpenProp,
+			isAtPoint,
+			onOpen,
+			onClose
+		};
+	});
+	const clear = (0, react.useCallback)(() => window.clearTimeout(timer.current), []);
+	const ask = (0, react.useCallback)((next, event, delay) => {
+		clear();
+		timer.current = window.setTimeout(() => {
+			const current = latest.current;
+			if (current.isOpen === next) return;
+			if (next && current.isAtPoint) return;
+			if (current.isOpenProp === void 0) setIsOpen(next);
+			(next ? current.onOpen : current.onClose)?.(event);
+		}, delay);
+	}, [clear, setIsOpen]);
+	(0, react.useEffect)(() => clear, [clear]);
+	(0, react.useEffect)(() => {
+		if (!isOpen) return void 0;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") ask(false, event, 0);
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [isOpen, ask]);
+	return {
+		isOpen,
+		childHandlers: {
+			onMouseEnter: (event) => {
+				if (shouldOpenOnHover) ask(true, event, enterDelay);
+			},
+			onMouseLeave: (event) => {
+				if (shouldOpenOnHover) ask(false, event, leaveDelay);
+			},
+			onFocus: (event) => {
+				if (shouldOpenOnFocus && isKeyboardFocus(event)) ask(true, event, enterDelay);
+			},
+			onBlur: (event) => {
+				if (shouldOpenOnFocus) ask(false, event, leaveDelay);
+			},
+			onTouchStart: (event) => {
+				if (shouldOpenOnTouch) ask(true, event, enterTouchDelay);
+			},
+			onTouchEnd: (event) => {
+				if (shouldOpenOnTouch) ask(false, event, leaveTouchDelay);
+			},
+			onTouchCancel: (event) => {
+				if (shouldOpenOnTouch) ask(false, event, leaveTouchDelay);
+			},
+			onPointerDown: (event) => {
+				if (event.pointerType !== "touch") ask(false, event, 0);
+			}
+		},
+		surfaceHandlers: {
+			onMouseEnter: () => {
+				if (shouldOpenOnHover) clear();
+			},
+			onMouseLeave: (event) => {
+				if (shouldOpenOnHover) ask(false, event, leaveDelay);
+			}
+		}
+	};
+}
+// src/Tooltip/Tooltip.tsx
+const MARGIN = 8;
+const GAP = 8;
+const ARROW = 8;
+const TooltipSurface = require_src.styled("div", {
+	name: "Tooltip",
+	label: "Tooltip",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"layer",
+		"isInteractive",
+		"borderRadius",
+		"bg",
+		"textColor"
+	])
+})(({ theme, layer, isInteractive, borderRadius, bg, textColor }) => ({
+	position: "fixed",
+	...!isInteractive && { pointerEvents: "none" },
+	top: 0,
+	left: 0,
+	visibility: "hidden",
+	zIndex: theme.zOrder[layer],
+	boxSizing: "border-box",
+	maxWidth: "20rem",
+	padding: `${theme.space[.5]} ${theme.space[1]}`,
+	borderRadius: require_getSurfaceRadius.getSurfaceRadius(theme, borderRadius),
+	boxShadow: theme.shadows[4],
+	backgroundColor: (0, require_src.src_exports.get)(theme, `background.${bg ?? "modal"}`),
+	color: (0, require_src.src_exports.get)(theme, `text.${textColor ?? require_themeDefault.themeDefault(theme, "textColor", "initial")}`),
+	fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
+	fontSize: theme.fontSizes[0],
+	lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base"),
+	overflowWrap: "break-word"
+}));
+const TooltipDescription = require_src.styled("span", { label: "TooltipDescription" })({
+	position: "absolute",
+	width: 1,
+	height: 1,
+	margin: -1,
+	padding: 0,
+	border: 0,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap"
+});
+const TooltipTarget = require_src.styled("span", { label: "TooltipTarget" })({ display: "inline-grid" });
+const TooltipArrow = require_src.styled("span", {
+	name: "Tooltip",
+	slot: "arrow",
+	label: "TooltipArrow"
+})({
+	position: "absolute",
+	width: ARROW,
+	height: ARROW,
+	backgroundColor: "inherit",
+	transform: "rotate(45deg)",
+	pointerEvents: "none"
+});
+const getArrow = ({ anchorRect, surfaceSize, top, left }) => {
+	const { width, height } = surfaceSize;
+	if (top + height <= anchorRect.top + 1 || top >= anchorRect.bottom - 1) {
+		const side = top + height <= anchorRect.top + 1 ? "top" : "bottom";
+		const middle = anchorRect.left + anchorRect.width / 2 - left;
+		return {
+			side,
+			offset: Math.min(Math.max(middle, ARROW), width - ARROW)
+		};
+	}
+	const side = left + width <= anchorRect.left + 1 ? "left" : "right";
+	const middle = anchorRect.top + anchorRect.height / 2 - top;
+	return {
+		side,
+		offset: Math.min(Math.max(middle, ARROW), height - ARROW)
+	};
+};
+const isSameArrow = (a, b) => a !== null && a.side === b.side && a.offset === b.offset;
+const getArrowStyle = ({ side, offset }) => {
+	const half = ARROW / 2;
+	if (side === "top") return {
+		bottom: -4,
+		left: offset - half
+	};
+	if (side === "bottom") return {
+		top: -4,
+		left: offset - half
+	};
+	if (side === "left") return {
+		right: -4,
+		top: offset - half
+	};
+	return {
+		left: -4,
+		top: offset - half
+	};
+};
+const mergeForwarded = (own, forwarded) => Object.fromEntries(Object.entries(forwarded).filter(([, value]) => value !== void 0).map(([name, value]) => {
+	const current = own[name];
+	if (typeof value === "function" && typeof current === "function") return [name, (...args) => {
+		current(...args);
+		value(...args);
+	}];
+	if (name === "aria-describedby" && current) return [name, `${String(current)} ${String(value)}`];
+	return [name, value];
+}));
+const getChildName = (title, own) => {
+	const isHidden = own["aria-hidden"] === true || own["aria-hidden"] === "true";
+	const isNamed = own["aria-label"] !== void 0 || own["aria-labelledby"] !== void 0;
+	return typeof title === "string" && !isHidden && !isNamed ? { "aria-label": title } : {};
+};
+/**
+* @description A short description of one child, shown on hover, keyboard focus and a long touch -
+* a `role="tooltip"` in a `Portal`, placed beside its child and flipped for want of room. The
+* child is named by it (`aria-label`) or described by it (`aria-describedby`, with
+* `shouldDescribeChild`). It opens and closes after their delays, stays open while the pointer is
+* on the tooltip itself, closes on Escape, and never takes or traps the focus.
+*/
+function Tooltip({ children, anchorPosition, title, placement: placementProp, hasArrow: hasArrowProp, enterDelay: enterDelayProp, leaveDelay: leaveDelayProp, enterTouchDelay: enterTouchDelayProp, leaveTouchDelay: leaveTouchDelayProp, shouldDescribeChild: shouldDescribeChildProp, isDescriptionPersistent: isDescriptionPersistentProp, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, isInteractive: isInteractiveProp, shouldWrapDisabledChild: shouldWrapDisabledChildProp, shouldOpenOnHover: shouldOpenOnHoverProp, shouldOpenOnFocus: shouldOpenOnFocusProp, shouldOpenOnTouch: shouldOpenOnTouchProp, slots, slotProps, layer: layerProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, className, "data-testid": dataTestid, ref: forwardedRef, ...forwarded }) {
+	const dp = require_theme.useDefaultProps("Tooltip");
+	const placement = placementProp ?? dp.placement ?? "top";
+	const hasArrow = hasArrowProp ?? dp.hasArrow ?? false;
+	const shouldDescribeChild = shouldDescribeChildProp ?? dp.shouldDescribeChild ?? false;
+	const isDescriptionPersistent = isDescriptionPersistentProp ?? dp.isDescriptionPersistent ?? false;
+	const isInteractive = isInteractiveProp ?? dp.isInteractive ?? true;
+	const shouldWrapDisabledChild = shouldWrapDisabledChildProp ?? dp.shouldWrapDisabledChild ?? true;
+	const layer = layerProp ?? dp.layer ?? "tooltip";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const bg = bgProp ?? dp.bg;
+	const textColor = textColorProp ?? dp.textColor;
+	const id = (0, react.useId)();
+	const isAtPoint = anchorPosition !== void 0;
+	const { isOpen, childHandlers, surfaceHandlers } = useTooltip({
+		isOpen: isOpenProp,
+		defaultOpen,
+		isAtPoint,
+		onOpen,
+		onClose,
+		enterDelay: enterDelayProp ?? dp.enterDelay ?? 100,
+		leaveDelay: leaveDelayProp ?? dp.leaveDelay ?? 0,
+		enterTouchDelay: enterTouchDelayProp ?? dp.enterTouchDelay ?? 700,
+		leaveTouchDelay: leaveTouchDelayProp ?? dp.leaveTouchDelay ?? 1500,
+		shouldOpenOnHover: shouldOpenOnHoverProp ?? dp.shouldOpenOnHover ?? true,
+		shouldOpenOnFocus: shouldOpenOnFocusProp ?? dp.shouldOpenOnFocus ?? true,
+		shouldOpenOnTouch: shouldOpenOnTouchProp ?? dp.shouldOpenOnTouch ?? true
+	});
+	const hasTitle = title !== void 0 && title !== null && title !== "";
+	const isShown = isOpen && hasTitle;
+	const anchorRef = (0, react.useRef)(null);
+	const noAnchorRef = (0, react.useRef)(null);
+	const surfaceRef = (0, react.useRef)(null);
+	const childProps = children?.props ?? {};
+	const forwardedProps = mergeForwarded(childProps, forwarded);
+	const own = {
+		...childProps,
+		...forwardedProps
+	};
+	const isChildDisabled = shouldWrapDisabledChild && own.disabled === true;
+	const childRef = require_useMergedRefs.useMergedRefs(childProps.ref, forwardedRef);
+	const ref = require_useMergedRefs.useMergedRefs(isChildDisabled ? void 0 : anchorRef, childRef);
+	const [arrow, setArrow] = (0, react.useState)(null);
+	const getOrigins = (0, react.useCallback)((context) => require_getTooltipOrigins.getTooltipOrigins(require_getTooltipOrigins.resolveTooltipPlacement(placement, context), context.isRtl), [placement]);
+	const onPlaced = (0, react.useCallback)((placed) => {
+		if (!hasArrow) return;
+		const next = getArrow(placed);
+		setArrow((current) => isSameArrow(current, next) ? current : next);
+	}, [hasArrow]);
+	require_useAnchoredPlacement.useAnchoredPlacement({
+		isOpen: isShown,
+		anchorRef: anchorPosition ? noAnchorRef : anchorRef,
+		anchorPosition,
+		surfaceRef,
+		getOrigins,
+		margin: MARGIN,
+		gap: GAP,
+		onPlaced
+	});
+	const handlers = Object.fromEntries(Object.entries(childHandlers).map(([name, handler]) => [name, (event) => {
+		own[name]?.(event);
+		handler(event);
+	}]));
+	const ownDescription = own["aria-describedby"];
+	const names = getChildName(title, own);
+	const descriptionId = `${id}-description`;
+	const hasPersistentDescription = children !== void 0 && shouldDescribeChild && isDescriptionPersistent && hasTitle;
+	const describedBy = (shown) => hasPersistentDescription ? [ownDescription, descriptionId].filter(Boolean).join(" ") : [ownDescription, shown ? id : void 0].filter(Boolean).join(" ") || void 0;
+	const ariaProps = shouldDescribeChild ? { "aria-describedby": describedBy(isShown) } : names;
+	const child = children ? (0, react.cloneElement)(children, {
+		...forwardedProps,
+		...isChildDisabled || isAtPoint ? {} : handlers,
+		...ariaProps,
+		ref
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		isChildDisabled && !isAtPoint ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTarget, {
+			ref: anchorRef,
+			...handlers,
+			children: child
+		}) : child,
+		hasPersistentDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipDescription, {
+			id: descriptionId,
+			children: title
+		}),
+		isShown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipSurface, {
+			...slotProps?.root,
+			as: slots?.root,
+			ref: surfaceRef,
+			id,
+			role: "tooltip",
+			layer,
+			isInteractive,
+			borderRadius,
+			bg,
+			textColor,
+			className: [slotProps?.root?.className, className].filter(Boolean).join(" ") || void 0,
+			"data-testid": dataTestid ?? slotProps?.root?.["data-testid"],
+			...isAtPoint || !isInteractive ? {} : surfaceHandlers,
+			children: [title, hasArrow && arrow ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipArrow, {
+				...slotProps?.arrow,
+				as: slots?.arrow,
+				style: {
+					...slotProps?.arrow?.style,
+					...getArrowStyle(arrow)
+				},
+				"aria-hidden": "true"
+			}) : null]
+		}) })
+	] });
+}
+Object.defineProperty(exports, "Tooltip", {
+	enumerable: true,
+	get: function() {
+		return Tooltip;
+	}
+});