@yahoo/uds 3.116.0-beta.2 → 3.116.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yahoo/uds",
   "description": "Yahoo Universal System",
-  "version": "3.116.0-beta.2",
+  "version": "3.116.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -206,9 +206,9 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf .coverage",
     "dev": "concurrently bun:dev:*",
     "dev:fixtures": "bun run ./scripts/buildFixtures.ts --watch",
-    "dev:purgeCSSData": "bun run ./scripts/generatePurgeCSSData.ts --watch",
     "dev:ts": "tsdown --watch",
     "format:pkg": "bun --cwd ../../ syncpack format",
+    "generate:componentData": "bun run ./src/cli/runner.ts generateComponentData",
     "lint": "eslint -c eslint.config.mjs .",
     "lint:fix": "bun run lint --fix",
     "lint:pkg": "bun publint",

package/dist/components/SvgFloatingOverlay.cjs

@@ -1,122 +0,0 @@
-/*! © 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');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/components/SvgFloatingOverlay.tsx
-const SvgFloatingOverlay = ({ blurClassName, blurStyle, childTransitionStyle, svgPath, dimensions, shadows, svgClassNames, shadowFilterId, shadowPadding, arrowHeight, contentWrapperSlotProps, children, borderRadius, svgBaseStyle, svgBorderStyle }) => {
-	const svgSharedProps = {
-		"aria-hidden": true,
-		style: childTransitionStyle,
-		viewBox: `0 0 ${dimensions.width} ${dimensions.height}`
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
-			className: blurClassName,
-			style: {
-				...blurStyle,
-				...childTransitionStyle
-			}
-		}),
-		svgPath && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-			...svgSharedProps,
-			className: require_styles_styler.cx("absolute top-0 left-0 w-full h-full overflow-visible pointer-events-none", "z-[2]"),
-			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 + arrowHeight),
-					y: -(shadowPadding + arrowHeight),
-					width: dimensions.width + 2 * (shadowPadding + arrowHeight),
-					height: dimensions.height + 2 * (shadowPadding + arrowHeight),
-					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: svgClassNames.base,
-					style: svgBaseStyle
-				})
-			]
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
-			position: "relative",
-			flexGrow: "1",
-			overflow: "hidden",
-			className: require_styles_styler.cx("z-[3]", "max-h-full", contentWrapperSlotProps?.className),
-			style: {
-				...childTransitionStyle,
-				borderRadius
-			},
-			...contentWrapperSlotProps,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
-				overflow: "auto",
-				flexGrow: "1",
-				display: "block",
-				className: "max-h-full",
-				children
-			})
-		}),
-		svgPath && svgClassNames.border && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-			...svgSharedProps,
-			className: require_styles_styler.cx("absolute top-0 left-0 w-full h-full overflow-visible pointer-events-none", "z-[3]"),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				d: svgPath,
-				className: svgClassNames.border,
-				fill: "transparent",
-				style: svgBorderStyle
-			})
-		})
-	] });
-};
-SvgFloatingOverlay.displayName = "SvgFloatingOverlay";
-
-//#endregion
-exports.SvgFloatingOverlay = SvgFloatingOverlay;

package/dist/components/SvgFloatingOverlay.d.cts

@@ -1,42 +0,0 @@
-
-import { BoxProps } from "./Box.cjs";
-import { UseSvgFloatingContentReturn } from "../hooks/useSvgFloatingContent.cjs";
-import { CSSProperties } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/components/SvgFloatingOverlay.d.ts
-interface SvgFloatingOverlayProps extends Pick<UseSvgFloatingContentReturn, 'blurStyle' | 'childTransitionStyle' | 'svgPath' | 'shadows' | 'shadowFilterId' | 'shadowPadding' | 'dimensions'> {
-  blurClassName: string;
-  svgClassNames: {
-    base: string;
-    border?: string;
-  };
-  arrowHeight: number;
-  children: React.ReactNode;
-  contentWrapperSlotProps?: Partial<BoxProps>;
-  borderRadius?: number;
-  svgBaseStyle?: CSSProperties;
-  svgBorderStyle?: CSSProperties;
-}
-declare const SvgFloatingOverlay: {
-  ({
-    blurClassName,
-    blurStyle,
-    childTransitionStyle,
-    svgPath,
-    dimensions,
-    shadows,
-    svgClassNames,
-    shadowFilterId,
-    shadowPadding,
-    arrowHeight,
-    contentWrapperSlotProps,
-    children,
-    borderRadius,
-    svgBaseStyle,
-    svgBorderStyle
-  }: SvgFloatingOverlayProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
-//#endregion
-export { SvgFloatingOverlay };

package/dist/components/SvgFloatingOverlay.d.ts

@@ -1,42 +0,0 @@
-
-import { BoxProps } from "./Box.js";
-import { UseSvgFloatingContentReturn } from "../hooks/useSvgFloatingContent.js";
-import { CSSProperties } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/components/SvgFloatingOverlay.d.ts
-interface SvgFloatingOverlayProps extends Pick<UseSvgFloatingContentReturn, 'blurStyle' | 'childTransitionStyle' | 'svgPath' | 'shadows' | 'shadowFilterId' | 'shadowPadding' | 'dimensions'> {
-  blurClassName: string;
-  svgClassNames: {
-    base: string;
-    border?: string;
-  };
-  arrowHeight: number;
-  children: React.ReactNode;
-  contentWrapperSlotProps?: Partial<BoxProps>;
-  borderRadius?: number;
-  svgBaseStyle?: CSSProperties;
-  svgBorderStyle?: CSSProperties;
-}
-declare const SvgFloatingOverlay: {
-  ({
-    blurClassName,
-    blurStyle,
-    childTransitionStyle,
-    svgPath,
-    dimensions,
-    shadows,
-    svgClassNames,
-    shadowFilterId,
-    shadowPadding,
-    arrowHeight,
-    contentWrapperSlotProps,
-    children,
-    borderRadius,
-    svgBaseStyle,
-    svgBorderStyle
-  }: SvgFloatingOverlayProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
-//#endregion
-export { SvgFloatingOverlay };

package/dist/components/SvgFloatingOverlay.js

@@ -1,120 +0,0 @@
-/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { cx } from "../styles/styler.js";
-import { Box } from "./Box.js";
-import { Fragment } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/SvgFloatingOverlay.tsx
-const SvgFloatingOverlay = ({ blurClassName, blurStyle, childTransitionStyle, svgPath, dimensions, shadows, svgClassNames, shadowFilterId, shadowPadding, arrowHeight, contentWrapperSlotProps, children, borderRadius, svgBaseStyle, svgBorderStyle }) => {
-	const svgSharedProps = {
-		"aria-hidden": true,
-		style: childTransitionStyle,
-		viewBox: `0 0 ${dimensions.width} ${dimensions.height}`
-	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx(Box, {
-			className: blurClassName,
-			style: {
-				...blurStyle,
-				...childTransitionStyle
-			}
-		}),
-		svgPath && /* @__PURE__ */ jsxs("svg", {
-			...svgSharedProps,
-			className: cx("absolute top-0 left-0 w-full h-full overflow-visible pointer-events-none", "z-[2]"),
-			children: [
-				shadows.length > 0 && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
-					id: shadowFilterId,
-					filterUnits: "userSpaceOnUse",
-					x: -(shadowPadding + arrowHeight),
-					y: -(shadowPadding + arrowHeight),
-					width: dimensions.width + 2 * (shadowPadding + arrowHeight),
-					height: dimensions.height + 2 * (shadowPadding + arrowHeight),
-					colorInterpolationFilters: "sRGB",
-					children: [
-						shadows.map((shadow, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
-							shadow.spread !== 0 && /* @__PURE__ */ jsx("feMorphology", {
-								in: "SourceAlpha",
-								operator: shadow.spread > 0 ? "dilate" : "erode",
-								radius: Math.abs(shadow.spread),
-								result: `spread${i}`
-							}),
-							/* @__PURE__ */ jsx("feGaussianBlur", {
-								in: shadow.spread !== 0 ? `spread${i}` : "SourceAlpha",
-								stdDeviation: shadow.blur / 2,
-								result: `blurred${i}`
-							}),
-							/* @__PURE__ */ jsx("feOffset", {
-								in: `blurred${i}`,
-								dx: shadow.x,
-								dy: shadow.y,
-								result: `offset${i}`
-							}),
-							/* @__PURE__ */ jsx("feFlood", {
-								floodColor: shadow.color,
-								result: `color${i}`
-							}),
-							/* @__PURE__ */ jsx("feComposite", {
-								in: `color${i}`,
-								in2: `offset${i}`,
-								operator: "in",
-								result: `shadow${i}`
-							})
-						] }, i)),
-						/* @__PURE__ */ jsx("feMerge", {
-							result: "mergedShadows",
-							children: shadows.map((_, i) => /* @__PURE__ */ jsx("feMergeNode", { in: `shadow${i}` }, i))
-						}),
-						/* @__PURE__ */ jsx("feComposite", {
-							in: "mergedShadows",
-							in2: "SourceAlpha",
-							operator: "out"
-						})
-					]
-				}) }),
-				shadows.length > 0 && /* @__PURE__ */ jsx("path", {
-					d: svgPath,
-					fill: "black",
-					filter: `url(#${shadowFilterId})`
-				}),
-				/* @__PURE__ */ jsx("path", {
-					d: svgPath,
-					className: svgClassNames.base,
-					style: svgBaseStyle
-				})
-			]
-		}),
-		/* @__PURE__ */ jsx(Box, {
-			position: "relative",
-			flexGrow: "1",
-			overflow: "hidden",
-			className: cx("z-[3]", "max-h-full", contentWrapperSlotProps?.className),
-			style: {
-				...childTransitionStyle,
-				borderRadius
-			},
-			...contentWrapperSlotProps,
-			children: /* @__PURE__ */ jsx(Box, {
-				overflow: "auto",
-				flexGrow: "1",
-				display: "block",
-				className: "max-h-full",
-				children
-			})
-		}),
-		svgPath && svgClassNames.border && /* @__PURE__ */ jsx("svg", {
-			...svgSharedProps,
-			className: cx("absolute top-0 left-0 w-full h-full overflow-visible pointer-events-none", "z-[3]"),
-			children: /* @__PURE__ */ jsx("path", {
-				d: svgPath,
-				className: svgClassNames.border,
-				fill: "transparent",
-				style: svgBorderStyle
-			})
-		})
-	] });
-};
-SvgFloatingOverlay.displayName = "SvgFloatingOverlay";
-
-//#endregion
-export { SvgFloatingOverlay };

