@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-BQ4QD3UM.js

@@ -0,0 +1,137 @@
+// src/components/navigation/Pagination/Pagination.styles.ts
+import { alpha } from "@mui/material";
+var ITEM_SIZE_STYLES = {
+  sm: (theme) => ({
+    fontSize: "0.875rem",
+    minWidth: 28,
+    height: 28,
+    padding: theme.spacing(0.25, 0.5)
+  }),
+  lg: (theme) => ({
+    fontSize: "1.125rem",
+    minWidth: 44,
+    height: 44,
+    padding: theme.spacing(1, 1.5)
+  })
+};
+var ITEM_VARIANTS = {
+  default: (theme, _customSize) => ({
+    borderRadius: theme.spacing(1),
+    "&:hover": {
+      backgroundColor: alpha(theme.palette.primary.main, 0.08),
+      transform: "translateY(-1px)",
+      boxShadow: `0 2px 8px ${alpha(theme.palette.primary.main, 0.15)}`
+    },
+    "&.Mui-selected": {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+      boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
+      "&:hover": {
+        backgroundColor: theme.palette.primary.dark,
+        transform: "translateY(-2px)"
+      }
+    }
+  }),
+  rounded: (theme, customSize) => ({
+    borderRadius: "50%",
+    minWidth: customSize === "sm" ? 28 : customSize === "lg" ? 44 : 36,
+    width: customSize === "sm" ? 28 : customSize === "lg" ? 44 : 36,
+    "&:hover": {
+      backgroundColor: alpha(theme.palette.primary.main, 0.08),
+      transform: "scale(1.1)",
+      boxShadow: `0 4px 16px ${alpha(theme.palette.primary.main, 0.2)}`
+    },
+    "&.Mui-selected": {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+      transform: "scale(1.05)",
+      boxShadow: `0 6px 20px ${alpha(theme.palette.primary.main, 0.3)}`,
+      "&:hover": {
+        backgroundColor: theme.palette.primary.dark,
+        transform: "scale(1.15)"
+      }
+    }
+  }),
+  dots: (theme, customSize) => ({
+    borderRadius: "50%",
+    minWidth: customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10,
+    width: customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10,
+    height: customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10,
+    fontSize: 0,
+    backgroundColor: alpha(theme.palette.text.secondary, 0.3),
+    "&:hover": {
+      backgroundColor: alpha(theme.palette.primary.main, 0.5),
+      transform: "scale(1.3)"
+    },
+    "&.Mui-selected": {
+      backgroundColor: theme.palette.primary.main,
+      transform: "scale(1.2)",
+      "&:hover": {
+        backgroundColor: theme.palette.primary.dark,
+        transform: "scale(1.4)"
+      }
+    },
+    "&.MuiPaginationItem-previousNext, &.MuiPaginationItem-firstLast": {
+      display: "none"
+    }
+  }),
+  minimal: (theme, _customSize) => ({
+    borderRadius: theme.spacing(0.5),
+    backgroundColor: "transparent",
+    color: theme.palette.text.secondary,
+    padding: theme.spacing(0.5, 1),
+    "&:hover": {
+      backgroundColor: alpha(theme.palette.primary.main, 0.04),
+      color: theme.palette.primary.main
+    },
+    "&.Mui-selected": {
+      backgroundColor: "transparent",
+      color: theme.palette.primary.main,
+      fontWeight: 600,
+      position: "relative",
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        bottom: 0,
+        left: "50%",
+        transform: "translateX(-50%)",
+        width: "60%",
+        height: 2,
+        backgroundColor: theme.palette.primary.main,
+        borderRadius: 1
+      }
+    }
+  })
+};
+var itemSizeStyles = (theme, customSize) => customSize ? ITEM_SIZE_STYLES[customSize]?.(theme) ?? {} : {};
+var itemVariantStyles = (theme, customVariant, customSize) => customVariant ? ITEM_VARIANTS[customVariant]?.(theme, customSize) ?? {} : {};
+var paginationStyles = ({
+  theme,
+  customVariant,
+  customSize
+}) => ({
+  "& .MuiPagination-ul": {
+    gap: customVariant === "minimal" ? theme.spacing(0.5) : theme.spacing(1)
+  },
+  "& .MuiPaginationItem-root": {
+    ...itemSizeStyles(theme, customSize),
+    ...itemVariantStyles(theme, customVariant, customSize),
+    transition: "all 0.2s ease",
+    fontWeight: 500
+    // Default variant (flat design)
+    // Rounded variant
+    // Dots variant (minimal circular dots)
+    // Minimal variant (text-only)
+  },
+  // Hide ellipsis for dots variant
+  ...customVariant === "dots" && {
+    "& .MuiPaginationItem-ellipsis": {
+      display: "none"
+    }
+  }
+});
+
+export {
+  paginationStyles
+};
+//# sourceMappingURL=chunk-BQ4QD3UM.js.map

