@12-apps/ui 6.11.1 → 6.12.1

package/dist/chunk-KXNWDXR7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Sheet/Sheet.body.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport React from 'react';\n\nimport { SheetContent, SheetFooter, SheetHeader } from './Sheet.parts';\nimport type { SheetProps } from './Sheet.types';\nimport { muiColor } from '../../../tokens/scales';\n\nexport interface SheetBodyProps extends Pick<\n  SheetProps,\n  | 'title'\n  | 'description'\n  | 'showCloseButton'\n  | 'showHandle'\n  | 'header'\n  | 'footer'\n  | 'loading'\n  | 'color'\n  | 'children'\n  | 'onClick'\n  | 'onFocus'\n  | 'onBlur'\n> {\n  testId: string;\n  isDragging: boolean;\n  isVerticalSheet: boolean;\n  isDraggableVariant: boolean;\n  onClose: () => void;\n  onDragStart: (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\n/**\n * The header earns its place if it would show anything at all — a grab handle,\n * either piece of text, the close button, or caller-supplied content.\n */\nconst needsHeader = (props: SheetBodyProps) =>\n  Boolean(\n    props.showHandle ||\n    props.title ||\n    props.description ||\n    props.showCloseButton ||\n    props.header,\n  );\n\n/** The centred spinner shown in place of the children while `loading`. */\nconst SheetLoading: React.FC<Pick<SheetBodyProps, 'color'>> = ({ color }) => (\n  <Box\n    sx={{\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      minHeight: 200,\n    }}\n  >\n    <CircularProgress color={color === undefined ? undefined : muiColor(color, 'inherit')} />\n  </Box>\n);\n\n/**\n * What the sheet contains, independent of which drawer is carrying it. The\n * swipeable and plain branches render exactly this — they differ only in the\n * MUI component and its swipe props, so the contents are built once.\n */\nexport const SheetBody: React.FC<SheetBodyProps> = (props) => {\n  const {\n    title,\n    description,\n    showCloseButton,\n    showHandle,\n    header,\n    footer,\n    loading,\n    color,\n    children,\n    onClick,\n    onFocus,\n    onBlur,\n    testId,\n    isDragging,\n    isVerticalSheet,\n    isDraggableVariant,\n    onClose,\n    onDragStart,\n  } = props;\n\n  return (\n    <Box\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      data-testid={testId}\n      sx={{\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        position: 'relative',\n        userSelect: isDragging ? 'none' : 'auto',\n      }}\n    >\n      {needsHeader(props) && (\n        <SheetHeader\n          title={title}\n          description={description}\n          showCloseButton={showCloseButton}\n          onClose={onClose}\n          showHandle={showHandle && isVerticalSheet}\n          isDraggable={isDraggableVariant && isVerticalSheet}\n          onDragStart={onDragStart}\n          dataTestId={`${testId}-header`}\n        >\n          {header}\n        </SheetHeader>\n      )}\n\n      <SheetContent padded dataTestId={`${testId}-content`}>\n        {loading ? <SheetLoading color={color} /> : children}\n      </SheetContent>\n\n      {footer && (\n        <SheetFooter sticky divider dataTestId={`${testId}-footer`}>\n          {footer}\n        </SheetFooter>\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAqDzB,cAgCA,YAhCA;AAnBJ,IAAM,cAAc,CAAC,UACnB;AAAA,EACE,MAAM,cACN,MAAM,SACN,MAAM,eACN,MAAM,mBACN,MAAM;AACR;AAGF,IAAM,eAAwD,CAAC,EAAE,MAAM,MACrE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,IAEA,8BAAC,oBAAiB,OAAO,UAAU,SAAY,SAAY,SAAS,OAAO,SAAS,GAAG;AAAA;AACzF;AAQK,IAAM,YAAsC,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA,QACF,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,eAAe;AAAA,QACf,UAAU;AAAA,QACV,YAAY,aAAa,SAAS;AAAA,MACpC;AAAA,MAEC;AAAA,oBAAY,KAAK,KAChB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,cAAc;AAAA,YAC1B,aAAa,sBAAsB;AAAA,YACnC;AAAA,YACA,YAAY,GAAG,MAAM;AAAA,YAEpB;AAAA;AAAA,QACH;AAAA,QAGF,oBAAC,gBAAa,QAAM,MAAC,YAAY,GAAG,MAAM,YACvC,oBAAU,oBAAC,gBAAa,OAAc,IAAK,UAC9C;AAAA,QAEC,UACC,oBAAC,eAAY,QAAM,MAAC,SAAO,MAAC,YAAY,GAAG,MAAM,WAC9C,kBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/chunk-KZLLTOB2.js

@@ -0,0 +1,105 @@
+import {
+  GridRow,
+  HeaderCell
+} from "./chunk-E5LWJDI3.js";
+
+// src/components/data-display/DataGrid/DataGrid.body.tsx
+import Checkbox from "@mui/material/Checkbox/index.js";
+import TableBody from "@mui/material/TableBody/index.js";
+import TableCell from "@mui/material/TableCell/index.js";
+import TableHead from "@mui/material/TableHead/index.js";
+import TableRow from "@mui/material/TableRow/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function HeaderControls({
+  model,
+  props
+}) {
+  const theme = useTheme();
+  const { selection = { mode: "none" }, expansion, stickyHeader = true } = props;
+  const sticky = {
+    position: stickyHeader ? "sticky" : "static",
+    top: 0,
+    zIndex: 1,
+    backgroundColor: theme.palette.background.paper
+  };
+  const total = model.processedRows.length;
+  const picked = model.selectedRowIds.length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    selection.mode !== "none" && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", sx: sticky, children: selection.mode === "multi" && /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        indeterminate: picked > 0 && picked < total,
+        checked: total > 0 && picked === total,
+        onChange: (event) => model.setSelectedRowIds(
+          event.target.checked ? model.processedRows.map((row, index) => rowIdOf(props, row, index)) : []
+        ),
+        inputProps: { "aria-label": "Select all rows" }
+      }
+    ) }),
+    expansion && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", sx: sticky })
+  ] });
+}
+function rowIdOf(props, row, index) {
+  if (props.getRowId) return props.getRowId(row, index);
+  const candidate = row.id;
+  return candidate ?? index;
+}
+function GridHeader(section) {
+  const { model, props } = section;
+  const { sorting = {}, stickyHeader = true, headerHeight = 56 } = props;
+  const sortable = sorting.mode === "client" || sorting.mode === "server";
+  return /* @__PURE__ */ jsx(TableHead, { "data-slot": "header", children: /* @__PURE__ */ jsxs(TableRow, { "data-slot": "header-row", role: "row", children: [
+    /* @__PURE__ */ jsx(HeaderControls, { ...section }),
+    model.visibleColumns.map((column) => /* @__PURE__ */ jsx(
+      HeaderCell,
+      {
+        column,
+        sort: model.sortBy.find((entry) => entry.id === column.id),
+        sortable: column.enableSort !== false && sortable,
+        stickyHeader,
+        headerHeight,
+        onSort: model.onSort
+      },
+      column.id
+    ))
+  ] }) });
+}
+function Spacer({ height, colSpan }) {
+  if (height <= 0) return null;
+  return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan, sx: { height, border: "none", p: 0 } }) });
+}
+function GridBody(section) {
+  const { model, props, totalColumns } = section;
+  const { start, end } = model.visibleRange;
+  const trailing = model.virtualized ? model.processedRows.length - end : 0;
+  return /* @__PURE__ */ jsxs(TableBody, { "data-slot": "body", children: [
+    model.virtualized ? /* @__PURE__ */ jsx(Spacer, { height: start * model.rowHeight, colSpan: totalColumns }) : null,
+    model.visibleRows.map((row, offset) => {
+      const index = model.virtualized ? start + offset : offset;
+      const rowId = rowIdOf(props, row, index);
+      return /* @__PURE__ */ jsx(
+        GridRow,
+        {
+          row,
+          index,
+          rowId,
+          isSelected: model.selectedRowIdsSet.has(rowId),
+          isExpanded: model.expandedRowIdsSet.has(rowId),
+          totalColumns,
+          model,
+          props
+        },
+        rowId
+      );
+    }),
+    model.virtualized ? /* @__PURE__ */ jsx(Spacer, { height: trailing * model.rowHeight, colSpan: totalColumns }) : null
+  ] });
+}
+
+export {
+  rowIdOf,
+  GridHeader,
+  GridBody
+};
+//# sourceMappingURL=chunk-KZLLTOB2.js.map

