@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-NEGCJNGJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Blockquote/Blockquote.tsx"],"sourcesContent":["import FormatQuote from '@mui/icons-material/FormatQuote';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { BlockquoteProps } from './Blockquote.types';\nimport { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n  if (color === 'neutral') {\n    const { main, light, dark } = controlNeutral(theme);\n    return { main, light, dark };\n  }\n\n  const colorMap: Record<string, typeof theme.palette.primary> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\nconst StyledBlockquote = styled('blockquote', {\n  shouldForwardProp: (prop) => !['customVariant', 'customColor'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customColor?: string;\n}>(({ theme, customVariant = 'default', customColor = 'neutral' }) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n\n  const baseStyles = {\n    margin: '1.5em 0',\n    padding: 0,\n    position: 'relative' as const,\n    fontFamily: theme.typography.body1.fontFamily,\n    fontSize: rem(theme, 18),\n    lineHeight: 1.6,\n    fontStyle: 'italic',\n    color: theme.palette.text.primary,\n  };\n\n  // Return styles based on variant\n  if (customVariant === 'bordered') {\n    return {\n      ...baseStyles,\n      padding: theme.spacing(3),\n      border: `2px solid ${alpha(colorPalette.main, 0.2)}`,\n      borderRadius: theme.shape.borderRadius * 2,\n      backgroundColor: alpha(colorPalette.main, 0.03),\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute',\n        top: -1,\n        left: -1,\n        right: -1,\n        bottom: -1,\n        background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light})`,\n        borderRadius: theme.shape.borderRadius * 2,\n        padding: '2px',\n        WebkitMask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,\n        WebkitMaskComposite: 'exclude',\n        mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,\n        maskComposite: 'exclude',\n      },\n    };\n  }\n\n  if (customVariant === 'citation') {\n    return {\n      ...baseStyles,\n      padding: theme.spacing(2, 3),\n      backgroundColor:\n        theme.palette.mode === 'dark'\n          ? alpha(theme.palette.background.paper, 0.8)\n          : alpha(neutralTones(theme).canvas, 0.95),\n      backdropFilter: theme.palette.mode === 'dark' ? 'blur(10px)' : 'none',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      borderRadius: theme.shape.borderRadius * 2,\n      boxShadow: theme.palette.mode === 'dark' ? theme.shadows[4] : 'none',\n      textAlign: 'center' as const,\n    };\n  }\n\n  // Default variant\n  return {\n    ...baseStyles,\n    paddingLeft: theme.spacing(3),\n    borderLeft: `4px solid ${colorPalette.main}`,\n    backgroundColor: alpha(colorPalette.main, 0.05),\n    padding: theme.spacing(2, 3),\n    borderRadius: theme.shape.borderRadius,\n  };\n});\n\nconst QuoteIcon = styled(FormatQuote)<{ customColor: string }>(({ theme, customColor }) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n  \n  return {\n    position: 'absolute',\n    top: theme.spacing(1),\n    left: theme.spacing(1),\n    fontSize: rem(theme, 32),\n    opacity: 0.3,\n    transform: 'rotate(180deg)',\n    color: colorPalette.main,\n  };\n});\n\nconst CitationContainer = styled(Box)(({ theme }) => ({\n  marginTop: theme.spacing(2),\n  textAlign: 'right',\n  fontStyle: 'normal',\n  opacity: 0.8,\n}));\n\nconst AuthorName = styled(Typography)(({ theme }) => ({\n  fontWeight: 600,\n  fontSize: rem(theme, 14),\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst SourceName = styled(Typography)(({ theme }) => ({\n  fontSize: rem(theme, 12),\n  opacity: 0.7,\n}));\n\nexport const Blockquote = React.forwardRef<globalThis.HTMLQuoteElement, BlockquoteProps>(\n  ({ variant = 'default', author, source, color = 'neutral', children, ...props }, ref) => {\n    const showCitation = author || source;\n    const showIcon = variant === 'bordered' || variant === 'citation';\n\n    return (\n      <StyledBlockquote ref={ref} customVariant={variant} customColor={color} {...props}>\n        {showIcon && <QuoteIcon customColor={color} />}\n\n        <Typography\n          component=\"div\"\n          sx={{\n            fontSize: 'inherit',\n            lineHeight: 'inherit',\n            fontStyle: 'inherit',\n            color: 'inherit',\n            margin: 0,\n          }}\n        >\n          {children}\n        </Typography>\n\n        {showCitation && (\n          <CitationContainer>\n            {author && <AuthorName>— {author}</AuthorName>}\n            {source && <SourceName>{source}</SourceName>}\n          </CitationContainer>\n        )}\n      </StyledBlockquote>\n    );\n  },\n);\n\nBlockquote.displayName = 'Blockquote';"],"mappings":"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","names":[]}

package/dist/chunk-NIS523UM.js

@@ -0,0 +1,26 @@
+import {
+  ConfirmActionDialog
+} from "./chunk-VZAGBDZ2.js";
+import {
+  useConfirmAction
+} from "./chunk-EMYESBIT.js";
+
+// src/components/feedback/ConfirmAction/ConfirmAction.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ConfirmAction({
+  onConfirm,
+  children,
+  ...options
+}) {
+  const state = useConfirmAction(onConfirm, options.errorText);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children(state.request, { pending: state.pending }),
+    /* @__PURE__ */ jsx(ConfirmActionDialog, { state, ...options })
+  ] });
+}
+ConfirmAction.displayName = "ConfirmAction";
+
+export {
+  ConfirmAction
+};
+//# sourceMappingURL=chunk-NIS523UM.js.map

