@12-apps/ui 6.11.0 → 6.12.0

package/dist/chunk-YRCK4I4C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/export-rows.ts"],"sourcesContent":["/**\n * Serialise rows and hand the browser a download.\n *\n * The companion of the grid's Export control, which emits a REQUEST and leaves\n * the producing to the host — this is the producing half, for the common case\n * where the host already has the rows and only needs a file out of them.\n *\n * Dependency-free on purpose: \"Excel\" is emitted as CSV, which Excel opens\n * natively. A spreadsheet library would add ~700KB to a bundle for column\n * widths nobody asked for, and the one thing a real `.xlsx` buys — types that\n * survive the round trip — is not something a CSV export of an admin list is\n * being asked for.\n */\n\ntype ExportFormat = 'csv' | 'json';\n\n/** One column of the exported file: its header, and how to read a row. */\nexport interface ExportColumn<T> {\n  /** Column header, used as the CSV column and the JSON key. */\n  header: string;\n  /** Extract the cell value for a row. */\n  value: (row: T) => string | number | boolean | null | undefined;\n}\n\nfunction escapeCsvCell(value: string): string {\n  // Quote when the cell contains a comma, a quote or a newline; double any\n  // embedded quote. Without this a name with a comma silently shifts every\n  // column after it by one, which reads as corrupt data rather than as a bug.\n  if (/[\",\\n\\r]/.test(value)) {\n    return `\"${value.replace(/\"/g, '\"\"')}\"`;\n  }\n  return value;\n}\n\nfunction toCsv<T>(rows: readonly T[], columns: readonly ExportColumn<T>[]): string {\n  const head = columns.map((column) => escapeCsvCell(column.header)).join(',');\n  const body = rows\n    .map((row) =>\n      columns\n        .map((column) => {\n          const cell = column.value(row);\n          return escapeCsvCell(cell == null ? '' : String(cell));\n        })\n        .join(','),\n    )\n    .join('\\n');\n  return `${head}\\n${body}`;\n}\n\nfunction toJson<T>(rows: readonly T[], columns: readonly ExportColumn<T>[]): string {\n  const records = rows.map((row) => {\n    const record: Record<string, string | number | boolean | null> = {};\n    for (const column of columns) {\n      const cell = column.value(row);\n      record[column.header] = cell == null ? null : (cell as string | number | boolean);\n    }\n    return record;\n  });\n  return JSON.stringify(records, null, 2);\n}\n\nfunction triggerDownload(content: string, filename: string, mimeType: string): void {\n  // A no-op without a document, so a module that imports this can still be\n  // loaded by a test runner or a server render without guarding the import.\n  if (typeof window === 'undefined') return;\n  const blob = new Blob([content], { type: mimeType });\n  const url = URL.createObjectURL(blob);\n  const anchor = document.createElement('a');\n  anchor.href = url;\n  anchor.download = filename;\n  document.body.appendChild(anchor);\n  anchor.click();\n  anchor.remove();\n  URL.revokeObjectURL(url);\n}\n\n/**\n * Serialise `rows` using `columns` and download them as `<baseName>.<ext>`.\n *\n * @param format - `csv` (also what the Excel option produces) or `json`.\n * @param baseName - File name without extension; the consumer's word for the\n *   collection, so it is never derived from a type name here.\n */\nexport function exportRows<T>(\n  format: ExportFormat,\n  rows: readonly T[],\n  columns: readonly ExportColumn<T>[],\n  baseName: string,\n): void {\n  if (format === 'json') {\n    triggerDownload(toJson(rows, columns), `${baseName}.json`, 'application/json');\n    return;\n  }\n  triggerDownload(toCsv(rows, columns), `${baseName}.csv`, 'text/csv;charset=utf-8');\n}\n"],"mappings":";AAwBA,SAAS,cAAc,OAAuB;AAI5C,MAAI,WAAW,KAAK,KAAK,GAAG;AAC1B,WAAO,IAAI,MAAM,QAAQ,MAAM,IAAI,CAAC;AAAA,EACtC;AACA,SAAO;AACT;AAEA,SAAS,MAAS,MAAoB,SAA6C;AACjF,QAAM,OAAO,QAAQ,IAAI,CAAC,WAAW,cAAc,OAAO,MAAM,CAAC,EAAE,KAAK,GAAG;AAC3E,QAAM,OAAO,KACV;AAAA,IAAI,CAAC,QACJ,QACG,IAAI,CAAC,WAAW;AACf,YAAM,OAAO,OAAO,MAAM,GAAG;AAC7B,aAAO,cAAc,QAAQ,OAAO,KAAK,OAAO,IAAI,CAAC;AAAA,IACvD,CAAC,EACA,KAAK,GAAG;AAAA,EACb,EACC,KAAK,IAAI;AACZ,SAAO,GAAG,IAAI;AAAA,EAAK,IAAI;AACzB;AAEA,SAAS,OAAU,MAAoB,SAA6C;AAClF,QAAM,UAAU,KAAK,IAAI,CAAC,QAAQ;AAChC,UAAM,SAA2D,CAAC;AAClE,eAAW,UAAU,SAAS;AAC5B,YAAM,OAAO,OAAO,MAAM,GAAG;AAC7B,aAAO,OAAO,MAAM,IAAI,QAAQ,OAAO,OAAQ;AAAA,IACjD;AACA,WAAO;AAAA,EACT,CAAC;AACD,SAAO,KAAK,UAAU,SAAS,MAAM,CAAC;AACxC;AAEA,SAAS,gBAAgB,SAAiB,UAAkB,UAAwB;AAGlF,MAAI,OAAO,WAAW,YAAa;AACnC,QAAM,OAAO,IAAI,KAAK,CAAC,OAAO,GAAG,EAAE,MAAM,SAAS,CAAC;AACnD,QAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,QAAM,SAAS,SAAS,cAAc,GAAG;AACzC,SAAO,OAAO;AACd,SAAO,WAAW;AAClB,WAAS,KAAK,YAAY,MAAM;AAChC,SAAO,MAAM;AACb,SAAO,OAAO;AACd,MAAI,gBAAgB,GAAG;AACzB;AASO,SAAS,WACd,QACA,MACA,SACA,UACM;AACN,MAAI,WAAW,QAAQ;AACrB,oBAAgB,OAAO,MAAM,OAAO,GAAG,GAAG,QAAQ,SAAS,kBAAkB;AAC7E;AAAA,EACF;AACA,kBAAgB,MAAM,MAAM,OAAO,GAAG,GAAG,QAAQ,QAAQ,wBAAwB;AACnF;","names":[]}

package/dist/chunk-YU26GBNX.js

@@ -0,0 +1,97 @@
+// src/components/form/Calendar/CalendarDay.tsx
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CELL_SIZE = 40;
+var CLASS_FLAGS = [
+  ["selected", "selected"],
+  ["inRange", "in-range"],
+  ["rangeStart", "range-start"],
+  ["rangeEnd", "range-end"],
+  ["disabled", "disabled"],
+  ["today", "today"],
+  ["outside", "outside"],
+  ["hovered", "hovered"],
+  ["focused", "focused"]
+];
+var dayClassNames = (state, custom) => [
+  "calendar-day",
+  ...CLASS_FLAGS.filter(([flag]) => state[flag]).map(([, name]) => name),
+  ...custom ? [custom] : []
+].join(" ");
+var isEndpoint = (day) => day.selected || day.rangeStart || day.rangeEnd;
+var backgroundFor = (day) => {
+  if (isEndpoint(day)) return "primary.main";
+  if (day.inRange || day.hovered) return "primary.light";
+  return "transparent";
+};
+var colorFor = (day, visible) => {
+  if (isEndpoint(day)) return "primary.contrastText";
+  if (day.disabled) return "text.disabled";
+  if (!visible) return "transparent";
+  return "text.primary";
+};
+var hoverBackgroundFor = (day) => {
+  if (day.disabled) return void 0;
+  return day.selected ? "primary.dark" : "action.hover";
+};
+var dayCellSx = (day, visible) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: CELL_SIZE,
+  height: CELL_SIZE,
+  border: "none",
+  borderRadius: 1,
+  cursor: day.disabled ? "not-allowed" : "pointer",
+  backgroundColor: backgroundFor(day),
+  color: colorFor(day, visible),
+  opacity: !day.inCurrentMonth && visible ? 0.5 : 1,
+  fontWeight: day.today ? "bold" : "normal",
+  "&:hover": {
+    backgroundColor: hoverBackgroundFor(day)
+  },
+  "&:focus": {
+    outline: "2px solid",
+    outlineColor: "primary.main",
+    outlineOffset: 1
+  }
+});
+var CalendarDay = ({
+  day,
+  focused,
+  showOutsideDays,
+  dayClassName,
+  onSelect,
+  onHover,
+  onHoverEnd
+}) => {
+  const visible = day.inCurrentMonth || showOutsideDays;
+  const state = { ...day, outside: !day.inCurrentMonth, focused };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "button",
+      role: "gridcell",
+      tabIndex: focused ? 0 : -1,
+      "aria-selected": day.selected,
+      "aria-disabled": day.disabled,
+      "aria-current": day.today ? "date" : void 0,
+      className: dayClassNames(state, dayClassName?.(day)),
+      "data-testid": `calendar-date-${day.date.getDate()}`,
+      onClick: () => onSelect(day.date),
+      onMouseEnter: () => onHover(day.date),
+      onMouseLeave: onHoverEnd,
+      sx: dayCellSx(day, visible),
+      children: [
+        day.selected && /* @__PURE__ */ jsx(Box, { component: "span", "data-testid": "calendar-selected-date", sx: { display: "none" } }),
+        day.today && /* @__PURE__ */ jsx(Box, { component: "span", "data-testid": "calendar-today", sx: { display: "none" } }),
+        visible ? day.date.getDate() : ""
+      ]
+    }
+  );
+};
+
+export {
+  CalendarDay
+};
+//# sourceMappingURL=chunk-YU26GBNX.js.map

