@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-SUALMVL7.js

@@ -0,0 +1,25 @@
+// src/components/form/Calendar/Calendar.helpers.ts
+var CALENDAR_DEFAULTS = {
+  selectionMode: "single",
+  value: null,
+  range: { start: null, end: null },
+  firstDayOfWeek: 0,
+  locale: "en-US",
+  showOutsideDays: true,
+  minRangeLength: 1,
+  allowSameDayRange: true,
+  autoFocus: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveCalendarProps = (props) => {
+  const merged = { ...CALENDAR_DEFAULTS, ...definedProps(props) };
+  const defaultMonths = merged.selectionMode === "range" ? 2 : 1;
+  return { ...merged, monthsToShow: merged.numberOfMonths ?? defaultMonths };
+};
+
+export {
+  resolveCalendarProps
+};
+//# sourceMappingURL=chunk-SUALMVL7.js.map

package/dist/chunk-SUALMVL7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Calendar/Calendar.helpers.ts"],"sourcesContent":["import type { CalendarProps, ResolvedCalendarProps } from './Calendar.types';\n\nconst CALENDAR_DEFAULTS = {\n  selectionMode: 'single',\n  value: null,\n  range: { start: null, end: null },\n  firstDayOfWeek: 0,\n  locale: 'en-US',\n  showOutsideDays: true,\n  minRangeLength: 1,\n  allowSameDayRange: true,\n  autoFocus: false,\n} as const satisfies Partial<CalendarProps>;\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: CalendarProps): Partial<CalendarProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<CalendarProps>;\n\n// Applied as a merge rather than destructuring defaults, which would otherwise\n// put nine branches into the component's own complexity budget.\nexport const resolveCalendarProps = (props: CalendarProps): ResolvedCalendarProps => {\n  const merged = { ...CALENDAR_DEFAULTS, ...definedProps(props) } as ResolvedCalendarProps;\n\n  // A range needs two months side by side to be picked comfortably; a single\n  // date does not.\n  const defaultMonths = merged.selectionMode === 'range' ? 2 : 1;\n\n  return { ...merged, monthsToShow: merged.numberOfMonths ?? defaultMonths };\n};\n"],"mappings":";AAEA,IAAM,oBAAoB;AAAA,EACxB,eAAe;AAAA,EACf,OAAO;AAAA,EACP,OAAO,EAAE,OAAO,MAAM,KAAK,KAAK;AAAA,EAChC,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,WAAW;AACb;AAIA,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAIK,IAAM,uBAAuB,CAAC,UAAgD;AACnF,QAAM,SAAS,EAAE,GAAG,mBAAmB,GAAG,aAAa,KAAK,EAAE;AAI9D,QAAM,gBAAgB,OAAO,kBAAkB,UAAU,IAAI;AAE7D,SAAO,EAAE,GAAG,QAAQ,cAAc,OAAO,kBAAkB,cAAc;AAC3E;","names":[]}

package/dist/chunk-SUZXPDUQ.js