package/dist/chunk-NNQLDFKG.js

@@ -0,0 +1,151 @@
+import {
+  absoluteInk,
+  neutralTones
+} from "./chunk-FQ6UW7IY.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Tooltip/Tooltip.tsx
+import MuiTooltip from "@mui/material/Tooltip/index.js";
+import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var pulseAnimation = keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+var SIZE_MAP = {
+  sm: { fontSize: sxRem(12), padding: "4px 8px" },
+  md: { fontSize: sxRem(14), padding: "6px 12px" },
+  lg: { fontSize: sxRem(16), padding: "8px 16px" }
+};
+var getSizeStyles = (size) => SIZE_MAP[size] || SIZE_MAP.md;
+var variantStyles = (theme, variant) => {
+  switch (variant) {
+    case "default":
+      return {
+        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.9),
+        color: absoluteInk(theme).white
+      };
+    case "dark":
+      return {
+        backgroundColor: neutralTones(theme).inverseSurface,
+        color: absoluteInk(theme).white
+      };
+    case "light":
+      return {
+        backgroundColor: absoluteInk(theme).white,
+        color: theme.palette.text.primary,
+        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+        boxShadow: theme.shadows[4]
+      };
+    case "glass":
+      return {
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: "blur(20px)",
+        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+        color: theme.palette.text.primary
+      };
+    default:
+      return {};
+  }
+};
+var emphasisStyles = (theme, glow, pulse) => ({
+  ...glow && {
+    boxShadow: `0 0 15px 3px ${alpha(theme.palette.primary.main, 0.4)} !important`,
+    filter: "brightness(1.05)"
+  },
+  ...pulse && {
+    animation: `${pulseAnimation} 2s infinite`
+  }
+});
+var arrowColor = (theme, variant) => {
+  switch (variant) {
+    case "light":
+      return absoluteInk(theme).white;
+    case "glass":
+      return alpha(theme.palette.background.paper, 0.1);
+    case "dark":
+      return neutralTones(theme).inverseSurface;
+    default:
+      return alpha(neutralTones(theme).inverseSurface, 0.9);
+  }
+};
+var StyledTooltip = styled(MuiTooltip, {
+  shouldForwardProp: (prop) => !["customVariant", "customSize", "glow", "pulse"].includes(prop)
+})(({ theme, customVariant, customSize, glow, pulse }) => {
+  const sizeStyles = getSizeStyles(customSize);
+  return {
+    "& .MuiTooltip-tooltip": {
+      borderRadius: theme.spacing(1),
+      fontSize: sizeStyles.fontSize(theme),
+      padding: sizeStyles.padding,
+      fontWeight: 500,
+      transition: "all 0.3s ease",
+      position: "relative",
+      overflow: "hidden",
+      ...variantStyles(theme, customVariant),
+      ...emphasisStyles(theme, glow, pulse)
+    },
+    "& .MuiTooltip-arrow": {
+      color: arrowColor(theme, customVariant)
+    }
+  };
+});
+var Tooltip = React.forwardRef(
+  ({
+    variant = "default",
+    size = "md",
+    glow = false,
+    pulse = false,
+    maxWidth = 300,
+    dataTestId,
+    children,
+    ...props
+  }, ref) => {
+    const childWithTestId = dataTestId ? React.cloneElement(children, {
+      "data-testid": `${dataTestId}-trigger`
+    }) : children;
+    return /* @__PURE__ */ jsx(
+      StyledTooltip,
+      {
+        ref,
+        customVariant: variant,
+        customSize: size,
+        glow,
+        pulse,
+        enterDelay: 0,
+        leaveDelay: 0,
+        disableHoverListener: false,
+        disableFocusListener: false,
+        disableTouchListener: false,
+        slotProps: {
+          tooltip: {
+            sx: { maxWidth },
+            role: "tooltip",
+            ...dataTestId && { "data-testid": `${dataTestId}-content` }
+          }
+        },
+        ...props,
+        children: childWithTestId
+      }
+    );
+  }
+);
+Tooltip.displayName = "Tooltip";
+
+export {
+  Tooltip
+};
+//# sourceMappingURL=chunk-NNQLDFKG.js.map

