@ariakit/react-components 0.1.0

package/dist/popover/popover.js

@@ -0,0 +1,312 @@
+"use client";
+import { PopoverScopedContextProvider, usePopoverProviderContext } from "./popover-context.js";
+import { createDialogComponent, useDialog } from "../dialog/dialog.js";
+import { createElement, createHook, forwardRef, useEvent, usePortalRef, useSafeLayoutEffect, useWrapElement } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+import { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from "@floating-ui/dom";
+//#region src/popover/popover.tsx
+const TagName = "div";
+function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
+	if (typeof DOMRect === "function") return new DOMRect(x, y, width, height);
+	const rect = {
+		x,
+		y,
+		width,
+		height,
+		top: y,
+		right: x + width,
+		bottom: y + height,
+		left: x
+	};
+	return {
+		...rect,
+		toJSON: () => rect
+	};
+}
+function getDOMRect(anchorRect) {
+	if (!anchorRect) return createDOMRect();
+	const { x, y, width, height } = anchorRect;
+	return createDOMRect(x, y, width, height);
+}
+function getAnchorElement(anchorElement, getAnchorRect) {
+	return {
+		contextElement: anchorElement || void 0,
+		getBoundingClientRect: () => {
+			const anchor = anchorElement;
+			const anchorRect = getAnchorRect?.(anchor);
+			if (anchorRect || !anchor) return getDOMRect(anchorRect);
+			return anchor.getBoundingClientRect();
+		}
+	};
+}
+function isValidPlacement(flip) {
+	return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(flip);
+}
+function roundByDPR(value) {
+	const dpr = window.devicePixelRatio || 1;
+	return Math.round(value * dpr) / dpr;
+}
+function getOffsetMiddleware(arrowElement, props) {
+	return offset(({ placement }) => {
+		const arrowOffset = (arrowElement?.clientHeight || 0) / 2;
+		const finalGutter = typeof props.gutter === "number" ? props.gutter + arrowOffset : props.gutter ?? arrowOffset;
+		return {
+			crossAxis: !!!placement.split("-")[1] ? props.shift : void 0,
+			mainAxis: finalGutter,
+			alignmentAxis: props.shift
+		};
+	});
+}
+function getFlipMiddleware(props) {
+	if (props.flip === false) return;
+	const fallbackPlacements = typeof props.flip === "string" ? props.flip.split(" ") : void 0;
+	invariant(!fallbackPlacements || fallbackPlacements.every(isValidPlacement), "`flip` expects a spaced-delimited list of placements");
+	return flip({
+		padding: props.overflowPadding,
+		fallbackPlacements
+	});
+}
+function getShiftMiddleware(props) {
+	if (!props.slide && !props.overlap) return;
+	return shift({
+		mainAxis: props.slide,
+		crossAxis: props.overlap,
+		padding: props.overflowPadding,
+		limiter: limitShift()
+	});
+}
+function getSizeMiddleware(props) {
+	return size({
+		padding: props.overflowPadding,
+		apply({ elements, availableWidth, availableHeight, rects }) {
+			const wrapper = elements.floating;
+			const referenceWidth = Math.round(rects.reference.width);
+			availableWidth = Math.floor(availableWidth);
+			availableHeight = Math.floor(availableHeight);
+			wrapper.style.setProperty("--popover-anchor-width", `${referenceWidth}px`);
+			wrapper.style.setProperty("--popover-available-width", `${availableWidth}px`);
+			wrapper.style.setProperty("--popover-available-height", `${availableHeight}px`);
+			if (props.sameWidth) wrapper.style.width = `${referenceWidth}px`;
+			if (props.fitViewport) {
+				wrapper.style.maxWidth = `${availableWidth}px`;
+				wrapper.style.maxHeight = `${availableHeight}px`;
+			}
+		}
+	});
+}
+function getArrowMiddleware(arrowElement, props) {
+	if (!arrowElement) return;
+	return arrow({
+		element: arrowElement,
+		padding: props.arrowPadding
+	});
+}
+/**
+* Returns props to create a `Popover` component.
+* @see https://ariakit.com/components/popover
+* @example
+* ```jsx
+* const store = usePopoverStore();
+* const props = usePopover({ store });
+* <Role {...props}>Popover</Role>
+* ```
+*/
+const usePopover = createHook(function usePopover({ store, modal = false, portal = modal, preserveTabOrder = true, autoFocusOnShow = true, wrapperProps, fixed = false, flip = true, shift = 0, slide = true, overlap = false, sameWidth = false, fitViewport = false, gutter, arrowPadding = 4, overflowPadding = 8, getAnchorRect, updatePosition, ...props }) {
+	const context = usePopoverProviderContext();
+	store = store || context;
+	invariant(store, "Popover must receive a `store` prop or be wrapped in a PopoverProvider component.");
+	const arrowElement = useStoreState(store, "arrowElement");
+	const anchorElement = useStoreState(store, "anchorElement");
+	const disclosureElement = useStoreState(store, "disclosureElement");
+	const popoverElement = useStoreState(store, "popoverElement");
+	const contentElement = useStoreState(store, "contentElement");
+	const placement = useStoreState(store, "placement");
+	const mounted = useStoreState(store, "mounted");
+	const rendered = useStoreState(store, "rendered");
+	const defaultArrowElementRef = useRef(null);
+	const [positioned, setPositioned] = useState(false);
+	const { portalRef, domReady } = usePortalRef(portal, props.portalRef);
+	const getAnchorRectProp = useEvent(getAnchorRect);
+	const updatePositionProp = useEvent(updatePosition);
+	const hasCustomUpdatePosition = !!updatePosition;
+	useSafeLayoutEffect(() => {
+		if (!popoverElement?.isConnected) return;
+		popoverElement.style.setProperty("--popover-overflow-padding", `${overflowPadding}px`);
+		const anchor = getAnchorElement(anchorElement, getAnchorRectProp);
+		const updatePosition = async () => {
+			if (!mounted) return;
+			if (!arrowElement) defaultArrowElementRef.current = defaultArrowElementRef.current || document.createElement("div");
+			const arrow = arrowElement || defaultArrowElementRef.current;
+			const middleware = [
+				getOffsetMiddleware(arrow, {
+					gutter,
+					shift
+				}),
+				getFlipMiddleware({
+					flip,
+					overflowPadding
+				}),
+				getShiftMiddleware({
+					slide,
+					shift,
+					overlap,
+					overflowPadding
+				}),
+				getArrowMiddleware(arrow, { arrowPadding }),
+				getSizeMiddleware({
+					sameWidth,
+					fitViewport,
+					overflowPadding
+				})
+			];
+			const pos = await computePosition(anchor, popoverElement, {
+				placement,
+				strategy: fixed ? "fixed" : "absolute",
+				middleware
+			});
+			store?.setState("currentPlacement", pos.placement);
+			setPositioned(true);
+			const x = roundByDPR(pos.x);
+			const y = roundByDPR(pos.y);
+			Object.assign(popoverElement.style, {
+				top: "0",
+				left: "0",
+				transform: `translate3d(${x}px,${y}px,0)`
+			});
+			if (arrow && pos.middlewareData.arrow) {
+				const { x: arrowX, y: arrowY } = pos.middlewareData.arrow;
+				const side = pos.placement.split("-")[0];
+				const centerX = arrow.clientWidth / 2;
+				const centerY = arrow.clientHeight / 2;
+				const originX = arrowX != null ? arrowX + centerX : -centerX;
+				const originY = arrowY != null ? arrowY + centerY : -centerY;
+				popoverElement.style.setProperty("--popover-transform-origin", {
+					top: `${originX}px calc(100% + ${centerY}px)`,
+					bottom: `${originX}px ${-centerY}px`,
+					left: `calc(100% + ${centerX}px) ${originY}px`,
+					right: `${-centerX}px ${originY}px`
+				}[side]);
+				Object.assign(arrow.style, {
+					left: arrowX != null ? `${arrowX}px` : "",
+					top: arrowY != null ? `${arrowY}px` : "",
+					[side]: "100%"
+				});
+			}
+		};
+		const update = async () => {
+			if (hasCustomUpdatePosition) {
+				await updatePositionProp({ updatePosition });
+				setPositioned(true);
+			} else await updatePosition();
+		};
+		const cancelAutoUpdate = autoUpdate(anchor, popoverElement, update, { elementResize: typeof ResizeObserver === "function" });
+		return () => {
+			setPositioned(false);
+			cancelAutoUpdate();
+		};
+	}, [
+		store,
+		rendered,
+		popoverElement,
+		arrowElement,
+		anchorElement,
+		popoverElement,
+		placement,
+		mounted,
+		domReady,
+		fixed,
+		flip,
+		shift,
+		slide,
+		overlap,
+		sameWidth,
+		fitViewport,
+		gutter,
+		arrowPadding,
+		overflowPadding,
+		getAnchorRectProp,
+		hasCustomUpdatePosition,
+		updatePositionProp
+	]);
+	useSafeLayoutEffect(() => {
+		if (!mounted) return;
+		if (!domReady) return;
+		if (!popoverElement?.isConnected) return;
+		if (!contentElement?.isConnected) return;
+		const applyZIndex = () => {
+			popoverElement.style.zIndex = getComputedStyle(contentElement).zIndex;
+		};
+		applyZIndex();
+		let raf = requestAnimationFrame(() => {
+			raf = requestAnimationFrame(applyZIndex);
+		});
+		return () => cancelAnimationFrame(raf);
+	}, [
+		mounted,
+		domReady,
+		popoverElement,
+		contentElement
+	]);
+	const position = fixed ? "fixed" : "absolute";
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx("div", {
+		...wrapperProps,
+		style: {
+			position,
+			top: 0,
+			left: 0,
+			width: "max-content",
+			...wrapperProps?.style
+		},
+		ref: store?.setPopoverElement,
+		children: element
+	}), [
+		store,
+		position,
+		wrapperProps
+	]);
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(PopoverScopedContextProvider, {
+		value: store,
+		children: element
+	}), [store]);
+	props = {
+		"data-placing": !positioned || void 0,
+		...props,
+		style: {
+			position: "relative",
+			...props.style
+		}
+	};
+	props = useDialog({
+		store,
+		modal,
+		portal,
+		preserveTabOrder,
+		preserveTabOrderAnchor: disclosureElement || anchorElement,
+		autoFocusOnShow: positioned && autoFocusOnShow,
+		...props,
+		portalRef
+	});
+	return props;
+});
+/**
+* Renders a popover element that's automatically positioned relative to an
+* anchor element.
+* @see https://ariakit.com/components/popover
+* @example
+* ```jsx {3}
+* <PopoverProvider>
+*   <PopoverDisclosure>Disclosure</PopoverDisclosure>
+*   <Popover>Popover</Popover>
+* </PopoverProvider>
+* ```
+*/
+const Popover = createDialogComponent(forwardRef(function Popover(props) {
+	return createElement(TagName, usePopover(props));
+}), usePopoverProviderContext);
+//#endregion
+export { Popover, usePopover };
+
+//# sourceMappingURL=popover.js.map

