@persona/design-system 0.10.4 → 0.10.5

package/dist/components/FloatingPanel/index.mjs

@@ -1,28 +1,28 @@
 import ConfigContext from "../../lib/ConfigContext.mjs";
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
-import { t as usePathname } from "../../router-COrZcVkf.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
+import { t as usePathname } from "../../router-BxmA940v.mjs";
 import { semanticColor } from "../../lib/semanticColor.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
 import "../../variables/effect.mjs";
 import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
-import { n as Stack } from "../../Stack-BkC7FCdF.mjs";
-import { t as IconButton } from "../../IconButton-HWx5Hlmi.mjs";
-import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import { n as Stack } from "../../Stack-Bzom2BTR.mjs";
+import { t as IconButton } from "../../IconButton-DftINsp7.mjs";
 import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowCollapseIcon, ArrowExpandIcon, XIcon } from "@persona/icons";
 import { motion, useDragControls, useMotionValue, useReducedMotion } from "framer-motion";
 import { createPortal, flushSync } from "react-dom";
 import { v4 } from "uuid";
 import { flip, offset, shift, useFloating } from "@floating-ui/react";
-//#region components/FloatingPanel/utils.ts
+//#region src/components/FloatingPanel/utils.ts
 const PADDING = 8;
 function autoFitMaxHeight(viewportHeight, topOffset, minHeight) {
 	return Math.max(minHeight, viewportHeight - Math.max(48, topOffset) - 48);
 }
 //#endregion