package/dist/chunk-KZLLTOB2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataGrid/DataGrid.body.tsx"],"sourcesContent":["/**\n * The DataGrid's `<thead>` and `<tbody>`.\n *\n * Split from the shell so each stays inside the size budget and so the\n * virtualization spacers — which are pure layout, not data — sit next to the\n * rows they pad rather than in the middle of the component that owns the paper.\n */\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport TableBody from '@mui/material/TableBody/index.js';\nimport TableCell from '@mui/material/TableCell/index.js';\nimport TableHead from '@mui/material/TableHead/index.js';\nimport TableRow from '@mui/material/TableRow/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type React from 'react';\n\nimport { GridRow, HeaderCell } from './DataGrid.cells';\nimport type { DataGridModel } from './DataGrid.model';\nimport type { DataGridProps } from './DataGrid.types';\n\nexport interface GridSectionProps<T extends Record<string, unknown>> {\n  model: DataGridModel<T>;\n  props: DataGridProps<T>;\n  totalColumns: number;\n}\n\n/** The leading header cells for the selection / expansion columns. */\nfunction HeaderControls<T extends Record<string, unknown>>({\n  model,\n  props,\n}: GridSectionProps<T>): React.JSX.Element {\n  const theme = useTheme();\n  const { selection = { mode: 'none' }, expansion, stickyHeader = true } = props;\n  const sticky = {\n    position: stickyHeader ? ('sticky' as const) : ('static' as const),\n    top: 0,\n    zIndex: 1,\n    backgroundColor: theme.palette.background.paper,\n  };\n  const total = model.processedRows.length;\n  const picked = model.selectedRowIds.length;\n  return (\n    <>\n      {selection.mode !== 'none' && (\n        <TableCell padding=\"checkbox\" sx={sticky}>\n          {selection.mode === 'multi' && (\n            <Checkbox\n              indeterminate={picked > 0 && picked < total}\n              checked={total > 0 && picked === total}\n              onChange={(event) =>\n                model.setSelectedRowIds(\n                  event.target.checked\n                    ? model.processedRows.map((row, index) => rowIdOf(props, row, index))\n                    : [],\n                )\n              }\n              inputProps={{ 'aria-label': 'Select all rows' }}\n            />\n          )}\n        </TableCell>\n      )}\n      {expansion && <TableCell padding=\"checkbox\" sx={sticky} />}\n    </>\n  );\n}\n\n/** The caller's `getRowId`, or the row's own `id`, or its index. */\nexport function rowIdOf<T extends Record<string, unknown>>(\n  props: DataGridProps<T>,\n  row: T,\n  index: number,\n): string | number {\n  if (props.getRowId) return props.getRowId(row, index);\n  const candidate = (row as { id?: string | number }).id;\n  return candidate ?? index;\n}\n\nexport function GridHeader<T extends Record<string, unknown>>(\n  section: GridSectionProps<T>,\n): React.JSX.Element {\n  const { model, props } = section;\n  const { sorting = {}, stickyHeader = true, headerHeight = 56 } = props;\n  const sortable = sorting.mode === 'client' || sorting.mode === 'server';\n  return (\n    <TableHead data-slot=\"header\">\n      <TableRow data-slot=\"header-row\" role=\"row\">\n        <HeaderControls {...section} />\n        {model.visibleColumns.map((column) => (\n          <HeaderCell\n            key={column.id}\n            column={column}\n            sort={model.sortBy.find((entry) => entry.id === column.id)}\n            sortable={column.enableSort !== false && sortable}\n            stickyHeader={stickyHeader}\n            headerHeight={headerHeight}\n            onSort={model.onSort}\n          />\n        ))}\n      </TableRow>\n    </TableHead>\n  );\n}\n\n/** An invisible row standing in for the rows the window is not rendering. */\nfunction Spacer({ height, colSpan }: { height: number; colSpan: number }): React.JSX.Element | null {\n  if (height <= 0) return null;\n  return (\n    <TableRow>\n      <TableCell colSpan={colSpan} sx={{ height, border: 'none', p: 0 }} />\n    </TableRow>\n  );\n}\n\nexport function GridBody<T extends Record<string, unknown>>(\n  section: GridSectionProps<T>,\n): React.JSX.Element {\n  const { model, props, totalColumns } = section;\n  const { start, end } = model.visibleRange;\n  const trailing = model.virtualized ? model.processedRows.length - end : 0;\n  return (\n    <TableBody data-slot=\"body\">\n      {model.virtualized ? (\n        <Spacer height={start * model.rowHeight} colSpan={totalColumns} />\n      ) : null}\n      {model.visibleRows.map((row, offset) => {\n        const index = model.virtualized ? start + offset : offset;\n        const rowId = rowIdOf(props, row, index);\n        return (\n          <GridRow\n            key={rowId}\n            row={row}\n            index={index}\n            rowId={rowId}\n            isSelected={model.selectedRowIdsSet.has(rowId)}\n            isExpanded={model.expandedRowIdsSet.has(rowId)}\n            totalColumns={totalColumns}\n            model={model}\n            props={props}\n          />\n        );\n      })}\n      {model.virtualized ? (\n        <Spacer height={trailing * model.rowHeight} colSpan={totalColumns} />\n      ) : null}\n    </TableBody>\n  );\n}\n"],"mappings":";;;;;;AAOA,OAAO,cAAc;AACrB,OAAO,eAAe;AACtB,OAAO,eAAe;AACtB,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,SAAS,gBAAgB;AA6BrB,mBAIQ,KAJR;AAfJ,SAAS,eAAkD;AAAA,EACzD;AAAA,EACA;AACF,GAA2C;AACzC,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,YAAY,EAAE,MAAM,OAAO,GAAG,WAAW,eAAe,KAAK,IAAI;AACzE,QAAM,SAAS;AAAA,IACb,UAAU,eAAgB,WAAsB;AAAA,IAChD,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,iBAAiB,MAAM,QAAQ,WAAW;AAAA,EAC5C;AACA,QAAM,QAAQ,MAAM,cAAc;AAClC,QAAM,SAAS,MAAM,eAAe;AACpC,SACE,iCACG;AAAA,cAAU,SAAS,UAClB,oBAAC,aAAU,SAAQ,YAAW,IAAI,QAC/B,oBAAU,SAAS,WAClB;AAAA,MAAC;AAAA;AAAA,QACC,eAAe,SAAS,KAAK,SAAS;AAAA,QACtC,SAAS,QAAQ,KAAK,WAAW;AAAA,QACjC,UAAU,CAAC,UACT,MAAM;AAAA,UACJ,MAAM,OAAO,UACT,MAAM,cAAc,IAAI,CAAC,KAAK,UAAU,QAAQ,OAAO,KAAK,KAAK,CAAC,IAClE,CAAC;AAAA,QACP;AAAA,QAEF,YAAY,EAAE,cAAc,kBAAkB;AAAA;AAAA,IAChD,GAEJ;AAAA,IAED,aAAa,oBAAC,aAAU,SAAQ,YAAW,IAAI,QAAQ;AAAA,KAC1D;AAEJ;AAGO,SAAS,QACd,OACA,KACA,OACiB;AACjB,MAAI,MAAM,SAAU,QAAO,MAAM,SAAS,KAAK,KAAK;AACpD,QAAM,YAAa,IAAiC;AACpD,SAAO,aAAa;AACtB;AAEO,SAAS,WACd,SACmB;AACnB,QAAM,EAAE,OAAO,MAAM,IAAI;AACzB,QAAM,EAAE,UAAU,CAAC,GAAG,eAAe,MAAM,eAAe,GAAG,IAAI;AACjE,QAAM,WAAW,QAAQ,SAAS,YAAY,QAAQ,SAAS;AAC/D,SACE,oBAAC,aAAU,aAAU,UACnB,+BAAC,YAAS,aAAU,cAAa,MAAK,OACpC;AAAA,wBAAC,kBAAgB,GAAG,SAAS;AAAA,IAC5B,MAAM,eAAe,IAAI,CAAC,WACzB;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,MAAM,MAAM,OAAO,KAAK,CAAC,UAAU,MAAM,OAAO,OAAO,EAAE;AAAA,QACzD,UAAU,OAAO,eAAe,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,QACA,QAAQ,MAAM;AAAA;AAAA,MANT,OAAO;AAAA,IAOd,CACD;AAAA,KACH,GACF;AAEJ;AAGA,SAAS,OAAO,EAAE,QAAQ,QAAQ,GAAkE;AAClG,MAAI,UAAU,EAAG,QAAO;AACxB,SACE,oBAAC,YACC,8BAAC,aAAU,SAAkB,IAAI,EAAE,QAAQ,QAAQ,QAAQ,GAAG,EAAE,GAAG,GACrE;AAEJ;AAEO,SAAS,SACd,SACmB;AACnB,QAAM,EAAE,OAAO,OAAO,aAAa,IAAI;AACvC,QAAM,EAAE,OAAO,IAAI,IAAI,MAAM;AAC7B,QAAM,WAAW,MAAM,cAAc,MAAM,cAAc,SAAS,MAAM;AACxE,SACE,qBAAC,aAAU,aAAU,QAClB;AAAA,UAAM,cACL,oBAAC,UAAO,QAAQ,QAAQ,MAAM,WAAW,SAAS,cAAc,IAC9D;AAAA,IACH,MAAM,YAAY,IAAI,CAAC,KAAK,WAAW;AACtC,YAAM,QAAQ,MAAM,cAAc,QAAQ,SAAS;AACnD,YAAM,QAAQ,QAAQ,OAAO,KAAK,KAAK;AACvC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,MAAM,kBAAkB,IAAI,KAAK;AAAA,UAC7C,YAAY,MAAM,kBAAkB,IAAI,KAAK;AAAA,UAC7C;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QARK;AAAA,MASP;AAAA,IAEJ,CAAC;AAAA,IACA,MAAM,cACL,oBAAC,UAAO,QAAQ,WAAW,MAAM,WAAW,SAAS,cAAc,IACjE;AAAA,KACN;AAEJ;","names":[]}

