@persona/design-system 0.2.1 → 0.3.0

package/dist/components/DataTable/types.d.mts

@@ -1,5 +1,5 @@
-import { o as StickerProps } from "../../Sticker-BIVuastf.mjs";
-import { l as MenuItemProps } from "../../Menu-DM9OoZ71.mjs";
+import { o as StickerProps } from "../../Sticker-Dhx2wqTL.mjs";
+import { l as MenuItemProps } from "../../Menu-CYRdEnfo.mjs";
 import { ReactNode } from "react";
 import { Column, DeepKeys, FilterFnOption, Header, RowData, SortingState, Table } from "@tanstack/react-table";
 

package/dist/components/DatePicker/index.d.mts

@@ -1,5 +1,5 @@
-import Calendar from "../../Calendar.mjs";
-import { DateField } from "../../DateField.mjs";
-import { DatePicker, DatePickerProps } from "../../DatePicker.mjs";
-import DateRangePicker, { DateRange, DateRangePickerProps } from "../../DateRangePicker.mjs";
+import { n as DatePickerProps, t as DatePicker } from "../../DatePicker-BGO6doLx.mjs";
+import { n as DateRangePicker, r as DateRangePickerProps, t as DateRange } from "../../DateRangePicker-DfRBm9z4.mjs";
+import { t as DateField } from "../../DateField-Com9f2-j.mjs";
+import { t as Calendar } from "../../Calendar-BvLNcHQM.mjs";
 export { Calendar, DateField, DatePicker, DatePicker as default, DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps };

package/dist/components/DatePicker/index.mjs

@@ -1,2 +1,2 @@
-import { i as Calendar, n as DatePicker, r as DateField, t as DateRangePicker } from "../../DatePicker-DpGvo7Bd.mjs";
+import { i as Calendar, n as DatePicker, r as DateField, t as DateRangePicker } from "../../DatePicker-BlnE2MBD.mjs";
 export { Calendar, DateField, DatePicker, DatePicker as default, DateRangePicker };

package/dist/components/DropdownButton/index.mjs

@@ -1,2 +1,2 @@
-import { t as DropdownButton } from "../../DropdownButton-DGgfGW_o.mjs";
+import { t as DropdownButton } from "../../DropdownButton-CpWNRUma.mjs";
 export { DropdownButton, DropdownButton as default };

package/dist/components/DropdownMenu/index.d.mts

@@ -1,2 +1,2 @@
-import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "../../DropdownMenu-B2t3Bwky.mjs";
+import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "../../DropdownMenu-CnaK78rP.mjs";
 export { DropdownMenu, DropdownMenuProps, _default as default };

package/dist/components/DropdownMenu/index.mjs

@@ -1,2 +1,2 @@
-import { n as DropdownMenu_default, t as DropdownMenu } from "../../DropdownMenu-DZIFSJXD.mjs";
+import { n as DropdownMenu_default, t as DropdownMenu } from "../../DropdownMenu-BCyV8nC0.mjs";
 export { DropdownMenu, DropdownMenu_default as default };

package/dist/components/FloatingPanel/index.d.mts

@@ -0,0 +1,5 @@
+import FloatingPanel, { FLOATING_PANEL_ID_PREFIX, FloatingPanelProps } from "../../FloatingPanel.mjs";
+import { Panel, PanelProvider, usePersistentFloatingPanel, usePersistentFloatingPanels } from "../../FloatingPanelContext.mjs";
+import FloatingPanelRenderer from "../../FloatingPanelRenderer.mjs";
+import { PADDING } from "../../utils3.mjs";
+export { FLOATING_PANEL_ID_PREFIX, PADDING as FLOATING_PANEL_PADDING, FloatingPanelProps, FloatingPanelRenderer, type Panel, PanelProvider, FloatingPanel as default, usePersistentFloatingPanel, usePersistentFloatingPanels };

package/dist/components/FloatingPanel/index.mjs

