@12-apps/ui 6.10.1 → 6.11.1

package/dist/chunk-TERT6TIS.js

@@ -0,0 +1,77 @@
+// src/components/form/Calendar/Calendar.dates.ts
+var DAYS_PER_WEEK = 7;
+var MAX_CELLS = 42;
+var NOON = 12;
+var normalizeDate = (date) => {
+  const normalized = new Date(date);
+  normalized.setHours(NOON, 0, 0, 0);
+  return normalized;
+};
+var isSameDay = (date1, date2) => date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+var isBetween = (date, start, end) => {
+  const normalized = normalizeDate(date);
+  return normalized >= normalizeDate(start) && normalized <= normalizeDate(end);
+};
+var addDays = (date, days) => {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+};
+var addMonths = (date, months) => {
+  const result = new Date(date);
+  result.setMonth(result.getMonth() + months);
+  return result;
+};
+var startOfWeek = (date, firstDayOfWeek = 0) => {
+  const result = new Date(date);
+  const day = result.getDay();
+  const diff = (day < firstDayOfWeek ? DAYS_PER_WEEK : 0) + day - firstDayOfWeek;
+  result.setDate(result.getDate() - diff);
+  return result;
+};
+var endOfMonth = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0);
+var dayKey = (date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+var generateMonthMatrix = (month, year, firstDayOfWeek = 0) => {
+  const firstDay = new Date(year, month, 1);
+  const lastDay = endOfMonth(firstDay);
+  const currentDate = startOfWeek(firstDay, firstDayOfWeek);
+  const weeks = [];
+  let currentWeek = [];
+  for (let i = 0; i < MAX_CELLS; i++) {
+    currentWeek.push({
+      date: new Date(currentDate),
+      inCurrentMonth: currentDate.getMonth() === month,
+      key: dayKey(currentDate)
+    });
+    if (currentWeek.length === DAYS_PER_WEEK) {
+      weeks.push(currentWeek);
+      currentWeek = [];
+    }
+    currentDate.setDate(currentDate.getDate() + 1);
+    if (currentWeek.length === 0 && currentDate > lastDay) break;
+  }
+  return { weeks, month, year };
+};
+var getWeekdayNames = (locale = "en-US", firstDayOfWeek = 0) => {
+  const baseDate = new Date(2025, 0, 5);
+  const weekdays = [];
+  for (let i = 0; i < DAYS_PER_WEEK; i++) {
+    const date = addDays(baseDate, (i + firstDayOfWeek) % DAYS_PER_WEEK);
+    weekdays.push(date.toLocaleDateString(locale, { weekday: "narrow" }));
+  }
+  return weekdays;
+};
+var getMonthName = (month, year, locale = "en-US") => new Date(year, month, 1).toLocaleDateString(locale, { month: "long", year: "numeric" });
+
+export {
+  normalizeDate,
+  isSameDay,
+  isBetween,
+  addDays,
+  addMonths,
+  startOfWeek,
+  generateMonthMatrix,
+  getWeekdayNames,
+  getMonthName
+};
+//# sourceMappingURL=chunk-TERT6TIS.js.map

package/dist/chunk-TERT6TIS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Calendar/Calendar.dates.ts"],"sourcesContent":["import type { MonthMatrix, MonthMatrixDay } from './Calendar.types';\n\nconst DAYS_PER_WEEK = 7;\n// Six rows always cover a month, whichever weekday it starts on.\nconst MAX_CELLS = 42;\nconst NOON = 12;\n\n// Every comparison happens at noon so daylight-saving shifts can never move a\n// date across a day boundary.\nexport const normalizeDate = (date: Date): Date => {\n  const normalized = new Date(date);\n  normalized.setHours(NOON, 0, 0, 0);\n  return normalized;\n};\n\nexport const isSameDay = (date1: Date, date2: Date): boolean =>\n  date1.getFullYear() === date2.getFullYear() &&\n  date1.getMonth() === date2.getMonth() &&\n  date1.getDate() === date2.getDate();\n\nexport const isBetween = (date: Date, start: Date, end: Date): boolean => {\n  const normalized = normalizeDate(date);\n  return normalized >= normalizeDate(start) && normalized <= normalizeDate(end);\n};\n\nexport const addDays = (date: Date, days: number): Date => {\n  const result = new Date(date);\n  result.setDate(result.getDate() + days);\n  return result;\n};\n\nexport const addMonths = (date: Date, months: number): Date => {\n  const result = new Date(date);\n  result.setMonth(result.getMonth() + months);\n  return result;\n};\n\nexport const startOfWeek = (date: Date, firstDayOfWeek = 0): Date => {\n  const result = new Date(date);\n  const day = result.getDay();\n  const diff = (day < firstDayOfWeek ? DAYS_PER_WEEK : 0) + day - firstDayOfWeek;\n  result.setDate(result.getDate() - diff);\n  return result;\n};\n\n// Day 0 of the next month is the last day of this one.\nconst endOfMonth = (date: Date): Date =>\n  new Date(date.getFullYear(), date.getMonth() + 1, 0);\n\nconst dayKey = (date: Date): string =>\n  `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;\n\nexport const generateMonthMatrix = (\n  month: number,\n  year: number,\n  firstDayOfWeek = 0,\n): MonthMatrix => {\n  const firstDay = new Date(year, month, 1);\n  const lastDay = endOfMonth(firstDay);\n  const currentDate = startOfWeek(firstDay, firstDayOfWeek);\n\n  const weeks: MonthMatrixDay[][] = [];\n  let currentWeek: MonthMatrixDay[] = [];\n\n  for (let i = 0; i < MAX_CELLS; i++) {\n    currentWeek.push({\n      date: new Date(currentDate),\n      inCurrentMonth: currentDate.getMonth() === month,\n      key: dayKey(currentDate),\n    });\n\n    if (currentWeek.length === DAYS_PER_WEEK) {\n      weeks.push(currentWeek);\n      currentWeek = [];\n    }\n\n    currentDate.setDate(currentDate.getDate() + 1);\n\n    // Stop on a week boundary once the month is behind us, so a month that fits\n    // in five rows does not get a trailing sixth.\n    if (currentWeek.length === 0 && currentDate > lastDay) break;\n  }\n\n  return { weeks, month, year };\n};\n\nexport const getWeekdayNames = (locale = 'en-US', firstDayOfWeek = 0): string[] => {\n  const baseDate = new Date(2025, 0, 5); // A Sunday\n  const weekdays: string[] = [];\n\n  for (let i = 0; i < DAYS_PER_WEEK; i++) {\n    const date = addDays(baseDate, (i + firstDayOfWeek) % DAYS_PER_WEEK);\n    weekdays.push(date.toLocaleDateString(locale, { weekday: 'narrow' }));\n  }\n\n  return weekdays;\n};\n\nexport const getMonthName = (month: number, year: number, locale = 'en-US'): string =>\n  new Date(year, month, 1).toLocaleDateString(locale, { month: 'long', year: 'numeric' });\n"],"mappings":";AAEA,IAAM,gBAAgB;AAEtB,IAAM,YAAY;AAClB,IAAM,OAAO;AAIN,IAAM,gBAAgB,CAAC,SAAqB;AACjD,QAAM,aAAa,IAAI,KAAK,IAAI;AAChC,aAAW,SAAS,MAAM,GAAG,GAAG,CAAC;AACjC,SAAO;AACT;AAEO,IAAM,YAAY,CAAC,OAAa,UACrC,MAAM,YAAY,MAAM,MAAM,YAAY,KAC1C,MAAM,SAAS,MAAM,MAAM,SAAS,KACpC,MAAM,QAAQ,MAAM,MAAM,QAAQ;AAE7B,IAAM,YAAY,CAAC,MAAY,OAAa,QAAuB;AACxE,QAAM,aAAa,cAAc,IAAI;AACrC,SAAO,cAAc,cAAc,KAAK,KAAK,cAAc,cAAc,GAAG;AAC9E;AAEO,IAAM,UAAU,CAAC,MAAY,SAAuB;AACzD,QAAM,SAAS,IAAI,KAAK,IAAI;AAC5B,SAAO,QAAQ,OAAO,QAAQ,IAAI,IAAI;AACtC,SAAO;AACT;AAEO,IAAM,YAAY,CAAC,MAAY,WAAyB;AAC7D,QAAM,SAAS,IAAI,KAAK,IAAI;AAC5B,SAAO,SAAS,OAAO,SAAS,IAAI,MAAM;AAC1C,SAAO;AACT;AAEO,IAAM,cAAc,CAAC,MAAY,iBAAiB,MAAY;AACnE,QAAM,SAAS,IAAI,KAAK,IAAI;AAC5B,QAAM,MAAM,OAAO,OAAO;AAC1B,QAAM,QAAQ,MAAM,iBAAiB,gBAAgB,KAAK,MAAM;AAChE,SAAO,QAAQ,OAAO,QAAQ,IAAI,IAAI;AACtC,SAAO;AACT;AAGA,IAAM,aAAa,CAAC,SAClB,IAAI,KAAK,KAAK,YAAY,GAAG,KAAK,SAAS,IAAI,GAAG,CAAC;AAErD,IAAM,SAAS,CAAC,SACd,GAAG,KAAK,YAAY,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,KAAK,QAAQ,CAAC;AAErD,IAAM,sBAAsB,CACjC,OACA,MACA,iBAAiB,MACD;AAChB,QAAM,WAAW,IAAI,KAAK,MAAM,OAAO,CAAC;AACxC,QAAM,UAAU,WAAW,QAAQ;AACnC,QAAM,cAAc,YAAY,UAAU,cAAc;AAExD,QAAM,QAA4B,CAAC;AACnC,MAAI,cAAgC,CAAC;AAErC,WAAS,IAAI,GAAG,IAAI,WAAW,KAAK;AAClC,gBAAY,KAAK;AAAA,MACf,MAAM,IAAI,KAAK,WAAW;AAAA,MAC1B,gBAAgB,YAAY,SAAS,MAAM;AAAA,MAC3C,KAAK,OAAO,WAAW;AAAA,IACzB,CAAC;AAED,QAAI,YAAY,WAAW,eAAe;AACxC,YAAM,KAAK,WAAW;AACtB,oBAAc,CAAC;AAAA,IACjB;AAEA,gBAAY,QAAQ,YAAY,QAAQ,IAAI,CAAC;AAI7C,QAAI,YAAY,WAAW,KAAK,cAAc,QAAS;AAAA,EACzD;AAEA,SAAO,EAAE,OAAO,OAAO,KAAK;AAC9B;AAEO,IAAM,kBAAkB,CAAC,SAAS,SAAS,iBAAiB,MAAgB;AACjF,QAAM,WAAW,IAAI,KAAK,MAAM,GAAG,CAAC;AACpC,QAAM,WAAqB,CAAC;AAE5B,WAAS,IAAI,GAAG,IAAI,eAAe,KAAK;AACtC,UAAM,OAAO,QAAQ,WAAW,IAAI,kBAAkB,aAAa;AACnE,aAAS,KAAK,KAAK,mBAAmB,QAAQ,EAAE,SAAS,SAAS,CAAC,CAAC;AAAA,EACtE;AAEA,SAAO;AACT;AAEO,IAAM,eAAe,CAAC,OAAe,MAAc,SAAS,YACjE,IAAI,KAAK,MAAM,OAAO,CAAC,EAAE,mBAAmB,QAAQ,EAAE,OAAO,QAAQ,MAAM,UAAU,CAAC;","names":[]}

package/dist/chunk-TFTGMFW7.js

@@ -0,0 +1,148 @@
+import {
+  SettingsStatusMarker
+} from "./chunk-BTOFGWM2.js";
+import {
+  TOUCH_TARGET
+} from "./chunk-S7KQOZ7X.js";
+
+// src/components/layout/SettingsLayout/SettingsSectionChips.tsx
+import { alpha, Box, useTheme } from "@mui/material";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CHIP_HEIGHT = 34;
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function useCentreActiveChip(stripRef, activeItemId, itemsKey) {
+  useEffect(() => {
+    const strip = stripRef.current;
+    if (!strip || !activeItemId) return;
+    const chip = Array.from(strip.children).find(
+      (node) => node instanceof HTMLElement && node.dataset.chipId === activeItemId
+    );
+    if (!chip) return;
+    if (typeof strip.scrollTo !== "function") return;
+    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;
+    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));
+    strip.scrollTo({ left, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+  }, [stripRef, activeItemId, itemsKey]);
+}
+function SectionChip({
+  item,
+  active,
+  theme,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix
+}) {
+  const asLink = item.href !== void 0 && linkComponent !== void 0;
+  const behaviour = asLink ? { component: linkComponent, href: item.href } : { component: "button", type: "button", onClick: () => onSelectItem?.(item.id) };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...behaviour,
+      "data-chip-id": item.id,
+      "data-testid": `${testIdPrefix}-chip-${item.id}`,
+      "aria-current": active ? "page" : void 0,
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.75,
+        flex: "0 0 auto",
+        position: "relative",
+        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.
+        //
+        // Shrinking `minHeight` alone would have bought a slimmer strip with a
+        // smaller hit area — on the one width where the strip IS the navigation
+        // and the input is a thumb. The `::after` below keeps the tappable
+        // region at the full target while the pill itself takes less room, so
+        // this is a visual change and not an accessibility trade.
+        minHeight: CHIP_HEIGHT,
+        px: 1.5,
+        borderRadius: 999,
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: "0.8125rem",
+        fontWeight: active ? 700 : 500,
+        textDecoration: "none",
+        whiteSpace: "nowrap",
+        color: active ? "primary.main" : "text.secondary",
+        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : "transparent",
+        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,
+        // Spans the chip's width only, so neighbours never overlap: the strip
+        // is a row, and the extra reach is vertical.
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          insetInlineStart: 0,
+          insetInlineEnd: 0,
+          top: "50%",
+          transform: "translateY(-50%)",
+          height: TOUCH_TARGET
+        }
+      },
+      children: [
+        item.status ? /* @__PURE__ */ jsx(
+          SettingsStatusMarker,
+          {
+            status: item.status,
+            label: item.statusLabel,
+            testId: `${testIdPrefix}-chip-status-${item.id}`
+          }
+        ) : null,
+        item.label
+      ]
+    }
+  );
+}
+function SettingsSectionChips({
+  items,
+  activeItemId,
+  ariaLabel,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix
+}) {
+  const theme = useTheme();
+  const stripRef = useRef(null);
+  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join("\0"));
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: stripRef,
+      component: "nav",
+      "aria-label": ariaLabel,
+      "data-testid": `${testIdPrefix}-chips`,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.75,
+        px: 0.25,
+        py: 0.25,
+        overflowX: "auto",
+        overflowY: "hidden",
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": { display: "none" }
+      },
+      children: items.map((item) => /* @__PURE__ */ jsx(
+        SectionChip,
+        {
+          item,
+          active: item.id === activeItemId,
+          theme,
+          linkComponent,
+          onSelectItem,
+          testIdPrefix
+        },
+        item.id
+      ))
+    }
+  );
+}
+SettingsSectionChips.displayName = "SettingsSectionChips";
+
+export {
+  SettingsSectionChips
+};
+//# sourceMappingURL=chunk-TFTGMFW7.js.map