-//#region components/FloatingPanel/FloatingPanel.tsx
+//#region src/components/FloatingPanel/FloatingPanel.tsx
 const FLOATING_PANEL_ID_PREFIX = "floating-panel__";
 const FloatingPanelContainer = styled(motion.div)`
   position: absolute;
@@ -545,7 +545,7 @@ function FloatingPanel({ title = "Panel title", children, portal = true, trigger
 	return portal ? createPortal(content, document.body) : content;
 }
 //#endregion
-//#region components/FloatingPanel/FloatingPanelContext.tsx
+//#region src/components/FloatingPanel/FloatingPanelContext.tsx
 const PanelContext = createContext(null);
 const PanelProvider = ({ children }) => {
 	const [panels, setPanels] = useState([]);
@@ -621,7 +621,7 @@ const usePersistentFloatingPanel = (panelId) => {
 	};
 };
 //#endregion
-//#region components/FloatingPanel/FloatingPanelRenderer.tsx
+//#region src/components/FloatingPanel/FloatingPanelRenderer.tsx
 function FloatingPanelRenderer() {
 	const { panels, closePanel } = usePersistentFloatingPanels();
 	if (panels.length === 0) return null;

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 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';\nimport { usePathname } from 'design-system/lib/router';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\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 }) =>\n    semanticColor(theme, 'SurfaceElevated', theme.color.background.primary)};\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', 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 ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst Footer = styled.div`\n  padding: ${Spacing[1]} ${Spacing[1]} ${Spacing[1]} ${Spacing[3]};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  overflow-x: hidden;\n  background-color: ${({ theme }) =>\n    semanticColor(theme, 'SurfaceElevated', 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  ${semanticScrollbar}\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 the router lookup out of the\n// main component body so FloatingPanel works without a Router when not needed.\nfunction DismissOnNavigate({ onClose }: { onClose: () => void }) {\n  const pathname = usePathname();\n  const initialPathname = useRef(pathname);\n  useEffect(() => {\n    if (pathname !== initialPathname.current) {\n      onClose();\n    }\n  }, [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 { v4 as uuid } from 'uuid';\n\nimport { usePathname } from 'design-system/lib/router';\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 pathname = usePathname();\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 || 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    [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 = pathname;\n\n    setPanels((prevPanels) =>\n      prevPanels.filter((panel) => shouldPanelPersist(nextLocation, panel.persistUntilPathRoot)),\n    );\n  }, [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":["../../../src/components/FloatingPanel/utils.ts","../../../src/components/FloatingPanel/FloatingPanel.tsx","../../../src/components/FloatingPanel/FloatingPanelContext.tsx","../../../src/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 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';\nimport { usePathname } from 'design-system/lib/router';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { semanticScrollbar } from 'design-system/mixins/scrollbar';\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 }) =>\n    semanticColor(theme, 'SurfaceElevated', theme.color.background.primary)};\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', 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 ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst Footer = styled.div`\n  padding: ${Spacing[1]} ${Spacing[1]} ${Spacing[1]} ${Spacing[3]};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  overflow-x: hidden;\n  background-color: ${({ theme }) =>\n    semanticColor(theme, 'SurfaceElevated', 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  ${semanticScrollbar}\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 the router lookup out of the\n// main component body so FloatingPanel works without a Router when not needed.\nfunction DismissOnNavigate({ onClose }: { onClose: () => void }) {\n  const pathname = usePathname();\n  const initialPathname = useRef(pathname);\n  useEffect(() => {\n    if (pathname !== initialPathname.current) {\n      onClose();\n    }\n  }, [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 { v4 as uuid } from 'uuid';\n\nimport { usePathname } from 'design-system/lib/router';\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 pathname = usePathname();\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 || 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    [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 = pathname;\n\n    setPanels((prevPanels) =>\n      prevPanels.filter((panel) => shouldPanelPersist(nextLocation, panel.persistUntilPathRoot)),\n    );\n  }, [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-DEG_0oXt.mjs";
-import { r as useFormField } from "../../useFormField-Ba8rh1CH.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-TkYMZeBd.mjs";
+import { r as useFormField } from "../../useFormField-CmEJCqse.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-CbNYbDdp.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-C4CiA0H-.mjs";
+import { n as useFormField } from "../../useFormField-pOVkb5BK.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-BztNXLn6.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormInputContainer, FormLabel, HelperText, WarningText, useFormField };

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

@@ -1,6 +1,6 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-mLbXDJ9B.mjs";
-import { _ as ToggleField, a as ComboboxSingleSelectFieldProps, c as RadioGroupFieldProps, d as SelectField, f as SelectFieldProps, g as TextFieldProps, h as TextField, i as ComboboxMultiSelectFieldProps, l as SegmentedControlField, m as TextAreaFieldProps, n as CheckboxFieldProps, o as ImplementsFormField, p as TextAreaField, r as ComboboxField, s as RadioGroupField, t as CheckboxField, u as SegmentedControlFieldProps, v as ToggleFieldProps, y as splitOutFormFieldProps } from "../../inputFields-mUsms2tO.mjs";
-import { t as CheckboxGroupField } from "../../CheckboxGroupField-BrPGNIyD.mjs";
-import { t as ListBoxField } from "../../ListBoxField-BCOrph2k.mjs";
-import { a as TableBoxFieldActionGroup, i as TableBoxFieldActionEntry, n as TableBoxField, r as TableBoxFieldAction, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL } from "../../TableBoxField-C3Cg6Lv5.mjs";
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-PBo1ctY8.mjs";
+import { _ as ToggleField, a as ComboboxSingleSelectFieldProps, c as RadioGroupFieldProps, d as SelectField, f as SelectFieldProps, g as TextFieldProps, h as TextField, i as ComboboxMultiSelectFieldProps, l as SegmentedControlField, m as TextAreaFieldProps, n as CheckboxFieldProps, o as ImplementsFormField, p as TextAreaField, r as ComboboxField, s as RadioGroupField, t as CheckboxField, u as SegmentedControlFieldProps, v as ToggleFieldProps, y as splitOutFormFieldProps } from "../../inputFields-CYttsz5M.mjs";
+import { t as CheckboxGroupField } from "../../CheckboxGroupField-UHpA38U5.mjs";
+import { t as ListBoxField } from "../../ListBoxField-CtPDd_Aw.mjs";
+import { a as TableBoxFieldActionGroup, i as TableBoxFieldActionEntry, n as TableBoxField, r as TableBoxFieldAction, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL } from "../../TableBoxField-B7bHv7uV.mjs";
 export { CheckboxField, CheckboxFieldProps, CheckboxGroupField, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, FormField, FormField as default, FormFieldBaseProps, FormFieldProps, ImplementsFormField, ListBoxField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, TableBoxField, TableBoxFieldAction, TableBoxFieldActionEntry, TableBoxFieldActionGroup, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps };

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-C0cd1zVd.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-g1zQFM9T.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/Grid/index.mjs

@@ -1,2 +1,2 @@
-import { i as useGridBreakpoint, n as GRID_BREAKPOINTS, r as Grid, t as GridItem } from "../../Grid-DXVkhyNQ.mjs";
+import { i as useGridBreakpoint, n as GRID_BREAKPOINTS, r as Grid, t as GridItem } from "../../Grid-BtTuj5mR.mjs";
 export { GRID_BREAKPOINTS, Grid, Grid as default, GridItem, useGridBreakpoint };

package/dist/components/HoverCopyableField/index.mjs

@@ -1,2 +1,2 @@
-import { t as HoverCopyableField } from "../../HoverCopyableField-D-BubaRd.mjs";
+import { t as HoverCopyableField } from "../../HoverCopyableField-CW7Jxmni.mjs";
 export { HoverCopyableField as default };

package/dist/components/ImageTile/index.mjs

@@ -1,20 +1,20 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor, semanticTokens } from "../../lib/semanticColor.mjs";
-import { i as Paragraph } from "../../Text-CSwFifQF.mjs";
+import { i as Paragraph } from "../../Text-D0vEReED.mjs";
 import "../../variables/transitions.mjs";
-import { a as Tooltip } from "../../Tooltip-B-0VRuKT.mjs";
+import { a as Tooltip } from "../../Tooltip-YViXzMdm.mjs";
 import { withAlpha } from "../../lib/color.mjs";
 import { focusOutline } from "../../mixins/focus.mjs";
-import { n as Stack } from "../../Stack-BkC7FCdF.mjs";
-import { t as IconButton } from "../../IconButton-HWx5Hlmi.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-CedsmO5h.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-Bqjdut7i.mjs";
-import { t as Checkbox } from "../../Checkbox-BaJ-dGdX.mjs";
-import { Spacing } from "@persona/design-tokens";
+import { n as Stack } from "../../Stack-Bzom2BTR.mjs";
+import { t as IconButton } from "../../IconButton-DftINsp7.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-Q8S-9rXm.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-oPIv2ESr.mjs";
+import { t as Checkbox } from "../../Checkbox-Dr4LMKHV.mjs";
 import { useCallback, useState } from "react";
+import { Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ImageIcon, LockedIcon, MoreIcon } from "@persona/icons";
-//#region components/ImageTile/ImageThumbnail.tsx
+//#region src/components/ImageTile/ImageThumbnail.tsx
 const EMPTY_COPY = "No available preview";
 /**
 * Tracks decode, error, and src changes for a thumbnail. ImageTile also reads
@@ -111,7 +111,7 @@ const ThumbnailFrame = ({ src, alt = "", objectFit = "cover", status }) => {
 	] });
 };
 //#endregion
-//#region components/ImageTile/ImageTile.tsx
+//#region src/components/ImageTile/ImageTile.tsx
 const MIN_WIDTH = "180px";
 const MAX_WIDTH = "420px";
 const OVERLAY_INSET = Spacing[2];

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["DropdownMenu"],"sources":["../../../components/ImageTile/ImageThumbnail.tsx","../../../components/ImageTile/ImageTile.tsx"],"sourcesContent":["import { type Ref, useCallback, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { TransitionDuration } from '@persona/design-system/variables/transitions';\nimport { Spacing } from '@persona/design-tokens';\nimport { ImageIcon } from '@persona/icons';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nconst EMPTY_COPY = 'No available preview';\n\nexport interface ImageThumbnailProps {\n  /** URL of the thumbnail. While loading shows shimmer; on error shows the empty fallback. */\n  src: string | null;\n  /** Alt text for the thumbnail. */\n  alt?: string;\n  /** How the thumbnail fills its area. `cover` crops overflow; `contain` letterboxes to fit. */\n  objectFit?: 'cover' | 'contain';\n}\n\ninterface ThumbnailStatus {\n  hasSrc: boolean;\n  hasError: boolean;\n  loaded: boolean;\n  isLoading: boolean;\n  showEmpty: boolean;\n  markResolved: (status: 'loaded' | 'error') => void;\n  handleImageRef: Ref<HTMLImageElement>;\n}\n\n/**\n * Tracks decode, error, and src changes for a thumbnail. ImageTile also reads\n * `isLoading` so its metadata row can shimmer in step with the image.\n */\nexport const useThumbnailStatus = (src: string | null): ThumbnailStatus => {\n  // Keyed by src so a new image starts loading without an effect that can\n  // reset state after a cached image has already decoded.\n  const [resolved, setResolved] = useState<{\n    src: string;\n    status: 'loaded' | 'error';\n  } | null>(null);\n\n  if (resolved && resolved.src !== src) {\n    setResolved(null);\n  }\n\n  const hasSrc = Boolean(src);\n  const loaded = resolved?.src === src && resolved.status === 'loaded';\n  const hasError = resolved?.src === src && resolved.status === 'error';\n\n  const markResolved = (status: 'loaded' | 'error') => {\n    if (!src) {\n      return;\n    }\n    setResolved((current) =>\n      current?.src === src && current.status === status ? current : { src, status },\n    );\n  };\n\n  const handleImageRef = useCallback(\n    (node: HTMLImageElement | null) => {\n      // A cached image can finish before React attaches onLoad, which leaves\n      // the tile shimmering forever. Adopt an already-decoded image here.\n      if (!node || !src || !node.complete || node.naturalWidth === 0) {\n        return;\n      }\n      setResolved((current) =>\n        current?.src === src && current.status === 'loaded' ? current : { src, status: 'loaded' },\n      );\n    },\n    [src],\n  );\n\n  return {\n    hasSrc,\n    hasError,\n    loaded,\n    isLoading: hasSrc && !loaded && !hasError,\n    showEmpty: !hasSrc || hasError,\n    markResolved,\n    handleImageRef,\n  };\n};\n\nconst ImageContainer = styled.div`\n  position: relative;\n  width: 100%;\n  aspect-ratio: 200 / 144;\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n  overflow: hidden;\n`;\n\nconst Thumbnail = styled.img<{ $visible: boolean; $objectFit: 'cover' | 'contain' }>`\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: ${({ $objectFit }) => $objectFit};\n  display: block;\n  opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n  transition: opacity ${TransitionDuration.Fast};\n`;\n\nconst ImageShimmer = styled(LoadingShimmer)`\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst EmptyState = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${Spacing[1]};\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n  padding: ${Spacing[3]};\n  text-align: center;\n`;\n\nexport const ThumbnailFrame = ({\n  src,\n  alt = '',\n  objectFit = 'cover',\n  status,\n}: ImageThumbnailProps & { status: ThumbnailStatus }) => {\n  const { hasSrc, hasError, loaded, isLoading, showEmpty, markResolved, handleImageRef } = status;\n\n  return (\n    <ImageContainer>\n      {hasSrc && !hasError && (\n        <Thumbnail\n          ref={handleImageRef}\n          $visible={loaded}\n          $objectFit={objectFit}\n          src={src ?? undefined}\n          alt={alt}\n          onLoad={() => markResolved('loaded')}\n          onError={() => markResolved('error')}\n        />\n      )}\n      {isLoading && <ImageShimmer />}\n      {showEmpty && (\n        <EmptyState>\n          <ImageIcon size={24} aria-hidden />\n          <Paragraph size='sm' color='secondary' as='span'>\n            {EMPTY_COPY}\n          </Paragraph>\n        </EmptyState>\n      )}\n    </ImageContainer>\n  );\n};\n\n/** Image area used by ImageTile. Not a card chrome. */\nexport const ImageThumbnail = ({ src, alt = '', objectFit = 'cover' }: ImageThumbnailProps) => {\n  const status = useThumbnailStatus(src);\n  return <ThumbnailFrame src={src} alt={alt} objectFit={objectFit} status={status} />;\n};\n","import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Checkbox from '@persona/design-system/components/Checkbox';\nimport DropdownMenu from '@persona/design-system/components/DropdownMenu';\nimport { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport Stack from '@persona/design-system/components/Stack';\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { focusOutline } from '@persona/design-system/mixins/focus';\nimport { TransitionDuration } from '@persona/design-system/variables/transitions';\nimport { Spacing } from '@persona/design-tokens';\nimport { LockedIcon, MoreIcon } from '@persona/icons';\nimport { withAlpha } from 'design-system/lib/color';\nimport { semanticColor, semanticTokens } from 'design-system/lib/semanticColor';\nimport type { TextAction } from 'design-system/types/Action';\n\nimport { ThumbnailFrame, useThumbnailStatus } from './ImageThumbnail';\n\nconst MIN_WIDTH = '180px';\nconst MAX_WIDTH = '420px';\nconst OVERLAY_INSET = Spacing[2];\nconst DEFAULT_SELECTION_LABEL = 'Select image';\n\nexport interface ImageTileProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** URL of the thumbnail. While loading shows shimmer; on error shows the empty fallback. */\n  src: string | null;\n  /** Alt text for the thumbnail. Also seeds the default checkbox label. */\n  alt?: string;\n  /** How the thumbnail fills its area. `cover` crops overflow; `contain` letterboxes to fit. Defaults to `cover`. */\n  objectFit?: 'cover' | 'contain';\n\n  /** Enables the selection checkbox (top-left). */\n  selectable?: boolean;\n  /** Controlled checked state for the selection checkbox. */\n  selected?: boolean;\n  /** Called with the new checked value when the checkbox is toggled. */\n  onSelectedChange?: (selected: boolean) => void;\n  /** Accessible label for the checkbox. Defaults to \"Select {alt}\" or \"Select image\". */\n  selectionLabel?: string;\n\n  /**\n   * Action menu items rendered behind a 3-dot IconButton in the top-right.\n   * Ignored when `locked` is true. Pass an empty array (or omit) to hide the menu.\n   */\n  actions?: TextAction[];\n  /**\n   * Replaces the action menu with a non-interactive lock icon. Indicates the\n   * viewer does not have permission to edit. `actions` are ignored.\n   */\n  locked?: boolean;\n  /** Tooltip string shown when hovering the lock icon. */\n  lockedTooltip?: string;\n\n  /**\n   * Metadata rows rendered beneath the thumbnail. Each entry becomes a\n   * full-width, left-aligned row in a vertical Stack. Block content fills the\n   * row; inline content (e.g. a Sticker) hugs the left. The region is omitted\n   * entirely — including while the image is loading — when the array is empty\n   * or undefined, so the tile is only the image.\n   */\n  metadata?: ReactNode[];\n\n  /** Optional click handler for the whole tile. When provided, the tile is keyboard-activatable. */\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n}\n\nconst MetadataContainer = styled.div`\n  padding: ${Spacing[3]};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  transition: background-color ${TransitionDuration.Fast};\n`;\n\nconst MetadataRow = styled.div`\n  width: 100%;\n  // Without these Stickers get bottom aligned\n  display: flex;\n  align-items: flex-start;\n`;\n\nconst SelectionOverlay = styled.div`\n  position: absolute;\n  top: ${OVERLAY_INSET};\n  left: ${OVERLAY_INSET};\n  z-index: 1;\n`;\n\nconst ActionsOverlay = styled.div`\n  position: absolute;\n  top: ${OVERLAY_INSET};\n  right: ${OVERLAY_INSET};\n  z-index: 1;\n`;\n\nconst LockedOverlay = styled.div`\n  position: absolute;\n  top: ${OVERLAY_INSET};\n  right: ${OVERLAY_INSET};\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n`;\n\nconst Root = styled.div<{ $clickable: boolean }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: ${MIN_WIDTH};\n  max-width: ${MAX_WIDTH};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n  box-sizing: border-box;\n  overflow: hidden;\n  ${focusOutline};\n\n  ${({ $clickable }) =>\n    $clickable &&\n    css`\n      cursor: pointer;\n    `}\n\n  &:hover ${MetadataContainer} {\n    background-color: ${({ theme }) => {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n        : theme.color.background.highlight;\n    }};\n  }\n`;\n\nconst stopPropagation = (e: MouseEvent) => {\n  e.stopPropagation();\n};\n\nexport const ImageTile = ({\n  src,\n  alt = '',\n  objectFit = 'cover',\n  selectable = false,\n  selected = false,\n  onSelectedChange,\n  selectionLabel,\n  actions,\n  locked = false,\n  lockedTooltip,\n  metadata,\n  onClick,\n  ...props\n}: ImageTileProps) => {\n  const thumbnail = useThumbnailStatus(src);\n  const { isLoading } = thumbnail;\n\n  const visibleActions = actions?.filter((action) => !action.hidden) ?? [];\n  const renderActions = !locked && visibleActions.length > 0;\n  const clickable = Boolean(onClick);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (!onClick) {\n      return;\n    }\n    // Only activate when the key event originates from the tile root itself.\n    // Interactive descendants (selection checkbox, action buttons) must keep\n    // their own native Space/Enter behavior.\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.currentTarget.click();\n    }\n  };\n\n  const accessibleSelectionLabel =\n    selectionLabel ?? (alt ? `Select ${alt}` : DEFAULT_SELECTION_LABEL);\n\n  const hasMetadata = (metadata?.length ?? 0) > 0;\n\n  return (\n    <Root\n      $clickable={clickable}\n      onClick={onClick}\n      onKeyDown={clickable ? handleKeyDown : undefined}\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable ? 0 : undefined}\n      {...props}\n    >\n      <ThumbnailFrame src={src} alt={alt} objectFit={objectFit} status={thumbnail} />\n\n      {selectable && (\n        <SelectionOverlay onClick={stopPropagation}>\n          <Checkbox\n            size='sm'\n            checked={selected}\n            onChange={(e) => onSelectedChange?.(e.target.checked)}\n            aria-label={accessibleSelectionLabel}\n          />\n        </SelectionOverlay>\n      )}\n\n      {renderActions && (\n        <ActionsOverlay onClick={stopPropagation}>\n          <DropdownMenu\n            portal\n            trigger={\n              <IconButton size='sm' aria-label='More actions'>\n                <MoreIcon />\n              </IconButton>\n            }\n          >\n            {visibleActions.map((action, idx) => (\n              <DropdownMenu.Item\n                key={action.id ?? `${action.label}-${idx}`}\n                prefixIcon={action.prefixIcon}\n                suffixIcon={action.suffixIcon}\n                disabled={action.disabled}\n                variant={action.variant === 'danger' ? 'danger' : 'basic'}\n                onClick={(e) => {\n                  if (action.disabled) {\n                    return;\n                  }\n                  return action.onClick?.(e);\n                }}\n              >\n                {action.label}\n              </DropdownMenu.Item>\n            ))}\n          </DropdownMenu>\n        </ActionsOverlay>\n      )}\n\n      {locked && (\n        <LockedOverlay onClick={stopPropagation}>\n          {lockedTooltip ? (\n            <Tooltip iconTrigger={<LockedIcon size={16} />} aria-label={lockedTooltip}>\n              {lockedTooltip}\n            </Tooltip>\n          ) : (\n            <LockedIcon size={16} aria-label='Locked' />\n          )}\n        </LockedOverlay>\n      )}\n\n      {hasMetadata && (\n        <MetadataContainer>\n          {isLoading ? (\n            <LoadingShimmer width='60%' height='14px' />\n          ) : (\n            <Stack spacing={Spacing[2]}>\n              {metadata?.map((row, idx) => (\n                <MetadataRow key={idx}>{row}</MetadataRow>\n              ))}\n            </Stack>\n          )}\n        </MetadataContainer>\n      )}\n    </Root>\n  );\n};\n\nexport default ImageTile;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["DropdownMenu"],"sources":["../../../src/components/ImageTile/ImageThumbnail.tsx","../../../src/components/ImageTile/ImageTile.tsx"],"sourcesContent":["import { type Ref, useCallback, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { TransitionDuration } from '@persona/design-system/variables/transitions';\nimport { Spacing } from '@persona/design-tokens';\nimport { ImageIcon } from '@persona/icons';\nimport { semanticColor } from 'design-system/lib/semanticColor';\n\nconst EMPTY_COPY = 'No available preview';\n\nexport interface ImageThumbnailProps {\n  /** URL of the thumbnail. While loading shows shimmer; on error shows the empty fallback. */\n  src: string | null;\n  /** Alt text for the thumbnail. */\n  alt?: string;\n  /** How the thumbnail fills its area. `cover` crops overflow; `contain` letterboxes to fit. */\n  objectFit?: 'cover' | 'contain';\n}\n\ninterface ThumbnailStatus {\n  hasSrc: boolean;\n  hasError: boolean;\n  loaded: boolean;\n  isLoading: boolean;\n  showEmpty: boolean;\n  markResolved: (status: 'loaded' | 'error') => void;\n  handleImageRef: Ref<HTMLImageElement>;\n}\n\n/**\n * Tracks decode, error, and src changes for a thumbnail. ImageTile also reads\n * `isLoading` so its metadata row can shimmer in step with the image.\n */\nexport const useThumbnailStatus = (src: string | null): ThumbnailStatus => {\n  // Keyed by src so a new image starts loading without an effect that can\n  // reset state after a cached image has already decoded.\n  const [resolved, setResolved] = useState<{\n    src: string;\n    status: 'loaded' | 'error';\n  } | null>(null);\n\n  if (resolved && resolved.src !== src) {\n    setResolved(null);\n  }\n\n  const hasSrc = Boolean(src);\n  const loaded = resolved?.src === src && resolved.status === 'loaded';\n  const hasError = resolved?.src === src && resolved.status === 'error';\n\n  const markResolved = (status: 'loaded' | 'error') => {\n    if (!src) {\n      return;\n    }\n    setResolved((current) =>\n      current?.src === src && current.status === status ? current : { src, status },\n    );\n  };\n\n  const handleImageRef = useCallback(\n    (node: HTMLImageElement | null) => {\n      // A cached image can finish before React attaches onLoad, which leaves\n      // the tile shimmering forever. Adopt an already-decoded image here.\n      if (!node || !src || !node.complete || node.naturalWidth === 0) {\n        return;\n      }\n      setResolved((current) =>\n        current?.src === src && current.status === 'loaded' ? current : { src, status: 'loaded' },\n      );\n    },\n    [src],\n  );\n\n  return {\n    hasSrc,\n    hasError,\n    loaded,\n    isLoading: hasSrc && !loaded && !hasError,\n    showEmpty: !hasSrc || hasError,\n    markResolved,\n    handleImageRef,\n  };\n};\n\nconst ImageContainer = styled.div`\n  position: relative;\n  width: 100%;\n  aspect-ratio: 200 / 144;\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n  overflow: hidden;\n`;\n\nconst Thumbnail = styled.img<{ $visible: boolean; $objectFit: 'cover' | 'contain' }>`\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: ${({ $objectFit }) => $objectFit};\n  display: block;\n  opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n  transition: opacity ${TransitionDuration.Fast};\n`;\n\nconst ImageShimmer = styled(LoadingShimmer)`\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst EmptyState = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${Spacing[1]};\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n  padding: ${Spacing[3]};\n  text-align: center;\n`;\n\nexport const ThumbnailFrame = ({\n  src,\n  alt = '',\n  objectFit = 'cover',\n  status,\n}: ImageThumbnailProps & { status: ThumbnailStatus }) => {\n  const { hasSrc, hasError, loaded, isLoading, showEmpty, markResolved, handleImageRef } = status;\n\n  return (\n    <ImageContainer>\n      {hasSrc && !hasError && (\n        <Thumbnail\n          ref={handleImageRef}\n          $visible={loaded}\n          $objectFit={objectFit}\n          src={src ?? undefined}\n          alt={alt}\n          onLoad={() => markResolved('loaded')}\n          onError={() => markResolved('error')}\n        />\n      )}\n      {isLoading && <ImageShimmer />}\n      {showEmpty && (\n        <EmptyState>\n          <ImageIcon size={24} aria-hidden />\n          <Paragraph size='sm' color='secondary' as='span'>\n            {EMPTY_COPY}\n          </Paragraph>\n        </EmptyState>\n      )}\n    </ImageContainer>\n  );\n};\n\n/** Image area used by ImageTile. Not a card chrome. */\nexport const ImageThumbnail = ({ src, alt = '', objectFit = 'cover' }: ImageThumbnailProps) => {\n  const status = useThumbnailStatus(src);\n  return <ThumbnailFrame src={src} alt={alt} objectFit={objectFit} status={status} />;\n};\n","import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Checkbox from '@persona/design-system/components/Checkbox';\nimport DropdownMenu from '@persona/design-system/components/DropdownMenu';\nimport { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport Stack from '@persona/design-system/components/Stack';\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { focusOutline } from '@persona/design-system/mixins/focus';\nimport { TransitionDuration } from '@persona/design-system/variables/transitions';\nimport { Spacing } from '@persona/design-tokens';\nimport { LockedIcon, MoreIcon } from '@persona/icons';\nimport { withAlpha } from 'design-system/lib/color';\nimport { semanticColor, semanticTokens } from 'design-system/lib/semanticColor';\nimport type { TextAction } from 'design-system/types/Action';\n\nimport { ThumbnailFrame, useThumbnailStatus } from './ImageThumbnail';\n\nconst MIN_WIDTH = '180px';\nconst MAX_WIDTH = '420px';\nconst OVERLAY_INSET = Spacing[2];\nconst DEFAULT_SELECTION_LABEL = 'Select image';\n\nexport interface ImageTileProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** URL of the thumbnail. While loading shows shimmer; on error shows the empty fallback. */\n  src: string | null;\n  /** Alt text for the thumbnail. Also seeds the default checkbox label. */\n  alt?: string;\n  /** How the thumbnail fills its area. `cover` crops overflow; `contain` letterboxes to fit. Defaults to `cover`. */\n  objectFit?: 'cover' | 'contain';\n\n  /** Enables the selection checkbox (top-left). */\n  selectable?: boolean;\n  /** Controlled checked state for the selection checkbox. */\n  selected?: boolean;\n  /** Called with the new checked value when the checkbox is toggled. */\n  onSelectedChange?: (selected: boolean) => void;\n  /** Accessible label for the checkbox. Defaults to \"Select {alt}\" or \"Select image\". */\n  selectionLabel?: string;\n\n  /**\n   * Action menu items rendered behind a 3-dot IconButton in the top-right.\n   * Ignored when `locked` is true. Pass an empty array (or omit) to hide the menu.\n   */\n  actions?: TextAction[];\n  /**\n   * Replaces the action menu with a non-interactive lock icon. Indicates the\n   * viewer does not have permission to edit. `actions` are ignored.\n   */\n  locked?: boolean;\n  /** Tooltip string shown when hovering the lock icon. */\n  lockedTooltip?: string;\n\n  /**\n   * Metadata rows rendered beneath the thumbnail. Each entry becomes a\n   * full-width, left-aligned row in a vertical Stack. Block content fills the\n   * row; inline content (e.g. a Sticker) hugs the left. The region is omitted\n   * entirely — including while the image is loading — when the array is empty\n   * or undefined, so the tile is only the image.\n   */\n  metadata?: ReactNode[];\n\n  /** Optional click handler for the whole tile. When provided, the tile is keyboard-activatable. */\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n}\n\nconst MetadataContainer = styled.div`\n  padding: ${Spacing[3]};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  transition: background-color ${TransitionDuration.Fast};\n`;\n\nconst MetadataRow = styled.div`\n  width: 100%;\n  // Without these Stickers get bottom aligned\n  display: flex;\n  align-items: flex-start;\n`;\n\nconst SelectionOverlay = styled.div`\n  position: absolute;\n  top: ${OVERLAY_INSET};\n  left: ${OVERLAY_INSET};\n  z-index: 1;\n`;\n\nconst ActionsOverlay = styled.div`\n  position: absolute;\n  top: ${OVERLAY_INSET};\n  right: ${OVERLAY_INSET};\n  z-index: 1;\n`;\n\nconst LockedOverlay = styled.div`\n  position: absolute;\n  top: ${OVERLAY_INSET};\n  right: ${OVERLAY_INSET};\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n`;\n\nconst Root = styled.div<{ $clickable: boolean }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: ${MIN_WIDTH};\n  max-width: ${MAX_WIDTH};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n  box-sizing: border-box;\n  overflow: hidden;\n  ${focusOutline};\n\n  ${({ $clickable }) =>\n    $clickable &&\n    css`\n      cursor: pointer;\n    `}\n\n  &:hover ${MetadataContainer} {\n    background-color: ${({ theme }) => {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n        : theme.color.background.highlight;\n    }};\n  }\n`;\n\nconst stopPropagation = (e: MouseEvent) => {\n  e.stopPropagation();\n};\n\nexport const ImageTile = ({\n  src,\n  alt = '',\n  objectFit = 'cover',\n  selectable = false,\n  selected = false,\n  onSelectedChange,\n  selectionLabel,\n  actions,\n  locked = false,\n  lockedTooltip,\n  metadata,\n  onClick,\n  ...props\n}: ImageTileProps) => {\n  const thumbnail = useThumbnailStatus(src);\n  const { isLoading } = thumbnail;\n\n  const visibleActions = actions?.filter((action) => !action.hidden) ?? [];\n  const renderActions = !locked && visibleActions.length > 0;\n  const clickable = Boolean(onClick);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (!onClick) {\n      return;\n    }\n    // Only activate when the key event originates from the tile root itself.\n    // Interactive descendants (selection checkbox, action buttons) must keep\n    // their own native Space/Enter behavior.\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.currentTarget.click();\n    }\n  };\n\n  const accessibleSelectionLabel =\n    selectionLabel ?? (alt ? `Select ${alt}` : DEFAULT_SELECTION_LABEL);\n\n  const hasMetadata = (metadata?.length ?? 0) > 0;\n\n  return (\n    <Root\n      $clickable={clickable}\n      onClick={onClick}\n      onKeyDown={clickable ? handleKeyDown : undefined}\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable ? 0 : undefined}\n      {...props}\n    >\n      <ThumbnailFrame src={src} alt={alt} objectFit={objectFit} status={thumbnail} />\n\n      {selectable && (\n        <SelectionOverlay onClick={stopPropagation}>\n          <Checkbox\n            size='sm'\n            checked={selected}\n            onChange={(e) => onSelectedChange?.(e.target.checked)}\n            aria-label={accessibleSelectionLabel}\n          />\n        </SelectionOverlay>\n      )}\n\n      {renderActions && (\n        <ActionsOverlay onClick={stopPropagation}>\n          <DropdownMenu\n            portal\n            trigger={\n              <IconButton size='sm' aria-label='More actions'>\n                <MoreIcon />\n              </IconButton>\n            }\n          >\n            {visibleActions.map((action, idx) => (\n              <DropdownMenu.Item\n                key={action.id ?? `${action.label}-${idx}`}\n                prefixIcon={action.prefixIcon}\n                suffixIcon={action.suffixIcon}\n                disabled={action.disabled}\n                variant={action.variant === 'danger' ? 'danger' : 'basic'}\n                onClick={(e) => {\n                  if (action.disabled) {\n                    return;\n                  }\n                  return action.onClick?.(e);\n                }}\n              >\n                {action.label}\n              </DropdownMenu.Item>\n            ))}\n          </DropdownMenu>\n        </ActionsOverlay>\n      )}\n\n      {locked && (\n        <LockedOverlay onClick={stopPropagation}>\n          {lockedTooltip ? (\n            <Tooltip iconTrigger={<LockedIcon size={16} />} aria-label={lockedTooltip}>\n              {lockedTooltip}\n            </Tooltip>\n          ) : (\n            <LockedIcon size={16} aria-label='Locked' />\n          )}\n        </LockedOverlay>\n      )}\n\n      {hasMetadata && (\n        <MetadataContainer>\n          {isLoading ? (\n            <LoadingShimmer width='60%' height='14px' />\n          ) : (\n            <Stack spacing={Spacing[2]}>\n              {metadata?.map((row, idx) => (\n                <MetadataRow key={idx}>{row}</MetadataRow>\n              ))}\n            </Stack>\n          )}\n        </MetadataContainer>\n      )}\n    </Root>\n  );\n};\n\nexport default ImageTile;\n"],"mappings":"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"}

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-Bg4bi6VZ.mjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-QNjbGo38.mjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

package/dist/components/Input/index.mjs

@@ -1,5 +1,5 @@
-import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-Dap055xf.mjs";
-//#region components/Input/index.ts
+import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-DtO3qMnE.mjs";
+//#region src/components/Input/index.ts
 var Input_default = Input;
 //#endregion
 export { ClearButton, Input, InputGroup, Input_default as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Input/index.ts"],"sourcesContent":["import Input from './Input';\n\nexport * from './Input';\n\nexport default Input;\n\nexport type { InputProps } from './Input';\n"],"mappings":";;AAIA,IAAA,gBAAe"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/Input/index.ts"],"sourcesContent":["import Input from './Input';\n\nexport * from './Input';\n\nexport default Input;\n\nexport type { InputProps } from './Input';\n"],"mappings":";;AAIA,IAAA,gBAAe"}