package/dist/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":[],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  usePortalRef,\n  useSafeLayoutEffect,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  flip,\n  limitShift,\n  offset,\n  shift,\n  size,\n} from \"@floating-ui/dom\";\nimport type { ElementType, HTMLAttributes } from \"react\";\nimport { useRef, useState } from \"react\";\nimport type { DialogOptions } from \"../dialog/dialog.tsx\";\nimport { createDialogComponent, useDialog } from \"../dialog/dialog.tsx\";\nimport {\n  PopoverScopedContextProvider,\n  usePopoverProviderContext,\n} from \"./popover-context.tsx\";\nimport type { PopoverStore } from \"./popover-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype BasePlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\ntype Placement =\n  | BasePlacement\n  | `${BasePlacement}-start`\n  | `${BasePlacement}-end`;\n\ninterface AnchorRect {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n}\n\nfunction createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n  if (typeof DOMRect === \"function\") {\n    return new DOMRect(x, y, width, height);\n  }\n  // JSDOM doesn't support DOMRect constructor.\n  const rect = {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: x + width,\n    bottom: y + height,\n    left: x,\n  };\n  return { ...rect, toJSON: () => rect };\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n  if (!anchorRect) return createDOMRect();\n  const { x, y, width, height } = anchorRect;\n  return createDOMRect(x, y, width, height);\n}\n\nfunction getAnchorElement(\n  anchorElement: HTMLElement | null,\n  getAnchorRect?: (anchor: HTMLElement | null) => AnchorRect | null,\n) {\n  // https://floating-ui.com/docs/virtual-elements\n  const contextElement = anchorElement || undefined;\n  return {\n    contextElement,\n    getBoundingClientRect: () => {\n      const anchor = anchorElement;\n      const anchorRect = getAnchorRect?.(anchor);\n      if (anchorRect || !anchor) {\n        return getDOMRect(anchorRect);\n      }\n      return anchor.getBoundingClientRect();\n    },\n  };\n}\n\nfunction isValidPlacement(flip: string): flip is Placement {\n  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(flip);\n}\n\n// https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning\nfunction roundByDPR(value: number) {\n  const dpr = window.devicePixelRatio || 1;\n  return Math.round(value * dpr) / dpr;\n}\n\nfunction getOffsetMiddleware(\n  arrowElement: HTMLElement | null,\n  props: Pick<PopoverOptions, \"gutter\" | \"shift\">,\n) {\n  // https://floating-ui.com/docs/offset\n  return offset(({ placement }: { placement: Placement }) => {\n    const arrowOffset = (arrowElement?.clientHeight || 0) / 2;\n    const finalGutter =\n      typeof props.gutter === \"number\"\n        ? props.gutter + arrowOffset\n        : (props.gutter ?? arrowOffset);\n    // If there's no placement alignment (*-start or *-end),\n    // we'll fallback to the crossAxis offset as it also works\n    // for center-aligned placements.\n    const hasAlignment = !!placement.split(\"-\")[1];\n    return {\n      crossAxis: !hasAlignment ? props.shift : undefined,\n      mainAxis: finalGutter,\n      alignmentAxis: props.shift,\n    };\n  });\n}\n\nfunction getFlipMiddleware(\n  props: Pick<PopoverOptions, \"flip\" | \"overflowPadding\">,\n) {\n  if (props.flip === false) return;\n  const fallbackPlacements =\n    typeof props.flip === \"string\" ? props.flip.split(\" \") : undefined;\n\n  invariant(\n    !fallbackPlacements || fallbackPlacements.every(isValidPlacement),\n    process.env.NODE_ENV !== \"production\" &&\n      \"`flip` expects a spaced-delimited list of placements\",\n  );\n\n  // https://floating-ui.com/docs/flip\n  return flip({\n    padding: props.overflowPadding,\n    fallbackPlacements,\n  });\n}\n\nfunction getShiftMiddleware(\n  props: Pick<\n    PopoverOptions,\n    \"slide\" | \"shift\" | \"overlap\" | \"overflowPadding\"\n  >,\n) {\n  if (!props.slide && !props.overlap) return;\n  // https://floating-ui.com/docs/shift\n  return shift({\n    mainAxis: props.slide,\n    crossAxis: props.overlap,\n    padding: props.overflowPadding,\n    limiter: limitShift(),\n  });\n}\n\nfunction getSizeMiddleware(\n  props: Pick<PopoverOptions, \"sameWidth\" | \"fitViewport\" | \"overflowPadding\">,\n) {\n  // https://floating-ui.com/docs/size\n  return size({\n    padding: props.overflowPadding,\n    apply({ elements, availableWidth, availableHeight, rects }) {\n      const wrapper = elements.floating;\n      const referenceWidth = Math.round(rects.reference.width);\n\n      availableWidth = Math.floor(availableWidth);\n      availableHeight = Math.floor(availableHeight);\n\n      wrapper.style.setProperty(\n        \"--popover-anchor-width\",\n        `${referenceWidth}px`,\n      );\n      wrapper.style.setProperty(\n        \"--popover-available-width\",\n        `${availableWidth}px`,\n      );\n      wrapper.style.setProperty(\n        \"--popover-available-height\",\n        `${availableHeight}px`,\n      );\n\n      if (props.sameWidth) {\n        wrapper.style.width = `${referenceWidth}px`;\n      }\n\n      if (props.fitViewport) {\n        wrapper.style.maxWidth = `${availableWidth}px`;\n        wrapper.style.maxHeight = `${availableHeight}px`;\n      }\n    },\n  });\n}\n\nfunction getArrowMiddleware(\n  arrowElement: HTMLElement | null,\n  props: Pick<PopoverOptions, \"arrowPadding\">,\n) {\n  if (!arrowElement) return;\n  // https://floating-ui.com/docs/arrow\n  return arrow({\n    element: arrowElement,\n    padding: props.arrowPadding,\n  });\n}\n\n/**\n * Returns props to create a `Popover` component.\n * @see https://ariakit.com/components/popover\n * @example\n * ```jsx\n * const store = usePopoverStore();\n * const props = usePopover({ store });\n * <Role {...props}>Popover</Role>\n * ```\n */\nexport const usePopover = createHook<TagName, PopoverOptions>(\n  function usePopover({\n    store,\n    modal = false,\n    portal = modal,\n    preserveTabOrder = true,\n    autoFocusOnShow = true,\n    wrapperProps,\n    fixed = false,\n    flip = true,\n    shift = 0,\n    slide = true,\n    overlap = false,\n    sameWidth = false,\n    fitViewport = false,\n    gutter,\n    arrowPadding = 4,\n    overflowPadding = 8,\n    getAnchorRect,\n    updatePosition,\n    ...props\n  }) {\n    const context = usePopoverProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"Popover must receive a `store` prop or be wrapped in a PopoverProvider component.\",\n    );\n\n    const arrowElement = useStoreState(store, \"arrowElement\");\n    const anchorElement = useStoreState(store, \"anchorElement\");\n    const disclosureElement = useStoreState(store, \"disclosureElement\");\n    const popoverElement = useStoreState(store, \"popoverElement\");\n    const contentElement = useStoreState(store, \"contentElement\");\n    const placement = useStoreState(store, \"placement\");\n    const mounted = useStoreState(store, \"mounted\");\n    const rendered = useStoreState(store, \"rendered\");\n\n    const defaultArrowElementRef = useRef<HTMLElement | null>(null);\n\n    // We have to wait for the popover to be positioned for the first time\n    // before we can move focus, otherwise there may be scroll jumps. See\n    // popover-standalone example test-browser file.\n    const [positioned, setPositioned] = useState(false);\n\n    const { portalRef, domReady } = usePortalRef(portal, props.portalRef);\n\n    const getAnchorRectProp = useEvent(getAnchorRect);\n    const updatePositionProp = useEvent(updatePosition);\n    const hasCustomUpdatePosition = !!updatePosition;\n\n    useSafeLayoutEffect(() => {\n      if (!popoverElement?.isConnected) return;\n\n      popoverElement.style.setProperty(\n        \"--popover-overflow-padding\",\n        `${overflowPadding}px`,\n      );\n\n      const anchor = getAnchorElement(anchorElement, getAnchorRectProp);\n\n      const updatePosition = async () => {\n        if (!mounted) return;\n\n        if (!arrowElement) {\n          defaultArrowElementRef.current =\n            defaultArrowElementRef.current || document.createElement(\"div\");\n        }\n\n        const arrow = arrowElement || defaultArrowElementRef.current;\n\n        const middleware = [\n          getOffsetMiddleware(arrow, { gutter, shift }),\n          getFlipMiddleware({ flip, overflowPadding }),\n          getShiftMiddleware({ slide, shift, overlap, overflowPadding }),\n          getArrowMiddleware(arrow, { arrowPadding }),\n          getSizeMiddleware({\n            sameWidth,\n            fitViewport,\n            overflowPadding,\n          }),\n        ];\n\n        // https://floating-ui.com/docs/computePosition\n        const pos = await computePosition(anchor, popoverElement, {\n          placement,\n          strategy: fixed ? \"fixed\" : \"absolute\",\n          middleware,\n        });\n\n        store?.setState(\"currentPlacement\", pos.placement);\n        setPositioned(true);\n\n        const x = roundByDPR(pos.x);\n        const y = roundByDPR(pos.y);\n\n        // https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning\n        Object.assign(popoverElement.style, {\n          top: \"0\",\n          left: \"0\",\n          transform: `translate3d(${x}px,${y}px,0)`,\n        });\n\n        // https://floating-ui.com/docs/arrow#usage\n        if (arrow && pos.middlewareData.arrow) {\n          const { x: arrowX, y: arrowY } = pos.middlewareData.arrow;\n\n          const side = pos.placement.split(\"-\")[0] as BasePlacement;\n\n          const centerX = arrow.clientWidth / 2;\n          const centerY = arrow.clientHeight / 2;\n\n          const originX = arrowX != null ? arrowX + centerX : -centerX;\n          const originY = arrowY != null ? arrowY + centerY : -centerY;\n\n          popoverElement.style.setProperty(\n            \"--popover-transform-origin\",\n            {\n              top: `${originX}px calc(100% + ${centerY}px)`,\n              bottom: `${originX}px ${-centerY}px`,\n              left: `calc(100% + ${centerX}px) ${originY}px`,\n              right: `${-centerX}px ${originY}px`,\n            }[side],\n          );\n\n          Object.assign(arrow.style, {\n            left: arrowX != null ? `${arrowX}px` : \"\",\n            top: arrowY != null ? `${arrowY}px` : \"\",\n            [side]: \"100%\",\n          });\n        }\n      };\n\n      const update = async () => {\n        if (hasCustomUpdatePosition) {\n          await updatePositionProp({ updatePosition });\n          setPositioned(true);\n        } else {\n          await updatePosition();\n        }\n      };\n\n      // https://floating-ui.com/docs/autoUpdate\n      const cancelAutoUpdate = autoUpdate(anchor, popoverElement, update, {\n        // JSDOM doesn't support ResizeObserver\n        elementResize: typeof ResizeObserver === \"function\",\n      });\n\n      return () => {\n        setPositioned(false);\n        cancelAutoUpdate();\n      };\n    }, [\n      store,\n      rendered,\n      popoverElement,\n      arrowElement,\n      anchorElement,\n      popoverElement,\n      placement,\n      mounted,\n      domReady,\n      fixed,\n      flip,\n      shift,\n      slide,\n      overlap,\n      sameWidth,\n      fitViewport,\n      gutter,\n      arrowPadding,\n      overflowPadding,\n      getAnchorRectProp,\n      hasCustomUpdatePosition,\n      updatePositionProp,\n    ]);\n\n    // Makes sure the wrapper element that's passed to floating UI has the same\n    // z-index as the popover element so users only need to set the z-index\n    // once.\n    useSafeLayoutEffect(() => {\n      if (!mounted) return;\n      if (!domReady) return;\n      if (!popoverElement?.isConnected) return;\n      if (!contentElement?.isConnected) return;\n      const applyZIndex = () => {\n        popoverElement.style.zIndex = getComputedStyle(contentElement).zIndex;\n      };\n      applyZIndex();\n      // It's possible that the zIndex value changes after the popover is\n      // mounted, so we need to keep checking.\n      let raf = requestAnimationFrame(() => {\n        raf = requestAnimationFrame(applyZIndex);\n      });\n      return () => cancelAnimationFrame(raf);\n    }, [mounted, domReady, popoverElement, contentElement]);\n\n    const position = fixed ? \"fixed\" : \"absolute\";\n\n    // Wrap our element in a div that will be used to position the popover.\n    // This way the user doesn't need to override the popper's position to\n    // create animations.\n    props = useWrapElement(\n      props,\n      (element) => (\n        <div\n          {...wrapperProps}\n          style={{\n            // https://floating-ui.com/docs/computeposition#initial-layout\n            position,\n            top: 0,\n            left: 0,\n            width: \"max-content\",\n            ...wrapperProps?.style,\n          }}\n          ref={store?.setPopoverElement}\n        >\n          {element}\n        </div>\n      ),\n      [store, position, wrapperProps],\n    );\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <PopoverScopedContextProvider value={store}>\n          {element}\n        </PopoverScopedContextProvider>\n      ),\n      [store],\n    );\n\n    props = {\n      // data-placing is not part of the public API. We're setting this here so\n      // we can wait for the popover to be positioned before other components\n      // move focus into it. For example, this attribute is observed by the\n      // Combobox component with the autoSelect behavior.\n      \"data-placing\": !positioned || undefined,\n      ...props,\n      style: {\n        position: \"relative\",\n        ...props.style,\n      },\n    };\n\n    props = useDialog({\n      store,\n      modal,\n      portal,\n      preserveTabOrder,\n      preserveTabOrderAnchor: disclosureElement || anchorElement,\n      autoFocusOnShow: positioned && autoFocusOnShow,\n      ...props,\n      portalRef,\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a popover element that's automatically positioned relative to an\n * anchor element.\n * @see https://ariakit.com/components/popover\n * @example\n * ```jsx {3}\n * <PopoverProvider>\n *   <PopoverDisclosure>Disclosure</PopoverDisclosure>\n *   <Popover>Popover</Popover>\n * </PopoverProvider>\n * ```\n */\nexport const Popover = createDialogComponent(\n  forwardRef(function Popover(props: PopoverProps) {\n    const htmlProps = usePopover(props);\n    return createElement(TagName, htmlProps);\n  }),\n  usePopoverProviderContext,\n);\n\nexport interface PopoverOptions<\n  T extends ElementType = TagName,\n> extends DialogOptions<T> {\n  /**\n   * Object returned by the\n   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.\n   * If not provided, the closest\n   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)\n   * component's context will be used.\n   */\n  store?: PopoverStore;\n  /**\n   * Props that will be passed to the popover wrapper element. This element will\n   * be used to position the popover.\n   *\n   * Live examples:\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)\n   */\n  wrapperProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Whether the popover has `position: fixed` or not.\n   * @default false\n   */\n  fixed?: boolean;\n  /**\n   * The distance between the popover and the anchor element.\n   *\n   * Live examples:\n   * - [Combobox filtering](https://ariakit.com/examples/combobox-filtering)\n   * - [Form with Select](https://ariakit.com/examples/form-select)\n   * - [Hovercard with keyboard support](https://ariakit.com/examples/hovercard-disclosure)\n   * - [MenuItemRadio](https://ariakit.com/examples/menu-item-radio)\n   * - [Submenu](https://ariakit.com/examples/menu-nested)\n   * - [Toolbar with Select](https://ariakit.com/examples/toolbar-select)\n   * @default 0\n   */\n  gutter?: number;\n  /**\n   * The skidding of the popover along the anchor element. Can be set to\n   * negative values to make the popover shift to the opposite side.\n   *\n   * Live examples:\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   * - [Submenu](https://ariakit.com/examples/menu-nested)\n   * - [Menubar](https://ariakit.com/components/menubar)\n   * - [Select with Combobox and\n   *   Tabs](https://ariakit.com/examples/select-combobox-tab)\n   * @default 0\n   */\n  shift?: number;\n  /**\n   * Controls the behavior of the popover when it overflows the viewport:\n   * - If a `boolean`, specifies whether the popover should flip to the opposite\n   *   side when it overflows.\n   * - If a `string`, indicates the preferred fallback placements when it\n   *   overflows. The placements must be spaced-delimited, e.g. \"top left\".\n   *\n   * Live examples:\n   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)\n   * - [Menubar](https://ariakit.com/components/menubar)\n   * @default true\n   */\n  flip?: boolean | string;\n  /**\n   * Whether the popover should slide when it overflows.\n   * @default true\n   */\n  slide?: boolean;\n  /**\n   * Whether the popover can overlap the anchor element when it overflows.\n   *\n   * Live examples:\n   * - [Menubar](https://ariakit.com/components/menubar)\n   * - [Submenu with\n   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)\n   * @default false\n   */\n  overlap?: boolean;\n  /**\n   * Whether the popover should have the same width as the anchor element. This\n   * will be exposed to CSS as\n   * [`--popover-anchor-width`](https://ariakit.com/guide/styling#--popover-anchor-width).\n   * @default false\n   */\n  sameWidth?: boolean;\n  /**\n   * Whether the popover should fit the viewport. If this is set to true, the\n   * popover wrapper will have `maxWidth` and `maxHeight` set to the viewport\n   * size. This will be exposed to CSS as\n   * [`--popover-available-width`](https://ariakit.com/guide/styling#--popover-available-width)\n   * and\n   * [`--popover-available-height`](https://ariakit.com/guide/styling#--popover-available-height).\n   *\n   * Live examples:\n   * - [Textarea with inline\n   *   Combobox](https://ariakit.com/examples/combobox-textarea)\n   * - [Menubar](https://ariakit.com/components/menubar)\n   * @default false\n   */\n  fitViewport?: boolean;\n  /**\n   * The minimum padding between the arrow and the popover corner.\n   * @default 4\n   */\n  arrowPadding?: number;\n  /**\n   * The minimum padding between the popover and the viewport edge. This will be\n   * exposed to CSS as\n   * [`--popover-overflow-padding`](https://ariakit.com/guide/styling#--popover-overflow-padding).\n   *\n   * Live examples:\n   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)\n   * @default 8\n   */\n  overflowPadding?: number;\n  /**\n   * Function that returns the anchor element's DOMRect. If this is explicitly\n   * passed, it will override the anchor `getBoundingClientRect` method.\n   *\n   * Live examples:\n   *  - [Textarea with inline combobox](https://ariakit.com/examples/combobox-textarea)\n   *  - [Standalone Popover](https://ariakit.com/examples/popover-standalone)\n   *  - [Context menu](https://ariakit.com/examples/menu-context-menu)\n   *  - [Selection Popover](https://ariakit.com/examples/popover-selection)\n   */\n  getAnchorRect?: (anchor: HTMLElement | null) => AnchorRect | null;\n  /**\n   * A callback that will be called when the popover needs to calculate its\n   * position. This will override the internal `updatePosition` function. The\n   * original `updatePosition` function will be passed as an argument, so it can\n   * be called inside the callback to apply the default behavior.\n   *\n   * Live examples:\n   *  - [Responsive Popover](https://ariakit.com/examples/popover-responsive)\n   */\n  updatePosition?: (props: {\n    updatePosition: () => Promise<void>;\n  }) => void | Promise<void>;\n}\n\nexport type PopoverProps<T extends ElementType = TagName> = Props<\n  T,\n  PopoverOptions<T>\n>;\n"],"mappings":"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"}