package/dist/chunk-L6KEVPXN.js

@@ -0,0 +1,172 @@
+import {
+  badgeContentOf,
+  definedAria,
+  formatCount,
+  resolveBadgeProps
+} from "./chunk-MMZAGB64.js";
+import {
+  buildBadgeContent
+} from "./chunk-ZGEBIC5X.js";
+import {
+  badgeStyles,
+  getAnchorOrigin
+} from "./chunk-4Q7HWRR2.js";
+
+// src/components/data-display/Badge/Badge.tsx
+import MuiBadge from "@mui/material/Badge/index.js";
+import Zoom from "@mui/material/Zoom/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import React, { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledBadge = styled(MuiBadge, {
+  shouldForwardProp: (prop) => ![
+    "customVariant",
+    "customSize",
+    "customColor",
+    "glow",
+    "pulse",
+    "animate",
+    "shimmer",
+    "bounce",
+    "hasIcon"
+  ].includes(prop)
+})(({
+  theme,
+  customVariant,
+  customSize = "md",
+  customColor = "primary",
+  glow,
+  pulse,
+  animate,
+  shimmer,
+  bounce,
+  hasIcon
+}) => {
+  return badgeStyles({
+    theme,
+    customVariant,
+    customSize,
+    customColor,
+    glow,
+    pulse,
+    animate,
+    shimmer,
+    bounce,
+    hasIcon
+  });
+});
+var CLOSE_DELAY_MS = 300;
+var ANIMATION_MS = 1e3;
+var useMountAnimation = (enabled) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+  useEffect(() => {
+    if (!enabled) return;
+    setIsAnimating(true);
+    const timer = window.setTimeout(() => setIsAnimating(false), ANIMATION_MS);
+    return () => window.clearTimeout(timer);
+  }, [enabled]);
+  return isAnimating;
+};
+var BadgeSurface = ({ innerRef, isVisible, isAnimating, shouldBeInvisible, finalBadgeContent, aria, rest, ...p }) => {
+  const testId = p["data-testid"];
+  return /* @__PURE__ */ jsx(Zoom, { in: isVisible, timeout: CLOSE_DELAY_MS, children: /* @__PURE__ */ jsx(
+    StyledBadge,
+    {
+      ref: innerRef,
+      className: p.className,
+      customVariant: p.variant,
+      customSize: p.size,
+      customColor: p.color,
+      glow: p.glow,
+      pulse: p.pulse,
+      animate: p.animate,
+      shimmer: p.shimmer,
+      bounce: p.bounce && isAnimating,
+      hasIcon: Boolean(p.icon),
+      badgeContent: finalBadgeContent,
+      variant: p.variant === "dot" ? "dot" : "standard",
+      anchorOrigin: getAnchorOrigin(p.position),
+      invisible: shouldBeInvisible,
+      "data-testid": testId || "badge",
+      slotProps: {
+        badge: {
+          ...aria,
+          // @ts-expect-error - MUI Badge slotProps doesn't include data-testid in types, but it works at runtime
+          "data-testid": testId ? `${testId}-content-wrapper` : "badge-content-wrapper"
+        }
+      },
+      ...rest,
+      children: p.children
+    }
+  ) });
+};
+var Badge = React.forwardRef((componentProps, ref) => {
+  const resolved = resolveBadgeProps(componentProps);
+  const {
+    variant,
+    size,
+    color: _color,
+    glow: _glow,
+    pulse: _pulse,
+    animate,
+    shimmer: _shimmer,
+    bounce,
+    max,
+    showZero,
+    position: _position,
+    children: _children,
+    invisible,
+    closable,
+    onClose,
+    icon,
+    "aria-label": ariaLabel,
+    "aria-live": ariaLive = "polite",
+    "aria-atomic": ariaAtomic = true,
+    "data-testid": dataTestId,
+    className: _className,
+    content: _content,
+    badgeContent: _badgeContent,
+    ...props
+  } = resolved;
+  const [isVisible, setIsVisible] = useState(true);
+  const isAnimating = useMountAnimation(animate || bounce);
+  const handleClose = (event) => {
+    event.stopPropagation();
+    setIsVisible(false);
+    window.setTimeout(() => onClose?.(), CLOSE_DELAY_MS);
+  };
+  const rawContent = badgeContentOf(resolved);
+  const finalBadgeContent = buildBadgeContent({
+    variant,
+    size,
+    icon,
+    closable,
+    dataTestId,
+    baseContent: variant === "count" ? formatCount(rawContent, { max, showZero }) : rawContent,
+    onClose: handleClose
+  });
+  const shouldBeInvisible = invisible || variant === "count" && finalBadgeContent === null && !showZero || !isVisible;
+  return /* @__PURE__ */ jsx(
+    BadgeSurface,
+    {
+      ...resolved,
+      innerRef: ref,
+      isVisible,
+      isAnimating,
+      shouldBeInvisible,
+      finalBadgeContent,
+      aria: definedAria({
+        "aria-label": ariaLabel,
+        "aria-live": ariaLive,
+        "aria-atomic": ariaAtomic
+      }),
+      rest: props
+    }
+  );
+});
+Badge.displayName = "Badge";
+
+export {
+  Badge
+};
+//# sourceMappingURL=chunk-L6KEVPXN.js.map

