npm - @persona/design-system - Versions diffs - 0.7.1 → 0.8.0 - Mend

@persona/design-system 0.7.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (567) hide show

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

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

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

@@ -1,6 +1,6 @@
-import { n as DatePickerProps, t as DatePicker } from "../../DatePicker-DC_RKjdM.mjs";
-import { i as DateRangePickerProps, n as DateRange, r as DateRangePicker, t as DateFilterChange } from "../../DateRangePicker-ByD6IsLB.mjs";
-import { t as DateField } from "../../DateField-2aigfD4u.mjs";
-import { t as Calendar } from "../../Calendar-DrdTvzAa.mjs";
-import { n as RangeCalendarProps, t as RangeCalendar } from "../../RangeCalendar-B7TwRJbg.mjs";
+import { n as DatePickerProps, t as DatePicker } from "../../DatePicker-Dtvv0V45.mjs";
+import { i as DateRangePickerProps, n as DateRange, r as DateRangePicker, t as DateFilterChange } from "../../DateRangePicker-HPYsa4wC.mjs";
+import { t as DateField } from "../../DateField-Dk5ykLdr.mjs";
+import { t as Calendar } from "../../Calendar-dPmo2dkj.mjs";
+import { n as RangeCalendarProps, t as RangeCalendar } from "../../RangeCalendar-Mh7h74Tp.mjs";
 export { Calendar, DateField, DateFilterChange, DatePicker, DatePicker as default, DatePickerProps, DateRange, DateRangePicker, DateRangePickerProps, RangeCalendar, RangeCalendarProps };

package/dist/components/DatePicker/index.mjs CHANGED Viewed

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

package/dist/components/DropdownButton/index.mjs CHANGED Viewed

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

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

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

package/dist/components/DropdownMenu/index.mjs CHANGED Viewed

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

package/dist/components/FloatingPanel/index.mjs CHANGED Viewed

@@ -1,11 +1,13 @@
 import ConfigContext from "../../lib/ConfigContext.mjs";
 import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
 import { t as usePathname } from "../../router-7FYDW80v.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 { n as Stack } from "../../Stack-ChsImaEY.mjs";
-import { t as IconButton } from "../../IconButton-CqTPMhjV.mjs";
+import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
+import { n as Stack } from "../../Stack-Bkn0TUDe.mjs";
+import { t as IconButton } from "../../IconButton-CCLMYWVN.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -25,8 +27,8 @@ const FLOATING_PANEL_ID_PREFIX = "floating-panel__";
 const FloatingPanelContainer = styled(motion.div)`
   position: absolute;
   z-index: ${Z_INDICES.modal};
-  background: ${({ theme }) => theme.color.background.primary};
-  border: 1px solid ${Color.BorderDivider};
+  background: ${({ theme }) => semanticColor(theme, "SurfaceElevated", theme.color.background.primary)};
+  border: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
   border-radius: ${BorderRadius.Lg};
   box-shadow: ${"0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 3px 14px 0px rgba(0, 0, 0, 0.04), 0px 8px 10px 0px rgba(0, 0, 0, 0.04)"};
   display: flex;
@@ -52,13 +54,13 @@ const DragHandle = styled(motion.div)`
   height: 48px;
   overflow: hidden;
   padding: ${Spacing[1]} ${Spacing[1]} ${Spacing[1]} ${Spacing[3]};
-  border-bottom: 1px solid ${Color.BorderDivider};
+  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
 `;
 const Footer = styled.div`
   padding: ${Spacing[1]} ${Spacing[1]} ${Spacing[1]} ${Spacing[3]};
-  border-top: 1px solid ${Color.BorderDivider};
+  border-top: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
   overflow-x: hidden;
-  background-color: ${({ theme }) => theme.color.background.primary};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfaceElevated", theme.color.background.primary)};
   width: 100%;
   border-radius: 0 0 ${BorderRadius.Lg} ${BorderRadius.Lg};
 `;
@@ -121,6 +123,7 @@ const ResizeHandleLeft = styled(ResizeHandleBase)`
 `;
 const PanelContent = styled.div`
   overflow-y: auto;
