@persona/design-system 0.3.0 → 0.3.1

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

@@ -1,5 +1,5 @@
-import { o as StickerProps } from "../../Sticker-Dhx2wqTL.mjs";
-import { l as MenuItemProps } from "../../Menu-CYRdEnfo.mjs";
+import { o as StickerProps } from "../../Sticker-DnSemOcW.mjs";
+import { l as MenuItemProps } from "../../Menu-D4Y_J-QI.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 { 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";
+import { n as DatePickerProps, t as DatePicker } from "../../DatePicker-B1iWrqR5.mjs";
+import { n as DateRangePicker, r as DateRangePickerProps, t as DateRange } from "../../DateRangePicker-BmF9eH9R.mjs";
+import { t as DateField } from "../../DateField-CKeSIhGy.mjs";
+import { t as Calendar } from "../../Calendar-CcxN7y3e.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-BlnE2MBD.mjs";
+import { i as Calendar, n as DatePicker, r as DateField, t as DateRangePicker } from "../../DatePicker-BNnZ6L1y.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-CpWNRUma.mjs";
+import { t as DropdownButton } from "../../DropdownButton-BlVeFbJ0.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-CnaK78rP.mjs";
+import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "../../DropdownMenu-DuTnq9j7.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-BCyV8nC0.mjs";
+import { n as DropdownMenu_default, t as DropdownMenu } from "../../DropdownMenu-82xH1AZr.mjs";
 export { DropdownMenu, DropdownMenu_default as default };

package/dist/components/FloatingPanel/index.mjs

@@ -1,15 +1,15 @@
-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 { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { paragraphMixins } from "../../mixins/text.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
-import { t as IconButton } from "../../IconButton-BfDlic2K.mjs";
+import "../../variables/effect.mjs";
+import { n as Stack } from "../../Stack-Bre2oiov.mjs";
+import { t as IconButton } from "../../IconButton-BgL3QUVO.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowCollapseIcon, ArrowExpandIcon, XIcon } from "@persona/icons";
+import { useLocation } from "react-router-dom";
 import { motion, useDragControls, useMotionValue, useReducedMotion } from "framer-motion";
 import { createPortal, flushSync } from "react-dom";
 import { v4 } from "uuid";
@@ -538,7 +538,7 @@ function FloatingPanel({ title = "Panel title", children, portal = true, trigger
 			/* @__PURE__ */ jsx(ResizeHandleRight, { onMouseDown: (event) => handleResizeMouseDown(event, "e") })
 		]
 	});
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [dismissOnNavigate && /* @__PURE__ */ jsx(DismissOnNavigate, { onClose }), panelContent] });
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [dismissOnNavigate && /* @__PURE__ */ jsx(DismissOnNavigate, { onClose }), panelContent] });
 	return portal ? createPortal(content, document.body) : content;
 }
 //#endregion