@@ -0,0 +1,635 @@
+import "../../variables/effect.mjs";
+import { paragraphMixins } from "../../mixins/text.mjs";
+import { n as Stack } from "../../Stack-Bl54WmhY.mjs";
+import ConfigContext from "../../lib/ConfigContext.mjs";
+import { Z_INDICES } from "../../lib/zindex.mjs";
+import { t as IconButton } from "../../IconButton-BfDlic2K.mjs";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLocation } from "react-router-dom";
+import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { ArrowCollapseIcon, ArrowExpandIcon, XIcon } from "@persona/icons";
+import { motion, useDragControls, useMotionValue, useReducedMotion } from "framer-motion";
+import { createPortal, flushSync } from "react-dom";
+import { v4 } from "uuid";
+import { flip, offset, shift, useFloating } from "@floating-ui/react";
+//#region components/FloatingPanel/utils.ts
+const PADDING = 8;
+function autoFitMaxHeight(viewportHeight, topOffset, minHeight) {
+	return Math.max(minHeight, viewportHeight - Math.max(48, topOffset) - 48);
+}
+//#endregion
+//#region components/FloatingPanel/FloatingPanel.tsx
+const FLOATING_PANEL_ID_PREFIX = "floating-panel__";
+const FloatingPanelContainer = styled(motion.div)`
+  position: absolute;
+  z-index: ${Z_INDICES.modal};
+  background: ${({ theme }) => theme.color.background.primary};
+  border: 1px solid ${Color.BorderDivider};
+  border-radius: ${BorderRadius.Lg};
+  box-shadow: ${"0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 3px 14px 0px rgba(0, 0, 0, 0.04), 0px 8px 10px 0px rgba(0, 0, 0, 0.04)"};
+  display: flex;
+  flex-direction: column;
+  cursor: auto;
+  ${({ $fitHeight, $maxHeight, $minHeight }) => $fitHeight && css`
+      height: auto;
+      max-height: ${$maxHeight ?? 0}px;
+      min-height: ${$minHeight ?? 0}px;
+    `}
+`;
+const DragHandle = styled(motion.div)`
+  cursor: ${({ isFullSize }) => isFullSize ? "default" : "grab"};
+  user-select: none;
+
+  &:active {
+    cursor: ${({ isFullSize }) => isFullSize ? "default" : "grabbing"};
+  }
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 48px;
+  height: 48px;
+  overflow: hidden;
+  padding: ${Spacing[1]} ${Spacing[1]} ${Spacing[1]} ${Spacing[3]};
+  border-bottom: 1px solid ${Color.BorderDivider};
+`;
+const Footer = styled.div`
+  padding: ${Spacing[1]} ${Spacing[1]} ${Spacing[1]} ${Spacing[3]};
+  border-top: 1px solid ${Color.BorderDivider};
+  overflow-x: hidden;
+  background-color: ${({ theme }) => theme.color.background.primary};
+  width: 100%;
+  border-radius: 0 0 ${BorderRadius.Lg} ${BorderRadius.Lg};
+`;
+const ResizeHandleBase = styled.div`
+  position: absolute;
+  user-select: none;
+`;
+const ResizeHandleBaseCorner = styled(ResizeHandleBase)`
+  width: 1.25rem;
+  height: 1.25rem;
+`;
+const ResizeHandleBottomRight = styled(ResizeHandleBaseCorner)`
+  bottom: -0.75rem;
+  right: -0.75rem;
+  cursor: nwse-resize;
+`;
+const ResizeHandleBottomLeft = styled(ResizeHandleBaseCorner)`
+  bottom: -0.75rem;
+  left: -0.75rem;
+  cursor: nesw-resize;
+`;
+const ResizeHandleTopLeft = styled(ResizeHandleBaseCorner)`
+  top: -0.75rem;
+  left: -0.75rem;
+  cursor: nwse-resize;
+`;
+const ResizeHandleTopRight = styled(ResizeHandleBaseCorner)`
+  top: -0.75rem;
+  right: -0.75rem;
+  cursor: nesw-resize;
+`;
+const ResizeHandleBottom = styled(ResizeHandleBase)`
+  bottom: -0.75rem;
+  left: 0.5rem;
+  width: calc(100% - 1rem);
+  height: 1rem;
+  cursor: ns-resize;
+  user-select: none;
+`;
+const ResizeHandleTop = styled(ResizeHandleBase)`
+  top: -0.75rem;
+  left: 0.5rem;
+  width: calc(100% - 1rem);
+  height: 1rem;
+  cursor: ns-resize;
+`;
+const ResizeHandleRight = styled(ResizeHandleBase)`
+  right: -0.75rem;
+  top: 0.5rem;
+  width: 1rem;
+  height: calc(100% - 1rem);
+  cursor: ew-resize;
+`;
+const ResizeHandleLeft = styled(ResizeHandleBase)`
+  left: -0.75rem;
+  top: 0.5rem;
+  width: 1rem;
+  height: calc(100% - 1rem);
+  cursor: ew-resize;
+`;
+const PanelContent = styled.div`
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  min-height: 0;
+  /* While the panel height is derived from its content, the content must size
+     itself (a percentage flex-basis against an indefinite height collapses in
+     WebKit); it still shrinks when the panel hits its max-height. */
+  flex: ${({ $fitHeight }) => $fitHeight ? "0 1 auto" : "1 1 0%"};
+  padding: ${({ $noPadding }) => $noPadding ? 0 : Spacing[3]};
+`;
+const PanelText = styled.p`
+  ${paragraphMixins.sm}
+  white-space: nowrap;
+  min-width: 3rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+`;
+const StyledIconButton = styled(IconButton)`
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: ${BorderRadius.Md};
+`;
+function DismissOnNavigate({ onClose }) {
+	const location = useLocation();
+	const initialPathname = useRef(location.pathname);
+	useEffect(() => {
+		if (location.pathname !== initialPathname.current) onClose();
+	}, [location.pathname, onClose]);
+	return null;
+}
+function FloatingPanel({ title = "Panel title", children, portal = true, triggerRef, initialWidth = 400, initialHeight = 600, minWidth = 100, minHeight = 150, mainAxisOffset = 0, crossAxisOffset = 0, footerButtons, footerAdditionalAction, placement = "right", canFullsize = true, defaultFullSize = false, noPadding, headerActions, dismissOnNavigate = false, fitContent = false, onClose = () => {}, ...restProps }) {
+	const { floatingPanel } = useContext(ConfigContext);
+	const fullscreenRightInset = floatingPanel?.fullscreenRightInset ?? 8;
+	const hasFooter = footerButtons || footerAdditionalAction;
+	const isAdditionalActionButton = isValidElement(footerAdditionalAction) && footerAdditionalAction.type === "button";
+	const [panelSize, setPanelSize] = useState({
+		width: initialWidth,
+		height: initialHeight
+	});
+	const panelSizeRef = useRef({
+		width: initialWidth,
+		height: initialHeight
+	});
+	const [panelPosition, setPanelPosition] = useState({
+		x: 0,
+		y: 0
+	});
+	const [isPositionReady, setIsPositionReady] = useState(!triggerRef);
+	const [fullSize, setFullSize] = useState(defaultFullSize);
+	const resizeBottomRef = useRef(null);
+	const resizeRightRef = useRef(null);
+	const [wasFullSizeToggled, setWasFullSizeToggled] = useState(false);
+	const resizeOffsetRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const resizeDirectionRef = useRef(null);
+	const resizeStartDimensionsRef = useRef({
+		width: initialWidth,
+		height: initialHeight,
+		x: 0,
+		y: 0
+	});
+	const [hasManuallyResized, setHasManuallyResized] = useState(false);
+	const contentRef = useRef(null);
+	const prefersReducedMotion = useReducedMotion();
+	const dragControls = useDragControls();
+	const x = useMotionValue(0);
+	const y = useMotionValue(0);
+	const { x: floatingX, y: floatingY, refs } = useFloating({
+		placement,
+		elements: { reference: triggerRef?.current || void 0 },
+		middleware: [
+			offset({
+				mainAxis: mainAxisOffset,
+				crossAxis: crossAxisOffset
+			}),
+			flip(),
+			shift({
+				crossAxis: true,
+				padding: 8
+			})
+		]
+	});
+	useEffect(() => {
+		if (!triggerRef || floatingX !== 0 || floatingY !== 0) {
+			setPanelPosition({
+				x: floatingX,
+				y: floatingY
+			});
+			setIsPositionReady(true);
+		}
+	}, [
+		floatingX,
+		floatingY,
+		triggerRef
+	]);
+	const [windowDimensions, setWindowDimensions] = useState({
+		width: typeof window !== "undefined" ? window.innerWidth : 1200,
+		height: typeof window !== "undefined" ? window.innerHeight : 800
+	});
+	useEffect(() => {
+		const handleResize = () => {
+			setWindowDimensions({
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+		};
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, []);
+	const dragConstraints = fullSize ? void 0 : {
+		left: 8,
+		right: Math.max(8, windowDimensions.width - panelSize.width - 8),
+		top: 8,
+		bottom: Math.max(8, windowDimensions.height - panelSize.height - 8)
+	};
+	const clampPositionToBounds = useCallback((position) => {
+		if (fullSize) return position;
+		return {
+			x: Math.max(8, Math.min(position.x, Math.max(8, windowDimensions.width - panelSize.width - 8))),
+			y: Math.max(8, Math.min(position.y, Math.max(8, windowDimensions.height - panelSize.height - 8)))
+		};
+	}, [
+		windowDimensions,
+		panelSize,
+		fullSize
+	]);
+	useEffect(() => {
+		if (!fullSize) {
+			const clampedPosition = clampPositionToBounds(panelPosition);
+			if (clampedPosition.x !== panelPosition.x || clampedPosition.y !== panelPosition.y) setPanelPosition(clampedPosition);
+		}
+	}, [
+		windowDimensions,
+		panelPosition,
+		clampPositionToBounds,
+		fullSize
+	]);
+	useEffect(() => {
+		if (wasFullSizeToggled) {
+			const timer = setTimeout(() => setWasFullSizeToggled(false), 400);
+			return () => clearTimeout(timer);
+		}
+	}, [wasFullSizeToggled]);
+	useEffect(() => {
+		panelSizeRef.current = panelSize;
+	}, [panelSize]);
+	const isAutoHeight = fitContent && !hasManuallyResized && !fullSize;
+	function handleResizeMouseDown(event, direction) {
+		event.preventDefault();
+		event.stopPropagation();
+		let currentWidth;
+		let currentHeight;
+		let currentX;
+		let currentY;
+		if (fullSize) {
+			const container = contentRef.current?.parentElement;
+			currentWidth = container?.offsetWidth ?? windowDimensions.width - 16;
+			currentHeight = container?.offsetHeight ?? windowDimensions.height - 16;
+			currentX = 8;
+			currentY = 8;
+			x.set(8);
+			y.set(8);
+			setFullSize(false);
+			setPanelSize({
+				width: currentWidth,
+				height: currentHeight
+			});
+			setPanelPosition({
+				x: currentX,
+				y: currentY
+			});
+		} else if (isAutoHeight) {
+			currentHeight = (contentRef.current?.parentElement)?.offsetHeight ?? panelSize.height;
+			currentWidth = panelSize.width;
+			currentX = panelPosition.x;
+			currentY = panelPosition.y;
+			setPanelSize({
+				width: currentWidth,
+				height: currentHeight
+			});
+		} else {
+			currentWidth = panelSize.width;
+			currentHeight = panelSize.height;
+			currentX = panelPosition.x;
+			currentY = panelPosition.y;
+		}
+		panelSizeRef.current = {
+			width: currentWidth,
+			height: currentHeight
+		};
+		resizeStartDimensionsRef.current = {
+			width: currentWidth,
+			height: currentHeight,
+			x: currentX,
+			y: currentY
+		};
+		setHasManuallyResized(true);
+		resizeDirectionRef.current = direction;
+		if (direction === "se") resizeOffsetRef.current = {
+			x: event.clientX - currentWidth,
+			y: event.clientY - currentHeight
+		};
+		else if (direction === "sw") {
+			resizeRightRef.current = x.get() + currentWidth;
+			resizeOffsetRef.current = {
+				x: event.clientX,
+				y: event.clientY - currentHeight
+			};
+		} else if (direction === "nw") {
+			resizeRightRef.current = x.get() + currentWidth;
+			resizeBottomRef.current = y.get() + currentHeight;
+			resizeOffsetRef.current = {
+				x: event.clientX,
+				y: event.clientY
+			};
+		} else if (direction === "ne") {
+			resizeBottomRef.current = y.get() + currentHeight;
+			resizeOffsetRef.current = {
+				x: event.clientX - currentWidth,
+				y: event.clientY
+			};
+		} else if (direction === "w") {
+			resizeRightRef.current = x.get() + currentWidth;
+			resizeOffsetRef.current = {
+				x: event.clientX,
+				y: 0
+			};
+		} else if (direction === "e") resizeOffsetRef.current = {
+			x: event.clientX - currentWidth,
+			y: 0
+		};
+		else if (direction === "n") {
+			resizeBottomRef.current = y.get() + currentHeight;
+			resizeOffsetRef.current = {
+				x: 0,
+				y: event.clientY
+			};
+		} else if (direction === "s") resizeOffsetRef.current = {
+			x: 0,
+			y: event.clientY - currentHeight
+		};
+		document.addEventListener("mousemove", handleResizeMouseMove);
+		document.addEventListener("mouseup", handleResizeMouseUp);
+	}
+	function handleResizeMouseMove(event) {
+		const direction = resizeDirectionRef.current;
+		let newWidth = resizeStartDimensionsRef.current.width;
+		let newHeight = resizeStartDimensionsRef.current.height;
+		let clampedX = resizeStartDimensionsRef.current.x;
+		let clampedY = resizeStartDimensionsRef.current.y;
+		if (direction === "se") {
+			newWidth = Math.round(Math.max(minWidth, event.clientX - resizeOffsetRef.current.x));
+			newHeight = Math.round(Math.max(minHeight, event.clientY - resizeOffsetRef.current.y));
+		} else if (direction === "sw") {
+			const right = resizeRightRef.current;
+			const proposedX = event.clientX;
+			newWidth = Math.round(Math.max(minWidth, right - proposedX));
+			clampedX = Math.round(right - newWidth);
+			newHeight = Math.round(Math.max(minHeight, event.clientY - resizeOffsetRef.current.y));
+		} else if (direction === "nw") {
+			const right = resizeRightRef.current;
+			const bottom = resizeBottomRef.current;
+			const proposedX = event.clientX;
+			const proposedY = event.clientY;
+			newWidth = Math.round(Math.max(minWidth, right - proposedX));
+			newHeight = Math.round(Math.max(minHeight, bottom - proposedY));
+			clampedX = Math.round(right - newWidth);
+			clampedY = Math.round(bottom - newHeight);
+		} else if (direction === "ne") {
+			const bottom = resizeBottomRef.current;
+			const proposedY = event.clientY;
+			newWidth = Math.round(Math.max(minWidth, event.clientX - resizeOffsetRef.current.x));
+			newHeight = Math.round(Math.max(minHeight, bottom - proposedY));
+			clampedY = Math.round(bottom - newHeight);
+		} else if (direction === "w") {
+			const right = resizeRightRef.current;
+			const proposedX = event.clientX;
+			newWidth = Math.round(Math.max(minWidth, right - proposedX));
+			clampedX = Math.round(right - newWidth);
+		} else if (direction === "e") newWidth = Math.round(Math.max(minWidth, event.clientX - resizeOffsetRef.current.x));
+		else if (direction === "n") {
+			const bottom = resizeBottomRef.current;
+			const proposedY = event.clientY;
+			newHeight = Math.round(Math.max(minHeight, bottom - proposedY));
+			clampedY = Math.round(bottom - newHeight);
+		} else if (direction === "s") newHeight = Math.round(Math.max(minHeight, event.clientY - resizeOffsetRef.current.y));
+		flushSync(() => {
+			setPanelPosition({
+				x: clampedX,
+				y: clampedY
+			});
+			setPanelSize({
+				width: newWidth,
+				height: newHeight
+			});
+		});
+	}
+	function handleResizeMouseUp() {
+		document.removeEventListener("mousemove", handleResizeMouseMove);
+		document.removeEventListener("mouseup", handleResizeMouseUp);
+	}
+	const panelContent = /* @__PURE__ */ jsxs(FloatingPanelContainer, {
+		ref: refs.setFloating,
+		$fitHeight: isAutoHeight,
+		$maxHeight: autoFitMaxHeight(windowDimensions.height, panelPosition.y, minHeight),
+		$minHeight: minHeight,
+		style: {
+			x,
+			y
+		},
+		initial: {
+			top: 0,
+			left: 0,
+			opacity: 0
+		},
+		animate: {
+			x: fullSize ? 8 : panelPosition.x,
+			y: fullSize ? 8 : panelPosition.y,
+			width: fullSize ? `calc(100% - ${8 + fullscreenRightInset}px)` : panelSize.width,
+			...isAutoHeight ? {} : { height: fullSize ? "calc(100% - 16px)" : panelSize.height },
+			opacity: isPositionReady ? 1 : 0
+		},
+		transition: wasFullSizeToggled ? {
+			type: "tween",
+			ease: [
+				.83,
+				0,
+				.17,
+				1
+			],
+			duration: prefersReducedMotion ? 1.2 : .4
+		} : {
+			opacity: {
+				duration: .15,
+				ease: "easeOut"
+			},
+			duration: 0
+		},
+		onDragEnd: () => {
+			if (!fullSize) setPanelPosition(clampPositionToBounds({
+				x: x.get(),
+				y: y.get()
+			}));
+		},
+		drag: !fullSize,
+		dragControls,
+		dragListener: false,
+		dragMomentum: false,
+		dragConstraints,
+		id: `${FLOATING_PANEL_ID_PREFIX}container`,
+		...restProps,
+		children: [
+			/* @__PURE__ */ jsx(DragHandle, {
+				isFullSize: fullSize,
+				onPointerDown: (e) => dragControls.start(e),
+				children: /* @__PURE__ */ jsxs(Stack, {
+					align: "center",
+					direction: "horizontal",
+					justify: "space-between",
+					children: [/* @__PURE__ */ jsx(PanelText, { children: title }), /* @__PURE__ */ jsxs(Stack, {
+						direction: "horizontal",
+						align: "center",
+						spacing: Spacing[1],
+						children: [
+							headerActions,
+							canFullsize && /* @__PURE__ */ jsx(StyledIconButton, {
+								size: "sm",
+								"aria-label": fullSize ? "collapse" : "expand",
+								id: "floating-panel__toggle-fullsize",
+								onClick: () => {
+									setWasFullSizeToggled(true);
+									setFullSize(!fullSize);
+								},
+								children: fullSize ? /* @__PURE__ */ jsx(ArrowCollapseIcon, {}) : /* @__PURE__ */ jsx(ArrowExpandIcon, {})
+							}),
+							/* @__PURE__ */ jsx(StyledIconButton, {
+								size: "sm",
+								id: "floating-panel__close-panel",
+								onClick: () => onClose?.(),
+								"aria-label": "close",
+								children: /* @__PURE__ */ jsx(XIcon, {})
+							})
+						]
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(PanelContent, {
+				ref: contentRef,
+				$noPadding: noPadding,
+				$fitHeight: isAutoHeight,
+				children
+			}),
+			hasFooter && /* @__PURE__ */ jsx(Footer, {
+				style: { paddingLeft: isAdditionalActionButton ? Spacing[1] : Spacing[3] },
+				children: /* @__PURE__ */ jsxs(Stack, {
+					align: "center",
+					direction: "horizontal",
+					justify: footerAdditionalAction ? "space-between" : "flex-end",
+					children: [footerAdditionalAction && (isAdditionalActionButton ? footerAdditionalAction : /* @__PURE__ */ jsx(PanelText, { children: footerAdditionalAction })), footerButtons && /* @__PURE__ */ jsx("div", { children: footerButtons })]
+				})
+			}),
+			/* @__PURE__ */ jsx(ResizeHandleBottomRight, {
+				"data-test": "resize-handle-se",
+				onMouseDown: (event) => handleResizeMouseDown(event, "se")
+			}),
+			/* @__PURE__ */ jsx(ResizeHandleBottom, { onMouseDown: (event) => handleResizeMouseDown(event, "s") }),
+			/* @__PURE__ */ jsx(ResizeHandleBottomLeft, { onMouseDown: (event) => handleResizeMouseDown(event, "sw") }),
+			/* @__PURE__ */ jsx(ResizeHandleLeft, { onMouseDown: (event) => handleResizeMouseDown(event, "w") }),
+			/* @__PURE__ */ jsx(ResizeHandleTopLeft, { onMouseDown: (event) => handleResizeMouseDown(event, "nw") }),
+			/* @__PURE__ */ jsx(ResizeHandleTop, { onMouseDown: (event) => handleResizeMouseDown(event, "n") }),
+			/* @__PURE__ */ jsx(ResizeHandleTopRight, { onMouseDown: (event) => handleResizeMouseDown(event, "ne") }),
+			/* @__PURE__ */ jsx(ResizeHandleRight, { onMouseDown: (event) => handleResizeMouseDown(event, "e") })
+		]
+	});
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [dismissOnNavigate && /* @__PURE__ */ jsx(DismissOnNavigate, { onClose }), panelContent] });
+	return portal ? createPortal(content, document.body) : content;
+}
+//#endregion
+//#region components/FloatingPanel/FloatingPanelContext.tsx
+const PanelContext = createContext(null);
+const PanelProvider = ({ children }) => {
+	const [panels, setPanels] = useState([]);
+	const location = useLocation();
+	function shouldPanelPersist(currentUrl, persistUntilPathRoot) {
+		if (!persistUntilPathRoot) return false;
+		return currentUrl.includes(persistUntilPathRoot);
+	}
+	const openPanel = useCallback((panel) => {
+		const { key, panelElement, persistUntilPathRoot } = panel;
+		const pathRoot = persistUntilPathRoot || location.pathname;
+		setPanels((prev) => [...prev.filter((p) => p.key !== key), {
+			key,
+			panelElement,
+			persistUntilPathRoot: pathRoot
+		}]);
+	}, [location.pathname]);
+	const closePanel = useCallback((key) => {
+		setPanels((prev) => prev.filter((panel) => panel.key !== key));
+	}, []);
+	const isPanelOpen = useCallback((key) => {
+		return panels.some((panel) => panel.key === key);
+	}, [panels]);
+	const togglePanel = useCallback((panel) => {
+		const { key } = panel;
+		if (isPanelOpen(key)) closePanel(key);
+		else openPanel(panel);
+	}, [
+		isPanelOpen,
+		closePanel,
+		openPanel
+	]);
+	const closeAllPanels = useCallback(() => {
+		setPanels([]);
+	}, []);
+	useEffect(() => {
+		const nextLocation = location.pathname;
+		setPanels((prevPanels) => prevPanels.filter((panel) => shouldPanelPersist(nextLocation, panel.persistUntilPathRoot)));
+	}, [location.pathname]);
+	return /* @__PURE__ */ jsx(PanelContext.Provider, {
+		value: {
+			openPanel,
+			closePanel,
+			togglePanel,
+			closeAllPanels,
+			panels,
+			isPanelOpen
+		},
+		children
+	});
+};
+const usePersistentFloatingPanels = () => {
+	const ctx = useContext(PanelContext);
+	if (!ctx) throw new Error("usePersistentFloatingPanels must be used within a PanelProvider");
+	return ctx;
+};
+const usePersistentFloatingPanel = (panelId) => {
+	const ctx = useContext(PanelContext);
+	if (!ctx) throw new Error("usePersistentFloatingPanels must be used within a PanelProvider");
+	const currentPanelId = panelId || `panel-${v4()}`;
+	return {
+		id: currentPanelId,
+		openPanel: useCallback((panel) => {
+			ctx.openPanel(panel);
+		}, [ctx]),
+		closePanel: useCallback(() => {
+			ctx.closePanel(currentPanelId);
+		}, [currentPanelId, ctx]),
+		togglePanel: useCallback((panel) => {
+			ctx.togglePanel(panel);
+		}, [ctx]),
+		isPanelOpen: ctx.isPanelOpen(currentPanelId)
+	};
+};
+//#endregion
+//#region components/FloatingPanel/FloatingPanelRenderer.tsx
+function FloatingPanelRenderer() {
+	const { panels, closePanel } = usePersistentFloatingPanels();
+	if (panels.length === 0) return null;
+	return createPortal(panels.map(({ key, panelElement: panel }) => {
+		return cloneElement(panel, {
+			onClose: () => closePanel(key),
+			key
+		});
+	}), document.body);
+}
+//#endregion
+export { FLOATING_PANEL_ID_PREFIX, PADDING as FLOATING_PANEL_PADDING, FloatingPanelRenderer, PanelProvider, FloatingPanel as default, usePersistentFloatingPanel, usePersistentFloatingPanels };
+
+//# sourceMappingURL=index.mjs.map