+  ${semanticScrollbar}
   overscroll-behavior: contain;
   min-height: 0;
   /* While the panel height is derived from its content, the content must size

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

	@@ -1 +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';\n\nimport { autoFitMaxHeight, PADDING } from './utils';\n\nexport const FLOATING_PANEL_ID_PREFIX = 'floating-panel__' as const;\n\nenum ResizeDirection {\n North = 'n',\n South = 's',\n East = 'e',\n West = 'w',\n NorthEast = 'ne',\n NorthWest = 'nw',\n SouthEast = 'se',\n SouthWest = 'sw',\n}\n\nexport interface FloatingPanelProps {\n /** The title text displayed in the panel header /\n title: ReactNode;\n /* Callback function called when the close button is clicked /\n onClose?: () => void;\n /* Content to render inside the main panel area /\n children?: ReactNode;\n /* Optional React component rendered to the left of the expand button in the header /\n headerActions?: ReactNode;\n\n /* Whether the panel displays the fullsize button /\n canFullsize?: boolean;\n\n /* When true, the panel opens already in full-size (maximized) mode. /\n defaultFullSize?: boolean;\n\n /* Initial width of the panel in pixels /\n initialWidth?: number;\n /* Initial height of the panel in pixels /\n initialHeight?: number;\n /* Minimum width the panel can be resized to in pixels /\n minWidth?: number;\n /* Minimum height the panel can be resized to in pixels /\n minHeight?: number;\n\n footerButtons?: ReactNode;\n\n footerAdditionalAction?: ReactNode;\n\n portal?: boolean;\n\n /* Reference to the element that triggered this panel, used for automatic positioning /\n triggerRef?: RefObject<HTMLElement>;\n\n /* Which placement of the trigger element to position the panel on /\n placement?: Placement;\n\n /* Additional main axis offset in pixels from the calculated position. Main axis is defined as the axis in position to where its being defined\n * i.e. right, top, left ,bottom /\n mainAxisOffset?: number;\n\n /* Additional cross offset in pixels from the calculated position. Cross is defined as the axis that runs along the alignment\n * of the floating element. /\n crossAxisOffset?: number;\n\n /* remove padding from the panel content /\n noPadding?: boolean;\n\n /* When true, automatically calls `onClose` if the route changes after the\n * panel mounts. Mirrors the auto-dismiss-on-navigation behavior provided by\n * `PanelProvider` / `usePersistentFloatingPanel` for panels that don't opt\n * into the persistent panel context. Defaults to `false` so existing\n * consumers (e.g. dirty-check confirmation flows) are not broken. /\n dismissOnNavigate?: boolean;\n\n /* When true, the panel's height auto-fits its content via CSS (`max-content`)\n * up to the viewport, instead of using `initialHeight`. Once the user manually\n * resizes, the panel switches to pixel mode and stays there. `initialHeight`\n * is ignored while auto-fitting. /\n fitContent?: boolean;\n}\n\nconst FloatingPanelContainer = styled(motion.div)<{\n $fitHeight?: boolean;\n $maxHeight?: number;\n $minHeight?: number;\n}>`\n position: absolute;\n z-index: ${Z_INDICES.modal};\n background: ${({ theme }) => theme.color.background.primary};\n border: 1px solid ${Color.BorderDivider};\n border-radius: ${BorderRadius.Lg};\n box-shadow: ${Elevation.Low};\n display: flex;\n flex-direction: column;\n cursor: auto;\n ${({ $fitHeight, $maxHeight, $minHeight }) =>\n $fitHeight &&\n css`\n height: auto;\n max-height: ${$maxHeight ?? 0}px;\n min-height: ${$minHeight ?? 0}px;\n `}\n`;\n\nconst DragHandle = styled(motion.div)<{ isFullSize: boolean }>`\n cursor: ${({ isFullSize }) => (isFullSize ? 'default' : 'grab')};\n user-select: none;\n\n &:active {\n cursor: ${({ isFullSize }) => (isFullSize ? 'default' : 'grabbing')};\n }\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-height: 48px;\n height: 48px;\n overflow: hidden;\n padding: ${Spacing[1]} ${Spacing[1]} ${Spacing[1]} ${Spacing[3]};\n border-bottom: 1px solid ${Color.BorderDivider};\n`;\n\nconst Footer = styled.div`\n padding: ${Spacing[1]} ${Spacing[1]} ${Spacing[1]} ${Spacing[3]};\n border-top: 1px solid ${Color.BorderDivider};\n overflow-x: hidden;\n background-color: ${({ theme }) => theme.color.background.primary};\n width: 100%;\n border-radius: 0 0 ${BorderRadius.Lg} ${BorderRadius.Lg};\n`;\n\nconst ResizeHandleBase = styled.div`\n position: absolute;\n user-select: none;\n`;\n\n// Sets the width and height for base corner to 20px\nconst ResizeHandleBaseCorner = styled(ResizeHandleBase)`\n width: 1.25rem;\n height: 1.25rem;\n`;\n\nconst ResizeHandleBottomRight = styled(ResizeHandleBaseCorner)`\n bottom: -0.75rem;\n right: -0.75rem;\n cursor: nwse-resize;\n`;\n\nconst ResizeHandleBottomLeft = styled(ResizeHandleBaseCorner)`\n bottom: -0.75rem;\n left: -0.75rem;\n cursor: nesw-resize;\n`;\n\nconst ResizeHandleTopLeft = styled(ResizeHandleBaseCorner)`\n top: -0.75rem;\n left: -0.75rem;\n cursor: nwse-resize;\n`;\n\nconst ResizeHandleTopRight = styled(ResizeHandleBaseCorner)`\n top: -0.75rem;\n right: -0.75rem;\n cursor: nesw-resize;\n`;\n\n// These are all the Resize handles for the four cardinal direction,\n// To calculate the width, we subtract by the padding of 1rem on both sides\n// which are corners of the panel\nconst ResizeHandleBottom = styled(ResizeHandleBase)`\n bottom: -0.75rem;\n left: 0.5rem;\n width: calc(100% - 1rem);\n height: 1rem;\n cursor: ns-resize;\n user-select: none;\n`;\n\nconst ResizeHandleTop = styled(ResizeHandleBase)`\n top: -0.75rem;\n left: 0.5rem;\n width: calc(100% - 1rem);\n height: 1rem;\n cursor: ns-resize;\n`;\n\nconst ResizeHandleRight = styled(ResizeHandleBase)`\n right: -0.75rem;\n top: 0.5rem;\n width: 1rem;\n height: calc(100% - 1rem);\n cursor: ew-resize;\n`;\n\nconst ResizeHandleLeft = styled(ResizeHandleBase)`\n left: -0.75rem;\n top: 0.5rem;\n width: 1rem;\n height: calc(100% - 1rem);\n cursor: ew-resize;\n`;\n\nconst PanelContent = styled.div<{ $noPadding?: boolean; $fitHeight?: boolean }>`\n overflow-y: auto;\n overscroll-behavior: contain;\n min-height: 0;\n / While the panel height is derived from its content, the content must size\n itself (a percentage flex-basis against an indefinite height collapses in\n WebKit); it still shrinks when the panel hits its max-height. */\n flex: ${({ $fitHeight }) => ($fitHeight ? '0 1 auto' : '1 1 0%')};\n padding: ${({ $noPadding }) => ($noPadding ? 0 : Spacing[3])};\n`;\n\n// Sets a min width so that the text will display, but overflows if needed\nconst PanelText = styled.p`\n ${paragraphMixins.sm}\n white-space: nowrap;\n min-width: 3rem;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n align-items: center;\n font-weight: 500;\n`;\n\nconst StyledIconButton = styled(IconButton)`\n width: 1.5rem;\n height: 1.5rem;\n border-radius: ${BorderRadius.Md};\n`;\n\n// Only rendered when dismissOnNavigate is true, keeping 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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"}
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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"}

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

@@ -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-CJfYdgZF.mjs";
-import { r as useFormField } from "../../useFormField-DDbo-ExT.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-Dg8doZq2.mjs";
+import { r as useFormField } from "../../useFormField-CLRZkUZt.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormControlBaseProps, FormControlProps, FormInputContainer, FormLabel, FormLabelProps, HelperText, WarningText, useFormField };

package/dist/components/FormControl/index.mjs CHANGED Viewed

@@ -1,3 +1,3 @@
-import { n as useFormField } from "../../useFormField-DsvC5dOb.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-BEk4F1EV.mjs";
+import { n as useFormField } from "../../useFormField-XezSxho_.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-DXrxoJLl.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormInputContainer, FormLabel, HelperText, WarningText, useFormField };

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

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

package/dist/components/FormField/index.mjs CHANGED Viewed

@@ -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-ByT0avVx.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-Crp3F-hv.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.d.mts CHANGED Viewed

@@ -1,3 +1,3 @@
-import { GRID_BREAKPOINTS, Grid, GridProps } from "../../Grid.mjs";
+import { GRID_BREAKPOINTS, Grid, GridProps, useGridBreakpoint } from "../../Grid.mjs";
 import { GridItem, GridItemProps, GridSpan } from "../../GridItem.mjs";
-export { GRID_BREAKPOINTS, Grid, Grid as default, GridItem, type GridItemProps, type GridProps, type GridSpan };
+export { GRID_BREAKPOINTS, Grid, Grid as default, GridItem, type GridItemProps, type GridProps, type GridSpan, useGridBreakpoint };

package/dist/components/Grid/index.mjs CHANGED Viewed

@@ -1,85 +1,2 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
-import { Spacing } from "@persona/design-tokens";
-import { useLayoutEffect, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region components/Grid/Grid.tsx
-const GRID_BREAKPOINTS = {
-	sm: 768,
-	md: 1024,
-	lg: 1408
-};
-const getBreakpoint = (width) => {
-	if (width >= GRID_BREAKPOINTS.lg) return "lg";
-	if (width >= GRID_BREAKPOINTS.md) return "md";
-	if (width >= GRID_BREAKPOINTS.sm) return "sm";
-	return "xs";
-};
-const useGridBreakpoint = (ref) => {
-	const [breakpoint, setBreakpoint] = useState("md");
-	useLayoutEffect(() => {
-		const node = ref.current;
-		if (!node) return;
-		const update = () => setBreakpoint(getBreakpoint(node.offsetWidth));
-		update();
-		const observer = new ResizeObserver(update);
-		observer.observe(node);
-		return () => observer.disconnect();
-	}, [ref]);
-	return breakpoint;
-};
-const Root = styled.div`
-  display: grid;
-  width: 100%;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  box-sizing: border-box;
-  ${({ $breakpoint }) => $breakpoint === "xs" && css`
-      min-width: ${GRID_BREAKPOINTS.sm - 1}px;
-    `}
-  ${({ $breakpoint }) => $breakpoint === "xs" || $breakpoint === "sm" ? css`
-          gap: ${Spacing[3]};
-          padding-inline: ${Spacing[5]};
-        ` : css`
-          gap: ${Spacing[4]};
-          padding-inline: ${Spacing[6]};
-        `}
-  // max-width equals the lg threshold; offsetWidth reads the clamped border-box width and getBreakpoint uses >=, so the clamp stays 'lg'
-  ${({ $mode, $breakpoint }) => $mode === "fixed" && $breakpoint === "lg" && css`
-      max-width: ${GRID_BREAKPOINTS.lg}px;
-      margin-inline: auto;
-    `}
-`;
-/**
-* Provides a 12-column CSS grid that measures its own width with a ResizeObserver for responsive
-* horizontal margins and gutters. Vertical spacing is left to the consumer.
-*
-* The grid measures breakpoints against its own width rather than the viewport. Use `fixed` to
-* center the grid at its large-screen maximum width, or `fluid` to keep it at 100% width.
-*/
-const Grid = ({ mode, children, ...rest }) => {
-	const ref = useRef(null);
-	return /* @__PURE__ */ jsx(Root, {
-		ref,
-		$mode: mode,
-		$breakpoint: useGridBreakpoint(ref),
-		...rest,
-		children
-	});
-};
-//#endregion
-//#region components/Grid/GridItem.tsx
-const Item = styled.div`
-  grid-column: span ${({ $span }) => $span};
-  min-width: 0;
-`;
-const GridItem = ({ span, children, ...rest }) => /* @__PURE__ */ jsx(Item, {
-	$span: span,
-	...rest,
-	children
-});
-//#endregion
-export { GRID_BREAKPOINTS, Grid, Grid as default, GridItem };
-//# sourceMappingURL=index.mjs.map
+import { i as useGridBreakpoint, n as GRID_BREAKPOINTS, r as Grid, t as GridItem } from "../../Grid-eMLuyRzV.mjs";
+export { GRID_BREAKPOINTS, Grid, Grid as default, GridItem, useGridBreakpoint };

package/dist/components/HoverCopyableField/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as HoverCopyableField } from "../../HoverCopyableField-CN3gl0ny.mjs";
+import { t as HoverCopyableField } from "../../HoverCopyableField-12bBuG-d.mjs";
 export { HoverCopyableField as default };

package/dist/components/ImageTile/index.mjs CHANGED Viewed

@@ -1,15 +1,16 @@
 import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
-import { semanticColor } from "../../lib/semanticColor.mjs";
+import { semanticColor, semanticTokens } from "../../lib/semanticColor.mjs";
 import { i as Paragraph } from "../../Text-BdluS7Fy.mjs";
 import "../../variables/transitions.mjs";
 import { a as Tooltip } from "../../Tooltip-C0FuZS1C.mjs";
+import { withAlpha } from "../../lib/color.mjs";
 import { focusOutline } from "../../mixins/focus.mjs";
-import { n as Stack } from "../../Stack-ChsImaEY.mjs";
-import { t as IconButton } from "../../IconButton-CqTPMhjV.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-CuKSNxc9.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-Dizk2sZu.mjs";
-import { t as Checkbox } from "../../Checkbox-CyWXhuby.mjs";
-import { Color, Spacing } from "@persona/design-tokens";
+import { n as Stack } from "../../Stack-Bkn0TUDe.mjs";
+import { t as IconButton } from "../../IconButton-CCLMYWVN.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-rm9Nnxn7.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-dRSkdlqD.mjs";
+import { t as Checkbox } from "../../Checkbox-DQynkc_I.mjs";
+import { Spacing } from "@persona/design-tokens";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ImageIcon, LockedIcon, MoreIcon } from "@persona/icons";
@@ -50,7 +51,7 @@ const EmptyState = styled.div`
   align-items: center;
   justify-content: center;
   gap: ${Spacing[1]};