package/dist/chunk-YU26GBNX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Calendar/CalendarDay.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport type { DayRenderArgs } from './Calendar.types';\n\nconst CELL_SIZE = 40;\n\ninterface DayState extends DayRenderArgs {\n  outside: boolean;\n  focused: boolean;\n}\n\n// Order matters: these land on the element in the order listed.\nconst CLASS_FLAGS: Array<[keyof DayState, string]> = [\n  ['selected', 'selected'],\n  ['inRange', 'in-range'],\n  ['rangeStart', 'range-start'],\n  ['rangeEnd', 'range-end'],\n  ['disabled', 'disabled'],\n  ['today', 'today'],\n  ['outside', 'outside'],\n  ['hovered', 'hovered'],\n  ['focused', 'focused'],\n];\n\nconst dayClassNames = (state: DayState, custom?: string): string =>\n  [\n    'calendar-day',\n    ...CLASS_FLAGS.filter(([flag]) => state[flag]).map(([, name]) => name),\n    ...(custom ? [custom] : []),\n  ].join(' ');\n\nconst isEndpoint = (day: DayRenderArgs): boolean =>\n  day.selected || day.rangeStart || day.rangeEnd;\n\nconst backgroundFor = (day: DayRenderArgs): string => {\n  if (isEndpoint(day)) return 'primary.main';\n  if (day.inRange || day.hovered) return 'primary.light';\n  return 'transparent';\n};\n\nconst colorFor = (day: DayRenderArgs, visible: boolean): string => {\n  if (isEndpoint(day)) return 'primary.contrastText';\n  if (day.disabled) return 'text.disabled';\n  // Outside days that are switched off still occupy the grid, they just have\n  // nothing to show.\n  if (!visible) return 'transparent';\n  return 'text.primary';\n};\n\nconst hoverBackgroundFor = (day: DayRenderArgs): string | undefined => {\n  if (day.disabled) return undefined;\n  return day.selected ? 'primary.dark' : 'action.hover';\n};\n\nconst dayCellSx = (day: DayRenderArgs, visible: boolean): SxProps<Theme> => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: CELL_SIZE,\n  height: CELL_SIZE,\n  border: 'none',\n  borderRadius: 1,\n  cursor: day.disabled ? 'not-allowed' : 'pointer',\n  backgroundColor: backgroundFor(day),\n  color: colorFor(day, visible),\n  opacity: !day.inCurrentMonth && visible ? 0.5 : 1,\n  fontWeight: day.today ? 'bold' : 'normal',\n  '&:hover': {\n    backgroundColor: hoverBackgroundFor(day),\n  },\n  '&:focus': {\n    outline: '2px solid',\n    outlineColor: 'primary.main',\n    outlineOffset: 1,\n  },\n});\n\nexport interface CalendarDayProps {\n  day: DayRenderArgs;\n  focused: boolean;\n  showOutsideDays: boolean;\n  dayClassName?: (args: DayRenderArgs) => string;\n  onSelect: (date: Date) => void;\n  onHover: (date: Date) => void;\n  onHoverEnd: () => void;\n}\n\nexport const CalendarDay: FC<CalendarDayProps> = ({\n  day,\n  focused,\n  showOutsideDays,\n  dayClassName,\n  onSelect,\n  onHover,\n  onHoverEnd,\n}) => {\n  const visible = day.inCurrentMonth || showOutsideDays;\n  const state: DayState = { ...day, outside: !day.inCurrentMonth, focused };\n\n  return (\n    <Box\n      component=\"button\"\n      role=\"gridcell\"\n      tabIndex={focused ? 0 : -1}\n      aria-selected={day.selected}\n      aria-disabled={day.disabled}\n      aria-current={day.today ? 'date' : undefined}\n      className={dayClassNames(state, dayClassName?.(day))}\n      data-testid={`calendar-date-${day.date.getDate()}`}\n      onClick={() => onSelect(day.date)}\n      onMouseEnter={() => onHover(day.date)}\n      onMouseLeave={onHoverEnd}\n      sx={dayCellSx(day, visible)}\n    >\n      {day.selected && (\n        <Box component=\"span\" data-testid=\"calendar-selected-date\" sx={{ display: 'none' }} />\n      )}\n      {day.today && (\n        <Box component=\"span\" data-testid=\"calendar-today\" sx={{ display: 'none' }} />\n      )}\n      {visible ? day.date.getDate() : ''}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-Z24VOTA7.js

