@pitchfork-ui/react 0.2.0 → 0.7.0

package/dist/index.cjs

@@ -59,6 +59,267 @@ var getFocusableElements = (container) => {
 	});
 };
 //#endregion
+//#region src/hooks/useAnchoredPosition.ts
+function useAnchoredPosition({ anchorRef, floatingRef, enabled = true, align = "start", offset = 8, viewportPadding = 8, minWidth, matchAnchorWidth = true, flip = false }) {
+	const [style, setStyle] = (0, react.useState)({});
+	(0, react.useEffect)(() => {
+		if (!enabled || typeof window === "undefined") return;
+		const updatePosition = () => {
+			const anchor = anchorRef.current;
+			if (!anchor) return;
+			const anchorRect = anchor.getBoundingClientRect();
+			const floatingRect = floatingRef?.current?.getBoundingClientRect();
+			const width = Math.max(matchAnchorWidth ? anchorRect.width : 0, minWidth ?? 0, floatingRect?.width ?? 0);
+			const maxLeft = window.innerWidth - viewportPadding - width;
+			const alignedLeft = align === "end" ? anchorRect.right - width : anchorRect.left;
+			const left = maxLeft >= viewportPadding ? Math.min(Math.max(alignedLeft, viewportPadding), maxLeft) : viewportPadding;
+			const floatingHeight = floatingRect?.height ?? 0;
+			const belowTop = anchorRect.bottom + offset;
+			const aboveTop = anchorRect.top - floatingHeight - offset;
+			const rawTop = flip && floatingHeight > 0 && window.innerHeight - anchorRect.bottom < floatingHeight + offset + viewportPadding ? aboveTop : belowTop;
+			const maxTop = window.innerHeight - viewportPadding - floatingHeight;
+			setStyle({
+				left,
+				top: floatingHeight > 0 && maxTop >= viewportPadding ? Math.min(Math.max(rawTop, viewportPadding), maxTop) : rawTop,
+				width: matchAnchorWidth ? width : void 0,
+				minWidth: matchAnchorWidth ? void 0 : width
+			});
+		};
+		updatePosition();
+		window.addEventListener("resize", updatePosition);
+		window.addEventListener("scroll", updatePosition, true);
+		return () => {
+			window.removeEventListener("resize", updatePosition);
+			window.removeEventListener("scroll", updatePosition, true);
+		};
+	}, [
+		align,
+		anchorRef,
+		enabled,
+		floatingRef,
+		flip,
+		matchAnchorWidth,
+		minWidth,
+		offset,
+		viewportPadding
+	]);
+	return style;
+}
+//#endregion
+//#region src/hooks/useComposedRefs.ts
+function useComposedRefs(...refs) {
+	return (node) => {
+		refs.forEach((ref) => {
+			if (!ref) return;
+			if (typeof ref === "function") {
+				ref(node);
+				return;
+			}
+			ref.current = node;
+		});
+	};
+}
+//#endregion
+//#region src/hooks/useControllableState.ts
+function useControllableState({ value, defaultValue, onChange }) {
+	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue);
+	const isControlled = value !== void 0;
+	const currentValue = isControlled ? value : internalValue;
+	return [
+		currentValue,
+		(0, react.useCallback)((nextValue) => {
+			const resolvedValue = typeof nextValue === "function" ? nextValue(currentValue) : nextValue;
+			if (!isControlled) setInternalValue(resolvedValue);
+			onChange?.(resolvedValue);
+		}, [
+			currentValue,
+			isControlled,
+			onChange
+		]),
+		isControlled
+	];
+}
+//#endregion
+//#region src/hooks/useDisclosure.ts
+function useDisclosure({ open, defaultOpen = false, onOpenChange, disabled = false } = {}) {
+	const [isOpen, setIsOpen] = useControllableState({
+		value: open,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	return {
+		isOpen,
+		setIsOpen,
+		open: (0, react.useCallback)(() => {
+			if (!disabled) setIsOpen(true);
+		}, [disabled, setIsOpen]),
+		close: (0, react.useCallback)(() => {
+			setIsOpen(false);
+		}, [setIsOpen]),
+		toggle: (0, react.useCallback)(() => {
+			if (!disabled) setIsOpen((current) => !current);
+		}, [disabled, setIsOpen])
+	};
+}
+//#endregion
+//#region src/hooks/useExitAnimation.ts
+var prefersReducedMotion$1 = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/**
+* Plays an exit animation before signalling removal. Apply `isExiting` to a CSS
+* class that runs the exit keyframes; `onExited` fires after `duration`. When the
+* user prefers reduced motion, `onExited` fires immediately with no animation.
+*/
+function useExitAnimation({ onExited, duration = 220 } = {}) {
+	const [isExiting, setIsExiting] = (0, react.useState)(false);
+	const startExit = () => {
+		if (prefersReducedMotion$1()) {
+			onExited?.();
+			return;
+		}
+		setIsExiting(true);
+		window.setTimeout(() => onExited?.(), duration);
+	};
+	return {
+		isExiting,
+		startExit
+	};
+}
+//#endregion
+//#region src/hooks/useFocusTrap.ts
+function useFocusTrap({ containerRef, enabled = true, onEscape, restoreFocus = true }) {
+	(0, react.useEffect)(() => {
+		if (!enabled || typeof document === "undefined") return;
+		const container = containerRef.current;
+		const previousActiveElement = document.activeElement;
+		const initialFocusable = container ? getFocusableElements(container)[0] : void 0;
+		if (initialFocusable) initialFocusable.focus();
+		else container?.focus();
+		const onKeyDown = (event) => {
+			if (event.key === Keys.Escape) {
+				onEscape?.();
+				return;
+			}
+			if (event.key !== Keys.Tab || !containerRef.current) return;
+			const focusableElements = getFocusableElements(containerRef.current);
+			if (focusableElements.length === 0) {
+				event.preventDefault();
+				containerRef.current.focus();
+				return;
+			}
+			const firstElement = focusableElements[0];
+			const lastElement = focusableElements[focusableElements.length - 1];
+			const activeElement = document.activeElement;
+			if (!(activeElement ? containerRef.current.contains(activeElement) : false)) {
+				event.preventDefault();
+				(event.shiftKey ? lastElement : firstElement).focus();
+				return;
+			}
+			if (event.shiftKey && activeElement === firstElement) {
+				event.preventDefault();
+				lastElement.focus();
+				return;
+			}
+			if (!event.shiftKey && activeElement === lastElement) {
+				event.preventDefault();
+				firstElement.focus();
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown);
+			if (restoreFocus) previousActiveElement?.focus?.();
+		};
+	}, [
+		containerRef,
+		enabled,
+		onEscape,
+		restoreFocus
+	]);
+}
+//#endregion
+//#region src/hooks/useListNavigation.ts
+function useListNavigation({ items, isDisabled = () => false, initialIndex }) {
+	const enabledIndexes = (0, react.useMemo)(() => items.map((item, index) => ({
+		item,
+		index
+	})).filter(({ item, index }) => !isDisabled(item, index)).map(({ index }) => index), [isDisabled, items]);
+	const firstEnabledIndex = enabledIndexes[0] ?? -1;
+	const lastEnabledIndex = enabledIndexes[enabledIndexes.length - 1] ?? -1;
+	const [activeIndex, setActiveIndex] = (0, react.useState)(initialIndex ?? firstEnabledIndex);
+	const getNextEnabledIndex = (0, react.useCallback)((startIndex, direction) => {
+		if (enabledIndexes.length === 0) return -1;
+		const currentEnabledPosition = enabledIndexes.indexOf(startIndex);
+		return enabledIndexes[((currentEnabledPosition === -1 ? direction === 1 ? -1 : 0 : currentEnabledPosition) + direction + enabledIndexes.length) % enabledIndexes.length] ?? -1;
+	}, [enabledIndexes]);
+	return {
+		activeIndex,
+		enabledIndexes,
+		firstEnabledIndex,
+		lastEnabledIndex,
+		getNextEnabledIndex,
+		move: (0, react.useCallback)((action, currentIndex = activeIndex) => {
+			const nextIndex = action === "first" ? firstEnabledIndex : action === "last" ? lastEnabledIndex : getNextEnabledIndex(currentIndex, action === "next" ? 1 : -1);
+			if (nextIndex >= 0) setActiveIndex(nextIndex);
+			return nextIndex;
+		}, [
+			activeIndex,
+			firstEnabledIndex,
+			getNextEnabledIndex,
+			lastEnabledIndex
+		]),
+		setActiveIndex
+	};
+}
+//#endregion
+//#region src/hooks/useOutsideInteraction.ts
+function useOutsideInteraction({ refs, enabled = true, onInteractOutside, eventName = "pointerdown" }) {
+	(0, react.useEffect)(() => {
+		if (!enabled || typeof document === "undefined") return;
+		const handleEvent = (event) => {
+			const target = event.target;
+			if (!refs.some((ref) => ref.current?.contains(target))) onInteractOutside(event);
+		};
+		document.addEventListener(eventName, handleEvent);
+		return () => {
+			document.removeEventListener(eventName, handleEvent);
+		};
+	}, [
+		enabled,
+		eventName,
+		onInteractOutside,
+		refs
+	]);
+}
+//#endregion
+//#region src/hooks/usePresence.ts
+var prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/**
+* Keeps a conditionally-rendered element mounted long enough to play an exit
+* animation. Drive it with the `present` prop (e.g. a Modal's `open`): when it
+* flips to false, the element stays mounted with `isExiting` true for `duration`
+* ms, then unmounts. Reduced motion unmounts immediately.
+*/
+function usePresence(present, duration = 200) {
+	const [isExiting, setIsExiting] = (0, react.useState)(false);
+	const wasPresent = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (present) {
+			wasPresent.current = true;
+			return;
+		}
+		if (!wasPresent.current || prefersReducedMotion()) return;
+		wasPresent.current = false;
+		setIsExiting(true);
+		const timer = window.setTimeout(() => setIsExiting(false), duration);
+		return () => window.clearTimeout(timer);
+	}, [present, duration]);
+	const exiting = !present && isExiting;
+	return {
+		isMounted: present || exiting,
+		isExiting: exiting
+	};
+}
+//#endregion
 //#region src/utils/cx.ts
 function cx(...classes) {
 	return classes.filter(Boolean).join(" ");
@@ -240,28 +501,117 @@ function Icon({ name, label, className, style, ...props }) {
 }
 Icon.displayName = "Icon";
 //#endregion
-//#region src/components/Alert/Alert.tsx
-var variantIcon$1 = {
-	info: "circle-info",
-	success: "circle-check",
-	warning: "triangle-exclamation",
-	danger: "circle-xmark"
-};
-var variantRole = {
-	info: "status",
-	success: "status",
-	warning: "alert",
-	danger: "alert"
-};
-var Alert = (0, react.forwardRef)(({ className, variant = "info", heading, description, dismissible = false, onDismiss, icon, children, ...props }, ref) => {
-	const resolvedIcon = icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-		name: variantIcon$1[variant],
-		"aria-hidden": true
+//#region src/components/Accordion/Accordion.tsx
+var Accordion = (0, react.forwardRef)(function Accordion({ className, items, type = "single", value, defaultValue, onValueChange, headingLevel = 3, ...props }, ref) {
+	const baseId = (0, react.useId)();
+	const [expanded = [], setExpanded] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange: onValueChange
 	});
-	const body = children ?? description;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	const triggerRefs = (0, react.useRef)([]);
+	const toggle = (itemValue) => {
+		const isOpen = expanded.includes(itemValue);
+		if (type === "single") setExpanded(isOpen ? [] : [itemValue]);
+		else setExpanded(isOpen ? expanded.filter((v) => v !== itemValue) : [...expanded, itemValue]);
+	};
+	const enabledIndexes = items.map((item, index) => ({
+		item,
+		index
+	})).filter(({ item }) => !item.disabled).map(({ index }) => index);
+	const onTriggerKeyDown = (event, index) => {
+		if (enabledIndexes.length === 0) return;
+		const position = enabledIndexes.indexOf(index);
+		let target;
+		if (event.key === Keys.ArrowDown) target = enabledIndexes[(position + 1) % enabledIndexes.length];
+		else if (event.key === Keys.ArrowUp) target = enabledIndexes[(position - 1 + enabledIndexes.length) % enabledIndexes.length];
+		else if (event.key === Keys.Home) target = enabledIndexes[0];
+		else if (event.key === Keys.End) target = enabledIndexes[enabledIndexes.length - 1];
+		if (target !== void 0) {
+			event.preventDefault();
+			triggerRefs.current[target]?.focus();
+		}
+	};
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
-		className: cx("pf-alert", `pf-alert--${variant}`, className),
+		className: cx("pf-accordion", className),
+		...props,
+		children: items.map((item, index) => {
+			const isOpen = expanded.includes(item.value);
+			const triggerId = `${baseId}-trigger-${item.value}`;
+			const panelId = `${baseId}-panel-${item.value}`;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cx("pf-accordion__item", isOpen && "pf-accordion__item--open"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+					className: "pf-accordion__heading",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						ref: (element) => {
+							triggerRefs.current[index] = element;
+						},
+						type: "button",
+						id: triggerId,
+						className: "pf-accordion__trigger",
+						"aria-expanded": isOpen,
+						"aria-controls": panelId,
+						disabled: item.disabled,
+						onClick: () => toggle(item.value),
+						onKeyDown: (event) => onTriggerKeyDown(event, index),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pf-accordion__title",
+							children: item.title
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pf-accordion__icon",
+							"aria-hidden": true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+								name: "chevron-down",
+								"aria-hidden": true
+							})
+						})]
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: cx("pf-accordion__panel", isOpen && "pf-accordion__panel--open"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						id: panelId,
+						role: "region",
+						"aria-labelledby": triggerId,
+						className: "pf-accordion__content",
+						...isOpen ? {} : { inert: true },
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "pf-accordion__content-inner",
+							children: item.content
+						})
+					})
+				})]
+			}, item.value);
+		})
+	});
+});
+Accordion.displayName = "Accordion";
+//#endregion
+//#region src/components/Alert/Alert.tsx
+var variantIcon$1 = {
+	info: "circle-info",
+	success: "circle-check",
+	warning: "triangle-exclamation",
+	danger: "circle-xmark"
+};
+var variantRole = {
+	info: "status",
+	success: "status",
+	warning: "alert",
+	danger: "alert"
+};
+var Alert = (0, react.forwardRef)(({ className, variant = "info", heading, description, dismissible = false, onDismiss, icon, children, ...props }, ref) => {
+	const resolvedIcon = icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+		name: variantIcon$1[variant],
+		"aria-hidden": true
+	});
+	const body = children ?? description;
+	const { isExiting, startExit } = useExitAnimation({ onExited: onDismiss });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: cx("pf-alert", `pf-alert--${variant}`, isExiting && "pf-alert--exiting", className),
 		role: variantRole[variant],
 		...props,
 		children: [
@@ -284,7 +634,7 @@ var Alert = (0, react.forwardRef)(({ className, variant = "info", heading, descr
 				type: "button",
 				className: "pf-alert__dismiss",
 				"aria-label": "Dismiss alert",
-				onClick: () => onDismiss?.(),
+				onClick: startExit,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 					name: "circle-xmark",
 					"aria-hidden": true
@@ -547,325 +897,116 @@ function Card({ className, ref, ...props }) {
 		ref,
 		className: cx("pf-card", className),
 		...props
-	});
-}
-Card.displayName = "Card";
-function CardHeader({ className, ref, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref,
-		className: cx("pf-card__header", className),
-		...props
-	});
-}
-CardHeader.displayName = "CardHeader";
-function CardContent({ className, ref, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref,
-		className: cx("pf-card__content", className),
-		...props
-	});
-}
-CardContent.displayName = "CardContent";
-function CardFooter({ className, ref, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref,
-		className: cx("pf-card__footer", className),
-		...props
-	});
-}
-CardFooter.displayName = "CardFooter";
-//#endregion
-//#region src/components/CreditCard/CreditCard.tsx
-var maskCardNumber = (value) => {
-	const digits = value.replace(/\D+/g, "");
-	if (digits.length <= 4) return digits;
-	const visible = digits.slice(-4);
-	const hiddenLength = digits.length - 4;
-	return `${"*".repeat(hiddenLength)}${visible}`.replace(/(.{4})/g, "$1 ").trim();
-};
-var formatCardNumber = (value) => {
-	return value.replace(/\D+/g, "").replace(/(.{4})/g, "$1 ").trim();
-};
-var CreditCard = (0, react.forwardRef)(({ brand = "generic", cardNumber, cardholderName, expiry, cvc, masked = true, className, ...props }, ref) => {
-	const displayNumber = masked ? maskCardNumber(cardNumber) : formatCardNumber(cardNumber);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		ref,
-		className: cx("pf-credit-card", `is-${brand}`, className),
-		...props,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "top-row",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "chip",
-					"aria-hidden": true
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "brand",
-					children: brand.toUpperCase()
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "number",
-				children: displayNumber
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "meta",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "label",
-						children: "Card holder"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "value",
-						children: cardholderName
-					})] }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "label",
-						children: "Expires"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "value",
-						children: expiry
-					})] }),
-					cvc ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "label",
-						children: "CVC"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "value",
-						children: masked ? "***" : cvc
-					})] }) : null
-				]
-			})
-		]
-	});
-});
-CreditCard.displayName = "CreditCard";
-//#endregion
-//#region src/components/Checkbox/Checkbox.tsx
-var Checkbox = (0, react.forwardRef)(({ id, label, className, ...props }, ref) => {
-	const generatedId = (0, react.useId)();
-	const checkboxId = id ?? generatedId;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "pf-checkbox-field",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-			ref,
-			id: checkboxId,
-			type: "checkbox",
-			className: cx("pf-checkbox", className),
-			...props
-		}), label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-			htmlFor: checkboxId,
-			children: label
-		}) : null]
-	});
-});
-Checkbox.displayName = "Checkbox";
-//#endregion
-//#region src/hooks/useAnchoredPosition.ts
-function useAnchoredPosition({ anchorRef, floatingRef, enabled = true, align = "start", offset = 8, viewportPadding = 8, minWidth, matchAnchorWidth = true, flip = false }) {
-	const [style, setStyle] = (0, react.useState)({});
-	(0, react.useEffect)(() => {
-		if (!enabled || typeof window === "undefined") return;
-		const updatePosition = () => {
-			const anchor = anchorRef.current;
-			if (!anchor) return;
-			const anchorRect = anchor.getBoundingClientRect();
-			const floatingRect = floatingRef?.current?.getBoundingClientRect();
-			const width = Math.max(matchAnchorWidth ? anchorRect.width : 0, minWidth ?? 0, floatingRect?.width ?? 0);
-			const maxLeft = window.innerWidth - viewportPadding - width;
-			const alignedLeft = align === "end" ? anchorRect.right - width : anchorRect.left;
-			const left = maxLeft >= viewportPadding ? Math.min(Math.max(alignedLeft, viewportPadding), maxLeft) : viewportPadding;
-			const floatingHeight = floatingRect?.height ?? 0;
-			const belowTop = anchorRect.bottom + offset;
-			const aboveTop = anchorRect.top - floatingHeight - offset;
-			const rawTop = flip && floatingHeight > 0 && window.innerHeight - anchorRect.bottom < floatingHeight + offset + viewportPadding ? aboveTop : belowTop;
-			const maxTop = window.innerHeight - viewportPadding - floatingHeight;
-			setStyle({
-				left,
-				top: floatingHeight > 0 && maxTop >= viewportPadding ? Math.min(Math.max(rawTop, viewportPadding), maxTop) : rawTop,
-				width: matchAnchorWidth ? width : void 0,
-				minWidth: matchAnchorWidth ? void 0 : width
-			});
-		};
-		updatePosition();
-		window.addEventListener("resize", updatePosition);
-		window.addEventListener("scroll", updatePosition, true);
-		return () => {
-			window.removeEventListener("resize", updatePosition);
-			window.removeEventListener("scroll", updatePosition, true);
-		};
-	}, [
-		align,
-		anchorRef,
-		enabled,
-		floatingRef,
-		flip,
-		matchAnchorWidth,
-		minWidth,
-		offset,
-		viewportPadding
-	]);
-	return style;
-}
-//#endregion
-//#region src/hooks/useComposedRefs.ts
-function useComposedRefs(...refs) {
-	return (node) => {
-		refs.forEach((ref) => {
-			if (!ref) return;
-			if (typeof ref === "function") {
-				ref(node);
-				return;
-			}
-			ref.current = node;
-		});
-	};
-}
-//#endregion
-//#region src/hooks/useControllableState.ts
-function useControllableState({ value, defaultValue, onChange }) {
-	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue);
-	const isControlled = value !== void 0;
-	const currentValue = isControlled ? value : internalValue;
-	return [
-		currentValue,
-		(0, react.useCallback)((nextValue) => {
-			const resolvedValue = typeof nextValue === "function" ? nextValue(currentValue) : nextValue;
-			if (!isControlled) setInternalValue(resolvedValue);
-			onChange?.(resolvedValue);
-		}, [
-			currentValue,
-			isControlled,
-			onChange
-		]),
-		isControlled
-	];
-}
-//#endregion
-//#region src/hooks/useDisclosure.ts
-function useDisclosure({ open, defaultOpen = false, onOpenChange, disabled = false } = {}) {
-	const [isOpen, setIsOpen] = useControllableState({
-		value: open,
-		defaultValue: defaultOpen,
-		onChange: onOpenChange
-	});
-	return {
-		isOpen,
-		setIsOpen,
-		open: (0, react.useCallback)(() => {
-			if (!disabled) setIsOpen(true);
-		}, [disabled, setIsOpen]),
-		close: (0, react.useCallback)(() => {
-			setIsOpen(false);
-		}, [setIsOpen]),
-		toggle: (0, react.useCallback)(() => {
-			if (!disabled) setIsOpen((current) => !current);
-		}, [disabled, setIsOpen])
-	};
-}
-//#endregion
-//#region src/hooks/useFocusTrap.ts
-function useFocusTrap({ containerRef, enabled = true, onEscape, restoreFocus = true }) {
-	(0, react.useEffect)(() => {
-		if (!enabled || typeof document === "undefined") return;
-		const container = containerRef.current;
-		const previousActiveElement = document.activeElement;
-		const initialFocusable = container ? getFocusableElements(container)[0] : void 0;
-		if (initialFocusable) initialFocusable.focus();
-		else container?.focus();
-		const onKeyDown = (event) => {
-			if (event.key === Keys.Escape) {
-				onEscape?.();
-				return;
-			}
-			if (event.key !== Keys.Tab || !containerRef.current) return;
-			const focusableElements = getFocusableElements(containerRef.current);
-			if (focusableElements.length === 0) {
-				event.preventDefault();
-				containerRef.current.focus();
-				return;
-			}
-			const firstElement = focusableElements[0];
-			const lastElement = focusableElements[focusableElements.length - 1];
-			const activeElement = document.activeElement;
-			if (!(activeElement ? containerRef.current.contains(activeElement) : false)) {
-				event.preventDefault();
-				(event.shiftKey ? lastElement : firstElement).focus();
-				return;
-			}
-			if (event.shiftKey && activeElement === firstElement) {
-				event.preventDefault();
-				lastElement.focus();
-				return;
-			}
-			if (!event.shiftKey && activeElement === lastElement) {
-				event.preventDefault();
-				firstElement.focus();
-			}
-		};
-		document.addEventListener("keydown", onKeyDown);
-		return () => {
-			document.removeEventListener("keydown", onKeyDown);
-			if (restoreFocus) previousActiveElement?.focus?.();
-		};
-	}, [
-		containerRef,
-		enabled,
-		onEscape,
-		restoreFocus
-	]);
-}
-//#endregion
-//#region src/hooks/useListNavigation.ts
-function useListNavigation({ items, isDisabled = () => false, initialIndex }) {
-	const enabledIndexes = (0, react.useMemo)(() => items.map((item, index) => ({
-		item,
-		index
-	})).filter(({ item, index }) => !isDisabled(item, index)).map(({ index }) => index), [isDisabled, items]);
-	const firstEnabledIndex = enabledIndexes[0] ?? -1;
-	const lastEnabledIndex = enabledIndexes[enabledIndexes.length - 1] ?? -1;
-	const [activeIndex, setActiveIndex] = (0, react.useState)(initialIndex ?? firstEnabledIndex);
-	const getNextEnabledIndex = (0, react.useCallback)((startIndex, direction) => {
-		if (enabledIndexes.length === 0) return -1;
-		const currentEnabledPosition = enabledIndexes.indexOf(startIndex);
-		return enabledIndexes[((currentEnabledPosition === -1 ? direction === 1 ? -1 : 0 : currentEnabledPosition) + direction + enabledIndexes.length) % enabledIndexes.length] ?? -1;
-	}, [enabledIndexes]);
-	return {
-		activeIndex,
-		enabledIndexes,
-		firstEnabledIndex,
-		lastEnabledIndex,
-		getNextEnabledIndex,
-		move: (0, react.useCallback)((action, currentIndex = activeIndex) => {
-			const nextIndex = action === "first" ? firstEnabledIndex : action === "last" ? lastEnabledIndex : getNextEnabledIndex(currentIndex, action === "next" ? 1 : -1);
-			if (nextIndex >= 0) setActiveIndex(nextIndex);
-			return nextIndex;
-		}, [
-			activeIndex,
-			firstEnabledIndex,
-			getNextEnabledIndex,
-			lastEnabledIndex
-		]),
-		setActiveIndex
-	};
+	});
 }
