@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-7EM4THID.js

@@ -0,0 +1,177 @@
+import {
+  useRichTextEditor
+} from "./chunk-774B27QA.js";
+import {
+  RichTextEditorToolbar
+} from "./chunk-WVZBYTIK.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/RichTextEditor/RichTextEditor.tsx
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_TOOLBAR = {
+  bold: true,
+  italic: true,
+  underline: true,
+  strikethrough: false,
+  orderedList: true,
+  unorderedList: true,
+  link: true,
+  image: false,
+  codeBlock: false,
+  quote: false,
+  customItems: []
+};
+var RICH_TEXT_DEFAULTS = {
+  value: "",
+  placeholder: "Start typing...",
+  disabled: false,
+  readOnly: false,
+  toolbar: {}
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, v]) => v !== void 0)
+);
+var editorContentSx = (theme, disabled, placeholder, height) => ({
+  // A number is design px, converted here where it is read (300 when the
+  // caller gives none); a string is any CSS length, used as-is.
+  minHeight: typeof height === "string" ? height : rem(theme, height ?? 300),
+  p: 2,
+  outline: "none",
+  cursor: disabled ? "not-allowed" : "text",
+  "&:empty::before": {
+    content: `"${placeholder}"`,
+    color: theme.palette.text.disabled,
+    pointerEvents: "none"
+  },
+  "& p": {
+    margin: `${rem(theme, 8)} 0`,
+    "&:first-of-type": { marginTop: 0 },
+    "&:last-of-type": { marginBottom: 0 }
+  },
+  "& ul, & ol": { marginLeft: theme.spacing(2) },
+  "& blockquote": {
+    borderLeft: `${rem(theme, 4)} solid ${theme.palette.primary.main}`,
+    paddingLeft: theme.spacing(2),
+    margin: `${theme.spacing(1)} 0`,
+    fontStyle: "italic",
+    backgroundColor: alpha(theme.palette.primary.main, 0.05)
+  },
+  "& pre": {
+    backgroundColor: alpha(theme.palette.text.primary, 0.08),
+    padding: theme.spacing(1),
+    borderRadius: 1,
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+    fontSize: rem(theme, 14),
+    overflow: "auto"
+  },
+  "& a": { color: theme.palette.primary.main, textDecoration: "underline" }
+});
+var shellSx = (theme, isFocused, disabled) => ({
+  border: `1px solid ${fieldEdge(theme)}`,
+  borderRadius: fieldRadiusPx(theme),
+  overflow: "hidden",
+  transition: "border-color 0.2s ease-in-out",
+  ...isFocused && {
+    borderColor: theme.palette.primary.main,
+    boxShadow: `0 0 0 ${rem(theme, 2)} ${alpha(theme.palette.primary.main, 0.2)}`
+  },
+  ...disabled && {
+    backgroundColor: theme.palette.action.disabledBackground,
+    color: theme.palette.text.disabled
+  }
+});
+var RichTextEditor = forwardRef(
+  (editorProps, ref) => {
+    const {
+      value,
+      onChange,
+      placeholder,
+      disabled,
+      readOnly,
+      toolbar,
+      height,
+      maxLength,
+      onFocus,
+      onBlur,
+      className,
+      "data-testid": testId,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      ...props
+    } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) };
+    const theme = useTheme();
+    const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };
+    const editor = useRichTextEditor({
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      disabled,
+      readOnly,
+      maxLength
+    });
+    return /* @__PURE__ */ jsxs(
+      Paper,
+      {
+        ref,
+        className,
+        "data-testid": testId || "rich-text-editor",
+        elevation: 1,
+        sx: shellSx(theme, editor.isFocused, Boolean(disabled)),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            RichTextEditorToolbar,
+            {
+              config: toolbarConfig,
+              disabled: Boolean(disabled),
+              readOnly: Boolean(readOnly),
+              maxLength,
+              characterCount: editor.characterCount,
+              editorRef: editor.editorRef,
+              onFormat: editor.applyFormat
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: editor.editorRef,
+              contentEditable: !disabled && !readOnly,
+              onInput: editor.handleContentChange,
+              onFocus: editor.handleFocus,
+              onBlur: editor.handleBlur,
+              role: "textbox",
+              "aria-label": ariaLabel || "Rich text editor",
+              "aria-describedby": ariaDescribedBy,
+              "aria-multiline": "true",
+              tabIndex: disabled ? -1 : 0,
+              "data-testid": "editor-content",
+              suppressContentEditableWarning: true,
+              sx: editorContentSx(theme, Boolean(disabled), placeholder, height)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+RichTextEditor.displayName = "RichTextEditor";
+var RichTextEditor_default = RichTextEditor;
+
+export {
+  RichTextEditor,
+  RichTextEditor_default
+};
+//# sourceMappingURL=chunk-7EM4THID.js.map

package/dist/chunk-7EM4THID.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React, { forwardRef } from 'react';\n\nimport type { Theme } from '@mui/material/styles/index.js';\nimport { useRichTextEditor } from './RichTextEditor.hooks';\nimport type { RichTextEditorProps, ToolbarConfig } from './RichTextEditor.types';\nimport { RichTextEditorToolbar } from './RichTextEditorToolbar';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { rem } from '../../../tokens/relative';\n\nconst DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<ToolbarConfig, 'customItems'> = {\n  bold: true,\n  italic: true,\n  underline: true,\n  strikethrough: false,\n  orderedList: true,\n  unorderedList: true,\n  link: true,\n  image: false,\n  codeBlock: false,\n  quote: false,\n  customItems: [] };\n\nconst RICH_TEXT_DEFAULTS: Partial<RichTextEditorProps> = {\n  value: '',\n  placeholder: 'Start typing...',\n  disabled: false,\n  readOnly: false,\n  toolbar: {} };\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: RichTextEditorProps): Partial<RichTextEditorProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, v]) => v !== undefined),\n  ) as Partial<RichTextEditorProps>;\n\n// Simple inline formats are a tag swap; lists and the value-carrying formats\n// need their own handling. This was one nine-case switch.\nconst editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string, height?: string | number) => ({\n  // A number is design px, converted here where it is read (300 when the\n  // caller gives none); a string is any CSS length, used as-is.\n  minHeight: typeof height === 'string' ? height : rem(theme, height ?? 300),\n  p: 2,\n  outline: 'none',\n  cursor: disabled ? 'not-allowed' : 'text',\n  '&:empty::before': {\n    content: `\"${placeholder}\"`,\n    color: theme.palette.text.disabled,\n    pointerEvents: 'none' },\n  '& p': {\n    margin: `${rem(theme, 8)} 0`,\n    '&:first-of-type': { marginTop: 0 },\n    '&:last-of-type': { marginBottom: 0 } },\n  '& ul, & ol': { marginLeft: theme.spacing(2) },\n  '& blockquote': {\n    borderLeft: `${rem(theme, 4)} solid ${theme.palette.primary.main}`,\n    paddingLeft: theme.spacing(2),\n    margin: `${theme.spacing(1)} 0`,\n    fontStyle: 'italic',\n    backgroundColor: alpha(theme.palette.primary.main, 0.05) },\n  '& pre': {\n    backgroundColor: alpha(theme.palette.text.primary, 0.08),\n    padding: theme.spacing(1),\n    borderRadius: 1,\n    fontFamily: 'Monaco, Menlo, \"Ubuntu Mono\", monospace',\n    fontSize: rem(theme, 14),\n    overflow: 'auto' },\n  '& a': { color: theme.palette.primary.main, textDecoration: 'underline' } });\n\nconst shellSx = (theme: Theme, isFocused: boolean, disabled: boolean) => ({\n  border: `1px solid ${fieldEdge(theme)}`,\n  borderRadius: fieldRadiusPx(theme),\n  overflow: 'hidden',\n  transition: 'border-color 0.2s ease-in-out',\n  ...(isFocused && {\n    borderColor: theme.palette.primary.main,\n    boxShadow: `0 0 0 ${rem(theme, 2)} ${alpha(theme.palette.primary.main, 0.2)}` }),\n  ...(disabled && {\n    backgroundColor: theme.palette.action.disabledBackground,\n    color: theme.palette.text.disabled }) });\n\nexport const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(\n  (editorProps, ref) => {\n    const {\n      value,\n      onChange,\n      placeholder,\n      disabled,\n      readOnly,\n      toolbar,\n      height,\n      maxLength,\n      onFocus,\n      onBlur,\n      className,\n      'data-testid': testId,\n      'aria-label': ariaLabel,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) } as RichTextEditorProps;\n\n    const theme = useTheme();\n    const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };\n    const editor = useRichTextEditor({\n      value,\n      onChange,\n      onFocus,\n      onBlur,\n      disabled,\n      readOnly,\n      maxLength });\n\n    return (\n      <Paper\n        ref={ref}\n        className={className}\n        data-testid={testId || 'rich-text-editor'}\n        elevation={1}\n        sx={shellSx(theme, editor.isFocused, Boolean(disabled))}\n        {...props}\n      >\n        <RichTextEditorToolbar\n          config={toolbarConfig}\n          disabled={Boolean(disabled)}\n          readOnly={Boolean(readOnly)}\n          maxLength={maxLength}\n          characterCount={editor.characterCount}\n          editorRef={editor.editorRef}\n          onFormat={editor.applyFormat}\n        />\n\n        <Box\n          ref={editor.editorRef}\n          contentEditable={!disabled && !readOnly}\n          onInput={editor.handleContentChange}\n          onFocus={editor.handleFocus}\n          onBlur={editor.handleBlur}\n          role=\"textbox\"\n          aria-label={ariaLabel || 'Rich text editor'}\n          aria-describedby={ariaDescribedBy}\n          aria-multiline=\"true\"\n          tabIndex={disabled ? -1 : 0}\n          data-testid=\"editor-content\"\n          suppressContentEditableWarning\n          sx={editorContentSx(theme, Boolean(disabled), placeholder, height)}\n        />\n      </Paper>\n    );\n  },\n);\n\nRichTextEditor.displayName = 'RichTextEditor';\n\nexport default RichTextEditor;"],"mappings":"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","names":[]}