package/dist/components/FloatingPanel/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["uuid"],"sources":["../../../components/FloatingPanel/utils.ts","../../../components/FloatingPanel/FloatingPanel.tsx","../../../components/FloatingPanel/FloatingPanelContext.tsx","../../../components/FloatingPanel/FloatingPanelRenderer.tsx"],"sourcesContent":["export const PADDING = 8;\nexport const EDGE_PADDING = PADDING * 6;\n\n// Cap a content-fitting panel's height to the room below its top edge so it\n// can't overflow the viewport bottom when anchored partway down the screen.\nexport function autoFitMaxHeight(viewportHeight: number, topOffset: number, minHeight: number) {\n  return Math.max(minHeight, viewportHeight - Math.max(EDGE_PADDING, topOffset) - EDGE_PADDING);\n}\n","import { flip, offset, type Placement, shift, useFloating } from '@floating-ui/react';\nimport { motion, useDragControls, useMotionValue, useReducedMotion } from 'framer-motion';\nimport {\n  isValidElement,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal, flushSync } from 'react-dom';\nimport { useLocation } from 'react-router-dom';\nimport styled, { css } from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Stack from '@persona/design-system/components/Stack';\nimport { Z_INDICES } from '@persona/design-system/lib/zindex';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Elevation } from '@persona/design-system/variables/effect';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { ArrowCollapseIcon, ArrowExpandIcon, XIcon } from '@persona/icons';\nimport ConfigContext from 'design-system/lib/ConfigContext';\n\nimport { autoFitMaxHeight, PADDING } from './utils';\n\nexport const FLOATING_PANEL_ID_PREFIX = 'floating-panel__' as const;\n\nenum ResizeDirection {\n  North = 'n',\n  South = 's',\n  East = 'e',\n  West = 'w',\n  NorthEast = 'ne',\n  NorthWest = 'nw',\n  SouthEast = 'se',\n  SouthWest = 'sw',\n}\n\nexport interface FloatingPanelProps {\n  /** The title text displayed in the panel header */\n  title: ReactNode;\n  /** Callback function called when the close button is clicked */\n  onClose?: () => void;\n  /** Content to render inside the main panel area */\n  children?: ReactNode;\n  /** Optional React component rendered to the left of the expand button in the header */\n  headerActions?: ReactNode;\n\n  /** Whether the panel displays the fullsize button */\n  canFullsize?: boolean;\n\n  /** When true, the panel opens already in full-size (maximized) mode. */\n  defaultFullSize?: boolean;\n\n  /** Initial width of the panel in pixels */\n  initialWidth?: number;\n  /** Initial height of the panel in pixels */\n  initialHeight?: number;\n  /** Minimum width the panel can be resized to in pixels */\n  minWidth?: number;\n  /** Minimum height the panel can be resized to in pixels */\n  minHeight?: number;\n\n  footerButtons?: ReactNode;\n\n  footerAdditionalAction?: ReactNode;\n\n  portal?: boolean;\n\n  /** Reference to the element that triggered this panel, used for automatic positioning */\n  triggerRef?: RefObject<HTMLElement>;\n\n  /** Which placement of the trigger element to position the panel on */\n  placement?: Placement;\n\n  /** Additional main axis offset in pixels from the calculated position. Main axis is defined as the axis in position to where its being defined\n   * i.e. right, top, left ,bottom */\n  mainAxisOffset?: number;\n\n  /** Additional cross offset in pixels from the calculated position. Cross is defined as the axis that runs along the alignment\n   * of the floating element. */\n  crossAxisOffset?: number;\n\n  /** remove padding from the panel content */\n  noPadding?: boolean;\n\n  /** When true, automatically calls `onClose` if the route changes after the\n   * panel mounts. Mirrors the auto-dismiss-on-navigation behavior provided by\n   * `PanelProvider` / `usePersistentFloatingPanel` for panels that don't opt\n   * into the persistent panel context. Defaults to `false` so existing\n   * consumers (e.g. dirty-check confirmation flows) are not broken. */\n  dismissOnNavigate?: boolean;\n\n  /** When true, the panel's height auto-fits its content via CSS (`max-content`)\n   * up to the viewport, instead of using `initialHeight`. Once the user manually\n   * resizes, the panel switches to pixel mode and stays there. `initialHeight`\n   * is ignored while auto-fitting. */\n  fitContent?: boolean;\n}\n\nconst FloatingPanelContainer = styled(motion.div)<{\n  $fitHeight?: boolean;\n  $maxHeight?: number;\n  $minHeight?: number;\n}>`\n  position: absolute;\n  z-index: ${Z_INDICES.modal};\n  background: ${({ theme }) => theme.color.background.primary};\n  border: 1px solid ${Color.BorderDivider};\n  border-radius: ${BorderRadius.Lg};\n  box-shadow: ${Elevation.Low};\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n  ${({ $fitHeight, $maxHeight, $minHeight }) =>\n    $fitHeight &&\n    css`\n      height: auto;\n      max-height: ${$maxHeight ?? 0}px;\n      min-height: ${$minHeight ?? 0}px;\n    `}\n`;\n\nconst DragHandle = styled(motion.div)<{ isFullSize: boolean }>`\n  cursor: ${({ isFullSize }) => (isFullSize ? 'default' : 'grab')};\n  user-select: none;\n\n  &:active {\n    cursor: ${({ isFullSize }) => (isFullSize ? 'default' : 'grabbing')};\n  }\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 48px;\n  height: 48px;\n  overflow: hidden;\n  padding: ${Spacing[1]} ${Spacing[1]} ${Spacing[1]} ${Spacing[3]};\n  border-bottom: 1px solid ${Color.BorderDivider};\n`;\n\nconst Footer = styled.div`\n  padding: ${Spacing[1]} ${Spacing[1]} ${Spacing[1]} ${Spacing[3]};\n  border-top: 1px solid ${Color.BorderDivider};\n  overflow-x: hidden;\n  background-color: ${({ theme }) => theme.color.background.primary};\n  width: 100%;\n  border-radius: 0 0 ${BorderRadius.Lg} ${BorderRadius.Lg};\n`;\n\nconst ResizeHandleBase = styled.div`\n  position: absolute;\n  user-select: none;\n`;\n\n// Sets the width and height for base corner to 20px\nconst ResizeHandleBaseCorner = styled(ResizeHandleBase)`\n  width: 1.25rem;\n  height: 1.25rem;\n`;\n\nconst ResizeHandleBottomRight = styled(ResizeHandleBaseCorner)`\n  bottom: -0.75rem;\n  right: -0.75rem;\n  cursor: nwse-resize;\n`;\n\nconst ResizeHandleBottomLeft = styled(ResizeHandleBaseCorner)`\n  bottom: -0.75rem;\n  left: -0.75rem;\n  cursor: nesw-resize;\n`;\n\nconst ResizeHandleTopLeft = styled(ResizeHandleBaseCorner)`\n  top: -0.75rem;\n  left: -0.75rem;\n  cursor: nwse-resize;\n`;\n\nconst ResizeHandleTopRight = styled(ResizeHandleBaseCorner)`\n  top: -0.75rem;\n  right: -0.75rem;\n  cursor: nesw-resize;\n`;\n\n// These are all the Resize handles for the four cardinal direction,\n// To calculate the width, we subtract by the padding of 1rem on both sides\n// which are corners of the panel\nconst ResizeHandleBottom = styled(ResizeHandleBase)`\n  bottom: -0.75rem;\n  left: 0.5rem;\n  width: calc(100% - 1rem);\n  height: 1rem;\n  cursor: ns-resize;\n  user-select: none;\n`;\n\nconst ResizeHandleTop = styled(ResizeHandleBase)`\n  top: -0.75rem;\n  left: 0.5rem;\n  width: calc(100% - 1rem);\n  height: 1rem;\n  cursor: ns-resize;\n`;\n\nconst ResizeHandleRight = styled(ResizeHandleBase)`\n  right: -0.75rem;\n  top: 0.5rem;\n  width: 1rem;\n  height: calc(100% - 1rem);\n  cursor: ew-resize;\n`;\n\nconst ResizeHandleLeft = styled(ResizeHandleBase)`\n  left: -0.75rem;\n  top: 0.5rem;\n  width: 1rem;\n  height: calc(100% - 1rem);\n  cursor: ew-resize;\n`;\n\nconst PanelContent = styled.div<{ $noPadding?: boolean; $fitHeight?: boolean }>`\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  min-height: 0;\n  /* While the panel height is derived from its content, the content must size\n     itself (a percentage flex-basis against an indefinite height collapses in\n     WebKit); it still shrinks when the panel hits its max-height. */\n  flex: ${({ $fitHeight }) => ($fitHeight ? '0 1 auto' : '1 1 0%')};\n  padding: ${({ $noPadding }) => ($noPadding ? 0 : Spacing[3])};\n`;\n\n// Sets a min width so that the text will display, but overflows if needed\nconst PanelText = styled.p`\n  ${paragraphMixins.sm}\n  white-space: nowrap;\n  min-width: 3rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n`;\n\nconst StyledIconButton = styled(IconButton)`\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: ${BorderRadius.Md};\n`;\n\n// Only rendered when dismissOnNavigate is true, keeping useLocation() out of the\n// main component body so FloatingPanel works without a Router when not needed.\nfunction DismissOnNavigate({ onClose }: { onClose: () => void }) {\n  const location = useLocation();\n  const initialPathname = useRef(location.pathname);\n  useEffect(() => {\n    if (location.pathname !== initialPathname.current) {\n      onClose();\n    }\n  }, [location.pathname, onClose]);\n  return null;\n}\n\nexport default function FloatingPanel({\n  title = 'Panel title',\n  children,\n  portal = true,\n  triggerRef,\n  initialWidth = 400,\n  initialHeight = 600,\n  minWidth = 100,\n  minHeight = 150,\n  mainAxisOffset = 0,\n  crossAxisOffset = 0,\n  footerButtons,\n  footerAdditionalAction,\n  placement = 'right',\n  canFullsize = true,\n  defaultFullSize = false,\n  noPadding,\n  headerActions,\n  dismissOnNavigate = false,\n  fitContent = false,\n  onClose = () => {},\n  ...restProps\n}: FloatingPanelProps) {\n  const { floatingPanel } = useContext(ConfigContext);\n  const fullscreenRightInset = floatingPanel?.fullscreenRightInset ?? PADDING;\n  const hasFooter = footerButtons || footerAdditionalAction;\n  const isAdditionalActionButton =\n    isValidElement(footerAdditionalAction) && footerAdditionalAction.type === 'button';\n\n  const [panelSize, setPanelSize] = useState({ width: initialWidth, height: initialHeight });\n  const panelSizeRef = useRef({ width: initialWidth, height: initialHeight });\n  const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });\n  const [isPositionReady, setIsPositionReady] = useState(!triggerRef); // Ready immediately if no triggerRef\n\n  const [fullSize, setFullSize] = useState(defaultFullSize);\n  const resizeBottomRef = useRef<number | null>(null);\n  const resizeRightRef = useRef<number | null>(null);\n\n  const [wasFullSizeToggled, setWasFullSizeToggled] = useState(false);\n  const resizeOffsetRef = useRef({ x: 0, y: 0 });\n\n  const resizeDirectionRef = useRef<ResizeDirection | null>(null);\n  const resizeStartDimensionsRef = useRef({\n    width: initialWidth,\n    height: initialHeight,\n    x: 0,\n    y: 0,\n  });\n\n  // Track if the user has manually resized the panel\n  const [hasManuallyResized, setHasManuallyResized] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // Track reduced motion preference\n  const prefersReducedMotion = useReducedMotion();\n\n  const dragControls = useDragControls();\n\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  const {\n    x: floatingX,\n    y: floatingY,\n    refs,\n  } = useFloating({\n    placement: placement,\n    elements: {\n      reference: triggerRef?.current || undefined,\n    },\n    middleware: [\n      offset({\n        mainAxis: mainAxisOffset,\n        crossAxis: crossAxisOffset,\n      }),\n      flip(),\n      // flip() only swaps sides, so a large panel can still open clipped off an\n      // edge. shift() slides it back into view on both axes (crossAxis covers the\n      // side axis flip leaves unhandled).\n      shift({ crossAxis: true, padding: PADDING }),\n    ],\n  });\n\n  useEffect(() => {\n    // Only update position when floating values are not at the default 0,0\n    // or when we don't have a triggerRef (meaning we should use initial position)\n    if (!triggerRef || floatingX !== 0 || floatingY !== 0) {\n      setPanelPosition({\n        x: floatingX,\n        y: floatingY,\n      });\n      setIsPositionReady(true);\n    }\n  }, [floatingX, floatingY, triggerRef]);\n\n  // Window dimensions and drag constraints\n  const [windowDimensions, setWindowDimensions] = useState({\n    width: typeof window !== 'undefined' ? window.innerWidth : 1200,\n    height: typeof window !== 'undefined' ? window.innerHeight : 800,\n  });\n\n  // Update window dimensions on resize\n  useEffect(() => {\n    const handleResize = () => {\n      setWindowDimensions({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    };\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  const dragConstraints = fullSize\n    ? undefined\n    : {\n        left: PADDING,\n        right: Math.max(PADDING, windowDimensions.width - panelSize.width - PADDING),\n        top: PADDING,\n        bottom: Math.max(PADDING, windowDimensions.height - panelSize.height - PADDING),\n      };\n\n  // Clamp initial position and any position updates to be within bounds\n  const clampPositionToBounds = useCallback(\n    (position: { x: number; y: number }) => {\n      if (fullSize) {\n        return position;\n      }\n\n      return {\n        x: Math.max(\n          PADDING,\n          Math.min(\n            position.x,\n            Math.max(PADDING, windowDimensions.width - panelSize.width - PADDING),\n          ),\n        ),\n        y: Math.max(\n          PADDING,\n          Math.min(\n            position.y,\n            Math.max(PADDING, windowDimensions.height - panelSize.height - PADDING),\n          ),\n        ),\n      };\n    },\n    [windowDimensions, panelSize, fullSize],\n  );\n\n  // Clamp position on window resize\n  useEffect(() => {\n    if (!fullSize) {\n      const clampedPosition = clampPositionToBounds(panelPosition);\n      if (clampedPosition.x !== panelPosition.x || clampedPosition.y !== panelPosition.y) {\n        setPanelPosition(clampedPosition);\n      }\n    }\n  }, [windowDimensions, panelPosition, clampPositionToBounds, fullSize]);\n\n  useEffect(() => {\n    if (wasFullSizeToggled) {\n      const timer = setTimeout(() => setWasFullSizeToggled(false), 400); // match duration\n      return () => clearTimeout(timer);\n    }\n  }, [wasFullSizeToggled]);\n\n  // We need this useEffect here to sync a ref to the panel size, which is needed for resizing\n  useEffect(() => {\n    panelSizeRef.current = panelSize;\n  }, [panelSize]);\n\n  // True while the panel is letting CSS auto-fit its height to content\n  // (`fitContent` opt-in, no manual resize yet, not in fullsize). In this mode\n  // we omit `height` from the framer-motion animate prop so the styled\n  // container's `height: max-content` is in effect.\n  const isAutoHeight = fitContent && !hasManuallyResized && !fullSize;\n\n  // Unified resize handler for all directions\n  function handleResizeMouseDown(\n    event: React.MouseEvent<HTMLDivElement>,\n    direction: ResizeDirection,\n  ) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    let currentWidth: number;\n    let currentHeight: number;\n    let currentX: number;\n    let currentY: number;\n\n    if (fullSize) {\n      // Exit fullscreen but preserve the current rendered dimensions so the panel\n      // appears to stay in place while the user resizes from the edges.\n      // Measure from the DOM so we get the real pixel width/height regardless of\n      // what `calc(100% - 16px)` resolves to (differs for portaled vs. in-place\n      // panels because `100%` is relative to the containing block, not the viewport).\n      const container = contentRef.current?.parentElement;\n      currentWidth = container?.offsetWidth ?? windowDimensions.width - 16;\n      currentHeight = container?.offsetHeight ?? windowDimensions.height - 16;\n      currentX = 8;\n      currentY = 8;\n      // Sync motion values now so x.get()/y.get() return the correct position for\n      // computing fixed-edge anchors below.\n      x.set(8);\n      y.set(8);\n      setFullSize(false);\n      setPanelSize({ width: currentWidth, height: currentHeight });\n      setPanelPosition({ x: currentX, y: currentY });\n    } else if (isAutoHeight) {\n      // If we're leaving CSS auto-fit, capture the current rendered height so the\n      // panel doesn't jump from its content-fit size back to `initialHeight` when\n      // pixel mode takes over.\n      const container = contentRef.current?.parentElement;\n      currentHeight = container?.offsetHeight ?? panelSize.height;\n      currentWidth = panelSize.width;\n      currentX = panelPosition.x;\n      currentY = panelPosition.y;\n      setPanelSize({ width: currentWidth, height: currentHeight });\n    } else {\n      currentWidth = panelSize.width;\n      currentHeight = panelSize.height;\n      currentX = panelPosition.x;\n      currentY = panelPosition.y;\n    }\n\n    panelSizeRef.current = { width: currentWidth, height: currentHeight };\n    // Capture start dimensions in a ref so handleResizeMouseMove (stale closure)\n    // can read the correct initial values for unchanged axes without depending on\n    // panelSize/panelPosition state captured at listener-registration time.\n    resizeStartDimensionsRef.current = {\n      width: currentWidth,\n      height: currentHeight,\n      x: currentX,\n      y: currentY,\n    };\n\n    // Mark that user has manually resized - disable auto-resize from now on\n    setHasManuallyResized(true);\n\n    resizeDirectionRef.current = direction;\n\n    // Calculate initial offsets and fixed points based on direction\n    if (direction === ResizeDirection.SouthEast) {\n      // Bottom-right: resize from bottom-right corner\n      resizeOffsetRef.current = {\n        x: event.clientX - currentWidth,\n        y: event.clientY - currentHeight,\n      };\n    } else if (direction === ResizeDirection.SouthWest) {\n      // Bottom-left: resize from bottom-left corner\n      resizeRightRef.current = x.get() + currentWidth;\n      resizeOffsetRef.current = {\n        x: event.clientX,\n        y: event.clientY - currentHeight,\n      };\n    } else if (direction === ResizeDirection.NorthWest) {\n      // Top-left: resize from top-left corner\n      resizeRightRef.current = x.get() + currentWidth;\n      resizeBottomRef.current = y.get() + currentHeight;\n      resizeOffsetRef.current = {\n        x: event.clientX,\n        y: event.clientY,\n      };\n    } else if (direction === ResizeDirection.NorthEast) {\n      // Top-right: resize from top-right corner\n      resizeBottomRef.current = y.get() + currentHeight;\n      resizeOffsetRef.current = {\n        x: event.clientX - currentWidth,\n        y: event.clientY,\n      };\n    } else if (direction === ResizeDirection.West) {\n      // Left edge\n      resizeRightRef.current = x.get() + currentWidth;\n      resizeOffsetRef.current = {\n        x: event.clientX,\n        y: 0,\n      };\n    } else if (direction === ResizeDirection.East) {\n      // Right edge\n      resizeOffsetRef.current = {\n        x: event.clientX - currentWidth,\n        y: 0,\n      };\n    } else if (direction === ResizeDirection.North) {\n      // Top edge\n      resizeBottomRef.current = y.get() + currentHeight;\n      resizeOffsetRef.current = {\n        x: 0,\n        y: event.clientY,\n      };\n    } else if (direction === ResizeDirection.South) {\n      // Bottom edge\n      resizeOffsetRef.current = {\n        x: 0,\n        y: event.clientY - currentHeight,\n      };\n    }\n\n    document.addEventListener('mousemove', handleResizeMouseMove);\n    document.addEventListener('mouseup', handleResizeMouseUp);\n  }\n\n  // ResizeMouseMove to calculate the new size and position of the panel\n  function handleResizeMouseMove(event: MouseEvent) {\n    const direction = resizeDirectionRef.current;\n    // Use resizeStartDimensionsRef (a ref, always current) rather than panelSize/panelPosition\n    // (stale closure values). For unchanged axes, these provide the correct starting dimensions\n    // set at drag start — including the case where the drag began in fullscreen mode.\n    let newWidth = resizeStartDimensionsRef.current.width;\n    let newHeight = resizeStartDimensionsRef.current.height;\n    let clampedX = resizeStartDimensionsRef.current.x;\n    let clampedY = resizeStartDimensionsRef.current.y;\n\n    if (direction === ResizeDirection.SouthEast) {\n      // Bottom-right corner\n      newWidth = Math.round(Math.max(minWidth, event.clientX - resizeOffsetRef.current.x));\n      newHeight = Math.round(Math.max(minHeight, event.clientY - resizeOffsetRef.current.y));\n    } else if (direction === ResizeDirection.SouthWest) {\n      // Bottom-left corner\n      const right = resizeRightRef.current!;\n      const proposedX = event.clientX;\n      newWidth = Math.round(Math.max(minWidth, right - proposedX));\n      clampedX = Math.round(right - newWidth);\n      newHeight = Math.round(Math.max(minHeight, event.clientY - resizeOffsetRef.current.y));\n    } else if (direction === ResizeDirection.NorthWest) {\n      // Top-left corner\n      const right = resizeRightRef.current!;\n      const bottom = resizeBottomRef.current!;\n      const proposedX = event.clientX;\n      const proposedY = event.clientY;\n      newWidth = Math.round(Math.max(minWidth, right - proposedX));\n      newHeight = Math.round(Math.max(minHeight, bottom - proposedY));\n      clampedX = Math.round(right - newWidth);\n      clampedY = Math.round(bottom - newHeight);\n    } else if (direction === ResizeDirection.NorthEast) {\n      // Top-right corner\n      const bottom = resizeBottomRef.current!;\n      const proposedY = event.clientY;\n      newWidth = Math.round(Math.max(minWidth, event.clientX - resizeOffsetRef.current.x));\n      newHeight = Math.round(Math.max(minHeight, bottom - proposedY));\n      clampedY = Math.round(bottom - newHeight);\n    } else if (direction === ResizeDirection.West) {\n      // Left edge\n      const right = resizeRightRef.current!;\n      const proposedX = event.clientX;\n      newWidth = Math.round(Math.max(minWidth, right - proposedX));\n      clampedX = Math.round(right - newWidth);\n    } else if (direction === ResizeDirection.East) {\n      // Right edge\n      newWidth = Math.round(Math.max(minWidth, event.clientX - resizeOffsetRef.current.x));\n    } else if (direction === ResizeDirection.North) {\n      // Top edge\n      const bottom = resizeBottomRef.current!;\n      const proposedY = event.clientY;\n      newHeight = Math.round(Math.max(minHeight, bottom - proposedY));\n      clampedY = Math.round(bottom - newHeight);\n    } else if (direction === ResizeDirection.South) {\n      // Bottom edge\n      newHeight = Math.round(Math.max(minHeight, event.clientY - resizeOffsetRef.current.y));\n    }\n\n    // We need to flush sync here because it would create jitter while the panel resizes from other directions\n    // this is because the browser will animate serially, but we want to update the position and size together\n    // so that the panel doesn't jump around\n    flushSync(() => {\n      setPanelPosition({ x: clampedX, y: clampedY });\n      setPanelSize({ width: newWidth, height: newHeight });\n    });\n  }\n\n  function handleResizeMouseUp() {\n    document.removeEventListener('mousemove', handleResizeMouseMove);\n    document.removeEventListener('mouseup', handleResizeMouseUp);\n  }\n\n  const panelContent = (\n    <FloatingPanelContainer\n      // Need to keep the values of x and y for positioning\n      ref={refs.setFloating}\n      $fitHeight={isAutoHeight}\n      $maxHeight={autoFitMaxHeight(windowDimensions.height, panelPosition.y, minHeight)}\n      $minHeight={minHeight}\n      style={{\n        x,\n        y,\n      }}\n      initial={{\n        top: 0,\n        left: 0,\n        opacity: 0,\n      }}\n      animate={{\n        x: fullSize ? PADDING : panelPosition.x,\n        y: fullSize ? PADDING : panelPosition.y,\n\n        // When fullscreen, leave space for any reserved right-side content.\n        width: fullSize ? `calc(100% - ${PADDING + fullscreenRightInset}px)` : panelSize.width,\n        // Omit height when CSS auto-fit is active so `height: max-content`\n        // on the styled container takes effect.\n        ...(isAutoHeight ? {} : { height: fullSize ? 'calc(100% - 16px)' : panelSize.height }),\n        opacity: isPositionReady ? 1 : 0,\n      }}\n      transition={\n        wasFullSizeToggled\n          ? {\n              type: 'tween',\n              // Easing curve for a smooth transition\n              ease: [0.83, 0.0, 0.17, 1.0],\n              duration: prefersReducedMotion ? 1.2 : 0.4,\n            }\n          : { opacity: { duration: 0.15, ease: 'easeOut' }, duration: 0 }\n      }\n      onDragEnd={() => {\n        if (!fullSize) {\n          const newPosition = { x: x.get(), y: y.get() };\n          const clampedPosition = clampPositionToBounds(newPosition);\n          setPanelPosition(clampedPosition);\n        }\n      }}\n      drag={!fullSize}\n      dragControls={dragControls}\n      dragListener={false}\n      dragMomentum={false}\n      dragConstraints={dragConstraints}\n      // The frame portals to the body, so panels that dismiss on an outside click\n      // need this id to recognize a click in here as one of their own overlays.\n      id={`${FLOATING_PANEL_ID_PREFIX}container`}\n      {...restProps}\n    >\n      <DragHandle isFullSize={fullSize} onPointerDown={(e) => dragControls.start(e)}>\n        <Stack align='center' direction='horizontal' justify='space-between'>\n          <PanelText>{title}</PanelText>\n          <Stack direction='horizontal' align='center' spacing={Spacing[1]}>\n            {headerActions}\n            {canFullsize && (\n              <StyledIconButton\n                size='sm'\n                aria-label={fullSize ? 'collapse' : 'expand'}\n                id='floating-panel__toggle-fullsize'\n                onClick={() => {\n                  setWasFullSizeToggled(true);\n                  setFullSize(!fullSize);\n                }}\n              >\n                {fullSize ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              </StyledIconButton>\n            )}\n\n            <StyledIconButton\n              size='sm'\n              id='floating-panel__close-panel'\n              onClick={() => onClose?.()}\n              aria-label='close'\n            >\n              <XIcon />\n            </StyledIconButton>\n          </Stack>\n        </Stack>\n      </DragHandle>\n      <PanelContent ref={contentRef} $noPadding={noPadding} $fitHeight={isAutoHeight}>\n        {children}\n      </PanelContent>\n      {hasFooter && (\n        <Footer style={{ paddingLeft: isAdditionalActionButton ? Spacing[1] : Spacing[3] }}>\n          <Stack\n            align='center'\n            direction='horizontal'\n            justify={footerAdditionalAction ? 'space-between' : 'flex-end'}\n          >\n            {footerAdditionalAction &&\n              (isAdditionalActionButton ? (\n                footerAdditionalAction\n              ) : (\n                <PanelText>{footerAdditionalAction}</PanelText>\n              ))}\n\n            {footerButtons && <div>{footerButtons}</div>}\n          </Stack>\n        </Footer>\n      )}\n      <ResizeHandleBottomRight\n        data-test='resize-handle-se'\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.SouthEast)}\n      />\n      <ResizeHandleBottom\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.South)}\n      />\n      <ResizeHandleBottomLeft\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.SouthWest)}\n      />\n      <ResizeHandleLeft\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.West)}\n      />\n      <ResizeHandleTopLeft\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.NorthWest)}\n      />\n      <ResizeHandleTop\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.North)}\n      />\n      <ResizeHandleTopRight\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.NorthEast)}\n      />\n      <ResizeHandleRight\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.East)}\n      />\n    </FloatingPanelContainer>\n  );\n\n  const content = (\n    <>\n      {dismissOnNavigate && <DismissOnNavigate onClose={onClose} />}\n      {panelContent}\n    </>\n  );\n\n  return portal ? createPortal(content, document.body) : content;\n}\n","import {\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { v4 as uuid } from 'uuid';\n\nexport type Panel = {\n  key: string;\n  panelElement: ReactElement;\n  persistUntilPathRoot?: string;\n};\n\ninterface PanelContextType {\n  openPanel: (panel: Panel) => void;\n  closePanel: (key: string) => void;\n  togglePanel: (panel: Panel) => void;\n  closeAllPanels: () => void;\n  isPanelOpen: (key: string) => boolean;\n  panels: Panel[];\n}\n\nconst PanelContext = createContext<PanelContextType | null>(null);\n\nexport const PanelProvider = ({ children }: { children: ReactNode }) => {\n  const [panels, setPanels] = useState<Panel[]>([]);\n  const location = useLocation();\n\n  function shouldPanelPersist(currentUrl: string, persistUntilPathRoot?: string): boolean {\n    if (!persistUntilPathRoot) {\n      return false;\n    }\n    return currentUrl.includes(persistUntilPathRoot);\n  }\n\n  const openPanel = useCallback(\n    (panel: Panel) => {\n      const { key, panelElement, persistUntilPathRoot } = panel;\n      const pathRoot = persistUntilPathRoot || location.pathname;\n      setPanels((prev) => [\n        ...prev.filter((p) => p.key !== key), // Remove existing panel with same key\n        { key, panelElement, persistUntilPathRoot: pathRoot },\n      ]);\n    },\n    [location.pathname],\n  );\n\n  const closePanel = useCallback((key: string) => {\n    setPanels((prev) => prev.filter((panel) => panel.key !== key));\n  }, []);\n\n  const isPanelOpen = useCallback(\n    (key: string) => {\n      return panels.some((panel) => panel.key === key);\n    },\n    [panels],\n  );\n\n  const togglePanel = useCallback(\n    (panel: Panel) => {\n      const { key } = panel;\n      if (isPanelOpen(key)) {\n        closePanel(key);\n      } else {\n        openPanel(panel);\n      }\n    },\n    [isPanelOpen, closePanel, openPanel],\n  );\n\n  const closeAllPanels = useCallback(() => {\n    setPanels([]);\n  }, []);\n\n  useEffect(() => {\n    const nextLocation = location.pathname;\n\n    setPanels((prevPanels) =>\n      prevPanels.filter((panel) => shouldPanelPersist(nextLocation, panel.persistUntilPathRoot)),\n    );\n  }, [location.pathname]);\n\n  return (\n    <PanelContext.Provider\n      value={{ openPanel, closePanel, togglePanel, closeAllPanels, panels, isPanelOpen }}\n    >\n      {children}\n    </PanelContext.Provider>\n  );\n};\n\nexport const usePersistentFloatingPanels = () => {\n  const ctx = useContext(PanelContext);\n  if (!ctx) {\n    throw new Error('usePersistentFloatingPanels must be used within a PanelProvider');\n  }\n  return ctx;\n};\n\n// This hook is used to open a panel that persists across multiple pages\n// For single page panels, use the useToggle hook instead to manage individual panel state.\nexport const usePersistentFloatingPanel = (panelId?: string) => {\n  const ctx = useContext(PanelContext);\n  if (!ctx) {\n    throw new Error('usePersistentFloatingPanels must be used within a PanelProvider');\n  }\n\n  // If the panel doesn't need to persist across multiple pages, we generate an id that can be passed back\n  const currentPanelId = panelId || `panel-${uuid()}`;\n\n  return {\n    id: currentPanelId,\n    openPanel: useCallback(\n      (panel: Panel) => {\n        ctx.openPanel(panel);\n      },\n      [ctx],\n    ),\n    closePanel: useCallback(() => {\n      ctx.closePanel(currentPanelId);\n    }, [currentPanelId, ctx]),\n    togglePanel: useCallback(\n      (panel: Panel) => {\n        ctx.togglePanel(panel);\n      },\n      [ctx],\n    ),\n    isPanelOpen: ctx.isPanelOpen(currentPanelId),\n  };\n};\n","import { cloneElement } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { usePersistentFloatingPanels } from './FloatingPanelContext';\n\nexport default function FloatingPanelRenderer() {\n  const { panels, closePanel } = usePersistentFloatingPanels();\n\n  if (panels.length === 0) {\n    return null;\n  }\n\n  return createPortal(\n    panels.map(({ key, panelElement: panel }) => {\n      return cloneElement(panel, { onClose: () => closePanel(key), key: key });\n    }),\n    document.body,\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["uuid"],"sources":["../../../components/FloatingPanel/utils.ts","../../../components/FloatingPanel/FloatingPanel.tsx","../../../components/FloatingPanel/FloatingPanelContext.tsx","../../../components/FloatingPanel/FloatingPanelRenderer.tsx"],"sourcesContent":["export const PADDING = 8;\nexport const EDGE_PADDING = PADDING * 6;\n\n// Cap a content-fitting panel's height to the room below its top edge so it\n// can't overflow the viewport bottom when anchored partway down the screen.\nexport function autoFitMaxHeight(viewportHeight: number, topOffset: number, minHeight: number) {\n  return Math.max(minHeight, viewportHeight - Math.max(EDGE_PADDING, topOffset) - EDGE_PADDING);\n}\n","import { flip, offset, type Placement, shift, useFloating } from '@floating-ui/react';\nimport { motion, useDragControls, useMotionValue, useReducedMotion } from 'framer-motion';\nimport {\n  isValidElement,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal, flushSync } from 'react-dom';\nimport { useLocation } from 'react-router-dom';\nimport styled, { css } from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Stack from '@persona/design-system/components/Stack';\nimport { Z_INDICES } from '@persona/design-system/lib/zindex';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Elevation } from '@persona/design-system/variables/effect';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { ArrowCollapseIcon, ArrowExpandIcon, XIcon } from '@persona/icons';\nimport ConfigContext from 'design-system/lib/ConfigContext';\n\nimport { autoFitMaxHeight, PADDING } from './utils';\n\nexport const FLOATING_PANEL_ID_PREFIX = 'floating-panel__' as const;\n\nenum ResizeDirection {\n  North = 'n',\n  South = 's',\n  East = 'e',\n  West = 'w',\n  NorthEast = 'ne',\n  NorthWest = 'nw',\n  SouthEast = 'se',\n  SouthWest = 'sw',\n}\n\nexport interface FloatingPanelProps {\n  /** The title text displayed in the panel header */\n  title: ReactNode;\n  /** Callback function called when the close button is clicked */\n  onClose?: () => void;\n  /** Content to render inside the main panel area */\n  children?: ReactNode;\n  /** Optional React component rendered to the left of the expand button in the header */\n  headerActions?: ReactNode;\n\n  /** Whether the panel displays the fullsize button */\n  canFullsize?: boolean;\n\n  /** When true, the panel opens already in full-size (maximized) mode. */\n  defaultFullSize?: boolean;\n\n  /** Initial width of the panel in pixels */\n  initialWidth?: number;\n  /** Initial height of the panel in pixels */\n  initialHeight?: number;\n  /** Minimum width the panel can be resized to in pixels */\n  minWidth?: number;\n  /** Minimum height the panel can be resized to in pixels */\n  minHeight?: number;\n\n  footerButtons?: ReactNode;\n\n  footerAdditionalAction?: ReactNode;\n\n  portal?: boolean;\n\n  /** Reference to the element that triggered this panel, used for automatic positioning */\n  triggerRef?: RefObject<HTMLElement>;\n\n  /** Which placement of the trigger element to position the panel on */\n  placement?: Placement;\n\n  /** Additional main axis offset in pixels from the calculated position. Main axis is defined as the axis in position to where its being defined\n   * i.e. right, top, left ,bottom */\n  mainAxisOffset?: number;\n\n  /** Additional cross offset in pixels from the calculated position. Cross is defined as the axis that runs along the alignment\n   * of the floating element. */\n  crossAxisOffset?: number;\n\n  /** remove padding from the panel content */\n  noPadding?: boolean;\n\n  /** When true, automatically calls `onClose` if the route changes after the\n   * panel mounts. Mirrors the auto-dismiss-on-navigation behavior provided by\n   * `PanelProvider` / `usePersistentFloatingPanel` for panels that don't opt\n   * into the persistent panel context. Defaults to `false` so existing\n   * consumers (e.g. dirty-check confirmation flows) are not broken. */\n  dismissOnNavigate?: boolean;\n\n  /** When true, the panel's height auto-fits its content via CSS (`max-content`)\n   * up to the viewport, instead of using `initialHeight`. Once the user manually\n   * resizes, the panel switches to pixel mode and stays there. `initialHeight`\n   * is ignored while auto-fitting. */\n  fitContent?: boolean;\n}\n\nconst FloatingPanelContainer = styled(motion.div)<{\n  $fitHeight?: boolean;\n  $maxHeight?: number;\n  $minHeight?: number;\n}>`\n  position: absolute;\n  z-index: ${Z_INDICES.modal};\n  background: ${({ theme }) => theme.color.background.primary};\n  border: 1px solid ${Color.BorderDivider};\n  border-radius: ${BorderRadius.Lg};\n  box-shadow: ${Elevation.Low};\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n  ${({ $fitHeight, $maxHeight, $minHeight }) =>\n    $fitHeight &&\n    css`\n      height: auto;\n      max-height: ${$maxHeight ?? 0}px;\n      min-height: ${$minHeight ?? 0}px;\n    `}\n`;\n\nconst DragHandle = styled(motion.div)<{ isFullSize: boolean }>`\n  cursor: ${({ isFullSize }) => (isFullSize ? 'default' : 'grab')};\n  user-select: none;\n\n  &:active {\n    cursor: ${({ isFullSize }) => (isFullSize ? 'default' : 'grabbing')};\n  }\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 48px;\n  height: 48px;\n  overflow: hidden;\n  padding: ${Spacing[1]} ${Spacing[1]} ${Spacing[1]} ${Spacing[3]};\n  border-bottom: 1px solid ${Color.BorderDivider};\n`;\n\nconst Footer = styled.div`\n  padding: ${Spacing[1]} ${Spacing[1]} ${Spacing[1]} ${Spacing[3]};\n  border-top: 1px solid ${Color.BorderDivider};\n  overflow-x: hidden;\n  background-color: ${({ theme }) => theme.color.background.primary};\n  width: 100%;\n  border-radius: 0 0 ${BorderRadius.Lg} ${BorderRadius.Lg};\n`;\n\nconst ResizeHandleBase = styled.div`\n  position: absolute;\n  user-select: none;\n`;\n\n// Sets the width and height for base corner to 20px\nconst ResizeHandleBaseCorner = styled(ResizeHandleBase)`\n  width: 1.25rem;\n  height: 1.25rem;\n`;\n\nconst ResizeHandleBottomRight = styled(ResizeHandleBaseCorner)`\n  bottom: -0.75rem;\n  right: -0.75rem;\n  cursor: nwse-resize;\n`;\n\nconst ResizeHandleBottomLeft = styled(ResizeHandleBaseCorner)`\n  bottom: -0.75rem;\n  left: -0.75rem;\n  cursor: nesw-resize;\n`;\n\nconst ResizeHandleTopLeft = styled(ResizeHandleBaseCorner)`\n  top: -0.75rem;\n  left: -0.75rem;\n  cursor: nwse-resize;\n`;\n\nconst ResizeHandleTopRight = styled(ResizeHandleBaseCorner)`\n  top: -0.75rem;\n  right: -0.75rem;\n  cursor: nesw-resize;\n`;\n\n// These are all the Resize handles for the four cardinal direction,\n// To calculate the width, we subtract by the padding of 1rem on both sides\n// which are corners of the panel\nconst ResizeHandleBottom = styled(ResizeHandleBase)`\n  bottom: -0.75rem;\n  left: 0.5rem;\n  width: calc(100% - 1rem);\n  height: 1rem;\n  cursor: ns-resize;\n  user-select: none;\n`;\n\nconst ResizeHandleTop = styled(ResizeHandleBase)`\n  top: -0.75rem;\n  left: 0.5rem;\n  width: calc(100% - 1rem);\n  height: 1rem;\n  cursor: ns-resize;\n`;\n\nconst ResizeHandleRight = styled(ResizeHandleBase)`\n  right: -0.75rem;\n  top: 0.5rem;\n  width: 1rem;\n  height: calc(100% - 1rem);\n  cursor: ew-resize;\n`;\n\nconst ResizeHandleLeft = styled(ResizeHandleBase)`\n  left: -0.75rem;\n  top: 0.5rem;\n  width: 1rem;\n  height: calc(100% - 1rem);\n  cursor: ew-resize;\n`;\n\nconst PanelContent = styled.div<{ $noPadding?: boolean; $fitHeight?: boolean }>`\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  min-height: 0;\n  /* While the panel height is derived from its content, the content must size\n     itself (a percentage flex-basis against an indefinite height collapses in\n     WebKit); it still shrinks when the panel hits its max-height. */\n  flex: ${({ $fitHeight }) => ($fitHeight ? '0 1 auto' : '1 1 0%')};\n  padding: ${({ $noPadding }) => ($noPadding ? 0 : Spacing[3])};\n`;\n\n// Sets a min width so that the text will display, but overflows if needed\nconst PanelText = styled.p`\n  ${paragraphMixins.sm}\n  white-space: nowrap;\n  min-width: 3rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n`;\n\nconst StyledIconButton = styled(IconButton)`\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: ${BorderRadius.Md};\n`;\n\n// Only rendered when dismissOnNavigate is true, keeping useLocation() out of the\n// main component body so FloatingPanel works without a Router when not needed.\nfunction DismissOnNavigate({ onClose }: { onClose: () => void }) {\n  const location = useLocation();\n  const initialPathname = useRef(location.pathname);\n  useEffect(() => {\n    if (location.pathname !== initialPathname.current) {\n      onClose();\n    }\n  }, [location.pathname, onClose]);\n  return null;\n}\n\nexport default function FloatingPanel({\n  title = 'Panel title',\n  children,\n  portal = true,\n  triggerRef,\n  initialWidth = 400,\n  initialHeight = 600,\n  minWidth = 100,\n  minHeight = 150,\n  mainAxisOffset = 0,\n  crossAxisOffset = 0,\n  footerButtons,\n  footerAdditionalAction,\n  placement = 'right',\n  canFullsize = true,\n  defaultFullSize = false,\n  noPadding,\n  headerActions,\n  dismissOnNavigate = false,\n  fitContent = false,\n  onClose = () => {},\n  ...restProps\n}: FloatingPanelProps) {\n  const { floatingPanel } = useContext(ConfigContext);\n  const fullscreenRightInset = floatingPanel?.fullscreenRightInset ?? PADDING;\n  const hasFooter = footerButtons || footerAdditionalAction;\n  const isAdditionalActionButton =\n    isValidElement(footerAdditionalAction) && footerAdditionalAction.type === 'button';\n\n  const [panelSize, setPanelSize] = useState({ width: initialWidth, height: initialHeight });\n  const panelSizeRef = useRef({ width: initialWidth, height: initialHeight });\n  const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });\n  const [isPositionReady, setIsPositionReady] = useState(!triggerRef); // Ready immediately if no triggerRef\n\n  const [fullSize, setFullSize] = useState(defaultFullSize);\n  const resizeBottomRef = useRef<number | null>(null);\n  const resizeRightRef = useRef<number | null>(null);\n\n  const [wasFullSizeToggled, setWasFullSizeToggled] = useState(false);\n  const resizeOffsetRef = useRef({ x: 0, y: 0 });\n\n  const resizeDirectionRef = useRef<ResizeDirection | null>(null);\n  const resizeStartDimensionsRef = useRef({\n    width: initialWidth,\n    height: initialHeight,\n    x: 0,\n    y: 0,\n  });\n\n  // Track if the user has manually resized the panel\n  const [hasManuallyResized, setHasManuallyResized] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // Track reduced motion preference\n  const prefersReducedMotion = useReducedMotion();\n\n  const dragControls = useDragControls();\n\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  const {\n    x: floatingX,\n    y: floatingY,\n    refs,\n  } = useFloating({\n    placement: placement,\n    elements: {\n      reference: triggerRef?.current || undefined,\n    },\n    middleware: [\n      offset({\n        mainAxis: mainAxisOffset,\n        crossAxis: crossAxisOffset,\n      }),\n      flip(),\n      // flip() only swaps sides, so a large panel can still open clipped off an\n      // edge. shift() slides it back into view on both axes (crossAxis covers the\n      // side axis flip leaves unhandled).\n      shift({ crossAxis: true, padding: PADDING }),\n    ],\n  });\n\n  useEffect(() => {\n    // Only update position when floating values are not at the default 0,0\n    // or when we don't have a triggerRef (meaning we should use initial position)\n    if (!triggerRef || floatingX !== 0 || floatingY !== 0) {\n      setPanelPosition({\n        x: floatingX,\n        y: floatingY,\n      });\n      setIsPositionReady(true);\n    }\n  }, [floatingX, floatingY, triggerRef]);\n\n  // Window dimensions and drag constraints\n  const [windowDimensions, setWindowDimensions] = useState({\n    width: typeof window !== 'undefined' ? window.innerWidth : 1200,\n    height: typeof window !== 'undefined' ? window.innerHeight : 800,\n  });\n\n  // Update window dimensions on resize\n  useEffect(() => {\n    const handleResize = () => {\n      setWindowDimensions({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    };\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  const dragConstraints = fullSize\n    ? undefined\n    : {\n        left: PADDING,\n        right: Math.max(PADDING, windowDimensions.width - panelSize.width - PADDING),\n        top: PADDING,\n        bottom: Math.max(PADDING, windowDimensions.height - panelSize.height - PADDING),\n      };\n\n  // Clamp initial position and any position updates to be within bounds\n  const clampPositionToBounds = useCallback(\n    (position: { x: number; y: number }) => {\n      if (fullSize) {\n        return position;\n      }\n\n      return {\n        x: Math.max(\n          PADDING,\n          Math.min(\n            position.x,\n            Math.max(PADDING, windowDimensions.width - panelSize.width - PADDING),\n          ),\n        ),\n        y: Math.max(\n          PADDING,\n          Math.min(\n            position.y,\n            Math.max(PADDING, windowDimensions.height - panelSize.height - PADDING),\n          ),\n        ),\n      };\n    },\n    [windowDimensions, panelSize, fullSize],\n  );\n\n  // Clamp position on window resize\n  useEffect(() => {\n    if (!fullSize) {\n      const clampedPosition = clampPositionToBounds(panelPosition);\n      if (clampedPosition.x !== panelPosition.x || clampedPosition.y !== panelPosition.y) {\n        setPanelPosition(clampedPosition);\n      }\n    }\n  }, [windowDimensions, panelPosition, clampPositionToBounds, fullSize]);\n\n  useEffect(() => {\n    if (wasFullSizeToggled) {\n      const timer = setTimeout(() => setWasFullSizeToggled(false), 400); // match duration\n      return () => clearTimeout(timer);\n    }\n  }, [wasFullSizeToggled]);\n\n  // We need this useEffect here to sync a ref to the panel size, which is needed for resizing\n  useEffect(() => {\n    panelSizeRef.current = panelSize;\n  }, [panelSize]);\n\n  // True while the panel is letting CSS auto-fit its height to content\n  // (`fitContent` opt-in, no manual resize yet, not in fullsize). In this mode\n  // we omit `height` from the framer-motion animate prop so the styled\n  // container's `height: max-content` is in effect.\n  const isAutoHeight = fitContent && !hasManuallyResized && !fullSize;\n\n  // Unified resize handler for all directions\n  function handleResizeMouseDown(\n    event: React.MouseEvent<HTMLDivElement>,\n    direction: ResizeDirection,\n  ) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    let currentWidth: number;\n    let currentHeight: number;\n    let currentX: number;\n    let currentY: number;\n\n    if (fullSize) {\n      // Exit fullscreen but preserve the current rendered dimensions so the panel\n      // appears to stay in place while the user resizes from the edges.\n      // Measure from the DOM so we get the real pixel width/height regardless of\n      // what `calc(100% - 16px)` resolves to (differs for portaled vs. in-place\n      // panels because `100%` is relative to the containing block, not the viewport).\n      const container = contentRef.current?.parentElement;\n      currentWidth = container?.offsetWidth ?? windowDimensions.width - 16;\n      currentHeight = container?.offsetHeight ?? windowDimensions.height - 16;\n      currentX = 8;\n      currentY = 8;\n      // Sync motion values now so x.get()/y.get() return the correct position for\n      // computing fixed-edge anchors below.\n      x.set(8);\n      y.set(8);\n      setFullSize(false);\n      setPanelSize({ width: currentWidth, height: currentHeight });\n      setPanelPosition({ x: currentX, y: currentY });\n    } else if (isAutoHeight) {\n      // If we're leaving CSS auto-fit, capture the current rendered height so the\n      // panel doesn't jump from its content-fit size back to `initialHeight` when\n      // pixel mode takes over.\n      const container = contentRef.current?.parentElement;\n      currentHeight = container?.offsetHeight ?? panelSize.height;\n      currentWidth = panelSize.width;\n      currentX = panelPosition.x;\n      currentY = panelPosition.y;\n      setPanelSize({ width: currentWidth, height: currentHeight });\n    } else {\n      currentWidth = panelSize.width;\n      currentHeight = panelSize.height;\n      currentX = panelPosition.x;\n      currentY = panelPosition.y;\n    }\n\n    panelSizeRef.current = { width: currentWidth, height: currentHeight };\n    // Capture start dimensions in a ref so handleResizeMouseMove (stale closure)\n    // can read the correct initial values for unchanged axes without depending on\n    // panelSize/panelPosition state captured at listener-registration time.\n    resizeStartDimensionsRef.current = {\n      width: currentWidth,\n      height: currentHeight,\n      x: currentX,\n      y: currentY,\n    };\n\n    // Mark that user has manually resized - disable auto-resize from now on\n    setHasManuallyResized(true);\n\n    resizeDirectionRef.current = direction;\n\n    // Calculate initial offsets and fixed points based on direction\n    if (direction === ResizeDirection.SouthEast) {\n      // Bottom-right: resize from bottom-right corner\n      resizeOffsetRef.current = {\n        x: event.clientX - currentWidth,\n        y: event.clientY - currentHeight,\n      };\n    } else if (direction === ResizeDirection.SouthWest) {\n      // Bottom-left: resize from bottom-left corner\n      resizeRightRef.current = x.get() + currentWidth;\n      resizeOffsetRef.current = {\n        x: event.clientX,\n        y: event.clientY - currentHeight,\n      };\n    } else if (direction === ResizeDirection.NorthWest) {\n      // Top-left: resize from top-left corner\n      resizeRightRef.current = x.get() + currentWidth;\n      resizeBottomRef.current = y.get() + currentHeight;\n      resizeOffsetRef.current = {\n        x: event.clientX,\n        y: event.clientY,\n      };\n    } else if (direction === ResizeDirection.NorthEast) {\n      // Top-right: resize from top-right corner\n      resizeBottomRef.current = y.get() + currentHeight;\n      resizeOffsetRef.current = {\n        x: event.clientX - currentWidth,\n        y: event.clientY,\n      };\n    } else if (direction === ResizeDirection.West) {\n      // Left edge\n      resizeRightRef.current = x.get() + currentWidth;\n      resizeOffsetRef.current = {\n        x: event.clientX,\n        y: 0,\n      };\n    } else if (direction === ResizeDirection.East) {\n      // Right edge\n      resizeOffsetRef.current = {\n        x: event.clientX - currentWidth,\n        y: 0,\n      };\n    } else if (direction === ResizeDirection.North) {\n      // Top edge\n      resizeBottomRef.current = y.get() + currentHeight;\n      resizeOffsetRef.current = {\n        x: 0,\n        y: event.clientY,\n      };\n    } else if (direction === ResizeDirection.South) {\n      // Bottom edge\n      resizeOffsetRef.current = {\n        x: 0,\n        y: event.clientY - currentHeight,\n      };\n    }\n\n    document.addEventListener('mousemove', handleResizeMouseMove);\n    document.addEventListener('mouseup', handleResizeMouseUp);\n  }\n\n  // ResizeMouseMove to calculate the new size and position of the panel\n  function handleResizeMouseMove(event: MouseEvent) {\n    const direction = resizeDirectionRef.current;\n    // Use resizeStartDimensionsRef (a ref, always current) rather than panelSize/panelPosition\n    // (stale closure values). For unchanged axes, these provide the correct starting dimensions\n    // set at drag start — including the case where the drag began in fullscreen mode.\n    let newWidth = resizeStartDimensionsRef.current.width;\n    let newHeight = resizeStartDimensionsRef.current.height;\n    let clampedX = resizeStartDimensionsRef.current.x;\n    let clampedY = resizeStartDimensionsRef.current.y;\n\n    if (direction === ResizeDirection.SouthEast) {\n      // Bottom-right corner\n      newWidth = Math.round(Math.max(minWidth, event.clientX - resizeOffsetRef.current.x));\n      newHeight = Math.round(Math.max(minHeight, event.clientY - resizeOffsetRef.current.y));\n    } else if (direction === ResizeDirection.SouthWest) {\n      // Bottom-left corner\n      const right = resizeRightRef.current!;\n      const proposedX = event.clientX;\n      newWidth = Math.round(Math.max(minWidth, right - proposedX));\n      clampedX = Math.round(right - newWidth);\n      newHeight = Math.round(Math.max(minHeight, event.clientY - resizeOffsetRef.current.y));\n    } else if (direction === ResizeDirection.NorthWest) {\n      // Top-left corner\n      const right = resizeRightRef.current!;\n      const bottom = resizeBottomRef.current!;\n      const proposedX = event.clientX;\n      const proposedY = event.clientY;\n      newWidth = Math.round(Math.max(minWidth, right - proposedX));\n      newHeight = Math.round(Math.max(minHeight, bottom - proposedY));\n      clampedX = Math.round(right - newWidth);\n      clampedY = Math.round(bottom - newHeight);\n    } else if (direction === ResizeDirection.NorthEast) {\n      // Top-right corner\n      const bottom = resizeBottomRef.current!;\n      const proposedY = event.clientY;\n      newWidth = Math.round(Math.max(minWidth, event.clientX - resizeOffsetRef.current.x));\n      newHeight = Math.round(Math.max(minHeight, bottom - proposedY));\n      clampedY = Math.round(bottom - newHeight);\n    } else if (direction === ResizeDirection.West) {\n      // Left edge\n      const right = resizeRightRef.current!;\n      const proposedX = event.clientX;\n      newWidth = Math.round(Math.max(minWidth, right - proposedX));\n      clampedX = Math.round(right - newWidth);\n    } else if (direction === ResizeDirection.East) {\n      // Right edge\n      newWidth = Math.round(Math.max(minWidth, event.clientX - resizeOffsetRef.current.x));\n    } else if (direction === ResizeDirection.North) {\n      // Top edge\n      const bottom = resizeBottomRef.current!;\n      const proposedY = event.clientY;\n      newHeight = Math.round(Math.max(minHeight, bottom - proposedY));\n      clampedY = Math.round(bottom - newHeight);\n    } else if (direction === ResizeDirection.South) {\n      // Bottom edge\n      newHeight = Math.round(Math.max(minHeight, event.clientY - resizeOffsetRef.current.y));\n    }\n\n    // We need to flush sync here because it would create jitter while the panel resizes from other directions\n    // this is because the browser will animate serially, but we want to update the position and size together\n    // so that the panel doesn't jump around\n    flushSync(() => {\n      setPanelPosition({ x: clampedX, y: clampedY });\n      setPanelSize({ width: newWidth, height: newHeight });\n    });\n  }\n\n  function handleResizeMouseUp() {\n    document.removeEventListener('mousemove', handleResizeMouseMove);\n    document.removeEventListener('mouseup', handleResizeMouseUp);\n  }\n\n  const panelContent = (\n    <FloatingPanelContainer\n      // Need to keep the values of x and y for positioning\n      ref={refs.setFloating}\n      $fitHeight={isAutoHeight}\n      $maxHeight={autoFitMaxHeight(windowDimensions.height, panelPosition.y, minHeight)}\n      $minHeight={minHeight}\n      style={{\n        x,\n        y,\n      }}\n      initial={{\n        top: 0,\n        left: 0,\n        opacity: 0,\n      }}\n      animate={{\n        x: fullSize ? PADDING : panelPosition.x,\n        y: fullSize ? PADDING : panelPosition.y,\n\n        // When fullscreen, leave space for any reserved right-side content.\n        width: fullSize ? `calc(100% - ${PADDING + fullscreenRightInset}px)` : panelSize.width,\n        // Omit height when CSS auto-fit is active so `height: max-content`\n        // on the styled container takes effect.\n        ...(isAutoHeight ? {} : { height: fullSize ? 'calc(100% - 16px)' : panelSize.height }),\n        opacity: isPositionReady ? 1 : 0,\n      }}\n      transition={\n        wasFullSizeToggled\n          ? {\n              type: 'tween',\n              // Easing curve for a smooth transition\n              ease: [0.83, 0.0, 0.17, 1.0],\n              duration: prefersReducedMotion ? 1.2 : 0.4,\n            }\n          : { opacity: { duration: 0.15, ease: 'easeOut' }, duration: 0 }\n      }\n      onDragEnd={() => {\n        if (!fullSize) {\n          const newPosition = { x: x.get(), y: y.get() };\n          const clampedPosition = clampPositionToBounds(newPosition);\n          setPanelPosition(clampedPosition);\n        }\n      }}\n      drag={!fullSize}\n      dragControls={dragControls}\n      dragListener={false}\n      dragMomentum={false}\n      dragConstraints={dragConstraints}\n      // The frame portals to the body, so panels that dismiss on an outside click\n      // need this id to recognize a click in here as one of their own overlays.\n      id={`${FLOATING_PANEL_ID_PREFIX}container`}\n      {...restProps}\n    >\n      <DragHandle isFullSize={fullSize} onPointerDown={(e) => dragControls.start(e)}>\n        <Stack align='center' direction='horizontal' justify='space-between'>\n          <PanelText>{title}</PanelText>\n          <Stack direction='horizontal' align='center' spacing={Spacing[1]}>\n            {headerActions}\n            {canFullsize && (\n              <StyledIconButton\n                size='sm'\n                aria-label={fullSize ? 'collapse' : 'expand'}\n                id='floating-panel__toggle-fullsize'\n                onClick={() => {\n                  setWasFullSizeToggled(true);\n                  setFullSize(!fullSize);\n                }}\n              >\n                {fullSize ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              </StyledIconButton>\n            )}\n\n            <StyledIconButton\n              size='sm'\n              id='floating-panel__close-panel'\n              onClick={() => onClose?.()}\n              aria-label='close'\n            >\n              <XIcon />\n            </StyledIconButton>\n          </Stack>\n        </Stack>\n      </DragHandle>\n      <PanelContent ref={contentRef} $noPadding={noPadding} $fitHeight={isAutoHeight}>\n        {children}\n      </PanelContent>\n      {hasFooter && (\n        <Footer style={{ paddingLeft: isAdditionalActionButton ? Spacing[1] : Spacing[3] }}>\n          <Stack\n            align='center'\n            direction='horizontal'\n            justify={footerAdditionalAction ? 'space-between' : 'flex-end'}\n          >\n            {footerAdditionalAction &&\n              (isAdditionalActionButton ? (\n                footerAdditionalAction\n              ) : (\n                <PanelText>{footerAdditionalAction}</PanelText>\n              ))}\n\n            {footerButtons && <div>{footerButtons}</div>}\n          </Stack>\n        </Footer>\n      )}\n      <ResizeHandleBottomRight\n        data-test='resize-handle-se'\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.SouthEast)}\n      />\n      <ResizeHandleBottom\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.South)}\n      />\n      <ResizeHandleBottomLeft\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.SouthWest)}\n      />\n      <ResizeHandleLeft\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.West)}\n      />\n      <ResizeHandleTopLeft\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.NorthWest)}\n      />\n      <ResizeHandleTop\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.North)}\n      />\n      <ResizeHandleTopRight\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.NorthEast)}\n      />\n      <ResizeHandleRight\n        onMouseDown={(event) => handleResizeMouseDown(event, ResizeDirection.East)}\n      />\n    </FloatingPanelContainer>\n  );\n\n  const content = (\n    <>\n      {dismissOnNavigate && <DismissOnNavigate onClose={onClose} />}\n      {panelContent}\n    </>\n  );\n\n  return portal ? createPortal(content, document.body) : content;\n}\n","import {\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { v4 as uuid } from 'uuid';\n\nexport type Panel = {\n  key: string;\n  panelElement: ReactElement;\n  persistUntilPathRoot?: string;\n};\n\ninterface PanelContextType {\n  openPanel: (panel: Panel) => void;\n  closePanel: (key: string) => void;\n  togglePanel: (panel: Panel) => void;\n  closeAllPanels: () => void;\n  isPanelOpen: (key: string) => boolean;\n  panels: Panel[];\n}\n\nconst PanelContext = createContext<PanelContextType | null>(null);\n\nexport const PanelProvider = ({ children }: { children: ReactNode }) => {\n  const [panels, setPanels] = useState<Panel[]>([]);\n  const location = useLocation();\n\n  function shouldPanelPersist(currentUrl: string, persistUntilPathRoot?: string): boolean {\n    if (!persistUntilPathRoot) {\n      return false;\n    }\n    return currentUrl.includes(persistUntilPathRoot);\n  }\n\n  const openPanel = useCallback(\n    (panel: Panel) => {\n      const { key, panelElement, persistUntilPathRoot } = panel;\n      const pathRoot = persistUntilPathRoot || location.pathname;\n      setPanels((prev) => [\n        ...prev.filter((p) => p.key !== key), // Remove existing panel with same key\n        { key, panelElement, persistUntilPathRoot: pathRoot },\n      ]);\n    },\n    [location.pathname],\n  );\n\n  const closePanel = useCallback((key: string) => {\n    setPanels((prev) => prev.filter((panel) => panel.key !== key));\n  }, []);\n\n  const isPanelOpen = useCallback(\n    (key: string) => {\n      return panels.some((panel) => panel.key === key);\n    },\n    [panels],\n  );\n\n  const togglePanel = useCallback(\n    (panel: Panel) => {\n      const { key } = panel;\n      if (isPanelOpen(key)) {\n        closePanel(key);\n      } else {\n        openPanel(panel);\n      }\n    },\n    [isPanelOpen, closePanel, openPanel],\n  );\n\n  const closeAllPanels = useCallback(() => {\n    setPanels([]);\n  }, []);\n\n  useEffect(() => {\n    const nextLocation = location.pathname;\n\n    setPanels((prevPanels) =>\n      prevPanels.filter((panel) => shouldPanelPersist(nextLocation, panel.persistUntilPathRoot)),\n    );\n  }, [location.pathname]);\n\n  return (\n    <PanelContext.Provider\n      value={{ openPanel, closePanel, togglePanel, closeAllPanels, panels, isPanelOpen }}\n    >\n      {children}\n    </PanelContext.Provider>\n  );\n};\n\nexport const usePersistentFloatingPanels = () => {\n  const ctx = useContext(PanelContext);\n  if (!ctx) {\n    throw new Error('usePersistentFloatingPanels must be used within a PanelProvider');\n  }\n  return ctx;\n};\n\n// This hook is used to open a panel that persists across multiple pages\n// For single page panels, use the useToggle hook instead to manage individual panel state.\nexport const usePersistentFloatingPanel = (panelId?: string) => {\n  const ctx = useContext(PanelContext);\n  if (!ctx) {\n    throw new Error('usePersistentFloatingPanels must be used within a PanelProvider');\n  }\n\n  // If the panel doesn't need to persist across multiple pages, we generate an id that can be passed back\n  const currentPanelId = panelId || `panel-${uuid()}`;\n\n  return {\n    id: currentPanelId,\n    openPanel: useCallback(\n      (panel: Panel) => {\n        ctx.openPanel(panel);\n      },\n      [ctx],\n    ),\n    closePanel: useCallback(() => {\n      ctx.closePanel(currentPanelId);\n    }, [currentPanelId, ctx]),\n    togglePanel: useCallback(\n      (panel: Panel) => {\n        ctx.togglePanel(panel);\n      },\n      [ctx],\n    ),\n    isPanelOpen: ctx.isPanelOpen(currentPanelId),\n  };\n};\n","import { cloneElement } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { usePersistentFloatingPanels } from './FloatingPanelContext';\n\nexport default function FloatingPanelRenderer() {\n  const { panels, closePanel } = usePersistentFloatingPanels();\n\n  if (panels.length === 0) {\n    return null;\n  }\n\n  return createPortal(\n    panels.map(({ key, panelElement: panel }) => {\n      return cloneElement(panel, { onClose: () => closePanel(key), key: key });\n    }),\n    document.body,\n  );\n}\n"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
-import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "../../FormControl-Doj2gvF0.mjs";
-import { r as useFormField } from "../../useFormField-B2U4GOH4.mjs";
+import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "../../FormControl-CfpwZGlD.mjs";
+import { r as useFormField } from "../../useFormField-BBbq1izo.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormControlBaseProps, FormControlProps, FormInputContainer, FormLabel, FormLabelProps, HelperText, WarningText, useFormField };

package/dist/components/FormControl/index.mjs

@@ -1,3 +1,3 @@
-import { n as useFormField } from "../../useFormField-eftOPiXj.mjs";
-import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText, t as Container } from "../../FormControl-HVzZEqJH.mjs";
+import { n as useFormField } from "../../useFormField-Bz2iMPBO.mjs";
+import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText, t as Container } from "../../FormControl-D1HIqDKm.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormInputContainer, FormLabel, HelperText, WarningText, useFormField };

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

