@12-apps/ui 6.11.1 → 6.12.1

package/dist/chunk-PKJKA4CU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/AsyncStateContainer/AsyncStateContainer.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { EmptyState } from '../EmptyState/EmptyState';\nimport { ErrorState } from '../ErrorState/ErrorState';\nimport { LoadingState } from '../LoadingState/LoadingState';\n\nimport type { AsyncStateContainerProps } from './AsyncStateContainer.types';\n\n/**\n * AsyncStateContainer - A composition-based wrapper for handling async data states\n *\n * Priority order: loading > error > empty > children\n *\n * @example\n * // With component props (composition pattern)\n * <AsyncStateContainer\n *   isLoading={isLoading}\n *   error={error}\n *   isEmpty={data.length === 0}\n *   loadingComponent={<LoadingState variant=\"skeleton\" />}\n *   errorComponent={<ErrorState message={error} onRetry={refetch} />}\n *   emptyComponent={<EmptyState title=\"No items\" onCreate={handleCreate} />}\n * >\n *   <DataGrid data={data} />\n * </AsyncStateContainer>\n *\n * @example\n * // With render props for more control\n * <AsyncStateContainer\n *   isLoading={isLoading}\n *   error={error}\n *   isEmpty={data.length === 0}\n *   renderLoading={() => <CustomLoader />}\n *   renderError={(error) => <CustomError error={error} />}\n *   renderEmpty={() => <CustomEmpty />}\n * >\n *   <DataGrid data={data} />\n * </AsyncStateContainer>\n */\n// The four states render the same wrapper, differing only in data-state and\n// what goes inside it.\nconst StateBox: React.FC<{\n  state: 'loading' | 'error' | 'empty' | 'success';\n  className?: string;\n  dataTestId?: string;\n  children: React.ReactNode;\n}> = ({ state, className, dataTestId, children }) => (\n  <Box\n    className={className}\n    data-testid={dataTestId || 'async-state-container'}\n    data-state={state}\n  >\n    {children}\n  </Box>\n);\n\nconst errorMessageOf = (error: unknown): string => {\n  if (!error) return '';\n  if (typeof error === 'string') return error;\n  if (error instanceof Error) return error.message;\n  return 'An unexpected error occurred';\n};\n\n// Each state takes a ready-made node, else a render function, else the default.\nconst pickNode = (\n  node: React.ReactNode,\n  render: (() => React.ReactNode) | undefined,\n  fallback: React.ReactNode,\n): React.ReactNode => node || render?.() || fallback;\n\nexport const AsyncStateContainer: React.FC<AsyncStateContainerProps> = React.memo(\n  ({\n    isLoading = false,\n    error,\n    isEmpty = false,\n    children,\n    loadingComponent,\n    renderLoading,\n    errorComponent,\n    renderError,\n    emptyComponent,\n    emptyTitle,\n    renderEmpty,\n    className,\n    dataTestId,\n  }) => {\n    const box = { className, dataTestId };\n\n    // Priority: loading > error > empty > children\n    if (isLoading) {\n      return (\n        <StateBox state=\"loading\" {...box}>\n          {pickNode(loadingComponent, renderLoading, <LoadingState />)}\n        </StateBox>\n      );\n    }\n\n    if (error) {\n      const message = errorMessageOf(error);\n      return (\n        <StateBox state=\"error\" {...box}>\n          {errorComponent || renderError?.(message) || <ErrorState message={message} />}\n        </StateBox>\n      );\n    }\n\n    if (isEmpty) {\n      return (\n        <StateBox state=\"empty\" {...box}>\n          {pickNode(emptyComponent, renderEmpty, <EmptyState title={emptyTitle} />)}\n        </StateBox>\n      );\n    }\n\n    return (\n      <StateBox state=\"success\" {...box}>\n        {children}\n      </StateBox>\n    );\n  },\n);\n\nAsyncStateContainer.displayName = 'AsyncStateContainer';\n\nexport default AsyncStateContainer;\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,WAAW;AA+ChB;AANF,IAAM,WAKD,CAAC,EAAE,OAAO,WAAW,YAAY,SAAS,MAC7C;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,cAAc;AAAA,IAC3B,cAAY;AAAA,IAEX;AAAA;AACH;AAGF,IAAM,iBAAiB,CAAC,UAA2B;AACjD,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,MAAI,iBAAiB,MAAO,QAAO,MAAM;AACzC,SAAO;AACT;AAGA,IAAM,WAAW,CACf,MACA,QACA,aACoB,QAAQ,SAAS,KAAK;AAErC,IAAM,sBAA0D,MAAM;AAAA,EAC3E,CAAC;AAAA,IACC,YAAY;AAAA,IACZ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,MAAM,EAAE,WAAW,WAAW;AAGpC,QAAI,WAAW;AACb,aACE,oBAAC,YAAS,OAAM,WAAW,GAAG,KAC3B,mBAAS,kBAAkB,eAAe,oBAAC,gBAAa,CAAE,GAC7D;AAAA,IAEJ;AAEA,QAAI,OAAO;AACT,YAAM,UAAU,eAAe,KAAK;AACpC,aACE,oBAAC,YAAS,OAAM,SAAS,GAAG,KACzB,4BAAkB,cAAc,OAAO,KAAK,oBAAC,cAAW,SAAkB,GAC7E;AAAA,IAEJ;AAEA,QAAI,SAAS;AACX,aACE,oBAAC,YAAS,OAAM,SAAS,GAAG,KACzB,mBAAS,gBAAgB,aAAa,oBAAC,cAAW,OAAO,YAAY,CAAE,GAC1E;AAAA,IAEJ;AAEA,WACE,oBAAC,YAAS,OAAM,WAAW,GAAG,KAC3B,UACH;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;AAElC,IAAO,8BAAQ;","names":[]}