-//#endregion
-//#region src/hooks/useOutsideInteraction.ts
-function useOutsideInteraction({ refs, enabled = true, onInteractOutside, eventName = "pointerdown" }) {
-	(0, react.useEffect)(() => {
-		if (!enabled || typeof document === "undefined") return;
-		const handleEvent = (event) => {
-			const target = event.target;
-			if (!refs.some((ref) => ref.current?.contains(target))) onInteractOutside(event);
-		};
-		document.addEventListener(eventName, handleEvent);
-		return () => {
-			document.removeEventListener(eventName, handleEvent);
-		};
-	}, [
-		enabled,
-		eventName,
-		onInteractOutside,
-		refs
-	]);
+Card.displayName = "Card";
+function CardHeader({ className, ref, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: cx("pf-card__header", className),
+		...props
+	});
+}
+CardHeader.displayName = "CardHeader";
+function CardContent({ className, ref, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: cx("pf-card__content", className),
+		...props
+	});
+}
+CardContent.displayName = "CardContent";
+function CardFooter({ className, ref, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: cx("pf-card__footer", className),
+		...props
+	});
 }
+CardFooter.displayName = "CardFooter";
+//#endregion
+//#region src/components/CreditCard/CreditCard.tsx
+var maskCardNumber = (value) => {
+	const digits = value.replace(/\D+/g, "");
+	if (digits.length <= 4) return digits;
+	const visible = digits.slice(-4);
+	const hiddenLength = digits.length - 4;
+	return `${"*".repeat(hiddenLength)}${visible}`.replace(/(.{4})/g, "$1 ").trim();
+};
+var formatCardNumber = (value) => {
+	return value.replace(/\D+/g, "").replace(/(.{4})/g, "$1 ").trim();
+};
+var CreditCard = (0, react.forwardRef)(({ brand = "generic", cardNumber, cardholderName, expiry, cvc, masked = true, className, ...props }, ref) => {
+	const displayNumber = masked ? maskCardNumber(cardNumber) : formatCardNumber(cardNumber);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: cx("pf-credit-card", `is-${brand}`, className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "top-row",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "chip",
+					"aria-hidden": true
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "brand",
+					children: brand.toUpperCase()
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "number",
+				children: displayNumber
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "meta",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "label",
+						children: "Card holder"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "value",
+						children: cardholderName
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "label",
+						children: "Expires"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "value",
+						children: expiry
+					})] }),
+					cvc ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "label",
+						children: "CVC"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "value",
+						children: masked ? "***" : cvc
+					})] }) : null
+				]
+			})
+		]
+	});
+});
+CreditCard.displayName = "CreditCard";
+//#endregion
+//#region src/components/Checkbox/Checkbox.tsx
+var Checkbox = (0, react.forwardRef)(({ id, label, className, ...props }, ref) => {
+	const generatedId = (0, react.useId)();
+	const checkboxId = id ?? generatedId;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "pf-checkbox-field",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref,
+			id: checkboxId,
+			type: "checkbox",
+			className: cx("pf-checkbox", className),
+			...props
+		}), label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			htmlFor: checkboxId,
+			children: label
+		}) : null]
+	});
+});
+Checkbox.displayName = "Checkbox";
 //#endregion
 //#region src/components/Dropdown/Dropdown.tsx
 var Dropdown = (0, react.forwardRef)(({ label = "Actions", items, align = "start", disabled, className, maxVisibleItems, ...props }, ref) => {
@@ -943,7 +1084,6 @@ var Dropdown = (0, react.forwardRef)(({ label = "Actions", items, align = "start
 			className: "pf-dropdown__trigger",
 			"aria-haspopup": "menu",
 			"aria-expanded": isOpen,
-			"aria-controls": isOpen ? menuId : void 0,
 			onClick: () => {
 				disclosure.toggle();
 			},
@@ -1294,88 +1434,101 @@ var Carousel = (0, react.forwardRef)(function Carousel({ className, slides, init
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref,
 		className: cx("pf-carousel", className),
+		role: "region",
+		"aria-roledescription": "carousel",
 		"aria-label": ariaLabel,
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "pf-carousel__viewport",
-			role: "region",
-			"aria-roledescription": "carousel",
-			"aria-label": slideLabel,
-			children: totalSlides === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "pf-carousel__empty",
-				role: "status",
-				children: "Add at least one slide."
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "pf-carousel__track",
-				style: { transform: `translateX(-${resolvedActiveIndex * 100}%)` },
-				children: slides.map((slide, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "pf-carousel__slide",
-					role: "group",
-					"aria-roledescription": "slide",
-					"aria-label": `Slide ${index + 1} of ${totalSlides}`,
-					"aria-hidden": index !== resolvedActiveIndex,
-					children: slide
-				}, `slide-${index}`))
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "pf-carousel__controls",
-			onKeyDown: (event) => {
-				if (event.key === "ArrowLeft") {
-					event.preventDefault();
-					goToIndex(resolvedActiveIndex - 1);
-				} else if (event.key === "ArrowRight") {
-					event.preventDefault();
-					goToIndex(resolvedActiveIndex + 1);
-				}
-			},
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: "pf-carousel__nav",
-					"aria-label": "Previous slide",
-					disabled: isPrevDisabled || totalSlides < 2,
-					onClick: () => {
-						goToIndex(resolvedActiveIndex - 1);
-					},
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-						name: "square-caret-left",
-						"aria-hidden": true
-					})
-				}),
-				showIndicators && totalSlides > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "pf-carousel__indicators",
-					"aria-label": "Slide indicators",
-					children: slides.map((_, index) => {
-						const isActive = index === resolvedActiveIndex;
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: cx("pf-carousel__indicator", isActive && "pf-carousel__indicator--active"),
-							"aria-label": `Go to slide ${index + 1}`,
-							"aria-current": isActive ? "true" : void 0,
-							onClick: () => {
-								goToIndex(index);
-							}
-						}, `indicator-${index}`);
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "pf-carousel__viewport",
+				children: totalSlides === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pf-carousel__empty",
+					role: "status",
+					children: "Add at least one slide."
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pf-carousel__track",
+					style: { transform: `translateX(-${resolvedActiveIndex * 100}%)` },
+					children: slides.map((slide, index) => {
+						const isInactive = index !== resolvedActiveIndex;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "pf-carousel__slide",
+							role: "group",
+							"aria-roledescription": "slide",
+							"aria-label": `Slide ${index + 1} of ${totalSlides}`,
+							"aria-hidden": isInactive,
+							...isInactive ? { inert: true } : {},
+							children: slide
+						}, `slide-${index}`);
 					})
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "pf-carousel__indicator-spacer",
-					"aria-hidden": true
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: "pf-carousel__nav",
-					"aria-label": "Next slide",
-					disabled: isNextDisabled || totalSlides < 2,
-					onClick: () => {
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "pf-sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: totalSlides > 0 ? slideLabel : ""
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "pf-carousel__controls",
+				onKeyDown: (event) => {
+					if (event.key === "ArrowLeft") {
+						event.preventDefault();
+						goToIndex(resolvedActiveIndex - 1);
+					} else if (event.key === "ArrowRight") {
+						event.preventDefault();
 						goToIndex(resolvedActiveIndex + 1);
-					},
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-						name: "square-caret-right",
+					}
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "pf-carousel__nav",
+						"aria-label": "Previous slide",
+						disabled: isPrevDisabled || totalSlides < 2,
+						onClick: () => {
+							goToIndex(resolvedActiveIndex - 1);
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							name: "square-caret-left",
+							"aria-hidden": true
+						})
+					}),
+					showIndicators && totalSlides > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "pf-carousel__indicators",
+						role: "group",
+						"aria-label": "Slide indicators",
+						children: slides.map((_, index) => {
+							const isActive = index === resolvedActiveIndex;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: cx("pf-carousel__indicator", isActive && "pf-carousel__indicator--active"),
+								"aria-label": `Go to slide ${index + 1}`,
+								"aria-current": isActive ? "true" : void 0,
+								onClick: () => {
+									goToIndex(index);
+								}
+							}, `indicator-${index}`);
+						})
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "pf-carousel__indicator-spacer",
 						"aria-hidden": true
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "pf-carousel__nav",
+						"aria-label": "Next slide",
+						disabled: isNextDisabled || totalSlides < 2,
+						onClick: () => {
+							goToIndex(resolvedActiveIndex + 1);
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+							name: "square-caret-right",
+							"aria-hidden": true
+						})
 					})
