@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-NIS523UM.js

@@ -1,26 +0,0 @@
-import {
-  ConfirmActionDialog
-} from "./chunk-VZAGBDZ2.js";
-import {
-  useConfirmAction
-} from "./chunk-EMYESBIT.js";
-
-// src/components/feedback/ConfirmAction/ConfirmAction.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function ConfirmAction({
-  onConfirm,
-  children,
-  ...options
-}) {
-  const state = useConfirmAction(onConfirm, options.errorText);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    children(state.request, { pending: state.pending }),
-    /* @__PURE__ */ jsx(ConfirmActionDialog, { state, ...options })
-  ] });
-}
-ConfirmAction.displayName = "ConfirmAction";
-
-export {
-  ConfirmAction
-};
-//# sourceMappingURL=chunk-NIS523UM.js.map

package/dist/chunk-NNQLDFKG.js

@@ -1,151 +0,0 @@
-import {
-  absoluteInk,
-  neutralTones
-} from "./chunk-FQ6UW7IY.js";
-import {
-  sxRem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/data-display/Tooltip/Tooltip.tsx
-import MuiTooltip from "@mui/material/Tooltip/index.js";
-import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-var pulseAnimation = keyframes`
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  70% {
-    transform: scale(1.05);
-    opacity: 0.8;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-`;
-var SIZE_MAP = {
-  sm: { fontSize: sxRem(12), padding: "4px 8px" },
-  md: { fontSize: sxRem(14), padding: "6px 12px" },
-  lg: { fontSize: sxRem(16), padding: "8px 16px" }
-};
-var getSizeStyles = (size) => SIZE_MAP[size] || SIZE_MAP.md;
-var variantStyles = (theme, variant) => {
-  switch (variant) {
-    case "default":
-      return {
-        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.9),
-        color: absoluteInk(theme).white
-      };
-    case "dark":
-      return {
-        backgroundColor: neutralTones(theme).inverseSurface,
-        color: absoluteInk(theme).white
-      };
-    case "light":
-      return {
-        backgroundColor: absoluteInk(theme).white,
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-        boxShadow: theme.shadows[4]
-      };
-    case "glass":
-      return {
-        backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: "blur(20px)",
-        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-        color: theme.palette.text.primary
-      };
-    default:
-      return {};
-  }
-};
-var emphasisStyles = (theme, glow, pulse) => ({
-  ...glow && {
-    boxShadow: `0 0 15px 3px ${alpha(theme.palette.primary.main, 0.4)} !important`,
-    filter: "brightness(1.05)"
-  },
-  ...pulse && {
-    animation: `${pulseAnimation} 2s infinite`
-  }
-});
-var arrowColor = (theme, variant) => {
-  switch (variant) {
-    case "light":
-      return absoluteInk(theme).white;
-    case "glass":
-      return alpha(theme.palette.background.paper, 0.1);
-    case "dark":
-      return neutralTones(theme).inverseSurface;
-    default:
-      return alpha(neutralTones(theme).inverseSurface, 0.9);
-  }
-};
-var StyledTooltip = styled(MuiTooltip, {
-  shouldForwardProp: (prop) => !["customVariant", "customSize", "glow", "pulse"].includes(prop)
-})(({ theme, customVariant, customSize, glow, pulse }) => {
-  const sizeStyles = getSizeStyles(customSize);
-  return {
-    "& .MuiTooltip-tooltip": {
-      borderRadius: theme.spacing(1),
-      fontSize: sizeStyles.fontSize(theme),
-      padding: sizeStyles.padding,
-      fontWeight: 500,
-      transition: "all 0.3s ease",
-      position: "relative",
-      overflow: "hidden",
-      ...variantStyles(theme, customVariant),
-      ...emphasisStyles(theme, glow, pulse)
-    },
-    "& .MuiTooltip-arrow": {
-      color: arrowColor(theme, customVariant)
-    }
-  };
-});
-var Tooltip = React.forwardRef(
-  ({
-    variant = "default",
-    size = "md",
-    glow = false,
-    pulse = false,
-    maxWidth = 300,
-    dataTestId,
-    children,
-    ...props
-  }, ref) => {
-    const childWithTestId = dataTestId ? React.cloneElement(children, {
-      "data-testid": `${dataTestId}-trigger`
-    }) : children;
-    return /* @__PURE__ */ jsx(
-      StyledTooltip,
-      {
-        ref,
-        customVariant: variant,
-        customSize: size,
-        glow,
-        pulse,
-        enterDelay: 0,
-        leaveDelay: 0,
-        disableHoverListener: false,
-        disableFocusListener: false,
-        disableTouchListener: false,
-        slotProps: {
-          tooltip: {
-            sx: { maxWidth },
-            role: "tooltip",
-            ...dataTestId && { "data-testid": `${dataTestId}-content` }
-          }
-        },
-        ...props,
-        children: childWithTestId
-      }
-    );
-  }
-);
-Tooltip.displayName = "Tooltip";
-
-export {
-  Tooltip
-};
-//# sourceMappingURL=chunk-NNQLDFKG.js.map