package/dist/popover-CCqiRKqg.d.ts

@@ -0,0 +1,181 @@
+import { t as PopoverStore } from "./popover-store-Bc-l5VVO.js";
+import { n as DialogOptions } from "./dialog-C__C-zX2.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType, HTMLAttributes } from "react";
+
+//#region src/popover/popover.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+interface AnchorRect {
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+}
+/**
+ * Returns props to create a `Popover` component.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * const store = usePopoverStore();
+ * const props = usePopover({ store });
+ * <Role {...props}>Popover</Role>
+ * ```
+ */
+declare const usePopover: import("@ariakit/react-utils").Hook<"div", PopoverOptions<"div">>;
+/**
+ * Renders a popover element that's automatically positioned relative to an
+ * anchor element.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {3}
+ * <PopoverProvider>
+ *   <PopoverDisclosure>Disclosure</PopoverDisclosure>
+ *   <Popover>Popover</Popover>
+ * </PopoverProvider>
+ * ```
+ */
+declare const Popover: (props: PopoverProps<"div">) => import("react/jsx-runtime").JSX.Element | null;
+interface PopoverOptions<T extends ElementType = TagName> extends DialogOptions<T> {
+  /**
+   * Object returned by the
+   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.
+   * If not provided, the closest
+   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)
+   * component's context will be used.
+   */
+  store?: PopoverStore;
+  /**
+   * Props that will be passed to the popover wrapper element. This element will
+   * be used to position the popover.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)
+   */
+  wrapperProps?: HTMLAttributes<HTMLDivElement>;
+  /**
+   * Whether the popover has `position: fixed` or not.
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * The distance between the popover and the anchor element.
+   *
+   * Live examples:
+   * - [Combobox filtering](https://ariakit.com/examples/combobox-filtering)
+   * - [Form with Select](https://ariakit.com/examples/form-select)
+   * - [Hovercard with keyboard support](https://ariakit.com/examples/hovercard-disclosure)
+   * - [MenuItemRadio](https://ariakit.com/examples/menu-item-radio)
+   * - [Submenu](https://ariakit.com/examples/menu-nested)
+   * - [Toolbar with Select](https://ariakit.com/examples/toolbar-select)
+   * @default 0
+   */
+  gutter?: number;
+  /**
+   * The skidding of the popover along the anchor element. Can be set to
+   * negative values to make the popover shift to the opposite side.
+   *
+   * Live examples:
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * - [Submenu](https://ariakit.com/examples/menu-nested)
+   * - [Menubar](https://ariakit.com/components/menubar)
+   * - [Select with Combobox and
+   *   Tabs](https://ariakit.com/examples/select-combobox-tab)
+   * @default 0
+   */
+  shift?: number;
+  /**
+   * Controls the behavior of the popover when it overflows the viewport:
+   * - If a `boolean`, specifies whether the popover should flip to the opposite
+   *   side when it overflows.
+   * - If a `string`, indicates the preferred fallback placements when it
+   *   overflows. The placements must be spaced-delimited, e.g. "top left".
+   *
+   * Live examples:
+   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)
+   * - [Menubar](https://ariakit.com/components/menubar)
+   * @default true
+   */
+  flip?: boolean | string;
+  /**
+   * Whether the popover should slide when it overflows.
+   * @default true
+   */
+  slide?: boolean;
+  /**
+   * Whether the popover can overlap the anchor element when it overflows.
+   *
+   * Live examples:
+   * - [Menubar](https://ariakit.com/components/menubar)
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   * @default false
+   */
+  overlap?: boolean;
+  /**
+   * Whether the popover should have the same width as the anchor element. This
+   * will be exposed to CSS as
+   * [`--popover-anchor-width`](https://ariakit.com/guide/styling#--popover-anchor-width).
+   * @default false
+   */
+  sameWidth?: boolean;
+  /**
+   * Whether the popover should fit the viewport. If this is set to true, the
+   * popover wrapper will have `maxWidth` and `maxHeight` set to the viewport
+   * size. This will be exposed to CSS as
+   * [`--popover-available-width`](https://ariakit.com/guide/styling#--popover-available-width)
+   * and
+   * [`--popover-available-height`](https://ariakit.com/guide/styling#--popover-available-height).
+   *
+   * Live examples:
+   * - [Textarea with inline
+   *   Combobox](https://ariakit.com/examples/combobox-textarea)
+   * - [Menubar](https://ariakit.com/components/menubar)
+   * @default false
+   */
+  fitViewport?: boolean;
+  /**
+   * The minimum padding between the arrow and the popover corner.
+   * @default 4
+   */
+  arrowPadding?: number;
+  /**
+   * The minimum padding between the popover and the viewport edge. This will be
+   * exposed to CSS as
+   * [`--popover-overflow-padding`](https://ariakit.com/guide/styling#--popover-overflow-padding).
+   *
+   * Live examples:
+   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)
+   * @default 8
+   */
+  overflowPadding?: number;
+  /**
+   * Function that returns the anchor element's DOMRect. If this is explicitly
+   * passed, it will override the anchor `getBoundingClientRect` method.
+   *
+   * Live examples:
+   *  - [Textarea with inline combobox](https://ariakit.com/examples/combobox-textarea)
+   *  - [Standalone Popover](https://ariakit.com/examples/popover-standalone)
+   *  - [Context menu](https://ariakit.com/examples/menu-context-menu)
+   *  - [Selection Popover](https://ariakit.com/examples/popover-selection)
+   */
+  getAnchorRect?: (anchor: HTMLElement | null) => AnchorRect | null;
+  /**
+   * A callback that will be called when the popover needs to calculate its
+   * position. This will override the internal `updatePosition` function. The
+   * original `updatePosition` function will be passed as an argument, so it can
+   * be called inside the callback to apply the default behavior.
+   *
+   * Live examples:
+   *  - [Responsive Popover](https://ariakit.com/examples/popover-responsive)
+   */
+  updatePosition?: (props: {
+    updatePosition: () => Promise<void>;
+  }) => void | Promise<void>;
+}
+type PopoverProps<T extends ElementType = TagName> = Props<T, PopoverOptions<T>>;
+//#endregion
+export { usePopover as i, PopoverOptions as n, PopoverProps as r, Popover as t };
+//# sourceMappingURL=popover-CCqiRKqg.d.ts.map