package/dist/chunk-NNQLDFKG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Tooltip/Tooltip.tsx"],"sourcesContent":["import MuiTooltip from '@mui/material/Tooltip/index.js';\nimport { alpha, keyframes, styled } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { TooltipProps } from './Tooltip.types';\nimport { absoluteInk, neutralTones } from '../../../tokens/ink';\nimport { sxRem } from '../../../tokens/relative';\n\n// Define pulse animation\nconst pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  70% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nconst SIZE_MAP = {\n  sm: { fontSize: sxRem(12), padding: '4px 8px' },\n  md: { fontSize: sxRem(14), padding: '6px 12px' },\n  lg: { fontSize: sxRem(16), padding: '8px 16px' },\n} as const;\n\nconst getSizeStyles = (size?: string): { fontSize: (theme: Theme) => string; padding: string } =>\n  SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;\n\nconst variantStyles = (theme: Theme, variant?: string): CSSObject => {\n  switch (variant) {\n    case 'default':\n      return {\n        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.9),\n        color: absoluteInk(theme).white,\n      };\n    case 'dark':\n      return {\n        backgroundColor: neutralTones(theme).inverseSurface,\n        color: absoluteInk(theme).white,\n      };\n    case 'light':\n      return {\n        backgroundColor: absoluteInk(theme).white,\n        color: theme.palette.text.primary,\n        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n        boxShadow: theme.shadows[4],\n      };\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: 'blur(20px)',\n        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n        color: theme.palette.text.primary,\n      };\n    default:\n      return {};\n  }\n};\n\n// glow and pulse are independent flags. The three combinations used to be spelled\n// out one by one, but each is just the union of whichever flags are set.\nconst emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => ({\n  ...(glow && {\n    boxShadow: `0 0 15px 3px ${alpha(theme.palette.primary.main, 0.4)} !important`,\n    filter: 'brightness(1.05)',\n  }),\n  ...(pulse && {\n    animation: `${pulseAnimation} 2s infinite`,\n  }),\n});\n\nconst arrowColor = (theme: Theme, variant?: string): string => {\n  switch (variant) {\n    case 'light':\n      return absoluteInk(theme).white;\n    case 'glass':\n      return alpha(theme.palette.background.paper, 0.1);\n    case 'dark':\n      return neutralTones(theme).inverseSurface;\n    default:\n      return alpha(neutralTones(theme).inverseSurface, 0.9);\n  }\n};\n\nconst StyledTooltip = styled(MuiTooltip, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customSize', 'glow', 'pulse'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customSize?: string;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, customSize, glow, pulse }) => {\n  const sizeStyles = getSizeStyles(customSize);\n\n  return {\n    '& .MuiTooltip-tooltip': {\n      borderRadius: theme.spacing(1),\n      fontSize: sizeStyles.fontSize(theme),\n      padding: sizeStyles.padding,\n      fontWeight: 500,\n      transition: 'all 0.3s ease',\n      position: 'relative',\n      overflow: 'hidden',\n      ...variantStyles(theme, customVariant),\n      ...emphasisStyles(theme, glow, pulse),\n    },\n\n    '& .MuiTooltip-arrow': {\n      color: arrowColor(theme, customVariant),\n    },\n  };\n});\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(\n  (\n    {\n      variant = 'default',\n      size = 'md',\n      glow = false,\n      pulse = false,\n      maxWidth = 300,\n      dataTestId,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const childWithTestId = dataTestId\n      ? React.cloneElement(children as React.ReactElement<{ 'data-testid'?: string }>, {\n          'data-testid': `${dataTestId}-trigger`,\n        })\n      : children;\n\n    return (\n      <StyledTooltip\n        ref={ref}\n        customVariant={variant}\n        customSize={size}\n        glow={glow}\n        pulse={pulse}\n        enterDelay={0}\n        leaveDelay={0}\n        disableHoverListener={false}\n        disableFocusListener={false}\n        disableTouchListener={false}\n        slotProps={{\n          tooltip: {\n            sx: { maxWidth },\n            role: 'tooltip',\n            ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),\n          },\n        }}\n        {...props}\n      >\n        {childWithTestId}\n      </StyledTooltip>\n    );\n  },\n);\n\nTooltip.displayName = 'Tooltip';\n"],"mappings":"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","names":[]}

package/dist/chunk-NPP44TQG.js

