@12-apps/ui 6.10.1 → 6.11.1

package/dist/chunk-HPJJYCNX.js

@@ -0,0 +1,59 @@
+import {
+  Box
+} from "./chunk-34DQAXL2.js";
+
+// src/components/data-display/DataViews/data-views-glyphs.tsx
+import { jsx } from "react/jsx-runtime";
+var FRAME = { width: 32, height: 24, display: "flex" };
+function barColor(active) {
+  return active ? "primary.main" : "action.disabled";
+}
+function RowsGlyph({ gap, active }) {
+  return /* @__PURE__ */ jsx(Box, { sx: { ...FRAME, flexDirection: "column", justifyContent: "center", gap: `${gap}px` }, children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(Box, { sx: { height: 2, width: "100%", borderRadius: 1, bgcolor: barColor(active) } }, index)) });
+}
+function TableGlyph({ active }) {
+  return /* @__PURE__ */ jsx(Box, { sx: { ...FRAME, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "2px" }, children: Array.from({ length: 9 }).map((_, index) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: { borderRadius: 0.5, bgcolor: barColor(active), opacity: index < 3 ? 1 : 0.55 }
+    },
+    index
+  )) });
+}
+function ListGlyph({ active }) {
+  return /* @__PURE__ */ jsx(Box, { sx: { ...FRAME, flexDirection: "column", justifyContent: "center", gap: "4px" }, children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        height: 5,
+        width: "100%",
+        borderRadius: 0.5,
+        bgcolor: barColor(active),
+        opacity: 0.7,
+        display: "flex",
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */ jsx(Box, { sx: { ml: "2px", height: 3, width: 3, borderRadius: "50%", bgcolor: "background.paper" } })
+    },
+    index
+  )) });
+}
+function GridGlyph({ n = 3, active }) {
+  return /* @__PURE__ */ jsx(Box, { sx: { ...FRAME, display: "grid", gridTemplateColumns: `repeat(${n}, 1fr)`, gap: "2px" }, children: Array.from({ length: n * 2 }).map((_, index) => /* @__PURE__ */ jsx(Box, { sx: { borderRadius: 0.5, bgcolor: barColor(active) } }, index)) });
+}
+function ColumnsGlyph({ n, active }) {
+  return /* @__PURE__ */ jsx(Box, { sx: { ...FRAME, gap: "2px" }, children: Array.from({ length: n }).map((_, column) => /* @__PURE__ */ jsx(Box, { sx: { flex: 1, borderRadius: 0.5, bgcolor: barColor(active) } }, column)) });
+}
+function BoardGlyph({ active }) {
+  return /* @__PURE__ */ jsx(Box, { sx: { ...FRAME, gap: "2px" }, children: [3, 2, 1].map((count, column) => /* @__PURE__ */ jsx(Box, { sx: { flex: 1, display: "flex", flexDirection: "column", gap: "2px" }, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(Box, { sx: { height: 5, borderRadius: 0.5, bgcolor: barColor(active) } }, index)) }, column)) });
+}
+
+export {
+  RowsGlyph,
+  TableGlyph,
+  ListGlyph,
+  GridGlyph,
+  ColumnsGlyph,
+  BoardGlyph
+};
+//# sourceMappingURL=chunk-HPJJYCNX.js.map