@@ -0,0 +1,18 @@
+// src/pt-BR.utility.ts
+var PT_BR_INSTALL_PROMPT_COPY = {
+  title: "Instalar este aplicativo",
+  installLabel: "Instalar",
+  dismissLabel: "Dispensar o convite de instala\xE7\xE3o",
+  iosTapBefore: "Toque em",
+  iosTapAfter: 'e depois em "Adicionar \xE0 Tela de In\xEDcio"',
+  shareLabel: "Compartilhar"
+};
+var PT_BR_USER_AVATAR_COPY = {
+  signOut: "Sair"
+};
+
+export {
+  PT_BR_INSTALL_PROMPT_COPY,
+  PT_BR_USER_AVATAR_COPY
+};
+//# sourceMappingURL=chunk-Z24VOTA7.js.map

package/dist/chunk-Z24VOTA7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pt-BR.utility.ts"],"sourcesContent":["/**\n * The pt-BR pack for the utility family. Split out of `pt-BR.ts`, which is a\n * barrel over this folder — see that file for why.\n */\nimport type {\n  InstallPromptCopy,\n  UserAvatarCopy,\n} from './copy';\n\nexport const PT_BR_INSTALL_PROMPT_COPY: InstallPromptCopy = {\n  title: \"Instalar este aplicativo\",\n  installLabel: \"Instalar\",\n  dismissLabel: \"Dispensar o convite de instalação\",\n  iosTapBefore: \"Toque em\",\n  iosTapAfter: 'e depois em \"Adicionar à Tela de Início\"',\n  shareLabel: \"Compartilhar\",\n};\n\nexport const PT_BR_USER_AVATAR_COPY: UserAvatarCopy = {\n  signOut: \"Sair\",\n};\n"],"mappings":";AASO,IAAM,4BAA+C;AAAA,EAC1D,OAAO;AAAA,EACP,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa;AAAA,EACb,YAAY;AACd;AAEO,IAAM,yBAAyC;AAAA,EACpD,SAAS;AACX;","names":[]}

