@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-N2GEKC4J.js

@@ -0,0 +1,111 @@
+import {
+  captionSx,
+  counterSx
+} from "./chunk-3KA6MYIR.js";
+import {
+  onMedia
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Lightbox/LightboxStage.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import DialogContent from "@mui/material/DialogContent/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STAGE_SX = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  position: "relative",
+  height: "100vh",
+  overflow: "hidden"
+};
+var MEDIA_BOX_SX = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%"
+};
+var LightboxStage = ({
+  items,
+  currentItem,
+  currentIndex,
+  isLoading,
+  showCaptions,
+  thumbnails,
+  testId,
+  media,
+  thumbnailStrip
+}) => /* @__PURE__ */ jsxs(
+  DialogContent,
+  {
+    sx: STAGE_SX,
+    "data-testid": testId("content"),
+    children: [
+      isLoading && /* @__PURE__ */ jsx(
+        CircularProgress,
+        {
+          sx: { position: "absolute", color: onMedia, zIndex: 999 },
+          "data-testid": testId("loading")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: MEDIA_BOX_SX,
+          "data-testid": testId("image-container"),
+          children: media
+        }
+      ),
+      showCaptions && currentItem?.caption && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          id: "lightbox-description",
+          sx: {
+            ...captionSx,
+            position: "absolute",
+            // Sit above the filmstrip when there is one.
+            bottom: sxRem(thumbnails ? 120 : 16),
+            left: "50%",
+            transform: "translateX(-50%)",
+            maxWidth: "80vw",
+            padding: 2
+          },
+          "data-testid": testId("caption"),
+          children: currentItem.caption
+        }
+      ),
+      items.length > 1 && /* @__PURE__ */ jsxs(
+        Typography,
+        {
+          sx: {
+            ...counterSx,
+            position: "absolute",
+            top: sxRem(70),
+            right: sxRem(16),
+            padding: (theme) => rems(theme, 4, 8)
+          },
+          "aria-live": "polite",
+          "data-testid": testId("counter"),
+          children: [
+            currentIndex + 1,
+            " / ",
+            items.length
+          ]
+        }
+      ),
+      thumbnailStrip
+    ]
+  }
+);
+
+export {
+  LightboxStage
+};
+//# sourceMappingURL=chunk-N2GEKC4J.js.map