package/dist/components/client/Popover/Popover.cjs

@@ -1,96 +0,0 @@
-"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_Popover_PopoverContext = require('./PopoverContext.cjs');
-const require_components_client_Popover_UDSPopoverConfigProvider = require('./UDSPopoverConfigProvider.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _ariakit_react = require("@ariakit/react");
-let motion_react = require("motion/react");
-
-//#region src/components/client/Popover/Popover.tsx
-const POPOVER_OPEN_EVENT = "uds:popover-open";
-/**
-* **⚙️️ A Popover component that anchors to a trigger element
-*
-* @componentType Client component
-*
-* @description
-* Popover is a floating surface used to display contextual content anchored to a trigger. It is typically used for lightweight interactions such as quick settings, inline actions, previews, and simple selection.
-*
-* Popover is a container component, the shell is consistent, but the content inside can vary widely depending on product needs.*
-* @see
-* Check out the {@link https://uds.build/docs/components/popover Popover Docs} for more info
-*
-* @example
-* ```tsx
-* 'use client';
-* import { Popover, PopoverTrigger, PopoverContent, Button } from "@yahoo/uds";
-*
-* <Popover>
-*   <PopoverTrigger>
-*     <Button>Popover Trigger</Button>
-*   </PopoverTrigger>
-*   <PopoverContent>basic popover content</PopoverContent>
-* </Popover>
-*```
-*
-* @related [Toast](https://uds.build/docs/components/toast), [Tooltip](https://uds.build/docs/components/tooltip)
-**/
-function Popover({ children, placement, open, defaultOpen = false, portal = true, hideArrow = false, hideDismissButton = false, onClose, onOpen, reduceMotion: forceReduceMotion = false, disableAutoFocus = false, disableVerticalSpacing = false, disableHorizontalSpacing = false, sameWidth = false, gutter = 4 }) {
-	const controlledProps = open !== void 0 ? {
-		showTimeout: 0,
-		hideTimeout: 0,
-		timeout: 0,
-		...open ? { mounted: true } : {}
-	} : void 0;
-	const { animationDuration: animationDurationConfig, ariaKitPlacement } = require_components_client_Popover_UDSPopoverConfigProvider.usePopoverConfig({ placement });
-	const id = (0, react.useId)();
-	const store = (0, _ariakit_react.usePopoverStore)({ defaultOpen });
-	const handleSetOpen = (0, react.useCallback)((newOpen) => {
-		if (newOpen) {
-			onOpen?.();
-			document.dispatchEvent(new CustomEvent(POPOVER_OPEN_EVENT, { detail: id }));
-		}
-	}, [onOpen, id]);
-	(0, react.useEffect)(() => {
-		const handler = (e) => {
-			if (("detail" in e ? e.detail : void 0) !== id) store?.setState("open", false);
-		};
-		document.addEventListener(POPOVER_OPEN_EVENT, handler);
-		return () => document.removeEventListener(POPOVER_OPEN_EVENT, handler);
-	}, [id, store]);
-	const isControlled = open !== void 0;
-	const reducedMotion = (0, motion_react.useReducedMotion)() || forceReduceMotion;
-	const animationDuration = reducedMotion ? 0 : animationDurationConfig;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Popover_PopoverContext.PopoverInternalContext.Provider, {
-		value: {
-			portal,
-			hideArrow,
-			hideDismissButton,
-			onClose,
-			isControlled,
-			animationDuration,
-			reducedMotion,
-			disableAutoFocus,
-			disableVerticalSpacing,
-			disableHorizontalSpacing,
-			sameWidth,
-			gutter
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.PopoverProvider, {
-			placement: ariaKitPlacement,
-			animated: animationDuration,
-			open,
-			setOpen: handleSetOpen,
-			store,
-			...controlledProps,
-			children
-		})
-	});
-}
-Popover.displayName = "Popover";
-
-//#endregion
-exports.Popover = Popover;

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