@@ -0,0 +1,278 @@
+import {
+  InlineTrigger,
+  PillTrigger,
+  StackedTrigger,
+  buildTriggerLabel
+} from "./chunk-DFCQQN6P.js";
+import {
+  fieldTextFieldStyles
+} from "./chunk-CGO452DC.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/ContentToolbar/MultiSelectDropdown.tsx
+import SearchIcon from "@mui/icons-material/Search";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Checkbox from "@mui/material/Checkbox/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import ListSubheader from "@mui/material/ListSubheader/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function CheckboxRow({
+  label,
+  count,
+  checked,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs(MenuItem, { onClick: () => onToggle(!checked), sx: { gap: 1 }, children: [
+    /* @__PURE__ */ jsx(Checkbox, { checked, size: "small", disableRipple: true, sx: { p: 0, pointerEvents: "none" }, tabIndex: -1 }),
+    /* @__PURE__ */ jsxs(Box, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: [
+      label,
+      count != null && /* @__PURE__ */ jsxs(Box, { component: "span", sx: { color: "text.secondary" }, children: [
+        " ",
+        "(",
+        count,
+        ")"
+      ] })
+    ] })
+  ] });
+}
+function MultiSelectDropdown({
+  label,
+  options,
+  selected,
+  onToggle,
+  onClear,
+  allLabel = "All",
+  clearLabel,
+  clearText,
+  extraOptionsHeading,
+  extraOptions,
+  searchable,
+  searchPlaceholder = "Search\u2026",
+  noResultsLabel = "No results",
+  layout = "inline",
+  "data-testid": testId,
+  onOpenChange
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [query, setQuery] = useState("");
+  const open = Boolean(anchorEl);
+  const stacked = layout === "stacked";
+  const close = () => {
+    setAnchorEl(null);
+    setQuery("");
+    onOpenChange?.(false);
+  };
+  const triggerLabel = buildTriggerLabel(selected, options, allLabel);
+  const showSearch = searchable ?? options.length > 8;
+  const anyExtraChecked = extraOptions?.some((option) => option.checked) ?? false;
+  const clearDisabled = selected.size === 0 && !anyExtraChecked;
+  const openMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+    onOpenChange?.(true);
+  };
+  const triggerProps = { triggerLabel, open, onOpen: openMenu, testId };
+  const renderTrigger = () => {
+    if (stacked) return /* @__PURE__ */ jsx(StackedTrigger, { label, ...triggerProps });
+    if (layout === "pill")
+      return /* @__PURE__ */ jsx(
+        PillTrigger,
+        {
+          clearLabel,
+          label,
+          selectedCount: selected.size,
+          onClear,
+          ...triggerProps
+        }
+      );
+    return /* @__PURE__ */ jsx(InlineTrigger, { label, ...triggerProps });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderTrigger(),
+    /* @__PURE__ */ jsx(
+      MultiSelectMenu,
+      {
+        extraOptionsHeading,
+        clearText,
+        anchorEl,
+        open,
+        close,
+        options,
+        selected,
+        onToggle,
+        extraOptions,
+        clearDisabled,
+        onClear,
+        showSearch,
+        query,
+        onQueryChange: setQuery,
+        searchPlaceholder,
+        noResultsLabel,
+        matchAnchorWidth: stacked,
+        testId
+      }
+    )
+  ] });
+}
+function MenuSearchField({
+  query,
+  onQueryChange,
+  placeholder,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: { position: "sticky", top: 0, zIndex: 1, bgcolor: "background.paper", px: 1, py: 0.75 },
+      onKeyDown: (event) => event.stopPropagation(),
+      children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          autoFocus: true,
+          size: "small",
+          sx: fieldTextFieldStyles,
+          fullWidth: true,
+          value: query,
+          onChange: (event) => onQueryChange(event.target.value),
+          placeholder,
+          inputProps: { "aria-label": placeholder, "data-testid": testId ? `${testId}-search` : void 0 },
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: sxRem(16) } }) })
+          }
+        }
+      )
+    }
+  );
+}
+function resolveMenuPlacement(matchAnchorWidth, anchorEl) {
+  if (!matchAnchorWidth) return { anchorWidth: void 0, align: "right" };
+  return { anchorWidth: anchorEl?.offsetWidth, align: "left" };
+}
+function MultiSelectMenu({
+  anchorEl,
+  open,
+  close,
+  options,
+  selected,
+  onToggle,
+  extraOptions,
+  extraOptionsHeading,
+  clearText,
+  clearDisabled,
+  onClear,
+  showSearch,
+  query,
+  onQueryChange,
+  searchPlaceholder,
+  noResultsLabel,
+  matchAnchorWidth,
+  testId
+}) {
+  const trimmed = query.trim().toLowerCase();
+  const visibleOptions = useMemo(
+    () => trimmed ? options.filter((option) => option.label.toLowerCase().includes(trimmed)) : options,
+    [options, trimmed]
+  );
+  const { anchorWidth, align } = resolveMenuPlacement(matchAnchorWidth, anchorEl);
+  return /* @__PURE__ */ jsxs(
+    Menu,
+    {
+      anchorEl,
+      open,
+      onClose: close,
+      anchorOrigin: { vertical: "bottom", horizontal: align },
+      transformOrigin: { vertical: "top", horizontal: align },
+      autoFocus: !showSearch,
+      disableAutoFocusItem: true,
+      slotProps: {
+        // Cap the height so a long list (e.g. many categories) scrolls instead
+        // of running off-screen; the sticky search box stays pinned on top.
+        paper: { sx: { minWidth: anchorWidth ?? 180, width: anchorWidth, maxHeight: 360 } },
+        list: { sx: { pt: showSearch ? 0 : void 0, pb: 0 } }
+      },
+      children: [
+        showSearch && /* @__PURE__ */ jsx(MenuSearchField, { query, onQueryChange, placeholder: searchPlaceholder, testId }),
+        visibleOptions.length === 0 && showSearch ? /* @__PURE__ */ jsx(MenuItem, { disabled: true, "data-testid": testId ? `${testId}-no-results` : void 0, sx: { fontSize: sxRem(13) }, children: noResultsLabel }) : visibleOptions.map((option) => /* @__PURE__ */ jsx(
+          CheckboxRow,
+          {
+            label: option.label,
+            count: option.count,
+            checked: selected.has(option.value),
+            onToggle: (next) => onToggle(option.value, next)
+          },
+          option.value
+        )),
+        extraOptions && extraOptions.length > 0 ? [
+          /* @__PURE__ */ jsx(Divider, {}, "extra-divider"),
+          /* @__PURE__ */ jsx(ListSubheader, { sx: { px: 1, py: 0.75, fontSize: sxRem(12), fontWeight: 600 }, children: extraOptionsHeading }, "extra-label"),
+          ...extraOptions.map((extra) => /* @__PURE__ */ jsx(CheckboxRow, { label: extra.label, checked: extra.checked, onToggle: (next) => extra.onCheckedChange(next) }, extra.id))
+        ] : null,
+        /* @__PURE__ */ jsx(
+          MenuClearFooter,
+          {
+            clearText,
+            clearDisabled,
+            onClear,
+            close,
+            testId
+          }
+        )
+      ]
+    }
+  );
+}
+function MenuClearFooter({
+  clearText,
+  clearDisabled,
+  onClear,
+  close,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        // Pin to the bottom of the scroll viewport so it stays visible while the
+        // options list scrolls (mirrors the sticky search box on top).
+        position: "sticky",
+        bottom: 0,
+        zIndex: 1,
+        display: "flex",
+        justifyContent: "flex-end",
+        borderTop: 1,
+        borderColor: "divider",
+        bgcolor: "background.paper",
+        px: 1,
+        py: 0.75
+      },
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "text",
+          size: "small",
+          color: "inherit",
+          "data-testid": testId ? `${testId}-clear` : void 0,
+          disabled: clearDisabled,
+          onClick: () => {
+            onClear();
+            close();
+          },
+          sx: { minWidth: 0, px: 1, py: 0.25, fontSize: sxRem(12), fontWeight: 400, textTransform: "none", color: "text.secondary" },
+          children: clearText
+        }
+      )
+    }
+  );
+}
+
+export {
+  MultiSelectDropdown
+};
+//# sourceMappingURL=chunk-NPP44TQG.js.map