package/dist/popover-CCqiRKqg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-CCqiRKqg.d.ts","names":["Props","ElementType","HTMLAttributes","DialogOptions","PopoverStore","TagName","AnchorRect","x","y","width","height","usePopover","PopoverOptions","Hook","Popover","PopoverProps","props","JSX","Element","T","HTMLDivElement","HTMLElement","Promise","store","wrapperProps","fixed","gutter","shift","flip","slide","overlap","sameWidth","fitViewport","arrowPadding","overflowPadding","getAnchorRect","anchor","updatePosition"],"sources":["../src/popover/popover.d.ts"],"mappings":";;;;;;cAIcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAAA,UACnBC,UAAAA;EACNC,CAAAA;EACAC,CAAAA;EACAC,KAAAA;EACAC,MAAAA;AAAAA;;;;AALyB;AAAA;;;;;;cAiBRC,UAAAA,iCAA2CE,IAAAA,QAAYD,cAAc;;;AAZhF;AAYV;;;;AAA0F;AAa1F;;;;cAAqBE,OAAAA,GAAUE,KAAAA,EAAOD,YAAY,wCAAwCE,GAAAA,CAAIC,OAAAA;AAAAA,UAC7EN,cAAAA,WAAyBX,WAAAA,GAAcI,OAAAA,UAAiBF,aAAAA,CAAcgB,CAAAA;EADGF;;;AAAW;AACrG;;;EAQIM,KAAAA,GAAQnB,YAAAA;EAR4CC;;;;;;;;EAiBpDmB,YAAAA,GAAetB,cAAAA,CAAekB,cAAAA;EAjBuCjB;;;;EAsBrEsB,KAAAA;EAtBoDpB;;;;;;;;;;;;EAmCpDqB,MAAAA;EA0CAI;;;;;;;;;;;;;EA5BAH,KAAAA;EAwFoB;AAAA;AAExB;;;;;;;;;;EA7EIC,IAAAA;EA6EqBT;;;;EAxErBU,KAAAA;EAwEiEjB;;;AAAgB;;;;;;EA9DjFkB,OAAAA;;;;;;;EAOAC,SAAAA;;;;;;;;;;;;;;;EAeAC,WAAAA;;;;;EAKAC,YAAAA;;;;;;;;;;EAUAC,eAAAA;;;;;;;;;;;EAWAC,aAAAA,IAAiBC,MAAAA,EAAQf,WAAAA,YAAuBf,UAAAA;;;;;;;;;;EAUhD+B,cAAAA,IAAkBrB,KAAAA;IACdqB,cAAAA,QAAsBf,OAAAA;EAAAA,aACbA,OAAAA;AAAAA;AAAAA,KAELP,YAAAA,WAAuBd,WAAAA,GAAcI,OAAAA,IAAWL,KAAAA,CAAMmB,CAAAA,EAAGP,cAAAA,CAAeO,CAAAA"}