package/dist/chunk-L6KEVPXN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/Badge.tsx"],"sourcesContent":["import MuiBadge from '@mui/material/Badge/index.js';\nimport Zoom from '@mui/material/Zoom/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { useEffect,useState } from 'react';\n\nimport {\n  badgeStyles,\n  getAnchorOrigin } from './Badge.styles';\nimport {\n  badgeContentOf,\n  definedAria,\n  formatCount,\n  resolveBadgeProps } from './Badge.helpers';\nimport type { ResolvedBadgeProps } from './Badge.helpers';\nimport { buildBadgeContent } from './BadgeContent';\nimport type { BadgeProps, BadgeSize, BadgeVariant } from './Badge.types';\nexport type { BadgeProps } from './Badge.types';\n\n// Define pulse animation\nconst StyledBadge = styled(MuiBadge, {\n  shouldForwardProp: (prop) =>\n    ![\n      'customVariant',\n      'customSize',\n      'customColor',\n      'glow',\n      'pulse',\n      'animate',\n      'shimmer',\n      'bounce',\n      'hasIcon',\n    ].includes(prop as string) })<{\n  customVariant?: BadgeVariant;\n  customSize?: BadgeSize;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  animate?: boolean;\n  shimmer?: boolean;\n  bounce?: boolean;\n  hasIcon?: boolean;\n}>(({\n  theme,\n  customVariant,\n  customSize = 'md',\n  customColor = 'primary',\n  glow,\n  pulse,\n  animate,\n  shimmer,\n  bounce,\n  hasIcon }) => {\n  return badgeStyles({\n    theme,\n    customVariant,\n    customSize,\n    customColor,\n    glow,\n    pulse,\n    animate,\n    shimmer,\n    bounce,\n    hasIcon });\n});\n\nconst CLOSE_DELAY_MS = 300;\nconst ANIMATION_MS = 1000;\n\n// A one-shot flag so bounce/animate run on mount and then stop.\nconst useMountAnimation = (enabled: boolean) => {\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    setIsAnimating(true);\n    const timer = window.setTimeout(() => setIsAnimating(false), ANIMATION_MS);\n    return () => window.clearTimeout(timer);\n  }, [enabled]);\n\n  return isAnimating;\n};\n\n// The chip itself. Local because StyledBadge cannot cross a module boundary\n// (TS2742).\nconst BadgeSurface: React.FC<\n  ResolvedBadgeProps & {\n    innerRef: React.Ref<HTMLSpanElement>;\n    isVisible: boolean;\n    isAnimating: boolean;\n    shouldBeInvisible: boolean;\n    finalBadgeContent: React.ReactNode;\n    aria: Record<string, string | boolean>;\n    rest: Record<string, unknown>;\n  }\n> = ({ innerRef, isVisible, isAnimating, shouldBeInvisible, finalBadgeContent, aria, rest, ...p }) => {\n  const testId = p['data-testid'];\n\n  return (\n    <Zoom in={isVisible} timeout={CLOSE_DELAY_MS}>\n      <StyledBadge\n        ref={innerRef}\n        className={p.className}\n        customVariant={p.variant}\n        customSize={p.size}\n        customColor={p.color}\n        glow={p.glow}\n        pulse={p.pulse}\n        animate={p.animate}\n        shimmer={p.shimmer}\n        bounce={p.bounce && isAnimating}\n        hasIcon={Boolean(p.icon)}\n        badgeContent={finalBadgeContent}\n        variant={p.variant === 'dot' ? 'dot' : 'standard'}\n        anchorOrigin={getAnchorOrigin(p.position)}\n        invisible={shouldBeInvisible}\n        data-testid={testId || 'badge'}\n        slotProps={{\n          badge: {\n            ...aria,\n            // @ts-expect-error - MUI Badge slotProps doesn't include data-testid in types, but it works at runtime\n            'data-testid': testId ? `${testId}-content-wrapper` : 'badge-content-wrapper' } }}\n        {...rest}\n      >\n        {p.children}\n      </StyledBadge>\n    </Zoom>\n  );\n};\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((componentProps, ref) => {\n  const resolved = resolveBadgeProps(componentProps);\n  const {\n    variant,\n    size,\n    color: _color,\n    glow: _glow,\n    pulse: _pulse,\n    animate,\n    shimmer: _shimmer,\n    bounce,\n    max,\n    showZero,\n    position: _position,\n    children: _children,\n    invisible,\n    closable,\n    onClose,\n    icon,\n    'aria-label': ariaLabel,\n    'aria-live': ariaLive = 'polite',\n    'aria-atomic': ariaAtomic = true,\n    'data-testid': dataTestId,\n    className: _className,\n    content: _content,\n    badgeContent: _badgeContent,\n    ...props\n  } = resolved;\n\n  const [isVisible, setIsVisible] = useState(true);\n  const isAnimating = useMountAnimation(animate || bounce);\n\n  const handleClose = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    setIsVisible(false);\n    // Let the Zoom finish before telling the caller.\n    window.setTimeout(() => onClose?.(), CLOSE_DELAY_MS);\n  };\n\n  const rawContent = badgeContentOf(resolved);\n  const finalBadgeContent = buildBadgeContent({\n    variant,\n    size,\n    icon,\n    closable,\n    dataTestId,\n    baseContent: variant === 'count' ? formatCount(rawContent, { max, showZero }) : rawContent,\n    onClose: handleClose });\n\n  // A count that formatted away leaves nothing worth showing.\n  const shouldBeInvisible =\n    invisible || (variant === 'count' && finalBadgeContent === null && !showZero) || !isVisible;\n\n  return (\n    <BadgeSurface\n      {...resolved}\n      innerRef={ref}\n      isVisible={isVisible}\n      isAnimating={isAnimating}\n      shouldBeInvisible={shouldBeInvisible}\n      finalBadgeContent={finalBadgeContent}\n      aria={definedAria({\n        'aria-label': ariaLabel,\n        'aria-live': ariaLive,\n        'aria-atomic': ariaAtomic })}\n      rest={props as unknown as Record<string, unknown>}\n    />\n  );\n});\n\nBadge.displayName = 'Badge';\n"],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,cAAc;AACrB,OAAO,UAAU;AACjB,SAAS,cAAc;AACvB,OAAO,SAAS,WAAU,gBAAgB;AAiGpC;AAjFN,IAAM,cAAc,OAAO,UAAU;AAAA,EACnC,mBAAmB,CAAC,SAClB,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,SAAS,IAAc;AAAE,CAAC,EAU7B,CAAC;AAAA,EACF;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAQ,MAAM;AACd,SAAO,YAAY;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAQ,CAAC;AACb,CAAC;AAED,IAAM,iBAAiB;AACvB,IAAM,eAAe;AAGrB,IAAM,oBAAoB,CAAC,YAAqB;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AAEd,mBAAe,IAAI;AACnB,UAAM,QAAQ,OAAO,WAAW,MAAM,eAAe,KAAK,GAAG,YAAY;AACzE,WAAO,MAAM,OAAO,aAAa,KAAK;AAAA,EACxC,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO;AACT;AAIA,IAAM,eAUF,CAAC,EAAE,UAAU,WAAW,aAAa,mBAAmB,mBAAmB,MAAM,MAAM,GAAG,EAAE,MAAM;AACpG,QAAM,SAAS,EAAE,aAAa;AAE9B,SACE,oBAAC,QAAK,IAAI,WAAW,SAAS,gBAC5B;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,EAAE;AAAA,MACb,eAAe,EAAE;AAAA,MACjB,YAAY,EAAE;AAAA,MACd,aAAa,EAAE;AAAA,MACf,MAAM,EAAE;AAAA,MACR,OAAO,EAAE;AAAA,MACT,SAAS,EAAE;AAAA,MACX,SAAS,EAAE;AAAA,MACX,QAAQ,EAAE,UAAU;AAAA,MACpB,SAAS,QAAQ,EAAE,IAAI;AAAA,MACvB,cAAc;AAAA,MACd,SAAS,EAAE,YAAY,QAAQ,QAAQ;AAAA,MACvC,cAAc,gBAAgB,EAAE,QAAQ;AAAA,MACxC,WAAW;AAAA,MACX,eAAa,UAAU;AAAA,MACvB,WAAW;AAAA,QACT,OAAO;AAAA,UACL,GAAG;AAAA;AAAA,UAEH,eAAe,SAAS,GAAG,MAAM,qBAAqB;AAAA,QAAwB;AAAA,MAAE;AAAA,MACnF,GAAG;AAAA,MAEH,YAAE;AAAA;AAAA,EACL,GACF;AAEJ;AAEO,IAAM,QAAQ,MAAM,WAAwC,CAAC,gBAAgB,QAAQ;AAC1F,QAAM,WAAW,kBAAkB,cAAc;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa,WAAW;AAAA,IACxB,eAAe,aAAa;AAAA,IAC5B,eAAe;AAAA,IACf,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc;AAAA,IACd,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,cAAc,kBAAkB,WAAW,MAAM;AAEvD,QAAM,cAAc,CAAC,UAA4B;AAC/C,UAAM,gBAAgB;AACtB,iBAAa,KAAK;AAElB,WAAO,WAAW,MAAM,UAAU,GAAG,cAAc;AAAA,EACrD;AAEA,QAAM,aAAa,eAAe,QAAQ;AAC1C,QAAM,oBAAoB,kBAAkB;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,YAAY,UAAU,YAAY,YAAY,EAAE,KAAK,SAAS,CAAC,IAAI;AAAA,IAChF,SAAS;AAAA,EAAY,CAAC;AAGxB,QAAM,oBACJ,aAAc,YAAY,WAAW,sBAAsB,QAAQ,CAAC,YAAa,CAAC;AAEpF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,YAAY;AAAA,QAChB,cAAc;AAAA,QACd,aAAa;AAAA,QACb,eAAe;AAAA,MAAW,CAAC;AAAA,MAC7B,MAAM;AAAA;AAAA,EACR;AAEJ,CAAC;AAED,MAAM,cAAc;","names":[]}

package/dist/chunk-LFB4H7Y6.js

@@ -0,0 +1,41 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Input
+} from "./chunk-J7VY6KNP.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-VZO7VREP.js";
+
+// src/components/form/total-form/Fields/TextField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TextField({ name, label, type = "text", placeholder }) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  const testId = `total-form-field-${name}`;
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: name,
+        name,
+        type,
+        placeholder,
+        value: values[name] ?? "",
+        error: Boolean(error),
+        "data-testid": testId,
+        onChange: (event) => setFieldValue(name, event.target.value)
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error })
+  ] });
+}
+
+export {
+  TextField
+};
+//# sourceMappingURL=chunk-LFB4H7Y6.js.map