package/dist/chunk-NPP44TQG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/MultiSelectDropdown.tsx"],"sourcesContent":["'use client';\n\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport ListSubheader from '@mui/material/ListSubheader/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport React, { useMemo, useState } from 'react';\n\nimport type {\n  MultiSelectDropdownProps,\n  MultiSelectExtraOption,\n  MultiSelectOption,\n} from './ContentToolbar.types';\nimport { buildTriggerLabel, InlineTrigger, PillTrigger, StackedTrigger } from './MultiSelectTriggers';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\n/** One checkbox menu row with an optional trailing count. */\nfunction CheckboxRow({\n  label,\n  count,\n  checked,\n  onToggle,\n}: {\n  label: string;\n  count?: number;\n  checked: boolean;\n  onToggle: (next: boolean) => void;\n}): React.JSX.Element {\n  return (\n    <MenuItem onClick={() => onToggle(!checked)} sx={{ gap: 1 }}>\n      <Checkbox checked={checked} size=\"small\" disableRipple sx={{ p: 0, pointerEvents: 'none' }} tabIndex={-1} />\n      <Box component=\"span\" sx={{ flex: 1, minWidth: 0, textAlign: 'left' }}>\n        {label}\n        {count != null && (\n          <Box component=\"span\" sx={{ color: 'text.secondary' }}>\n            {' '}\n            ({count})\n          </Box>\n        )}\n      </Box>\n    </MenuItem>\n  );\n}\n\n/**\n * Generic multi-select dropdown with checkboxes, counts, an optional \"Options\"\n * section, and a \"Clear\" action. Faithful MUI port of the reference toolbar's\n * \"Content Type\" control. The menu stays open while toggling options.\n */\nexport function MultiSelectDropdown<TValue extends string = string>({\n  label,\n  options,\n  selected,\n  onToggle,\n  onClear,\n  allLabel = 'All',\n  clearLabel,\n  clearText,\n  extraOptionsHeading,\n  extraOptions,\n  searchable,\n  searchPlaceholder = 'Search…',\n  noResultsLabel = 'No results',\n  layout = 'inline',\n  'data-testid': testId,\n  onOpenChange,\n}: MultiSelectDropdownProps<TValue>): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const [query, setQuery] = useState('');\n  const open = Boolean(anchorEl);\n  const stacked = layout === 'stacked';\n  // Reset the query each time the menu closes so it reopens showing everything.\n  const close = (): void => {\n    setAnchorEl(null);\n    setQuery('');\n    onOpenChange?.(false);\n  };\n  const triggerLabel = buildTriggerLabel(selected, options, allLabel);\n  // Auto-enable search for long lists (e.g. many categories) unless overridden.\n  const showSearch = searchable ?? options.length > 8;\n  const anyExtraChecked = extraOptions?.some((option) => option.checked) ?? false;\n  const clearDisabled = selected.size === 0 && !anyExtraChecked;\n\n  const openMenu = (event: React.MouseEvent<HTMLElement>): void => {\n    setAnchorEl(event.currentTarget);\n    onOpenChange?.(true);\n  };\n  const triggerProps = { triggerLabel, open, onOpen: openMenu, testId };\n\n  const renderTrigger = (): React.JSX.Element => {\n    if (stacked) return <StackedTrigger label={label} {...triggerProps} />;\n    if (layout === 'pill')\n      return (\n        <PillTrigger\n          clearLabel={clearLabel}\n          label={label}\n          selectedCount={selected.size}\n          onClear={onClear}\n          {...triggerProps}\n        />\n      );\n    return <InlineTrigger label={label} {...triggerProps} />;\n  };\n\n  return (\n    <>\n      {renderTrigger()}\n      <MultiSelectMenu\n        extraOptionsHeading={extraOptionsHeading} clearText={clearText} anchorEl={anchorEl}\n        open={open}\n        close={close}\n        options={options}\n        selected={selected}\n        onToggle={onToggle}\n        extraOptions={extraOptions}\n        clearDisabled={clearDisabled}\n        onClear={onClear}\n        showSearch={showSearch}\n        query={query}\n        onQueryChange={setQuery}\n        searchPlaceholder={searchPlaceholder}\n        noResultsLabel={noResultsLabel}\n        matchAnchorWidth={stacked}\n        testId={testId}\n      />\n    </>\n  );\n}\n\n/** Sticky search box at the top of the menu; keydowns don't reach the Menu's typeahead. */\nfunction MenuSearchField({\n  query,\n  onQueryChange,\n  placeholder,\n  testId,\n}: {\n  query: string;\n  onQueryChange: (value: string) => void;\n  placeholder: string;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      sx={{ position: 'sticky', top: 0, zIndex: 1, bgcolor: 'background.paper', px: 1, py: 0.75 }}\n      onKeyDown={(event) => event.stopPropagation()}\n    >\n      <TextField\n        autoFocus\n        size=\"small\"\n        sx={fieldTextFieldStyles}\n        fullWidth\n        value={query}\n        onChange={(event) => onQueryChange(event.target.value)}\n        placeholder={placeholder}\n        inputProps={{ 'aria-label': placeholder, 'data-testid': testId ? `${testId}-search` : undefined }}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <SearchIcon sx={{ fontSize: sxRem(16) }} />\n            </InputAdornment>\n          ),\n        }}\n      />\n    </Box>\n  );\n}\n\ninterface MultiSelectMenuProps<TValue extends string> {\n  anchorEl: HTMLElement | null;\n  open: boolean;\n  close: () => void;\n  options: MultiSelectOption<TValue>[];\n  selected: ReadonlySet<TValue>;\n  onToggle: (value: TValue, checked: boolean) => void;\n  extraOptions?: MultiSelectExtraOption[];\n  clearDisabled: boolean;\n  onClear: () => void;\n  showSearch: boolean;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder: string;\n  noResultsLabel: string;\n  extraOptionsHeading: string;\n  clearText: string;\n  /** Match the menu width to the trigger and left-align it (stacked select). */\n  matchAnchorWidth?: boolean;\n  testId?: string;\n}\n\n/**\n * Menu placement. Default: anchored to the trigger's right (toolbar). When\n * `matchAnchorWidth` (stacked select), match the trigger width and left-align so\n * the menu sits flush under the full-width control.\n */\nfunction resolveMenuPlacement(\n  matchAnchorWidth: boolean | undefined,\n  anchorEl: HTMLElement | null,\n): { anchorWidth: number | undefined; align: 'left' | 'right' } {\n  if (!matchAnchorWidth) return { anchorWidth: undefined, align: 'right' };\n  return { anchorWidth: anchorEl?.offsetWidth, align: 'left' };\n}\n\n/** The (optional) search box + checkbox list + optional \"Options\" section + a \"Clear\" footer. */\nfunction MultiSelectMenu<TValue extends string>({\n  anchorEl,\n  open,\n  close,\n  options,\n  selected,\n  onToggle,\n  extraOptions,\n  extraOptionsHeading,\n  clearText,\n  clearDisabled,\n  onClear,\n  showSearch,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  noResultsLabel,\n  matchAnchorWidth,\n  testId,\n}: MultiSelectMenuProps<TValue>): React.JSX.Element {\n  const trimmed = query.trim().toLowerCase();\n  const visibleOptions = useMemo(\n    () => (trimmed ? options.filter((option) => option.label.toLowerCase().includes(trimmed)) : options),\n    [options, trimmed],\n  );\n  const { anchorWidth, align } = resolveMenuPlacement(matchAnchorWidth, anchorEl);\n  return (\n    <Menu\n      anchorEl={anchorEl}\n      open={open}\n      onClose={close}\n      anchorOrigin={{ vertical: 'bottom', horizontal: align }}\n      transformOrigin={{ vertical: 'top', horizontal: align }}\n      // Keep focus on the search box (don't let the Menu grab the first item),\n      // and stop MUI's typeahead from swallowing keystrokes meant for the input.\n      autoFocus={!showSearch}\n      disableAutoFocusItem\n      slotProps={{\n        // Cap the height so a long list (e.g. many categories) scrolls instead\n        // of running off-screen; the sticky search box stays pinned on top.\n        paper: { sx: { minWidth: anchorWidth ?? 180, width: anchorWidth, maxHeight: 360 } },\n        list: { sx: { pt: showSearch ? 0 : undefined, pb: 0 } },\n      }}\n    >\n      {showSearch && (\n        <MenuSearchField query={query} onQueryChange={onQueryChange} placeholder={searchPlaceholder} testId={testId} />\n      )}\n      {visibleOptions.length === 0 && showSearch ? (\n        <MenuItem disabled data-testid={testId ? `${testId}-no-results` : undefined} sx={{ fontSize: sxRem(13) }}>\n          {noResultsLabel}\n        </MenuItem>\n      ) : (\n        visibleOptions.map((option) => (\n          <CheckboxRow\n            key={option.value}\n            label={option.label}\n            count={option.count}\n            checked={selected.has(option.value)}\n            onToggle={(next) => onToggle(option.value, next)}\n          />\n        ))\n      )}\n      {extraOptions && extraOptions.length > 0\n        ? [\n            <Divider key=\"extra-divider\" />,\n            <ListSubheader key=\"extra-label\" sx={{ px: 1, py: 0.75, fontSize: sxRem(12), fontWeight: 600 }}>\n              {extraOptionsHeading}\n            </ListSubheader>,\n            ...extraOptions.map((extra) => (\n              <CheckboxRow key={extra.id} label={extra.label} checked={extra.checked} onToggle={(next) => extra.onCheckedChange(next)} />\n            )),\n          ]\n        : null}\n      <MenuClearFooter\n        clearText={clearText} clearDisabled={clearDisabled} onClear={onClear}\n        close={close} testId={testId}\n      />\n    </Menu>\n  );\n}\n\n/** The bottom \"Clear\" footer that resets the selection and closes the menu. */\nfunction MenuClearFooter({\n  clearText,\n  clearDisabled,\n  onClear,\n  close,\n  testId,\n}: {\n  clearText: string;\n  clearDisabled: boolean;\n  onClear: () => void;\n  close: () => void;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      sx={{\n        // Pin to the bottom of the scroll viewport so it stays visible while the\n        // options list scrolls (mirrors the sticky search box on top).\n        position: 'sticky',\n        bottom: 0,\n        zIndex: 1,\n        display: 'flex',\n        justifyContent: 'flex-end',\n        borderTop: 1,\n        borderColor: 'divider',\n        bgcolor: 'background.paper',\n        px: 1,\n        py: 0.75,\n      }}\n    >\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        data-testid={testId ? `${testId}-clear` : undefined}\n        disabled={clearDisabled}\n        onClick={() => {\n          onClear();\n          close();\n        }}\n        sx={{ minWidth: 0, px: 1, py: 0.25, fontSize: sxRem(12), fontWeight: 400, textTransform: 'none', color: 'text.secondary' }}\n      >\n        {clearText}\n      </Button>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-NSJVQ5YJ.js