package/dist/chunk-TFTGMFW7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionChips.tsx"],"sourcesContent":["'use client';\n\nimport { alpha, Box, useTheme, type Theme } from '@mui/material';\nimport React, { useEffect, useRef, type RefObject } from 'react';\n\nimport { SettingsStatusMarker } from './SettingsStatusMarker';\nimport { TOUCH_TARGET } from './SettingsLayout.styles';\n\n/**\n * The chip's drawn height, against `TOUCH_TARGET`'s 44 for the tappable one.\n *\n * The strip sits between a section's header and its first field on the width\n * with the least room for either, so the pill is sized to its text rather than\n * to the thumb — and the thumb is served by the hit area instead.\n */\nconst CHIP_HEIGHT = 34;\nimport type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout.types';\n\nexport interface SettingsSectionChipsProps {\n  /** The sibling sections to offer — usually the open item's own group. */\n  items: SettingsNavItem[];\n  /** Which one is open. */\n  activeItemId?: string;\n  /** Accessible name of the strip, in the host's language. */\n  ariaLabel: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}\n\n/** True when the visitor asked the OS for less movement. Re-read per scroll. */\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Keep the open section's chip in view, however the visitor got here.\n *\n * Keyed on `activeItemId` in an effect rather than done in a click handler:\n * arriving by the desktop rail, by a card, by a pasted link and by the browser's\n * back button all have to land the same way, and only one of those is a click on\n * a chip. Every re-render otherwise starts the strip at scroll 0, which parks\n * the active chip off the right edge on any list longer than a screen — the\n * visitor is told where they are by an element they cannot see.\n *\n * `itemsKey` rather than `items`: a host almost always rebuilds that array per\n * render (`groups.flatMap(...)`), and depending on it would re-run this on every\n * render and yank the strip back mid-drag.\n *\n * The key joins on NUL — as the ESCAPE `'\\u0000'`, which it must stay. A\n * literal NUL byte works identically at runtime and makes git classify this file\n * as BINARY: `git diff` prints \"Binary file not shown\" and the GitHub review UI\n * shows nothing at all. This file shipped that way once, and the cost was not\n * the byte — it was a whole change nobody could read.\n */\nfunction useCentreActiveChip(\n  stripRef: RefObject<HTMLDivElement | null>,\n  activeItemId: string | undefined,\n  itemsKey: string,\n): void {\n  useEffect(() => {\n    const strip = stripRef.current;\n    if (!strip || !activeItemId) return;\n    // Walked rather than selected: an id is host data, and a section id carrying\n    // a quote would turn a selector string into a thrown SyntaxError — which\n    // here would take the whole strip down to centre one chip.\n    const chip = Array.from(strip.children).find(\n      (node): node is HTMLElement =>\n        node instanceof HTMLElement && node.dataset.chipId === activeItemId,\n    );\n    if (!chip) return;\n    // Feature-checked, not assumed. `Element.scrollTo` is absent in jsdom and in\n    // a few embedded webviews, and an unguarded call there THROWS out of an\n    // effect — which React escalates to the nearest error boundary. The whole\n    // settings area would go down to centre one chip, and the host's own tests\n    // could not render the shell at all. Same reasoning as walking the children\n    // instead of building a selector: nothing in here is worth a crash.\n    if (typeof strip.scrollTo !== 'function') return;\n    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;\n    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));\n    strip.scrollTo({ left, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });\n  }, [stripRef, activeItemId, itemsKey]);\n}\n\n/** One chip: a link when the host gave it a target, else a button. */\nfunction SectionChip({\n  item,\n  active,\n  theme,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: {\n  item: SettingsNavItem;\n  active: boolean;\n  theme: Theme;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const asLink = item.href !== undefined && linkComponent !== undefined;\n  const behaviour = asLink\n    ? { component: linkComponent, href: item.href }\n    : { component: 'button' as const, type: 'button' as const, onClick: () => onSelectItem?.(item.id) };\n\n  return (\n    <Box\n      {...behaviour}\n      data-chip-id={item.id}\n      data-testid={`${testIdPrefix}-chip-${item.id}`}\n      aria-current={active ? 'page' : undefined}\n      sx={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 0.75,\n        flex: '0 0 auto',\n        position: 'relative',\n        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.\n        //\n        // Shrinking `minHeight` alone would have bought a slimmer strip with a\n        // smaller hit area — on the one width where the strip IS the navigation\n        // and the input is a thumb. The `::after` below keeps the tappable\n        // region at the full target while the pill itself takes less room, so\n        // this is a visual change and not an accessibility trade.\n        minHeight: CHIP_HEIGHT,\n        px: 1.5,\n        borderRadius: 999,\n        cursor: 'pointer',\n        font: 'inherit',\n        fontSize: '0.8125rem',\n        fontWeight: active ? 700 : 500,\n        textDecoration: 'none',\n        whiteSpace: 'nowrap',\n        color: active ? 'primary.main' : 'text.secondary',\n        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : 'transparent',\n        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,\n        // Spans the chip's width only, so neighbours never overlap: the strip\n        // is a row, and the extra reach is vertical.\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          insetInlineStart: 0,\n          insetInlineEnd: 0,\n          top: '50%',\n          transform: 'translateY(-50%)',\n          height: TOUCH_TARGET,\n        },\n      }}\n    >\n      {item.status ? (\n        <SettingsStatusMarker\n          status={item.status}\n          label={item.statusLabel}\n          testId={`${testIdPrefix}-chip-status-${item.id}`}\n        />\n      ) : null}\n      {item.label}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width section strip: horizontally scrollable chips for the sections\n * beside the open one.\n *\n * It clips its own overflow — `overflow-x: auto` on the strip, never on an\n * ancestor. A strip that pushes the page wide makes every OTHER screen at that\n * width scroll sideways too, and the cause is nowhere near the symptom.\n */\nexport function SettingsSectionChips({\n  items,\n  activeItemId,\n  ariaLabel,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: SettingsSectionChipsProps): React.JSX.Element {\n  const theme = useTheme();\n  const stripRef = useRef<HTMLDivElement | null>(null);\n  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join('\\u0000'));\n\n  return (\n    <Box\n      ref={stripRef}\n      component=\"nav\"\n      aria-label={ariaLabel}\n      data-testid={`${testIdPrefix}-chips`}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.75,\n        px: 0.25,\n        py: 0.25,\n        overflowX: 'auto',\n        overflowY: 'hidden',\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n      }}\n    >\n      {items.map((item) => (\n        <SectionChip\n          key={item.id}\n          item={item}\n          active={item.id === activeItemId}\n          theme={theme}\n          linkComponent={linkComponent}\n          onSelectItem={onSelectItem}\n          testIdPrefix={testIdPrefix}\n        />\n      ))}\n    </Box>\n  );\n}\n\nSettingsSectionChips.displayName = 'SettingsSectionChips';\n"],"mappings":";;;;;;;;AAEA,SAAS,OAAO,KAAK,gBAA4B;AACjD,SAAgB,WAAW,cAA8B;AAwGrD,SA4CI,KA5CJ;AA5FJ,IAAM,cAAc;AAgBpB,SAAS,uBAAgC;AACvC,MAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,WAAY,QAAO;AACrF,SAAO,OAAO,WAAW,kCAAkC,EAAE;AAC/D;AAsBA,SAAS,oBACP,UACA,cACA,UACM;AACN,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,SAAS,CAAC,aAAc;AAI7B,UAAM,OAAO,MAAM,KAAK,MAAM,QAAQ,EAAE;AAAA,MACtC,CAAC,SACC,gBAAgB,eAAe,KAAK,QAAQ,WAAW;AAAA,IAC3D;AACA,QAAI,CAAC,KAAM;AAOX,QAAI,OAAO,MAAM,aAAa,WAAY;AAC1C,UAAM,SAAS,KAAK,aAAa,KAAK,cAAc,IAAI,MAAM,cAAc;AAC5E,UAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQ,MAAM,cAAc,MAAM,WAAW,CAAC;AAChF,UAAM,SAAS,EAAE,MAAM,UAAU,qBAAqB,IAAI,SAAS,SAAS,CAAC;AAAA,EAC/E,GAAG,CAAC,UAAU,cAAc,QAAQ,CAAC;AACvC;AAGA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOsB;AACpB,QAAM,SAAS,KAAK,SAAS,UAAa,kBAAkB;AAC5D,QAAM,YAAY,SACd,EAAE,WAAW,eAAe,MAAM,KAAK,KAAK,IAC5C,EAAE,WAAW,UAAmB,MAAM,UAAmB,SAAS,MAAM,eAAe,KAAK,EAAE,EAAE;AAEpG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAc,KAAK;AAAA,MACnB,eAAa,GAAG,YAAY,SAAS,KAAK,EAAE;AAAA,MAC5C,gBAAc,SAAS,SAAS;AAAA,MAChC,IAAI;AAAA,QACF,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQV,WAAW;AAAA,QACX,IAAI;AAAA,QACJ,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,YAAY,SAAS,MAAM;AAAA,QAC3B,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,OAAO,SAAS,iBAAiB;AAAA,QACjC,SAAS,SAAS,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,IAAI;AAAA,QAC5D,QAAQ,aAAa,SAAS,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,IAAI,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA,QAG5F,YAAY;AAAA,UACV,SAAS;AAAA,UACT,UAAU;AAAA,UACV,kBAAkB;AAAA,UAClB,gBAAgB;AAAA,UAChB,KAAK;AAAA,UACL,WAAW;AAAA,UACX,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEC;AAAA,aAAK,SACJ;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,KAAK;AAAA,YACb,OAAO,KAAK;AAAA,YACZ,QAAQ,GAAG,YAAY,gBAAgB,KAAK,EAAE;AAAA;AAAA,QAChD,IACE;AAAA,QACH,KAAK;AAAA;AAAA;AAAA,EACR;AAEJ;AAUO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiD;AAC/C,QAAM,QAAQ,SAAS;AACvB,QAAM,WAAW,OAA8B,IAAI;AACnD,sBAAoB,UAAU,cAAc,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE,EAAE,KAAK,IAAQ,CAAC;AAEvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,cAAY;AAAA,MACZ,eAAa,GAAG,YAAY;AAAA,MAC5B,IAAI;AAAA,QACF,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,wBAAwB,EAAE,SAAS,OAAO;AAAA,MAC5C;AAAA,MAEC,gBAAM,IAAI,CAAC,SACV;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,QAAQ,KAAK,OAAO;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QANK,KAAK;AAAA,MAOZ,CACD;AAAA;AAAA,EACH;AAEJ;AAEA,qBAAqB,cAAc;","names":[]}