package/dist/chunk-7GHYCQCJ.js

@@ -0,0 +1,92 @@
+import {
+  MIN_QUERY_LENGTH,
+  addressOptionLabel,
+  isSameAddressOption
+} from "./chunk-MTGEJRE4.js";
+import {
+  AddressSuggestionsPaper
+} from "./chunk-C5RQBTRZ.js";
+import {
+  AddressOption
+} from "./chunk-P5JCOFK3.js";
+import {
+  AddressInputField
+} from "./chunk-4T6UIYJB.js";
+
+// src/components/form/AddressAutocomplete/AddressAutocompleteField.tsx
+import Alert from "@mui/material/Alert/index.js";
+import Autocomplete from "@mui/material/Autocomplete/index.js";
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AddressAutocompleteField = ({
+  copy,
+  variant,
+  label,
+  placeholder,
+  icon,
+  floating,
+  error,
+  helperText,
+  disabled,
+  required,
+  fullWidth,
+  getCurrentLocation,
+  inputValue,
+  options,
+  loading,
+  apiError,
+  handleInputChange,
+  handleSelect,
+  handleGetCurrentLocation
+}) => /* @__PURE__ */ jsxs(Box, { "data-testid": "address-autocomplete-container", children: [
+  /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      freeSolo: true,
+      options,
+      inputValue,
+      onInputChange: handleInputChange,
+      onChange: handleSelect,
+      loading,
+      disabled,
+      fullWidth,
+      getOptionLabel: addressOptionLabel,
+      isOptionEqualToValue: isSameAddressOption,
+      PaperComponent: AddressSuggestionsPaper,
+      noOptionsText: inputValue.length <= MIN_QUERY_LENGTH ? "Type at least 3 characters" : "No addresses found",
+      renderOption: ({ key, ...optionProps }, option, state) => /* @__PURE__ */ jsx(
+        AddressOption,
+        {
+          optionProps,
+          option,
+          index: state.index
+        },
+        key
+      ),
+      renderInput: (params) => /* @__PURE__ */ jsx(
+        AddressInputField,
+        {
+          copy,
+          params,
+          addressVariant: variant,
+          label: floating ? void 0 : label,
+          placeholder,
+          icon,
+          error: error || !!apiError,
+          helperText: apiError || helperText,
+          required,
+          disabled,
+          loading,
+          showCurrentLocation: getCurrentLocation && !loading,
+          onGetCurrentLocation: handleGetCurrentLocation
+        }
+      )
+    }
+  ),
+  apiError && /* @__PURE__ */ jsx(Alert, { severity: "warning", sx: { mt: 1 }, children: apiError })
+] });
+
+export {
+  AddressAutocompleteField
+};
+//# sourceMappingURL=chunk-7GHYCQCJ.js.map