@@ -1,55 +0,0 @@
-
-import { UniversalPopoverProps } from "../../../types/dist/index.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/components/client/Popover/Popover.d.ts
-type PopoverProps = UniversalPopoverProps;
-/**
- * **⚙️️ A Popover component that anchors to a trigger element
- *
- * @componentType Client component
- *
- * @description
- * Popover is a floating surface used to display contextual content anchored to a trigger. It is typically used for lightweight interactions such as quick settings, inline actions, previews, and simple selection.
- *
- * Popover is a container component, the shell is consistent, but the content inside can vary widely depending on product needs.*
- * @see
- * Check out the {@link https://uds.build/docs/components/popover Popover Docs} for more info
- *
- * @example
- * ```tsx
- * 'use client';
- * import { Popover, PopoverTrigger, PopoverContent, Button } from "@yahoo/uds";
- *
- * <Popover>
- *   <PopoverTrigger>
- *     <Button>Popover Trigger</Button>
- *   </PopoverTrigger>
- *   <PopoverContent>basic popover content</PopoverContent>
- * </Popover>
- *```
- *
- * @related [Toast](https://uds.build/docs/components/toast), [Tooltip](https://uds.build/docs/components/tooltip)
- **/
-declare function Popover({
-  children,
-  placement,
-  open,
-  defaultOpen,
-  portal,
-  hideArrow,
-  hideDismissButton,
-  onClose,
-  onOpen,
-  reduceMotion: forceReduceMotion,
-  disableAutoFocus,
-  disableVerticalSpacing,
-  disableHorizontalSpacing,
-  sameWidth,
-  gutter
-}: PopoverProps): react_jsx_runtime0.JSX.Element;
-declare namespace Popover {
-  var displayName: string;
-}
-//#endregion
-export { Popover };

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