package/dist/chunk-PLOOVF43.js

@@ -0,0 +1,147 @@
+import {
+  SearchGlyph
+} from "./chunk-DMNZD3Q7.js";
+import {
+  chipSx,
+  chipWrapSx,
+  panelHeadSx,
+  pinnedLabelSx,
+  pinnedSx
+} from "./chunk-XCT2ZLA6.js";
+
+// src/components/form/CategorySelect/CategoryPanelHead.tsx
+import Box from "@mui/material/Box/index.js";
+import InputBase from "@mui/material/InputBase/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var searchFieldSx = {
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  "& input": {
+    width: "100%",
+    height: 36,
+    padding: "0 30px 0 32px",
+    fontSize: 13,
+    border: "1px solid",
+    borderColor: "divider",
+    borderRadius: "9px",
+    background: "background.paper",
+    color: "text.primary",
+    "&:focus": {
+      outline: "none",
+      borderColor: "primary.main",
+      boxShadow: (theme) => `0 0 0 3px ${theme.palette.primary.main}26`
+    }
+  }
+};
+var clearButtonSx = {
+  position: "absolute",
+  right: 7,
+  width: 20,
+  height: 20,
+  border: 0,
+  background: "action.selected",
+  color: "text.secondary",
+  borderRadius: "50%",
+  display: "grid",
+  placeItems: "center",
+  cursor: "pointer",
+  fontSize: 12,
+  padding: 0,
+  lineHeight: 1
+};
+function CategoryPanelHead({
+  query,
+  placeholder,
+  sheet,
+  quickActions,
+  onQueryChange,
+  searchInputRef,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: (theme) => panelHeadSx(theme, sheet), children: [
+    /* @__PURE__ */ jsxs(Box, { sx: searchFieldSx, children: [
+      /* @__PURE__ */ jsx(
+        SearchGlyph,
+        {
+          style: {
+            position: "absolute",
+            left: 10,
+            width: 15,
+            height: 15,
+            opacity: 0.55,
+            pointerEvents: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InputBase,
+        {
+          inputRef: searchInputRef,
+          value: query,
+          placeholder,
+          autoComplete: "off",
+          inputProps: { "aria-label": placeholder, "data-testid": `${dataTestId}-search` },
+          onChange: (event) => onQueryChange(event.target.value),
+          sx: { width: "100%" }
+        }
+      ),
+      query.length > 0 && /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "button",
+          type: "button",
+          "aria-label": copy.search.clear,
+          "data-testid": `${dataTestId}-search-clear`,
+          sx: clearButtonSx,
+          onClick: () => onQueryChange(""),
+          children: "\xD7"
+        }
+      )
+    ] }),
+    quickActions && /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: "10px",
+          marginTop: "8px",
+          fontSize: 12
+        },
+        children: quickActions
+      }
+    )
+  ] });
+}
+function CategoryPinnedTray({
+  chips,
+  onRemove,
+  dataTestId,
+  copy
+}) {
+  if (chips.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Box, { sx: pinnedSx, "data-testid": `${dataTestId}-pinned`, children: [
+    /* @__PURE__ */ jsx(Box, { sx: pinnedLabelSx, children: copy.search.pinnedLabel(chips.length) }),
+    /* @__PURE__ */ jsx(Box, { sx: chipWrapSx, children: chips.map((chip) => /* @__PURE__ */ jsxs(Box, { component: "span", sx: chipSx, children: [
+      chip.label,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": copy.search.removeChip(chip.label),
+          "data-testid": `${dataTestId}-unpin-${chip.id}`,
+          onClick: () => onRemove(chip.id),
+          children: "\xD7"
+        }
+      )
+    ] }, chip.id)) })
+  ] });
+}
+
+export {
+  CategoryPanelHead,
+  CategoryPinnedTray
+};
+//# sourceMappingURL=chunk-PLOOVF43.js.map