package/dist/chunk-HPJJYCNX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-glyphs.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box } from \"../../../mui/Box\";\n\n/**\n * Miniature previews of what a layout or a density setting DOES.\n *\n * \"Baixa / Média / Alta\" tells an operator nothing until they try it, and\n * \"Grade\" vs \"Lista\" is only obvious to whoever named them. A glyph that draws\n * three tight rows, or three loose ones, or a grid of blocks, answers the\n * question before the click — so the picker is read once instead of cycled\n * through.\n *\n * Deliberately CSS boxes rather than icons: the point is to show spacing and\n * proportion, which is exactly what an icon font flattens away.\n */\n\n/** The glyph's own footprint, so every tile in a picker lines up. */\nconst FRAME = { width: 32, height: 24, display: \"flex\" } as const;\n\n/** Active tiles use the accent; the rest stay muted so the choice reads at a glance. */\nfunction barColor(active: boolean): string {\n  return active ? \"primary.main\" : \"action.disabled\";\n}\n\n/** Three rows at a given gap — the density preview for the table and list. */\nexport function RowsGlyph({ gap, active }: { gap: number; active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, flexDirection: \"column\", justifyContent: \"center\", gap: `${gap}px` }}>\n      {[0, 1, 2].map((index) => (\n        <Box key={index} sx={{ height: 2, width: \"100%\", borderRadius: 1, bgcolor: barColor(active) }} />\n      ))}\n    </Box>\n  );\n}\n\n/** A dense block grid — the table layout. */\nexport function TableGlyph({ active }: { active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gap: \"2px\" }}>\n      {Array.from({ length: 9 }).map((_, index) => (\n        <Box\n          key={index}\n          sx={{ borderRadius: 0.5, bgcolor: barColor(active), opacity: index < 3 ? 1 : 0.55 }}\n        />\n      ))}\n    </Box>\n  );\n}\n\n/** Full-width rows each carrying a leading mark — the list layout. */\nexport function ListGlyph({ active }: { active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, flexDirection: \"column\", justifyContent: \"center\", gap: \"4px\" }}>\n      {[0, 1, 2].map((index) => (\n        <Box\n          key={index}\n          sx={{\n            height: 5,\n            width: \"100%\",\n            borderRadius: 0.5,\n            bgcolor: barColor(active),\n            opacity: 0.7,\n            display: \"flex\",\n            alignItems: \"center\",\n          }}\n        >\n          <Box sx={{ ml: \"2px\", height: 3, width: 3, borderRadius: \"50%\", bgcolor: \"background.paper\" }} />\n        </Box>\n      ))}\n    </Box>\n  );\n}\n\n/**\n * A grid of blocks — the cards layout, and ALSO the cards density preview: `n`\n * is how many fit per row, so \"Muitos / Médio / Poucos\" is shown rather than\n * described.\n */\nexport function GridGlyph({ n = 3, active }: { n?: number; active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, display: \"grid\", gridTemplateColumns: `repeat(${n}, 1fr)`, gap: \"2px\" }}>\n      {Array.from({ length: n * 2 }).map((_, index) => (\n        <Box key={index} sx={{ borderRadius: 0.5, bgcolor: barColor(active) }} />\n      ))}\n    </Box>\n  );\n}\n\n/**\n * Full-height columns, `n` of them — the board's DENSITY, where fewer, wider\n * columns is the comfortable end. Distinct from {@link BoardGlyph}, which\n * stands for the board format itself and shows cards stacked at differing\n * depths; this one is about the columns' width, so the bars are solid.\n */\nexport function ColumnsGlyph({ n, active }: { n: number; active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, gap: \"2px\" }}>\n      {Array.from({ length: n }).map((_, column) => (\n        <Box key={column} sx={{ flex: 1, borderRadius: 0.5, bgcolor: barColor(active) }} />\n      ))}\n    </Box>\n  );\n}\n\n/** Three columns of decreasing height — the board. */\nexport function BoardGlyph({ active }: { active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, gap: \"2px\" }}>\n      {[3, 2, 1].map((count, column) => (\n        <Box key={column} sx={{ flex: 1, display: \"flex\", flexDirection: \"column\", gap: \"2px\" }}>\n          {Array.from({ length: count }).map((_, index) => (\n            <Box key={index} sx={{ height: 5, borderRadius: 0.5, bgcolor: barColor(active) }} />\n          ))}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n"],"mappings":";;;;;AA8BQ;AAZR,IAAM,QAAQ,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,OAAO;AAGvD,SAAS,SAAS,QAAyB;AACzC,SAAO,SAAS,iBAAiB;AACnC;AAGO,SAAS,UAAU,EAAE,KAAK,OAAO,GAAwD;AAC9F,SACE,oBAAC,OAAI,IAAI,EAAE,GAAG,OAAO,eAAe,UAAU,gBAAgB,UAAU,KAAK,GAAG,GAAG,KAAK,GACrF,WAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,UACd,oBAAC,OAAgB,IAAI,EAAE,QAAQ,GAAG,OAAO,QAAQ,cAAc,GAAG,SAAS,SAAS,MAAM,EAAE,KAAlF,KAAqF,CAChG,GACH;AAEJ;AAGO,SAAS,WAAW,EAAE,OAAO,GAA2C;AAC7E,SACE,oBAAC,OAAI,IAAI,EAAE,GAAG,OAAO,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,MAAM,GACrF,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,UACjC;AAAA,IAAC;AAAA;AAAA,MAEC,IAAI,EAAE,cAAc,KAAK,SAAS,SAAS,MAAM,GAAG,SAAS,QAAQ,IAAI,IAAI,KAAK;AAAA;AAAA,IAD7E;AAAA,EAEP,CACD,GACH;AAEJ;AAGO,SAAS,UAAU,EAAE,OAAO,GAA2C;AAC5E,SACE,oBAAC,OAAI,IAAI,EAAE,GAAG,OAAO,eAAe,UAAU,gBAAgB,UAAU,KAAK,MAAM,GAChF,WAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,UACd;AAAA,IAAC;AAAA;AAAA,MAEC,IAAI;AAAA,QACF,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,cAAc;AAAA,QACd,SAAS,SAAS,MAAM;AAAA,QACxB,SAAS;AAAA,QACT,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,MAEA,8BAAC,OAAI,IAAI,EAAE,IAAI,OAAO,QAAQ,GAAG,OAAO,GAAG,cAAc,OAAO,SAAS,mBAAmB,GAAG;AAAA;AAAA,IAX1F;AAAA,EAYP,CACD,GACH;AAEJ;AAOO,SAAS,UAAU,EAAE,IAAI,GAAG,OAAO,GAAuD;AAC/F,SACE,oBAAC,OAAI,IAAI,EAAE,GAAG,OAAO,SAAS,QAAQ,qBAAqB,UAAU,CAAC,UAAU,KAAK,MAAM,GACxF,gBAAM,KAAK,EAAE,QAAQ,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,UACrC,oBAAC,OAAgB,IAAI,EAAE,cAAc,KAAK,SAAS,SAAS,MAAM,EAAE,KAA1D,KAA6D,CACxE,GACH;AAEJ;AAQO,SAAS,aAAa,EAAE,GAAG,OAAO,GAAsD;AAC7F,SACE,oBAAC,OAAI,IAAI,EAAE,GAAG,OAAO,KAAK,MAAM,GAC7B,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,WACjC,oBAAC,OAAiB,IAAI,EAAE,MAAM,GAAG,cAAc,KAAK,SAAS,SAAS,MAAM,EAAE,KAApE,MAAuE,CAClF,GACH;AAEJ;AAGO,SAAS,WAAW,EAAE,OAAO,GAA2C;AAC7E,SACE,oBAAC,OAAI,IAAI,EAAE,GAAG,OAAO,KAAK,MAAM,GAC7B,WAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,OAAO,WACrB,oBAAC,OAAiB,IAAI,EAAE,MAAM,GAAG,SAAS,QAAQ,eAAe,UAAU,KAAK,MAAM,GACnF,gBAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UACrC,oBAAC,OAAgB,IAAI,EAAE,QAAQ,GAAG,cAAc,KAAK,SAAS,SAAS,MAAM,EAAE,KAArE,KAAwE,CACnF,KAHO,MAIV,CACD,GACH;AAEJ;","names":[]}

package/dist/chunk-HPK33ACY.js

@@ -0,0 +1,15 @@
+// src/utils/withDefaults.ts
+function withDefaults(props, defaults) {
+  const resolved = { ...props };
+  for (const [key, value] of Object.entries(defaults)) {
+    if (resolved[key] === void 0) {
+      Object.assign(resolved, { [key]: value });
+    }
+  }
+  return resolved;
+}
+
+export {
+  withDefaults
+};
+//# sourceMappingURL=chunk-HPK33ACY.js.map

package/dist/chunk-HQBXB5QB.js