@@ -1,4 +1,4 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-D8dHbqZZ.mjs";
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-0p4y0sS5.mjs";
 import { CheckboxField, CheckboxFieldProps, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, ImplementsFormField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps } from "../../inputFields.mjs";
 import CheckboxGroupField from "../../CheckboxGroupField.mjs";
 import ListBoxField from "../../ListBoxField.mjs";

package/dist/components/FormField/index.mjs

@@ -1,2 +1,2 @@
-import { a as CheckboxField, c as SegmentedControlField, d as TextField, f as ToggleField, i as CheckboxGroupField, l as SelectField, m as FormField, n as TableBoxField, o as ComboboxField, p as splitOutFormFieldProps, r as ListBoxField, s as RadioGroupField, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, u as TextAreaField } from "../../FormField-B9P3BWvS.mjs";
+import { a as CheckboxField, c as SegmentedControlField, d as TextField, f as ToggleField, i as CheckboxGroupField, l as SelectField, m as FormField, n as TableBoxField, o as ComboboxField, p as splitOutFormFieldProps, r as ListBoxField, s as RadioGroupField, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, u as TextAreaField } from "../../FormField-CVnbsNvU.mjs";
 export { CheckboxField, CheckboxGroupField, ComboboxField, FormField, FormField as default, ListBoxField, RadioGroupField, SegmentedControlField, SelectField, TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, TableBoxField, TextAreaField, TextField, ToggleField, splitOutFormFieldProps };

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