package/dist/chunk-A5UYPUS2.js

@@ -0,0 +1,188 @@
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/UploadButton/UploadButton.parts.tsx
+import AttachFileOutlined from "@mui/icons-material/AttachFileOutlined";
+import CloudUploadOutlined from "@mui/icons-material/CloudUploadOutlined";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import LinearProgress from "@mui/material/LinearProgress/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 DRAG_OVER_TINT = 10 / 255;
+var HOVER_TINT = 5 / 255;
+var GHOST_HOVER_TINT = 8 / 255;
+function UploadDropzone({
+  copy,
+  label,
+  icon,
+  disabled,
+  className,
+  dataTestId,
+  describedBy,
+  onOpen,
+  isDragOver,
+  drag
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "div",
+      ...drag,
+      onClick: onOpen,
+      sx: {
+        border: `${rem(theme, 2)} dashed ${isDragOver ? theme.palette.primary.main : theme.palette.divider}`,
+        borderRadius: 2,
+        padding: 3,
+        textAlign: "center",
+        cursor: disabled ? "not-allowed" : "pointer",
+        backgroundColor: isDragOver ? alpha(theme.palette.primary.main, DRAG_OVER_TINT) : "transparent",
+        transition: "all 0.2s ease-in-out",
+        ...!disabled && {
+          "&:hover": {
+            borderColor: theme.palette.primary.main,
+            backgroundColor: alpha(theme.palette.primary.main, HOVER_TINT)
+          }
+        },
+        opacity: disabled ? 0.6 : 1
+      },
+      className,
+      "data-testid": dataTestId,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        onOpen();
+      },
+      "aria-describedby": describedBy,
+      "aria-label": copy.dropzoneRole(label),
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: icon || /* @__PURE__ */ jsx(CloudUploadOutlined, { sx: { fontSize: sxRem(48), color: "text.secondary" } }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 1 }, children: label }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: copy.dropzoneHint })
+      ]
+    }
+  );
+}
+var MUI_VARIANT = { outline: "outlined", ghost: "text" };
+function UploadTrigger({
+  copy,
+  label,
+  icon,
+  disabled,
+  className,
+  dataTestId,
+  describedBy,
+  onOpen,
+  variant,
+  isUploading
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: MUI_VARIANT[variant] ?? "contained",
+      disabled: disabled || isUploading,
+      onClick: onOpen,
+      startIcon: icon || /* @__PURE__ */ jsx(AttachFileOutlined, {}),
+      className,
+      "data-testid": dataTestId,
+      "aria-describedby": describedBy,
+      sx: {
+        ...variant === "ghost" && {
+          "&:hover": { backgroundColor: alpha(theme.palette.primary.main, GHOST_HOVER_TINT) }
+        }
+      },
+      children: isUploading ? copy.uploading : label
+    }
+  );
+}
+function UploadAnnouncer({
+  copy,
+  announceDragOver,
+  isUploading,
+  progress,
+  error
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      className: "sr-only",
+      style: {
+        position: "absolute",
+        left: rem(theme, -1e4),
+        width: rem(theme, 1),
+        height: rem(theme, 1),
+        overflow: "hidden"
+      },
+      children: [
+        announceDragOver && copy.dropReady,
+        isUploading && copy.uploadInProgress(Math.round(progress)),
+        error && copy.errorAnnouncement(error)
+      ]
+    }
+  );
+}
+function UploadFeedback({
+  copy,
+  isUploading,
+  progress,
+  helperText,
+  helperId,
+  error,
+  errorId,
+  announceDragOver
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isUploading && progress > 0 && /* @__PURE__ */ jsxs(Box, { sx: { mt: 1 }, children: [
+      /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: progress, sx: { borderRadius: 1 } }),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { mt: 0.5, display: "block" }, children: copy.percentUploaded(Math.round(progress)) })
+    ] }),
+    helperText && !error && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: helperId,
+        variant: "caption",
+        color: "text.secondary",
+        sx: { display: "block", mt: 0.5 },
+        children: helperText
+      }
+    ),
+    error && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: errorId,
+        variant: "caption",
+        color: "error",
+        sx: { display: "block", mt: 0.5 },
+        role: "alert",
+        children: error
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      UploadAnnouncer,
+      {
+        copy,
+        announceDragOver,
+        isUploading,
+        progress,
+        error
+      }
+    )
+  ] });
+}
+
+export {
+  UploadDropzone,
+  UploadTrigger,
+  UploadFeedback
+};
+//# sourceMappingURL=chunk-A5UYPUS2.js.map