-  color: ${({ theme }) => semanticColor(theme, "FgDisabled", Color.BorderIconDisabled)};
+  color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.secondary)};
   padding: ${Spacing[3]};
   text-align: center;
 `;
@@ -107,7 +108,10 @@ const Root = styled.div`
     `}
   &:hover ${MetadataContainer} {
-    background-color: ${({ theme }) => semanticColor(theme, "SurfaceAccent", theme.color.background.highlight)};
+    background-color: ${({ theme }) => {
+	const tokens = semanticTokens(theme);
+	return tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : theme.color.background.highlight;
+}};
   }
 `;
 const stopPropagation = (e) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["DropdownMenu"],"sources":["../../../components/ImageTile/ImageTile.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n useEffect,\n useState,\n} 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 { Paragraph } from '@persona/design-system/components/Text';\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 { Color, Spacing } from '@persona/design-tokens';\nimport { ImageIcon, LockedIcon, MoreIcon } from '@persona/icons';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport type { TextAction } from 'design-system/types/Action';\n\nconst MIN_WIDTH = '180px';\nconst MAX_WIDTH = '420px';\nconst OVERLAY_INSET = Spacing[2];\nconst EMPTY_COPY = 'No available preview';\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. Region is omitted when\n * the array is empty or undefined.\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 ImageContainer = styled.div`\n position: relative;\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, 'FgDisabled', Color.BorderIconDisabled)};\n padding: ${Spacing[3]};\n text-align: center;\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 }) => semanticColor(theme, 'SurfaceAccent', theme.color.background.highlight)};\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 [loaded, setLoaded] = useState(false);\n const [hasError, setHasError] = useState(false);\n\n useEffect(() => {\n setLoaded(false);\n setHasError(false);\n }, [src]);\n\n const hasSrc = Boolean(src);\n const isLoading = hasSrc && !loaded && !hasError;\n const showEmpty = !hasSrc \|\| hasError;\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 const renderMetadata = hasMetadata \|\| isLoading;\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 <ImageContainer>\n {hasSrc && !hasError && (\n <Thumbnail\n $visible={loaded}\n $objectFit={objectFit}\n src={src ?? undefined}\n alt={alt}\n onLoad={() => setLoaded(true)}\n onError={() => setHasError(true)}\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\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 </ImageContainer>\n\n {renderMetadata && (\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":";;;;;;;;;;;;;;;;AAwBA,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,aAAa;AACnB,MAAM,0BAA0B;AA4ChC,MAAM,iBAAiB,OAAO,GAAG;;;uBAGV,EAAE,YAAY,cAAc,OAAO,oBAAoB,MAAM,MAAM,WAAW,UAAU,CAAC;;;AAIhH,MAAM,YAAY,OAAO,GAA2D;;;;;iBAKnE,EAAE,iBAAiB,WAAW;;cAEjC,EAAE,eAAgB,WAAW,IAAI,EAAG;gCACF;;AAGhD,MAAM,eAAe,OAAO,eAAe;;;;;;;AAQ3C,MAAM,aAAa,OAAO,GAAG;;;;;;;SAOpB,QAAQ,GAAG;YACR,EAAE,YAAY,cAAc,OAAO,cAAc,MAAM,mBAAmB,CAAC;aAC1E,QAAQ,GAAG;;;AAIxB,MAAM,oBAAoB,OAAO,GAAG;aACvB,QAAQ,GAAG;uBACD,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ,CAAC;2BACjF,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;yCAClD;;AAGzD,MAAM,cAAc,OAAO,GAAG;;;;;;AAO9B,MAAM,mBAAmB,OAAO,GAAG;;SAE1B,cAAc;UACb,cAAc;;;AAIxB,MAAM,iBAAiB,OAAO,GAAG;;SAExB,cAAc;WACZ,cAAc;;;AAIzB,MAAM,gBAAgB,OAAO,GAAG;;SAEvB,cAAc;WACZ,cAAc;;;;;YAKb,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,MAAM,KAAK,UAAU,CAAC;;AAG1F,MAAM,OAAO,OAAO,GAA4B;;;;;eAKjC,UAAU;eACV,UAAU;uBACF,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ,CAAC;uBACrF,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;oBACnF,EAAE,YAAY,MAAM,KAAK,aAAa;;;IAGtD,aAAa;;KAEZ,EAAE,iBACH,cACA,GAAG;;MAED;;YAEM,kBAAkB;yBACL,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,WAAW,UAAU,CAAC;;;AAI/G,MAAM,mBAAmB,MAAkB;AACzC,GAAE,iBAAiB;;AAGrB,MAAa,aAAa,EACxB,KACA,MAAM,IACN,YAAY,SACZ,aAAa,OACb,WAAW,OACX,kBACA,gBACA,SACA,SAAS,OACT,eACA,UACA,SACA,GAAG,YACiB;CACpB,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAE/C,iBAAgB;AACd,YAAU,MAAM;AAChB,cAAY,MAAM;IACjB,CAAC,IAAI,CAAC;CAET,MAAM,SAAS,QAAQ,IAAI;CAC3B,MAAM,YAAY,UAAU,CAAC,UAAU,CAAC;CACxC,MAAM,YAAY,CAAC,UAAU;CAE7B,MAAM,iBAAiB,SAAS,QAAQ,WAAW,CAAC,OAAO,OAAO,IAAI,EAAE;CACxE,MAAM,gBAAgB,CAAC,UAAU,eAAe,SAAS;CACzD,MAAM,YAAY,QAAQ,QAAQ;CAElC,MAAM,iBAAiB,MAAqC;AAC1D,MAAI,CAAC,QACH;AAKF,MAAI,EAAE,WAAW,EAAE,cACjB;AAEF,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,KAAE,gBAAgB;AAClB,KAAE,cAAc,OAAO;;;CAI3B,MAAM,2BACJ,mBAAmB,MAAM,UAAU,QAAQ;CAG7C,MAAM,kBADe,UAAU,UAAU,KAAK,KACR;AAEtC,QACE,qBAAC,MAAD;EACE,YAAY;EACH;EACT,WAAW,YAAY,gBAAgB,KAAA;EACvC,MAAM,YAAY,WAAW,KAAA;EAC7B,UAAU,YAAY,IAAI,KAAA;EAC1B,GAAI;YANN,CAQE,qBAAC,gBAAD,EAAA,UAAA;GACG,UAAU,CAAC,YACV,oBAAC,WAAD;IACE,UAAU;IACV,YAAY;IACZ,KAAK,OAAO,KAAA;IACP;IACL,cAAc,UAAU,KAAK;IAC7B,eAAe,YAAY,KAAK;IAChC,CAAA;GAEH,aAAa,oBAAC,cAAD,EAAgB,CAAA;GAC7B,aACC,qBAAC,YAAD,EAAA,UAAA,CACE,oBAAC,WAAD;IAAW,MAAM;IAAI,eAAA;IAAc,CAAA,EACnC,oBAAC,WAAD;IAAW,MAAK;IAAK,OAAM;IAAY,IAAG;cACvC;IACS,CAAA,CACD,EAAA,CAAA;GAGd,cACC,oBAAC,kBAAD;IAAkB,SAAS;cACzB,oBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAW,MAAM,mBAAmB,EAAE,OAAO,QAAQ;KACrD,cAAY;KACZ,CAAA;IACe,CAAA;GAGpB,iBACC,oBAAC,gBAAD;IAAgB,SAAS;cACvB,oBAACA,sBAAD;KACE,QAAA;KACA,SACE,oBAAC,YAAD;MAAY,MAAK;MAAK,cAAW;gBAC/B,oBAAC,UAAD,EAAY,CAAA;MACD,CAAA;eAGd,eAAe,KAAK,QAAQ,QAC3B,oBAACA,qBAAa,MAAd;MAEE,YAAY,OAAO;MACnB,YAAY,OAAO;MACnB,UAAU,OAAO;MACjB,SAAS,OAAO,YAAY,WAAW,WAAW;MAClD,UAAU,MAAM;AACd,WAAI,OAAO,SACT;AAEF,cAAO,OAAO,UAAU,EAAE;;gBAG3B,OAAO;MACU,EAbb,OAAO,MAAM,GAAG,OAAO,MAAM,GAAG,MAanB,CACpB;KACW,CAAA;IACA,CAAA;GAGlB,UACC,oBAAC,eAAD;IAAe,SAAS;cACrB,gBACC,oBAAC,SAAD;KAAS,aAAa,oBAAC,YAAD,EAAY,MAAM,IAAM,CAAA;KAAE,cAAY;eACzD;KACO,CAAA,GAEV,oBAAC,YAAD;KAAY,MAAM;KAAI,cAAW;KAAW,CAAA;IAEhC,CAAA;GAEH,EAAA,CAAA,EAEhB,kBACC,oBAAC,mBAAD,EAAA,UACG,YACC,oBAAC,gBAAD;GAAgB,OAAM;GAAM,QAAO;GAAS,CAAA,GAE5C,oBAAC,OAAD;GAAO,SAAS,QAAQ;aACrB,UAAU,KAAK,KAAK,QACnB,oBAAC,aAAD,EAAA,UAAwB,KAAkB,EAAxB,IAAwB,CAC1C;GACI,CAAA,EAEQ,CAAA,CAEjB"}