@@ -1,2 +1,2 @@
-import HoverCopyableField from "../../HoverCopyableField.mjs";
-export { HoverCopyableField as default };
+import HoverCopyableField, { CopySuccessDetail, HoverCopyableFieldProps } from "../../HoverCopyableField.mjs";
+export { type CopySuccessDetail, type HoverCopyableFieldProps, HoverCopyableField as default };

package/dist/components/HoverCopyableField/index.mjs

@@ -1,2 +1,2 @@
-import { t as HoverCopyableField_default } from "../../HoverCopyableField-0Bzygbp9.mjs";
-export { HoverCopyableField_default as default };
+import { t as HoverCopyableField } from "../../HoverCopyableField-HWshrU_1.mjs";
+export { HoverCopyableField as default };

package/dist/components/ImageTile/index.mjs

@@ -1,16 +1,16 @@
-import { focusOutline } from "../../mixins/focus.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { i as Paragraph } from "../../Text-B0orb-cZ.mjs";
 import "../../variables/transitions.mjs";
-import { n as Stack } from "../../Stack-Bl54WmhY.mjs";
-import { i as Paragraph } from "../../Text-RcEfNFLx.mjs";
-import { a as Tooltip } from "../../Tooltip-BvDbmXak.mjs";
-import { t as IconButton } from "../../IconButton-BfDlic2K.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-BCyV8nC0.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-DC2vqicd.mjs";
-import { t as Checkbox } from "../../Checkbox-DAvbgZgO.mjs";
+import { a as Tooltip } from "../../Tooltip-iJcfJqxn.mjs";
+import { focusOutline } from "../../mixins/focus.mjs";
+import { n as Stack } from "../../Stack-Bre2oiov.mjs";
+import { t as IconButton } from "../../IconButton-BgL3QUVO.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-82xH1AZr.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-dsBWRdTU.mjs";
+import { t as Checkbox } from "../../Checkbox-Ccuicmlo.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ImageIcon, LockedIcon, MoreIcon } from "@persona/icons";
 //#region components/ImageTile/ImageTile.tsx
 const MIN_WIDTH = "180px";

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