package/dist/chunk-THYO66RE.js

@@ -0,0 +1,140 @@
+import {
+  CheckGlyph,
+  DisclosureGlyph
+} from "./chunk-DMNZD3Q7.js";
+import {
+  METRICS,
+  checkboxBarSx,
+  checkboxSx,
+  chevronButtonSx,
+  markSx,
+  radioSx,
+  rowMetaSx,
+  rowNameSx,
+  rowSx,
+  sectionHeadSx
+} from "./chunk-5WN6ZIAH.js";
+import {
+  highlightSegments
+} from "./chunk-DVTCZR3K.js";
+
+// src/components/form/CategorySelect/CategoryRows.tsx
+import { Box } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function HighlightedName({
+  text,
+  query
+}) {
+  const segments = highlightSegments(text, query);
+  return /* @__PURE__ */ jsx(Fragment, { children: segments.map(
+    (segment, index) => segment.match ? /* @__PURE__ */ jsx(Box, { component: "mark", sx: markSx, children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsx("span", { children: segment.text }, `${segment.text}-${index}`)
+  ) });
+}
+function CategoryCheckbox({ state }) {
+  return /* @__PURE__ */ jsxs(Box, { sx: (theme) => checkboxSx(theme, state), "aria-hidden": "true", children: [
+    state === "on" && /* @__PURE__ */ jsx(CheckGlyph, {}),
+    state === "partial" && /* @__PURE__ */ jsx(Box, { sx: checkboxBarSx })
+  ] });
+}
+function CategoryRadio({ on }) {
+  return /* @__PURE__ */ jsx(Box, { 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,
+  copy
+}) {
+  const meta = rowMeta(selectedCount, showCounts, option.count);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      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__ */ jsx(
+          Box,
+          {
+            component: "button",
+            type: "button",
+            tabIndex: -1,
+            "aria-label": expanded ? copy.collapseCategory(option.name) : copy.expandCategory(option.name),
+            "data-testid": `${dataTestId}-expand-${option.id}`,
+            sx: (theme) => chevronButtonSx(theme, expanded),
+            onClick: (event) => {
+              event.stopPropagation();
+              onToggleExpanded();
+            },
+            children: /* @__PURE__ */ jsx(DisclosureGlyph, {})
+          }
+        ),
+        checkState ? /* @__PURE__ */ jsx(CategoryCheckbox, { state: checkState }) : /* @__PURE__ */ jsx(Box, { sx: { width: METRICS.boxSize, flex: "0 0 auto" } }),
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: (theme) => rowNameSx(theme, true), children: /* @__PURE__ */ jsx(HighlightedName, { text: option.name, query }) }),
+        meta && /* @__PURE__ */ jsx(Box, { component: "span", sx: (theme) => rowMetaSx(theme, meta.selected), children: meta.text })
+      ]
+    }
+  );
+}
+function SubcategoryRow({
+  option,
+  query,
+  selected,
+  active,
+  sheet,
+  single,
+  showCounts,
+  onActivate,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      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__ */ jsx(Box, { sx: { width: METRICS.chevronButton, flex: "0 0 auto" } }),
+        single ? /* @__PURE__ */ jsx(CategoryRadio, { on: selected }) : /* @__PURE__ */ jsx(CategoryCheckbox, { state: selected ? "on" : "off" }),
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: (theme) => rowNameSx(theme, false), children: /* @__PURE__ */ jsx(HighlightedName, { text: option.name, query }) }),
+        showCounts && option.count !== void 0 && /* @__PURE__ */ jsx(Box, { component: "span", sx: (theme) => rowMetaSx(theme, false), children: option.count })
+      ]
+    }
+  );
+}
+function CategorySectionHeading({
+  option,
+  query
+}) {
+  return /* @__PURE__ */ jsx(Box, { sx: sectionHeadSx, children: /* @__PURE__ */ jsx(HighlightedName, { text: option.name, query }) });
+}
+
+export {
+  HighlightedName,
+  CategoryCheckbox,
+  CategoryRadio,
+  CategoryHeadRow,
+  SubcategoryRow,
+  CategorySectionHeading
+};
+//# sourceMappingURL=chunk-THYO66RE.js.map