1	+ {"version":3,"file":"index.mjs","names":["DropdownMenu"],"sources":["../../../components/ImageTile/ImageTile.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n useEffect,\n useState,\n} 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 { Paragraph } from '@persona/design-system/components/Text';\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 { ImageIcon, 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\nconst MIN_WIDTH = '180px';\nconst MAX_WIDTH = '420px';\nconst OVERLAY_INSET = Spacing[2];\nconst EMPTY_COPY = 'No available preview';\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. Region is omitted when\n * the array is empty or undefined.\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 ImageContainer = styled.div`\n position: relative;\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\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 [loaded, setLoaded] = useState(false);\n const [hasError, setHasError] = useState(false);\n\n useEffect(() => {\n setLoaded(false);\n setHasError(false);\n }, [src]);\n\n const hasSrc = Boolean(src);\n const isLoading = hasSrc && !loaded && !hasError;\n const showEmpty = !hasSrc \|\| hasError;\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 const renderMetadata = hasMetadata \|\| isLoading;\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 <ImageContainer>\n {hasSrc && !hasError && (\n <Thumbnail\n $visible={loaded}\n $objectFit={objectFit}\n src={src ?? undefined}\n alt={alt}\n onLoad={() => setLoaded(true)}\n onError={() => setHasError(true)}\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\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 </ImageContainer>\n\n {renderMetadata && (\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 CHANGED Viewed

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

package/dist/components/Input/index.mjs CHANGED Viewed

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