package/dist/chunk-BQ4QD3UM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Pagination/Pagination.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\n\nconst ITEM_SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {\n  sm: (theme) => ({\n      fontSize: '0.875rem',\n      minWidth: 28,\n      height: 28,\n      padding: theme.spacing(0.25, 0.5) }),\n  lg: (theme) => ({\n      fontSize: '1.125rem',\n      minWidth: 44,\n      height: 44,\n      padding: theme.spacing(1, 1.5) }) };\n\n// One variant applies at a time, so a lookup replaces the mutually exclusive\n// spreads.\nconst ITEM_VARIANTS: Record<string, (theme: Theme, customSize?: string) => CSSObject> = {\n  default: (theme, _customSize) => ({\n      borderRadius: theme.spacing(1),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.08),\n        transform: 'translateY(-1px)',\n        boxShadow: `0 2px 8px ${alpha(theme.palette.primary.main, 0.15)}` },\n      '&.Mui-selected': {\n        backgroundColor: theme.palette.primary.main,\n        color: theme.palette.primary.contrastText,\n        boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,\n        '&:hover': {\n          backgroundColor: theme.palette.primary.dark,\n          transform: 'translateY(-2px)' } } }),\n  rounded: (theme, customSize) => ({\n      borderRadius: '50%',\n      minWidth: customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36,\n      width: customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36,\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.08),\n        transform: 'scale(1.1)',\n        boxShadow: `0 4px 16px ${alpha(theme.palette.primary.main, 0.2)}` },\n      '&.Mui-selected': {\n        backgroundColor: theme.palette.primary.main,\n        color: theme.palette.primary.contrastText,\n        transform: 'scale(1.05)',\n        boxShadow: `0 6px 20px ${alpha(theme.palette.primary.main, 0.3)}`,\n        '&:hover': {\n          backgroundColor: theme.palette.primary.dark,\n          transform: 'scale(1.15)' } } }),\n  dots: (theme, customSize) => ({\n      borderRadius: '50%',\n      minWidth: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,\n      width: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,\n      height: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,\n      fontSize: 0,\n      backgroundColor: alpha(theme.palette.text.secondary, 0.3),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.5),\n        transform: 'scale(1.3)' },\n      '&.Mui-selected': {\n        backgroundColor: theme.palette.primary.main,\n        transform: 'scale(1.2)',\n        '&:hover': {\n          backgroundColor: theme.palette.primary.dark,\n          transform: 'scale(1.4)' } },\n      '&.MuiPaginationItem-previousNext, &.MuiPaginationItem-firstLast': {\n        display: 'none' } }),\n  minimal: (theme, _customSize) => ({\n      borderRadius: theme.spacing(0.5),\n      backgroundColor: 'transparent',\n      color: theme.palette.text.secondary,\n      padding: theme.spacing(0.5, 1),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.04),\n        color: theme.palette.primary.main },\n      '&.Mui-selected': {\n        backgroundColor: 'transparent',\n        color: theme.palette.primary.main,\n        fontWeight: 600,\n        position: 'relative',\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          bottom: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          width: '60%',\n          height: 2,\n          backgroundColor: theme.palette.primary.main,\n          borderRadius: 1 } } }) };\n\nconst itemSizeStyles = (theme: Theme, customSize?: string): CSSObject =>\n  customSize ? (ITEM_SIZE_STYLES[customSize]?.(theme) ?? {}) : {};\n\nconst itemVariantStyles = (theme: Theme, customVariant?: string, customSize?: string): CSSObject =>\n  customVariant ? (ITEM_VARIANTS[customVariant]?.(theme, customSize) ?? {}) : {};\n\n// The pagination list's own styling, lifted out so the styled() callback is a\n// single spread.\nexport const paginationStyles = ({\n  theme,\n  customVariant,\n  customSize }: {\n  theme: Theme;\n  customVariant?: string;\n  customSize?: string;\n}): CSSObject => ({\n  '& .MuiPagination-ul': {\n    gap: customVariant === 'minimal' ? theme.spacing(0.5) : theme.spacing(1) },\n\n  '& .MuiPaginationItem-root': {\n    ...itemSizeStyles(theme, customSize),\n    ...itemVariantStyles(theme, customVariant, customSize),\n    transition: 'all 0.2s ease',\n    fontWeight: 500,\n\n\n\n\n\n    // Default variant (flat design)\n\n\n    // Rounded variant\n\n\n    // Dots variant (minimal circular dots)\n\n\n    // Minimal variant (text-only)\n\n  },\n\n  // Hide ellipsis for dots variant\n  ...(customVariant === 'dots' && {\n    '& .MuiPaginationItem-ellipsis': {\n      display: 'none' } }) });\n"],"mappings":"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","names":[]}