@@ -0,0 +1,101 @@
+import {
+  buildCategoryGroups,
+  filterCategoryGroups,
+  flattenRows,
+  toggleCategoryLeaves,
+  toggleLeaf
+} from "./chunk-DVTCZR3K.js";
+
+// src/components/form/CategorySelect/useCategorySelect.ts
+import { useCallback, useMemo, useRef, useState } from "react";
+function useExpandedCategories(allGroups, searching) {
+  const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
+  const isExpanded = useCallback(
+    (categoryId) => searching || expanded.has(categoryId),
+    [searching, expanded]
+  );
+  const toggleExpanded = useCallback((categoryId) => {
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (!next.delete(categoryId)) next.add(categoryId);
+      return next;
+    });
+  }, []);
+  const setAllExpanded = useCallback(
+    (shouldExpand) => {
+      setExpanded(shouldExpand ? new Set(allGroups.map((g) => g.category.id)) : /* @__PURE__ */ new Set());
+    },
+    [allGroups]
+  );
+  const expandAll = useCallback((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 = useCallback((group) => {
+    setDraftState((current) => toggleCategoryLeaves(group, current));
+  }, []);
+  const toggleSubcategory = useCallback((id) => {
+    setDraftState((current) => toggleLeaf(id, current));
+  }, []);
+  const setDraft = useCallback((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 = useMemo(() => buildCategoryGroups(options), [options]);
+  const visibleGroups = useMemo(
+    () => filterCategoryGroups(allGroups, query),
+    [allGroups, query]
+  );
+  const expansion = useExpandedCategories(allGroups, query.trim().length > 0);
+  const selection = useDraftSelection(selected);
+  const rows = useMemo(
+    () => flattenRows(visibleGroups, expansion.isExpanded),
+    [visibleGroups, expansion.isExpanded]
+  );
+  const openPanel = useCallback(() => {
+    selection.setDraft(new Set(selected));
+    expansion.expandAll(allGroups);
+    setQueryState("");
+    setActiveIndex(-1);
+    setOpen(true);
+  }, [selected, allGroups, selection, expansion]);
+  const closePanel = useCallback(() => {
+    setOpen(false);
+    setQueryState("");
+    setActiveIndex(-1);
+  }, []);
+  const setQuery = useCallback((next) => {
+    setQueryState(next);
+    setActiveIndex(-1);
+  }, []);
+  return {
+    ...expansion,
+    ...selection,
+    open,
+    query,
+    visibleGroups,
+    allGroups,
+    rows,
+    activeIndex,
+    setQuery,
+    setActiveIndex,
+    openPanel,
+    closePanel,
+    triggerRef
+  };
+}
+
+export {
+  useCategorySelect
+};
+//# sourceMappingURL=chunk-HQBXB5QB.js.map

package/dist/chunk-HQBXB5QB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/useCategorySelect.ts"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\n\nimport {\n  buildCategoryGroups,\n  filterCategoryGroups,\n  flattenRows,\n  toggleCategoryLeaves,\n  toggleLeaf,\n  type CategoryRowRef,\n} from './category-tree';\nimport type { CategoryGroup, CategorySelectOption } from './CategorySelect.types';\n\n/** Which categories are unfolded, and the ways that set changes. */\ninterface ExpansionState {\n  isExpanded: (categoryId: string) => boolean;\n  toggleExpanded: (categoryId: string) => void;\n  setAllExpanded: (expanded: boolean) => void;\n  expandAll: (groups: CategoryGroup[]) => void;\n}\n\n/**\n * The expanded set.\n *\n * `searching` short-circuits the lookup instead of mutating the set: a query must\n * reveal every hit, but clearing it has to restore whatever the admin had folded,\n * which an overwrite would have destroyed.\n */\nfunction useExpandedCategories(\n  allGroups: CategoryGroup[],\n  searching: boolean,\n): ExpansionState {\n  const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => new Set());\n\n  const isExpanded = useCallback(\n    (categoryId: string) => searching || expanded.has(categoryId),\n    [searching, expanded],\n  );\n\n  const toggleExpanded = useCallback((categoryId: string) => {\n    setExpanded((current) => {\n      const next = new Set(current);\n      if (!next.delete(categoryId)) next.add(categoryId);\n      return next;\n    });\n  }, []);\n\n  const setAllExpanded = useCallback(\n    (shouldExpand: boolean) => {\n      setExpanded(shouldExpand ? new Set(allGroups.map((g) => g.category.id)) : new Set());\n    },\n    [allGroups],\n  );\n\n  const expandAll = useCallback((groups: CategoryGroup[]) => {\n    setExpanded(new Set(groups.map((group) => group.category.id)));\n  }, []);\n\n  return { isExpanded, toggleExpanded, setAllExpanded, expandAll };\n}\n\n/** The pending selection and the two ways a row changes it. */\ninterface DraftState {\n  draft: ReadonlySet<string>;\n  setDraft: (next: ReadonlySet<string>) => void;\n  toggleCategory: (group: CategoryGroup) => void;\n  toggleSubcategory: (id: string) => void;\n}\n\nfunction useDraftSelection(initial: readonly string[]): DraftState {\n  const [draft, setDraftState] = useState<ReadonlySet<string>>(() => new Set(initial));\n\n  const toggleCategory = useCallback((group: CategoryGroup) => {\n    setDraftState((current) => toggleCategoryLeaves(group, current));\n  }, []);\n\n  const toggleSubcategory = useCallback((id: string) => {\n    setDraftState((current) => toggleLeaf(id, current));\n  }, []);\n\n  const setDraft = useCallback((next: ReadonlySet<string>) => setDraftState(next), []);\n\n  return { draft, setDraft, toggleCategory, toggleSubcategory };\n}\n\n/** Everything the panel and trigger need to render and drive one select. */\nexport interface CategorySelectState extends ExpansionState, DraftState {\n  open: boolean;\n  query: string;\n  /** Groups after the search filter — what is actually on screen. */\n  visibleGroups: CategoryGroup[];\n  /** All groups, unfiltered — the basis for chips and \"select all\". */\n  allGroups: CategoryGroup[];\n  rows: CategoryRowRef[];\n  activeIndex: number;\n  setQuery: (next: string) => void;\n  setActiveIndex: (next: number) => void;\n  openPanel: () => void;\n  closePanel: () => void;\n  triggerRef: React.RefObject<HTMLButtonElement | null>;\n}\n\ninterface UseCategorySelectArgs {\n  options: CategorySelectOption[];\n  /** The applied selection to seed the draft from each time the panel opens. */\n  selected: readonly string[];\n}\n\n/**\n * Panel state for one CategorySelect.\n *\n * The DRAFT is the load-bearing idea. Ticks land here, not on the caller's\n * `value`, so the list behind the panel does not refetch on every click; Apply\n * publishes, dismissing discards. Opening re-seeds the draft from the applied\n * value, which is what makes \"cancel\" mean cancel.\n */\nexport function useCategorySelect({\n  options,\n  selected,\n}: UseCategorySelectArgs): CategorySelectState {\n  const [open, setOpen] = useState(false);\n  const [query, setQueryState] = useState('');\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const allGroups = useMemo(() => buildCategoryGroups(options), [options]);\n  const visibleGroups = useMemo(\n    () => filterCategoryGroups(allGroups, query),\n    [allGroups, query],\n  );\n\n  const expansion = useExpandedCategories(allGroups, query.trim().length > 0);\n  const selection = useDraftSelection(selected);\n  const rows = useMemo(\n    () => flattenRows(visibleGroups, expansion.isExpanded),\n    [visibleGroups, expansion.isExpanded],\n  );\n\n  const openPanel = useCallback(() => {\n    selection.setDraft(new Set(selected));\n    expansion.expandAll(allGroups);\n    setQueryState('');\n    setActiveIndex(-1);\n    setOpen(true);\n  }, [selected, allGroups, selection, expansion]);\n\n  const closePanel = useCallback(() => {\n    setOpen(false);\n    setQueryState('');\n    setActiveIndex(-1);\n  }, []);\n\n  const setQuery = useCallback((next: string) => {\n    setQueryState(next);\n    setActiveIndex(-1);\n  }, []);\n\n  return {\n    ...expansion,\n    ...selection,\n    open,\n    query,\n    visibleGroups,\n    allGroups,\n    rows,\n    activeIndex,\n    setQuery,\n    setActiveIndex,\n    openPanel,\n    closePanel,\n    triggerRef,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-HWT6SIVS.js

@@ -0,0 +1,190 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Box
+} from "./chunk-34DQAXL2.js";
+import {
+  Text
+} from "./chunk-R52HJAYO.js";
+
+// src/components/data-display/DataViews/DataViewsBoard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_EXTRA_LABEL = "Sem etapa";
+function groupValueOf(row, groupBy) {
+  const value = row[groupBy];
+  return value === null || value === void 0 ? "" : String(value);
+}
+function groupRows(rows, board) {
+  const declared = new Map(board.groups.map((group) => [group.value, []]));
+  const extra = [];
+  for (const row of rows) {
+    const bucket = declared.get(groupValueOf(row, board.groupBy));
+    if (bucket) bucket.push(row);
+    else extra.push(row);
+  }
+  const columns = board.groups.map((group) => ({
+    key: group.value,
+    label: group.label,
+    tone: group.tone,
+    rows: declared.get(group.value) ?? []
+  }));
+  if (extra.length > 0) {
+    columns.push({ key: "__extra__", label: board.extraLabel ?? DEFAULT_EXTRA_LABEL, rows: extra });
+  }
+  return columns;
+}
+function sumOf(rows, sumBy) {
+  if (!sumBy) return null;
+  return rows.reduce((total, row) => {
+    const value = row[sumBy];
+    return typeof value === "number" && Number.isFinite(value) ? total + value : total;
+  }, 0);
+}
+function toneColor(tone) {
+  const known = ["primary", "secondary", "success", "warning", "error", "info"];
+  return tone && known.includes(tone) ? `${tone}.main` : "divider";
+}
+function BoardColumnHeader({
+  label,
+  count,
+  sum,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.25 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: 600 }, children: label }) }),
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          "data-testid": `${testId}-count`,
+          "aria-label": copy.board.countOnPage(label, count),
+          sx: { color: "text.secondary", whiteSpace: "nowrap" },
+          children: copy.board.onThisPage(count)
+        }
+      ) })
+    ] }),
+    sum !== null && /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "span",
+        "data-testid": `${testId}-sum`,
+        "aria-label": copy.board.pageSum(sum),
+        sx: { color: "text.secondary" },
+        children: sum
+      }
+    ) })
+  ] });
+}
+function BoardColumn({
+  column,
+  board,
+  getRowId,
+  renderCard,
+  selectedIds,
+  onToggleId,
+  cardScale,
+  width,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  const total = sumOf(column.rows, board.sumBy);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": testId,
+      sx: {
+        flex: `0 0 ${width}px`,
+        minWidth: width,
+        display: "flex",
+        flexDirection: "column",
+        gap: 1,
+        borderTop: 3,
+        borderStyle: "solid",
+        borderColor: toneColor(column.tone),
+        borderRadius: 1,
+        bgcolor: "action.hover",
+        p: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          BoardColumnHeader,
+          {
+            label: column.label,
+            count: column.rows.length,
+            sum: total === null ? null : String(board.formatSum ? board.formatSum(total) : total),
+            testId
+          }
+        ),
+        column.rows.length === 0 ? /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(Box, { component: "span", "data-testid": `${testId}-empty`, sx: { color: "text.disabled" }, children: copy.board.emptyColumn }) }) : column.rows.map((row) => {
+          const id = getRowId(row);
+          return /* @__PURE__ */ jsx(Box, { children: renderCard(row, {
+            selected: selectedIds.has(id),
+            onToggleSelect: () => onToggleId(id),
+            scale: cardScale
+          }) }, id);
+        })
+      ]
+    }
+  );
+}
+var BASE_COLUMN_WIDTH = 240;
+var MIN_COLUMN_WIDTH = 220;
+function DataViewsBoard({
+  rows,
+  board,
+  getRowId,
+  renderCard,
+  selectedIds,
+  onToggleId,
+  cardScale,
+  dataTestId
+}) {
+  const copy = useDataViewsCopy();
+  const columns = groupRows(rows, board);
+  const width = Math.max(MIN_COLUMN_WIDTH, Math.round(BASE_COLUMN_WIDTH * cardScale));
+  const testId = dataTestId ? `${dataTestId}-board` : "data-views-board";
+  return /* @__PURE__ */ jsxs(Box, { sx: { mt: 1.5 }, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(Box, { component: "span", "data-testid": `${testId}-scale-note`, sx: { color: "text.secondary" }, children: copy.board.pageScopeNote }) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        "data-testid": testId,
+        sx: {
+          mt: 1,
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 1.5,
+          // The BOARD scrolls, not the page: without `maxWidth` the flex row
+          // widens its parent and the whole document scrolls sideways.
+          maxWidth: "100%",
+          overflowX: "auto",
+          pb: 1
+        },
+        children: columns.map((column) => /* @__PURE__ */ jsx(
+          BoardColumn,
+          {
+            column,
+            board,
+            getRowId,
+            renderCard,
+            selectedIds,
+            onToggleId,
+            cardScale,
+            width,
+            testId: `${testId}-column-${column.key}`
+          },
+          column.key
+        ))
+      }
+    )
+  ] });
+}
+
+export {
+  groupRows,
+  DataViewsBoard
+};
+//# sourceMappingURL=chunk-HWT6SIVS.js.map