package/dist/chunk-N2GEKC4J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/LightboxStage.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\n\nimport { captionSx, counterSx } from './Lightbox.constants';\nimport type { LightboxItem } from './Lightbox.types';\nimport { onMedia } from '../../../tokens/ink';\nimport { rems, sxRem } from '../../../tokens/relative';\n\ntype TestId = (suffix: string) => string;\n\nexport interface LightboxStageProps {\n  items: LightboxItem[];\n  currentItem?: LightboxItem;\n  currentIndex: number;\n  isLoading: boolean;\n  showCaptions: boolean;\n  thumbnails: boolean;\n  testId: TestId;\n  media: ReactNode;\n  thumbnailStrip: ReactNode;\n}\n\nconst STAGE_SX = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: 0,\n  position: 'relative',\n  height: '100vh',\n  overflow: 'hidden',\n} as const;\n\nconst MEDIA_BOX_SX = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '100%',\n  height: '100%',\n} as const;\n\n// The viewport itself: the media, whatever floats over it, and the filmstrip.\nexport const LightboxStage: FC<LightboxStageProps> = ({\n  items,\n  currentItem,\n  currentIndex,\n  isLoading,\n  showCaptions,\n  thumbnails,\n  testId,\n  media,\n  thumbnailStrip,\n}) => (\n  <DialogContent\n    sx={STAGE_SX}\n    data-testid={testId('content')}\n  >\n    {isLoading && (\n      <CircularProgress\n        sx={{ position: 'absolute', color: onMedia, zIndex: 999 }}\n        data-testid={testId('loading')}\n      />\n    )}\n\n    <Box\n      sx={MEDIA_BOX_SX}\n      data-testid={testId('image-container')}\n    >\n      {media}\n    </Box>\n\n    {showCaptions && currentItem?.caption && (\n      <Typography\n        id=\"lightbox-description\"\n        sx={{\n          ...captionSx,\n          position: 'absolute',\n          // Sit above the filmstrip when there is one.\n          bottom: sxRem(thumbnails ? 120 : 16),\n          left: '50%',\n          transform: 'translateX(-50%)',\n          maxWidth: '80vw',\n          padding: 2,\n        }}\n        data-testid={testId('caption')}\n      >\n        {currentItem.caption}\n      </Typography>\n    )}\n\n    {items.length > 1 && (\n      <Typography\n        sx={{\n          ...counterSx,\n          position: 'absolute',\n          top: sxRem(70),\n          right: sxRem(16),\n          padding: (theme: Theme) => rems(theme, 4, 8),\n        }}\n        aria-live=\"polite\"\n        data-testid={testId('counter')}\n      >\n        {currentIndex + 1} / {items.length}\n      </Typography>\n    )}\n\n    {thumbnailStrip}\n  </DialogContent>\n);\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAC1B,OAAO,gBAAgB;AA2DjB,cAiCA,YAjCA;AAnCN,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,IAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,QAAQ;AACV;AAGO,IAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,IACJ,eAAa,OAAO,SAAS;AAAA,IAE5B;AAAA,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,EAAE,UAAU,YAAY,OAAO,SAAS,QAAQ,IAAI;AAAA,UACxD,eAAa,OAAO,SAAS;AAAA;AAAA,MAC/B;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,eAAa,OAAO,iBAAiB;AAAA,UAEpC;AAAA;AAAA,MACH;AAAA,MAEC,gBAAgB,aAAa,WAC5B;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,IAAI;AAAA,YACF,GAAG;AAAA,YACH,UAAU;AAAA;AAAA,YAEV,QAAQ,MAAM,aAAa,MAAM,EAAE;AAAA,YACnC,MAAM;AAAA,YACN,WAAW;AAAA,YACX,UAAU;AAAA,YACV,SAAS;AAAA,UACX;AAAA,UACA,eAAa,OAAO,SAAS;AAAA,UAE5B,sBAAY;AAAA;AAAA,MACf;AAAA,MAGD,MAAM,SAAS,KACd;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,MAAM,EAAE;AAAA,YACb,OAAO,MAAM,EAAE;AAAA,YACf,SAAS,CAAC,UAAiB,KAAK,OAAO,GAAG,CAAC;AAAA,UAC7C;AAAA,UACA,aAAU;AAAA,UACV,eAAa,OAAO,SAAS;AAAA,UAE5B;AAAA,2BAAe;AAAA,YAAE;AAAA,YAAI,MAAM;AAAA;AAAA;AAAA,MAC9B;AAAA,MAGD;AAAA;AAAA;AACH;","names":[]}

package/dist/chunk-NE6XUN5Z.js

@@ -0,0 +1,41 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  CategorySelect
+} from "./chunk-ZW5K4XCQ.js";
+
+// src/components/form/total-form/Fields/CategoryField.tsx
+import { jsx } from "react/jsx-runtime";
+function CategoryField({
+  name,
+  options,
+  label,
+  placeholder,
+  allowParentSelection = true,
+  copy
+}) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  return /* @__PURE__ */ jsx(
+    CategorySelect,
+    {
+      copy,
+      mode: "single",
+      fullWidth: true,
+      label,
+      placeholder,
+      options,
+      allowParentSelection,
+      value: values[name] ? values[name] : null,
+      error,
+      onChange: (next) => setFieldValue(name, next ?? ""),
+      dataTestId: `total-form-field-${name}`
+    }
+  );
+}
+
+export {
+  CategoryField
+};
+//# sourceMappingURL=chunk-NE6XUN5Z.js.map

package/dist/chunk-NEGCJNGJ.js