package/dist/chunk-A5UYPUS2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/UploadButton/UploadButton.parts.tsx"],"sourcesContent":["import AttachFileOutlined from '@mui/icons-material/AttachFileOutlined';\nimport CloudUploadOutlined from '@mui/icons-material/CloudUploadOutlined';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport LinearProgress from '@mui/material/LinearProgress/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type React from 'react';\n\nimport type { DragHandlers } from './UploadButton.hooks';\n\n/*\n * The tints the dropzone and the ghost button have always drawn — 0x0A, 0x05\n * and 0x08 out of 0xFF — as `alpha()` opacities. They were hex-alpha suffixes\n * glued onto `palette.primary.main`, which only works while the palette colour\n * is a six-digit hex: an `rgb(…)` primary produced an invalid colour and no\n * tint at all.\n */\nconst DRAG_OVER_TINT = 0x0a / 0xff;\nconst HOVER_TINT = 0x05 / 0xff;\nconst GHOST_HOVER_TINT = 0x08 / 0xff;\nimport type { UploadButtonCopy } from '../../../copy';\nimport type { UploadButtonProps } from './UploadButton.types';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n/** Shared shape for the two trigger variants. */\nexport interface TriggerProps {\n  copy: UploadButtonCopy;\n  label: string;\n  icon?: React.ReactNode;\n  disabled: boolean;\n  className?: string;\n  dataTestId?: string;\n  describedBy?: string;\n  onOpen: () => void;\n}\n\n/** The drag-and-drop surface. */\nexport function UploadDropzone({\n  copy,\n  label,\n  icon,\n  disabled,\n  className,\n  dataTestId,\n  describedBy,\n  onOpen,\n  isDragOver,\n  drag,\n}: TriggerProps & { isDragOver: boolean; drag: DragHandlers }): React.ReactElement {\n  const theme = useTheme();\n  return (\n    <Box\n      component=\"div\"\n      {...drag}\n      onClick={onOpen}\n      sx={{\n        border: `${rem(theme, 2)} dashed ${isDragOver ? theme.palette.primary.main : theme.palette.divider}`,\n        borderRadius: 2,\n        padding: 3,\n        textAlign: 'center',\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        backgroundColor: isDragOver ? alpha(theme.palette.primary.main, DRAG_OVER_TINT) : 'transparent',\n        transition: 'all 0.2s ease-in-out',\n        ...(!disabled && {\n          '&:hover': {\n            borderColor: theme.palette.primary.main,\n            backgroundColor: alpha(theme.palette.primary.main, HOVER_TINT),\n          },\n        }),\n        opacity: disabled ? 0.6 : 1,\n      }}\n      className={className}\n      data-testid={dataTestId}\n      role=\"button\"\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={(event) => {\n        if (event.key !== 'Enter' && event.key !== ' ') return;\n        event.preventDefault();\n        onOpen();\n      }}\n      aria-describedby={describedBy}\n      aria-label={copy.dropzoneRole(label)}\n    >\n      <Box sx={{ mb: 2 }}>\n        {icon || <CloudUploadOutlined sx={{ fontSize: sxRem(48), color: 'text.secondary' }} />}\n      </Box>\n      <Typography variant=\"body1\" sx={{ mb: 1 }}>\n        {label}\n      </Typography>\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {copy.dropzoneHint}\n      </Typography>\n    </Box>\n  );\n}\n\n/** MUI variant for each non-dropzone appearance. */\nconst MUI_VARIANT = { outline: 'outlined', ghost: 'text' } as const;\n\n/** The plain-button trigger. */\nexport function UploadTrigger({\n  copy,\n  label,\n  icon,\n  disabled,\n  className,\n  dataTestId,\n  describedBy,\n  onOpen,\n  variant,\n  isUploading,\n}: TriggerProps & {\n  variant: NonNullable<UploadButtonProps['variant']>;\n  isUploading: boolean;\n}): React.ReactElement {\n  const theme = useTheme();\n  return (\n    <Button\n      variant={MUI_VARIANT[variant as keyof typeof MUI_VARIANT] ?? 'contained'}\n      disabled={disabled || isUploading}\n      onClick={onOpen}\n      startIcon={icon || <AttachFileOutlined />}\n      className={className}\n      data-testid={dataTestId}\n      aria-describedby={describedBy}\n      sx={{\n        ...(variant === 'ghost' && {\n          '&:hover': { backgroundColor: alpha(theme.palette.primary.main, GHOST_HOVER_TINT) },\n        }),\n      }}\n    >\n      {isUploading ? copy.uploading : label}\n    </Button>\n  );\n}\n\n/** The screen-reader live region — drag, progress and error announcements. */\nfunction UploadAnnouncer({\n  copy,\n  announceDragOver,\n  isUploading,\n  progress,\n  error,\n}: {\n  copy: UploadButtonCopy;\n  announceDragOver: boolean;\n  isUploading: boolean;\n  progress: number;\n  error: string | null;\n}): React.ReactElement {\n  const theme = useTheme();\n  return (\n    <div\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      className=\"sr-only\"\n      style={{\n        position: 'absolute',\n        left: rem(theme, -10000),\n        width: rem(theme, 1),\n        height: rem(theme, 1),\n        overflow: 'hidden',\n      }}\n    >\n      {announceDragOver && copy.dropReady}\n      {isUploading && copy.uploadInProgress(Math.round(progress))}\n      {error && copy.errorAnnouncement(error)}\n    </div>\n  );\n}\n\n/** Progress bar, helper text, error text and the live region. */\nexport function UploadFeedback({\n  copy,\n  isUploading,\n  progress,\n  helperText,\n  helperId,\n  error,\n  errorId,\n  announceDragOver,\n}: {\n  copy: UploadButtonCopy;\n  isUploading: boolean;\n  progress: number;\n  helperText?: string;\n  helperId?: string;\n  error: string | null;\n  errorId?: string;\n  announceDragOver: boolean;\n}): React.ReactElement {\n  return (\n    <>\n      {isUploading && progress > 0 && (\n        <Box sx={{ mt: 1 }}>\n          <LinearProgress variant=\"determinate\" value={progress} sx={{ borderRadius: 1 }} />\n          <Typography variant=\"caption\" sx={{ mt: 0.5, display: 'block' }}>\n            {copy.percentUploaded(Math.round(progress))}\n          </Typography>\n        </Box>\n      )}\n\n      {helperText && !error && (\n        <Typography\n          id={helperId}\n          variant=\"caption\"\n          color=\"text.secondary\"\n          sx={{ display: 'block', mt: 0.5 }}\n        >\n          {helperText}\n        </Typography>\n      )}\n\n      {error && (\n        <Typography\n          id={errorId}\n          variant=\"caption\"\n          color=\"error\"\n          sx={{ display: 'block', mt: 0.5 }}\n          role=\"alert\"\n        >\n          {error}\n        </Typography>\n      )}\n\n      <UploadAnnouncer\n        copy={copy}\n        announceDragOver={announceDragOver}\n        isUploading={isUploading}\n        progress={progress}\n        error={error}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-AER4245J.js