package/dist/chunk-PLOOVF43.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategoryPanelHead.tsx"],"sourcesContent":["'use client';\n\nimport type { CategorySelectCopy } from '../../../copy';\nimport Box from '@mui/material/Box/index.js';\nimport InputBase from '@mui/material/InputBase/index.js';\n\nimport { SearchGlyph } from './CategoryIcons';\nimport {\n  chipSx,\n  chipWrapSx,\n  panelHeadSx,\n  pinnedLabelSx,\n  pinnedSx,\n} from './CategorySelect.styles';\nimport type { CategorySelectionChip } from './CategorySelect.types';\n\ninterface PanelHeadProps {\n  query: string;\n  placeholder: string;\n  sheet: boolean;\n  /** Quick actions belong to multi-select only; single-select has nothing to bulk-do. */\n  quickActions?: React.ReactNode;\n  onQueryChange: (next: string) => void;\n  searchInputRef: React.RefObject<HTMLInputElement | null>;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}\n\nconst searchFieldSx = {\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  '& input': {\n    width: '100%',\n    height: 36,\n    padding: '0 30px 0 32px',\n    fontSize: 13,\n    border: '1px solid',\n    borderColor: 'divider',\n    borderRadius: '9px',\n    background: 'background.paper',\n    color: 'text.primary',\n    '&:focus': {\n      outline: 'none',\n      borderColor: 'primary.main',\n      boxShadow: (theme: { palette: { primary: { main: string } } }) =>\n        `0 0 0 3px ${theme.palette.primary.main}26`,\n    },\n  },\n} as const;\n\nconst clearButtonSx = {\n  position: 'absolute',\n  right: 7,\n  width: 20,\n  height: 20,\n  border: 0,\n  background: 'action.selected',\n  color: 'text.secondary',\n  borderRadius: '50%',\n  display: 'grid',\n  placeItems: 'center',\n  cursor: 'pointer',\n  fontSize: 12,\n  padding: 0,\n  lineHeight: 1,\n} as const;\n\n/** Search field, its clear affordance, and the optional quick-action row. */\nexport function CategoryPanelHead({\n  query,\n  placeholder,\n  sheet,\n  quickActions,\n  onQueryChange,\n  searchInputRef,\n  dataTestId,\n  copy,\n}: PanelHeadProps): React.JSX.Element {\n  return (\n    <Box sx={(theme) => panelHeadSx(theme, sheet)}>\n      <Box sx={searchFieldSx}>\n        <SearchGlyph\n          style={{\n            position: 'absolute',\n            left: 10,\n            width: 15,\n            height: 15,\n            opacity: 0.55,\n            pointerEvents: 'none',\n          }}\n        />\n        <InputBase\n          inputRef={searchInputRef}\n          value={query}\n          placeholder={placeholder}\n          autoComplete=\"off\"\n          inputProps={{ 'aria-label': placeholder, 'data-testid': `${dataTestId}-search` }}\n          onChange={(event) => onQueryChange(event.target.value)}\n          sx={{ width: '100%' }}\n        />\n        {query.length > 0 && (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            aria-label={copy.search.clear}\n            data-testid={`${dataTestId}-search-clear`}\n            sx={clearButtonSx}\n            onClick={() => onQueryChange('')}\n          >\n            ×\n          </Box>\n        )}\n      </Box>\n      {quickActions && (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: '10px',\n            marginTop: '8px',\n            fontSize: 12,\n          }}\n        >\n          {quickActions}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\ninterface PinnedTrayProps {\n  chips: CategorySelectionChip[];\n  onRemove: (chipId: string) => void;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}\n\n/**\n * The selected categories, pinned above the list.\n *\n * Pinned rather than left in place because a selection made at the bottom of a\n * ten-category tree scrolls out of sight the moment you look for the next one —\n * and a search hides it entirely. Here it survives both.\n */\nexport function CategoryPinnedTray({\n  chips,\n  onRemove,\n  dataTestId,\n  copy,\n}: PinnedTrayProps): React.JSX.Element | null {\n  if (chips.length === 0) return null;\n  return (\n    <Box sx={pinnedSx} data-testid={`${dataTestId}-pinned`}>\n      <Box sx={pinnedLabelSx}>{copy.search.pinnedLabel(chips.length)}</Box>\n      <Box sx={chipWrapSx}>\n        {chips.map((chip) => (\n          <Box component=\"span\" key={chip.id} sx={chipSx}>\n            {chip.label}\n            <button\n              type=\"button\"\n              aria-label={copy.search.removeChip(chip.label)}\n              data-testid={`${dataTestId}-unpin-${chip.id}`}\n              onClick={() => onRemove(chip.id)}\n            >\n              ×\n            </button>\n          </Box>\n        ))}\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-PMS3H3OO.js

@@ -0,0 +1,131 @@
+import {
+  resolveLightboxProps
+} from "./chunk-UOS7DEQZ.js";
+import {
+  useLightbox
+} from "./chunk-3EYRRVNT.js";
+import {
+  LightboxThumbnails
+} from "./chunk-Q725MACF.js";
+import {
+  LightboxStage
+} from "./chunk-EUHVBR3J.js";
+import {
+  LightboxOverlay
+} from "./chunk-X4GALW6I.js";
+import {
+  LightboxCopyProvider
+} from "./chunk-TEQYTEM2.js";
+import {
+  makeTestId
+} from "./chunk-56SJYTIT.js";
+import {
+  LightboxCurrentMedia
+} from "./chunk-2DWBJJK6.js";
+
+// src/components/data-display/Lightbox/Lightbox.tsx
+import Dialog from "@mui/material/Dialog/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIALOG_STATIC_PROPS = {
+  maxWidth: false,
+  fullScreen: true,
+  TransitionComponent: Fade,
+  TransitionProps: { timeout: 300 },
+  PaperProps: { sx: { background: "rgba(0, 0, 0, 0.9)", backdropFilter: "blur(2px)" } },
+  "aria-label": "Lightbox",
+  "aria-labelledby": "lightbox-title",
+  role: "dialog",
+  "aria-modal": "true"
+};
+var Lightbox = React.forwardRef((componentProps, ref) => {
+  const props = resolveLightboxProps(componentProps);
+  const { isOpen, items, loop, autoplay, showControls, showCaptions, thumbnails, zoomable } = props;
+  const { className, style, dataTestId } = props;
+  const testId = makeTestId(dataTestId);
+  const lightbox = useLightbox(props, ref);
+  const { currentIndex, currentItem, zoom } = lightbox;
+  return /* @__PURE__ */ jsx(LightboxCopyProvider, { copy: props.copy, children: /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open: isOpen,
+      onClose: lightbox.close,
+      ...DIALOG_STATIC_PROPS,
+      className,
+      style,
+      onTouchStart: lightbox.handleTouchStart,
+      onTouchEnd: lightbox.handleTouchEnd,
+      "data-testid": dataTestId || "lightbox",
+      children: [
+        /* @__PURE__ */ jsxs(Typography, { id: "lightbox-title", variant: "h6", sx: { position: "absolute", left: -1e4 }, children: [
+          "Lightbox - ",
+          currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`
+        ] }),
+        /* @__PURE__ */ jsx(
+          LightboxOverlay,
+          {
+            testId,
+            itemCount: items.length,
+            currentIndex,
+            showControls,
+            loop,
+            autoplay,
+            canZoom: lightbox.canZoom,
+            isAutoPlaying: lightbox.isAutoPlaying,
+            onClose: lightbox.close,
+            onPrev: lightbox.prev,
+            onNext: lightbox.next,
+            onZoomIn: zoom.zoomIn,
+            onZoomOut: zoom.zoomOut,
+            onResetZoom: zoom.resetZoom,
+            onToggleAutoplay: () => lightbox.setIsAutoPlaying((playing) => !playing)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LightboxStage,
+          {
+            items,
+            currentItem,
+            currentIndex,
+            isLoading: lightbox.isLoading,
+            showCaptions,
+            thumbnails,
+            testId,
+            media: /* @__PURE__ */ jsx(
+              LightboxCurrentMedia,
+              {
+                item: currentItem,
+                index: currentIndex,
+                total: items.length,
+                zoomable,
+                zoom,
+                testId,
+                onLoadingChange: lightbox.setIsLoading,
+                onWheel: lightbox.handleWheel
+              }
+            ),
+            thumbnailStrip: thumbnails && items.length > 1 && /* @__PURE__ */ jsx(
+              LightboxThumbnails,
+              {
+                items,
+                currentIndex,
+                testId,
+                onSelect: lightbox.goToIndex
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+});
+Lightbox.displayName = "Lightbox";
+var Lightbox_default = Lightbox;
+
+export {
+  Lightbox,
+  Lightbox_default
+};
+//# sourceMappingURL=chunk-PMS3H3OO.js.map

package/dist/chunk-PMS3H3OO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/Lightbox.tsx"],"sourcesContent":["import Dialog from '@mui/material/Dialog/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport { makeTestId } from './Lightbox.constants';\nimport { resolveLightboxProps } from './Lightbox.helpers';\nimport { LightboxCopyProvider } from './lightbox-copy-context';\nimport type { LightboxProps, LightboxRef } from './Lightbox.types';\nimport { LightboxCurrentMedia } from './LightboxCurrentMedia';\nimport { LightboxOverlay } from './LightboxOverlay';\nimport { LightboxStage } from './LightboxStage';\nimport { LightboxThumbnails } from './LightboxThumbnails';\nimport { useLightbox } from './useLightbox';\n\nconst DIALOG_STATIC_PROPS = {\n  maxWidth: false,\n  fullScreen: true,\n  TransitionComponent: Fade,\n  TransitionProps: { timeout: 300 },\n  PaperProps: { sx: { background: 'rgba(0, 0, 0, 0.9)', backdropFilter: 'blur(2px)' } },\n  'aria-label': 'Lightbox',\n  'aria-labelledby': 'lightbox-title',\n  role: 'dialog',\n  'aria-modal': 'true',\n} as const;\n\nexport const Lightbox = React.forwardRef<LightboxRef, LightboxProps>((componentProps, ref) => {\n  const props = resolveLightboxProps(componentProps);\n  const { isOpen, items, loop, autoplay, showControls, showCaptions, thumbnails, zoomable } = props;\n  const { className, style, dataTestId } = props;\n\n  const testId = makeTestId(dataTestId);\n  const lightbox = useLightbox(props, ref);\n  const { currentIndex, currentItem, zoom } = lightbox;\n\n  return (\n    <LightboxCopyProvider copy={props.copy}>\n    <Dialog\n      open={isOpen}\n      onClose={lightbox.close}\n      {...DIALOG_STATIC_PROPS}\n      className={className}\n      style={style}\n      onTouchStart={lightbox.handleTouchStart}\n      onTouchEnd={lightbox.handleTouchEnd}\n      data-testid={dataTestId || 'lightbox'}\n    >\n      {/* Visually hidden title for screen readers */}\n      <Typography id=\"lightbox-title\" variant=\"h6\" sx={{ position: 'absolute', left: -10000 }}>\n        Lightbox - {currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`}\n      </Typography>\n\n      <LightboxOverlay\n        testId={testId}\n        itemCount={items.length}\n        currentIndex={currentIndex}\n        showControls={showControls}\n        loop={loop}\n        autoplay={autoplay}\n        canZoom={lightbox.canZoom}\n        isAutoPlaying={lightbox.isAutoPlaying}\n        onClose={lightbox.close}\n        onPrev={lightbox.prev}\n        onNext={lightbox.next}\n        onZoomIn={zoom.zoomIn}\n        onZoomOut={zoom.zoomOut}\n        onResetZoom={zoom.resetZoom}\n        onToggleAutoplay={() => lightbox.setIsAutoPlaying((playing) => !playing)}\n      />\n\n      <LightboxStage\n        items={items}\n        currentItem={currentItem}\n        currentIndex={currentIndex}\n        isLoading={lightbox.isLoading}\n        showCaptions={showCaptions}\n        thumbnails={thumbnails}\n        testId={testId}\n        media={\n          <LightboxCurrentMedia\n            item={currentItem}\n            index={currentIndex}\n            total={items.length}\n            zoomable={zoomable}\n            zoom={zoom}\n            testId={testId}\n            onLoadingChange={lightbox.setIsLoading}\n            onWheel={lightbox.handleWheel}\n          />\n        }\n        thumbnailStrip={\n          thumbnails &&\n          items.length > 1 && (\n            <LightboxThumbnails\n              items={items}\n              currentIndex={currentIndex}\n              testId={testId}\n              onSelect={lightbox.goToIndex}\n            />\n          )\n        }\n      />\n    </Dialog>\n    </LightboxCopyProvider>\n  );\n});\n\nLightbox.displayName = 'Lightbox';\n\nexport default Lightbox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,gBAAgB;AACvB,OAAO,WAAW;AA8CZ,SAIA,KAJA;AAlCN,IAAM,sBAAsB;AAAA,EAC1B,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,iBAAiB,EAAE,SAAS,IAAI;AAAA,EAChC,YAAY,EAAE,IAAI,EAAE,YAAY,sBAAsB,gBAAgB,YAAY,EAAE;AAAA,EACpF,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,MAAM;AAAA,EACN,cAAc;AAChB;AAEO,IAAM,WAAW,MAAM,WAAuC,CAAC,gBAAgB,QAAQ;AAC5F,QAAM,QAAQ,qBAAqB,cAAc;AACjD,QAAM,EAAE,QAAQ,OAAO,MAAM,UAAU,cAAc,cAAc,YAAY,SAAS,IAAI;AAC5F,QAAM,EAAE,WAAW,OAAO,WAAW,IAAI;AAEzC,QAAM,SAAS,WAAW,UAAU;AACpC,QAAM,WAAW,YAAY,OAAO,GAAG;AACvC,QAAM,EAAE,cAAc,aAAa,KAAK,IAAI;AAE5C,SACE,oBAAC,wBAAqB,MAAM,MAAM,MAClC;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,SAAS,SAAS;AAAA,MACjB,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,cAAc,SAAS;AAAA,MACvB,YAAY,SAAS;AAAA,MACrB,eAAa,cAAc;AAAA,MAG3B;AAAA,6BAAC,cAAW,IAAG,kBAAiB,SAAQ,MAAK,IAAI,EAAE,UAAU,YAAY,MAAM,KAAO,GAAG;AAAA;AAAA,UAC3E,aAAa,OAAO,QAAQ,eAAe,CAAC,OAAO,MAAM,MAAM;AAAA,WAC7E;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,MAAM;AAAA,YACjB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,SAAS;AAAA,YAClB,eAAe,SAAS;AAAA,YACxB,SAAS,SAAS;AAAA,YAClB,QAAQ,SAAS;AAAA,YACjB,QAAQ,SAAS;AAAA,YACjB,UAAU,KAAK;AAAA,YACf,WAAW,KAAK;AAAA,YAChB,aAAa,KAAK;AAAA,YAClB,kBAAkB,MAAM,SAAS,iBAAiB,CAAC,YAAY,CAAC,OAAO;AAAA;AAAA,QACzE;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,SAAS;AAAA,YACpB;AAAA,YACA;AAAA,YACA;AAAA,YACA,OACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,OAAO,MAAM;AAAA,gBACb;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,iBAAiB,SAAS;AAAA,gBAC1B,SAAS,SAAS;AAAA;AAAA,YACpB;AAAA,YAEF,gBACE,cACA,MAAM,SAAS,KACb;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,UAAU,SAAS;AAAA;AAAA,YACrB;AAAA;AAAA,QAGN;AAAA;AAAA;AAAA,EACF,GACA;AAEJ,CAAC;AAED,SAAS,cAAc;AAEvB,IAAO,mBAAQ;","names":[]}

package/dist/chunk-PO2RWE7N.js

@@ -0,0 +1,131 @@
+import {
+  FilterChips,
+  PALETTE_CARD_SX,
+  PaletteBody,
+  PaletteInput,
+  PaletteScrollArea,
+  Paper,
+  createKeyDownHandler,
+  ghostRemainder
+} from "./chunk-B3OMUMZO.js";
+
+// src/components/form/SearchPalette/SearchPalette.tsx
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_MAX_ITEMS = 5;
+function resolveOpts(props) {
+  return {
+    maxItems: props.maxItems ?? DEFAULT_MAX_ITEMS,
+    filters: props.filters ?? [],
+    activeFilterIds: props.activeFilterIds ?? [],
+    isLoading: Boolean(props.isLoading),
+    showGhostText: props.showGhostText ?? true,
+    autoFocus: props.autoFocus ?? true
+  };
+}
+function resolveText(props) {
+  return {
+    submitAllLabel: props.submitAllLabel,
+    submitKeyLabel: props.submitKeyLabel,
+    noResultsLabel: props.noResultsLabel,
+    placeholder: props.placeholder,
+    dataTestId: props.dataTestId ?? "search-palette"
+  };
+}
+function SearchPalette(props) {
+  const opts = resolveOpts(props);
+  const text = resolveText(props);
+  const trimmed = props.value.trim();
+  const hasQuery = trimmed.length > 0;
+  const visible = props.items.slice(0, opts.maxItems);
+  const showFooter = Boolean(props.onSubmitAll) && hasQuery;
+  const rowCount = visible.length + (showFooter ? 1 : 0);
+  const footerIndex = showFooter ? visible.length : -1;
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  React.useEffect(() => {
+    setActiveIndex((i) => rowCount === 0 ? 0 : Math.min(i, rowCount - 1));
+  }, [rowCount]);
+  const top = visible[0];
+  const ghost = opts.showGhostText && hasQuery && top ? ghostRemainder(props.getPrimary(top), props.value) : "";
+  const onKeyDown = createKeyDownHandler({
+    rowCount,
+    activeIndex,
+    footerIndex,
+    visible,
+    hasQuery,
+    ghost,
+    top,
+    trimmed,
+    getPrimary: props.getPrimary,
+    onChange: props.onChange,
+    onSelect: props.onSelect,
+    onSubmitAll: props.onSubmitAll,
+    onClose: props.onClose,
+    setActiveIndex
+  });
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      elevation: 8,
+      className: props.className,
+      "data-testid": text.dataTestId,
+      sx: PALETTE_CARD_SX,
+      children: [
+        /* @__PURE__ */ jsx(
+          PaletteInput,
+          {
+            value: props.value,
+            ghost,
+            isLoading: opts.isLoading,
+            autoFocus: opts.autoFocus,
+            placeholder: text.placeholder,
+            inputAriaLabel: props.inputAriaLabel,
+            hasQuery,
+            onChange: props.onChange,
+            onKeyDown
+          }
+        ),
+        opts.filters.length > 0 && /* @__PURE__ */ jsx(
+          FilterChips,
+          {
+            filters: opts.filters,
+            activeFilterIds: opts.activeFilterIds,
+            onToggleFilter: props.onToggleFilter
+          }
+        ),
+        /* @__PURE__ */ jsx(PaletteScrollArea, { children: /* @__PURE__ */ jsx(
+          PaletteBody,
+          {
+            hasQuery,
+            emptyQueryContent: props.emptyQueryContent,
+            visible,
+            isLoading: opts.isLoading,
+            noResultsLabel: text.noResultsLabel,
+            showFooter,
+            footerIndex,
+            activeIndex,
+            trimmed,
+            submitAllLabel: text.submitAllLabel,
+            submitKeyLabel: text.submitKeyLabel,
+            getKey: props.getKey,
+            getPrimary: props.getPrimary,
+            getSecondary: props.getSecondary,
+            getLead: props.getLead,
+            getTrailing: props.getTrailing,
+            onSelect: props.onSelect,
+            onSubmitAll: props.onSubmitAll,
+            setActiveIndex
+          }
+        ) })
+      ]
+    }
+  );
+}
+SearchPalette.displayName = "SearchPalette";
+var SearchPalette_default = SearchPalette;
+
+export {
+  SearchPalette,
+  SearchPalette_default
+};
+//# sourceMappingURL=chunk-PO2RWE7N.js.map

package/dist/chunk-POUWN4PX.js

@@ -0,0 +1,206 @@
+import {
+  shimmerAnimation
+} from "./chunk-F52N6ACD.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/data-display/Sheet/Sheet.parts.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import Backdrop from "@mui/material/Backdrop/index.js";
+import Box from "@mui/material/Box/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var handleSx = (theme, isDraggable) => ({
+  width: isDraggable ? 48 : 32,
+  height: isDraggable ? 6 : 4,
+  backgroundColor: alpha(theme.palette.text.primary, 0.3),
+  borderRadius: 3,
+  transition: theme.transitions.create(["all"], {
+    duration: theme.transitions.duration.short,
+    easing: theme.transitions.easing.easeInOut
+  }),
+  position: "relative",
+  overflow: "hidden",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: "-100%",
+    width: "100%",
+    height: "100%",
+    background: `linear-gradient(
+      90deg,
+      transparent,
+      ${alpha(theme.palette.common.white, 0.3)},
+      transparent
+    )`,
+    animation: isDraggable ? `${shimmerAnimation} 2s infinite` : "none"
+  },
+  ...isDraggable && {
+    backgroundColor: alpha(theme.palette.primary.main, 0.4),
+    boxShadow: `0 2px 4px ${alpha(theme.palette.primary.main, 0.2)}`,
+    "&:hover": {
+      backgroundColor: theme.palette.primary.main,
+      transform: "scaleX(1.15) scaleY(1.2)",
+      boxShadow: `0 3px 6px ${alpha(theme.palette.primary.main, 0.3)}`
+    }
+  }
+});
+var SheetHandle = ({ isDraggable }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        mb: 1,
+        // The handle is decoration on a draggable header: the drag listeners sit
+        // on the header itself, so letting the bar swallow the press would open
+        // a dead zone in the middle of the grab target.
+        pointerEvents: isDraggable ? "none" : "auto"
+      },
+      children: /* @__PURE__ */ jsx(Box, { sx: handleSx(theme, isDraggable) })
+    }
+  );
+};
+var HEADER_DEFAULTS = {
+  isDraggable: false,
+  dataTestId: "sheet-header"
+};
+var SheetHeader = (props) => {
+  const {
+    title,
+    description,
+    showCloseButton,
+    onClose,
+    showHandle,
+    isDraggable,
+    onDragStart,
+    className,
+    style,
+    children,
+    dataTestId
+  } = withDefaults(props, HEADER_DEFAULTS);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      sx: {
+        p: 2,
+        pb: showHandle ? 1 : 2,
+        cursor: isDraggable ? "grab" : "auto",
+        "&:active": isDraggable ? { cursor: "grabbing" } : {},
+        ...style
+      },
+      onMouseDown: isDraggable ? onDragStart : void 0,
+      onTouchStart: isDraggable ? onDragStart : void 0,
+      children: [
+        showHandle && /* @__PURE__ */ jsx(SheetHandle, { isDraggable: Boolean(isDraggable) }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+            title && /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: 600 }, "data-testid": `${dataTestId}-title`, children: title }),
+            description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: description }),
+            children
+          ] }),
+          showCloseButton && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: onClose,
+              size: "small",
+              sx: { ml: 1, mt: -0.5 },
+              "data-testid": `${dataTestId}-close-button`,
+              children: /* @__PURE__ */ jsx(CloseIcon, { "data-testid": `${dataTestId}-close-icon` })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var CONTENT_DEFAULTS = {
+  padded: true,
+  dataTestId: "sheet-content"
+};
+var SheetContent = (props) => {
+  const { children, className, style, padded, dataTestId } = withDefaults(props, CONTENT_DEFAULTS);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      sx: { flex: 1, overflow: "auto", p: padded ? 2 : 0, ...style },
+      children
+    }
+  );
+};
+var FOOTER_DEFAULTS = {
+  sticky: false,
+  divider: false,
+  dataTestId: "sheet-footer"
+};
+var SheetFooter = (props) => {
+  const { children, className, style, sticky, divider, dataTestId } = withDefaults(
+    props,
+    FOOTER_DEFAULTS
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    divider && /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className,
+        "data-testid": dataTestId,
+        sx: {
+          p: 2,
+          position: sticky ? "sticky" : "relative",
+          bottom: sticky ? 0 : "auto",
+          backgroundColor: "background.paper",
+          borderTop: sticky ? "1px solid" : "none",
+          borderColor: "divider",
+          ...style
+        },
+        children
+      }
+    )
+  ] });
+};
+var OVERLAY_DEFAULTS = {
+  open: false,
+  blur: false
+};
+var SheetOverlay = (props) => {
+  const { open, onClick, className, style, blur } = withDefaults(props, OVERLAY_DEFAULTS);
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Fade, { in: open, timeout: 300, children: /* @__PURE__ */ jsx(
+    Backdrop,
+    {
+      open: Boolean(open),
+      onClick,
+      className,
+      sx: {
+        // One below the drawer: this backdrop replaces MUI's own (the drawer
+        // is given a no-op BackdropComponent) and must sit under the panel.
+        zIndex: theme.zIndex.drawer - 1,
+        backgroundColor: alpha(theme.palette.common.black, blur ? 0.6 : 0.5),
+        backdropFilter: blur ? "blur(8px) saturate(180%)" : "none",
+        WebkitBackdropFilter: blur ? "blur(8px) saturate(180%)" : "none",
+        ...style
+      }
+    }
+  ) });
+};
+
+export {
+  SheetHeader,
+  SheetContent,
+  SheetFooter,
+  SheetOverlay
+};
+//# sourceMappingURL=chunk-POUWN4PX.js.map