package/dist/chunk-BTM4SJIT.js

@@ -0,0 +1,273 @@
+import {
+  InlineTrigger,
+  PillTrigger,
+  StackedTrigger,
+  buildTriggerLabel
+} from "./chunk-UGVWIIZO.js";
+
+// src/components/layout/ContentToolbar/MultiSelectDropdown.tsx
+import SearchIcon from "@mui/icons-material/Search";
+import {
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  InputAdornment,
+  ListSubheader,
+  Menu,
+  MenuItem,
+  TextField
+} from "@mui/material";
+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",
+          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: 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: "0.8125rem" }, 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: "0.75rem", 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: "0.75rem", fontWeight: 400, textTransform: "none", color: "text.secondary" },
+          children: clearText
+        }
+      )
+    }
+  );
+}
+
+export {
+  MultiSelectDropdown
+};
+//# sourceMappingURL=chunk-BTM4SJIT.js.map

package/dist/chunk-BTM4SJIT.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 {\n  Box,\n  Button,\n  Checkbox,\n  Divider,\n  InputAdornment,\n  ListSubheader,\n  Menu,\n  MenuItem,\n  TextField,\n} from '@mui/material';\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';\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        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: 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: '0.8125rem' }}>\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: '0.75rem', 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: '0.75rem', 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-BTOFGWM2.js

@@ -0,0 +1,62 @@
+import {
+  SR_ONLY_SX,
+  STATUS_COLOR
+} from "./chunk-S7KQOZ7X.js";
+
+// src/components/layout/SettingsLayout/SettingsStatusMarker.tsx
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsStatusMarker({
+  status,
+  label,
+  testId
+}) {
+  const hidden = label ? /* @__PURE__ */ jsx(Box, { component: "span", sx: SR_ONLY_SX, children: label }) : null;
+  if (status === "locked") {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "span",
+        "data-testid": testId,
+        "data-status": status,
+        sx: { display: "inline-flex", alignItems: "center", color: "text.disabled" },
+        children: [
+          /* @__PURE__ */ jsx(LockOutlinedIcon, { sx: { fontSize: 16 } }),
+          hidden
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "span",
+      "data-testid": testId,
+      "data-status": status,
+      sx: { display: "inline-flex", alignItems: "center" },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            sx: {
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              flex: "0 0 auto",
+              bgcolor: STATUS_COLOR[status]
+            }
+          }
+        ),
+        hidden
+      ]
+    }
+  );
+}
+SettingsStatusMarker.displayName = "SettingsStatusMarker";
+
+export {
+  SettingsStatusMarker
+};
+//# sourceMappingURL=chunk-BTOFGWM2.js.map