package/dist/chunk-HWT6SIVS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/DataViewsBoard.tsx"],"sourcesContent":["\"use client\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport type { DataViewCardSelection } from \"./data-views-types\";\n\n/**\n * One column of the board — a single value of the grouping field, with the label\n * to print above it.\n *\n * `tone` is an opaque palette hint (e.g. `\"success\"`, `\"error\"`) the host picks\n * from its own state machine; the board only uses it to colour the column's\n * header accent, so an unknown tone degrades to the default rather than throwing.\n */\nexport interface BoardGroup {\n  value: string;\n  label: string;\n  tone?: string;\n}\n\n/**\n * The BOARD layout's configuration: the same page the table rendered, laid out\n * as columns of the entity's own card.\n *\n * The board earns its place when a page's buckets are STATES IN A STATE MACHINE\n * rather than arbitrary groupings — payments are exactly that shape. Derive\n * `groups` and the table's `scopes` from ONE state-machine definition: two\n * hand-maintained lists of the same states will drift, and the drift shows up as\n * a column the tabs do not have.\n */\nexport interface BoardConfig<T extends Record<string, unknown>> {\n  /** The row field whose value places a card in a column. */\n  groupBy: keyof T & string;\n  /** The columns, in DELIBERATE reading order — the board renders this order. */\n  groups: BoardGroup[];\n  /** Optional numeric row field summed per column (e.g. the amount in cents). */\n  sumBy?: keyof T & string;\n  /**\n   * Formats a column's total. The PAGE's own formatter, so the board prints\n   * money in the store's currency instead of inventing a second convention.\n   * Omitted ⇒ the raw sum.\n   */\n  formatSum?: (total: number) => string;\n  /** Header for the column collecting rows in states the front end does not declare. */\n  extraLabel?: string;\n}\n\n/** The default header for the catch-all column (see {@link groupRows}). */\nconst DEFAULT_EXTRA_LABEL = \"Sem etapa\";\n\n/** One resolved column: a declared group (or the catch-all) plus its loaded rows. */\ninterface ResolvedColumn<T> {\n  key: string;\n  label: string;\n  tone?: string;\n  rows: T[];\n}\n\n/** Read the grouping value off a row as a string (`null`/`undefined` ⇒ \"\"). */\nfunction groupValueOf<T extends Record<string, unknown>>(row: T, groupBy: string): string {\n  const value = row[groupBy];\n  return value === null || value === undefined ? \"\" : String(value);\n}\n\n/**\n * Place every loaded row into a column, in the DECLARED order, and collect the\n * leftovers into one extra column at the end.\n *\n * Nothing is ever dropped, and that is the point: a state added to the back end\n * before the front end knows about it must not make rows disappear. On a\n * payments board, a silently dropped row is money nobody can see. The extra\n * column only exists when something landed in it — once every row is placed it\n * is gone, so the common case shows exactly the declared columns.\n *\n * A declared group with no rows KEEPS its position: the order is a reading\n * order chosen by the host, not a ranking derived from the data.\n */\nexport function groupRows<T extends Record<string, unknown>>(\n  rows: T[],\n  board: BoardConfig<T>,\n): ResolvedColumn<T>[] {\n  const declared = new Map<string, T[]>(board.groups.map((group) => [group.value, []]));\n  const extra: T[] = [];\n  for (const row of rows) {\n    const bucket = declared.get(groupValueOf(row, board.groupBy));\n    if (bucket) bucket.push(row);\n    else extra.push(row);\n  }\n  const columns: ResolvedColumn<T>[] = board.groups.map((group) => ({\n    key: group.value,\n    label: group.label,\n    tone: group.tone,\n    rows: declared.get(group.value) ?? [],\n  }));\n  if (extra.length > 0) {\n    columns.push({ key: \"__extra__\", label: board.extraLabel ?? DEFAULT_EXTRA_LABEL, rows: extra });\n  }\n  return columns;\n}\n\n/** A column's total over the rows ON THIS PAGE, or null when nothing is summed. */\nfunction sumOf<T extends Record<string, unknown>>(rows: T[], sumBy: string | undefined): number | null {\n  if (!sumBy) return null;\n  return rows.reduce((total, row) => {\n    const value = row[sumBy];\n    return typeof value === \"number\" && Number.isFinite(value) ? total + value : total;\n  }, 0);\n}\n\n/** Map a `tone` hint onto a theme colour, defaulting for anything unrecognised. */\nfunction toneColor(tone: string | undefined): string {\n  const known = [\"primary\", \"secondary\", \"success\", \"warning\", \"error\", \"info\"];\n  return tone && known.includes(tone) ? `${tone}.main` : \"divider\";\n}\n\n/**\n * A column's heading: the label, the page count and the optional sum.\n *\n * The count is labelled \"nesta página\" EVERYWHERE it appears, including in its\n * accessible name. The scope tabs above the board show whole-query totals from\n * the server; an unlabelled column count would contradict them the moment there\n * is a second page, and the reader has no way to tell which number to believe.\n */\nfunction BoardColumnHeader({\n  label,\n  count,\n  sum,\n  testId,\n}: {\n  label: string;\n  count: number;\n  /** The formatted total, or null when the board sums nothing. */\n  sum: string | null;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 0.25 }}>\n      <Box sx={{ display: \"flex\", alignItems: \"baseline\", justifyContent: \"space-between\", gap: 1 }}>\n        <Text variant=\"caption\" as=\"span\">\n          <Box component=\"span\" sx={{ fontWeight: 600 }}>\n            {label}\n          </Box>\n        </Text>\n        <Text variant=\"caption\" as=\"span\">\n          <Box\n            component=\"span\"\n            data-testid={`${testId}-count`}\n            aria-label={copy.board.countOnPage(label, count)}\n            sx={{ color: \"text.secondary\", whiteSpace: \"nowrap\" }}\n          >\n            {copy.board.onThisPage(count)}\n          </Box>\n        </Text>\n      </Box>\n      {sum !== null && (\n        <Text variant=\"caption\" as=\"span\">\n          <Box\n            component=\"span\"\n            data-testid={`${testId}-sum`}\n            aria-label={copy.board.pageSum(sum)}\n            sx={{ color: \"text.secondary\" }}\n          >\n            {sum}\n          </Box>\n        </Text>\n      )}\n    </Box>\n  );\n}\n\ninterface BoardColumnProps<T extends Record<string, unknown>> {\n  column: ResolvedColumn<T>;\n  board: BoardConfig<T>;\n  getRowId: (row: T) => string | number;\n  renderCard: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  selectedIds: Set<string | number>;\n  onToggleId: (id: string | number) => void;\n  cardScale: number;\n  width: number;\n  testId: string;\n}\n\n/** One column: its header over a vertical stack of the entity's own cards. */\nfunction BoardColumn<T extends Record<string, unknown>>({\n  column,\n  board,\n  getRowId,\n  renderCard,\n  selectedIds,\n  onToggleId,\n  cardScale,\n  width,\n  testId,\n}: BoardColumnProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const total = sumOf(column.rows, board.sumBy);\n  return (\n    <Box\n      data-testid={testId}\n      sx={{\n        flex: `0 0 ${width}px`,\n        minWidth: width,\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 1,\n        borderTop: 3,\n        borderStyle: \"solid\",\n        borderColor: toneColor(column.tone),\n        borderRadius: 1,\n        bgcolor: \"action.hover\",\n        p: 1,\n      }}\n    >\n      <BoardColumnHeader\n        label={column.label}\n        count={column.rows.length}\n        sum={total === null ? null : String(board.formatSum ? board.formatSum(total) : total)}\n        testId={testId}\n      />\n      {column.rows.length === 0 ? (\n        <Text variant=\"caption\" as=\"p\">\n          <Box component=\"span\" data-testid={`${testId}-empty`} sx={{ color: \"text.disabled\" }}>\n            {copy.board.emptyColumn}\n          </Box>\n        </Text>\n      ) : (\n        column.rows.map((row) => {\n          const id = getRowId(row);\n          return (\n            <Box key={id}>\n              {renderCard(row, {\n                selected: selectedIds.has(id),\n                onToggleSelect: () => onToggleId(id),\n                scale: cardScale,\n              })}\n            </Box>\n          );\n        })\n      )}\n    </Box>\n  );\n}\n\ninterface DataViewsBoardProps<T extends Record<string, unknown>> {\n  /** The LOADED page, verbatim. The board never filters, sorts or paginates. */\n  rows: T[];\n  board: BoardConfig<T>;\n  getRowId: (row: T) => string | number;\n  renderCard: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  selectedIds: Set<string | number>;\n  onToggleId: (id: string | number) => void;\n  /** Card size multiplier from the toolbar zoom slider — the same knob as cards. */\n  cardScale: number;\n  dataTestId?: string;\n}\n\n/** The board's column width at scale 1; the zoom slider multiplies it. */\nconst BASE_COLUMN_WIDTH = 240;\n/** Never narrower than this, however far the zoom is wound down (touch targets). */\nconst MIN_COLUMN_WIDTH = 220;\n\n/**\n * The BOARD layout: the loaded page distributed into columns of the entity's own\n * card. A rendering, not a second source of truth — switching to it emits no\n * query, and it shows exactly the rows the table showed.\n *\n * The board scrolls HORIZONTALLY inside its own box rather than letting the page\n * scroll sideways, and its columns keep a usable width at every zoom, so a phone\n * gets a real board instead of six unreadable slivers.\n *\n * Cards are not draggable between columns. Dragging a payment from Recusado to\n * Pago is a domain transition with side effects, not a re-render: it needs the\n * allowed-transition set from the state machine plus a confirmation, and\n * `RowAction.isVisible` is the existing per-row guard to reuse when that lands.\n */\nexport function DataViewsBoard<T extends Record<string, unknown>>({\n  rows,\n  board,\n  getRowId,\n  renderCard,\n  selectedIds,\n  onToggleId,\n  cardScale,\n  dataTestId,\n}: DataViewsBoardProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const columns = groupRows(rows, board);\n  const width = Math.max(MIN_COLUMN_WIDTH, Math.round(BASE_COLUMN_WIDTH * cardScale));\n  const testId = dataTestId ? `${dataTestId}-board` : \"data-views-board\";\n  return (\n    <Box sx={{ mt: 1.5 }}>\n      <Text variant=\"caption\" as=\"p\">\n        <Box component=\"span\" data-testid={`${testId}-scale-note`} sx={{ color: \"text.secondary\" }}>\n          {copy.board.pageScopeNote}\n        </Box>\n      </Text>\n      <Box\n        data-testid={testId}\n        sx={{\n          mt: 1,\n          display: \"flex\",\n          alignItems: \"flex-start\",\n          gap: 1.5,\n          // The BOARD scrolls, not the page: without `maxWidth` the flex row\n          // widens its parent and the whole document scrolls sideways.\n          maxWidth: \"100%\",\n          overflowX: \"auto\",\n          pb: 1,\n        }}\n      >\n        {columns.map((column) => (\n          <BoardColumn\n            key={column.key}\n            column={column}\n            board={board}\n            getRowId={getRowId}\n            renderCard={renderCard}\n            selectedIds={selectedIds}\n            onToggleId={onToggleId}\n            cardScale={cardScale}\n            width={width}\n            testId={`${testId}-column-${column.key}`}\n          />\n        ))}\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-HXYXDQ7U.js