@@ -0,0 +1,160 @@
+import {
+  PillControl
+} from "./chunk-CS3KOKL3.js";
+import {
+  PanelRangeField
+} from "./chunk-AJ5SDHX5.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  TableFilter
+} from "./chunk-HXEBKOSM.js";
+import {
+  StackedModal
+} from "./chunk-IL7JZKXY.js";
+import {
+  StackedModalContent
+} from "./chunk-RWTFZ7J5.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-filter-panel.tsx
+import Box from "@mui/material/Box/index.js";
+import Link from "@mui/material/Link/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function PillField({
+  field,
+  selected,
+  testIdPrefix,
+  onTogglePill,
+  onClearField
+}) {
+  const testId = `${testIdPrefix}-filter-${field.id}`;
+  if (field.searchEnabled || field.control === "multiselect" || field.control === "category") {
+    return /* @__PURE__ */ jsx(
+      PillControl,
+      {
+        fieldId: field.id,
+        pill: field,
+        selected,
+        onTogglePill,
+        onClearField,
+        testIdPrefix,
+        layout: "stacked"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    TableFilter.CheckboxField,
+    {
+      label: field.label,
+      options: field.options,
+      selected: new Set(selected),
+      onToggle: (value, checked) => onTogglePill(field.id, value, checked),
+      testId
+    }
+  );
+}
+function FilterControls({
+  testIdPrefix,
+  search,
+  fields,
+  rangeFields,
+  pills,
+  ranges,
+  onSearchChange,
+  onTogglePill,
+  onChangeRange,
+  onClearField
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TableFilter.Keyword,
+      {
+        value: search,
+        onChange: onSearchChange,
+        label: copy.search.allColumnsLabel,
+        placeholder: copy.search.keywordPlaceholder,
+        testId: `${testIdPrefix}-search-all`
+      }
+    ),
+    (fields.length > 0 || rangeFields.length > 0) && /* @__PURE__ */ jsxs(TableFilter.Section, { title: copy.filters.panelTitle, children: [
+      fields.map((field) => /* @__PURE__ */ jsx(
+        PillField,
+        {
+          field,
+          selected: pills[field.id] ?? [],
+          testIdPrefix,
+          onTogglePill,
+          onClearField
+        },
+        field.id
+      )),
+      rangeFields.map((field) => /* @__PURE__ */ jsx(
+        PanelRangeField,
+        {
+          field,
+          value: ranges[field.id] ?? {},
+          onChange: (range) => onChangeRange(field.id, range),
+          testId: `${testIdPrefix}-range-${field.id}`
+        },
+        field.id
+      ))
+    ] })
+  ] });
+}
+function GridFilterPanel(props) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    TableFilter.Panel,
+    {
+      onClearAll: props.onClearAll,
+      clearTestId: `${props.testIdPrefix}-clear-filters`,
+      ariaLabel: copy.filters.panelTitle,
+      children: /* @__PURE__ */ jsx(FilterControls, { ...props })
+    }
+  );
+}
+function FilterDialog({
+  open,
+  onClose,
+  ...props
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    StackedModal,
+    {
+      open,
+      onClose,
+      navigationTitle: copy.filters.panelTitle,
+      backLabel: copy.nav.goBack,
+      modalId: `${props.testIdPrefix}-filters`,
+      maxWidth: "xs",
+      dataTestId: `${props.testIdPrefix}-filter-dialog`,
+      children: /* @__PURE__ */ jsx(StackedModalContent, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(
+          Link,
+          {
+            component: "button",
+            type: "button",
+            underline: "hover",
+            onClick: props.onClearAll,
+            "data-testid": `${props.testIdPrefix}-clear-filters`,
+            sx: { fontSize: sxRem(12), color: "text.secondary" },
+            children: copy.filters.clearAllFilters
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FilterControls, { ...props })
+      ] }) })
+    }
+  );
+}
+
+export {
+  GridFilterPanel,
+  FilterDialog
+};
+//# sourceMappingURL=chunk-AER4245J.js.map