@@ -1,2 +1,2 @@
-import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-CVdjkX88.mjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-BHHWpSKN.mjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

package/dist/components/Input/index.mjs

@@ -1,4 +1,4 @@
-import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-Bimw8KFj.mjs";
+import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-DoB8YswA.mjs";
 //#region components/Input/index.ts
 var Input_default = Input;
 //#endregion

package/dist/components/Link/index.mjs

@@ -1,11 +1,11 @@
-import { focusOutline } from "../../mixins/focus.mjs";
-import "../../variables/transitions.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
+import "../../variables/transitions.mjs";
+import { focusOutline } from "../../mixins/focus.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Link as Link$1 } from "react-router-dom";
 import { LinkExternalIcon } from "@persona/icons";
+import { Link as Link$1 } from "react-router-dom";
 //#region components/Link/Link.tsx
 const IconContainer = styled.span`
   display: inline-block;

package/dist/components/Link/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["RouterLink"],"sources":["../../../components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\nimport { Link as RouterLink, type LinkProps as RouterLinkProps } from 'react-router-dom';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LinkExternalIcon } from '@persona/icons';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ntype Target = '_blank' | '_self' | '_parent' | '_top';\n\ninterface BaseLinkProps {\n  /**\n   * The content to display inside the link.\n   *\n   */\n  children?: ReactNode;\n  /**\n   * Provides an accessible name for the link when the visible text alone\n   * isn't descriptive enough for screen reader users\n   */\n  'aria-label'?: string;\n}\n\ninterface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The URL to navigate to. Can be internal (e.g., \"/dashboard\") or external (e.g., \"https://example.com\").\n   */\n  url: string;\n\n  /**\n   * Where to open the link. Use \"_blank\" for external links to open in a new tab.\n   */\n  target?: Target;\n}\n\ninterface InternalLinkProps extends BaseLinkProps, Omit<RouterLinkProps, 'to'> {\n  /**\n   * The URL to navigate to. Should be an internal route (e.g., \"/dashboard\").\n   */\n  url: string;\n}\n\nexport type LinkProps = ExternalLinkProps | InternalLinkProps;\n\nconst IconContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  /* Uses padding here since we can't define flex on the element for multiline support */\n  padding-left: 2px;\n  /* Needed to reset the height of the container for SVG */\n  line-height: 0;\n  position: relative;\n  /* Optical alignment adjustments */\n  bottom: 1px;\n`;\n\nconst baseLinkStyles = css`\n  ${paragraphMixins.md};\n  color: ${Color.CorePurple600};\n  width: fit-content;\n  position: relative;\n  overflow: hidden;\n  text-decoration: underline;\n\n  transition:\n    color ${TransitionDuration.ExtraFast} ease-out,\n    text-underline-offset ${TransitionDuration.ExtraFast} ease-out;\n  text-underline-offset: 2px;\n\n  &:hover {\n    /* TODO (ivan): move to semantic tokens */\n    color: ${Color.CorePurple800};\n    text-underline-offset: ${Spacing[1]};\n  }\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n  ${focusOutline}\n\n  &:active {\n    /* TODO (ivan): move to semantic tokens */\n    color: ${Color.CorePurple900};\n  }\n`;\n\nconst StyledAnchor = styled.a`\n  ${baseLinkStyles}\n`;\n\nconst StyledRouterLink = styled(RouterLink)`\n  ${baseLinkStyles}\n`;\n\nexport const Link = ({ children, url, ...props }: LinkProps) => {\n  // Check if the URL is external by looking at the protocol or if target is _blank\n  const isAbsoluteUrl = /^https?:\\/\\//.test(url);\n  const hasBlankTarget = props.target === '_blank';\n  const isExternal = isAbsoluteUrl || hasBlankTarget;\n\n  if (isExternal) {\n    const { 'aria-label': ariaLabel, ...anchorProps } = props;\n    const externalProps = {\n      href: url,\n      target: '_blank',\n      rel: 'noopener noreferrer',\n      'aria-label': ariaLabel,\n      // Automatically inform screen readers that link opens in new window\n      title: ariaLabel ? undefined : 'Opens in new window',\n      ...anchorProps,\n    };\n\n    return (\n      <StyledAnchor {...externalProps}>\n        {children}\n        <IconContainer>\n          <LinkExternalIcon size={12} />\n        </IconContainer>\n      </StyledAnchor>\n    );\n  }\n\n  // Internal link using React Router\n  const { 'aria-label': ariaLabel, ...routerProps } = props;\n  const internalProps = {\n    to: url,\n    'aria-label': ariaLabel,\n\n    ...routerProps,\n  };\n\n  return <StyledRouterLink {...internalProps}>{children}</StyledRouterLink>;\n};\n\nexport default Link;\n"],"mappings":";;;;;;;;;AA8CA,MAAM,gBAAgB,OAAO,IAAI;;;;;;;;;;;AAYjC,MAAM,iBAAiB,GAAG;IACtB,gBAAgB,GAAG;WACZ,MAAM,cAAc;;;;;;;oBAOU;oCACgB;;;;;aAK5C,MAAM,cAAc;6BACJ,QAAQ,GAAG;;;oBAGpB,EAAE,YAAY,MAAM,OAAO,aAAa;IACxD,aAAa;;;;aAIJ,MAAM,cAAc;;;AAIjC,MAAM,eAAe,OAAO,CAAC;IACzB,eAAe;;AAGnB,MAAM,mBAAmB,OAAOA,OAAW;IACvC,eAAe;;AAGnB,MAAa,QAAQ,EAAE,UAAU,KAAK,GAAG,YAAuB;CAE9D,MAAM,gBAAgB,eAAe,KAAK,IAAI;CAC9C,MAAM,iBAAiB,MAAM,WAAW;AAGxC,KAFmB,iBAAiB,gBAEpB;EACd,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAWpD,SACE,qBAAC,cAAD;GAVA,MAAM;GACN,QAAQ;GACR,KAAK;GACL,cAAc;GAEd,OAAO,YAAY,KAAA,IAAY;GAC/B,GAAG;aAIH,CACG,UACD,oBAAC,eAAD,EAAA,UACE,oBAAC,kBAAD,EAAkB,MAAM,IAAM,CAAA,EAChB,CAAA,CACH;;;CAKnB,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAQpD,QAAO,oBAAC,kBAAD;EANL,IAAI;EACJ,cAAc;EAEd,GAAG;EAGwC;EAA4B,CAAA"}
+{"version":3,"file":"index.mjs","names":["RouterLink"],"sources":["../../../components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\nimport { Link as RouterLink, type LinkProps as RouterLinkProps } from 'react-router-dom';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LinkExternalIcon } from '@persona/icons';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ntype Target = '_blank' | '_self' | '_parent' | '_top';\n\ninterface BaseLinkProps {\n  /**\n   * The content to display inside the link.\n   *\n   */\n  children?: ReactNode;\n  /**\n   * Provides an accessible name for the link when the visible text alone\n   * isn't descriptive enough for screen reader users\n   */\n  'aria-label'?: string;\n}\n\ninterface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The URL to navigate to. Can be internal (e.g., \"/settings\") or external (e.g., \"https://example.com\").\n   */\n  url: string;\n\n  /**\n   * Where to open the link. Use \"_blank\" for external links to open in a new tab.\n   */\n  target?: Target;\n}\n\ninterface InternalLinkProps extends BaseLinkProps, Omit<RouterLinkProps, 'to'> {\n  /**\n   * The URL to navigate to. Should be an internal route (e.g., \"/settings\").\n   */\n  url: string;\n}\n\nexport type LinkProps = ExternalLinkProps | InternalLinkProps;\n\nconst IconContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  /* Uses padding here since we can't define flex on the element for multiline support */\n  padding-left: 2px;\n  /* Needed to reset the height of the container for SVG */\n  line-height: 0;\n  position: relative;\n  /* Optical alignment adjustments */\n  bottom: 1px;\n`;\n\nconst baseLinkStyles = css`\n  ${paragraphMixins.md};\n  color: ${Color.CorePurple600};\n  width: fit-content;\n  position: relative;\n  overflow: hidden;\n  text-decoration: underline;\n\n  transition:\n    color ${TransitionDuration.ExtraFast} ease-out,\n    text-underline-offset ${TransitionDuration.ExtraFast} ease-out;\n  text-underline-offset: 2px;\n\n  &:hover {\n    /* TODO (ivan): move to semantic tokens */\n    color: ${Color.CorePurple800};\n    text-underline-offset: ${Spacing[1]};\n  }\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n  ${focusOutline}\n\n  &:active {\n    /* TODO (ivan): move to semantic tokens */\n    color: ${Color.CorePurple900};\n  }\n`;\n\nconst StyledAnchor = styled.a`\n  ${baseLinkStyles}\n`;\n\nconst StyledRouterLink = styled(RouterLink)`\n  ${baseLinkStyles}\n`;\n\nexport const Link = ({ children, url, ...props }: LinkProps) => {\n  // Check if the URL is external by looking at the protocol or if target is _blank\n  const isAbsoluteUrl = /^https?:\\/\\//.test(url);\n  const hasBlankTarget = props.target === '_blank';\n  const isExternal = isAbsoluteUrl || hasBlankTarget;\n\n  if (isExternal) {\n    const { 'aria-label': ariaLabel, ...anchorProps } = props;\n    const externalProps = {\n      href: url,\n      target: '_blank',\n      rel: 'noopener noreferrer',\n      'aria-label': ariaLabel,\n      // Automatically inform screen readers that link opens in new window\n      title: ariaLabel ? undefined : 'Opens in new window',\n      ...anchorProps,\n    };\n\n    return (\n      <StyledAnchor {...externalProps}>\n        {children}\n        <IconContainer>\n          <LinkExternalIcon size={12} />\n        </IconContainer>\n      </StyledAnchor>\n    );\n  }\n\n  // Internal link using React Router\n  const { 'aria-label': ariaLabel, ...routerProps } = props;\n  const internalProps = {\n    to: url,\n    'aria-label': ariaLabel,\n\n    ...routerProps,\n  };\n\n  return <StyledRouterLink {...internalProps}>{children}</StyledRouterLink>;\n};\n\nexport default Link;\n"],"mappings":";;;;;;;;;AA8CA,MAAM,gBAAgB,OAAO,IAAI;;;;;;;;;;;AAYjC,MAAM,iBAAiB,GAAG;IACtB,gBAAgB,GAAG;WACZ,MAAM,cAAc;;;;;;;oBAOU;oCACgB;;;;;aAK5C,MAAM,cAAc;6BACJ,QAAQ,GAAG;;;oBAGpB,EAAE,YAAY,MAAM,OAAO,aAAa;IACxD,aAAa;;;;aAIJ,MAAM,cAAc;;;AAIjC,MAAM,eAAe,OAAO,CAAC;IACzB,eAAe;;AAGnB,MAAM,mBAAmB,OAAOA,OAAW;IACvC,eAAe;;AAGnB,MAAa,QAAQ,EAAE,UAAU,KAAK,GAAG,YAAuB;CAE9D,MAAM,gBAAgB,eAAe,KAAK,IAAI;CAC9C,MAAM,iBAAiB,MAAM,WAAW;AAGxC,KAFmB,iBAAiB,gBAEpB;EACd,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAWpD,SACE,qBAAC,cAAD;GAVA,MAAM;GACN,QAAQ;GACR,KAAK;GACL,cAAc;GAEd,OAAO,YAAY,KAAA,IAAY;GAC/B,GAAG;aAIH,CACG,UACD,oBAAC,eAAD,EAAA,UACE,oBAAC,kBAAD,EAAkB,MAAM,IAAM,CAAA,EAChB,CAAA,CACH;;;CAKnB,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAQpD,QAAO,oBAAC,kBAAD;EANL,IAAI;EACJ,cAAc;EAEd,GAAG;EAGwC;EAA4B,CAAA"}

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

@@ -1,4 +1,4 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-CDl5oZPX.mjs";
-import { n as LogicRowProps } from "../../LogicRow-CkbyvrUw.mjs";
-import { t as ListBox } from "../../index-DiCnyORA.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-BrY1bQ5-.mjs";
+import { n as LogicRowProps } from "../../LogicRow-9a_klV2v.mjs";
+import { t as ListBox } from "../../index-BxBsQi2S.mjs";
 export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, LogicRowProps, useListBoxContext };