package/dist/chunk-NNQLDFKG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Tooltip/Tooltip.tsx"],"sourcesContent":["import MuiTooltip from '@mui/material/Tooltip/index.js';\nimport { alpha, keyframes, styled } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { TooltipProps } from './Tooltip.types';\nimport { absoluteInk, neutralTones } from '../../../tokens/ink';\nimport { sxRem } from '../../../tokens/relative';\n\n// Define pulse animation\nconst pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  70% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nconst SIZE_MAP = {\n  sm: { fontSize: sxRem(12), padding: '4px 8px' },\n  md: { fontSize: sxRem(14), padding: '6px 12px' },\n  lg: { fontSize: sxRem(16), padding: '8px 16px' },\n} as const;\n\nconst getSizeStyles = (size?: string): { fontSize: (theme: Theme) => string; padding: string } =>\n  SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;\n\nconst variantStyles = (theme: Theme, variant?: string): CSSObject => {\n  switch (variant) {\n    case 'default':\n      return {\n        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.9),\n        color: absoluteInk(theme).white,\n      };\n    case 'dark':\n      return {\n        backgroundColor: neutralTones(theme).inverseSurface,\n        color: absoluteInk(theme).white,\n      };\n    case 'light':\n      return {\n        backgroundColor: absoluteInk(theme).white,\n        color: theme.palette.text.primary,\n        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n        boxShadow: theme.shadows[4],\n      };\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: 'blur(20px)',\n        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n        color: theme.palette.text.primary,\n      };\n    default:\n      return {};\n  }\n};\n\n// glow and pulse are independent flags. The three combinations used to be spelled\n// out one by one, but each is just the union of whichever flags are set.\nconst emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => ({\n  ...(glow && {\n    boxShadow: `0 0 15px 3px ${alpha(theme.palette.primary.main, 0.4)} !important`,\n    filter: 'brightness(1.05)',\n  }),\n  ...(pulse && {\n    animation: `${pulseAnimation} 2s infinite`,\n  }),\n});\n\nconst arrowColor = (theme: Theme, variant?: string): string => {\n  switch (variant) {\n    case 'light':\n      return absoluteInk(theme).white;\n    case 'glass':\n      return alpha(theme.palette.background.paper, 0.1);\n    case 'dark':\n      return neutralTones(theme).inverseSurface;\n    default:\n      return alpha(neutralTones(theme).inverseSurface, 0.9);\n  }\n};\n\nconst StyledTooltip = styled(MuiTooltip, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customSize', 'glow', 'pulse'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customSize?: string;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, customSize, glow, pulse }) => {\n  const sizeStyles = getSizeStyles(customSize);\n\n  return {\n    '& .MuiTooltip-tooltip': {\n      borderRadius: theme.spacing(1),\n      fontSize: sizeStyles.fontSize(theme),\n      padding: sizeStyles.padding,\n      fontWeight: 500,\n      transition: 'all 0.3s ease',\n      position: 'relative',\n      overflow: 'hidden',\n      ...variantStyles(theme, customVariant),\n      ...emphasisStyles(theme, glow, pulse),\n    },\n\n    '& .MuiTooltip-arrow': {\n      color: arrowColor(theme, customVariant),\n    },\n  };\n});\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(\n  (\n    {\n      variant = 'default',\n      size = 'md',\n      glow = false,\n      pulse = false,\n      maxWidth = 300,\n      dataTestId,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const childWithTestId = dataTestId\n      ? React.cloneElement(children as React.ReactElement<{ 'data-testid'?: string }>, {\n          'data-testid': `${dataTestId}-trigger`,\n        })\n      : children;\n\n    return (\n      <StyledTooltip\n        ref={ref}\n        customVariant={variant}\n        customSize={size}\n        glow={glow}\n        pulse={pulse}\n        enterDelay={0}\n        leaveDelay={0}\n        disableHoverListener={false}\n        disableFocusListener={false}\n        disableTouchListener={false}\n        slotProps={{\n          tooltip: {\n            sx: { maxWidth },\n            role: 'tooltip',\n            ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),\n          },\n        }}\n        {...props}\n      >\n        {childWithTestId}\n      </StyledTooltip>\n    );\n  },\n);\n\nTooltip.displayName = 'Tooltip';\n"],"mappings":"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","names":[]}