package/dist/chunk-THYO66RE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategoryRows.tsx"],"sourcesContent":["'use client';\n\nimport { Box } from '@mui/material';\n\nimport type { CategorySelectCopy } from '../../../copy';\nimport { CheckGlyph, DisclosureGlyph } from './CategoryIcons';\nimport { highlightSegments, type CategoryCheckState } from './category-tree';\nimport {\n  checkboxBarSx,\n  checkboxSx,\n  chevronButtonSx,\n  markSx,\n  METRICS,\n  radioSx,\n  rowMetaSx,\n  rowNameSx,\n  rowSx,\n  sectionHeadSx,\n} from './CategorySelect.styles';\nimport type { CategorySelectOption } from './CategorySelect.types';\n\n/** A label with the search hit marked. */\nexport function HighlightedName({\n  text,\n  query,\n}: {\n  text: string;\n  query: string;\n}): React.JSX.Element {\n  const segments = highlightSegments(text, query);\n  return (\n    <>\n      {segments.map((segment, index) =>\n        segment.match ? (\n          <Box component=\"mark\" key={`${segment.text}-${index}`} sx={markSx}>\n            {segment.text}\n          </Box>\n        ) : (\n          <span key={`${segment.text}-${index}`}>{segment.text}</span>\n        ),\n      )}\n    </>\n  );\n}\n\n/** Tri-state checkbox. `partial` draws the bar the prototype uses for \"some\". */\nexport function CategoryCheckbox({ state }: { state: CategoryCheckState }): React.JSX.Element {\n  return (\n    <Box sx={(theme) => checkboxSx(theme, state)} aria-hidden=\"true\">\n      {state === 'on' && <CheckGlyph />}\n      {state === 'partial' && <Box sx={checkboxBarSx} />}\n    </Box>\n  );\n}\n\nexport function CategoryRadio({ on }: { on: boolean }): React.JSX.Element {\n  return <Box sx={(theme) => radioSx(theme, on)} aria-hidden=\"true\" />;\n}\n\ninterface CategoryHeadRowProps {\n  option: CategorySelectOption;\n  query: string;\n  expanded: boolean;\n  active: boolean;\n  sheet: boolean;\n  /** Absent in leaf-only mode, where the category is a heading with no checkbox. */\n  checkState?: CategoryCheckState;\n  selectedCount: number;\n  showCounts: boolean;\n  onToggleExpanded: () => void;\n  onActivate: () => void;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}\n\n/** The trailing number: how many children are picked, else the item count. */\nfunction rowMeta(\n  selectedCount: number,\n  showCounts: boolean,\n  count: number | undefined,\n): { text: string; selected: boolean } | null {\n  if (selectedCount > 0) return { text: String(selectedCount), selected: true };\n  if (showCounts && count !== undefined) return { text: String(count), selected: false };\n  return null;\n}\n\n/**\n * A top-level category row: disclosure chevron, optional checkbox, name, meta.\n *\n * The chevron is its OWN button inside the row button — clicking it only folds,\n * while clicking the row does the row's job (expand as a heading, or tick when\n * parents are selectable).\n */\nexport function CategoryHeadRow({\n  option,\n  query,\n  expanded,\n  active,\n  sheet,\n  checkState,\n  selectedCount,\n  showCounts,\n  onToggleExpanded,\n  onActivate,\n  dataTestId,\n  copy,\n}: CategoryHeadRowProps): React.JSX.Element {\n  const meta = rowMeta(selectedCount, showCounts, option.count);\n  return (\n    <Box\n      component=\"div\"\n      role={checkState ? 'option' : 'button'}\n      aria-selected={checkState ? checkState === 'on' : undefined}\n      aria-expanded={expanded}\n      data-testid={`${dataTestId}-category-${option.id}`}\n      sx={(theme) => rowSx(theme, active, sheet)}\n      onClick={onActivate}\n    >\n      <Box\n        component=\"button\"\n        type=\"button\"\n        tabIndex={-1}\n        aria-label={\n          expanded ? copy.collapseCategory(option.name) : copy.expandCategory(option.name)\n        }\n        data-testid={`${dataTestId}-expand-${option.id}`}\n        sx={(theme) => chevronButtonSx(theme, expanded)}\n        onClick={(event: React.MouseEvent) => {\n          event.stopPropagation();\n          onToggleExpanded();\n        }}\n      >\n        <DisclosureGlyph />\n      </Box>\n      {checkState ? (\n        <CategoryCheckbox state={checkState} />\n      ) : (\n        <Box sx={{ width: METRICS.boxSize, flex: '0 0 auto' }} />\n      )}\n      <Box component=\"span\" sx={(theme) => rowNameSx(theme, true)}>\n        <HighlightedName text={option.name} query={query} />\n      </Box>\n      {meta && (\n        <Box component=\"span\" sx={(theme) => rowMetaSx(theme, meta.selected)}>\n          {meta.text}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\ninterface SubcategoryRowProps {\n  option: CategorySelectOption;\n  query: string;\n  selected: boolean;\n  active: boolean;\n  sheet: boolean;\n  /** Single-select mode draws a radio; multi-select draws a checkbox. */\n  single: boolean;\n  showCounts: boolean;\n  onActivate: () => void;\n  dataTestId: string;\n}\n\nexport function SubcategoryRow({\n  option,\n  query,\n  selected,\n  active,\n  sheet,\n  single,\n  showCounts,\n  onActivate,\n  dataTestId,\n}: SubcategoryRowProps): React.JSX.Element {\n  return (\n    <Box\n      component=\"div\"\n      role=\"option\"\n      aria-selected={selected}\n      data-testid={`${dataTestId}-option-${option.id}`}\n      sx={(theme) => ({ ...rowSx(theme, active, sheet), paddingLeft: '14px' })}\n      onClick={onActivate}\n    >\n      <Box sx={{ width: METRICS.chevronButton, flex: '0 0 auto' }} />\n      {single ? (\n        <CategoryRadio on={selected} />\n      ) : (\n        <CategoryCheckbox state={selected ? 'on' : 'off'} />\n      )}\n      <Box component=\"span\" sx={(theme) => rowNameSx(theme, false)}>\n        <HighlightedName text={option.name} query={query} />\n      </Box>\n      {showCounts && option.count !== undefined && (\n        <Box component=\"span\" sx={(theme) => rowMetaSx(theme, false)}>\n          {option.count}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\n/** The category as a non-interactive heading (single-select, leaf-only). */\nexport function CategorySectionHeading({\n  option,\n  query,\n}: {\n  option: CategorySelectOption;\n  query: string;\n}): React.JSX.Element {\n  return (\n    <Box sx={sectionHeadSx}>\n      <HighlightedName text={option.name} query={query} />\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-TJT4KVMD.js

@@ -0,0 +1,170 @@
+import {
+  RichTextEditorToolbar
+} from "./chunk-DU4ZMVNY.js";
+import {
+  useRichTextEditor
+} from "./chunk-774B27QA.js";
+
+// src/components/form/RichTextEditor/RichTextEditor.tsx
+import {
+  alpha,
+  Box,
+  Paper,
+  useTheme
+} from "@mui/material";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_TOOLBAR = {
+  bold: true,
+  italic: true,
+  underline: true,
+  strikethrough: false,
+  orderedList: true,
+  unorderedList: true,
+  link: true,
+  image: false,
+  codeBlock: false,
+  quote: false,
+  customItems: []
+};
+var RICH_TEXT_DEFAULTS = {
+  value: "",
+  placeholder: "Start typing...",
+  disabled: false,
+  readOnly: false,
+  toolbar: {},
+  height: 300
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, v]) => v !== void 0)
+);
+var editorContentSx = (theme, disabled, placeholder, height) => ({
+  minHeight: typeof height === "number" ? `${height}px` : height,
+  p: 2,
+  outline: "none",
+  cursor: disabled ? "not-allowed" : "text",
+  "&:empty::before": {
+    content: `"${placeholder}"`,
+    color: theme.palette.text.disabled,
+    pointerEvents: "none"
+  },
+  "& p": {
+    margin: "8px 0",
+    "&:first-of-type": { marginTop: 0 },
+    "&:last-of-type": { marginBottom: 0 }
+  },
+  "& ul, & ol": { marginLeft: theme.spacing(2) },
+  "& blockquote": {
+    borderLeft: `4px solid ${theme.palette.primary.main}`,
+    paddingLeft: theme.spacing(2),
+    margin: `${theme.spacing(1)} 0`,
+    fontStyle: "italic",
+    backgroundColor: alpha(theme.palette.primary.main, 0.05)
+  },
+  "& pre": {
+    backgroundColor: alpha(theme.palette.text.primary, 0.08),
+    padding: theme.spacing(1),
+    borderRadius: 1,
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+    fontSize: "0.875rem",
+    overflow: "auto"
+  },
+  "& a": { color: theme.palette.primary.main, textDecoration: "underline" }
+});
+var shellSx = (theme, isFocused, disabled) => ({
+  border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
+  borderRadius: 1,
+  overflow: "hidden",
+  transition: "border-color 0.2s ease-in-out",
+  ...isFocused && {
+    borderColor: theme.palette.primary.main,
+    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`
+  },
+  ...disabled && {
+    backgroundColor: theme.palette.action.disabledBackground,
+    color: theme.palette.text.disabled
+  }
+});
+var RichTextEditor = forwardRef(
+  (editorProps, ref) => {
+    const {
+      value,
+      onChange,
+      placeholder,
+      disabled,
+      readOnly,
+      toolbar,
+      height,
+      maxLength,
+      onFocus,
+      onBlur,
+      className,
+      "data-testid": testId,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      ...props
+    } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) };
+    const theme = useTheme();
+    const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };
+    const editor = useRichTextEditor({
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      disabled,
+      readOnly,
+      maxLength
+    });
+    return /* @__PURE__ */ jsxs(
+      Paper,
+      {
+        ref,
+        className,
+        "data-testid": testId || "rich-text-editor",
+        elevation: 1,
+        sx: shellSx(theme, editor.isFocused, Boolean(disabled)),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            RichTextEditorToolbar,
+            {
+              config: toolbarConfig,
+              disabled: Boolean(disabled),
+              readOnly: Boolean(readOnly),
+              maxLength,
+              characterCount: editor.characterCount,
+              editorRef: editor.editorRef,
+              onFormat: editor.applyFormat
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: editor.editorRef,
+              contentEditable: !disabled && !readOnly,
+              onInput: editor.handleContentChange,
+              onFocus: editor.handleFocus,
+              onBlur: editor.handleBlur,
+              role: "textbox",
+              "aria-label": ariaLabel || "Rich text editor",
+              "aria-describedby": ariaDescribedBy,
+              "aria-multiline": "true",
+              tabIndex: disabled ? -1 : 0,
+              "data-testid": "editor-content",
+              suppressContentEditableWarning: true,
+              sx: editorContentSx(theme, Boolean(disabled), placeholder, height)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+RichTextEditor.displayName = "RichTextEditor";
+var RichTextEditor_default = RichTextEditor;
+
+export {
+  RichTextEditor,
+  RichTextEditor_default
+};
+//# sourceMappingURL=chunk-TJT4KVMD.js.map

package/dist/chunk-TJT4KVMD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["import {\n  alpha,\n  Box,\n  Paper,\n  useTheme } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nimport type { Theme } from '@mui/material';\nimport { useRichTextEditor } from './RichTextEditor.hooks';\nimport type { RichTextEditorProps, ToolbarConfig } from './RichTextEditor.types';\nimport { RichTextEditorToolbar } from './RichTextEditorToolbar';\n\nconst DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<ToolbarConfig, 'customItems'> = {\n  bold: true,\n  italic: true,\n  underline: true,\n  strikethrough: false,\n  orderedList: true,\n  unorderedList: true,\n  link: true,\n  image: false,\n  codeBlock: false,\n  quote: false,\n  customItems: [] };\n\nconst RICH_TEXT_DEFAULTS: Partial<RichTextEditorProps> = {\n  value: '',\n  placeholder: 'Start typing...',\n  disabled: false,\n  readOnly: false,\n  toolbar: {},\n  height: 300 };\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: RichTextEditorProps): Partial<RichTextEditorProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, v]) => v !== undefined),\n  ) as Partial<RichTextEditorProps>;\n\n// Simple inline formats are a tag swap; lists and the value-carrying formats\n// need their own handling. This was one nine-case switch.\nconst editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string, height?: string | number) => ({\n  minHeight: typeof height === 'number' ? `${height}px` : height,\n  p: 2,\n  outline: 'none',\n  cursor: disabled ? 'not-allowed' : 'text',\n  '&:empty::before': {\n    content: `\"${placeholder}\"`,\n    color: theme.palette.text.disabled,\n    pointerEvents: 'none' },\n  '& p': {\n    margin: '8px 0',\n    '&:first-of-type': { marginTop: 0 },\n    '&:last-of-type': { marginBottom: 0 } },\n  '& ul, & ol': { marginLeft: theme.spacing(2) },\n  '& blockquote': {\n    borderLeft: `4px solid ${theme.palette.primary.main}`,\n    paddingLeft: theme.spacing(2),\n    margin: `${theme.spacing(1)} 0`,\n    fontStyle: 'italic',\n    backgroundColor: alpha(theme.palette.primary.main, 0.05) },\n  '& pre': {\n    backgroundColor: alpha(theme.palette.text.primary, 0.08),\n    padding: theme.spacing(1),\n    borderRadius: 1,\n    fontFamily: 'Monaco, Menlo, \"Ubuntu Mono\", monospace',\n    fontSize: '0.875rem',\n    overflow: 'auto' },\n  '& a': { color: theme.palette.primary.main, textDecoration: 'underline' } });\n\nconst shellSx = (theme: Theme, isFocused: boolean, disabled: boolean) => ({\n  border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n  borderRadius: 1,\n  overflow: 'hidden',\n  transition: 'border-color 0.2s ease-in-out',\n  ...(isFocused && {\n    borderColor: theme.palette.primary.main,\n    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}` }),\n  ...(disabled && {\n    backgroundColor: theme.palette.action.disabledBackground,\n    color: theme.palette.text.disabled }) });\n\nexport const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(\n  (editorProps, ref) => {\n    const {\n      value,\n      onChange,\n      placeholder,\n      disabled,\n      readOnly,\n      toolbar,\n      height,\n      maxLength,\n      onFocus,\n      onBlur,\n      className,\n      'data-testid': testId,\n      'aria-label': ariaLabel,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) } as RichTextEditorProps;\n\n    const theme = useTheme();\n    const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };\n    const editor = useRichTextEditor({\n      value,\n      onChange,\n      onFocus,\n      onBlur,\n      disabled,\n      readOnly,\n      maxLength });\n\n    return (\n      <Paper\n        ref={ref}\n        className={className}\n        data-testid={testId || 'rich-text-editor'}\n        elevation={1}\n        sx={shellSx(theme, editor.isFocused, Boolean(disabled))}\n        {...props}\n      >\n        <RichTextEditorToolbar\n          config={toolbarConfig}\n          disabled={Boolean(disabled)}\n          readOnly={Boolean(readOnly)}\n          maxLength={maxLength}\n          characterCount={editor.characterCount}\n          editorRef={editor.editorRef}\n          onFormat={editor.applyFormat}\n        />\n\n        <Box\n          ref={editor.editorRef}\n          contentEditable={!disabled && !readOnly}\n          onInput={editor.handleContentChange}\n          onFocus={editor.handleFocus}\n          onBlur={editor.handleBlur}\n          role=\"textbox\"\n          aria-label={ariaLabel || 'Rich text editor'}\n          aria-describedby={ariaDescribedBy}\n          aria-multiline=\"true\"\n          tabIndex={disabled ? -1 : 0}\n          data-testid=\"editor-content\"\n          suppressContentEditableWarning\n          sx={editorContentSx(theme, Boolean(disabled), placeholder, height)}\n        />\n      </Paper>\n    );\n  },\n);\n\nRichTextEditor.displayName = 'RichTextEditor';\n\nexport default RichTextEditor;"],"mappings":"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","names":[]}

package/dist/chunk-TMSWLFL4.js

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

package/dist/chunk-TMSWLFL4.js.map

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