@12-apps/ui 5.0.0 → 5.0.1

package/dist/chunk-LBYA4ZPT.js

@@ -0,0 +1,1592 @@
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-FD4W36WR.js";
+
+// src/components/form/CategorySelect/CategorySelect.tsx
+import { useEffect, useMemo as useMemo4, useRef as useRef2 } from "react";
+import { useMediaQuery, useTheme } from "@mui/material";
+
+// src/components/form/CategorySelect/category-tree.ts
+function foldText(text) {
+  return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+}
+function buildCategoryGroups(options) {
+  const roots = options.filter((option) => !option.parentId);
+  const rootIds = new Set(roots.map((root) => root.id));
+  const groups = new Map(
+    roots.map((root) => [root.id, { category: root, subcategories: [] }])
+  );
+  const orphans = [];
+  options.forEach((option) => {
+    if (!option.parentId) return;
+    const parent = groups.get(option.parentId);
+    if (parent) {
+      parent.subcategories.push(option);
+      return;
+    }
+    if (!rootIds.has(option.id)) orphans.push({ category: option, subcategories: [] });
+  });
+  return [...groups.values(), ...orphans];
+}
+function collectLeafIds(groups) {
+  return groups.flatMap(
+    (group) => group.subcategories.length > 0 ? group.subcategories.map((sub) => sub.id) : [group.category.id]
+  );
+}
+function leavesOf(group) {
+  return group.subcategories.length > 0 ? group.subcategories.map((sub) => sub.id) : [group.category.id];
+}
+function categoryCheckState(group, selected) {
+  const leaves = leavesOf(group);
+  const hits = leaves.filter((id) => selected.has(id)).length;
+  if (hits === 0) return "off";
+  return hits === leaves.length ? "on" : "partial";
+}
+function toggleCategoryLeaves(group, selected) {
+  const next = new Set(selected);
+  const leaves = leavesOf(group);
+  const turningOff = categoryCheckState(group, selected) === "on";
+  leaves.forEach((id) => turningOff ? next.delete(id) : next.add(id));
+  return next;
+}
+function toggleLeaf(id, selected) {
+  const next = new Set(selected);
+  if (!next.delete(id)) next.add(id);
+  return next;
+}
+function summarizeSelection(groups, selected) {
+  return groups.flatMap((group) => {
+    const state = categoryCheckState(group, selected);
+    if (state === "off") return [];
+    if (state === "on") {
+      return [{ id: group.category.id, label: group.category.name, whole: true }];
+    }
+    return group.subcategories.filter((sub) => selected.has(sub.id)).map((sub) => ({ id: sub.id, label: sub.name, whole: false }));
+  });
+}
+function removeChip(groups, chipId, selected) {
+  const next = new Set(selected);
+  const group = groups.find((candidate) => candidate.category.id === chipId);
+  if (group) {
+    leavesOf(group).forEach((id) => next.delete(id));
+    return next;
+  }
+  next.delete(chipId);
+  return next;
+}
+function filterCategoryGroups(groups, query) {
+  const needle = foldText(query.trim());
+  if (!needle) return groups;
+  return groups.flatMap((group) => {
+    if (foldText(group.category.name).includes(needle)) return [group];
+    const subcategories = group.subcategories.filter(
+      (sub) => foldText(sub.name).includes(needle)
+    );
+    return subcategories.length > 0 ? [{ category: group.category, subcategories }] : [];
+  });
+}
+function highlightSegments(text, query) {
+  const needle = foldText(query.trim());
+  if (!needle) return [{ text, match: false }];
+  const at = foldText(text).indexOf(needle);
+  if (at < 0) return [{ text, match: false }];
+  return [
+    { text: text.slice(0, at), match: false },
+    { text: text.slice(at, at + needle.length), match: true },
+    { text: text.slice(at + needle.length), match: false }
+  ].filter((segment) => segment.text.length > 0);
+}
+function flattenRows(groups, isExpanded) {
+  return groups.flatMap((group) => {
+    const head = { kind: "category", id: group.category.id };
+    if (!isExpanded(group.category.id)) return [head];
+    return [
+      head,
+      ...group.subcategories.map(
+        (sub) => ({
+          kind: "subcategory",
+          id: sub.id,
+          parentId: group.category.id
+        })
+      )
+    ];
+  });
+}
+
+// src/components/form/CategorySelect/CategoryPanel.tsx
+import { Box as Box6 } from "@mui/material";
+
+// src/components/form/CategorySelect/CategoryPanelFoot.tsx
+import { Box, Button } from "@mui/material";
+
+// src/components/form/CategorySelect/CategorySelect.styles.ts
+import { alpha } from "@mui/material";
+var METRICS = {
+  triggerHeight: 38,
+  triggerRadius: 10,
+  panelWidth: 340,
+  panelRadius: 14,
+  listMaxHeight: 290,
+  sheetListMaxHeight: 340,
+  rowHeight: 36,
+  sheetRowHeight: 42,
+  rowRadius: 8,
+  boxSize: 18,
+  chevronButton: 22,
+  footerButton: 32,
+  sheetFooterButton: 38,
+  /** Below this width the panel becomes a bottom sheet. */
+  sheetBreakpoint: 480
+};
+var accent = (theme) => ({
+  main: theme.palette.primary.main,
+  ink: theme.palette.primary.dark,
+  soft: alpha(theme.palette.primary.main, 0.08),
+  edge: alpha(theme.palette.primary.main, 0.28),
+  ring: alpha(theme.palette.primary.main, 0.15)
+});
+var triggerSx = (theme, selected, open) => {
+  const brand = accent(theme);
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    height: METRICS.triggerHeight,
+    padding: "0 10px 0 12px",
+    borderRadius: `${METRICS.triggerRadius}px`,
+    border: `1px solid ${open || selected ? brand.edge : theme.palette.divider}`,
+    background: selected ? brand.soft : theme.palette.background.paper,
+    color: selected ? brand.ink : theme.palette.text.primary,
+    font: "inherit",
+    fontSize: 13,
+    cursor: "pointer",
+    maxWidth: "100%",
+    transition: "border-color .12s, box-shadow .12s",
+    boxShadow: open ? `0 0 0 3px ${brand.ring}` : "none",
+    "&:hover": { borderColor: open || selected ? brand.edge : theme.palette.text.disabled },
+    "&:focus-visible": {
+      outline: "none",
+      borderColor: brand.main,
+      boxShadow: `0 0 0 3px ${alpha(brand.main, 0.18)}`
+    },
+    "&:disabled": { opacity: 0.5, cursor: "default" }
+  };
+};
+var triggerCountSx = (theme) => ({
+  fontWeight: 600,
+  fontSize: 11,
+  lineHeight: 1,
+  background: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  borderRadius: "999px",
+  padding: "3px 6px",
+  minWidth: 18,
+  textAlign: "center"
+});
+var triggerClearSx = {
+  width: 20,
+  height: 20,
+  flex: "0 0 auto",
+  border: 0,
+  background: "transparent",
+  borderRadius: "5px",
+  display: "grid",
+  placeItems: "center",
+  cursor: "pointer",
+  color: "inherit",
+  opacity: 0.6,
+  padding: 0,
+  "&:hover": { background: alpha("#000", 0.08), opacity: 1 }
+};
+var triggerChevronSx = (open) => ({
+  width: 14,
+  height: 14,
+  flex: "0 0 auto",
+  opacity: 0.55,
+  transition: "transform .15s",
+  transform: open ? "rotate(180deg)" : "none"
+});
+var panelSx = (theme) => ({
+  width: METRICS.panelWidth,
+  maxWidth: "100%",
+  background: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: `${METRICS.panelRadius}px`,
+  boxShadow: "0 1px 2px rgba(16,20,35,.05), 0 18px 40px -12px rgba(16,20,35,.28)",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden"
+});
+var sheetSx = (theme) => ({
+  width: "100%",
+  maxWidth: "none",
+  borderRadius: "18px 18px 0 0",
+  borderBottom: 0,
+  position: "relative",
+  paddingTop: "4px",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 7,
+    left: "50%",
+    transform: "translateX(-50%)",
+    width: 36,
+    height: 4,
+    borderRadius: "2px",
+    background: theme.palette.divider
+  }
+});
+var panelHeadSx = (theme, sheet) => ({
+  padding: sheet ? "18px 10px 8px" : "10px 10px 8px",
+  borderBottom: `1px solid ${theme.palette.divider}`
+});
+var pinnedSx = (theme) => ({
+  padding: "9px 10px",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  background: alpha(theme.palette.primary.main, 0.03)
+});
+var pinnedLabelSx = (theme) => ({
+  fontWeight: 600,
+  fontSize: 10,
+  lineHeight: 1,
+  letterSpacing: ".08em",
+  textTransform: "uppercase",
+  color: theme.palette.text.secondary,
+  marginBottom: "7px"
+});
+var chipWrapSx = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "5px",
+  maxHeight: 74,
+  overflow: "auto"
+};
+var chipSx = (theme) => {
+  const brand = accent(theme);
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "5px",
+    fontSize: 12,
+    background: brand.soft,
+    color: brand.ink,
+    border: `1px solid ${brand.edge}`,
+    borderRadius: "7px",
+    padding: "3px 4px 3px 8px",
+    "& button": {
+      border: 0,
+      background: "transparent",
+      color: "inherit",
+      cursor: "pointer",
+      padding: 0,
+      width: 16,
+      height: 16,
+      borderRadius: "4px",
+      display: "grid",
+      placeItems: "center",
+      opacity: 0.65,
+      fontSize: 13,
+      lineHeight: 1,
+      "&:hover": { background: alpha(theme.palette.primary.main, 0.16), opacity: 1 }
+    }
+  };
+};
+var listSx = (sheet) => ({
+  overflow: "auto",
+  maxHeight: sheet ? METRICS.sheetListMaxHeight : METRICS.listMaxHeight,
+  padding: "6px 6px 8px",
+  scrollPadding: "8px 0",
+  overscrollBehavior: "contain"
+});
+var rowSx = (theme, active, sheet) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  padding: "0 8px",
+  height: sheet ? METRICS.sheetRowHeight : METRICS.rowHeight,
+  borderRadius: `${METRICS.rowRadius}px`,
+  cursor: "pointer",
+  userSelect: "none",
+  position: "relative",
+  width: "100%",
+  border: 0,
+  textAlign: "left",
+  font: "inherit",
+  background: active ? alpha(theme.palette.primary.main, 0.08) : "transparent",
+  boxShadow: active ? `inset 0 0 0 1px ${alpha(theme.palette.primary.main, 0.3)}` : "none",
+  "&:hover": {
+    background: active ? alpha(theme.palette.primary.main, 0.08) : theme.palette.action.hover
+  },
+  "&:focus-visible": { outline: `2px solid ${theme.palette.primary.main}`, outlineOffset: 1 }
+});
+var rowNameSx = (theme, isCategory) => ({
+  flex: 1,
+  minWidth: 0,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  fontSize: 13.5,
+  fontWeight: isCategory ? 600 : 450,
+  color: isCategory ? theme.palette.text.primary : theme.palette.text.secondary
+});
+var rowMetaSx = (theme, selected) => ({
+  font: "500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace",
+  color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
+  fontWeight: selected ? 600 : 500,
+  flex: "0 0 auto"
+});
+var markSx = {
+  background: "#fff2a8",
+  color: "inherit",
+  borderRadius: "2px",
+  padding: "0 1px"
+};
+var chevronButtonSx = (theme, open) => ({
+  width: METRICS.chevronButton,
+  height: METRICS.chevronButton,
+  flex: "0 0 auto",
+  border: 0,
+  background: "transparent",
+  borderRadius: "6px",
+  display: "grid",
+  placeItems: "center",
+  cursor: "pointer",
+  color: theme.palette.text.secondary,
+  padding: 0,
+  "&:hover": { background: theme.palette.action.hover, color: theme.palette.text.primary },
+  "& svg": { width: 12, height: 12, transition: "transform .15s", transform: open ? "rotate(90deg)" : "none" }
+});
+var checkboxSx = (theme, state) => ({
+  width: METRICS.boxSize,
+  height: METRICS.boxSize,
+  flex: "0 0 auto",
+  border: `1.5px solid ${state === "off" ? theme.palette.divider : theme.palette.primary.main}`,
+  borderRadius: "5px",
+  background: state === "off" ? theme.palette.background.paper : theme.palette.primary.main,
+  display: "grid",
+  placeItems: "center",
+  transition: "background .1s, border-color .1s",
+  "& svg": { width: 12, height: 12, color: theme.palette.primary.contrastText }
+});
+var checkboxBarSx = (theme) => ({
+  width: 9,
+  height: 2,
+  background: theme.palette.primary.contrastText,
+  borderRadius: "1px"
+});
+var radioSx = (theme, on) => ({
+  width: METRICS.boxSize,
+  height: METRICS.boxSize,
+  flex: "0 0 auto",
+  borderRadius: "50%",
+  background: theme.palette.background.paper,
+  border: on ? `5.5px solid ${theme.palette.primary.main}` : `1.5px solid ${theme.palette.divider}`,
+  boxSizing: "border-box"
+});
+var sectionHeadSx = (theme) => ({
+  fontWeight: 600,
+  fontSize: 10,
+  lineHeight: 1,
+  letterSpacing: ".08em",
+  textTransform: "uppercase",
+  color: theme.palette.text.secondary,
+  padding: "9px 8px 6px"
+});
+var footerSx = (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "8px",
+  padding: "9px 10px",
+  borderTop: `1px solid ${theme.palette.divider}`,
+  background: theme.palette.action.hover
+});
+var emptySx = (theme) => ({
+  padding: "26px 18px",
+  textAlign: "center",
+  color: theme.palette.text.secondary,
+  "& strong": {
+    display: "block",
+    color: theme.palette.text.primary,
+    fontSize: 13.5,
+    marginBottom: "4px"
+  },
+  "& p": { margin: "0 0 12px", fontSize: 12.5, lineHeight: 1.5 }
+});
+var skeletonSx = {
+  height: METRICS.rowHeight,
+  margin: "4px 6px",
+  borderRadius: `${METRICS.rowRadius}px`
+};
+
+// src/components/form/CategorySelect/CategoryPanelFoot.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonSx = (sheet) => ({
+  height: sheet ? METRICS.sheetFooterButton : METRICS.footerButton,
+  padding: "0 13px",
+  borderRadius: "8px",
+  fontSize: 12.5,
+  fontWeight: 600,
+  textTransform: "none",
+  minWidth: 0
+});
+function CategoryMultiFoot({
+  count,
+  changed,
+  sheet,
+  onClear,
+  onApply,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: footerSx, "data-testid": `${dataTestId}-footer`, children: [
+    /* @__PURE__ */ jsxs(Box, { component: "span", sx: { fontSize: 12, color: "text.secondary" }, children: [
+      /* @__PURE__ */ jsx("strong", { children: count }),
+      " selecionada",
+      count === 1 ? "" : "s"
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: "6px" }, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          disabled: count === 0,
+          sx: buttonSx(sheet),
+          onClick: onClear,
+          "data-testid": `${dataTestId}-clear`,
+          children: "Limpar"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "contained",
+          sx: buttonSx(sheet),
+          onClick: onApply,
+          "data-testid": `${dataTestId}-apply`,
+          children: changed ? "Aplicar" : "Fechar"
+        }
+      )
+    ] })
+  ] });
+}
+function CategorySingleFoot({
+  sheet,
+  onCancel,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: footerSx, "data-testid": `${dataTestId}-footer`, children: [
+    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 12, color: "text.secondary" }, children: "Escolha uma categoria" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outlined",
+        sx: buttonSx(sheet),
+        onClick: onCancel,
+        "data-testid": `${dataTestId}-cancel`,
+        children: "Cancelar"
+      }
+    )
+  ] });
+}
+
+// src/components/form/CategorySelect/CategoryPanelHead.tsx
+import { Box as Box2, InputBase } from "@mui/material";
+
+// src/components/form/CategorySelect/CategoryIcons.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var STROKE = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function CheckGlyph() {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", strokeWidth: 3.2, "aria-hidden": "true", ...STROKE, children: /* @__PURE__ */ jsx2("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function DisclosureGlyph() {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", strokeWidth: 2.4, "aria-hidden": "true", ...STROKE, children: /* @__PURE__ */ jsx2("path", { d: "m9 5 7 7-7 7" }) });
+}
+function CaretGlyph({ style }) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", strokeWidth: 2.4, style, "aria-hidden": "true", ...STROKE, children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }) });
+}
+function SearchGlyph({ style }) {
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", strokeWidth: 2, style, "aria-hidden": "true", ...STROKE, children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsx2("path", { d: "m20 20-3.5-3.5" })
+  ] });
+}
+
+// src/components/form/CategorySelect/CategoryPanelHead.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var searchFieldSx = {
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  "& input": {
+    width: "100%",
+    height: 36,
+    padding: "0 30px 0 32px",
+    fontSize: 13,
+    border: "1px solid",
+    borderColor: "divider",
+    borderRadius: "9px",
+    background: "background.paper",
+    color: "text.primary",
+    "&:focus": {
+      outline: "none",
+      borderColor: "primary.main",
+      boxShadow: (theme) => `0 0 0 3px ${theme.palette.primary.main}26`
+    }
+  }
+};
+var clearButtonSx = {
+  position: "absolute",
+  right: 7,
+  width: 20,
+  height: 20,
+  border: 0,
+  background: "action.selected",
+  color: "text.secondary",
+  borderRadius: "50%",
+  display: "grid",
+  placeItems: "center",
+  cursor: "pointer",
+  fontSize: 12,
+  padding: 0,
+  lineHeight: 1
+};
+function CategoryPanelHead({
+  query,
+  placeholder,
+  sheet,
+  quickActions,
+  onQueryChange,
+  searchInputRef,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsxs3(Box2, { sx: (theme) => panelHeadSx(theme, sheet), children: [
+    /* @__PURE__ */ jsxs3(Box2, { sx: searchFieldSx, children: [
+      /* @__PURE__ */ jsx3(
+        SearchGlyph,
+        {
+          style: {
+            position: "absolute",
+            left: 10,
+            width: 15,
+            height: 15,
+            opacity: 0.55,
+            pointerEvents: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        InputBase,
+        {
+          inputRef: searchInputRef,
+          value: query,
+          placeholder,
+          autoComplete: "off",
+          inputProps: { "aria-label": placeholder, "data-testid": `${dataTestId}-search` },
+          onChange: (event) => onQueryChange(event.target.value),
+          sx: { width: "100%" }
+        }
+      ),
+      query.length > 0 && /* @__PURE__ */ jsx3(
+        Box2,
+        {
+          component: "button",
+          type: "button",
+          "aria-label": "Limpar busca",
+          "data-testid": `${dataTestId}-search-clear`,
+          sx: clearButtonSx,
+          onClick: () => onQueryChange(""),
+          children: "\xD7"
+        }
+      )
+    ] }),
+    quickActions && /* @__PURE__ */ jsx3(
+      Box2,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: "10px",
+          marginTop: "8px",
+          fontSize: 12
+        },
+        children: quickActions
+      }
+    )
+  ] });
+}
+function CategoryPinnedTray({
+  chips,
+  onRemove,
+  dataTestId
+}) {
+  if (chips.length === 0) return null;
+  return /* @__PURE__ */ jsxs3(Box2, { sx: pinnedSx, "data-testid": `${dataTestId}-pinned`, children: [
+    /* @__PURE__ */ jsxs3(Box2, { sx: pinnedLabelSx, children: [
+      "Selecionadas \xB7 ",
+      chips.length
+    ] }),
+    /* @__PURE__ */ jsx3(Box2, { sx: chipWrapSx, children: chips.map((chip) => /* @__PURE__ */ jsxs3(Box2, { component: "span", sx: chipSx, children: [
+      chip.label,
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Remover ${chip.label}`,
+          "data-testid": `${dataTestId}-unpin-${chip.id}`,
+          onClick: () => onRemove(chip.id),
+          children: "\xD7"
+        }
+      )
+    ] }, chip.id)) })
+  ] });
+}
+
+// src/components/form/CategorySelect/CategoryPanelList.tsx
+import { Box as Box4, Button as Button2, Skeleton } from "@mui/material";
+
+// src/components/form/CategorySelect/CategoryRows.tsx
+import { Box as Box3 } from "@mui/material";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function HighlightedName({
+  text,
+  query
+}) {
+  const segments = highlightSegments(text, query);
+  return /* @__PURE__ */ jsx4(Fragment, { children: segments.map(
+    (segment, index) => segment.match ? /* @__PURE__ */ jsx4(Box3, { component: "mark", sx: markSx, children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsx4("span", { children: segment.text }, `${segment.text}-${index}`)
+  ) });
+}
+function CategoryCheckbox({ state }) {
+  return /* @__PURE__ */ jsxs4(Box3, { sx: (theme) => checkboxSx(theme, state), "aria-hidden": "true", children: [
+    state === "on" && /* @__PURE__ */ jsx4(CheckGlyph, {}),
+    state === "partial" && /* @__PURE__ */ jsx4(Box3, { sx: checkboxBarSx })
+  ] });
+}
+function CategoryRadio({ on }) {
+  return /* @__PURE__ */ jsx4(Box3, { sx: (theme) => radioSx(theme, on), "aria-hidden": "true" });
+}
+function rowMeta(selectedCount, showCounts, count) {
+  if (selectedCount > 0) return { text: String(selectedCount), selected: true };
+  if (showCounts && count !== void 0) return { text: String(count), selected: false };
+  return null;
+}
+function CategoryHeadRow({
+  option,
+  query,
+  expanded,
+  active,
+  sheet,
+  checkState,
+  selectedCount,
+  showCounts,
+  onToggleExpanded,
+  onActivate,
+  dataTestId
+}) {
+  const meta = rowMeta(selectedCount, showCounts, option.count);
+  return /* @__PURE__ */ jsxs4(
+    Box3,
+    {
+      component: "div",
+      role: checkState ? "option" : "button",
+      "aria-selected": checkState ? checkState === "on" : void 0,
+      "aria-expanded": expanded,
+      "data-testid": `${dataTestId}-category-${option.id}`,
+      sx: (theme) => rowSx(theme, active, sheet),
+      onClick: onActivate,
+      children: [
+        /* @__PURE__ */ jsx4(
+          Box3,
+          {
+            component: "button",
+            type: "button",
+            tabIndex: -1,
+            "aria-label": `${expanded ? "Recolher" : "Expandir"} ${option.name}`,
+            "data-testid": `${dataTestId}-expand-${option.id}`,
+            sx: (theme) => chevronButtonSx(theme, expanded),
+            onClick: (event) => {
+              event.stopPropagation();
+              onToggleExpanded();
+            },
+            children: /* @__PURE__ */ jsx4(DisclosureGlyph, {})
+          }
+        ),
+        checkState ? /* @__PURE__ */ jsx4(CategoryCheckbox, { state: checkState }) : /* @__PURE__ */ jsx4(Box3, { sx: { width: METRICS.boxSize, flex: "0 0 auto" } }),
+        /* @__PURE__ */ jsx4(Box3, { component: "span", sx: (theme) => rowNameSx(theme, true), children: /* @__PURE__ */ jsx4(HighlightedName, { text: option.name, query }) }),
+        meta && /* @__PURE__ */ jsx4(Box3, { component: "span", sx: (theme) => rowMetaSx(theme, meta.selected), children: meta.text })
+      ]
+    }
+  );
+}
+function SubcategoryRow({
+  option,
+  query,
+  selected,
+  active,
+  sheet,
+  single,
+  showCounts,
+  onActivate,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsxs4(
+    Box3,
+    {
+      component: "div",
+      role: "option",
+      "aria-selected": selected,
+      "data-testid": `${dataTestId}-option-${option.id}`,
+      sx: (theme) => ({ ...rowSx(theme, active, sheet), paddingLeft: "14px" }),
+      onClick: onActivate,
+      children: [
+        /* @__PURE__ */ jsx4(Box3, { sx: { width: METRICS.chevronButton, flex: "0 0 auto" } }),
+        single ? /* @__PURE__ */ jsx4(CategoryRadio, { on: selected }) : /* @__PURE__ */ jsx4(CategoryCheckbox, { state: selected ? "on" : "off" }),
+        /* @__PURE__ */ jsx4(Box3, { component: "span", sx: (theme) => rowNameSx(theme, false), children: /* @__PURE__ */ jsx4(HighlightedName, { text: option.name, query }) }),
+        showCounts && option.count !== void 0 && /* @__PURE__ */ jsx4(Box3, { component: "span", sx: (theme) => rowMetaSx(theme, false), children: option.count })
+      ]
+    }
+  );
+}
+function CategorySectionHeading({
+  option,
+  query
+}) {
+  return /* @__PURE__ */ jsx4(Box3, { sx: sectionHeadSx, children: /* @__PURE__ */ jsx4(HighlightedName, { text: option.name, query }) });
+}
+
+// src/components/form/CategorySelect/CategoryPanelList.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var SENTENCE_CASE = { textTransform: "none" };
+var SKELETON_ROWS = 6;
+function LoadingRows() {
+  return /* @__PURE__ */ jsx5(Fragment2, { children: Array.from({ length: SKELETON_ROWS }, (_unused, index) => /* @__PURE__ */ jsx5(Skeleton, { variant: "rounded", sx: skeletonSx }, index)) });
+}
+function EmptyCatalogue({
+  onCreateCategory,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsxs5(Box4, { sx: emptySx, "data-testid": `${dataTestId}-empty-catalogue`, children: [
+    /* @__PURE__ */ jsx5("strong", { children: "Nenhuma categoria ainda" }),
+    /* @__PURE__ */ jsx5("p", { children: "Categorias organizam o card\xE1pio e os filtros da loja." }),
+    onCreateCategory && /* @__PURE__ */ jsx5(Button2, { variant: "contained", size: "small", sx: SENTENCE_CASE, onClick: () => onCreateCategory(), children: "Criar categoria" })
+  ] });
+}
+function NoResults({
+  query,
+  onClearQuery,
+  onCreateCategory,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsxs5(Box4, { sx: emptySx, "data-testid": `${dataTestId}-no-results`, children: [
+    /* @__PURE__ */ jsxs5("strong", { children: [
+      "Nada encontrado para \u201C",
+      query,
+      "\u201D"
+    ] }),
+    /* @__PURE__ */ jsx5("p", { children: "Tente outro termo ou verifique a grafia." }),
+    /* @__PURE__ */ jsxs5(Box4, { sx: { display: "flex", gap: "6px", justifyContent: "center" }, children: [
+      /* @__PURE__ */ jsx5(Button2, { variant: "outlined", size: "small", sx: SENTENCE_CASE, onClick: onClearQuery, children: "Limpar busca" }),
+      onCreateCategory && /* @__PURE__ */ jsxs5(
+        Button2,
+        {
+          variant: "contained",
+          size: "small",
+          sx: SENTENCE_CASE,
+          "data-testid": `${dataTestId}-create`,
+          onClick: () => onCreateCategory(query.trim()),
+          children: [
+            "Criar \u201C",
+            query.trim(),
+            "\u201D"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function CategoryGroupRows({
+  group,
+  props
+}) {
+  const { draft, query, single, allowParentSelection, rowIds, activeIndex, sheet } = props;
+  const categoryId = group.category.id;
+  const expanded = props.isExpanded(categoryId);
+  const asHeading = single && !allowParentSelection;
+  const selectedCount = group.subcategories.filter((sub) => draft.has(sub.id)).length;
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    asHeading ? /* @__PURE__ */ jsx5(CategorySectionHeading, { option: group.category, query }) : /* @__PURE__ */ jsx5(
+      CategoryHeadRow,
+      {
+        option: group.category,
+        query,
+        expanded,
+        active: rowIds[activeIndex] === categoryId,
+        sheet,
+        checkState: allowParentSelection ? categoryCheckState(group, draft) : void 0,
+        selectedCount,
+        showCounts: props.showCounts,
+        onToggleExpanded: () => props.onToggleExpanded(categoryId),
+        onActivate: () => props.onActivateCategory(group),
+        dataTestId: props.dataTestId
+      }
+    ),
+    (expanded || asHeading) && group.subcategories.map((sub) => /* @__PURE__ */ jsx5(
+      SubcategoryRow,
+      {
+        option: sub,
+        query,
+        selected: draft.has(sub.id),
+        active: rowIds[activeIndex] === sub.id,
+        sheet,
+        single,
+        showCounts: props.showCounts,
+        onActivate: () => props.onActivateSubcategory(sub.id),
+        dataTestId: props.dataTestId
+      },
+      sub.id
+    ))
+  ] });
+}
+function CategoryPanelList(props) {
+  const { groups, loading, query, listRef, sheet, dataTestId } = props;
+  const body = () => {
+    if (loading) return /* @__PURE__ */ jsx5(LoadingRows, {});
+    if (groups.length === 0 && query.trim().length > 0) {
+      return /* @__PURE__ */ jsx5(
+        NoResults,
+        {
+          query,
+          onClearQuery: props.onClearQuery,
+          onCreateCategory: props.onCreateCategory,
+          dataTestId
+        }
+      );
+    }
+    if (groups.length === 0) {
+      return /* @__PURE__ */ jsx5(
+        EmptyCatalogue,
+        {
+          onCreateCategory: props.onCreateCategory,
+          dataTestId
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx5(Fragment2, { children: groups.map((group) => /* @__PURE__ */ jsx5(CategoryGroupRows, { group, props }, group.category.id)) });
+  };
+  return /* @__PURE__ */ jsx5(
+    Box4,
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-multiselectable": props.single ? void 0 : true,
+      tabIndex: -1,
+      "data-testid": `${dataTestId}-list`,
+      sx: listSx(sheet),
+      children: body()
+    }
+  );
+}
+
+// src/components/form/CategorySelect/CategoryQuickActions.tsx
+import { Box as Box5 } from "@mui/material";
+import { useMemo } from "react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var linkButtonSx = {
+  background: "none",
+  border: 0,
+  padding: 0,
+  font: "inherit",
+  fontSize: 12,
+  color: "primary.main",
+  cursor: "pointer",
+  fontWeight: 550,
+  "&:hover": { textDecoration: "underline" },
+  "&:disabled": { color: "text.disabled", cursor: "default", textDecoration: "none" }
+};
+function CategoryQuickActions({
+  state,
+  dataTestId
+}) {
+  const allLeafIds = useMemo(() => collectLeafIds(state.allGroups), [state.allGroups]);
+  const everythingPicked = allLeafIds.length > 0 && state.draft.size >= allLeafIds.length;
+  const allExpanded = state.allGroups.length > 0 && state.allGroups.every((group) => state.isExpanded(group.category.id));
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(
+      Box5,
+      {
+        component: "button",
+        type: "button",
+        disabled: allLeafIds.length === 0,
+        "data-testid": `${dataTestId}-select-all`,
+        sx: linkButtonSx,
+        onClick: () => state.setDraft(everythingPicked ? /* @__PURE__ */ new Set() : new Set(allLeafIds)),
+        children: everythingPicked ? "Desmarcar tudo" : "Marcar tudo"
+      }
+    ),
+    /* @__PURE__ */ jsx6(Box5, { component: "span", sx: { color: "divider" }, children: "\xB7" }),
+    /* @__PURE__ */ jsx6(
+      Box5,
+      {
+        component: "button",
+        type: "button",
+        "data-testid": `${dataTestId}-expand-all`,
+        sx: linkButtonSx,
+        onClick: () => state.setAllExpanded(!allExpanded),
+        children: allExpanded ? "Recolher tudo" : "Expandir tudo"
+      }
+    )
+  ] });
+}
+
+// src/components/form/CategorySelect/CategoryPanel.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function CategoryPanel({
+  state,
+  chips,
+  rowIds,
+  changed,
+  single,
+  sheet,
+  loading,
+  showCounts,
+  allowParentSelection,
+  ariaLabel,
+  onKeyDown,
+  onActivateCategory,
+  onActivateSubcategory,
+  onApply,
+  onCancel,
+  onCreateCategory,
+  searchInputRef,
+  listRef,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsxs7(
+    Box6,
+    {
+      onKeyDown,
+      role: "dialog",
+      "aria-label": ariaLabel,
+      "data-testid": `${dataTestId}-panel`,
+      sx: (theme) => ({ ...panelSx(theme), ...sheet ? sheetSx(theme) : {} }),
+      children: [
+        /* @__PURE__ */ jsx7(
+          CategoryPanelHead,
+          {
+            query: state.query,
+            placeholder: single ? "Buscar categoria\u2026" : "Buscar categoria ou subcategoria",
+            sheet,
+            quickActions: single ? void 0 : /* @__PURE__ */ jsx7(CategoryQuickActions, { state, dataTestId }),
+            onQueryChange: state.setQuery,
+            searchInputRef,
+            dataTestId
+          }
+        ),
+        !single && !loading && /* @__PURE__ */ jsx7(PinnedTray, { state, chips, dataTestId }),
+        /* @__PURE__ */ jsx7(
+          CategoryPanelList,
+          {
+            groups: state.visibleGroups,
+            query: state.query,
+            draft: state.draft,
+            rowIds,
+            activeIndex: state.activeIndex,
+            sheet,
+            single,
+            loading,
+            showCounts,
+            allowParentSelection,
+            isExpanded: state.isExpanded,
+            onToggleExpanded: state.toggleExpanded,
+            onActivateCategory,
+            onActivateSubcategory,
+            onClearQuery: () => state.setQuery(""),
+            onCreateCategory,
+            listRef,
+            dataTestId
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          PanelFooter,
+          {
+            state,
+            changed,
+            single,
+            sheet,
+            onApply,
+            onCancel,
+            dataTestId
+          }
+        )
+      ]
+    }
+  );
+}
+function PinnedTray({
+  state,
+  chips,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsx7(
+    CategoryPinnedTray,
+    {
+      chips,
+      onRemove: (chipId) => state.setDraft(removeChip(state.allGroups, chipId, state.draft)),
+      dataTestId
+    }
+  );
+}
+function PanelFooter({
+  state,
+  changed,
+  single,
+  sheet,
+  onApply,
+  onCancel,
+  dataTestId
+}) {
+  if (single) {
+    return /* @__PURE__ */ jsx7(CategorySingleFoot, { sheet, onCancel, dataTestId });
+  }
+  return /* @__PURE__ */ jsx7(
+    CategoryMultiFoot,
+    {
+      count: state.draft.size,
+      changed,
+      sheet,
+      onClear: () => state.setDraft(/* @__PURE__ */ new Set()),
+      onApply,
+      dataTestId
+    }
+  );
+}
+
+// src/components/form/CategorySelect/CategoryPanelSurface.tsx
+import { Drawer, Popover } from "@mui/material";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var BARE_PAPER = { background: "transparent", boxShadow: "none" };
+function CategoryPanelSurface({
+  open,
+  sheet,
+  anchorEl,
+  onClose,
+  children
+}) {
+  if (sheet) {
+    return /* @__PURE__ */ jsx8(
+      Drawer,
+      {
+        anchor: "bottom",
+        open,
+        onClose,
+        slotProps: { paper: { sx: BARE_PAPER } },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx8(
+    Popover,
+    {
+      open,
+      anchorEl,
+      onClose,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      marginThreshold: 8,
+      slotProps: { paper: { sx: { ...BARE_PAPER, marginTop: "6px", overflow: "visible" } } },
+      children
+    }
+  );
+}
+
+// src/components/form/CategorySelect/CategoryTrigger.tsx
+import { Box as Box7 } from "@mui/material";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function CategoryTrigger({
+  placeholder,
+  selectionLabel,
+  count,
+  open,
+  disabled,
+  fullWidth,
+  onOpen,
+  onClear,
+  triggerRef,
+  dataTestId
+}) {
+  const hasSelection = Boolean(selectionLabel) || (count ?? 0) > 0;
+  return /* @__PURE__ */ jsxs8(
+    Box7,
+    {
+      component: "button",
+      type: "button",
+      ref: triggerRef,
+      disabled,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "data-testid": `${dataTestId}-trigger`,
+      onClick: onOpen,
+      sx: (theme) => ({
+        ...triggerSx(theme, hasSelection, open),
+        width: fullWidth ? "100%" : "auto"
+      }),
+      children: [
+        /* @__PURE__ */ jsx9(
+          Box7,
+          {
+            component: "span",
+            sx: {
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              maxWidth: 190,
+              flex: fullWidth ? 1 : "0 1 auto",
+              textAlign: "left"
+            },
+            children: selectionLabel ?? placeholder
+          }
+        ),
+        count !== void 0 && count > 0 && /* @__PURE__ */ jsx9(Box7, { component: "span", sx: triggerCountSx, "data-testid": `${dataTestId}-count`, children: count }),
+        hasSelection && onClear && /* @__PURE__ */ jsx9(
+          Box7,
+          {
+            component: "span",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Limpar sele\xE7\xE3o",
+            "data-testid": `${dataTestId}-clear-trigger`,
+            sx: triggerClearSx,
+            onClick: (event) => {
+              event.stopPropagation();
+              onClear();
+            },
+            onKeyDown: (event) => {
+              if (event.key !== "Enter" && event.key !== " ") return;
+              event.preventDefault();
+              event.stopPropagation();
+              onClear();
+            },
+            children: "\xD7"
+          }
+        ),
+        /* @__PURE__ */ jsx9(CaretGlyph, { style: triggerChevronSx(open) })
+      ]
+    }
+  );
+}
+
+// src/components/form/CategorySelect/useCategoryCommit.ts
+import { useCallback, useMemo as useMemo2 } from "react";
+function useCategoryCommit({
+  props,
+  state,
+  single,
+  allowParentSelection
+}) {
+  const { closePanel, triggerRef, toggleCategory, toggleSubcategory, toggleExpanded } = state;
+  const closeAndRefocus = useCallback(() => {
+    closePanel();
+    triggerRef.current?.focus();
+  }, [closePanel, triggerRef]);
+  const commit = useCallback(() => {
+    if (props.mode === "single") return;
+    props.onChange([...state.draft]);
+    closeAndRefocus();
+  }, [props, state.draft, closeAndRefocus]);
+  const pick = useCallback(
+    (id) => {
+      if (props.mode !== "single") return;
+      props.onChange(id);
+      closeAndRefocus();
+    },
+    [props, closeAndRefocus]
+  );
+  const clearSelection = useCallback(() => {
+    if (props.mode === "single") props.onChange(null);
+    else props.onChange([]);
+  }, [props]);
+  const activateCategory = useCallback(
+    (group) => {
+      if (allowParentSelection && single) {
+        pick(group.category.id);
+        return;
+      }
+      if (allowParentSelection) {
+        toggleCategory(group);
+        return;
+      }
+      toggleExpanded(group.category.id);
+    },
+    [allowParentSelection, single, pick, toggleCategory, toggleExpanded]
+  );
+  const activateSubcategory = useCallback(
+    (id) => {
+      if (single) pick(id);
+      else toggleSubcategory(id);
+    },
+    [single, pick, toggleSubcategory]
+  );
+  return useMemo2(
+    () => ({
+      commit,
+      pick,
+      cancel: closeAndRefocus,
+      clearSelection,
+      activateCategory,
+      activateSubcategory
+    }),
+    [commit, pick, closeAndRefocus, clearSelection, activateCategory, activateSubcategory]
+  );
+}
+
+// src/components/form/CategorySelect/useCategoryKeyHandler.ts
+import { useCallback as useCallback2 } from "react";
+
+// src/components/form/CategorySelect/category-keyboard.ts
+function activeRow(context) {
+  return context.activeIndex >= 0 ? context.rows[context.activeIndex] : void 0;
+}
+function groupOf(context, id) {
+  return context.groups.find((group) => group.category.id === id);
+}
+function moveCursor(context, delta) {
+  const { rows, activeIndex } = context;
+  if (rows.length === 0) return;
+  const next = delta > 0 ? Math.min(rows.length - 1, activeIndex + 1) : Math.max(0, activeIndex - 1);
+  context.setActiveIndex(next);
+}
+function handleRight(context) {
+  const row = activeRow(context);
+  if (row?.kind === "category") context.expand(row.id);
+}
+function handleLeft(context) {
+  const row = activeRow(context);
+  if (!row) return;
+  if (row.kind === "category") {
+    context.collapse(row.id);
+    return;
+  }
+  if (!row.parentId) return;
+  context.collapse(row.parentId);
+  const parentIndex = context.rows.findIndex(
+    (candidate) => candidate.kind === "category" && candidate.id === row.parentId
+  );
+  if (parentIndex >= 0) context.setActiveIndex(parentIndex);
+}
+function handleSpace(context) {
+  const row = activeRow(context);
+  if (!row) return;
+  if (context.single) {
+    context.pick(row.id);
+    return;
+  }
+  if (row.kind === "subcategory") {
+    context.toggleSubcategory(row.id);
+    return;
+  }
+  const group = groupOf(context, row.id);
+  if (!group) return;
+  if (context.allowParentSelection) context.toggleCategory(group);
+  else context.toggleExpanded(row.id);
+}
+function handleEnter(context) {
+  const row = activeRow(context);
+  if (context.single) {
+    if (row) context.pick(row.id);
+    return;
+  }
+  context.commit();
+}
+var HANDLERS = {
+  ArrowDown: (context) => moveCursor(context, 1),
+  ArrowUp: (context) => moveCursor(context, -1),
+  ArrowRight: handleRight,
+  ArrowLeft: handleLeft,
+  " ": handleSpace,
+  Enter: handleEnter,
+  Escape: (context) => context.cancel()
+};
+var TEXT_ENTRY_KEYS = /* @__PURE__ */ new Set([" ", "ArrowLeft", "ArrowRight"]);
+function handleCategoryKeyDown(key, editingSearchText, context) {
+  if (editingSearchText && TEXT_ENTRY_KEYS.has(key)) return false;
+  const handler = HANDLERS[key];
+  if (!handler) return false;
+  handler(context);
+  return true;
+}
+
+// src/components/form/CategorySelect/useCategoryKeyHandler.ts
+function useCategoryKeyHandler({
+  state,
+  single,
+  allowParentSelection,
+  actions
+}) {
+  const { isExpanded, toggleExpanded } = state;
+  const expand = useCallback2(
+    (id) => {
+      if (!isExpanded(id)) toggleExpanded(id);
+    },
+    [isExpanded, toggleExpanded]
+  );
+  const collapse = useCallback2(
+    (id) => {
+      if (isExpanded(id)) toggleExpanded(id);
+    },
+    [isExpanded, toggleExpanded]
+  );
+  return useCallback2(
+    (event) => {
+      const inSearchField = event.target?.tagName === "INPUT";
+      const editingText = inSearchField && state.query.length > 0;
+      const consumed = handleCategoryKeyDown(event.key, editingText, {
+        rows: state.rows,
+        activeIndex: state.activeIndex,
+        groups: state.visibleGroups,
+        single,
+        allowParentSelection,
+        setActiveIndex: state.setActiveIndex,
+        toggleExpanded,
+        expand,
+        collapse,
+        toggleCategory: state.toggleCategory,
+        toggleSubcategory: state.toggleSubcategory,
+        commit: actions.commit,
+        cancel: actions.cancel,
+        pick: actions.pick
+      });
+      if (consumed) event.preventDefault();
+    },
+    [state, single, allowParentSelection, toggleExpanded, expand, collapse, actions]
+  );
+}
+
+// src/components/form/CategorySelect/useCategorySelect.ts
+import { useCallback as useCallback3, useMemo as useMemo3, useRef, useState } from "react";
+function useExpandedCategories(allGroups, searching) {
+  const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
+  const isExpanded = useCallback3(
+    (categoryId) => searching || expanded.has(categoryId),
+    [searching, expanded]
+  );
+  const toggleExpanded = useCallback3((categoryId) => {
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (!next.delete(categoryId)) next.add(categoryId);
+      return next;
+    });
+  }, []);
+  const setAllExpanded = useCallback3(
+    (shouldExpand) => {
+      setExpanded(shouldExpand ? new Set(allGroups.map((g) => g.category.id)) : /* @__PURE__ */ new Set());
+    },
+    [allGroups]
+  );
+  const expandAll = useCallback3((groups) => {
+    setExpanded(new Set(groups.map((group) => group.category.id)));
+  }, []);
+  return { isExpanded, toggleExpanded, setAllExpanded, expandAll };
+}
+function useDraftSelection(initial) {
+  const [draft, setDraftState] = useState(() => new Set(initial));
+  const toggleCategory = useCallback3((group) => {
+    setDraftState((current) => toggleCategoryLeaves(group, current));
+  }, []);
+  const toggleSubcategory = useCallback3((id) => {
+    setDraftState((current) => toggleLeaf(id, current));
+  }, []);
+  const setDraft = useCallback3((next) => setDraftState(next), []);
+  return { draft, setDraft, toggleCategory, toggleSubcategory };
+}
+function useCategorySelect({
+  options,
+  selected
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQueryState] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const triggerRef = useRef(null);
+  const allGroups = useMemo3(() => buildCategoryGroups(options), [options]);
+  const visibleGroups = useMemo3(
+    () => filterCategoryGroups(allGroups, query),
+    [allGroups, query]
+  );
+  const expansion = useExpandedCategories(allGroups, query.trim().length > 0);
+  const selection = useDraftSelection(selected);
+  const rows = useMemo3(
+    () => flattenRows(visibleGroups, expansion.isExpanded),
+    [visibleGroups, expansion.isExpanded]
+  );
+  const openPanel = useCallback3(() => {
+    selection.setDraft(new Set(selected));
+    expansion.expandAll(allGroups);
+    setQueryState("");
+    setActiveIndex(-1);
+    setOpen(true);
+  }, [selected, allGroups, selection, expansion]);
+  const closePanel = useCallback3(() => {
+    setOpen(false);
+    setQueryState("");
+    setActiveIndex(-1);
+  }, []);
+  const setQuery = useCallback3((next) => {
+    setQueryState(next);
+    setActiveIndex(-1);
+  }, []);
+  return {
+    ...expansion,
+    ...selection,
+    open,
+    query,
+    visibleGroups,
+    allGroups,
+    rows,
+    activeIndex,
+    setQuery,
+    setActiveIndex,
+    openPanel,
+    closePanel,
+    triggerRef
+  };
+}
+
+// src/components/form/CategorySelect/CategorySelect.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function appliedIds(props) {
+  if (props.mode === "single") return props.value ? [props.value] : [];
+  return props.value;
+}
+function draftChanged(draft, applied) {
+  return draft.size !== applied.length || applied.some((id) => !draft.has(id));
+}
+function singleLabel(groups, value) {
+  if (!value) return void 0;
+  const asCategory = groups.find((group) => group.category.id === value);
+  if (asCategory) return asCategory.category.name;
+  const owner = groups.find((group) => group.subcategories.some((sub2) => sub2.id === value));
+  const sub = owner?.subcategories.find((candidate) => candidate.id === value);
+  return sub && owner ? `${owner.category.name} \u203A ${sub.name}` : void 0;
+}
+function resolveConfig(props) {
+  const single = props.mode === "single";
+  return {
+    single,
+    placeholder: props.placeholder ?? (single ? "Mover para\u2026" : "Categoria"),
+    disabled: props.disabled ?? false,
+    loading: props.loading ?? false,
+    fullWidth: props.fullWidth ?? false,
+    showCounts: props.showCounts ?? false,
+    allowParentSelection: props.allowParentSelection ?? false,
+    dataTestId: props.dataTestId ?? "category-select"
+  };
+}
+function usePanelFocus(open, activeIndex, searchInputRef, listRef) {
+  useEffect(() => {
+    if (!open) return void 0;
+    const frame = requestAnimationFrame(() => searchInputRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [open, searchInputRef]);
+  useEffect(() => {
+    if (activeIndex < 0) return;
+    const rows = listRef.current?.querySelectorAll('[role="option"], [role="button"]');
+    rows?.[activeIndex]?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, listRef]);
+}
+function CategorySelect(props) {
+  const { options, label, error, onCreateCategory } = props;
+  const {
+    single,
+    placeholder,
+    disabled,
+    loading,
+    fullWidth,
+    showCounts,
+    allowParentSelection,
+    dataTestId
+  } = resolveConfig(props);
+  const theme = useTheme();
+  const sheet = useMediaQuery(theme.breakpoints.down(METRICS.sheetBreakpoint));
+  const applied = appliedIds(props);
+  const state = useCategorySelect({ options, selected: applied });
+  const searchInputRef = useRef2(null);
+  const listRef = useRef2(null);
+  usePanelFocus(state.open, state.activeIndex, searchInputRef, listRef);
+  const chips = useMemo4(
+    () => summarizeSelection(state.allGroups, state.draft),
+    [state.allGroups, state.draft]
+  );
+  const rowIds = useMemo4(() => state.rows.map((row) => row.id), [state.rows]);
+  const actions = useCategoryCommit({ props, state, single, allowParentSelection });
+  const onKeyDown = useCategoryKeyHandler({ state, single, allowParentSelection, actions });
+  return /* @__PURE__ */ jsxs9(FormControl, { fullWidth, error: Boolean(error), children: [
+    label && /* @__PURE__ */ jsx10(FormLabel, { error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx10(
+      CategoryTrigger,
+      {
+        placeholder,
+        selectionLabel: props.mode === "single" ? singleLabel(state.allGroups, props.value) : void 0,
+        count: single ? void 0 : applied.length,
+        open: state.open,
+        disabled,
+        fullWidth,
+        onOpen: state.openPanel,
+        onClear: applied.length > 0 ? actions.clearSelection : void 0,
+        triggerRef: state.triggerRef,
+        dataTestId
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      CategoryPanelSurface,
+      {
+        open: state.open,
+        sheet,
+        anchorEl: state.triggerRef.current,
+        onClose: actions.cancel,
+        children: /* @__PURE__ */ jsx10(
+          CategoryPanel,
+          {
+            state,
+            chips,
+            rowIds,
+            changed: draftChanged(state.draft, applied),
+            single,
+            sheet,
+            loading,
+            showCounts,
+            allowParentSelection,
+            ariaLabel: label ?? placeholder,
+            onKeyDown,
+            onActivateCategory: actions.activateCategory,
+            onActivateSubcategory: actions.activateSubcategory,
+            onApply: actions.commit,
+            onCancel: actions.cancel,
+            onCreateCategory,
+            searchInputRef,
+            listRef,
+            dataTestId
+          }
+        )
+      }
+    ),
+    error && /* @__PURE__ */ jsx10(FormMessage, { error: true, dataTestId: `${dataTestId}-message`, children: error })
+  ] });
+}
+
+export {
+  foldText,
+  buildCategoryGroups,
+  collectLeafIds,
+  leavesOf,
+  categoryCheckState,
+  summarizeSelection,
+  filterCategoryGroups,
+  CategorySelect
+};
+//# sourceMappingURL=chunk-LBYA4ZPT.js.map