package/dist/components/ListBox/index.mjs

@@ -1,2 +1,2 @@
-import { n as useListBoxContext, t as ListBox } from "../../ListBox-DKZpGYjo.mjs";
+import { n as useListBoxContext, t as ListBox } from "../../ListBox-B9uuMt2R.mjs";
 export { ListBox, ListBox as default, useListBoxContext };

package/dist/components/LoadingShimmer/index.mjs

@@ -1,2 +1,2 @@
-import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-DC2vqicd.mjs";
+import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-dsBWRdTU.mjs";
 export { LoadingShimmer, LoadingShimmerHeading, LoadingShimmerParagraph, MaybeLoadingShimmer };

package/dist/components/MaskedInput/index.mjs

@@ -1,6 +1,6 @@
-import { n as Input } from "../../Input-Bimw8KFj.mjs";
-import { jsx } from "react/jsx-runtime";
+import { n as Input } from "../../Input-DoB8YswA.mjs";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { IMaskMixin } from "react-imask";
 //#region components/MaskedInput/MaskedInput.tsx
 const MaskedInputBase = IMaskMixin(({ inputRef, size, componentProps, ...props }) => /* @__PURE__ */ jsx(Input, {

package/dist/components/MatchHighlight/index.mjs

@@ -1,5 +1,5 @@
+import { a as styled } from "../../styledComponentsInterop-8zScIQyC.mjs";
 import { Spacing } from "@persona/design-tokens";
-import styled from "styled-components";
 //#region components/MatchHighlight/MatchHighlight.tsx
 const MatchHighlight = styled.span`
   /* Sizing and Borders */

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

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "../../Menu-CYRdEnfo.mjs";
+import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "../../Menu-D4Y_J-QI.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/components/Menu/index.mjs

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuList, i as Menu, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuItem, t as FloatingCard } from "../../Menu-Dir03WA9.mjs";
+import { a as MenuDivider, c as MenuList, i as Menu, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuItem, t as FloatingCard } from "../../Menu-CHbUf9PQ.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuItem, MenuList };

package/dist/components/Modal/index.mjs

@@ -1,14 +1,14 @@
-import { n as Stack, t as HStack } from "../../Stack-Bl54WmhY.mjs";
-import { t as Card_default } from "../../Card-BMCB9eFC.mjs";
-import { n as Heading$1 } from "../../Text-RcEfNFLx.mjs";
-import useEmbeddedSurface from "../../lib/useEmbeddedSurface.mjs";
-import { n as Button$1 } from "../../IconButton-BfDlic2K.mjs";
-import { i as TabBar, r as Tab } from "../../TabBar-D6UocZXi.mjs";
+import { a as styled } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { t as Card_default } from "../../Card-CKrJtn1f.mjs";
+import { n as Heading$1 } from "../../Text-B0orb-cZ.mjs";
+import useEmbeddedSurface, { useEmbeddedSurfaceGate, useEmbeddedSurfaceId } from "../../lib/useEmbeddedSurface.mjs";
+import { n as Stack, t as HStack } from "../../Stack-Bre2oiov.mjs";
+import { n as Button$1 } from "../../IconButton-BgL3QUVO.mjs";
+import { i as TabBar, r as Tab } from "../../TabBar-sYllYizt.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled from "styled-components";
+import { forwardRef, useContext, useEffect, useRef, useState } from "react";
+import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay, OverlayTriggerStateContext, Pressable } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay, Pressable } from "react-aria-components";
-import { forwardRef, useEffect, useRef, useState } from "react";
 import { XIcon } from "@persona/icons";
 //#region lib/useModalInsetRight.ts
 const CSS_VAR = "--modal-inset-right";
@@ -91,6 +91,16 @@ const StyledModalOverlay = styled(ModalOverlay)`
   right: ${({ $insetRight }) => $insetRight};
   transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;
   animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;
+  animation-fill-mode: both;
+  ${({ $hostPending }) => $hostPending && `
+    animation-play-state: paused;
+  `}
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0ms;
+    animation-delay: 0ms;
+    animation-play-state: running;
+  }
   z-index: 10000;
   display: flex;
   align-items: center;
@@ -102,13 +112,30 @@ const StyledModal = styled(Modal)`
   width: fit-content;
   max-width: 100%;
 `;
-const EmbeddedSurfaceModal = forwardRef(function EmbeddedSurfaceModal({ children }, ref) {
-	useEmbeddedSurface();
+/**
+* React Aria keeps the overlay mounted through the exit animation, so announcing the surface from
+* here — rather than from the persistent gate below — releases the host's backdrop exactly when the
+* modal stops being painted.
+*/
+const EmbeddedSurfaceModal = forwardRef(function EmbeddedSurfaceModal({ children, surfaceId }, ref) {
+	useEmbeddedSurface(surfaceId);
 	return /* @__PURE__ */ jsx(StyledModal, {
 		ref,
 		children
 	});
 });
+const EmbeddedSurfaceOverlay = ({ surfaceId, ...props }) => {
+	const isOpen = useContext(OverlayTriggerStateContext)?.isOpen ?? false;
+	const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);
+	const { $insetRight, $transitionMs, ...overlayProps } = props;
+	return /* @__PURE__ */ jsx(StyledModalOverlay, {
+		...overlayProps,
+		$insetRight,
+		$transitionMs,
+		$animationDelayMs: animationDelayMs,
+		$hostPending: isOpen && !ready
+	});
+};
 const ModalCloseButton = styled(Button$1)`
   display: inline-flex;
   padding: ${Spacing[2]};
@@ -252,6 +279,7 @@ const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButt
 });
 const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size = "md", title, footer, tabs, defaultOpen, onOpenChange, isDismissable = false, isKeyboardDismissDisabled = false, open }) => {
 	const [portalContainer, setPortalContainer] = useState(null);
+	const surfaceId = useEmbeddedSurfaceId();
 	const { insetRight: modalInsetRight, panelState } = useModalInsetRight();
 	const transitionMs = panelState === "opening" ? 425 : panelState === "closing" ? 200 : 0;
 	const content = /* @__PURE__ */ jsx(ModalCard, {
@@ -268,7 +296,8 @@ const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size
 		isOpen: open,
 		defaultOpen,
 		onOpenChange,
-		children: [trigger ? /* @__PURE__ */ jsx(Pressable, { children: trigger }) : null, /* @__PURE__ */ jsx(StyledModalOverlay, {
+		children: [trigger ? /* @__PURE__ */ jsx(Pressable, { children: trigger }) : null, /* @__PURE__ */ jsx(EmbeddedSurfaceOverlay, {
+			surfaceId,
 			$insetRight: modalInsetRight,
 			$transitionMs: transitionMs,
 			isDismissable,
@@ -276,6 +305,7 @@ const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size
 			shouldCloseOnInteractOutside: (element) => !element.closest("[data-react-aria-top-layer]"),
 			children: /* @__PURE__ */ jsx(EmbeddedSurfaceModal, {
 				ref: setPortalContainer,
+				surfaceId,
 				children: content
 			})
 		})]