package/dist/chunk-LIG7TKIB.js

@@ -0,0 +1,35 @@
+// src/components/layout/SettingsLayout/SettingsLayout.styles.ts
+var RAIL_WIDTH = 300;
+var SR_ONLY_SX = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function atLeastRail(theme, breakpoint) {
+  return theme.breakpoints.up(breakpoint);
+}
+function displayAcrossRail(theme, breakpoint, narrow, wide) {
+  return { display: narrow, [atLeastRail(theme, breakpoint)]: { display: wide } };
+}
+var TOUCH_TARGET = 44;
+var STATUS_COLOR = {
+  ok: "success.main",
+  off: "text.disabled",
+  new: "error.main"
+};
+
+export {
+  RAIL_WIDTH,
+  SR_ONLY_SX,
+  atLeastRail,
+  displayAcrossRail,
+  TOUCH_TARGET,
+  STATUS_COLOR
+};
+//# sourceMappingURL=chunk-LIG7TKIB.js.map

package/dist/chunk-LIG7TKIB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsLayout.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { SettingsNavStatus, SettingsRailBreakpoint } from './SettingsLayout.types';\n\n/** Fixed width of the left navigation rail once it has its own column. */\nexport const RAIL_WIDTH = 300;\n\n/** Visually hidden, still read aloud — for text a marker's colour cannot carry. */\nexport const SR_ONLY_SX: CSSObject = {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  padding: 0,\n  margin: '-1px',\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n};\n\n/**\n * The media query for \"the rail has its own column\".\n *\n * `theme.breakpoints.up` takes a NUMBER as happily as a name, which is why\n * `railBreakpoint` accepts one: a settings area whose structural switch is at\n * 1024px has no MUI breakpoint to name (the default `lg` is 1200), and rounding\n * the design to the nearest named breakpoint moves 176px of behaviour to keep a\n * string tidy.\n */\nexport function atLeastRail(theme: Theme, breakpoint: SettingsRailBreakpoint): string {\n  return theme.breakpoints.up(breakpoint);\n}\n\n/**\n * A `display` pair across that query: `narrow` below it, `wide` at and above.\n *\n * Everything that changes shape between the two navigation modes goes through\n * this, so \"which width am I?\" is answered once, in CSS, for every part at\n * once — rather than by each part asking a media query in JavaScript and\n * answering slightly differently.\n */\nexport function displayAcrossRail(\n  theme: Theme,\n  breakpoint: SettingsRailBreakpoint,\n  narrow: string,\n  wide: string,\n): CSSObject {\n  return { display: narrow, [atLeastRail(theme, breakpoint)]: { display: wide } };\n}\n\n/** Minimum touch target, in px. Held down to 320px-wide phones, deliberately. */\nexport const TOUCH_TARGET = 44;\n\n/**\n * Palette role per situation.\n *\n * Returned as theme keys rather than hex so a marker follows the host's theme —\n * and so light and dark do not need two copies of this table.\n */\nexport const STATUS_COLOR: Record<Exclude<SettingsNavStatus, 'locked'>, string> = {\n  ok: 'success.main',\n  off: 'text.disabled',\n  new: 'error.main',\n};\n"],"mappings":";AAKO,IAAM,aAAa;AAGnB,IAAM,aAAwB;AAAA,EACnC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV;AAWO,SAAS,YAAY,OAAc,YAA4C;AACpF,SAAO,MAAM,YAAY,GAAG,UAAU;AACxC;AAUO,SAAS,kBACd,OACA,YACA,QACA,MACW;AACX,SAAO,EAAE,SAAS,QAAQ,CAAC,YAAY,OAAO,UAAU,CAAC,GAAG,EAAE,SAAS,KAAK,EAAE;AAChF;AAGO,IAAM,eAAe;AAQrB,IAAM,eAAqE;AAAA,EAChF,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AACP;","names":[]}

