@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-UNM7KFDX.js

@@ -1,1281 +0,0 @@
-// src/components/layout/ContentToolbar/ContentToolbar.tsx
-import { Box, Button, Checkbox, Divider, Typography } from "@mui/material";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var selectionButtonSx = {
-  minWidth: 0,
-  height: "auto",
-  borderRadius: 0.5,
-  fontWeight: 600,
-  py: 0.5,
-  px: 1.5,
-  fontSize: "0.75rem",
-  textTransform: "none",
-  color: "text.primary"
-};
-function SelectionCluster({
-  hasSelection,
-  selectedCount,
-  selectAll,
-  clearSelection,
-  actions,
-  selectAllTestId,
-  clearAllTestId,
-  edgeAlign = false,
-  selectAllLabel,
-  selectAllText,
-  clearAllText
-}) {
-  const actionsSlot = actions !== void 0 && /* @__PURE__ */ jsx(Box, { sx: { ml: 0.5, display: "flex", flexShrink: 0, alignItems: "center" }, children: actions });
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      sx: {
-        display: "flex",
-        minWidth: 0,
-        // Mobile: don't grow, so the controls sit on the SAME line as the checkbox
-        // (no orphaned selection row). Desktop: grow to push controls right.
-        flex: { xs: "0 0 auto", md: 1 },
-        alignItems: "center",
-        gap: 1.5,
-        ml: edgeAlign ? -1.5 : 0
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "text",
-            size: "small",
-            color: "inherit",
-            onClick: selectAll,
-            "data-testid": selectAllTestId,
-            sx: { ...selectionButtonSx, display: { xs: "none", md: "inline-flex" } },
-            children: selectAllText
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            size: "small",
-            checked: hasSelection,
-            onChange: (event) => event.target.checked ? selectAll() : clearSelection(),
-            "data-testid": `${selectAllTestId}-checkbox`,
-            inputProps: { "aria-label": selectAllLabel },
-            sx: { p: 0.5, display: { xs: "inline-flex", md: "none" } }
-          }
-        ),
-        hasSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "text",
-              size: "small",
-              color: "inherit",
-              onClick: clearSelection,
-              "data-testid": clearAllTestId,
-              sx: selectionButtonSx,
-              children: clearAllText
-            }
-          ),
-          /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { height: 16, alignSelf: "center" } }),
-          /* @__PURE__ */ jsxs(
-            Typography,
-            {
-              component: "span",
-              "data-testid": "selected-count-indicator",
-              sx: { fontSize: "0.875rem", color: "text.secondary", whiteSpace: "nowrap", flexShrink: 0 },
-              children: [
-                selectedCount,
-                " ",
-                selectedCount === 1 ? "item" : "items",
-                " selected"
-              ]
-            }
-          ),
-          actionsSlot
-        ] }) : actionsSlot
-      ]
-    }
-  );
-}
-function BrowsingClusters({
-  leadingControls,
-  rightControls,
-  hasSelection,
-  edgeAlign
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    leadingControls !== void 0 && /* @__PURE__ */ jsx(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          flexGrow: 1,
-          minWidth: 0,
-          // The collapse ladder has a FLOOR — below roughly 400px even the
-          // fully-collapsed row does not fit, and its controls cannot shrink
-          // (they are flexShrink:0 so an over-packed row sheds instead of
-          // squeezing). Past that point this scrolls rather than letting them
-          // paint outside the toolbar, which is what a narrow phone did.
-          overflowX: "auto",
-          // No scrollbar gutter stealing height on the common case.
-          scrollbarWidth: "thin"
-        },
-        children: leadingControls
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          // Same single-line rule as the row itself: this cluster wrapping
-          // INTERNALLY buys a second line just as surely as the row wrapping
-          // does. It bit at exactly 900px, the `md` breakpoint where the "N de
-          // N" counter appears and pushes Exibir/Exportar over the edge.
-          flexWrap: leadingControls === void 0 ? "wrap" : "nowrap",
-          // Tight (5px) when browsing so the controls fit one line beside the
-          // checkbox; roomier (14px) in selection mode where they get their own row.
-          gap: hasSelection ? "14px" : "5px",
-          ml: "auto",
-          mr: edgeAlign ? -1.5 : 0,
-          "& > *": { flexShrink: 0 }
-        },
-        children: rightControls
-      }
-    )
-  ] });
-}
-function ContentToolbar({
-  hasSelection,
-  selectedCount,
-  selectAll,
-  clearSelection,
-  rightControls,
-  leadingControls,
-  actions,
-  selectAllTestId,
-  clearAllTestId,
-  edgeAlign = false,
-  exclusiveSelection = false,
-  selectAllLabel,
-  selectAllText,
-  clearAllText
-}) {
-  const showSelection = !exclusiveSelection || hasSelection;
-  const showControls = !exclusiveSelection || !hasSelection;
-  return (
-    // Two clusters on one line. They may wrap onto separate rows ONLY for a
-    // toolbar without `leadingControls` — one carrying search + filters is
-    // driven by a measured collapse ladder (see `useFilterOverflow`), and a
-    // wrap there is the ladder having failed: it would silently buy a second
-    // row instead of shedding a control into "Mais", which is the one outcome
-    // the ladder exists to prevent.
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 2,
-          flexWrap: leadingControls === void 0 ? "wrap" : "nowrap",
-          rowGap: 1
-        },
-        children: [
-          showSelection && /* @__PURE__ */ jsx(
-            SelectionCluster,
-            {
-              selectAllText,
-              clearAllText,
-              hasSelection,
-              selectedCount,
-              selectAll,
-              clearSelection,
-              actions,
-              selectAllTestId,
-              clearAllTestId,
-              selectAllLabel,
-              edgeAlign
-            }
-          ),
-          showControls && /* @__PURE__ */ jsx(
-            BrowsingClusters,
-            {
-              leadingControls,
-              rightControls,
-              hasSelection,
-              edgeAlign
-            }
-          )
-        ]
-      }
-    )
-  );
-}
-
-// src/components/layout/ContentToolbar/ViewSelector.tsx
-import CheckIcon from "@mui/icons-material/Check";
-import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import GridIcon from "@mui/icons-material/GridViewOutlined";
-import ListIcon from "@mui/icons-material/FormatListBulletedRounded";
-import { Box as Box2, Button as Button2, ListItemIcon, ListItemText, Menu, MenuItem, Slider } from "@mui/material";
-import { useState } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var VIEW_OPTIONS = [
-  { value: "grid", label: "Grid View", icon: GridIcon },
-  { value: "list", label: "List View", icon: ListIcon }
-];
-function ViewSelector({
-  viewMode,
-  onViewModeChange,
-  zoom,
-  onZoomChange,
-  cardSizeLabel
-}) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0];
-  const ActiveIcon = activeOption.icon;
-  return /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
-    viewMode === "grid" && /* @__PURE__ */ jsx2(Box2, { sx: { width: 96, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx2(
-      Slider,
-      {
-        "data-testid": "resize-card-slider",
-        "aria-label": cardSizeLabel,
-        value: zoom[0] ?? 0,
-        onChange: (_, value) => onZoomChange([value]),
-        min: 0,
-        max: 100,
-        step: 1,
-        size: "small"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs2(
-      Button2,
-      {
-        "data-testid": "view-mode-btn",
-        variant: "text",
-        size: "small",
-        color: "inherit",
-        "aria-label": activeOption.label,
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        onClick: (event) => setAnchorEl(event.currentTarget),
-        sx: { minWidth: 0, height: 32, px: 1, gap: 1, color: "text.secondary" },
-        children: [
-          /* @__PURE__ */ jsx2(ActiveIcon, { sx: { fontSize: 16 } }),
-          /* @__PURE__ */ jsx2(ChevronDownIcon, { sx: { fontSize: 14 } })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      Menu,
-      {
-        anchorEl,
-        open,
-        onClose: () => setAnchorEl(null),
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: { paper: { sx: { minWidth: 180 } } },
-        children: VIEW_OPTIONS.map((option) => {
-          const OptionIcon = option.icon;
-          const selected = viewMode === option.value;
-          return /* @__PURE__ */ jsxs2(
-            MenuItem,
-            {
-              "data-testid": `view-mode-${option.value}`,
-              onClick: () => {
-                onViewModeChange(option.value);
-                setAnchorEl(null);
-              },
-              sx: { gap: 1.5 },
-              children: [
-                /* @__PURE__ */ jsx2(ListItemText, { children: option.label }),
-                /* @__PURE__ */ jsx2(OptionIcon, { sx: { fontSize: 16, color: "text.secondary" } }),
-                /* @__PURE__ */ jsx2(ListItemIcon, { sx: { minWidth: "auto !important" }, children: /* @__PURE__ */ jsx2(CheckIcon, { sx: { fontSize: 16, color: selected ? "text.primary" : "transparent" } }) })
-              ]
-            },
-            option.value
-          );
-        })
-      }
-    )
-  ] });
-}
-
-// src/components/layout/ContentToolbar/SortByDropdown.tsx
-import CheckIcon2 from "@mui/icons-material/Check";
-import ChevronDownIcon2 from "@mui/icons-material/KeyboardArrowDown";
-import { Box as Box3, Button as Button3, Divider as Divider2, ListSubheader, Menu as Menu2, MenuItem as MenuItem2, Typography as Typography2 } from "@mui/material";
-import { useState as useState2 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function findActiveField(fields, activeField) {
-  return fields?.find((field) => field.value === activeField);
-}
-function findActiveOrder(fieldDef, activeOrder) {
-  const options = fieldDef?.orderOptions;
-  if (!options?.length) return void 0;
-  return options.find((option) => option.value === activeOrder) ?? options[0];
-}
-function resolveArrowDirection(option, indexInList) {
-  if (option?.arrowDirection) return option.arrowDirection;
-  return indexInList <= 0 ? "down" : "up";
-}
-function buildTriggerLabel(fieldDef, orderOption) {
-  if (!fieldDef) return "";
-  if (fieldDef.showOrderInTrigger === false || !orderOption) return fieldDef.label;
-  if (fieldDef.triggerLabelStyle === "range" && fieldDef.orderOptions?.length === 2) {
-    const other = fieldDef.orderOptions.find((option) => option.value !== orderOption.value);
-    if (other) return `${fieldDef.label} (${orderOption.label.toLowerCase()}-${other.label.toLowerCase()})`;
-  }
-  return `${fieldDef.label} (${orderOption.label.toLowerCase()})`;
-}
-function resolveTriggerParts(fieldDef, orderOption, orderOptions) {
-  const useRangeLabel = fieldDef?.triggerLabelStyle === "range" && orderOptions.length === 2;
-  const orderIndex = orderOptions.findIndex((option) => option.value === orderOption?.value);
-  const arrow = resolveArrowDirection(orderOption, orderIndex);
-  const arrowSuffix = orderOptions.length > 0 && !useRangeLabel ? ` ${arrow === "down" ? "\u2193" : "\u2191"}` : "";
-  const full = buildTriggerLabel(fieldDef, orderOption);
-  return { full, short: fieldDef?.label ?? full, arrowSuffix };
-}
-var sectionLabelSx = { px: 1, py: 0.75, fontSize: "0.75rem", fontWeight: 600, color: "text.primary", lineHeight: 1.5 };
-function SortCheck({ checked }) {
-  return /* @__PURE__ */ jsx3(Box3, { component: "span", sx: { display: "flex", width: 16, flexShrink: 0, alignItems: "center", justifyContent: "center" }, "aria-hidden": true, children: checked ? /* @__PURE__ */ jsx3(CheckIcon2, { sx: { fontSize: 14 } }) : null });
-}
-function SortRow({
-  value,
-  label,
-  checked,
-  onSelect
-}) {
-  return /* @__PURE__ */ jsxs3(MenuItem2, { "data-testid": `sort-${value}-option`, onClick: onSelect, sx: { gap: 1 }, children: [
-    /* @__PURE__ */ jsx3(SortCheck, { checked }),
-    /* @__PURE__ */ jsx3(Box3, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: label })
-  ] });
-}
-function SortMenu({
-  anchorEl,
-  open,
-  close,
-  orderOptions,
-  activeOrderValue,
-  onOrderSelect,
-  fields,
-  activeField,
-  onFieldSelect,
-  orderHeading,
-  sortHeading
-}) {
-  return /* @__PURE__ */ jsxs3(
-    Menu2,
-    {
-      anchorEl,
-      open,
-      onClose: close,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" },
-      slotProps: { paper: { sx: { minWidth: 180 } } },
-      children: [
-        orderOptions.length > 0 && [
-          /* @__PURE__ */ jsx3(ListSubheader, { sx: sectionLabelSx, children: orderHeading }, "order-label"),
-          ...orderOptions.map((option) => /* @__PURE__ */ jsx3(
-            SortRow,
-            {
-              value: option.value,
-              label: option.label,
-              checked: activeOrderValue === option.value,
-              onSelect: () => onOrderSelect(option.value)
-            },
-            `order-${option.value}`
-          )),
-          /* @__PURE__ */ jsx3(Divider2, {}, "order-divider")
-        ],
-        /* @__PURE__ */ jsx3(ListSubheader, { sx: sectionLabelSx, children: sortHeading }),
-        fields.map((field) => /* @__PURE__ */ jsx3(
-          SortRow,
-          {
-            value: field.value,
-            label: field.label,
-            checked: activeField === field.value,
-            onSelect: () => onFieldSelect(field.value)
-          },
-          field.value
-        ))
-      ]
-    }
-  );
-}
-function SortByDropdown({
-  fields,
-  activeField,
-  activeOrder,
-  onFieldChange,
-  onOrderChange,
-  orderHeading,
-  sortHeading,
-  triggerPrefix,
-  "data-testid": testId
-}) {
-  const [anchorEl, setAnchorEl] = useState2(null);
-  const open = Boolean(anchorEl);
-  const close = () => setAnchorEl(null);
-  const safeFields = fields ?? [];
-  const activeFieldDef = findActiveField(fields, activeField);
-  const orderOptions = activeFieldDef?.orderOptions ?? [];
-  const activeOrderOption = findActiveOrder(activeFieldDef, activeOrder);
-  const trigger = resolveTriggerParts(activeFieldDef, activeOrderOption, orderOptions);
-  function handleFieldChange(field) {
-    onFieldChange(field);
-    close();
-  }
-  return /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: "0.875rem" }, children: [
-    /* @__PURE__ */ jsx3(
-      Typography2,
-      {
-        component: "span",
-        sx: { display: { xs: "none", md: "inline" }, color: "text.secondary", fontSize: "0.875rem" },
-        children: triggerPrefix
-      }
-    ),
-    /* @__PURE__ */ jsxs3(
-      Button3,
-      {
-        variant: "text",
-        size: "small",
-        color: "inherit",
-        "data-testid": testId,
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        onClick: (event) => setAnchorEl(event.currentTarget),
-        sx: { minWidth: 0, height: 32, px: 1, gap: 0.5, color: "text.primary", textTransform: "none", fontWeight: 600 },
-        children: [
-          /* @__PURE__ */ jsx3(Box3, { component: "span", sx: { display: { xs: "none", md: "inline" } }, children: trigger.full }),
-          /* @__PURE__ */ jsx3(Box3, { component: "span", sx: { display: { xs: "inline", md: "none" } }, children: trigger.short }),
-          trigger.arrowSuffix,
-          /* @__PURE__ */ jsx3(ChevronDownIcon2, { sx: { fontSize: 14 } })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      SortMenu,
-      {
-        orderHeading,
-        sortHeading,
-        anchorEl,
-        open,
-        close,
-        orderOptions,
-        activeOrderValue: activeOrderOption?.value,
-        onOrderSelect: (value) => {
-          onOrderChange?.(value);
-          close();
-        },
-        fields: safeFields,
-        activeField,
-        onFieldSelect: handleFieldChange
-      }
-    )
-  ] });
-}
-
-// src/components/layout/ContentToolbar/MultiSelectDropdown.tsx
-import SearchIcon from "@mui/icons-material/Search";
-import {
-  Box as Box5,
-  Button as Button5,
-  Checkbox as Checkbox2,
-  Divider as Divider3,
-  InputAdornment,
-  ListSubheader as ListSubheader2,
-  Menu as Menu3,
-  MenuItem as MenuItem3,
-  TextField
-} from "@mui/material";
-import { useMemo, useState as useState3 } from "react";
-
-// src/components/layout/ContentToolbar/MultiSelectTriggers.tsx
-import CloseIcon from "@mui/icons-material/Close";
-import ChevronDownIcon3 from "@mui/icons-material/KeyboardArrowDown";
-import { Box as Box4, Button as Button4, Typography as Typography3 } from "@mui/material";
-import { useId } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function buildTriggerLabel2(selected, options, allLabel) {
-  const size = selected.size;
-  if (size === 0 || size === options.length) return allLabel;
-  const labelMap = new Map(options.map((option) => [option.value, option.label]));
-  const firstValue = selected.values().next().value;
-  const firstLabel = labelMap.get(firstValue) ?? allLabel;
-  if (size === 1) return firstLabel;
-  return `${firstLabel} (+${size - 1})`;
-}
-function InlineTrigger({ label, triggerLabel, open, onOpen, testId }) {
-  return /* @__PURE__ */ jsxs4(Box4, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: "0.875rem" }, children: [
-    /* @__PURE__ */ jsxs4(Typography3, { component: "span", sx: { color: "text.secondary", fontSize: "0.875rem" }, children: [
-      label,
-      ":"
-    ] }),
-    /* @__PURE__ */ jsxs4(
-      Button4,
-      {
-        variant: "text",
-        size: "small",
-        color: "inherit",
-        "data-testid": testId,
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        onClick: onOpen,
-        sx: { minWidth: 0, height: 32, px: 1, gap: 0.5, color: "text.primary", textTransform: "none", fontWeight: 600 },
-        children: [
-          triggerLabel,
-          /* @__PURE__ */ jsx4(ChevronDownIcon3, { sx: { fontSize: 14 } })
-        ]
-      }
-    )
-  ] });
-}
-function StackedTrigger({ label, triggerLabel, open, onOpen, testId }) {
-  const baseId = useId();
-  return /* @__PURE__ */ jsxs4(Box4, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
-    /* @__PURE__ */ jsx4(Typography3, { id: `${baseId}-label`, component: "label", sx: { fontSize: "0.75rem", fontWeight: 500, color: "text.secondary" }, children: label }),
-    /* @__PURE__ */ jsx4(
-      Button4,
-      {
-        variant: "outlined",
-        color: "inherit",
-        fullWidth: true,
-        "data-testid": testId,
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        "aria-labelledby": `${baseId}-label ${baseId}-value`,
-        onClick: onOpen,
-        endIcon: /* @__PURE__ */ jsx4(ChevronDownIcon3, { sx: { fontSize: 18, color: "text.secondary" } }),
-        sx: {
-          justifyContent: "space-between",
-          height: 40,
-          px: 1.5,
-          color: "text.primary",
-          textTransform: "none",
-          fontWeight: 400,
-          fontSize: "0.875rem",
-          borderColor: "divider",
-          bgcolor: "background.paper",
-          "&:hover": { borderColor: "text.primary", bgcolor: "background.paper" }
-        },
-        children: /* @__PURE__ */ jsx4(
-          Box4,
-          {
-            component: "span",
-            id: `${baseId}-value`,
-            sx: { flex: 1, minWidth: 0, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-            children: triggerLabel
-          }
-        )
-      }
-    )
-  ] });
-}
-function PillTrigger({
-  label,
-  open,
-  onOpen,
-  testId,
-  selectedCount,
-  onClear,
-  clearLabel
-}) {
-  const active = selectedCount > 0;
-  return /* @__PURE__ */ jsxs4(
-    Button4,
-    {
-      variant: "outlined",
-      color: "inherit",
-      size: "small",
-      "data-testid": testId,
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      onClick: onOpen,
-      startIcon: active && onClear ? /* @__PURE__ */ jsx4(
-        Box4,
-        {
-          component: "span",
-          role: "button",
-          tabIndex: 0,
-          "aria-label": clearLabel,
-          "data-testid": testId ? `${testId}-clear` : void 0,
-          onClick: (event) => {
-            event.stopPropagation();
-            onClear();
-          },
-          onKeyDown: (event) => {
-            if (event.key !== "Enter" && event.key !== " ") return;
-            event.preventDefault();
-            event.stopPropagation();
-            onClear();
-          },
-          sx: {
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            borderRadius: "50%",
-            cursor: "pointer",
-            color: "primary.main",
-            "&:hover": { bgcolor: "primary.main", color: "primary.contrastText" }
-          },
-          children: /* @__PURE__ */ jsx4(CloseIcon, { sx: { fontSize: 14 } })
-        }
-      ) : void 0,
-      endIcon: /* @__PURE__ */ jsx4(ChevronDownIcon3, { sx: { fontSize: 16 } }),
-      sx: {
-        borderRadius: 999,
-        height: 34,
-        px: 1.5,
-        color: "text.primary",
-        fontWeight: 600,
-        fontSize: "0.8125rem",
-        textTransform: "none",
-        borderColor: active ? "primary.main" : "divider",
-        bgcolor: active ? "action.selected" : "background.paper",
-        "&:hover": { borderColor: active ? "primary.main" : "text.primary", bgcolor: active ? "action.selected" : "action.hover" }
-      },
-      children: [
-        label,
-        active ? ` (${selectedCount})` : ""
-      ]
-    }
-  );
-}
-
-// src/components/layout/ContentToolbar/MultiSelectDropdown.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function CheckboxRow({
-  label,
-  count,
-  checked,
-  onToggle
-}) {
-  return /* @__PURE__ */ jsxs5(MenuItem3, { onClick: () => onToggle(!checked), sx: { gap: 1 }, children: [
-    /* @__PURE__ */ jsx5(Checkbox2, { checked, size: "small", disableRipple: true, sx: { p: 0, pointerEvents: "none" }, tabIndex: -1 }),
-    /* @__PURE__ */ jsxs5(Box5, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: [
-      label,
-      count != null && /* @__PURE__ */ jsxs5(Box5, { 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] = useState3(null);
-  const [query, setQuery] = useState3("");
-  const open = Boolean(anchorEl);
-  const stacked = layout === "stacked";
-  const close = () => {
-    setAnchorEl(null);
-    setQuery("");
-    onOpenChange?.(false);
-  };
-  const triggerLabel = buildTriggerLabel2(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__ */ jsx5(StackedTrigger, { label, ...triggerProps });
-    if (layout === "pill")
-      return /* @__PURE__ */ jsx5(
-        PillTrigger,
-        {
-          clearLabel,
-          label,
-          selectedCount: selected.size,
-          onClear,
-          ...triggerProps
-        }
-      );
-    return /* @__PURE__ */ jsx5(InlineTrigger, { label, ...triggerProps });
-  };
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    renderTrigger(),
-    /* @__PURE__ */ jsx5(
-      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__ */ jsx5(
-    Box5,
-    {
-      sx: { position: "sticky", top: 0, zIndex: 1, bgcolor: "background.paper", px: 1, py: 0.75 },
-      onKeyDown: (event) => event.stopPropagation(),
-      children: /* @__PURE__ */ jsx5(
-        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__ */ jsx5(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx5(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__ */ jsxs5(
-    Menu3,
-    {
-      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__ */ jsx5(MenuSearchField, { query, onQueryChange, placeholder: searchPlaceholder, testId }),
-        visibleOptions.length === 0 && showSearch ? /* @__PURE__ */ jsx5(MenuItem3, { disabled: true, "data-testid": testId ? `${testId}-no-results` : void 0, sx: { fontSize: "0.8125rem" }, children: noResultsLabel }) : visibleOptions.map((option) => /* @__PURE__ */ jsx5(
-          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__ */ jsx5(Divider3, {}, "extra-divider"),
-          /* @__PURE__ */ jsx5(ListSubheader2, { sx: { px: 1, py: 0.75, fontSize: "0.75rem", fontWeight: 600 }, children: extraOptionsHeading }, "extra-label"),
-          ...extraOptions.map((extra) => /* @__PURE__ */ jsx5(CheckboxRow, { label: extra.label, checked: extra.checked, onToggle: (next) => extra.onCheckedChange(next) }, extra.id))
-        ] : null,
-        /* @__PURE__ */ jsx5(
-          MenuClearFooter,
-          {
-            clearText,
-            clearDisabled,
-            onClear,
-            close,
-            testId
-          }
-        )
-      ]
-    }
-  );
-}
-function MenuClearFooter({
-  clearText,
-  clearDisabled,
-  onClear,
-  close,
-  testId
-}) {
-  return /* @__PURE__ */ jsx5(
-    Box5,
-    {
-      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__ */ jsx5(
-        Button5,
-        {
-          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
-        }
-      )
-    }
-  );
-}
-
-// src/components/layout/ContentToolbar/FilterTrigger.tsx
-import FilterIcon from "@mui/icons-material/FilterListRounded";
-import { Box as Box6, Button as Button6 } from "@mui/material";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function FilterTrigger({
-  open,
-  onOpenChange,
-  hasActiveFilters = false,
-  activeCount = 0,
-  label = "Filtros",
-  "data-testid": testId = "toggle-filters-btn"
-}) {
-  const active = activeCount > 0 || hasActiveFilters;
-  return /* @__PURE__ */ jsxs6(
-    Button6,
-    {
-      variant: "text",
-      size: "small",
-      color: "inherit",
-      "data-testid": testId,
-      "aria-expanded": open,
-      "aria-label": open ? "Close filters" : "Open filters",
-      onClick: () => onOpenChange(!open),
-      startIcon: /* @__PURE__ */ jsx6(FilterIcon, { sx: { fontSize: 16 } }),
-      sx: {
-        minWidth: 0,
-        height: 32,
-        px: 1,
-        gap: 0.25,
-        textTransform: "none",
-        fontWeight: 600,
-        color: active ? "primary.main" : "text.primary",
-        bgcolor: open ? "action.selected" : "transparent"
-      },
-      children: [
-        label,
-        activeCount > 0 && /* @__PURE__ */ jsx6(
-          Box6,
-          {
-            component: "span",
-            "data-testid": `${testId}-count`,
-            sx: {
-              ml: 0.5,
-              minWidth: 18,
-              height: 18,
-              px: 0.5,
-              borderRadius: 999,
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: "0.7rem",
-              fontWeight: 700,
-              lineHeight: 1,
-              bgcolor: "primary.main",
-              color: "primary.contrastText"
-            },
-            children: activeCount
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/components/layout/ContentToolbar/ColumnsMenu.tsx
-import ColumnsIcon from "@mui/icons-material/ViewColumnRounded";
-import { Box as Box7, Checkbox as Checkbox3, IconButton, ListSubheader as ListSubheader3, Menu as Menu4, MenuItem as MenuItem4 } from "@mui/material";
-import { useState as useState4 } from "react";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function ColumnRow({
-  option,
-  onToggle,
-  testId
-}) {
-  return /* @__PURE__ */ jsxs7(
-    MenuItem4,
-    {
-      "data-testid": testId,
-      onClick: () => onToggle(option.id, !option.visible),
-      disabled: option.locked,
-      sx: { gap: 1 },
-      children: [
-        /* @__PURE__ */ jsx7(
-          Checkbox3,
-          {
-            checked: option.visible,
-            size: "small",
-            disableRipple: true,
-            sx: { p: 0, pointerEvents: "none" },
-            tabIndex: -1
-          }
-        ),
-        /* @__PURE__ */ jsx7(Box7, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: option.label })
-      ]
-    }
-  );
-}
-function ColumnsMenu({
-  columns,
-  onToggle,
-  title = "Columns",
-  ariaLabel = "Toggle columns",
-  "data-testid": testId
-}) {
-  const [anchorEl, setAnchorEl] = useState4(null);
-  const open = Boolean(anchorEl);
-  const close = () => setAnchorEl(null);
-  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    /* @__PURE__ */ jsx7(
-      IconButton,
-      {
-        size: "small",
-        "data-testid": testId,
-        "aria-label": ariaLabel,
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        onClick: (event) => setAnchorEl(event.currentTarget),
-        sx: {
-          width: 32,
-          height: 32,
-          borderRadius: 1,
-          color: "text.secondary",
-          bgcolor: open ? "action.selected" : "transparent"
-        },
-        children: /* @__PURE__ */ jsx7(ColumnsIcon, { sx: { fontSize: 16 } })
-      }
-    ),
-    /* @__PURE__ */ jsxs7(
-      Menu4,
-      {
-        anchorEl,
-        open,
-        onClose: close,
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: { paper: { sx: { minWidth: 200 } } },
-        children: [
-          /* @__PURE__ */ jsx7(ListSubheader3, { sx: { px: 1.5, py: 0.75, fontSize: "0.75rem", fontWeight: 600, color: "text.primary", lineHeight: 1.5 }, children: title }),
-          columns.map((option) => /* @__PURE__ */ jsx7(
-            ColumnRow,
-            {
-              option,
-              onToggle,
-              testId: testId ? `${testId}-${option.id}` : void 0
-            },
-            option.id
-          ))
-        ]
-      }
-    )
-  ] });
-}
-
-// src/components/layout/ContentToolbar/SavedViewsMenu.tsx
-import CheckIcon3 from "@mui/icons-material/Check";
-import ChevronDownIcon4 from "@mui/icons-material/KeyboardArrowDown";
-import KebabIcon from "@mui/icons-material/MoreVert";
-import ViewIcon from "@mui/icons-material/Visibility";
-import { Box as Box8, Button as Button7, IconButton as IconButton2, Menu as Menu5, MenuItem as MenuItem5, Popover, Stack, Typography as Typography4 } from "@mui/material";
-import { useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-var RECENT_LIMIT = 5;
-function DefaultTag({ label, testId }) {
-  return /* @__PURE__ */ jsx8(
-    Box8,
-    {
-      component: "span",
-      "data-testid": testId,
-      sx: { px: 0.75, py: 0.125, borderRadius: 1, fontSize: "0.7rem", bgcolor: "primary.main", color: "primary.contrastText" },
-      children: label
-    }
-  );
-}
-function buildActions(view, handlers, labels) {
-  const actions = [{ id: "apply", label: labels.apply, run: () => handlers.apply(view) }];
-  if (!view.isOwner) return actions;
-  if (!view.isDefault) {
-    actions.push({ id: "default", label: labels.setDefault, run: () => handlers.onSetDefault(view) });
-  }
-  actions.push({ id: "pin", label: view.pinned ? labels.unpin : labels.pin, run: () => handlers.onTogglePin(view) });
-  actions.push({ id: "share", label: view.shared ? labels.unshare : labels.share, run: () => handlers.onToggleShare(view) });
-  actions.push({ id: "edit", label: labels.edit, run: () => handlers.onEdit(view) });
-  actions.push({ id: "delete", label: labels.remove, danger: true, run: () => handlers.onDelete(view) });
-  return actions;
-}
-function ViewKebab({
-  view,
-  handlers,
-  labels,
-  testIdPrefix
-}) {
-  const [anchorEl, setAnchorEl] = useState5(null);
-  const close = () => setAnchorEl(null);
-  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsx8(
-      IconButton2,
-      {
-        size: "small",
-        "aria-label": `${labels.apply} ${view.name}`,
-        "data-testid": `${testIdPrefix}-kebab-${view.id}`,
-        onClick: (event) => setAnchorEl(event.currentTarget),
-        sx: { width: 28, height: 28, color: "text.secondary" },
-        children: /* @__PURE__ */ jsx8(KebabIcon, { sx: { fontSize: 16 } })
-      }
-    ),
-    /* @__PURE__ */ jsx8(Menu5, { anchorEl, open: Boolean(anchorEl), onClose: close, children: buildActions(view, handlers, labels).map((action) => /* @__PURE__ */ jsx8(
-      MenuItem5,
-      {
-        "data-testid": `${testIdPrefix}-item-${action.id}-${view.id}`,
-        onClick: () => {
-          action.run();
-          close();
-        },
-        sx: action.danger ? { color: "error.main" } : void 0,
-        children: action.label
-      },
-      action.id
-    )) })
-  ] });
-}
-function ViewRow({
-  view,
-  handlers,
-  labels,
-  testIdPrefix
-}) {
-  return /* @__PURE__ */ jsxs8(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, "data-testid": `${testIdPrefix}-row-${view.id}`, children: [
-    /* @__PURE__ */ jsxs8(
-      Box8,
-      {
-        onClick: () => handlers.apply(view),
-        sx: { flex: 1, minWidth: 0, cursor: "pointer", display: "flex", alignItems: "center", gap: 0.75 },
-        "data-testid": `${testIdPrefix}-apply-${view.id}`,
-        children: [
-          /* @__PURE__ */ jsx8(Typography4, { component: "span", sx: { fontSize: "0.875rem" }, children: view.name }),
-          view.isDefault && /* @__PURE__ */ jsx8(DefaultTag, { label: labels.defaultTag, testId: `${testIdPrefix}-default-${view.id}` })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx8(ViewKebab, { view, handlers, labels, testIdPrefix })
-  ] });
-}
-function ViewSection({
-  title,
-  list,
-  sectionKey,
-  handlers,
-  labels,
-  testIdPrefix
-}) {
-  if (list.length === 0) return null;
-  return /* @__PURE__ */ jsxs8(Box8, { "data-testid": `${testIdPrefix}-section-${sectionKey}`, children: [
-    /* @__PURE__ */ jsx8(Typography4, { component: "span", sx: { fontSize: "0.75rem", fontWeight: 600, color: "text.secondary" }, children: title }),
-    /* @__PURE__ */ jsx8(Stack, { spacing: 0.5, sx: { mt: 0.5 }, children: list.map((view) => /* @__PURE__ */ jsx8(ViewRow, { view, handlers, labels, testIdPrefix }, view.id)) })
-  ] });
-}
-function FooterButton({
-  label,
-  testId,
-  onClick
-}) {
-  return /* @__PURE__ */ jsx8(Button7, { variant: "text", size: "small", color: "inherit", onClick, "data-testid": testId, sx: { textTransform: "none" }, children: label });
-}
-function PopoverBody({
-  views,
-  pinned,
-  recent,
-  activeViewName,
-  labels,
-  handlers,
-  onSelectMain,
-  onSaveCurrent,
-  onManageAll,
-  testIdPrefix
-}) {
-  return /* @__PURE__ */ jsxs8(Stack, { spacing: 1.5, sx: { p: 1.5, width: 300 }, "data-testid": `${testIdPrefix}-popover`, children: [
-    /* @__PURE__ */ jsxs8(MenuItem5, { "data-testid": `${testIdPrefix}-main`, selected: !activeViewName, onClick: onSelectMain, sx: { borderRadius: 1, px: 1, gap: 1 }, children: [
-      /* @__PURE__ */ jsx8(Box8, { component: "span", sx: { flex: 1, minWidth: 0, fontSize: "0.875rem" }, children: labels.mainView }),
-      !activeViewName && /* @__PURE__ */ jsx8(CheckIcon3, { sx: { fontSize: 16, color: "primary.main" } })
-    ] }),
-    views.length === 0 ? /* @__PURE__ */ jsx8(Typography4, { sx: { fontSize: "0.75rem", color: "text.secondary" }, children: labels.empty }) : /* @__PURE__ */ jsxs8(Fragment4, { children: [
-      /* @__PURE__ */ jsx8(ViewSection, { title: labels.pinned, list: pinned, sectionKey: "pinned", handlers, labels, testIdPrefix }),
-      /* @__PURE__ */ jsx8(ViewSection, { title: labels.recent, list: recent, sectionKey: "recent", handlers, labels, testIdPrefix })
-    ] }),
-    /* @__PURE__ */ jsx8(Box8, { sx: { borderTop: 1, borderColor: "divider", pt: 1 }, children: /* @__PURE__ */ jsxs8(Stack, { spacing: 0.5, sx: { alignItems: "flex-start" }, children: [
-      /* @__PURE__ */ jsx8(FooterButton, { label: labels.saveCurrent, testId: `${testIdPrefix}-save-current`, onClick: onSaveCurrent }),
-      /* @__PURE__ */ jsx8(FooterButton, { label: labels.manageAll, testId: `${testIdPrefix}-manage-all`, onClick: onManageAll })
-    ] }) })
-  ] });
-}
-function SavedViewsMenu({
-  views,
-  activeViewName,
-  onApply,
-  onSelectMain,
-  onSaveCurrent,
-  onEdit,
-  onDelete,
-  onSetDefault,
-  onTogglePin,
-  onToggleShare,
-  onManageAll,
-  labels: labelOverrides,
-  testIdPrefix = "views"
-}) {
-  const [anchorEl, setAnchorEl] = useState5(null);
-  const close = () => setAnchorEl(null);
-  const runAndClose = (action) => () => {
-    action();
-    close();
-  };
-  const labels = labelOverrides;
-  const pinned = views.filter((view) => view.pinned);
-  const recent = views.filter((view) => !view.pinned).slice(0, RECENT_LIMIT);
-  const handlers = {
-    apply: (view) => {
-      onApply(view);
-      close();
-    },
-    onEdit,
-    onDelete,
-    onSetDefault,
-    onTogglePin,
-    onToggleShare
-  };
-  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsxs8(
-      Button7,
-      {
-        variant: "text",
-        size: "small",
-        color: "inherit",
-        onClick: (event) => setAnchorEl(event.currentTarget),
-        "data-testid": `${testIdPrefix}-button`,
-        "aria-haspopup": "menu",
-        "aria-expanded": Boolean(anchorEl),
-        "aria-label": activeViewName ?? labels.mainView,
-        sx: { minWidth: 0, height: 32, px: 1, gap: 0.5, color: "text.primary", textTransform: "none", fontWeight: 600 },
-        children: [
-          /* @__PURE__ */ jsx8(ViewIcon, { sx: { fontSize: 18, display: { xs: "inline-flex", md: "none" } } }),
-          /* @__PURE__ */ jsx8(Box8, { component: "span", sx: { display: { xs: "none", md: "inline" } }, children: activeViewName ?? labels.mainView }),
-          /* @__PURE__ */ jsx8(ChevronDownIcon4, { sx: { fontSize: 14 } })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx8(
-      Popover,
-      {
-        open: Boolean(anchorEl),
-        anchorEl,
-        onClose: close,
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        children: /* @__PURE__ */ jsx8(
-          PopoverBody,
-          {
-            views,
-            pinned,
-            recent,
-            activeViewName,
-            labels,
-            handlers,
-            onSelectMain: runAndClose(onSelectMain),
-            onSaveCurrent: runAndClose(onSaveCurrent),
-            onManageAll: runAndClose(onManageAll),
-            testIdPrefix
-          }
-        )
-      }
-    )
-  ] });
-}
-
-export {
-  ContentToolbar,
-  ViewSelector,
-  SortByDropdown,
-  MultiSelectDropdown,
-  FilterTrigger,
-  ColumnsMenu,
-  SavedViewsMenu
-};
-//# sourceMappingURL=chunk-UNM7KFDX.js.map