package/dist/components/Link/index.mjs

@@ -1,2 +1,2 @@
-import { t as Link } from "../../Link-Cf__H8gD.mjs";
+import { t as Link } from "../../Link-DKYmdL9t.mjs";
 export { Link, Link as default };

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

@@ -1,4 +1,4 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-CXFI-0nG.mjs";
-import { n as LogicRowProps } from "../../LogicRow-8oYRkwz5.mjs";
-import { t as ListBox } from "../../index-C3uFHTo0.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-D9SYTzOd.mjs";
+import { n as LogicRowProps } from "../../LogicRow-BWIZ7262.mjs";
+import { t as ListBox } from "../../index-DX5Zu9JU.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-eoyBHtnJ.mjs";
+import { n as useListBoxContext, t as ListBox } from "../../ListBox-CDG0EAPg.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-Bqjdut7i.mjs";
+import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-oPIv2ESr.mjs";
 export { LoadingShimmer, LoadingShimmerHeading, LoadingShimmerParagraph, MaybeLoadingShimmer };

package/dist/components/MaskedInput/index.mjs

@@ -1,8 +1,8 @@
-import { n as Input } from "../../Input-Dap055xf.mjs";
+import { n as Input } from "../../Input-DtO3qMnE.mjs";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { IMaskMixin } from "react-imask";
-//#region components/MaskedInput/MaskedInput.tsx
+//#region src/components/MaskedInput/MaskedInput.tsx
 const MaskedInputBase = IMaskMixin(({ inputRef, size, componentProps, ...props }) => /* @__PURE__ */ jsx(Input, {
 	...props,
 	...componentProps,
@@ -16,7 +16,7 @@ const MaskedInput = forwardRef(function MaskedInput(props, ref) {
 	});
 });
 //#endregion
-//#region components/MaskedInput/index.ts
+//#region src/components/MaskedInput/index.ts
 var MaskedInput_default = MaskedInput;
 //#endregion
 export { MaskedInput, MaskedInput_default as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/MaskedInput/MaskedInput.tsx","../../../components/MaskedInput/index.ts"],"sourcesContent":["import { forwardRef, type Ref } from 'react';\nimport { IMaskMixin, type ReactElementProps } from 'react-imask';\nimport type { IMaskInputProps } from 'react-imask/mixin';\n\nimport Input, { type InputProps } from 'design-system/components/Input/Input';\n\ninterface MaskedInputBaseProps {\n  inputRef: Ref<HTMLInputElement>;\n  componentProps?: InputProps;\n}\n\nconst MaskedInputBase = IMaskMixin<HTMLInputElement, MaskedInputBaseProps>(\n  ({\n    inputRef,\n    size,\n    componentProps,\n    ...props\n  }: ReactElementProps<HTMLInputElement> & MaskedInputBaseProps) => (\n    <Input {...props} {...componentProps} ref={inputRef} />\n  ),\n);\n\nexport type MaskedInputProps = Omit<\n  IMaskInputProps<HTMLInputElement>,\n  'inputRef' | 'componentProps' | 'size' | 'ref'\n> &\n  InputProps;\n\nexport const MaskedInput = forwardRef<HTMLInputElement, MaskedInputProps>(function MaskedInput(\n  props: MaskedInputProps,\n  ref,\n) {\n  return <MaskedInputBase {...props} componentProps={props} inputRef={ref} />;\n});\n\nexport default MaskedInput;\n","import MaskedInput from './MaskedInput';\n\nexport * from './MaskedInput';\n\nexport default MaskedInput;\n"],"mappings":";;;;;AAWA,MAAM,kBAAkB,YACrB,EACC,UACA,MACA,gBACA,GAAG,YAEH,oBAAC,OAAD;CAAO,GAAI;CAAO,GAAI;CAAgB,KAAK;CAAY,CAAA,CAE1D;AAQD,MAAa,cAAc,WAA+C,SAAS,YACjF,OACA,KACA;AACA,QAAO,oBAAC,iBAAD;EAAiB,GAAI;EAAO,gBAAgB;EAAO,UAAU;EAAO,CAAA;EAC3E;;;AC7BF,IAAA,sBAAe"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/MaskedInput/MaskedInput.tsx","../../../src/components/MaskedInput/index.ts"],"sourcesContent":["import { forwardRef, type Ref } from 'react';\nimport { IMaskMixin, type ReactElementProps } from 'react-imask';\nimport type { IMaskInputProps } from 'react-imask/mixin';\n\nimport Input, { type InputProps } from 'design-system/components/Input/Input';\n\ninterface MaskedInputBaseProps {\n  inputRef: Ref<HTMLInputElement>;\n  componentProps?: InputProps;\n}\n\nconst MaskedInputBase = IMaskMixin<HTMLInputElement, MaskedInputBaseProps>(\n  ({\n    inputRef,\n    size,\n    componentProps,\n    ...props\n  }: ReactElementProps<HTMLInputElement> & MaskedInputBaseProps) => (\n    <Input {...props} {...componentProps} ref={inputRef} />\n  ),\n);\n\nexport type MaskedInputProps = Omit<\n  IMaskInputProps<HTMLInputElement>,\n  'inputRef' | 'componentProps' | 'size' | 'ref'\n> &\n  InputProps;\n\nexport const MaskedInput = forwardRef<HTMLInputElement, MaskedInputProps>(function MaskedInput(\n  props: MaskedInputProps,\n  ref,\n) {\n  return <MaskedInputBase {...props} componentProps={props} inputRef={ref} />;\n});\n\nexport default MaskedInput;\n","import MaskedInput from './MaskedInput';\n\nexport * from './MaskedInput';\n\nexport default MaskedInput;\n"],"mappings":";;;;;AAWA,MAAM,kBAAkB,YACrB,EACC,UACA,MACA,gBACA,GAAG,YAEH,oBAAC,OAAD;CAAO,GAAI;CAAO,GAAI;CAAgB,KAAK;CAAY,CAAA,CAE1D;AAQD,MAAa,cAAc,WAA+C,SAAS,YACjF,OACA,KACA;AACA,QAAO,oBAAC,iBAAD;EAAiB,GAAI;EAAO,gBAAgB;EAAO,UAAU;EAAO,CAAA;EAC3E;;;AC7BF,IAAA,sBAAe"}