package/dist/chunk-LIQHOLDQ.js

@@ -0,0 +1,42 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  ToggleGroup
+} from "./chunk-A7LG3AXV.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-VZO7VREP.js";
+
+// src/components/form/total-form/Fields/ToggleField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ToggleField({ name, options, label }) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  const testId = `total-form-field-${name}`;
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      ToggleGroup,
+      {
+        variant: "exclusive",
+        options,
+        value: values[name] ?? "",
+        fullWidth: true,
+        dataTestId: testId,
+        sx: { "& .MuiToggleButtonGroup-grouped": { height: 56 } },
+        onChange: (_event, next) => {
+          if (typeof next === "string") setFieldValue(name, next);
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error })
+  ] });
+}
+
+export {
+  ToggleField
+};
+//# sourceMappingURL=chunk-LIQHOLDQ.js.map

package/dist/chunk-LMXWI3DD.js

@@ -0,0 +1,50 @@
+import {
+  stackedOverlayZIndex
+} from "./chunk-MFU4Y25U.js";
+
+// src/components/form/CategorySelect/CategoryPanelSurface.tsx
+import Drawer from "@mui/material/Drawer/index.js";
+import Popover from "@mui/material/Popover/index.js";
+import { jsx } from "react/jsx-runtime";
+var BARE_PAPER = { background: "transparent", boxShadow: "none" };
+var ABOVE_SHEETS = { zIndex: stackedOverlayZIndex };
+function CategoryPanelSurface({
+  open,
+  sheet,
+  anchorEl,
+  onClose,
+  children
+}) {
+  if (sheet) {
+    return /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        anchor: "bottom",
+        open,
+        onClose,
+        sx: ABOVE_SHEETS,
+        slotProps: { paper: { sx: BARE_PAPER } },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      anchorEl,
+      onClose,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      marginThreshold: 8,
+      sx: ABOVE_SHEETS,
+      slotProps: { paper: { sx: { ...BARE_PAPER, marginTop: "6px", overflow: "visible" } } },
+      children
+    }
+  );
+}
+
+export {
+  CategoryPanelSurface
+};
+//# sourceMappingURL=chunk-LMXWI3DD.js.map