@@ -0,0 +1,144 @@
+import {
+  createPaletteKeyHandler,
+  filterCommands,
+  groupByCategory
+} from "./chunk-4VRDFZ4G.js";
+
+// src/components/navigation/CommandPalette/CommandPalette.hooks.ts
+import Fuse from "fuse.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+var RECENT_LIMIT = 5;
+var FOCUS_DELAY_MS = 100;
+var useCommandSearch = ({
+  commands,
+  searchQuery,
+  showRecent,
+  recentCommandIds
+}) => {
+  const fuse = useMemo(
+    () => new Fuse(commands, {
+      keys: ["label", "description", "keywords", "category"],
+      threshold: 0.3,
+      includeScore: true
+    }),
+    [commands]
+  );
+  const filteredCommands = useMemo(
+    () => filterCommands({ commands, searchQuery, fuse, showRecent, recentCommandIds }),
+    [searchQuery, commands, fuse, showRecent, recentCommandIds]
+  );
+  const groupedCommands = useMemo(() => groupByCategory(filteredCommands), [filteredCommands]);
+  return { filteredCommands, groupedCommands };
+};
+var useExecuteCommand = ({
+  setRecentCommandIds,
+  onCommandExecute,
+  onClose
+}) => useCallback(
+  (command) => {
+    setRecentCommandIds(
+      (prev) => [command.id, ...prev.filter((id) => id !== command.id)].slice(0, RECENT_LIMIT)
+    );
+    command.action();
+    onCommandExecute?.(command);
+    onClose();
+  },
+  [setRecentCommandIds, onCommandExecute, onClose]
+);
+var useSelectionReset = ({
+  open,
+  searchQuery,
+  searchInputRef,
+  setSearchQuery,
+  setSelectedIndex
+}) => {
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [searchQuery, setSelectedIndex]);
+  useEffect(() => {
+    if (open) {
+      window.setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, FOCUS_DELAY_MS);
+      return;
+    }
+    setSearchQuery("");
+    setSelectedIndex(0);
+  }, [open, searchInputRef, setSearchQuery, setSelectedIndex]);
+};
+var usePaletteKeyboard = ({
+  open,
+  selectedIndex,
+  filteredCommands,
+  listRef,
+  setSelectedIndex,
+  executeCommand,
+  onClose
+}) => {
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = createPaletteKeyHandler({
+      commandCount: filteredCommands.length,
+      selectedCommand: filteredCommands[selectedIndex],
+      setSelectedIndex,
+      executeCommand,
+      onClose
+    });
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, selectedIndex, filteredCommands, setSelectedIndex, executeCommand, onClose]);
+  useEffect(() => {
+    const selectedElement = listRef.current?.querySelector(
+      `[data-index="${selectedIndex}"]`
+    );
+    selectedElement?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [selectedIndex, listRef]);
+};
+var useCommandPalette = ({
+  open,
+  commands,
+  showRecent,
+  recentCommands,
+  onCommandExecute,
+  onClose
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [recentCommandIds, setRecentCommandIds] = useState(recentCommands);
+  const searchInputRef = useRef(null);
+  const listRef = useRef(null);
+  const { filteredCommands, groupedCommands } = useCommandSearch({
+    commands,
+    searchQuery,
+    showRecent,
+    recentCommandIds
+  });
+  const executeCommand = useExecuteCommand({ setRecentCommandIds, onCommandExecute, onClose });
+  useSelectionReset({ open, searchQuery, searchInputRef, setSearchQuery, setSelectedIndex });
+  usePaletteKeyboard({
+    open,
+    selectedIndex,
+    filteredCommands,
+    listRef,
+    setSelectedIndex,
+    executeCommand,
+    onClose
+  });
+  return {
+    searchQuery,
+    setSearchQuery,
+    selectedIndex,
+    setSelectedIndex,
+    searchInputRef,
+    listRef,
+    filteredCommands,
+    groupedCommands,
+    executeCommand,
+    recentCommandIds
+  };
+};
+
+export {
+  useCommandPalette
+};
+//# sourceMappingURL=chunk-SUZXPDUQ.js.map

package/dist/chunk-SUZXPDUQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/CommandPalette/CommandPalette.hooks.ts"],"sourcesContent":["import Fuse from 'fuse.js';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n  createPaletteKeyHandler,\n  filterCommands,\n  groupByCategory,\n} from './CommandPalette.helpers';\nimport type { PaletteCommand } from './CommandPalette.types';\n\nconst RECENT_LIMIT = 5;\nconst FOCUS_DELAY_MS = 100;\n\n// The fuzzy index and the two derived lists it feeds.\nconst useCommandSearch = ({\n  commands,\n  searchQuery,\n  showRecent,\n  recentCommandIds,\n}: {\n  commands: PaletteCommand[];\n  searchQuery: string;\n  showRecent?: boolean;\n  recentCommandIds: string[];\n}) => {\n  const fuse = useMemo(\n    () =>\n      new Fuse(commands, {\n        keys: ['label', 'description', 'keywords', 'category'],\n        threshold: 0.3,\n        includeScore: true,\n      }),\n    [commands],\n  );\n\n  const filteredCommands = useMemo(\n    () => filterCommands({ commands, searchQuery, fuse, showRecent, recentCommandIds }),\n    [searchQuery, commands, fuse, showRecent, recentCommandIds],\n  );\n\n  const groupedCommands = useMemo(() => groupByCategory(filteredCommands), [filteredCommands]);\n\n  return { filteredCommands, groupedCommands };\n};\n\n// Running a command records it as recent, fires the caller's callback and closes\n// the palette.\nconst useExecuteCommand = ({\n  setRecentCommandIds,\n  onCommandExecute,\n  onClose,\n}: {\n  setRecentCommandIds: React.Dispatch<React.SetStateAction<string[]>>;\n  onCommandExecute?: (command: PaletteCommand) => void;\n  onClose: () => void;\n}) =>\n  useCallback(\n    (command: PaletteCommand) => {\n      setRecentCommandIds((prev) =>\n        [command.id, ...prev.filter((id) => id !== command.id)].slice(0, RECENT_LIMIT),\n      );\n\n      command.action();\n      onCommandExecute?.(command);\n      onClose();\n    },\n    [setRecentCommandIds, onCommandExecute, onClose],\n  );\n\n// The highlight resets on every new query; opening the palette focuses the input\n// and closing it clears the query.\nconst useSelectionReset = ({\n  open,\n  searchQuery,\n  searchInputRef,\n  setSearchQuery,\n  setSelectedIndex,\n}: {\n  open: boolean;\n  searchQuery: string;\n  searchInputRef: React.RefObject<HTMLInputElement | null>;\n  setSearchQuery: React.Dispatch<React.SetStateAction<string>>;\n  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;\n}) => {\n  useEffect(() => {\n    setSelectedIndex(0);\n  }, [searchQuery, setSelectedIndex]);\n\n  useEffect(() => {\n    if (open) {\n      window.setTimeout(() => {\n        searchInputRef.current?.focus();\n      }, FOCUS_DELAY_MS);\n      return;\n    }\n\n    setSearchQuery('');\n    setSelectedIndex(0);\n  }, [open, searchInputRef, setSearchQuery, setSelectedIndex]);\n};\n\n// Global key handling while the palette is open, plus keeping the highlighted\n// row scrolled into view.\nconst usePaletteKeyboard = ({\n  open,\n  selectedIndex,\n  filteredCommands,\n  listRef,\n  setSelectedIndex,\n  executeCommand,\n  onClose,\n}: {\n  open: boolean;\n  selectedIndex: number;\n  filteredCommands: PaletteCommand[];\n  listRef: React.RefObject<globalThis.HTMLUListElement | null>;\n  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;\n  executeCommand: (command: PaletteCommand) => void;\n  onClose: () => void;\n}) => {\n  useEffect(() => {\n    if (!open) return;\n\n    const handleKeyDown = createPaletteKeyHandler({\n      commandCount: filteredCommands.length,\n      selectedCommand: filteredCommands[selectedIndex],\n      setSelectedIndex,\n      executeCommand,\n      onClose,\n    });\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [open, selectedIndex, filteredCommands, setSelectedIndex, executeCommand, onClose]);\n\n  useEffect(() => {\n    const selectedElement = listRef.current?.querySelector(\n      `[data-index=\"${selectedIndex}\"]`,\n    ) as HTMLElement | null;\n\n    selectedElement?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }, [selectedIndex, listRef]);\n};\n\n// All of the palette's state: the query, the highlighted row, the derived lists\n// and the effects that keep them in sync. Grouped here so the exported component\n// is prop defaults plus markup.\nexport const useCommandPalette = ({\n  open,\n  commands,\n  showRecent,\n  recentCommands,\n  onCommandExecute,\n  onClose,\n}: {\n  open: boolean;\n  commands: PaletteCommand[];\n  showRecent?: boolean;\n  recentCommands: string[];\n  onCommandExecute?: (command: PaletteCommand) => void;\n  onClose: () => void;\n}) => {\n  const [searchQuery, setSearchQuery] = useState('');\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [recentCommandIds, setRecentCommandIds] = useState<string[]>(recentCommands);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<globalThis.HTMLUListElement>(null);\n\n  const { filteredCommands, groupedCommands } = useCommandSearch({\n    commands,\n    searchQuery,\n    showRecent,\n    recentCommandIds,\n  });\n\n  const executeCommand = useExecuteCommand({ setRecentCommandIds, onCommandExecute, onClose });\n\n  useSelectionReset({ open, searchQuery, searchInputRef, setSearchQuery, setSelectedIndex });\n\n  usePaletteKeyboard({\n    open,\n    selectedIndex,\n    filteredCommands,\n    listRef,\n    setSelectedIndex,\n    executeCommand,\n    onClose,\n  });\n\n  return {\n    searchQuery,\n    setSearchQuery,\n    selectedIndex,\n    setSelectedIndex,\n    searchInputRef,\n    listRef,\n    filteredCommands,\n    groupedCommands,\n    executeCommand,\n    recentCommandIds,\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-SWELYVW5.js