package/dist/popover-anchor-PgfeXyzs.d.ts

@@ -0,0 +1,47 @@
+import { t as PopoverStore } from "./popover-store-Bc-l5VVO.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/popover/popover-anchor.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `PopoverAnchor` component.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * const store = usePopoverStore();
+ * const props = usePopoverAnchor({ store });
+ * <Role {...props}>Anchor</Role>
+ * <Popover store={store}>Popover</Popover>
+ * ```
+ */
+declare const usePopoverAnchor: import("@ariakit/react-utils").Hook<"div", PopoverAnchorOptions<"div">>;
+/**
+ * Renders an element that acts as the anchor for the popover. The
+ * [`Popover`](https://ariakit.com/reference/popover) component will be
+ * positioned in relation to this element.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {2}
+ * <PopoverProvider>
+ *   <PopoverAnchor>Anchor</PopoverAnchor>
+ *   <Popover>Popover</Popover>
+ * </PopoverProvider>
+ * ```
+ */
+declare const PopoverAnchor: (props: PopoverAnchorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface PopoverAnchorOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.
+   * If not provided, the closest
+   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)
+   * component's context will be used.
+   */
+  store?: PopoverStore;
+}
+type PopoverAnchorProps<T extends ElementType = TagName> = Props<T, PopoverAnchorOptions<T>>;
+//#endregion
+export { usePopoverAnchor as i, PopoverAnchorOptions as n, PopoverAnchorProps as r, PopoverAnchor as t };
+//# sourceMappingURL=popover-anchor-PgfeXyzs.d.ts.map