@@ -0,0 +1,153 @@
+import {
+  absoluteInk,
+  controlNeutral,
+  neutralTones
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/typography/Blockquote/Blockquote.tsx
+import FormatQuote from "@mui/icons-material/FormatQuote";
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    const { main, light, dark } = controlNeutral(theme);
+    return { main, light, dark };
+  }
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var StyledBlockquote = styled("blockquote", {
+  shouldForwardProp: (prop) => !["customVariant", "customColor"].includes(prop)
+})(({ theme, customVariant = "default", customColor = "neutral" }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  const baseStyles = {
+    margin: "1.5em 0",
+    padding: 0,
+    position: "relative",
+    fontFamily: theme.typography.body1.fontFamily,
+    fontSize: rem(theme, 18),
+    lineHeight: 1.6,
+    fontStyle: "italic",
+    color: theme.palette.text.primary
+  };
+  if (customVariant === "bordered") {
+    return {
+      ...baseStyles,
+      padding: theme.spacing(3),
+      border: `2px solid ${alpha(colorPalette.main, 0.2)}`,
+      borderRadius: theme.shape.borderRadius * 2,
+      backgroundColor: alpha(colorPalette.main, 0.03),
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: -1,
+        left: -1,
+        right: -1,
+        bottom: -1,
+        background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light})`,
+        borderRadius: theme.shape.borderRadius * 2,
+        padding: "2px",
+        WebkitMask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
+        WebkitMaskComposite: "exclude",
+        mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
+        maskComposite: "exclude"
+      }
+    };
+  }
+  if (customVariant === "citation") {
+    return {
+      ...baseStyles,
+      padding: theme.spacing(2, 3),
+      backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.background.paper, 0.8) : alpha(neutralTones(theme).canvas, 0.95),
+      backdropFilter: theme.palette.mode === "dark" ? "blur(10px)" : "none",
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      borderRadius: theme.shape.borderRadius * 2,
+      boxShadow: theme.palette.mode === "dark" ? theme.shadows[4] : "none",
+      textAlign: "center"
+    };
+  }
+  return {
+    ...baseStyles,
+    paddingLeft: theme.spacing(3),
+    borderLeft: `4px solid ${colorPalette.main}`,
+    backgroundColor: alpha(colorPalette.main, 0.05),
+    padding: theme.spacing(2, 3),
+    borderRadius: theme.shape.borderRadius
+  };
+});
+var QuoteIcon = styled(FormatQuote)(({ theme, customColor }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    position: "absolute",
+    top: theme.spacing(1),
+    left: theme.spacing(1),
+    fontSize: rem(theme, 32),
+    opacity: 0.3,
+    transform: "rotate(180deg)",
+    color: colorPalette.main
+  };
+});
+var CitationContainer = styled(Box)(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  textAlign: "right",
+  fontStyle: "normal",
+  opacity: 0.8
+}));
+var AuthorName = styled(Typography)(({ theme }) => ({
+  fontWeight: 600,
+  fontSize: rem(theme, 14),
+  marginBottom: theme.spacing(0.5)
+}));
+var SourceName = styled(Typography)(({ theme }) => ({
+  fontSize: rem(theme, 12),
+  opacity: 0.7
+}));
+var Blockquote = React.forwardRef(
+  ({ variant = "default", author, source, color = "neutral", children, ...props }, ref) => {
+    const showCitation = author || source;
+    const showIcon = variant === "bordered" || variant === "citation";
+    return /* @__PURE__ */ jsxs(StyledBlockquote, { ref, customVariant: variant, customColor: color, ...props, children: [
+      showIcon && /* @__PURE__ */ jsx(QuoteIcon, { customColor: color }),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          component: "div",
+          sx: {
+            fontSize: "inherit",
+            lineHeight: "inherit",
+            fontStyle: "inherit",
+            color: "inherit",
+            margin: 0
+          },
+          children
+        }
+      ),
+      showCitation && /* @__PURE__ */ jsxs(CitationContainer, { children: [
+        author && /* @__PURE__ */ jsxs(AuthorName, { children: [
+          "\u2014 ",
+          author
+        ] }),
+        source && /* @__PURE__ */ jsx(SourceName, { children: source })
+      ] })
+    ] });
+  }
+);
+Blockquote.displayName = "Blockquote";
+
+export {
+  Blockquote
+};
+//# sourceMappingURL=chunk-NEGCJNGJ.js.map

package/dist/chunk-NEGCJNGJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Blockquote/Blockquote.tsx"],"sourcesContent":["import FormatQuote from '@mui/icons-material/FormatQuote';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { BlockquoteProps } from './Blockquote.types';\nimport { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n  if (color === 'neutral') {\n    const { main, light, dark } = controlNeutral(theme);\n    return { main, light, dark };\n  }\n\n  const colorMap: Record<string, typeof theme.palette.primary> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\nconst StyledBlockquote = styled('blockquote', {\n  shouldForwardProp: (prop) => !['customVariant', 'customColor'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customColor?: string;\n}>(({ theme, customVariant = 'default', customColor = 'neutral' }) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n\n  const baseStyles = {\n    margin: '1.5em 0',\n    padding: 0,\n    position: 'relative' as const,\n    fontFamily: theme.typography.body1.fontFamily,\n    fontSize: rem(theme, 18),\n    lineHeight: 1.6,\n    fontStyle: 'italic',\n    color: theme.palette.text.primary,\n  };\n\n  // Return styles based on variant\n  if (customVariant === 'bordered') {\n    return {\n      ...baseStyles,\n      padding: theme.spacing(3),\n      border: `2px solid ${alpha(colorPalette.main, 0.2)}`,\n      borderRadius: theme.shape.borderRadius * 2,\n      backgroundColor: alpha(colorPalette.main, 0.03),\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute',\n        top: -1,\n        left: -1,\n        right: -1,\n        bottom: -1,\n        background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light})`,\n        borderRadius: theme.shape.borderRadius * 2,\n        padding: '2px',\n        WebkitMask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,\n        WebkitMaskComposite: 'exclude',\n        mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,\n        maskComposite: 'exclude',\n      },\n    };\n  }\n\n  if (customVariant === 'citation') {\n    return {\n      ...baseStyles,\n      padding: theme.spacing(2, 3),\n      backgroundColor:\n        theme.palette.mode === 'dark'\n          ? alpha(theme.palette.background.paper, 0.8)\n          : alpha(neutralTones(theme).canvas, 0.95),\n      backdropFilter: theme.palette.mode === 'dark' ? 'blur(10px)' : 'none',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      borderRadius: theme.shape.borderRadius * 2,\n      boxShadow: theme.palette.mode === 'dark' ? theme.shadows[4] : 'none',\n      textAlign: 'center' as const,\n    };\n  }\n\n  // Default variant\n  return {\n    ...baseStyles,\n    paddingLeft: theme.spacing(3),\n    borderLeft: `4px solid ${colorPalette.main}`,\n    backgroundColor: alpha(colorPalette.main, 0.05),\n    padding: theme.spacing(2, 3),\n    borderRadius: theme.shape.borderRadius,\n  };\n});\n\nconst QuoteIcon = styled(FormatQuote)<{ customColor: string }>(({ theme, customColor }) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n  \n  return {\n    position: 'absolute',\n    top: theme.spacing(1),\n    left: theme.spacing(1),\n    fontSize: rem(theme, 32),\n    opacity: 0.3,\n    transform: 'rotate(180deg)',\n    color: colorPalette.main,\n  };\n});\n\nconst CitationContainer = styled(Box)(({ theme }) => ({\n  marginTop: theme.spacing(2),\n  textAlign: 'right',\n  fontStyle: 'normal',\n  opacity: 0.8,\n}));\n\nconst AuthorName = styled(Typography)(({ theme }) => ({\n  fontWeight: 600,\n  fontSize: rem(theme, 14),\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst SourceName = styled(Typography)(({ theme }) => ({\n  fontSize: rem(theme, 12),\n  opacity: 0.7,\n}));\n\nexport const Blockquote = React.forwardRef<globalThis.HTMLQuoteElement, BlockquoteProps>(\n  ({ variant = 'default', author, source, color = 'neutral', children, ...props }, ref) => {\n    const showCitation = author || source;\n    const showIcon = variant === 'bordered' || variant === 'citation';\n\n    return (\n      <StyledBlockquote ref={ref} customVariant={variant} customColor={color} {...props}>\n        {showIcon && <QuoteIcon customColor={color} />}\n\n        <Typography\n          component=\"div\"\n          sx={{\n            fontSize: 'inherit',\n            lineHeight: 'inherit',\n            fontStyle: 'inherit',\n            color: 'inherit',\n            margin: 0,\n          }}\n        >\n          {children}\n        </Typography>\n\n        {showCitation && (\n          <CitationContainer>\n            {author && <AuthorName>— {author}</AuthorName>}\n            {source && <SourceName>{source}</SourceName>}\n          </CitationContainer>\n        )}\n      </StyledBlockquote>\n    );\n  },\n);\n\nBlockquote.displayName = 'Blockquote';"],"mappings":"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","names":[]}