@@ -0,0 +1,117 @@
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/DateRangePicker/DateRangePickerQuickList.tsx
+import Box from "@mui/material/Box/index.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var optionSx = (active, overMax) => ({
+  display: "block",
+  // Full-width rows in the side column; pills in the narrow row. A fixed full
+  // width in both would make the narrow layout nine stacked lines.
+  width: { xs: "auto", md: "100%" },
+  // A pill must not be squeezed by its neighbours — the row SCROLLS rather
+  // than compressing "Este trimestre" into two characters and an ellipsis.
+  flex: { xs: "0 0 auto", md: "0 1 auto" },
+  textAlign: "left",
+  font: "inherit",
+  fontSize: sxRem(14),
+  fontWeight: active ? 600 : 400,
+  lineHeight: 1.4,
+  px: 1.5,
+  py: 0.75,
+  whiteSpace: { xs: "nowrap", md: "normal" },
+  border: "1px solid",
+  // Narrow, an entry has to look tappable on its own, with no column and no
+  // rule to group it — so the pill carries a visible edge. Beside the calendar
+  // the group already reads as a list and a border on every row would be nine
+  // boxes where the selected one should be the only marked thing.
+  borderColor: active ? "primary.main" : { xs: "divider", md: "transparent" },
+  borderRadius: { xs: 999, md: 1 },
+  cursor: overMax ? "not-allowed" : "pointer",
+  color: overMax ? "text.disabled" : active ? "primary.main" : "text.primary",
+  backgroundColor: active ? "action.selected" : "transparent",
+  "&:hover": { backgroundColor: overMax ? "transparent" : "action.hover" },
+  "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 1 }
+});
+var REASON_SX = {
+  display: "block",
+  fontSize: sxRem(11),
+  lineHeight: 1.3,
+  mt: 0.25,
+  color: "text.disabled"
+};
+function DateRangeQuickList({
+  options,
+  activeId,
+  onPick,
+  reasonFor,
+  label,
+  dataTestId
+}) {
+  const reasonPrefix = useId();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "group",
+      "aria-label": label,
+      "data-testid": `${dataTestId}-quick-list`,
+      sx: {
+        display: "flex",
+        // A column beside the calendar; ONE scrolling row of pills above it
+        // once there is no width for both.
+        //
+        // Scrolling rather than wrapping: nine wrapped pills take three or four
+        // lines at 390px, which pushes the calendar most of a screen down and
+        // makes the quick ranges — the fastest way to answer — the thing you
+        // have to scroll past. One line keeps the calendar in view and costs a
+        // horizontal swipe, which is the gesture a chip row already invites.
+        flexDirection: { xs: "row", md: "column" },
+        flexWrap: { xs: "nowrap", md: "wrap" },
+        overflowX: { xs: "auto", md: "visible" },
+        // Room for the focus ring, which an `overflow` container would clip.
+        px: { xs: 0.25, md: 0 },
+        py: { xs: 0.25, md: 0 },
+        // The scrollbar is chrome on a phone and noise on a trackpad; the pills
+        // themselves are the affordance, and the last one sits half-cut at the
+        // edge to say the row continues.
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": { display: "none" },
+        alignContent: "flex-start",
+        gap: 0.5,
+        minWidth: { md: 168 },
+        maxWidth: { md: 200 }
+      },
+      children: options.map((option) => {
+        const active = option.id === activeId;
+        const reasonId = `${reasonPrefix}-${option.id}`;
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            component: "button",
+            type: "button",
+            "aria-pressed": active,
+            "aria-disabled": option.overMax || void 0,
+            "aria-describedby": option.overMax ? reasonId : void 0,
+            "data-testid": `${dataTestId}-quick-${option.id}`,
+            onClick: () => {
+              if (!option.overMax) onPick(option);
+            },
+            sx: optionSx(active, option.overMax),
+            children: [
+              option.label,
+              option.overMax && /* @__PURE__ */ jsx(Box, { component: "span", id: reasonId, sx: REASON_SX, children: reasonFor(option) })
+            ]
+          },
+          option.id
+        );
+      })
+    }
+  );
+}
+
+export {
+  DateRangeQuickList
+};
+//# sourceMappingURL=chunk-NSJVQ5YJ.js.map