@@ -0,0 +1,227 @@
+import {
+  loadingOverlayStyles,
+  modalContentStyles,
+  titleLeftStyles,
+  titleRightStyles,
+  titleStyles
+} from "./chunk-WJOQM3AJ.js";
+import {
+  safeAreaBottom
+} from "./chunk-IHS3GDPZ.js";
+
+// src/components/feedback/StackedModal/StackedModal.parts.tsx
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import CloseIcon from "@mui/icons-material/Close";
+import {
+  Box,
+  CircularProgress,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Skeleton,
+  styled,
+  Typography
+} from "@mui/material";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StyledDialogTitle = styled(DialogTitle, {
+  shouldForwardProp: (prop) => prop !== "rtl"
+})(({ theme, rtl }) => titleStyles(theme, rtl));
+var DialogTitleLeft = styled(Box)(({ theme }) => titleLeftStyles(theme));
+var DialogTitleRight = styled(Box)(({ theme }) => titleRightStyles(theme));
+var LoadingOverlay = styled(Box)(({ theme }) => loadingOverlayStyles(theme));
+var StackedModalContent = styled(DialogContent)(
+  ({ theme }) => modalContentStyles(theme)
+);
+var testId = (base, suffix) => base ? `${base}-${suffix}` : void 0;
+var StackedModalActions = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
+var splitModalChildren = (children) => {
+  let actions = null;
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child) && child.type === StackedModalActions) {
+      actions = child.props.children;
+    }
+  });
+  const content = React.Children.toArray(children).filter(
+    (child) => !(React.isValidElement(child) && child.type === StackedModalActions)
+  );
+  return { content, actions };
+};
+var resolveModalContent = (children, actions, isMobile) => {
+  const { content, actions: childActions } = splitModalChildren(children);
+  const modalActions = childActions ?? actions;
+  return {
+    content,
+    modalActions,
+    headerActions: isMobile ? null : modalActions,
+    hasMobileActions: Boolean(isMobile && modalActions)
+  };
+};
+var modalAriaIds = (modalId, ariaLabelledBy, ariaDescribedBy) => ({
+  titleId: ariaLabelledBy || `modal-title-${modalId}`,
+  descId: ariaDescribedBy || `modal-desc-${modalId}`
+});
+var ModalLoadingOverlay = ({
+  loadingText,
+  dataTestId
+}) => /* @__PURE__ */ jsxs(LoadingOverlay, { "data-testid": testId(dataTestId, "loading-overlay"), children: [
+  /* @__PURE__ */ jsx(CircularProgress, { size: 40, "data-testid": testId(dataTestId, "loading-spinner") }),
+  loadingText && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 2 }, "data-testid": testId(dataTestId, "loading-text"), children: loadingText })
+] });
+var HeaderLeadingButton = ({ canGoBack, onBack, backLabel, onClose, hideClose, rtl, dataTestId }) => {
+  if (canGoBack) {
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        edge: "start",
+        color: "inherit",
+        onClick: onBack,
+        "aria-label": backLabel,
+        size: "small",
+        sx: { transform: rtl ? "rotate(180deg)" : "none" },
+        "data-testid": testId(dataTestId, "back-button"),
+        children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+      }
+    );
+  }
+  if (hideClose) return null;
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      edge: "start",
+      color: "inherit",
+      onClick: onClose,
+      "aria-label": "close",
+      size: "small",
+      "data-testid": testId(dataTestId, "close-button"),
+      children: /* @__PURE__ */ jsx(CloseIcon, {})
+    }
+  );
+};
+var ModalHeader = ({
+  titleId,
+  navigationTitle,
+  canGoBack,
+  onBack,
+  onClose,
+  hideClose,
+  backLabel,
+  headerActions,
+  rtl,
+  dataTestId
+}) => /* @__PURE__ */ jsxs(StyledDialogTitle, { id: titleId, rtl, "data-testid": testId(dataTestId, "header"), children: [
+  /* @__PURE__ */ jsxs(DialogTitleLeft, { children: [
+    /* @__PURE__ */ jsx(
+      HeaderLeadingButton,
+      {
+        canGoBack,
+        onBack,
+        backLabel,
+        onClose,
+        hideClose,
+        rtl,
+        dataTestId
+      }
+    ),
+    navigationTitle && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "h6",
+        component: "h2",
+        noWrap: true,
+        sx: { ml: canGoBack || !hideClose ? 1 : 0 },
+        "data-testid": testId(dataTestId, "title"),
+        children: navigationTitle
+      }
+    )
+  ] }),
+  /* @__PURE__ */ jsx(DialogTitleRight, { "data-testid": testId(dataTestId, "header-actions"), children: headerActions })
+] });
+var ContentSkeleton = () => /* @__PURE__ */ jsxs(Box, { sx: { p: 3 }, children: [
+  /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "60%", height: 32 }),
+  /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%" }),
+  /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%" }),
+  /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", height: 200, sx: { mt: 2 } })
+] });
+var ModalBody = ({
+  descId,
+  showSkeleton,
+  endsPanel,
+  dataTestId,
+  children
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    id: descId,
+    sx: {
+      position: "relative",
+      flex: 1,
+      overflow: "auto",
+      // iOS momentum scrolling, and no scroll-chaining to the page behind —
+      // without `contain`, an overscroll at the end of the list rubber-bands the
+      // whole panel and springs back before the last row can be tapped.
+      WebkitOverflowScrolling: "touch",
+      overscrollBehavior: "contain",
+      // The content itself ends the panel when there is no action bar, so it has
+      // to clear the home indicator on its own.
+      ...endsPanel ? safeAreaBottom(0) : {}
+    },
+    "data-testid": testId(dataTestId, "content"),
+    children: showSkeleton ? /* @__PURE__ */ jsx(ContentSkeleton, {}) : children
+  }
+);
+var ModalFooter = ({
+  dataTestId,
+  children
+}) => /* @__PURE__ */ jsx(
+  DialogActions,
+  {
+    sx: {
+      borderTop: (theme) => `1px solid ${theme.palette.divider}`,
+      padding: 2,
+      // Never let the action row sit under the iOS home indicator.
+      flexShrink: 0,
+      ...safeAreaBottom(16)
+    },
+    "data-testid": testId(dataTestId, "footer"),
+    children
+  }
+);
+var ModalPanelContents = ({
+  showSkeleton,
+  loadingText,
+  descId,
+  content,
+  modalActions,
+  hasMobileActions,
+  ...header
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  showSkeleton && /* @__PURE__ */ jsx(ModalLoadingOverlay, { loadingText, dataTestId: header.dataTestId }),
+  /* @__PURE__ */ jsx(ModalHeader, { ...header }),
+  /* @__PURE__ */ jsx(
+    ModalBody,
+    {
+      descId,
+      showSkeleton,
+      endsPanel: !hasMobileActions,
+      dataTestId: header.dataTestId,
+      children: content
+    }
+  ),
+  hasMobileActions && /* @__PURE__ */ jsx(ModalFooter, { dataTestId: header.dataTestId, children: modalActions })
+] });
+
+export {
+  StackedModalContent,
+  testId,
+  StackedModalActions,
+  resolveModalContent,
+  modalAriaIds,
+  ModalLoadingOverlay,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  ModalPanelContents
+};
+//# sourceMappingURL=chunk-SWELYVW5.js.map