package/dist/chunk-NNQCWXGY.js

@@ -0,0 +1,93 @@
+import {
+  TimelineRow
+} from "./chunk-EIYTS5VZ.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Timeline/Timeline.tsx
+import Box from "@mui/material/Box/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var TimelineContainer = styled(Box)(
+  ({ theme, orientation }) => ({
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    gap: theme.spacing(2),
+    position: "relative",
+    width: "100%",
+    ...orientation === "horizontal" && {
+      overflowX: "auto",
+      paddingBottom: theme.spacing(2),
+      "&::-webkit-scrollbar": {
+        height: rem(theme, 8)
+      },
+      "&::-webkit-scrollbar-track": {
+        background: alpha(theme.palette.action.disabled, 0.1),
+        borderRadius: rem(theme, 4)
+      },
+      "&::-webkit-scrollbar-thumb": {
+        background: alpha(theme.palette.primary.main, 0.3),
+        borderRadius: rem(theme, 4),
+        "&:hover": {
+          background: alpha(theme.palette.primary.main, 0.5)
+        }
+      }
+    }
+  })
+);
+var Timeline = ({
+  items,
+  variant = "default",
+  orientation = "vertical",
+  showConnector = true,
+  animated = true,
+  alternating = false,
+  onItemClick
+}) => {
+  const [expandedItems, setExpandedItems] = React.useState(/* @__PURE__ */ new Set());
+  const handleExpandClick = (itemId, event) => {
+    event.stopPropagation();
+    setExpandedItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(itemId)) {
+        newSet.delete(itemId);
+      } else {
+        newSet.add(itemId);
+      }
+      return newSet;
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    TimelineContainer,
+    {
+      orientation,
+      "data-testid": "timeline-container",
+      children: items.map((item, index) => /* @__PURE__ */ jsx(
+        TimelineRow,
+        {
+          item,
+          index,
+          isLast: index === items.length - 1,
+          variant,
+          orientation,
+          showConnector,
+          animated,
+          alternating,
+          isExpanded: expandedItems.has(item.id),
+          onItemClick,
+          onExpandClick: handleExpandClick
+        },
+        item.id
+      ))
+    }
+  );
+};
+var Timeline_default = Timeline;
+
+export {
+  Timeline,
+  Timeline_default
+};
+//# sourceMappingURL=chunk-NNQCWXGY.js.map