package/dist/chunk-NSJVQ5YJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/DateRangePicker/DateRangePickerQuickList.tsx"],"sourcesContent":["/**\n * The quick-pick column beside the calendar.\n *\n * These are BUTTONS, not links or list rows: each one sets the range and the\n * pressed one stays visibly pressed, which is what `aria-pressed` says out\n * loud. (A listbox with `aria-selected` would model it too — the rule is to\n * pick one and use it for every entry, so a reader's screen reader describes\n * the whole column the same way.)\n *\n * An over-cap entry is `aria-disabled` and keeps its place in the tab order,\n * with the reason rendered under the label. Removing it, or quietly shortening\n * the window it hands back, both answer \"why can't I have this year?\" with\n * silence.\n */\nimport Box from '@mui/material/Box/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport React, { useId } from 'react';\n\nimport type { ResolvedQuickRange } from './DateRangePicker.types';\nimport { sxRem } from '../../../tokens/relative';\n\nconst optionSx = (active: boolean, overMax: boolean): SxProps<Theme> => ({\n  display: 'block',\n  // Full-width rows in the side column; pills in the narrow row. A fixed full\n  // width in both would make the narrow layout nine stacked lines.\n  width: { xs: 'auto', md: '100%' },\n  // A pill must not be squeezed by its neighbours — the row SCROLLS rather\n  // than compressing \"Este trimestre\" into two characters and an ellipsis.\n  flex: { xs: '0 0 auto', md: '0 1 auto' },\n  textAlign: 'left',\n  font: 'inherit',\n  fontSize: sxRem(14),\n  fontWeight: active ? 600 : 400,\n  lineHeight: 1.4,\n  px: 1.5,\n  py: 0.75,\n  whiteSpace: { xs: 'nowrap', md: 'normal' },\n  border: '1px solid',\n  // Narrow, an entry has to look tappable on its own, with no column and no\n  // rule to group it — so the pill carries a visible edge. Beside the calendar\n  // the group already reads as a list and a border on every row would be nine\n  // boxes where the selected one should be the only marked thing.\n  borderColor: active ? 'primary.main' : { xs: 'divider', md: 'transparent' },\n  borderRadius: { xs: 999, md: 1 },\n  cursor: overMax ? 'not-allowed' : 'pointer',\n  color: overMax ? 'text.disabled' : active ? 'primary.main' : 'text.primary',\n  backgroundColor: active ? 'action.selected' : 'transparent',\n  '&:hover': { backgroundColor: overMax ? 'transparent' : 'action.hover' },\n  '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 1 },\n});\n\nconst REASON_SX: SxProps<Theme> = {\n  display: 'block',\n  fontSize: sxRem(11),\n  lineHeight: 1.3,\n  mt: 0.25,\n  color: 'text.disabled',\n};\n\nexport interface DateRangeQuickListProps {\n  options: ResolvedQuickRange[];\n  /** The entry the current draft equals, if any. */\n  activeId: string | undefined;\n  onPick: (option: ResolvedQuickRange) => void;\n  /** Why an entry is refused, rendered under it. */\n  reasonFor: (option: ResolvedQuickRange) => string;\n  /** Accessible name of the group. */\n  label: string;\n  dataTestId: string;\n}\n\nexport function DateRangeQuickList({\n  options,\n  activeId,\n  onPick,\n  reasonFor,\n  label,\n  dataTestId,\n}: DateRangeQuickListProps): React.JSX.Element {\n  const reasonPrefix = useId();\n\n  return (\n    <Box\n      role=\"group\"\n      aria-label={label}\n      data-testid={`${dataTestId}-quick-list`}\n      sx={{\n        display: 'flex',\n        // A column beside the calendar; ONE scrolling row of pills above it\n        // once there is no width for both.\n        //\n        // Scrolling rather than wrapping: nine wrapped pills take three or four\n        // lines at 390px, which pushes the calendar most of a screen down and\n        // makes the quick ranges — the fastest way to answer — the thing you\n        // have to scroll past. One line keeps the calendar in view and costs a\n        // horizontal swipe, which is the gesture a chip row already invites.\n        flexDirection: { xs: 'row', md: 'column' },\n        flexWrap: { xs: 'nowrap', md: 'wrap' },\n        overflowX: { xs: 'auto', md: 'visible' },\n        // Room for the focus ring, which an `overflow` container would clip.\n        px: { xs: 0.25, md: 0 },\n        py: { xs: 0.25, md: 0 },\n        // The scrollbar is chrome on a phone and noise on a trackpad; the pills\n        // themselves are the affordance, and the last one sits half-cut at the\n        // edge to say the row continues.\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n        alignContent: 'flex-start',\n        gap: 0.5,\n        minWidth: { md: 168 },\n        maxWidth: { md: 200 },\n      }}\n    >\n      {options.map((option) => {\n        const active = option.id === activeId;\n        const reasonId = `${reasonPrefix}-${option.id}`;\n        return (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            key={option.id}\n            aria-pressed={active}\n            // `aria-disabled`, never the `disabled` attribute: a disabled button\n            // is skipped by the tab order, so the reason under it is unreachable\n            // by exactly the reader most likely to need it.\n            aria-disabled={option.overMax || undefined}\n            aria-describedby={option.overMax ? reasonId : undefined}\n            data-testid={`${dataTestId}-quick-${option.id}`}\n            onClick={() => {\n              if (!option.overMax) onPick(option);\n            }}\n            sx={optionSx(active, option.overMax)}\n          >\n            {option.label}\n            {option.overMax && (\n              <Box component=\"span\" id={reasonId} sx={REASON_SX}>\n                {reasonFor(option)}\n              </Box>\n            )}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}