package/dist/chunk-NSJVQ5YJ.js

@@ -1,117 +0,0 @@
-import {
-  sxRem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/form/DateRangePicker/DateRangePickerQuickList.tsx
-import Box from "@mui/material/Box/index.js";
-import { useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var optionSx = (active, overMax) => ({
-  display: "block",
-  // Full-width rows in the side column; pills in the narrow row. A fixed full
-  // width in both would make the narrow layout nine stacked lines.
-  width: { xs: "auto", md: "100%" },
-  // A pill must not be squeezed by its neighbours — the row SCROLLS rather
-  // than compressing "Este trimestre" into two characters and an ellipsis.
-  flex: { xs: "0 0 auto", md: "0 1 auto" },
-  textAlign: "left",
-  font: "inherit",
-  fontSize: sxRem(14),
-  fontWeight: active ? 600 : 400,
-  lineHeight: 1.4,
-  px: 1.5,
-  py: 0.75,
-  whiteSpace: { xs: "nowrap", md: "normal" },
-  border: "1px solid",
-  // Narrow, an entry has to look tappable on its own, with no column and no
-  // rule to group it — so the pill carries a visible edge. Beside the calendar
-  // the group already reads as a list and a border on every row would be nine
-  // boxes where the selected one should be the only marked thing.
-  borderColor: active ? "primary.main" : { xs: "divider", md: "transparent" },
-  borderRadius: { xs: 999, md: 1 },
-  cursor: overMax ? "not-allowed" : "pointer",
-  color: overMax ? "text.disabled" : active ? "primary.main" : "text.primary",
-  backgroundColor: active ? "action.selected" : "transparent",
-  "&:hover": { backgroundColor: overMax ? "transparent" : "action.hover" },
-  "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 1 }
-});
-var REASON_SX = {
-  display: "block",
-  fontSize: sxRem(11),
-  lineHeight: 1.3,
-  mt: 0.25,
-  color: "text.disabled"
-};
-function DateRangeQuickList({
-  options,
-  activeId,
-  onPick,
-  reasonFor,
-  label,
-  dataTestId
-}) {
-  const reasonPrefix = useId();
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      role: "group",
-      "aria-label": label,
-      "data-testid": `${dataTestId}-quick-list`,
-      sx: {
-        display: "flex",
-        // A column beside the calendar; ONE scrolling row of pills above it
-        // once there is no width for both.
-        //
-        // Scrolling rather than wrapping: nine wrapped pills take three or four
-        // lines at 390px, which pushes the calendar most of a screen down and
-        // makes the quick ranges — the fastest way to answer — the thing you
-        // have to scroll past. One line keeps the calendar in view and costs a
-        // horizontal swipe, which is the gesture a chip row already invites.
-        flexDirection: { xs: "row", md: "column" },
-        flexWrap: { xs: "nowrap", md: "wrap" },
-        overflowX: { xs: "auto", md: "visible" },
-        // Room for the focus ring, which an `overflow` container would clip.
-        px: { xs: 0.25, md: 0 },
-        py: { xs: 0.25, md: 0 },
-        // The scrollbar is chrome on a phone and noise on a trackpad; the pills
-        // themselves are the affordance, and the last one sits half-cut at the
-        // edge to say the row continues.
-        scrollbarWidth: "none",
-        "&::-webkit-scrollbar": { display: "none" },
-        alignContent: "flex-start",
-        gap: 0.5,
-        minWidth: { md: 168 },
-        maxWidth: { md: 200 }
-      },
-      children: options.map((option) => {
-        const active = option.id === activeId;
-        const reasonId = `${reasonPrefix}-${option.id}`;
-        return /* @__PURE__ */ jsxs(
-          Box,
-          {
-            component: "button",
-            type: "button",
-            "aria-pressed": active,
-            "aria-disabled": option.overMax || void 0,
-            "aria-describedby": option.overMax ? reasonId : void 0,
-            "data-testid": `${dataTestId}-quick-${option.id}`,
-            onClick: () => {
-              if (!option.overMax) onPick(option);
-            },
-            sx: optionSx(active, option.overMax),
-            children: [
-              option.label,
-              option.overMax && /* @__PURE__ */ jsx(Box, { component: "span", id: reasonId, sx: REASON_SX, children: reasonFor(option) })
-            ]
-          },
-          option.id
-        );
-      })
-    }
-  );
-}
-
-export {
-  DateRangeQuickList
-};
-//# sourceMappingURL=chunk-NSJVQ5YJ.js.map