-				})
-			]
-		})]
+				]
+			})
+		]
 	});
 });
 Carousel.displayName = "Carousel";
@@ -1925,14 +2078,15 @@ var HeaderNavigation = (0, react.forwardRef)(function HeaderNavigation({ classNa
 HeaderNavigation.displayName = "HeaderNavigation";
 //#endregion
 //#region src/components/InlineCTA/InlineCTA.tsx
-var InlineCTA = (0, react.forwardRef)(function InlineCTA({ className, heading, description, action, icon, iconName = "circle-question", tone = "default", children, ...props }, ref) {
+var InlineCTA = (0, react.forwardRef)(function InlineCTA({ className, heading, description, action, icon, iconName = "circle-question", tone = "default", dismissible = false, onDismiss, children, ...props }, ref) {
 	const resolvedIcon = icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 		name: iconName,
 		"aria-hidden": true
 	});
+	const { isExiting, startExit } = useExitAnimation({ onExited: onDismiss });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref,
-		className: cx("pf-inline-cta", `pf-inline-cta--${tone}`, className),
+		className: cx("pf-inline-cta", `pf-inline-cta--${tone}`, dismissible && "pf-inline-cta--dismissible", isExiting && "pf-inline-cta--exiting", className),
 		...props,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -1957,6 +2111,16 @@ var InlineCTA = (0, react.forwardRef)(function InlineCTA({ className, heading, d
 			action ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "pf-inline-cta__action",
 				children: action
+			}) : null,
+			dismissible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "pf-inline-cta__dismiss",
+				"aria-label": "Dismiss",
+				onClick: startExit,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					name: "circle-xmark",
+					"aria-hidden": true
+				})
 			}) : null
 		]
 	});