package/dist/chunk-SWELYVW5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/StackedModal/StackedModal.parts.tsx"],"sourcesContent":["import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport CloseIcon from '@mui/icons-material/Close';\nimport {\n  Box,\n  CircularProgress,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  IconButton,\n  Skeleton,\n  styled,\n  Typography,\n} from '@mui/material';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\nimport { safeAreaBottom } from '../../../utils/viewport';\nimport {\n  loadingOverlayStyles,\n  modalContentStyles,\n  titleLeftStyles,\n  titleRightStyles,\n  titleStyles,\n} from './StackedModal.styles';\n\nconst StyledDialogTitle = styled(DialogTitle, {\n  shouldForwardProp: (prop) => prop !== 'rtl',\n})<{ rtl?: boolean }>(({ theme, rtl }) => titleStyles(theme, rtl));\n\nconst DialogTitleLeft = styled(Box)(({ theme }) => titleLeftStyles(theme));\nconst DialogTitleRight = styled(Box)(({ theme }) => titleRightStyles(theme));\nconst LoadingOverlay = styled(Box)(({ theme }) => loadingOverlayStyles(theme));\n\n/**\n * The padded content wrapper callers put inside a StackedModal. The explicit\n * `typeof DialogContent` annotation keeps its type nameable across package\n * boundaries (TS2742) now that it is re-exported from the barrel.\n */\nexport const StackedModalContent: typeof DialogContent = styled(DialogContent)(({ theme }) =>\n  modalContentStyles(theme),\n) as typeof DialogContent;\n\n/** Sub-element test IDs derive from the modal's own, or stay off when it has none. */\nexport const testId = (base: string | undefined, suffix: string): string | undefined =>\n  base ? `${base}-${suffix}` : undefined;\n\n/**\n * A wrapper marking the subtree that should render as modal actions — the\n * StackedModal pulls it out of `children` and places it by device.\n */\nexport const StackedModalActions: FC<{ children?: ReactNode }> = ({ children }) => <>{children}</>;\n\n/** Separates the `StackedModalActions` subtree from the rest of the content. */\nconst splitModalChildren = (children: ReactNode): { content: ReactNode; actions: ReactNode } => {\n  let actions: ReactNode = null;\n\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement<{ children?: ReactNode }>(child) && child.type === StackedModalActions) {\n      actions = child.props.children;\n    }\n  });\n\n  const content = React.Children.toArray(children).filter(\n    (child) => !(React.isValidElement(child) && child.type === StackedModalActions),\n  );\n\n  return { content, actions };\n};\n\n/**\n * Works out what renders where: a `StackedModalActions` child wins over the\n * `actions` prop, and on phones those actions move out of the header into a\n * pinned bottom bar.\n */\nexport const resolveModalContent = (\n  children: ReactNode,\n  actions: ReactNode,\n  isMobile: boolean,\n): {\n  content: ReactNode;\n  modalActions: ReactNode;\n  headerActions: ReactNode;\n  hasMobileActions: boolean;\n} => {\n  const { content, actions: childActions } = splitModalChildren(children);\n  const modalActions = childActions ?? actions;\n  return {\n    content,\n    modalActions,\n    headerActions: isMobile ? null : modalActions,\n    hasMobileActions: Boolean(isMobile && modalActions),\n  };\n};\n\n/** The panel's own ARIA ids, unless the caller wired it to its own labels. */\nexport const modalAriaIds = (\n  modalId: string,\n  ariaLabelledBy?: string,\n  ariaDescribedBy?: string,\n): { titleId: string; descId: string } => ({\n  titleId: ariaLabelledBy || `modal-title-${modalId}`,\n  descId: ariaDescribedBy || `modal-desc-${modalId}`,\n});\n\nexport const ModalLoadingOverlay: FC<{ loadingText?: string; dataTestId?: string }> = ({\n  loadingText,\n  dataTestId,\n}) => (\n  <LoadingOverlay data-testid={testId(dataTestId, 'loading-overlay')}>\n    <CircularProgress size={40} data-testid={testId(dataTestId, 'loading-spinner')} />\n    {loadingText && (\n      <Typography variant=\"body2\" sx={{ mt: 2 }} data-testid={testId(dataTestId, 'loading-text')}>\n        {loadingText}\n      </Typography>\n    )}\n  </LoadingOverlay>\n);\n\ninterface ModalHeaderProps {\n  titleId: string;\n  navigationTitle?: ReactNode;\n  /** Deeper than the first panel, so the leading button goes back instead of closing. */\n  canGoBack: boolean;\n  onBack: () => void;\n  /** The back arrow's accessible name — it carries a glyph only. REQUIRED. */\n  backLabel: string;\n  onClose: () => void;\n  /** Renders the bar without its ✕ — the panel's content owns the dismiss. */\n  hideClose?: boolean;\n  /** Header actions — desktop only; on phones they move to the footer. */\n  headerActions?: ReactNode;\n  rtl?: boolean;\n  dataTestId?: string;\n}\n\n/**\n * The bar's leading control: back at depth ≥2, otherwise close — and nothing at\n * all when the panel's content carries its own ✕ (`hideClose`).\n */\nconst HeaderLeadingButton: FC<\n  Pick<\n    ModalHeaderProps,\n    'canGoBack' | 'onBack' | 'backLabel' | 'onClose' | 'hideClose' | 'rtl' | 'dataTestId'\n  >\n> = ({ canGoBack, onBack, backLabel, onClose, hideClose, rtl, dataTestId }) => {\n  if (canGoBack) {\n    return (\n      <IconButton\n        edge=\"start\"\n        color=\"inherit\"\n        onClick={onBack}\n        aria-label={backLabel}\n        size=\"small\"\n        sx={{ transform: rtl ? 'rotate(180deg)' : 'none' }}\n        data-testid={testId(dataTestId, 'back-button')}\n      >\n        <ChevronLeftIcon />\n      </IconButton>\n    );\n  }\n  if (hideClose) return null;\n  return (\n    <IconButton\n      edge=\"start\"\n      color=\"inherit\"\n      onClick={onClose}\n      aria-label=\"close\"\n      size=\"small\"\n      data-testid={testId(dataTestId, 'close-button')}\n    >\n      <CloseIcon />\n    </IconButton>\n  );\n};\n\nexport const ModalHeader: FC<ModalHeaderProps> = ({\n  titleId,\n  navigationTitle,\n  canGoBack,\n  onBack,\n  onClose,\n  hideClose,\n  backLabel,\n  headerActions,\n  rtl,\n  dataTestId,\n}) => (\n  <StyledDialogTitle id={titleId} rtl={rtl} data-testid={testId(dataTestId, 'header')}>\n    <DialogTitleLeft>\n      <HeaderLeadingButton\n        canGoBack={canGoBack}\n        onBack={onBack}\n        backLabel={backLabel}\n        onClose={onClose}\n        hideClose={hideClose}\n        rtl={rtl}\n        dataTestId={dataTestId}\n      />\n      {navigationTitle && (\n        <Typography\n          variant=\"h6\"\n          component=\"h2\"\n          noWrap\n          sx={{ ml: canGoBack || !hideClose ? 1 : 0 }}\n          data-testid={testId(dataTestId, 'title')}\n        >\n          {navigationTitle}\n        </Typography>\n      )}\n    </DialogTitleLeft>\n    <DialogTitleRight data-testid={testId(dataTestId, 'header-actions')}>\n      {headerActions}\n    </DialogTitleRight>\n  </StyledDialogTitle>\n);\n\nconst ContentSkeleton: FC = () => (\n  <Box sx={{ p: 3 }}>\n    <Skeleton variant=\"text\" width=\"60%\" height={32} />\n    <Skeleton variant=\"text\" width=\"100%\" />\n    <Skeleton variant=\"text\" width=\"100%\" />\n    <Skeleton variant=\"rectangular\" height={200} sx={{ mt: 2 }} />\n  </Box>\n);\n\ninterface ModalBodyProps {\n  descId: string;\n  showSkeleton: boolean;\n  /** When there is no action bar, the body is what reaches the bottom of the panel. */\n  endsPanel: boolean;\n  dataTestId?: string;\n  children?: ReactNode;\n}\n\nexport const ModalBody: FC<ModalBodyProps> = ({\n  descId,\n  showSkeleton,\n  endsPanel,\n  dataTestId,\n  children,\n}) => (\n  <Box\n    id={descId}\n    sx={{\n      position: 'relative',\n      flex: 1,\n      overflow: 'auto',\n      // iOS momentum scrolling, and no scroll-chaining to the page behind —\n      // without `contain`, an overscroll at the end of the list rubber-bands the\n      // whole panel and springs back before the last row can be tapped.\n      WebkitOverflowScrolling: 'touch',\n      overscrollBehavior: 'contain',\n      // The content itself ends the panel when there is no action bar, so it has\n      // to clear the home indicator on its own.\n      ...(endsPanel ? safeAreaBottom(0) : {}),\n    }}\n    data-testid={testId(dataTestId, 'content')}\n  >\n    {showSkeleton ? <ContentSkeleton /> : children}\n  </Box>\n);\n\n/** The phone-only pinned action bar; on desktop the actions live in the header. */\nexport const ModalFooter: FC<{ dataTestId?: string; children?: ReactNode }> = ({\n  dataTestId,\n  children,\n}) => (\n  <DialogActions\n    sx={{\n      borderTop: (theme) => `1px solid ${theme.palette.divider}`,\n      padding: 2,\n      // Never let the action row sit under the iOS home indicator.\n      flexShrink: 0,\n      ...safeAreaBottom(16),\n    }}\n    data-testid={testId(dataTestId, 'footer')}\n  >\n    {children}\n  </DialogActions>\n);\n\ninterface PanelContentsProps extends ModalHeaderProps {\n  showSkeleton: boolean;\n  loadingText?: string;\n  descId: string;\n  content: ReactNode;\n  /** The resolved actions, already placed in the header or destined for the footer. */\n  modalActions: ReactNode;\n  hasMobileActions: boolean;\n}\n\n/** Everything inside the sliding panel: the loading veil, header, body and action bar. */\nexport const ModalPanelContents: FC<PanelContentsProps> = ({\n  showSkeleton,\n  loadingText,\n  descId,\n  content,\n  modalActions,\n  hasMobileActions,\n  ...header\n}) => (\n  <>\n    {showSkeleton && (\n      <ModalLoadingOverlay loadingText={loadingText} dataTestId={header.dataTestId} />\n    )}\n    <ModalHeader {...header} />\n    <ModalBody\n      descId={descId}\n      showSkeleton={showSkeleton}\n      endsPanel={!hasMobileActions}\n      dataTestId={header.dataTestId}\n    >\n      {content}\n    </ModalBody>\n    {hasMobileActions && (\n      <ModalFooter dataTestId={header.dataTestId}>{modalActions}</ModalFooter>\n    )}\n  </>\n);\n"],"mappings":"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","names":[]}

package/dist/chunk-SX3E6UC2.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-SX3E6UC2.js.map

package/dist/chunk-SX3E6UC2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-SXYIXCUB.js

@@ -0,0 +1,129 @@
+// src/components/data-display/HoverCard/HoverCard.hooks.ts
+import React from "react";
+var useHoverHandlers = ({
+  isTouchDevice,
+  touchEnabled,
+  enterDelay,
+  openCard,
+  closeCard,
+  exitTimeoutRef
+}) => {
+  const [touchTimeout, setTouchTimeout] = React.useState();
+  const hoverIgnored = isTouchDevice && !touchEnabled;
+  const cancelTouch = React.useCallback(() => {
+    if (touchTimeout) {
+      window.clearTimeout(touchTimeout);
+      setTouchTimeout(void 0);
+    }
+  }, [touchTimeout]);
+  React.useEffect(
+    () => () => {
+      if (touchTimeout) window.clearTimeout(touchTimeout);
+    },
+    [touchTimeout]
+  );
+  const triggerHandlers = {
+    onMouseEnter: (event) => {
+      if (hoverIgnored) return;
+      openCard(event);
+    },
+    onMouseLeave: () => {
+      if (hoverIgnored) return;
+      closeCard();
+    },
+    onTouchStart: (event) => {
+      if (!touchEnabled) return;
+      if (touchTimeout) window.clearTimeout(touchTimeout);
+      setTouchTimeout(window.setTimeout(() => openCard(event), enterDelay));
+    },
+    // End and cancel do the same thing: the press did not become a long press.
+    onTouchEnd: cancelTouch,
+    onTouchCancel: cancelTouch
+  };
+  const cardHandlers = {
+    onMouseEnter: () => {
+      if (exitTimeoutRef.current) window.clearTimeout(exitTimeoutRef.current);
+    },
+    onMouseLeave: closeCard
+  };
+  return { triggerHandlers, cardHandlers };
+};
+var useEscapeKey = (active, onEscape) => {
+  React.useEffect(() => {
+    if (!active) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") onEscape();
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [active, onEscape]);
+};
+var useHoverCard = ({
+  disabled,
+  touchEnabled,
+  enterDelay,
+  exitDelay,
+  onOpen,
+  onClose
+}) => {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isTouchDevice, setIsTouchDevice] = React.useState(false);
+  const enterTimeoutRef = React.useRef(void 0);
+  const exitTimeoutRef = React.useRef(void 0);
+  React.useEffect(() => {
+    setIsTouchDevice("ontouchstart" in window);
+  }, []);
+  const openCard = React.useCallback(
+    (event) => {
+      if (disabled) return;
+      if (exitTimeoutRef.current) {
+        window.clearTimeout(exitTimeoutRef.current);
+      }
+      const target = event.currentTarget;
+      enterTimeoutRef.current = window.setTimeout(() => {
+        setAnchorEl(target);
+        setIsOpen(true);
+        onOpen?.();
+      }, enterDelay);
+    },
+    [disabled, enterDelay, onOpen]
+  );
+  const closeCard = React.useCallback(() => {
+    if (enterTimeoutRef.current) {
+      window.clearTimeout(enterTimeoutRef.current);
+    }
+    exitTimeoutRef.current = window.setTimeout(() => {
+      setIsOpen(false);
+      setAnchorEl(null);
+      onClose?.();
+    }, exitDelay);
+  }, [exitDelay, onClose]);
+  const handleClose = React.useCallback(() => {
+    setIsOpen(false);
+    setAnchorEl(null);
+    onClose?.();
+  }, [onClose]);
+  const { triggerHandlers, cardHandlers } = useHoverHandlers({
+    isTouchDevice,
+    touchEnabled,
+    enterDelay,
+    openCard,
+    closeCard,
+    exitTimeoutRef
+  });
+  useEscapeKey(isOpen, handleClose);
+  React.useEffect(
+    () => () => {
+      if (enterTimeoutRef.current) window.clearTimeout(enterTimeoutRef.current);
+      if (exitTimeoutRef.current) window.clearTimeout(exitTimeoutRef.current);
+    },
+    []
+  );
+  return { anchorEl, isOpen, handleClose, triggerHandlers, cardHandlers };
+};
+
+export {
+  useHoverCard
+};
+//# sourceMappingURL=chunk-SXYIXCUB.js.map

package/dist/chunk-SXYIXCUB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/HoverCard/HoverCard.hooks.ts"],"sourcesContent":["import React from 'react';\n\ninterface HandlerInput {\n  isTouchDevice: boolean;\n  touchEnabled: boolean;\n  enterDelay: number;\n  openCard: (event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>) => void;\n  closeCard: () => void;\n  exitTimeoutRef: React.MutableRefObject<number | undefined>;\n}\n\n/**\n * The pointer and touch handlers, over the open/close pair. Touch gets a\n * long-press because there is no hover to respond to; the card's own handlers\n * keep it open while the pointer is travelling onto it.\n */\nconst useHoverHandlers = ({\n  isTouchDevice,\n  touchEnabled,\n  enterDelay,\n  openCard,\n  closeCard,\n  exitTimeoutRef,\n}: HandlerInput) => {\n  const [touchTimeout, setTouchTimeout] = React.useState<number>();\n\n  /** A touch device with touch disabled has no hover to respond to. */\n  const hoverIgnored = isTouchDevice && !touchEnabled;\n\n  const cancelTouch = React.useCallback(() => {\n    if (touchTimeout) {\n      window.clearTimeout(touchTimeout);\n      setTouchTimeout(undefined);\n    }\n  }, [touchTimeout]);\n\n  React.useEffect(\n    () => () => {\n      if (touchTimeout) window.clearTimeout(touchTimeout);\n    },\n    [touchTimeout],\n  );\n\n  const triggerHandlers = {\n    onMouseEnter: (event: React.MouseEvent<HTMLElement>) => {\n      if (hoverIgnored) return;\n      openCard(event);\n    },\n    onMouseLeave: () => {\n      if (hoverIgnored) return;\n      closeCard();\n    },\n    onTouchStart: (event: React.TouchEvent<HTMLElement>) => {\n      if (!touchEnabled) return;\n      if (touchTimeout) window.clearTimeout(touchTimeout);\n      setTouchTimeout(window.setTimeout(() => openCard(event), enterDelay));\n    },\n    // End and cancel do the same thing: the press did not become a long press.\n    onTouchEnd: cancelTouch,\n    onTouchCancel: cancelTouch,\n  };\n\n  /** Moving onto the card keeps it open; leaving it starts the exit delay. */\n  const cardHandlers = {\n    onMouseEnter: () => {\n      if (exitTimeoutRef.current) window.clearTimeout(exitTimeoutRef.current);\n    },\n    onMouseLeave: closeCard,\n  };\n\n  return { triggerHandlers, cardHandlers };\n};\n\n/** Escape dismisses the card while it is open. */\nconst useEscapeKey = (active: boolean, onEscape: () => void) => {\n  React.useEffect(() => {\n    if (!active) return;\n\n    const handleEscape = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') onEscape();\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [active, onEscape]);\n};\n\ninterface HoverCardTimingInput {\n  disabled: boolean;\n  touchEnabled: boolean;\n  enterDelay: number;\n  exitDelay: number;\n  onOpen?: () => void;\n  onClose?: () => void;\n}\n\n/**\n * When the card is open, and the delays that decide it.\n *\n * Three timers are in play: the enter delay before opening, the exit delay\n * before closing (so the pointer can travel from the trigger onto the card\n * without dismissing it), and the long-press timer on touch. Each cancels the\n * others' pending work, which is why they live together.\n */\nexport const useHoverCard = ({\n  disabled,\n  touchEnabled,\n  enterDelay,\n  exitDelay,\n  onOpen,\n  onClose,\n}: HoverCardTimingInput) => {\n  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [isTouchDevice, setIsTouchDevice] = React.useState(false);\n  const enterTimeoutRef = React.useRef<number | undefined>(undefined);\n  const exitTimeoutRef = React.useRef<number | undefined>(undefined);\n\n  // Probed in an effect, not during render, so SSR and hydration stay intact.\n  React.useEffect(() => {\n    setIsTouchDevice('ontouchstart' in window);\n  }, []);\n\n  const openCard = React.useCallback(\n    (event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>) => {\n      if (disabled) return;\n\n      if (exitTimeoutRef.current) {\n        window.clearTimeout(exitTimeoutRef.current);\n      }\n\n      const target = event.currentTarget;\n      enterTimeoutRef.current = window.setTimeout(() => {\n        setAnchorEl(target);\n        setIsOpen(true);\n        onOpen?.();\n      }, enterDelay);\n    },\n    [disabled, enterDelay, onOpen],\n  );\n\n  const closeCard = React.useCallback(() => {\n    if (enterTimeoutRef.current) {\n      window.clearTimeout(enterTimeoutRef.current);\n    }\n\n    exitTimeoutRef.current = window.setTimeout(() => {\n      setIsOpen(false);\n      setAnchorEl(null);\n      onClose?.();\n    }, exitDelay);\n  }, [exitDelay, onClose]);\n\n  const handleClose = React.useCallback(() => {\n    setIsOpen(false);\n    setAnchorEl(null);\n    onClose?.();\n  }, [onClose]);\n\n  const { triggerHandlers, cardHandlers } = useHoverHandlers({\n    isTouchDevice,\n    touchEnabled,\n    enterDelay,\n    openCard,\n    closeCard,\n    exitTimeoutRef,\n  });\n\n  useEscapeKey(isOpen, handleClose);\n\n  React.useEffect(\n    () => () => {\n      if (enterTimeoutRef.current) window.clearTimeout(enterTimeoutRef.current);\n      if (exitTimeoutRef.current) window.clearTimeout(exitTimeoutRef.current);\n    },\n    [],\n  );\n\n  return { anchorEl, isOpen, handleClose, triggerHandlers, cardHandlers };\n};\n"],"mappings":"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","names":[]}