package/dist/chunk-NSJVQ5YJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/DateRangePicker/DateRangePickerQuickList.tsx"],"sourcesContent":["/**\n * The quick-pick column beside the calendar.\n *\n * These are BUTTONS, not links or list rows: each one sets the range and the\n * pressed one stays visibly pressed, which is what `aria-pressed` says out\n * loud. (A listbox with `aria-selected` would model it too — the rule is to\n * pick one and use it for every entry, so a reader's screen reader describes\n * the whole column the same way.)\n *\n * An over-cap entry is `aria-disabled` and keeps its place in the tab order,\n * with the reason rendered under the label. Removing it, or quietly shortening\n * the window it hands back, both answer \"why can't I have this year?\" with\n * silence.\n */\nimport Box from '@mui/material/Box/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport React, { useId } from 'react';\n\nimport type { ResolvedQuickRange } from './DateRangePicker.types';\nimport { sxRem } from '../../../tokens/relative';\n\nconst optionSx = (active: boolean, overMax: boolean): SxProps<Theme> => ({\n  display: 'block',\n  // Full-width rows in the side column; pills in the narrow row. A fixed full\n  // width in both would make the narrow layout nine stacked lines.\n  width: { xs: 'auto', md: '100%' },\n  // A pill must not be squeezed by its neighbours — the row SCROLLS rather\n  // than compressing \"Este trimestre\" into two characters and an ellipsis.\n  flex: { xs: '0 0 auto', md: '0 1 auto' },\n  textAlign: 'left',\n  font: 'inherit',\n  fontSize: sxRem(14),\n  fontWeight: active ? 600 : 400,\n  lineHeight: 1.4,\n  px: 1.5,\n  py: 0.75,\n  whiteSpace: { xs: 'nowrap', md: 'normal' },\n  border: '1px solid',\n  // Narrow, an entry has to look tappable on its own, with no column and no\n  // rule to group it — so the pill carries a visible edge. Beside the calendar\n  // the group already reads as a list and a border on every row would be nine\n  // boxes where the selected one should be the only marked thing.\n  borderColor: active ? 'primary.main' : { xs: 'divider', md: 'transparent' },\n  borderRadius: { xs: 999, md: 1 },\n  cursor: overMax ? 'not-allowed' : 'pointer',\n  color: overMax ? 'text.disabled' : active ? 'primary.main' : 'text.primary',\n  backgroundColor: active ? 'action.selected' : 'transparent',\n  '&:hover': { backgroundColor: overMax ? 'transparent' : 'action.hover' },\n  '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 1 },\n});\n\nconst REASON_SX: SxProps<Theme> = {\n  display: 'block',\n  fontSize: sxRem(11),\n  lineHeight: 1.3,\n  mt: 0.25,\n  color: 'text.disabled',\n};\n\nexport interface DateRangeQuickListProps {\n  options: ResolvedQuickRange[];\n  /** The entry the current draft equals, if any. */\n  activeId: string | undefined;\n  onPick: (option: ResolvedQuickRange) => void;\n  /** Why an entry is refused, rendered under it. */\n  reasonFor: (option: ResolvedQuickRange) => string;\n  /** Accessible name of the group. */\n  label: string;\n  dataTestId: string;\n}\n\nexport function DateRangeQuickList({\n  options,\n  activeId,\n  onPick,\n  reasonFor,\n  label,\n  dataTestId,\n}: DateRangeQuickListProps): React.JSX.Element {\n  const reasonPrefix = useId();\n\n  return (\n    <Box\n      role=\"group\"\n      aria-label={label}\n      data-testid={`${dataTestId}-quick-list`}\n      sx={{\n        display: 'flex',\n        // A column beside the calendar; ONE scrolling row of pills above it\n        // once there is no width for both.\n        //\n        // Scrolling rather than wrapping: nine wrapped pills take three or four\n        // lines at 390px, which pushes the calendar most of a screen down and\n        // makes the quick ranges — the fastest way to answer — the thing you\n        // have to scroll past. One line keeps the calendar in view and costs a\n        // horizontal swipe, which is the gesture a chip row already invites.\n        flexDirection: { xs: 'row', md: 'column' },\n        flexWrap: { xs: 'nowrap', md: 'wrap' },\n        overflowX: { xs: 'auto', md: 'visible' },\n        // Room for the focus ring, which an `overflow` container would clip.\n        px: { xs: 0.25, md: 0 },\n        py: { xs: 0.25, md: 0 },\n        // The scrollbar is chrome on a phone and noise on a trackpad; the pills\n        // themselves are the affordance, and the last one sits half-cut at the\n        // edge to say the row continues.\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n        alignContent: 'flex-start',\n        gap: 0.5,\n        minWidth: { md: 168 },\n        maxWidth: { md: 200 },\n      }}\n    >\n      {options.map((option) => {\n        const active = option.id === activeId;\n        const reasonId = `${reasonPrefix}-${option.id}`;\n        return (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            key={option.id}\n            aria-pressed={active}\n            // `aria-disabled`, never the `disabled` attribute: a disabled button\n            // is skipped by the tab order, so the reason under it is unreachable\n            // by exactly the reader most likely to need it.\n            aria-disabled={option.overMax || undefined}\n            aria-describedby={option.overMax ? reasonId : undefined}\n            data-testid={`${dataTestId}-quick-${option.id}`}\n            onClick={() => {\n              if (!option.overMax) onPick(option);\n            }}\n            sx={optionSx(active, option.overMax)}\n          >\n            {option.label}\n            {option.overMax && (\n              <Box component=\"span\" id={reasonId} sx={REASON_SX}>\n                {reasonFor(option)}\n              </Box>\n            )}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-NVNZFT5X.js

@@ -1,269 +0,0 @@
-import {
-  onMedia,
-  uiInk
-} from "./chunk-FQ6UW7IY.js";
-import {
-  rem
-} from "./chunk-YKCAJ2TN.js";
-
-// 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: rem(theme, hasIcon ? 19.2 : 12.8),
-    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: rem(theme, 12),
-  fontWeight: 500,
-  letterSpacing: "0.5px",
-  textTransform: "uppercase"
-}));
-var MetadataChip = styled(Chip)(({ theme }) => ({
-  height: 24,
-  fontSize: rem(theme, 12),
-  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: (theme) => ({
-          background: `linear-gradient(135deg, ${uiInk(theme).celebration.violet[0]} 0%, ${uiInk(theme).celebration.violet[1]} 100%)`,
-          color: onMedia(theme)
-        }),
-        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-NVNZFT5X.js.map

package/dist/chunk-NVNZFT5X.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Timeline/TimelineRow.tsx"],"sourcesContent":["import DotIcon from '@mui/icons-material/Circle';\nimport ExpandIcon from '@mui/icons-material/ExpandMore';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Card from '@mui/material/Card/index.js';\nimport CardContent from '@mui/material/CardContent/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, keyframes, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { TimelineItem, TimelineProps } from './Timeline.types';\nimport { onMedia, uiInk } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst slideInAnimation = keyframes`from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); }`;\nconst pulseAnimation = keyframes`0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; }`;\n\nconst TimelineItemContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['animated', 'alternating', 'index'].includes(prop as string),\n})<{\n  animated: boolean;\n  alternating: boolean;\n  index: number;\n  orientation: 'vertical' | 'horizontal';\n}>(({ theme, animated, alternating, index, orientation }) => ({\n  display: 'flex',\n  gap: theme.spacing(2),\n  position: 'relative',\n  ...(animated && {\n    animation: `${slideInAnimation} 0.5s ease ${index * 0.1}s both`,\n  }),\n  ...(orientation === 'vertical' &&\n    alternating && {\n      flexDirection: index % 2 === 0 ? 'row' : 'row-reverse',\n      textAlign: index % 2 === 0 ? 'left' : 'right',\n    }),\n  ...(orientation === 'horizontal' && {\n    flexDirection: 'column',\n    alignItems: 'center',\n    minWidth: 280,\n  }),\n}));\n\nconst TimelineConnector = styled(Box, {\n  shouldForwardProp: (prop) => !['isLast'].includes(prop as string),\n})<{\n  orientation: 'vertical' | 'horizontal';\n  isLast: boolean;\n}>(({ theme, orientation, isLast }) => ({\n  position: 'absolute',\n  background: `linear-gradient(180deg, ${theme.palette.primary.main} 0%, ${alpha(theme.palette.primary.main, 0.3)} 100%)`,\n  ...(orientation === 'vertical'\n    ? {\n        width: 2,\n        height: isLast ? 0 : 'calc(100% + 16px)',\n        left: 19,\n        top: 40,\n      }\n    : {\n        height: 2,\n        width: isLast ? 0 : '240px',\n        top: 19,\n        left: 40,\n      }),\n}));\n\nconst TimelineDot = styled(Box, {\n  shouldForwardProp: (prop) => !['dotColor', 'hasIcon', 'animated'].includes(prop as string),\n})<{ dotColor?: string; hasIcon: boolean; animated: boolean }>(({ theme, dotColor, hasIcon, animated }) => ({\n  width: 40,\n  height: 40,\n  borderRadius: '50%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  background: dotColor\n    ? `linear-gradient(135deg, ${dotColor} 0%, ${alpha(dotColor, 0.8)} 100%)`\n    : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)`,\n  boxShadow: `0 4px 12px ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,\n  border: `2px solid ${theme.palette.background.paper}`,\n  zIndex: 1,\n  flexShrink: 0,\n  ...(animated && {\n    animation: `${pulseAnimation} 2s ease infinite`,\n  }),\n  '& svg': {\n    fontSize: rem(theme, hasIcon ? 19.2 : 12.8),\n    color: theme.palette.background.paper,\n  },\n}));\n\nconst TimelineCard = styled(Card, {\n  shouldForwardProp: (prop) => !['timelineVariant', 'isClickable'].includes(prop as string),\n})<{ timelineVariant: 'default' | 'compact' | 'detailed'; isClickable: boolean }>(\n  ({ theme, timelineVariant, isClickable }) => ({\n    flex: 1,\n    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,\n    backdropFilter: 'blur(10px)',\n    WebkitBackdropFilter: 'blur(10px)',\n    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n    transition: theme.transitions.create(['transform', 'box-shadow']),\n    ...(isClickable && {\n      cursor: 'pointer',\n      '&:hover': {\n        transform: 'translateY(-2px)',\n        boxShadow: theme.shadows[8],\n      },\n    }),\n    ...(timelineVariant === 'compact' && {\n      padding: theme.spacing(1.5),\n      '& .MuiCardContent-root': {\n        padding: 0,\n        '&:last-child': {\n          paddingBottom: 0,\n        },\n      },\n    }),\n  }),\n);\n\nconst TimelineTimestamp = styled(Typography)(({ theme }) => ({\n  color: theme.palette.text.secondary,\n  fontSize: rem(theme, 12),\n  fontWeight: 500,\n  letterSpacing: '0.5px',\n  textTransform: 'uppercase',\n}));\n\nconst MetadataChip = styled(Chip)(({ theme }) => ({\n  height: 24,\n  fontSize: rem(theme, 12),\n  background: alpha(theme.palette.primary.main, 0.08),\n  border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n}));\n\n// Description, metadata chips and the action button, revealed on expand — or\n// always, in the detailed variant.\nconst TimelineDetails: React.FC<{\n  item: TimelineItem;\n  isExpanded: boolean;\n  variant: NonNullable<TimelineProps['variant']>;\n}> = ({ item, isExpanded, variant }) => {\n  const open = isExpanded || variant === 'detailed';\n\n  return (\n    <Collapse in={open}>\n      <Fade in={open}>\n        <Stack spacing={1.5} sx={{ mt: 1 }}>\n          {item.description && (\n            <Typography variant=\"body2\" color=\"text.secondary\">\n              {item.description}\n            </Typography>\n          )}\n\n          {item.metadata && (\n            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>\n              {Object.entries(item.metadata).map(([key, value]) => (\n                <MetadataChip key={key} label={`${key}: ${value}`} size=\"small\" />\n              ))}\n            </Box>\n          )}\n\n          {item.action && (\n            <Box>\n              <Button\n                size=\"small\"\n                variant=\"contained\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  item.action!.onClick();\n                }}\n                sx={(theme) => ({\n                  background: `linear-gradient(135deg, ${uiInk(theme).celebration.violet[0]} 0%, ${uiInk(theme).celebration.violet[1]} 100%)`,\n                  color: onMedia(theme),\n                })}\n              >\n                {item.action.label}\n              </Button>\n            </Box>\n          )}\n        </Stack>\n      </Fade>\n    </Collapse>\n  );\n};\n\n// Timestamp, title and the expand toggle.\nconst TimelineCardHeader: React.FC<{\n  item: TimelineItem;\n  variant: NonNullable<TimelineProps['variant']>;\n  isExpanded: boolean;\n  onExpandClick: (itemId: string, event: React.MouseEvent) => void;\n}> = ({ item, variant, isExpanded, onExpandClick }) => (\n  <Box\n    sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}\n  >\n    <Box sx={{ flex: 1 }}>\n      <TimelineTimestamp data-testid=\"timeline-timestamp\">\n        {item.timestamp}\n      </TimelineTimestamp>\n      <Typography\n        variant={variant === 'compact' ? 'body2' : 'h6'}\n        fontWeight={variant === 'compact' ? 500 : 600}\n        sx={{ mt: 0.5 }}\n      >\n        {item.title}\n      </Typography>\n    </Box>\n    {item.description && variant !== 'compact' && (\n      <IconButton\n        size=\"small\"\n        onClick={(e) => onExpandClick(item.id, e)}\n        aria-label={isExpanded ? 'Collapse item details' : 'Expand item details'}\n        sx={{\n          transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',\n          transition: 'transform 0.3s ease',\n        }}\n      >\n        <ExpandIcon />\n      </IconButton>\n    )}\n  </Box>\n);\n\n// The card beside the rail: timestamp, title, expand toggle and the collapsible\n// detail body.\nconst TimelineRowCard: React.FC<{\n  item: TimelineItem;\n  variant: NonNullable<TimelineProps['variant']>;\n  isClickable: boolean;\n  isExpanded: boolean;\n  onItemClick?: (item: TimelineItem) => void;\n  onExpandClick: (itemId: string, event: React.MouseEvent) => void;\n}> = ({ item, variant, isClickable, isExpanded, onItemClick, onExpandClick }) => (\n  <TimelineCard\n    timelineVariant={variant}\n    isClickable={isClickable}\n    onClick={isClickable ? () => onItemClick?.(item) : undefined}\n    role=\"article\"\n    aria-label={`Timeline item: ${item.title}`}\n    data-testid=\"timeline-card\"\n  >\n    <CardContent>\n      <Stack spacing={1}>\n        <TimelineCardHeader\n          item={item}\n          variant={variant}\n          isExpanded={isExpanded}\n          onExpandClick={onExpandClick}\n        />\n\n        {variant === 'compact' && item.description && (\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            {item.description}\n          </Typography>\n        )}\n\n        {variant !== 'compact' && (\n          <TimelineDetails item={item} isExpanded={isExpanded} variant={variant} />\n        )}\n      </Stack>\n    </CardContent>\n  </TimelineCard>\n);\n\n// One entry: the dot and connector on the rail, and the card beside it.\nexport const TimelineRow: React.FC<{\n  item: TimelineItem;\n  index: number;\n  isLast: boolean;\n  variant: NonNullable<TimelineProps['variant']>;\n  orientation: 'vertical' | 'horizontal';\n  showConnector: boolean;\n  animated: boolean;\n  alternating: boolean;\n  isExpanded: boolean;\n  onItemClick?: (item: TimelineItem) => void;\n  onExpandClick: (itemId: string, event: React.MouseEvent) => void;\n}> = ({\n  item,\n  index,\n  isLast,\n  variant,\n  orientation,\n  showConnector,\n  animated,\n  alternating,\n  isExpanded,\n  onItemClick,\n  onExpandClick,\n}) => {\n\n    \n  // Determine if item should be clickable:\n  // - Has onItemClick callback, OR\n  // - Has description and variant is not compact (so it can be expanded)\n  const hasExpandableContent = item.description && variant !== 'compact';\n  const isClickable = !!onItemClick || !!hasExpandableContent;\n\n  return (\n    <TimelineItemContainer\n      key={item.id}\n      animated={animated}\n      alternating={alternating && orientation === 'vertical'}\n      index={index}\n      orientation={orientation}\n      data-testid=\"timeline-item-container\"\n    >\n      <Box sx={{ position: 'relative' }}>\n        <TimelineDot\n          dotColor={item.color}\n          hasIcon={!!item.icon}\n          animated={animated}\n          data-testid=\"timeline-dot\"\n        >\n          {item.icon ? (\n            <Box data-testid=\"item-icon\">{item.icon}</Box>\n          ) : (\n            <DotIcon data-testid=\"item-icon-default\" />\n          )}\n        </TimelineDot>\n        {showConnector && !isLast && (\n          <TimelineConnector\n            orientation={orientation}\n            isLast={isLast}\n            data-testid=\"timeline-connector\"\n          />\n        )}\n      </Box>\n\n      <TimelineRowCard\n        item={item}\n        variant={variant}\n        isClickable={isClickable}\n        isExpanded={isExpanded}\n        onItemClick={onItemClick}\n        onExpandClick={onExpandClick}\n      />\n    </TimelineItemContainer>\n  );\n};\n"],"mappings":"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","names":[]}