package/dist/popover-anchor-PgfeXyzs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-anchor-PgfeXyzs.d.ts","names":["Options","Props","ElementType","PopoverStore","TagName","usePopoverAnchor","PopoverAnchorOptions","Hook","PopoverAnchor","PopoverAnchorProps","props","ReactElement","JSXElementConstructor","_T","store","T"],"sources":["../src/popover/popover-anchor.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAY7B;AAduD,cAclCC,gBAAAA,iCAAiDE,IAAAA,QAAYD,oBAAoB;;;AAAA;AActG;;;;;;;;;AAAmJ;cAA9HE,aAAAA,GAAgBE,KAAAA,EAAOD,kBAAkB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC7GN,oBAAAA,YAAgCJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAA3Ca;;;;;;;EAQjCC,KAAAA,GAAQX,YAAAA;AAAAA;AAAAA,KAEAM,kBAAAA,WAA6BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMc,CAAAA,EAAGT,oBAAAA,CAAqBS,CAAAA"}

package/dist/popover-description-DU753dah.d.ts

@@ -0,0 +1,51 @@
+import { t as PopoverStore } from "./popover-store-Bc-l5VVO.js";
+import { n as DialogDescriptionOptions } from "./dialog-description-BCZJ1Kyd.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/popover/popover-description.d.ts
+declare const TagName = "p";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `PopoverDescription` component. This hook must be
+ * used in a component that's wrapped with `Popover` so the `aria-describedby`
+ * prop is properly set on the popover element.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Popover
+ * const props = usePopoverDescription();
+ * <Role {...props}>Description</Role>
+ * ```
+ */
+declare const usePopoverDescription: import("@ariakit/react-utils").Hook<"p", PopoverDescriptionOptions<"p">>;
+/**
+ * Renders a description in a popover. This component must be wrapped with
+ * [`Popover`](https://ariakit.com/reference/popover) so the `aria-describedby`
+ * prop is properly set on the popover element.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {3}
+ * <PopoverProvider>
+ *   <Popover>
+ *     <PopoverDescription>Description</PopoverDescription>
+ *   </Popover>
+ * </PopoverProvider>
+ * ```
+ */
+declare const PopoverDescription: (props: PopoverDescriptionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface PopoverDescriptionOptions<T extends ElementType = TagName> extends DialogDescriptionOptions<T> {
+  /**
+   * Object returned by the
+   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.
+   * If not provided, the closest
+   * [`Popover`](https://ariakit.com/reference/popover) or
+   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)
+   * components' context will be used.
+   */
+  store?: PopoverStore;
+}
+type PopoverDescriptionProps<T extends ElementType = TagName> = Props<T, PopoverDescriptionOptions<T>>;
+//#endregion
+export { usePopoverDescription as i, PopoverDescriptionOptions as n, PopoverDescriptionProps as r, PopoverDescription as t };
+//# sourceMappingURL=popover-description-DU753dah.d.ts.map

package/dist/popover-description-DU753dah.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-description-DU753dah.d.ts","names":["Props","ElementType","DialogDescriptionOptions","PopoverStore","TagName","usePopoverDescription","PopoverDescriptionOptions","Hook","PopoverDescription","PopoverDescriptionProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../src/popover/popover-description.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAa7B;;AAfuD,cAelCC,qBAAAA,iCAAsDE,IAAAA,MAAUD,yBAAyB;;AAAA;AAe9G;;;;;;;;;AAA6J;AAC7J;;cADqBE,kBAAAA,GAAqBE,KAAAA,EAAOD,uBAAuB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvHN,yBAAAA,WAAoCL,WAAAA,GAAcG,OAAAA,UAAiBF,wBAAAA,CAAyBW,CAAAA;EAA1CT;;;;;;;;EAS/DU,KAAAA,GAAQX,YAAAA;AAAAA;AAAAA,KAEAM,uBAAAA,WAAkCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,yBAAAA,CAA0BO,CAAAA"}