package/dist/chunk-BTOFGWM2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsStatusMarker.tsx"],"sourcesContent":["'use client';\n\nimport LockOutlinedIcon from '@mui/icons-material/LockOutlined';\nimport { Box } from '@mui/material';\nimport React from 'react';\n\nimport { SR_ONLY_SX, STATUS_COLOR } from './SettingsLayout.styles';\nimport type { SettingsNavStatus } from './SettingsLayout.types';\n\nexport interface SettingsStatusMarkerProps {\n  /** Which situation to draw. */\n  status: SettingsNavStatus;\n  /** What it means, in the host's language — the only carrier a screen reader gets. */\n  label?: string;\n  /** `data-testid` for the marker element. */\n  testId?: string;\n}\n\n/**\n * The situation marker beside a settings entry: a coloured dot, or a padlock\n * when the plan does not include the section.\n *\n * The label is rendered as visually-hidden text INSIDE the marker rather than as\n * an `aria-label` on it, so it lands in the accessible name of the row that\n * contains it. A row reading \"Endereço, ligado\" is one utterance; a decorative\n * dot with a title attribute beside it is two, and the second one is skipped.\n *\n * Colour alone never says which of the three states this is — that is the whole\n * reason `label` exists, and why a marker without one is a marker with no\n * meaning attached.\n */\nexport function SettingsStatusMarker({\n  status,\n  label,\n  testId,\n}: SettingsStatusMarkerProps): React.JSX.Element {\n  const hidden = label ? <Box component=\"span\" sx={SR_ONLY_SX}>{label}</Box> : null;\n\n  if (status === 'locked') {\n    return (\n      <Box\n        component=\"span\"\n        data-testid={testId}\n        data-status={status}\n        sx={{ display: 'inline-flex', alignItems: 'center', color: 'text.disabled' }}\n      >\n        <LockOutlinedIcon sx={{ fontSize: 16 }} />\n        {hidden}\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      component=\"span\"\n      data-testid={testId}\n      data-status={status}\n      sx={{ display: 'inline-flex', alignItems: 'center' }}\n    >\n      <Box\n        component=\"span\"\n        sx={{\n          width: 8,\n          height: 8,\n          borderRadius: '50%',\n          flex: '0 0 auto',\n          bgcolor: STATUS_COLOR[status],\n        }}\n      />\n      {hidden}\n    </Box>\n  );\n}\n\nSettingsStatusMarker.displayName = 'SettingsStatusMarker';\n"],"mappings":";;;;;;AAEA,OAAO,sBAAsB;AAC7B,SAAS,WAAW;AAiCK,cAInB,YAJmB;AALlB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAAiD;AAC/C,QAAM,SAAS,QAAQ,oBAAC,OAAI,WAAU,QAAO,IAAI,YAAa,iBAAM,IAAS;AAE7E,MAAI,WAAW,UAAU;AACvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAa;AAAA,QACb,eAAa;AAAA,QACb,IAAI,EAAE,SAAS,eAAe,YAAY,UAAU,OAAO,gBAAgB;AAAA,QAE3E;AAAA,8BAAC,oBAAiB,IAAI,EAAE,UAAU,GAAG,GAAG;AAAA,UACvC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa;AAAA,MACb,eAAa;AAAA,MACb,IAAI,EAAE,SAAS,eAAe,YAAY,SAAS;AAAA,MAEnD;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,MAAM;AAAA,cACN,SAAS,aAAa,MAAM;AAAA,YAC9B;AAAA;AAAA,QACF;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,qBAAqB,cAAc;","names":[]}