package/dist/chunk-LMXWI3DD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategoryPanelSurface.tsx"],"sourcesContent":["'use client';\n\nimport Drawer from '@mui/material/Drawer/index.js';\nimport Popover from '@mui/material/Popover/index.js';\n\nimport { stackedOverlayZIndex } from '../../../tokens/layers';\n\n/** Chrome-free surface props: the panel draws its own border and shadow. */\nconst BARE_PAPER = { background: 'transparent', boxShadow: 'none' } as const;\n\n/**\n * Both surfaces clear the sheet ladder rather than taking MUI's default.\n *\n * A `Popover` defaults to `zIndex.modal` and a temporary `Drawer` to\n * `zIndex.drawer`, one step lower still — and `StackedModal` gives its second\n * panel 1310. So this panel opened UNDER the sheet that opened it, and, being a\n * live modal with an unreachable backdrop, took the focus of every field around\n * it with no way to dismiss it (12-57). See `tokens/layers`.\n */\nconst ABOVE_SHEETS = { zIndex: stackedOverlayZIndex } as const;\n\ninterface SurfaceProps {\n  open: boolean;\n  /** True below the sheet breakpoint — anchor to the bottom edge instead. */\n  sheet: boolean;\n  anchorEl: HTMLElement | null;\n  onClose: () => void;\n  children: React.ReactNode;\n}\n\n/**\n * Where the panel lives: anchored under the trigger on a pointer, or a bottom\n * sheet on a phone.\n *\n * Both surfaces are modal, which is what gives the panel its dismiss-on-outside,\n * Esc handling and focus containment for free rather than hand-rolled.\n */\nexport function CategoryPanelSurface({\n  open,\n  sheet,\n  anchorEl,\n  onClose,\n  children,\n}: SurfaceProps): React.JSX.Element {\n  if (sheet) {\n    return (\n      <Drawer\n        anchor=\"bottom\"\n        open={open}\n        onClose={onClose}\n        sx={ABOVE_SHEETS}\n        slotProps={{ paper: { sx: BARE_PAPER } }}\n      >\n        {children}\n      </Drawer>\n    );\n  }\n  return (\n    <Popover\n      open={open}\n      anchorEl={anchorEl}\n      onClose={onClose}\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n      transformOrigin={{ vertical: 'top', horizontal: 'left' }}\n      marginThreshold={8}\n      sx={ABOVE_SHEETS}\n      slotProps={{ paper: { sx: { ...BARE_PAPER, marginTop: '6px', overflow: 'visible' } } }}\n    >\n      {children}\n    </Popover>\n  );\n}\n"],"mappings":";;;;;AAEA,OAAO,YAAY;AACnB,OAAO,aAAa;AA2Cd;AAtCN,IAAM,aAAa,EAAE,YAAY,eAAe,WAAW,OAAO;AAWlE,IAAM,eAAe,EAAE,QAAQ,qBAAqB;AAkB7C,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoC;AAClC,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QACJ,WAAW,EAAE,OAAO,EAAE,IAAI,WAAW,EAAE;AAAA,QAEtC;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc,EAAE,UAAU,UAAU,YAAY,OAAO;AAAA,MACvD,iBAAiB,EAAE,UAAU,OAAO,YAAY,OAAO;AAAA,MACvD,iBAAiB;AAAA,MACjB,IAAI;AAAA,MACJ,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,YAAY,WAAW,OAAO,UAAU,UAAU,EAAE,EAAE;AAAA,MAEpF;AAAA;AAAA,EACH;AAEJ;","names":[]}