@@ -1,55 +0,0 @@
-
-import { UniversalPopoverProps } from "../../../types/dist/index.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/components/client/Popover/Popover.d.ts
-type PopoverProps = UniversalPopoverProps;
-/**
- * **⚙️️ A Popover component that anchors to a trigger element
- *
- * @componentType Client component
- *
- * @description
- * Popover is a floating surface used to display contextual content anchored to a trigger. It is typically used for lightweight interactions such as quick settings, inline actions, previews, and simple selection.
- *
- * Popover is a container component, the shell is consistent, but the content inside can vary widely depending on product needs.*
- * @see
- * Check out the {@link https://uds.build/docs/components/popover Popover Docs} for more info
- *
- * @example
- * ```tsx
- * 'use client';
- * import { Popover, PopoverTrigger, PopoverContent, Button } from "@yahoo/uds";
- *
- * <Popover>
- *   <PopoverTrigger>
- *     <Button>Popover Trigger</Button>
- *   </PopoverTrigger>
- *   <PopoverContent>basic popover content</PopoverContent>
- * </Popover>
- *```
- *
- * @related [Toast](https://uds.build/docs/components/toast), [Tooltip](https://uds.build/docs/components/tooltip)
- **/
-declare function Popover({
-  children,
-  placement,
-  open,
-  defaultOpen,
-  portal,
-  hideArrow,
-  hideDismissButton,
-  onClose,
-  onOpen,
-  reduceMotion: forceReduceMotion,
-  disableAutoFocus,
-  disableVerticalSpacing,
-  disableHorizontalSpacing,
-  sameWidth,
-  gutter
-}: PopoverProps): react_jsx_runtime0.JSX.Element;
-declare namespace Popover {
-  var displayName: string;
-}
-//#endregion
-export { Popover };