package/dist/components/MatchHighlight/index.mjs

@@ -1,7 +1,7 @@
-import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
 import { Spacing } from "@persona/design-tokens";
-//#region components/MatchHighlight/MatchHighlight.tsx
+//#region src/components/MatchHighlight/MatchHighlight.tsx
 const MatchHighlight = styled.span`
   /* Sizing and Borders */
   width: fit-content;

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/MatchHighlight/MatchHighlight.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\n\nexport interface MatchHighlightProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'> {\n  matchStrength?: 'none' | 'partial' | 'full';\n}\n\nexport const MatchHighlight = styled.span<MatchHighlightProps>`\n  /* Sizing and Borders */\n  width: fit-content;\n  padding-left: ${Spacing[1]};\n  padding-right: ${Spacing[1]};\n  border-radius: ${Spacing[1]};\n\n  /* Allow background colors to be dictated by the matchStrength. */\n  background-color: ${({ matchStrength, theme }) => {\n    switch (matchStrength) {\n      case 'none':\n        return semanticColor(theme, 'FeedbackNeutral2Static', theme.color.background.disabled);\n      case 'partial':\n        return semanticColor(\n          theme,\n          'FeedbackWarning2',\n          theme.color.variants.success.highlightLight,\n        );\n      case 'full':\n        return semanticColor(theme, 'FeedbackSuccess2', theme.color.variants.success.highlightDark);\n\n      default:\n        return 'none';\n    }\n  }};\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimaryStatic};`)}\n`;\n\nexport default MatchHighlight;\n"],"mappings":";;;;AAUA,MAAa,iBAAiB,OAAO,IAAyB;;;kBAG5C,QAAQ,GAAG;mBACV,QAAQ,GAAG;mBACX,QAAQ,GAAG;;;uBAGP,EAAE,eAAe,YAAY;AAChD,SAAQ,eAAR;EACE,KAAK,OACH,QAAO,cAAc,OAAO,0BAA0B,MAAM,MAAM,WAAW,SAAS;EACxF,KAAK,UACH,QAAO,cACL,OACA,oBACA,MAAM,MAAM,SAAS,QAAQ,eAC9B;EACH,KAAK,OACH,QAAO,cAAc,OAAO,oBAAoB,MAAM,MAAM,SAAS,QAAQ,cAAc;EAE7F,QACE,QAAO;;EAEX;IACA,cAAc,WAAW,UAAU,OAAO,gBAAgB,GAAG,CAAC"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/MatchHighlight/MatchHighlight.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\n\nexport interface MatchHighlightProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'> {\n  matchStrength?: 'none' | 'partial' | 'full';\n}\n\nexport const MatchHighlight = styled.span<MatchHighlightProps>`\n  /* Sizing and Borders */\n  width: fit-content;\n  padding-left: ${Spacing[1]};\n  padding-right: ${Spacing[1]};\n  border-radius: ${Spacing[1]};\n\n  /* Allow background colors to be dictated by the matchStrength. */\n  background-color: ${({ matchStrength, theme }) => {\n    switch (matchStrength) {\n      case 'none':\n        return semanticColor(theme, 'FeedbackNeutral2Static', theme.color.background.disabled);\n      case 'partial':\n        return semanticColor(\n          theme,\n          'FeedbackWarning2',\n          theme.color.variants.success.highlightLight,\n        );\n      case 'full':\n        return semanticColor(theme, 'FeedbackSuccess2', theme.color.variants.success.highlightDark);\n\n      default:\n        return 'none';\n    }\n  }};\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimaryStatic};`)}\n`;\n\nexport default MatchHighlight;\n"],"mappings":";;;;AAUA,MAAa,iBAAiB,OAAO,IAAyB;;;kBAG5C,QAAQ,GAAG;mBACV,QAAQ,GAAG;mBACX,QAAQ,GAAG;;;uBAGP,EAAE,eAAe,YAAY;AAChD,SAAQ,eAAR;EACE,KAAK,OACH,QAAO,cAAc,OAAO,0BAA0B,MAAM,MAAM,WAAW,SAAS;EACxF,KAAK,UACH,QAAO,cACL,OACA,oBACA,MAAM,MAAM,SAAS,QAAQ,eAC9B;EACH,KAAK,OACH,QAAO,cAAc,OAAO,oBAAoB,MAAM,MAAM,SAAS,QAAQ,cAAc;EAE7F,QACE,QAAO;;EAEX;IACA,cAAc,WAAW,UAAU,OAAO,gBAAgB,GAAG,CAAC"}

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-DHnQZ5yN.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-DizjcMbO.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-Dw6Rcpk6.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-EIT_MwK6.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuItem, MenuList };

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

@@ -1,2 +1,2 @@
-import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "../../Modal-BuxggahW.mjs";
+import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "../../Modal-Bhwq1bQJ.mjs";
 export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

package/dist/components/Modal/index.mjs

@@ -1,2 +1,2 @@
-import { i as Modal_default, n as ModalContent, r as ModalTrigger, t as ModalClose } from "../../Modal-kjUptzg1.mjs";
+import { i as Modal_default, n as ModalContent, r as ModalTrigger, t as ModalClose } from "../../Modal-92O_uW8H.mjs";
 export { ModalClose, ModalContent, ModalTrigger, Modal_default as default };