package/dist/chunk-Z56IO7OV.js

@@ -0,0 +1,59 @@
+import {
+  accentFor
+} from "./chunk-I6PZVHIT.js";
+
+// src/components/data-display/Carousel/Carousel.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var SIZES = {
+  xs: { height: 200, fontSize: "0.75rem" },
+  sm: { height: 300, fontSize: "0.875rem" },
+  md: { height: 400, fontSize: "1rem" },
+  lg: { height: 500, fontSize: "1.125rem" },
+  xl: { height: 600, fontSize: "1.25rem" }
+};
+var sizeStyles = (size) => SIZES[size] ?? SIZES.md;
+var SURFACES = {
+  glass: ({ theme, color, glass }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.9),
+    backdropFilter: "blur(20px)",
+    border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`
+  }),
+  gradient: ({ theme, color, gradient }) => ({
+    background: gradient ? `linear-gradient(135deg, ${alpha(accentFor(theme, color).light, 0.1)}, ${alpha(accentFor(theme, color).dark, 0.1)})` : "transparent"
+  }),
+  elevated: ({ theme }) => ({ boxShadow: theme.shadows[8] }),
+  minimal: () => ({ border: "none", boxShadow: "none" }),
+  cards: ({ theme }) => ({ padding: theme.spacing(2) }),
+  default: () => ({})
+};
+var containerStyles = (input) => {
+  const { theme, variant, size, color, height, width, glow, pulse } = input;
+  const accent = accentFor(theme, color).main;
+  return {
+    position: "relative",
+    width,
+    // A numeric height is taken literally; anything else falls back to the size
+    // preset, since a percentage cannot resolve against an unsized parent here.
+    height: typeof height === "number" ? height : sizeStyles(size).height,
+    overflow: "hidden",
+    borderRadius: theme.spacing(1),
+    transition: theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard
+    }),
+    ...glow && { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` },
+    ...pulse && {
+      animation: "pulse 2s infinite",
+      "@keyframes pulse": {
+        "0%": { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },
+        "70%": { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },
+        "100%": { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` }
+      }
+    },
+    ...(SURFACES[variant] ?? SURFACES.default)(input)
+  };
+};
+
+export {
+  containerStyles
+};
+//# sourceMappingURL=chunk-Z56IO7OV.js.map

package/dist/chunk-Z56IO7OV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Carousel/Carousel.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { CarouselProps } from './Carousel.types';\nimport { accentFor } from '../../../tokens/scales';\n\ntype Variant = NonNullable<CarouselProps['variant']>;\ntype Size = NonNullable<CarouselProps['size']>;\ntype Color = NonNullable<CarouselProps['color']>;\n\nconst SIZES: Record<Size, { height: number; fontSize: string }> = {\n  xs: { height: 200, fontSize: '0.75rem' },\n  sm: { height: 300, fontSize: '0.875rem' },\n  md: { height: 400, fontSize: '1rem' },\n  lg: { height: 500, fontSize: '1.125rem' },\n  xl: { height: 600, fontSize: '1.25rem' },\n};\n\nconst sizeStyles = (size: Size) => SIZES[size] ?? SIZES.md;\n\ninterface ContainerStyleInput {\n  theme: Theme;\n  variant: Variant;\n  size: Size;\n  color: Color;\n  height: number | string;\n  width: number | string;\n  glow: boolean;\n  pulse: boolean;\n  glass: boolean;\n  gradient: boolean;\n}\n\n/**\n * Each variant's own additions to the shared frame. The old switch re-spread the\n * same base, glow and pulse objects in all six arms before adding these; only\n * these differ, so the shared prefix is applied once by `containerStyles`.\n */\nconst SURFACES: Record<Variant, (input: ContainerStyleInput) => CSSObject> = {\n  glass: ({ theme, color, glass }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.9),\n    backdropFilter: 'blur(20px)',\n    border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,\n  }),\n\n  gradient: ({ theme, color, gradient }) => ({\n    background: gradient\n      ? `linear-gradient(135deg, ${alpha(accentFor(theme, color).light, 0.1)}, ${alpha(accentFor(theme, color).dark, 0.1)})`\n      : 'transparent',\n  }),\n\n  elevated: ({ theme }) => ({ boxShadow: theme.shadows[8] }),\n\n  minimal: () => ({ border: 'none', boxShadow: 'none' }),\n\n  cards: ({ theme }) => ({ padding: theme.spacing(2) }),\n\n  default: () => ({}),\n};\n\nexport const containerStyles = (input: ContainerStyleInput): CSSObject => {\n  const { theme, variant, size, color, height, width, glow, pulse } = input;\n  const accent = accentFor(theme, color).main;\n\n  return {\n    position: 'relative' as const,\n    width,\n    // A numeric height is taken literally; anything else falls back to the size\n    // preset, since a percentage cannot resolve against an unsized parent here.\n    height: typeof height === 'number' ? height : sizeStyles(size).height,\n    overflow: 'hidden',\n    borderRadius: theme.spacing(1),\n    transition: theme.transitions.create(['all'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    ...(glow && { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` }),\n    ...(pulse && {\n      animation: 'pulse 2s infinite',\n      '@keyframes pulse': {\n        '0%': { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },\n        '70%': { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },\n        '100%': { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` },\n      },\n    }),\n    ...(SURFACES[variant] ?? SURFACES.default)(input),\n  };\n};\n"],"mappings":";;;;;AAAA,SAAS,aAAa;AAUtB,IAAM,QAA4D;AAAA,EAChE,IAAI,EAAE,QAAQ,KAAK,UAAU,UAAU;AAAA,EACvC,IAAI,EAAE,QAAQ,KAAK,UAAU,WAAW;AAAA,EACxC,IAAI,EAAE,QAAQ,KAAK,UAAU,OAAO;AAAA,EACpC,IAAI,EAAE,QAAQ,KAAK,UAAU,WAAW;AAAA,EACxC,IAAI,EAAE,QAAQ,KAAK,UAAU,UAAU;AACzC;AAEA,IAAM,aAAa,CAAC,SAAe,MAAM,IAAI,KAAK,MAAM;AAoBxD,IAAM,WAAuE;AAAA,EAC3E,OAAO,CAAC,EAAE,OAAO,OAAO,MAAM,OAAO;AAAA,IACnC,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,QAAQ,MAAM,GAAG;AAAA,IACxE,gBAAgB;AAAA,IAChB,QAAQ,aAAa,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,EAC/D;AAAA,EAEA,UAAU,CAAC,EAAE,OAAO,OAAO,SAAS,OAAO;AAAA,IACzC,YAAY,WACR,2BAA2B,MAAM,UAAU,OAAO,KAAK,EAAE,OAAO,GAAG,CAAC,KAAK,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC,MACjH;AAAA,EACN;AAAA,EAEA,UAAU,CAAC,EAAE,MAAM,OAAO,EAAE,WAAW,MAAM,QAAQ,CAAC,EAAE;AAAA,EAExD,SAAS,OAAO,EAAE,QAAQ,QAAQ,WAAW,OAAO;AAAA,EAEpD,OAAO,CAAC,EAAE,MAAM,OAAO,EAAE,SAAS,MAAM,QAAQ,CAAC,EAAE;AAAA,EAEnD,SAAS,OAAO,CAAC;AACnB;AAEO,IAAM,kBAAkB,CAAC,UAA0C;AACxE,QAAM,EAAE,OAAO,SAAS,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,IAAI;AACpE,QAAM,SAAS,UAAU,OAAO,KAAK,EAAE;AAEvC,SAAO;AAAA,IACL,UAAU;AAAA,IACV;AAAA;AAAA;AAAA,IAGA,QAAQ,OAAO,WAAW,WAAW,SAAS,WAAW,IAAI,EAAE;AAAA,IAC/D,UAAU;AAAA,IACV,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,YAAY,MAAM,YAAY,OAAO,CAAC,KAAK,GAAG;AAAA,MAC5C,UAAU,MAAM,YAAY,SAAS;AAAA,IACvC,CAAC;AAAA,IACD,GAAI,QAAQ,EAAE,WAAW,YAAY,MAAM,QAAQ,GAAG,CAAC,GAAG;AAAA,IAC1D,GAAI,SAAS;AAAA,MACX,WAAW;AAAA,MACX,oBAAoB;AAAA,QAClB,MAAM,EAAE,WAAW,WAAW,MAAM,QAAQ,GAAG,CAAC,GAAG;AAAA,QACnD,OAAO,EAAE,WAAW,cAAc,MAAM,QAAQ,CAAC,CAAC,GAAG;AAAA,QACrD,QAAQ,EAAE,WAAW,WAAW,MAAM,QAAQ,CAAC,CAAC,GAAG;AAAA,MACrD;AAAA,IACF;AAAA,IACA,IAAI,SAAS,OAAO,KAAK,SAAS,SAAS,KAAK;AAAA,EAClD;AACF;","names":[]}

package/dist/chunk-Z5E2PXGN.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-XCT2ZLA6.js";
+import {
+  highlightSegments
+} from "./chunk-DVTCZR3K.js";
+
+// src/components/form/CategorySelect/CategoryRows.tsx
+import Box from "@mui/material/Box/index.js";
+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-Z5E2PXGN.js.map

package/dist/chunk-Z5E2PXGN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategoryRows.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\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":";;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,SAAS;AA6BZ,mBAGM,KAcN,YAjBA;AATG,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAGsB;AACpB,QAAM,WAAW,kBAAkB,MAAM,KAAK;AAC9C,SACE,gCACG,mBAAS;AAAA,IAAI,CAAC,SAAS,UACtB,QAAQ,QACN,oBAAC,OAAI,WAAU,QAAwC,IAAI,QACxD,kBAAQ,QADgB,GAAG,QAAQ,IAAI,IAAI,KAAK,EAEnD,IAEA,oBAAC,UAAuC,kBAAQ,QAArC,GAAG,QAAQ,IAAI,IAAI,KAAK,EAAkB;AAAA,EAEzD,GACF;AAEJ;AAGO,SAAS,iBAAiB,EAAE,MAAM,GAAqD;AAC5F,SACE,qBAAC,OAAI,IAAI,CAAC,UAAU,WAAW,OAAO,KAAK,GAAG,eAAY,QACvD;AAAA,cAAU,QAAQ,oBAAC,cAAW;AAAA,IAC9B,UAAU,aAAa,oBAAC,OAAI,IAAI,eAAe;AAAA,KAClD;AAEJ;AAEO,SAAS,cAAc,EAAE,GAAG,GAAuC;AACxE,SAAO,oBAAC,OAAI,IAAI,CAAC,UAAU,QAAQ,OAAO,EAAE,GAAG,eAAY,QAAO;AACpE;AAmBA,SAAS,QACP,eACA,YACA,OAC4C;AAC5C,MAAI,gBAAgB,EAAG,QAAO,EAAE,MAAM,OAAO,aAAa,GAAG,UAAU,KAAK;AAC5E,MAAI,cAAc,UAAU,OAAW,QAAO,EAAE,MAAM,OAAO,KAAK,GAAG,UAAU,MAAM;AACrF,SAAO;AACT;AASO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4C;AAC1C,QAAM,OAAO,QAAQ,eAAe,YAAY,OAAO,KAAK;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAM,aAAa,WAAW;AAAA,MAC9B,iBAAe,aAAa,eAAe,OAAO;AAAA,MAClD,iBAAe;AAAA,MACf,eAAa,GAAG,UAAU,aAAa,OAAO,EAAE;AAAA,MAChD,IAAI,CAAC,UAAU,MAAM,OAAO,QAAQ,KAAK;AAAA,MACzC,SAAS;AAAA,MAET;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,UAAU;AAAA,YACV,cACE,WAAW,KAAK,iBAAiB,OAAO,IAAI,IAAI,KAAK,eAAe,OAAO,IAAI;AAAA,YAEjF,eAAa,GAAG,UAAU,WAAW,OAAO,EAAE;AAAA,YAC9C,IAAI,CAAC,UAAU,gBAAgB,OAAO,QAAQ;AAAA,YAC9C,SAAS,CAAC,UAA4B;AACpC,oBAAM,gBAAgB;AACtB,+BAAiB;AAAA,YACnB;AAAA,YAEA,8BAAC,mBAAgB;AAAA;AAAA,QACnB;AAAA,QACC,aACC,oBAAC,oBAAiB,OAAO,YAAY,IAErC,oBAAC,OAAI,IAAI,EAAE,OAAO,QAAQ,SAAS,MAAM,WAAW,GAAG;AAAA,QAEzD,oBAAC,OAAI,WAAU,QAAO,IAAI,CAAC,UAAU,UAAU,OAAO,IAAI,GACxD,8BAAC,mBAAgB,MAAM,OAAO,MAAM,OAAc,GACpD;AAAA,QACC,QACC,oBAAC,OAAI,WAAU,QAAO,IAAI,CAAC,UAAU,UAAU,OAAO,KAAK,QAAQ,GAChE,eAAK,MACR;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAeO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2C;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,eAAa,GAAG,UAAU,WAAW,OAAO,EAAE;AAAA,MAC9C,IAAI,CAAC,WAAW,EAAE,GAAG,MAAM,OAAO,QAAQ,KAAK,GAAG,aAAa,OAAO;AAAA,MACtE,SAAS;AAAA,MAET;AAAA,4BAAC,OAAI,IAAI,EAAE,OAAO,QAAQ,eAAe,MAAM,WAAW,GAAG;AAAA,QAC5D,SACC,oBAAC,iBAAc,IAAI,UAAU,IAE7B,oBAAC,oBAAiB,OAAO,WAAW,OAAO,OAAO;AAAA,QAEpD,oBAAC,OAAI,WAAU,QAAO,IAAI,CAAC,UAAU,UAAU,OAAO,KAAK,GACzD,8BAAC,mBAAgB,MAAM,OAAO,MAAM,OAAc,GACpD;AAAA,QACC,cAAc,OAAO,UAAU,UAC9B,oBAAC,OAAI,WAAU,QAAO,IAAI,CAAC,UAAU,UAAU,OAAO,KAAK,GACxD,iBAAO,OACV;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAGO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AACF,GAGsB;AACpB,SACE,oBAAC,OAAI,IAAI,eACP,8BAAC,mBAAgB,MAAM,OAAO,MAAM,OAAc,GACpD;AAEJ;","names":[]}

package/dist/chunk-Z6DULXSF.js

@@ -0,0 +1,261 @@
+// src/components/data-display/Timeline/TimelineRow.tsx
+import DotIcon from "@mui/icons-material/Circle";
+import ExpandIcon from "@mui/icons-material/ExpandMore";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Card from "@mui/material/Card/index.js";
+import CardContent from "@mui/material/CardContent/index.js";
+import Chip from "@mui/material/Chip/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var slideInAnimation = keyframes`from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); }`;
+var pulseAnimation = keyframes`0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; }`;
+var TimelineItemContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["animated", "alternating", "index"].includes(prop)
+})(({ theme, animated, alternating, index, orientation }) => ({
+  display: "flex",
+  gap: theme.spacing(2),
+  position: "relative",
+  ...animated && {
+    animation: `${slideInAnimation} 0.5s ease ${index * 0.1}s both`
+  },
+  ...orientation === "vertical" && alternating && {
+    flexDirection: index % 2 === 0 ? "row" : "row-reverse",
+    textAlign: index % 2 === 0 ? "left" : "right"
+  },
+  ...orientation === "horizontal" && {
+    flexDirection: "column",
+    alignItems: "center",
+    minWidth: 280
+  }
+}));
+var TimelineConnector = styled(Box, {
+  shouldForwardProp: (prop) => !["isLast"].includes(prop)
+})(({ theme, orientation, isLast }) => ({
+  position: "absolute",
+  background: `linear-gradient(180deg, ${theme.palette.primary.main} 0%, ${alpha(theme.palette.primary.main, 0.3)} 100%)`,
+  ...orientation === "vertical" ? {
+    width: 2,
+    height: isLast ? 0 : "calc(100% + 16px)",
+    left: 19,
+    top: 40
+  } : {
+    height: 2,
+    width: isLast ? 0 : "240px",
+    top: 19,
+    left: 40
+  }
+}));
+var TimelineDot = styled(Box, {
+  shouldForwardProp: (prop) => !["dotColor", "hasIcon", "animated"].includes(prop)
+})(({ theme, dotColor, hasIcon, animated }) => ({
+  width: 40,
+  height: 40,
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: dotColor ? `linear-gradient(135deg, ${dotColor} 0%, ${alpha(dotColor, 0.8)} 100%)` : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)`,
+  boxShadow: `0 4px 12px ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,
+  border: `2px solid ${theme.palette.background.paper}`,
+  zIndex: 1,
+  flexShrink: 0,
+  ...animated && {
+    animation: `${pulseAnimation} 2s ease infinite`
+  },
+  "& svg": {
+    fontSize: hasIcon ? "1.2rem" : "0.8rem",
+    color: theme.palette.background.paper
+  }
+}));
+var TimelineCard = styled(Card, {
+  shouldForwardProp: (prop) => !["timelineVariant", "isClickable"].includes(prop)
+})(
+  ({ theme, timelineVariant, isClickable }) => ({
+    flex: 1,
+    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
+    backdropFilter: "blur(10px)",
+    WebkitBackdropFilter: "blur(10px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+    transition: theme.transitions.create(["transform", "box-shadow"]),
+    ...isClickable && {
+      cursor: "pointer",
+      "&:hover": {
+        transform: "translateY(-2px)",
+        boxShadow: theme.shadows[8]
+      }
+    },
+    ...timelineVariant === "compact" && {
+      padding: theme.spacing(1.5),
+      "& .MuiCardContent-root": {
+        padding: 0,
+        "&:last-child": {
+          paddingBottom: 0
+        }
+      }
+    }
+  })
+);
+var TimelineTimestamp = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  letterSpacing: "0.5px",
+  textTransform: "uppercase"
+}));
+var MetadataChip = styled(Chip)(({ theme }) => ({
+  height: 24,
+  fontSize: "0.75rem",
+  background: alpha(theme.palette.primary.main, 0.08),
+  border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
+}));
+var TimelineDetails = ({ item, isExpanded, variant }) => {
+  const open = isExpanded || variant === "detailed";
+  return /* @__PURE__ */ jsx(Collapse, { in: open, children: /* @__PURE__ */ jsx(Fade, { in: open, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, sx: { mt: 1 }, children: [
+    item.description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: item.description }),
+    item.metadata && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: Object.entries(item.metadata).map(([key, value]) => /* @__PURE__ */ jsx(MetadataChip, { label: `${key}: ${value}`, size: "small" }, key)) }),
+    item.action && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        variant: "contained",
+        onClick: (e) => {
+          e.stopPropagation();
+          item.action.onClick();
+        },
+        sx: {
+          background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+          color: "white"
+        },
+        children: item.action.label
+      }
+    ) })
+  ] }) }) });
+};
+var TimelineCardHeader = ({ item, variant, isExpanded, onExpandClick }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" },
+    children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx(TimelineTimestamp, { "data-testid": "timeline-timestamp", children: item.timestamp }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: variant === "compact" ? "body2" : "h6",
+            fontWeight: variant === "compact" ? 500 : 600,
+            sx: { mt: 0.5 },
+            children: item.title
+          }
+        )
+      ] }),
+      item.description && variant !== "compact" && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: (e) => onExpandClick(item.id, e),
+          "aria-label": isExpanded ? "Collapse item details" : "Expand item details",
+          sx: {
+            transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+            transition: "transform 0.3s ease"
+          },
+          children: /* @__PURE__ */ jsx(ExpandIcon, {})
+        }
+      )
+    ]
+  }
+);
+var TimelineRowCard = ({ item, variant, isClickable, isExpanded, onItemClick, onExpandClick }) => /* @__PURE__ */ jsx(
+  TimelineCard,
+  {
+    timelineVariant: variant,
+    isClickable,
+    onClick: isClickable ? () => onItemClick?.(item) : void 0,
+    role: "article",
+    "aria-label": `Timeline item: ${item.title}`,
+    "data-testid": "timeline-card",
+    children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+      /* @__PURE__ */ jsx(
+        TimelineCardHeader,
+        {
+          item,
+          variant,
+          isExpanded,
+          onExpandClick
+        }
+      ),
+      variant === "compact" && item.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: item.description }),
+      variant !== "compact" && /* @__PURE__ */ jsx(TimelineDetails, { item, isExpanded, variant })
+    ] }) })
+  }
+);
+var TimelineRow = ({
+  item,
+  index,
+  isLast,
+  variant,
+  orientation,
+  showConnector,
+  animated,
+  alternating,
+  isExpanded,
+  onItemClick,
+  onExpandClick
+}) => {
+  const hasExpandableContent = item.description && variant !== "compact";
+  const isClickable = !!onItemClick || !!hasExpandableContent;
+  return /* @__PURE__ */ jsxs(
+    TimelineItemContainer,
+    {
+      animated,
+      alternating: alternating && orientation === "vertical",
+      index,
+      orientation,
+      "data-testid": "timeline-item-container",
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            TimelineDot,
+            {
+              dotColor: item.color,
+              hasIcon: !!item.icon,
+              animated,
+              "data-testid": "timeline-dot",
+              children: item.icon ? /* @__PURE__ */ jsx(Box, { "data-testid": "item-icon", children: item.icon }) : /* @__PURE__ */ jsx(DotIcon, { "data-testid": "item-icon-default" })
+            }
+          ),
+          showConnector && !isLast && /* @__PURE__ */ jsx(
+            TimelineConnector,
+            {
+              orientation,
+              isLast,
+              "data-testid": "timeline-connector"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          TimelineRowCard,
+          {
+            item,
+            variant,
+            isClickable,
+            isExpanded,
+            onItemClick,
+            onExpandClick
+          }
+        )
+      ]
+    },
+    item.id
+  );
+};
+
+export {
+  TimelineRow
+};
+//# sourceMappingURL=chunk-Z6DULXSF.js.map