@@ -0,0 +1,19 @@
+// src/components/layout/Skeleton/Skeleton.helpers.ts
+var SKELETON_DEFAULTS = {
+  variant: "text",
+  animation: "pulse",
+  count: 1,
+  spacing: 1,
+  intensity: "medium",
+  glassmorphism: false,
+  shimmer: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveSkeletonProps = (props) => ({ ...SKELETON_DEFAULTS, ...definedProps(props) });
+
+export {
+  resolveSkeletonProps
+};
+//# sourceMappingURL=chunk-HXYXDQ7U.js.map

package/dist/chunk-HXYXDQ7U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Skeleton/Skeleton.helpers.ts"],"sourcesContent":["import type { SkeletonProps } from './Skeleton.types';\n\ntype SkeletonDefaultedKeys =\n  | 'variant'\n  | 'animation'\n  | 'count'\n  | 'spacing'\n  | 'intensity'\n  | 'glassmorphism'\n  | 'shimmer';\n\ntype ResolvedSkeletonProps = SkeletonProps &\n  Required<Pick<SkeletonProps, SkeletonDefaultedKeys>>;\n\nconst SKELETON_DEFAULTS: Pick<SkeletonProps, SkeletonDefaultedKeys> = {\n  variant: 'text',\n  animation: 'pulse',\n  count: 1,\n  spacing: 1,\n  intensity: 'medium',\n  glassmorphism: false,\n  shimmer: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `count={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: SkeletonProps): Partial<SkeletonProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<SkeletonProps>;\n\nexport const resolveSkeletonProps = (props: SkeletonProps): ResolvedSkeletonProps =>\n  ({ ...SKELETON_DEFAULTS, ...definedProps(props) }) as ResolvedSkeletonProps;\n"],"mappings":";AAcA,IAAM,oBAAgE;AAAA,EACpE,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,EACf,SAAS;AACX;AAIA,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAEK,IAAM,uBAAuB,CAAC,WAClC,EAAE,GAAG,mBAAmB,GAAG,aAAa,KAAK,EAAE;","names":[]}

package/dist/chunk-I53WONUS.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-I53WONUS.js.map

package/dist/chunk-I53WONUS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-I73C7TIA.js

@@ -0,0 +1,87 @@
+// src/components/layout/Separator/Separator.styles.ts
+var THICKNESS_PX = {
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 6
+};
+var MARGIN_PX = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32
+};
+var separatorThickness = (size) => THICKNESS_PX[size] ?? THICKNESS_PX.md;
+var separatorMargin = (size, margin) => margin ?? MARGIN_PX[size] ?? MARGIN_PX.md;
+var borderStyleFor = (variant) => {
+  switch (variant) {
+    case "dashed":
+      return "dashed";
+    case "dotted":
+      return "dotted";
+    default:
+      return "solid";
+  }
+};
+var gradientBackground = (variant, orientation, color) => {
+  if (variant !== "gradient") return void 0;
+  const angle = orientation === "horizontal" ? "90deg" : "180deg";
+  return `linear-gradient(${angle}, transparent 0%, ${color} 50%, transparent 100%)`;
+};
+var borderEdges = (isHorizontal, thickness, style, color) => {
+  const leading = isHorizontal ? "Top" : "Left";
+  const blank = {
+    borderTopWidth: 0,
+    borderBottomWidth: 0,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopStyle: "none",
+    borderBottomStyle: "none",
+    borderLeftStyle: "none",
+    borderRightStyle: "none",
+    borderTopColor: "transparent",
+    borderBottomColor: "transparent",
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent"
+  };
+  return {
+    ...blank,
+    [`border${leading}Width`]: thickness,
+    [`border${leading}Style`]: style,
+    [`border${leading}Color`]: color
+  };
+};
+var separatorStyles = (theme, { variant, orientation, size, color, margin, length }) => {
+  const isHorizontal = orientation === "horizontal";
+  const thickness = separatorThickness(size);
+  const resolvedColor = color || theme.palette.divider;
+  const marginValue = separatorMargin(size, margin);
+  const marginStr = typeof marginValue === "string" ? marginValue : `${marginValue}px`;
+  const baseStyles = {
+    display: "flex",
+    alignItems: "center",
+    margin: isHorizontal ? `${marginStr} 0` : `0 ${marginStr}`,
+    width: isHorizontal ? length || "100%" : `${thickness}px`,
+    height: isHorizontal ? `${thickness}px` : length || "100%",
+    boxSizing: "border-box"
+  };
+  if (variant === "gradient") {
+    return {
+      ...baseStyles,
+      background: gradientBackground(variant, orientation, resolvedColor)
+    };
+  }
+  return {
+    ...baseStyles,
+    backgroundColor: "transparent",
+    ...borderEdges(isHorizontal, thickness, borderStyleFor(variant), resolvedColor)
+  };
+};
+
+export {
+  separatorMargin,
+  separatorStyles
+};
+//# sourceMappingURL=chunk-I73C7TIA.js.map

package/dist/chunk-I73C7TIA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Separator/Separator.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material';\n\nimport type {\n  SeparatorOrientation,\n  SeparatorProps,\n  SeparatorSize,\n  SeparatorVariant,\n} from './Separator.types';\n\nconst THICKNESS_PX: Record<SeparatorSize, number> = {\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nconst MARGIN_PX: Record<SeparatorSize, number> = {\n  xs: 4,\n  sm: 8,\n  md: 16,\n  lg: 24,\n  xl: 32,\n};\n\nconst separatorThickness = (size: SeparatorSize): number =>\n  THICKNESS_PX[size] ?? THICKNESS_PX.md;\n\n/** An explicit `margin` wins; otherwise the size picks one. */\nexport const separatorMargin = (\n  size: SeparatorSize,\n  margin?: number | string,\n): number | string => margin ?? MARGIN_PX[size] ?? MARGIN_PX.md;\n\n// `gradient` paints a background rather than a border, so it draws its line as a\n// solid border of zero visual consequence.\nconst borderStyleFor = (variant: SeparatorVariant): 'dashed' | 'dotted' | 'solid' => {\n  switch (variant) {\n    case 'dashed':\n      return 'dashed';\n    case 'dotted':\n      return 'dotted';\n    default:\n      return 'solid';\n  }\n};\n\nconst gradientBackground = (\n  variant: SeparatorVariant,\n  orientation: SeparatorOrientation,\n  color: string,\n): string | undefined => {\n  if (variant !== 'gradient') return undefined;\n  const angle = orientation === 'horizontal' ? '90deg' : '180deg';\n  return `linear-gradient(${angle}, transparent 0%, ${color} 50%, transparent 100%)`;\n};\n\n// Only the leading edge carries the rule; the other three are zeroed explicitly so\n// a parent's border shorthand cannot leak through.\nconst borderEdges = (\n  isHorizontal: boolean,\n  thickness: number,\n  style: 'dashed' | 'dotted' | 'solid',\n  color: string,\n): CSSObject => {\n  const leading = isHorizontal ? 'Top' : 'Left';\n  const blank: CSSObject = {\n    borderTopWidth: 0,\n    borderBottomWidth: 0,\n    borderLeftWidth: 0,\n    borderRightWidth: 0,\n    borderTopStyle: 'none',\n    borderBottomStyle: 'none',\n    borderLeftStyle: 'none',\n    borderRightStyle: 'none',\n    borderTopColor: 'transparent',\n    borderBottomColor: 'transparent',\n    borderLeftColor: 'transparent',\n    borderRightColor: 'transparent',\n  };\n\n  return {\n    ...blank,\n    [`border${leading}Width`]: thickness,\n    [`border${leading}Style`]: style,\n    [`border${leading}Color`]: color,\n  };\n};\n\ntype SeparatorStyleArgs = Required<\n  Pick<SeparatorProps, 'variant' | 'orientation' | 'size'>\n> &\n  Pick<SeparatorProps, 'color' | 'margin' | 'length'>;\n\nexport const separatorStyles = (\n  theme: Theme,\n  { variant, orientation, size, color, margin, length }: SeparatorStyleArgs,\n): CSSObject => {\n  const isHorizontal = orientation === 'horizontal';\n  const thickness = separatorThickness(size);\n  const resolvedColor = color || theme.palette.divider;\n\n  // A margin given as a string carries its own units; a number is pixels.\n  const marginValue = separatorMargin(size, margin);\n  const marginStr = typeof marginValue === 'string' ? marginValue : `${marginValue}px`;\n\n  const baseStyles: CSSObject = {\n    display: 'flex',\n    alignItems: 'center',\n    margin: isHorizontal ? `${marginStr} 0` : `0 ${marginStr}`,\n    width: isHorizontal ? length || '100%' : `${thickness}px`,\n    height: isHorizontal ? `${thickness}px` : length || '100%',\n    boxSizing: 'border-box',\n  };\n\n  if (variant === 'gradient') {\n    return {\n      ...baseStyles,\n      background: gradientBackground(variant, orientation, resolvedColor),\n    };\n  }\n\n  return {\n    ...baseStyles,\n    backgroundColor: 'transparent',\n    ...borderEdges(isHorizontal, thickness, borderStyleFor(variant), resolvedColor),\n  };\n};\n"],"mappings":";AASA,IAAM,eAA8C;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,qBAAqB,CAAC,SAC1B,aAAa,IAAI,KAAK,aAAa;AAG9B,IAAM,kBAAkB,CAC7B,MACA,WACoB,UAAU,UAAU,IAAI,KAAK,UAAU;AAI7D,IAAM,iBAAiB,CAAC,YAA6D;AACnF,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,qBAAqB,CACzB,SACA,aACA,UACuB;AACvB,MAAI,YAAY,WAAY,QAAO;AACnC,QAAM,QAAQ,gBAAgB,eAAe,UAAU;AACvD,SAAO,mBAAmB,KAAK,qBAAqB,KAAK;AAC3D;AAIA,IAAM,cAAc,CAClB,cACA,WACA,OACA,UACc;AACd,QAAM,UAAU,eAAe,QAAQ;AACvC,QAAM,QAAmB;AAAA,IACvB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,EACpB;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,CAAC,SAAS,OAAO,OAAO,GAAG;AAAA,IAC3B,CAAC,SAAS,OAAO,OAAO,GAAG;AAAA,IAC3B,CAAC,SAAS,OAAO,OAAO,GAAG;AAAA,EAC7B;AACF;AAOO,IAAM,kBAAkB,CAC7B,OACA,EAAE,SAAS,aAAa,MAAM,OAAO,QAAQ,OAAO,MACtC;AACd,QAAM,eAAe,gBAAgB;AACrC,QAAM,YAAY,mBAAmB,IAAI;AACzC,QAAM,gBAAgB,SAAS,MAAM,QAAQ;AAG7C,QAAM,cAAc,gBAAgB,MAAM,MAAM;AAChD,QAAM,YAAY,OAAO,gBAAgB,WAAW,cAAc,GAAG,WAAW;AAEhF,QAAM,aAAwB;AAAA,IAC5B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,eAAe,GAAG,SAAS,OAAO,KAAK,SAAS;AAAA,IACxD,OAAO,eAAe,UAAU,SAAS,GAAG,SAAS;AAAA,IACrD,QAAQ,eAAe,GAAG,SAAS,OAAO,UAAU;AAAA,IACpD,WAAW;AAAA,EACb;AAEA,MAAI,YAAY,YAAY;AAC1B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY,mBAAmB,SAAS,aAAa,aAAa;AAAA,IACpE;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,iBAAiB;AAAA,IACjB,GAAG,YAAY,cAAc,WAAW,eAAe,OAAO,GAAG,aAAa;AAAA,EAChF;AACF;","names":[]}