package/dist/components/client/Popover/Popover.js

@@ -1,94 +0,0 @@
-"use client";
-/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { PopoverInternalContext } from "./PopoverContext.js";
-import { usePopoverConfig } from "./UDSPopoverConfigProvider.js";
-import { useCallback, useEffect, useId } from "react";
-import { jsx } from "react/jsx-runtime";
-import { PopoverProvider, usePopoverStore } from "@ariakit/react";
-import { useReducedMotion } from "motion/react";
-
-//#region src/components/client/Popover/Popover.tsx
-const POPOVER_OPEN_EVENT = "uds:popover-open";
-/**
-* **⚙️️ A Popover component that anchors to a trigger element
-*
-* @componentType Client component
-*
-* @description
-* Popover is a floating surface used to display contextual content anchored to a trigger. It is typically used for lightweight interactions such as quick settings, inline actions, previews, and simple selection.
-*
-* Popover is a container component, the shell is consistent, but the content inside can vary widely depending on product needs.*
-* @see
-* Check out the {@link https://uds.build/docs/components/popover Popover Docs} for more info
-*
-* @example
-* ```tsx
-* 'use client';
-* import { Popover, PopoverTrigger, PopoverContent, Button } from "@yahoo/uds";
-*
-* <Popover>
-*   <PopoverTrigger>
-*     <Button>Popover Trigger</Button>
-*   </PopoverTrigger>
-*   <PopoverContent>basic popover content</PopoverContent>
-* </Popover>
-*```
-*
-* @related [Toast](https://uds.build/docs/components/toast), [Tooltip](https://uds.build/docs/components/tooltip)
-**/
-function Popover({ children, placement, open, defaultOpen = false, portal = true, hideArrow = false, hideDismissButton = false, onClose, onOpen, reduceMotion: forceReduceMotion = false, disableAutoFocus = false, disableVerticalSpacing = false, disableHorizontalSpacing = false, sameWidth = false, gutter = 4 }) {
-	const controlledProps = open !== void 0 ? {
-		showTimeout: 0,
-		hideTimeout: 0,
-		timeout: 0,
-		...open ? { mounted: true } : {}
-	} : void 0;
-	const { animationDuration: animationDurationConfig, ariaKitPlacement } = usePopoverConfig({ placement });
-	const id = useId();
-	const store = usePopoverStore({ defaultOpen });
-	const handleSetOpen = useCallback((newOpen) => {
-		if (newOpen) {
-			onOpen?.();
-			document.dispatchEvent(new CustomEvent(POPOVER_OPEN_EVENT, { detail: id }));
-		}
-	}, [onOpen, id]);
-	useEffect(() => {
-		const handler = (e) => {
-			if (("detail" in e ? e.detail : void 0) !== id) store?.setState("open", false);
-		};
-		document.addEventListener(POPOVER_OPEN_EVENT, handler);
-		return () => document.removeEventListener(POPOVER_OPEN_EVENT, handler);
-	}, [id, store]);
-	const isControlled = open !== void 0;
-	const reducedMotion = useReducedMotion() || forceReduceMotion;
-	const animationDuration = reducedMotion ? 0 : animationDurationConfig;
-	return /* @__PURE__ */ jsx(PopoverInternalContext.Provider, {
-		value: {
-			portal,
-			hideArrow,
-			hideDismissButton,
-			onClose,
-			isControlled,
-			animationDuration,
-			reducedMotion,
-			disableAutoFocus,
-			disableVerticalSpacing,
-			disableHorizontalSpacing,
-			sameWidth,
-			gutter
-		},
-		children: /* @__PURE__ */ jsx(PopoverProvider, {
-			placement: ariaKitPlacement,
-			animated: animationDuration,
-			open,
-			setOpen: handleSetOpen,
-			store,
-			...controlledProps,
-			children
-		})
-	});
-}
-Popover.displayName = "Popover";
-
-//#endregion
-export { Popover };