@@ -1968,8 +2132,7 @@ var GaugeChart = (0, react.forwardRef)(function GaugeChart({ className, value, m
 	const progress = max > 0 ? Math.min(Math.max(value, 0), max) / max : 0;
 	const radius = (size - strokeWidth) / 2;
 	const circumference = 2 * Math.PI * radius;
-	const filled = progress * circumference;
-	const gap = circumference - filled;
+	const offset = circumference - progress * circumference;
 	const center = size / 2;
 	const pct = Math.round(progress * 100);
 	const defaultLabel = `${pct}%`;
@@ -2009,10 +2172,12 @@ var GaugeChart = (0, react.forwardRef)(function GaugeChart({ className, value, m
 				stroke: colorVar,
 				strokeWidth,
 				strokeLinecap: "round",
-				strokeDasharray: `${filled} ${gap}`,
+				strokeDasharray: circumference,
 				style: {
 					transform: "rotate(-90deg)",
-					transformOrigin: `${center}px ${center}px`
+					transformOrigin: `${center}px ${center}px`,
+					"--pf-gauge-circumference": circumference,
+					"--pf-gauge-offset": offset
 				},
 				className: "pf-gauge__fill"
 			})]
@@ -2031,6 +2196,161 @@ var GaugeChart = (0, react.forwardRef)(function GaugeChart({ className, value, m
 });
 GaugeChart.displayName = "GaugeChart";
 //#endregion
+//#region src/components/Heatmap/Heatmap.tsx
+var MONTHS = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+var WEEKDAYS = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+function parseISO(s) {
+	const [y, m, d] = s.split("-").map(Number);
+	return new Date(y, m - 1, d);
+}
+function toISO(d) {
+	return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function addDays(d, n) {
+	const r = new Date(d);
+	r.setDate(r.getDate() + n);
+	return r;
+}
+var Heatmap = (0, react.forwardRef)(function Heatmap({ className, data, startDate, endDate, levels = 5, weekStartsOn = 0, cellSize = 12, cellGap = 3, showWeekdayLabels = true, showMonthLabels = true, valueFormatter, label, emptyLabel = "No data", style, ...props }, ref) {
+	const sortedDates = data.map((d) => d.date).sort();
+	if (!Boolean(startDate || endDate || data.length)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: cx("pf-heatmap", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "pf-heatmap__empty",
+			children: emptyLabel
+		})
+	});
+	const valueByDate = new Map(data.map((d) => [d.date, d.value]));
+	const maxValue = data.reduce((max, d) => Math.max(max, d.value), 0);
+	const total = data.reduce((sum, d) => sum + d.value, 0);
+	const levelCount = Math.max(2, levels);
+	const start = parseISO(startDate ?? sortedDates[0]);
+	const end = parseISO(endDate ?? sortedDates[sortedDates.length - 1]);
+	const gridStart = addDays(start, -((start.getDay() - weekStartsOn + 7) % 7));
+	const weeks = [];
+	let cursor = gridStart;
+	while (cursor <= end) {
+		const week = [];
+		for (let i = 0; i < 7; i++) {
+			week.push({
+				iso: toISO(cursor),
+				date: new Date(cursor),
+				inRange: cursor >= start && cursor <= end
+			});
+			cursor = addDays(cursor, 1);
+		}
+		weeks.push(week);
+	}
+	function levelFor(value) {
+		if (value <= 0 || maxValue <= 0) return 0;
+		return Math.min(levelCount - 1, Math.max(1, Math.ceil(value / maxValue * (levelCount - 1))));
+	}
+	function cellColor(level) {
+		if (level === 0) return "var(--pf-heatmap-empty)";
+		return `color-mix(in srgb, var(--pf-heatmap-color) ${Math.round(level / (levelCount - 1) * 100)}%, var(--pf-heatmap-empty))`;
+	}
+	const monthLabels = [];
+	let lastMonth = -1;
+	weeks.forEach((week, col) => {
+		const firstInRange = week.find((c) => c.inRange);
+		if (!firstInRange) return;
+		const month = firstInRange.date.getMonth();
+		if (month !== lastMonth) {
+			monthLabels.push({
+				col: col + 1,
+				label: MONTHS[month]
+			});
+			lastMonth = month;
+		}
+	});
+	const styleVars = {
+		"--pf-heatmap-cell-size": `${cellSize}px`,
+		"--pf-heatmap-cell-gap": `${cellGap}px`,
+		...style
+	};
+	const ariaLabel = label ?? `Activity heatmap from ${toISO(start)} to ${toISO(end)}, ${total} total`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: cx("pf-heatmap", className),
+		style: styleVars,
+		role: "img",
+		"aria-label": ariaLabel,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "pf-heatmap__body",
+			children: [showWeekdayLabels ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "pf-heatmap__weekdays",
+				children: [showMonthLabels ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "pf-heatmap__weekday-spacer",
+					"aria-hidden": "true"
+				}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pf-heatmap__weekday-grid",
+					children: Array.from({ length: 7 }, (_, i) => {
+						const dow = (weekStartsOn + i) % 7;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pf-heatmap__weekday",
+							children: i % 2 === 1 ? WEEKDAYS[dow] : ""
+						}, i);
+					})
+				})]
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "pf-heatmap__main",
+				children: [showMonthLabels ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pf-heatmap__months",
+					style: { gridTemplateColumns: `repeat(${weeks.length}, var(--pf-heatmap-cell-size))` },
+					"aria-hidden": "true",
+					children: monthLabels.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "pf-heatmap__month",
+						style: { gridColumnStart: m.col },
+						children: m.label
+					}, `${m.label}-${m.col}`))
+				}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "pf-heatmap__grid",
+					children: weeks.flatMap((week, wi) => week.map((cell, di) => {
+						if (!cell.inRange) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "pf-heatmap__cell pf-heatmap__cell--empty" }, `${wi}-${di}`);
+						const value = valueByDate.get(cell.iso) ?? 0;
+						const level = levelFor(value);
+						const title = valueFormatter ? valueFormatter(value, cell.iso) : `${cell.iso}: ${value}`;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pf-heatmap__cell",
+							style: {
+								background: cellColor(level),
+								animationDelay: `${wi * 8}ms`
+							},
+							title,
+							"data-level": level
+						}, `${wi}-${di}`);
+					}))
+				})]
+			})]
+		})
+	});
+});
+Heatmap.displayName = "Heatmap";
+//#endregion
 //#region src/components/LineBarCharts/LineBarChart.tsx
 var CHART_COLORS = [
 	"var(--pf-chart-color-1)",
@@ -2447,25 +2767,26 @@ var Modal = (0, react.forwardRef)(function Modal({ className, open, onOpenChange
 	const titleId = (0, react.useId)();
 	const descriptionId = (0, react.useId)();
 	const dialogRef = (0, react.useRef)(null);
+	const { isMounted, isExiting } = usePresence(open);
 	(0, react.useImperativeHandle)(ref, () => dialogRef.current, []);
 	(0, react.useEffect)(() => {
-		if (!open || typeof document === "undefined") return;
+		if (!isMounted || typeof document === "undefined") return;
 		const originalOverflow = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
 		return () => {
 			document.body.style.overflow = originalOverflow;
 		};
-	}, [open]);
+	}, [isMounted]);
 	useFocusTrap({
 		containerRef: dialogRef,
 		enabled: open,
 		onEscape: () => onOpenChange?.(false)
 	});
-	if (!open || typeof document === "undefined") return null;
+	if (!isMounted || typeof document === "undefined") return null;
 	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "pf-modal__portal",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "pf-modal__overlay",
+			className: cx("pf-modal__overlay", isExiting && "pf-modal__overlay--exiting"),
 			onClick: () => {
 				if (closeOnOverlayClick) onOpenChange?.(false);
 			}
@@ -2473,7 +2794,7 @@ var Modal = (0, react.forwardRef)(function Modal({ className, open, onOpenChange
 			className: "pf-modal__viewport",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: dialogRef,
-				className: cx("pf-modal", `pf-modal--${size}`, className),
+				className: cx("pf-modal", `pf-modal--${size}`, isExiting && "pf-modal--exiting", className),
 				role: "dialog",
 				"aria-modal": "true",
 				"aria-labelledby": title ? titleId : void 0,
@@ -2624,7 +2945,6 @@ var MultiSelect = (0, react.forwardRef)(({ id, options, value, defaultValue, onV
 					"aria-haspopup": "listbox",
 					"aria-expanded": isOpen,
 					"aria-required": required || void 0,
-					"aria-controls": isOpen ? listboxId : void 0,
 					"aria-describedby": describedBy,
 					onClick: () => {
 						disclosure.toggle();
@@ -2717,9 +3037,10 @@ var Notification = (0, react.forwardRef)(({ className, variant = "info", heading
 		"aria-hidden": true
 	});
 	const body = children ?? description;
+	const { isExiting, startExit } = useExitAnimation({ onExited: onDismiss });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref,
-		className: cx("pf-notification", `pf-notification--${variant}`, className),
+		className: cx("pf-notification", `pf-notification--${variant}`, isExiting && "pf-notification--exiting", className),
 		role: "status",
 		...props,
 		children: [
@@ -2749,7 +3070,7 @@ var Notification = (0, react.forwardRef)(({ className, variant = "info", heading
 				type: "button",
 				className: "pf-notification__dismiss",
 				"aria-label": "Dismiss notification",
-				onClick: () => onDismiss?.(),
+				onClick: startExit,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 					name: "circle-xmark",
 					"aria-hidden": true
@@ -2937,7 +3258,7 @@ var PieChart = (0, react.forwardRef)(function PieChart({ className, data, size =
 			style: {
 				width: chartSize,
 				height: chartSize,
-				backgroundImage: conicGradient
+				"--pf-pie-gradient": conicGradient
 			},
 			role: "img",
 			"aria-label": "Pie chart",
@@ -3035,7 +3356,10 @@ var ProgressCircle = (0, react.forwardRef)(function ProgressCircle({ value, max
 				r: radius,
 				strokeWidth,
 				strokeDasharray: circumference,
-				strokeDashoffset: dashOffset
+				style: {
+					"--pf-progress-dashoffset": dashOffset,
+					"--pf-progress-circ": circumference
+				}
 			})]
 		}), showValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "pf-progress-circle__value",
@@ -3151,21 +3475,27 @@ var RadarChart = (0, react.forwardRef)(function RadarChart({ className, data, si
 					x2: axis.end.x,
 					y2: axis.end.y
 				}, `axis-${index}`)) : null,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
-					className: "pf-radar-chart__area",
-					points: valuePolygon,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+					className: "pf-radar-chart__value",
 					style: {
-						fill: fillColor,
-						stroke: strokeColor
-					}
+						transformBox: "view-box",
+						transformOrigin: `${center}px ${center}px`
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+						className: "pf-radar-chart__area",
+						points: valuePolygon,
+						style: {
+							fill: fillColor,
+							stroke: strokeColor
+						}
+					}), valuePoints.map((point, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						className: "pf-radar-chart__point",
+						cx: point.x,
+						cy: point.y,
+						r: 3,
+						style: { fill: strokeColor }
+					}, `point-${index}`))]
 				}),
-				valuePoints.map((point, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-					className: "pf-radar-chart__point",
-					cx: point.x,
-					cy: point.y,
-					r: 3,
-					style: { fill: strokeColor }
-				}, `point-${index}`)),
 				axes.map((axis, index) => {
 					const labelPoint = polarToCartesian(center, center, outerRadius + 18, axis.angle);
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
@@ -3677,7 +4007,7 @@ function normalizePoints(data, width, height, padding) {
 		return [padding + i / (data.length - 1) * innerW, padding + (1 - (value - min) / range) * innerH];
 	});
 }
-var Sparkline = (0, react.forwardRef)(function Sparkline({ className, data = [], width = 120, height = 36, variant = "line", strokeWidth = 1.5, color, endDot = false, label, style, ...props }, ref) {
+var Sparkline = (0, react.forwardRef)(function Sparkline({ className, data = [], width = 120, height = 36, variant = "line", strokeWidth = 1.5, color, endDot = false, animate = false, label, style, ...props }, ref) {
 	const padding = strokeWidth + 2;
 	const points = (0, react.useMemo)(() => normalizePoints(data, width, height, padding), [
 		data,
@@ -3711,7 +4041,7 @@ var Sparkline = (0, react.forwardRef)(function Sparkline({ className, data = [],
 		width,
 		height,
 		viewBox: `0 0 ${width} ${height}`,
-		className: cx("pf-sparkline", `pf-sparkline--${variant}`, className),
+		className: cx("pf-sparkline", `pf-sparkline--${variant}`, animate && "pf-sparkline--animated", className),
 		"aria-label": label,
 		role: label ? "img" : "presentation",
 		style: {
@@ -3732,6 +4062,7 @@ var Sparkline = (0, react.forwardRef)(function Sparkline({ className, data = [],
 				strokeWidth,
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
+				pathLength: animate ? 1 : void 0,
 				className: "pf-sparkline__line"
 			}),
 			endDot && lastPoint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
@@ -4052,7 +4383,6 @@ var Select = (0, react.forwardRef)(({ id, options, value, defaultValue, onValueC
 					disabled,
 					"aria-haspopup": "listbox",
 					"aria-expanded": isOpen,
-					"aria-controls": isOpen ? listboxId : void 0,
 					"aria-required": required || void 0,
 					"aria-describedby": describedBy,
 					onClick: () => {
@@ -4313,6 +4643,7 @@ function Table({ className, columns, rows, caption, dense = false, striped = fal
 Table.displayName = "Table";
 //#endregion
 //#region src/components/Tabs/Tabs.tsx
+var useIsomorphicLayoutEffect = typeof document !== "undefined" ? react.useLayoutEffect : react.useEffect;
 function getFirstEnabledValue(items) {
 	return items.find((item) => !item.disabled)?.value;
 }
@@ -4323,6 +4654,39 @@ var Tabs = (0, react.forwardRef)(function Tabs({ className, items, value, defaul
 	const selectedValue = isControlled ? value : internalValue;
 	const selectedItem = (0, react.useMemo)(() => items.find((item) => item.value === selectedValue && !item.disabled) ?? items.find((item) => !item.disabled), [items, selectedValue]);
 	const buttonRefs = (0, react.useRef)([]);
+	const listRef = (0, react.useRef)(null);
+	const [indicator, setIndicator] = (0, react.useState)(null);
+	useIsomorphicLayoutEffect(() => {
+		const list = listRef.current;
+		const activeIndex = items.findIndex((item) => item.value === selectedItem?.value);
+		const activeButton = buttonRefs.current[activeIndex];
+		if (!list || !activeButton) {
+			setIndicator(null);
+			return;
+		}
+		const measure = () => {
+			const listRect = list.getBoundingClientRect();
+			const tabRect = activeButton.getBoundingClientRect();
+			setIndicator({
+				left: tabRect.left - listRect.left + list.scrollLeft,
+				width: tabRect.width,
+				top: tabRect.top - listRect.top,
+				height: tabRect.height
+			});
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(list);
+		observer.observe(activeButton);
+		return () => observer.disconnect();
+	}, [
+		items,
+		selectedItem?.value,
+		variant,
+		size,
+		fullWidth
+	]);
 	const setSelectedValue = (nextValue) => {
 		if (!isControlled) setInternalValue(nextValue);
 		onValueChange?.(nextValue);
@@ -4347,11 +4711,24 @@ var Tabs = (0, react.forwardRef)(function Tabs({ className, items, value, defaul
 		ref,
 		className: cx("pf-tabs", className),
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: listRef,
 			className: cx("pf-tabs__list", `pf-tabs__list--${variant}`, `pf-tabs__list--${size}`, fullWidth && "pf-tabs__list--full-width"),
 			role: "tablist",
 			"aria-orientation": "horizontal",
-			children: items.map((item, index) => {
+			children: [indicator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				className: cx("pf-tabs__indicator", `pf-tabs__indicator--${variant}`),
+				style: variant === "pills" ? {
+					left: indicator.left,
+					width: indicator.width,
+					top: indicator.top,
+					height: indicator.height
+				} : {
+					left: indicator.left,
+					width: indicator.width
+				}
+			}) : null, items.map((item, index) => {
 				const isSelected = item.value === selectedItem?.value;
 				const tabId = `${baseId}-tab-${item.value}`;
 				const panelId = `${baseId}-panel-${item.value}`;
@@ -4390,7 +4767,7 @@ var Tabs = (0, react.forwardRef)(function Tabs({ className, items, value, defaul
 					},
 					children: item.label
 				}, item.value);
-			})
+			})]
 		}), selectedItem ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			id: `${baseId}-panel-${selectedItem.value}`,
 			className: "pf-tabs__panel",
@@ -4519,6 +4896,7 @@ var Tooltip = (0, react.forwardRef)(function Tooltip({ content, children, open,
 	const [resolvedPlacement, setResolvedPlacement] = (0, react.useState)(placement);
 	const isControlled = open !== void 0;
 	const isVisible = !disabled && (isControlled ? open : isOpen);
+	const { isMounted, isExiting } = usePresence(Boolean(isVisible), 160);
 	const clearShowTimer = () => {
 		if (showTimerRef.current !== void 0) {
 			window.clearTimeout(showTimerRef.current);
@@ -4537,8 +4915,6 @@ var Tooltip = (0, react.forwardRef)(function Tooltip({ content, children, open,
 		clearShowTimer();
 		if (isControlled) return;
 		setIsOpen(false);
-		setStyle({ visibility: "hidden" });
-		setResolvedPlacement(placement);
 	};
 	(0, react.useEffect)(() => {
 		return () => {
@@ -4573,11 +4949,11 @@ var Tooltip = (0, react.forwardRef)(function Tooltip({ content, children, open,
 		},
 		"aria-describedby": isVisible ? tooltipId : void 0,
 		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {})
-	}), isVisible && typeof document !== "undefined" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	}), isMounted && typeof document !== "undefined" ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		id: tooltipId,
 		ref: tooltipRef,
 		role: "tooltip",
-		className: cx("pf-tooltip", `pf-tooltip--${resolvedPlacement}`, className),
+		className: cx("pf-tooltip", `pf-tooltip--${resolvedPlacement}`, isExiting && "pf-tooltip--exiting", className),
 		style,
 		children: content
 	}), document.body) : null] });
@@ -4855,6 +5231,7 @@ var VideoPlayer = (0, react.forwardRef)(({ id, label, description, error, aspect
 });
 VideoPlayer.displayName = "VideoPlayer";
 //#endregion
+exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AreaChart = AreaChart;
 exports.Avatar = Avatar;
@@ -4880,6 +5257,7 @@ exports.EmptyState = EmptyState;
 exports.FileUploader = FileUploader;
 exports.GaugeChart = GaugeChart;
 exports.HeaderNavigation = HeaderNavigation;
+exports.Heatmap = Heatmap;
 exports.Icon = Icon;
 exports.InlineCTA = InlineCTA;
 exports.Input = Input;
@@ -4935,6 +5313,8 @@ exports.useAnchoredPosition = useAnchoredPosition;
 exports.useComposedRefs = useComposedRefs;
 exports.useControllableState = useControllableState;
 exports.useDisclosure = useDisclosure;
+exports.useExitAnimation = useExitAnimation;
 exports.useFocusTrap = useFocusTrap;
 exports.useListNavigation = useListNavigation;
 exports.useOutsideInteraction = useOutsideInteraction;
+exports.usePresence = usePresence;