package/dist/chunk-NNQCWXGY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Timeline/Timeline.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { TimelineRow } from './TimelineRow';\nimport type { TimelineProps } from './Timeline.types';\nimport { rem } from '../../../tokens/relative';\n\n// ---\n\n// --- Styled Components ---\nconst TimelineContainer = styled(Box)<{ orientation: 'vertical' | 'horizontal' }>(\n  ({ theme, orientation }) => ({\n    display: 'flex',\n    flexDirection: orientation === 'vertical' ? 'column' : 'row',\n    gap: theme.spacing(2),\n    position: 'relative',\n    width: '100%',\n    ...(orientation === 'horizontal' && {\n      overflowX: 'auto',\n      paddingBottom: theme.spacing(2),\n      '&::-webkit-scrollbar': {\n        height: rem(theme, 8) },\n      '&::-webkit-scrollbar-track': {\n        background: alpha(theme.palette.action.disabled, 0.1),\n        borderRadius: rem(theme, 4) },\n      '&::-webkit-scrollbar-thumb': {\n        background: alpha(theme.palette.primary.main, 0.3),\n        borderRadius: rem(theme, 4),\n        '&:hover': {\n          background: alpha(theme.palette.primary.main, 0.5) } } }) }),\n);\n\n\n// ---\n\n// Main component\nexport const Timeline: FC<TimelineProps> = ({\n  items,\n  variant = 'default',\n  orientation = 'vertical',\n  showConnector = true,\n  animated = true,\n  alternating = false,\n  onItemClick }) => {\n  const [expandedItems, setExpandedItems] = React.useState<Set<string>>(new Set());\n\n  const handleExpandClick = (itemId: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    setExpandedItems((prev) => {\n      const newSet = new Set(prev);\n      if (newSet.has(itemId)) {\n        newSet.delete(itemId);\n      } else {\n        newSet.add(itemId);\n      }\n      return newSet;\n    });\n  };\n\n  return (\n    <TimelineContainer\n      orientation={orientation}\n      data-testid=\"timeline-container\"\n    >\n      {items.map((item, index) => (\n        <TimelineRow\n          key={item.id}\n          item={item}\n          index={index}\n          isLast={index === items.length - 1}\n          variant={variant}\n          orientation={orientation}\n          showConnector={showConnector}\n          animated={animated}\n          alternating={alternating}\n          isExpanded={expandedItems.has(item.id)}\n          onItemClick={onItemClick}\n          onExpandClick={handleExpandClick}\n        />\n      ))}\n    </TimelineContainer>\n  );\n};\n\nexport default Timeline;\n"],"mappings":";;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,OAAO,cAAc;AAE9B,OAAO,WAAW;AA+DV;AAvDR,IAAM,oBAAoB,OAAO,GAAG;AAAA,EAClC,CAAC,EAAE,OAAO,YAAY,OAAO;AAAA,IAC3B,SAAS;AAAA,IACT,eAAe,gBAAgB,aAAa,WAAW;AAAA,IACvD,KAAK,MAAM,QAAQ,CAAC;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAI,gBAAgB,gBAAgB;AAAA,MAClC,WAAW;AAAA,MACX,eAAe,MAAM,QAAQ,CAAC;AAAA,MAC9B,wBAAwB;AAAA,QACtB,QAAQ,IAAI,OAAO,CAAC;AAAA,MAAE;AAAA,MACxB,8BAA8B;AAAA,QAC5B,YAAY,MAAM,MAAM,QAAQ,OAAO,UAAU,GAAG;AAAA,QACpD,cAAc,IAAI,OAAO,CAAC;AAAA,MAAE;AAAA,MAC9B,8BAA8B;AAAA,QAC5B,YAAY,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG;AAAA,QACjD,cAAc,IAAI,OAAO,CAAC;AAAA,QAC1B,WAAW;AAAA,UACT,YAAY,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG;AAAA,QAAE;AAAA,MAAE;AAAA,IAAE;AAAA,EAAG;AACpE;AAMO,IAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAY,MAAM;AAClB,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAsB,oBAAI,IAAI,CAAC;AAE/E,QAAM,oBAAoB,CAAC,QAAgB,UAA4B;AACrE,UAAM,gBAAgB;AACtB,qBAAiB,CAAC,SAAS;AACzB,YAAM,SAAS,IAAI,IAAI,IAAI;AAC3B,UAAI,OAAO,IAAI,MAAM,GAAG;AACtB,eAAO,OAAO,MAAM;AAAA,MACtB,OAAO;AACL,eAAO,IAAI,MAAM;AAAA,MACnB;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MAEX,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA,QAAQ,UAAU,MAAM,SAAS;AAAA,UACjC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,cAAc,IAAI,KAAK,EAAE;AAAA,UACrC;AAAA,UACA,eAAe;AAAA;AAAA,QAXV,KAAK;AAAA,MAYZ,CACD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}