@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-ECNJGROX.js

@@ -0,0 +1,299 @@
+import {
+  SuggestionsList,
+  buildSuggestions,
+  calculatePasswordStrength,
+  defaultRequirements,
+  evaluateRequirements,
+  getStrengthIcon,
+  getStrengthLabel
+} from "./chunk-SAIO6EBW.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/PasswordStrength/PasswordStrength.tsx
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import Box from "@mui/material/Box/index.js";
+import Chip from "@mui/material/Chip/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import LinearProgress from "@mui/material/LinearProgress/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, keyframes, styled, useTheme } from "@mui/material/styles/index.js";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RequirementIcon = ({ met }) => {
+  return met ? /* @__PURE__ */ jsx(CheckIcon, { "data-testid": "check-icon" }) : /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "close-icon" });
+};
+var pulseAnimation = keyframes`
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+`;
+var slideInAnimation = (theme) => keyframes`
+  from {
+    transform: translateX(${rem(theme, -10)});
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+`;
+var StrengthContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "animated"
+})(({ theme, animated }) => ({
+  width: "100%",
+  padding: theme.spacing(2),
+  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
+  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+  borderRadius: theme.shape.borderRadius * 2,
+  transition: animated ? "all 0.3s ease" : "none"
+}));
+var StrengthBar = styled(LinearProgress, {
+  shouldForwardProp: (prop) => prop !== "strength" && prop !== "animated"
+})(({ theme, strength, animated }) => {
+  const getColor = () => {
+    if (strength <= 20) return theme.palette.error.main;
+    if (strength <= 40) return theme.palette.warning.main;
+    if (strength <= 60) return theme.palette.info.main;
+    if (strength <= 80) return theme.palette.success.light;
+    return theme.palette.success.main;
+  };
+  const getGradient = () => {
+    const color = getColor();
+    return `linear-gradient(90deg, ${color} 0%, ${alpha(color, 0.8)} 100%)`;
+  };
+  return {
+    height: rem(theme, 8),
+    borderRadius: rem(theme, 4),
+    backgroundColor: alpha(theme.palette.action.disabled, 0.1),
+    "& .MuiLinearProgress-bar": {
+      borderRadius: rem(theme, 4),
+      background: getGradient(),
+      transition: animated ? "all 0.3s ease" : "none",
+      boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(getColor(), 0.3)}`
+    }
+  };
+});
+var RequirementItem = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "met" && prop !== "animated"
+})(({ theme, met, animated }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  padding: theme.spacing(0.75, 1),
+  borderRadius: theme.shape.borderRadius,
+  background: met ? alpha(theme.palette.success.main, 0.08) : alpha(theme.palette.action.disabled, 0.04),
+  transition: animated ? "all 0.3s ease" : "none",
+  animation: animated ? `${slideInAnimation(theme)} 0.3s ease` : "none",
+  "& svg": {
+    fontSize: rem(theme, 16),
+    color: met ? theme.palette.success.main : theme.palette.text.disabled
+  }
+}));
+var StrengthLabel = styled(Chip, {
+  shouldForwardProp: (prop) => prop !== "strength" && prop !== "animated"
+})(({ theme, strength, animated }) => {
+  const getColor = () => {
+    if (strength <= 20) return theme.palette.error;
+    if (strength <= 40) return theme.palette.warning;
+    if (strength <= 60) return theme.palette.info;
+    if (strength <= 80) return theme.palette.success;
+    return theme.palette.success;
+  };
+  const palette = getColor();
+  return {
+    background: alpha(palette.main, 0.1),
+    color: palette.main,
+    border: `1px solid ${alpha(palette.main, 0.3)}`,
+    fontWeight: 600,
+    animation: animated ? `${pulseAnimation} 2s ease infinite` : "none"
+  };
+});
+var StepsContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(2)
+}));
+var Step = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "active" && prop !== "completed" && prop !== "animated"
+})(
+  ({ theme, active, completed, animated }) => ({
+    flex: 1,
+    height: rem(theme, 6),
+    borderRadius: rem(theme, 3),
+    background: completed ? `linear-gradient(90deg, ${theme.palette.success.main} 0%, ${theme.palette.success.light} 100%)` : active ? `linear-gradient(90deg, ${theme.palette.warning.main} 0%, ${theme.palette.warning.light} 100%)` : alpha(theme.palette.action.disabled, 0.2),
+    transition: animated ? "all 0.3s ease" : "none",
+    boxShadow: completed ? `0 ${rems(theme, 2, 8)} ${alpha(theme.palette.success.main, 0.3)}` : "none"
+  })
+);
+var StrengthIndicator = ({ variant, strength, animated }) => {
+  const theme = useTheme();
+  switch (variant) {
+    case "circular":
+      return /* @__PURE__ */ jsx(Box, { sx: { position: "relative", display: "inline-flex" }, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            width: sxRem(80),
+            height: sxRem(80),
+            borderRadius: "50%",
+            background: `conic-gradient(
+                ${theme.palette.success.main} 0deg ${strength * 3.6}deg,
+                ${alpha(theme.palette.action.disabled, 0.1)} ${strength * 3.6}deg 360deg
+              )`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.success.main, strength / 200)}`
+          },
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                width: sxRem(64),
+                height: sxRem(64),
+                borderRadius: "50%",
+                background: theme.palette.background.paper,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexDirection: "column"
+              },
+              children: /* @__PURE__ */ jsxs(Typography, { variant: "h6", fontWeight: "bold", children: [
+                strength,
+                "%"
+              ] })
+            }
+          )
+        }
+      ) });
+    case "steps": {
+      const steps = 5;
+      const activeStep = Math.ceil(strength / 100 * steps);
+      return /* @__PURE__ */ jsx(StepsContainer, { children: Array.from({ length: steps }, (_, i) => /* @__PURE__ */ jsx(Step, { active: i === activeStep - 1, completed: i < activeStep - 1, animated }, i)) });
+    }
+    default:
+      return /* @__PURE__ */ jsx(StrengthBar, { variant: "determinate", value: strength, strength, animated });
+  }
+};
+var StrengthHeading = ({ copy, strength, hasValue, animated }) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+  /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: copy.strengthHeading }),
+  hasValue && /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsx(
+    StrengthLabel,
+    {
+      label: getStrengthLabel(strength, copy.bands),
+      icon: getStrengthIcon(strength),
+      size: "small",
+      strength,
+      animated
+    }
+  ) })
+] });
+var RequirementsList = React.forwardRef(({ copy, requirements, checks, animated }, ref) => {
+  const rows = [
+    [requirements.minLength, "length", copy.requirements.minLength(requirements.minLength ?? 0)],
+    [requirements.uppercase, "uppercase", copy.requirements.uppercase],
+    [requirements.lowercase, "lowercase", copy.requirements.lowercase],
+    [requirements.numbers, "numbers", copy.requirements.numbers],
+    [requirements.special, "special", copy.requirements.special]
+  ];
+  return /* @__PURE__ */ jsxs(Stack, { ref, spacing: 1, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", fontWeight: "medium", children: copy.requirementsHeading }),
+    rows.filter(([enabled]) => Boolean(enabled)).map(([, key, label]) => /* @__PURE__ */ jsxs(RequirementItem, { met: checks[key], animated, children: [
+      /* @__PURE__ */ jsx(RequirementIcon, { met: checks[key] }),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", children: label })
+    ] }, key))
+  ] });
+});
+RequirementsList.displayName = "RequirementsList";
+var PasswordStrengthBody = ({
+  copy,
+  value,
+  strength,
+  requirements,
+  requirementChecks,
+  suggestions,
+  showStrengthLabel,
+  showRequirements,
+  showSuggestions,
+  variant,
+  animated
+}) => /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+  showStrengthLabel && /* @__PURE__ */ jsx(
+    StrengthHeading,
+    {
+      copy,
+      strength,
+      hasValue: value.length > 0,
+      animated
+    }
+  ),
+  /* @__PURE__ */ jsx(StrengthIndicator, { variant, strength, animated }),
+  showRequirements && /* @__PURE__ */ jsx(Fade, { in: value.length > 0, children: /* @__PURE__ */ jsx(
+    RequirementsList,
+    {
+      copy,
+      requirements,
+      checks: requirementChecks,
+      animated
+    }
+  ) }),
+  showSuggestions && suggestions.length > 0 && value.length > 0 && /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsx(SuggestionsList, { suggestions, heading: copy.suggestionsHeading }) })
+] });
+var PasswordStrength = ({
+  copy,
+  value = "",
+  showRequirements = true,
+  requirements = defaultRequirements,
+  showStrengthLabel = true,
+  showSuggestions = false,
+  variant = "linear",
+  animated = true,
+  "data-testid": dataTestId
+}) => {
+  const strength = useMemo(
+    () => calculatePasswordStrength(value, requirements),
+    [value, requirements]
+  );
+  const requirementChecks = useMemo(
+    () => evaluateRequirements(value, requirements),
+    [value, requirements]
+  );
+  const suggestions = useMemo(
+    () => buildSuggestions(requirementChecks, copy.suggestions, requirements.minLength ?? 0),
+    [requirementChecks, copy.suggestions, requirements.minLength]
+  );
+  return /* @__PURE__ */ jsx(StrengthContainer, { animated, "data-testid": dataTestId, children: /* @__PURE__ */ jsx(
+    PasswordStrengthBody,
+    {
+      copy,
+      value,
+      strength,
+      requirements,
+      requirementChecks,
+      suggestions,
+      showStrengthLabel,
+      showRequirements,
+      showSuggestions,
+      variant,
+      animated
+    }
+  ) });
+};
+var PasswordStrength_default = PasswordStrength;
+
+export {
+  PasswordStrength,
+  PasswordStrength_default
+};
+//# sourceMappingURL=chunk-ECNJGROX.js.map

package/dist/chunk-ECNJGROX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/PasswordStrength/PasswordStrength.tsx"],"sourcesContent":["import CheckIcon from '@mui/icons-material/Check';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport Box from '@mui/material/Box/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport LinearProgress from '@mui/material/LinearProgress/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { FC} from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { RequirementChecks } from './PasswordStrength.helpers';\nimport {\n  buildSuggestions,\n  calculatePasswordStrength,\n  defaultRequirements,\n  evaluateRequirements,\n  getStrengthIcon,\n  getStrengthLabel,\n  SuggestionsList } from './PasswordStrength.helpers';\nimport type { PasswordRequirements, PasswordStrengthProps } from './PasswordStrength.types';\nimport type { PasswordStrengthCopy } from '../../../copy';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\ninterface RequirementIconProps {\n  met: boolean;\n}\n const RequirementIcon: FC<RequirementIconProps> = ({ met }) => {\n  return met ? (\n    <CheckIcon data-testid=\"check-icon\" />\n  ) : (\n    <CloseIcon data-testid=\"close-icon\" />\n  );\n};\n\n// Default requirements\n// Animation keyframes\nconst pulseAnimation = keyframes`\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n`;\n\nconst slideInAnimation = (theme: Theme) => keyframes`\n  from {\n    transform: translateX(${rem(theme, -10)});\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n`;\n\n// Styled components\nconst StrengthContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'animated' })<{ animated?: boolean }>(({ theme, animated }) => ({\n  width: '100%',\n  padding: theme.spacing(2),\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,\n  backdropFilter: `blur(${rem(theme, 10)})`,\n  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n  borderRadius: theme.shape.borderRadius * 2,\n  transition: animated ? 'all 0.3s ease' : 'none' }));\n\nconst StrengthBar = styled(LinearProgress, {\n  shouldForwardProp: (prop) => prop !== 'strength' && prop !== 'animated' })<{ strength: number; animated?: boolean }>(({ theme, strength, animated }) => {\n  const getColor = () => {\n    if (strength <= 20) return theme.palette.error.main;\n    if (strength <= 40) return theme.palette.warning.main;\n    if (strength <= 60) return theme.palette.info.main;\n    if (strength <= 80) return theme.palette.success.light;\n    return theme.palette.success.main;\n  };\n\n  const getGradient = () => {\n    const color = getColor();\n    return `linear-gradient(90deg, ${color} 0%, ${alpha(color, 0.8)} 100%)`;\n  };\n\n  return {\n    height: rem(theme, 8),\n    borderRadius: rem(theme, 4),\n    backgroundColor: alpha(theme.palette.action.disabled, 0.1),\n    '& .MuiLinearProgress-bar': {\n      borderRadius: rem(theme, 4),\n      background: getGradient(),\n      transition: animated ? 'all 0.3s ease' : 'none',\n      boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(getColor(), 0.3)}` } };\n});\n\nconst RequirementItem = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'met' && prop !== 'animated' })<{ met: boolean; animated?: boolean }>(({ theme, met, animated }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  padding: theme.spacing(0.75, 1),\n  borderRadius: theme.shape.borderRadius,\n  background: met\n    ? alpha(theme.palette.success.main, 0.08)\n    : alpha(theme.palette.action.disabled, 0.04),\n  transition: animated ? 'all 0.3s ease' : 'none',\n  animation: animated ? `${slideInAnimation(theme)} 0.3s ease` : 'none',\n  '& svg': {\n    fontSize: rem(theme, 16),\n    color: met ? theme.palette.success.main : theme.palette.text.disabled } }));\n\nconst StrengthLabel = styled(Chip, {\n  shouldForwardProp: (prop) => prop !== 'strength' && prop !== 'animated' })<{ strength: number; animated?: boolean }>(({ theme, strength, animated }) => {\n  const getColor = () => {\n    if (strength <= 20) return theme.palette.error;\n    if (strength <= 40) return theme.palette.warning;\n    if (strength <= 60) return theme.palette.info;\n    if (strength <= 80) return theme.palette.success;\n    return theme.palette.success;\n  };\n\n  const palette = getColor();\n\n  return {\n    background: alpha(palette.main, 0.1),\n    color: palette.main,\n    border: `1px solid ${alpha(palette.main, 0.3)}`,\n    fontWeight: 600,\n    animation: animated ? `${pulseAnimation} 2s ease infinite` : 'none' };\n});\n\nconst StepsContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1),\n  marginTop: theme.spacing(2) }));\n\nconst Step = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'active' && prop !== 'completed' && prop !== 'animated' })<{ active: boolean; completed: boolean; animated?: boolean }>(\n  ({ theme, active, completed, animated }) => ({\n    flex: 1,\n    height: rem(theme, 6),\n    borderRadius: rem(theme, 3),\n    background: completed\n      ? `linear-gradient(90deg, ${theme.palette.success.main} 0%, ${theme.palette.success.light} 100%)`\n      : active\n        ? `linear-gradient(90deg, ${theme.palette.warning.main} 0%, ${theme.palette.warning.light} 100%)`\n        : alpha(theme.palette.action.disabled, 0.2),\n    transition: animated ? 'all 0.3s ease' : 'none',\n    boxShadow: completed ? `0 ${rems(theme, 2, 8)} ${alpha(theme.palette.success.main, 0.3)}` : 'none' }),\n);\n\n// The three indicator variants, out of the component body so the render keeps\n// only its own layout branches.\nconst StrengthIndicator: React.FC<{\n  variant: PasswordStrengthProps['variant'];\n  strength: number;\n  animated: boolean;\n}> = ({ variant, strength, animated }) => {\n  const theme = useTheme();\n\n  switch (variant) {\n    case 'circular':\n      return (\n        <Box sx={{ position: 'relative', display: 'inline-flex' }}>\n          <Box\n            sx={{\n              width: sxRem(80),\n              height: sxRem(80),\n              borderRadius: '50%',\n              background: `conic-gradient(\n                ${theme.palette.success.main} 0deg ${strength * 3.6}deg,\n                ${alpha(theme.palette.action.disabled, 0.1)} ${strength * 3.6}deg 360deg\n              )`,\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.success.main, strength / 200)}` }}\n          >\n            <Box\n              sx={{\n                width: sxRem(64),\n                height: sxRem(64),\n                borderRadius: '50%',\n                background: theme.palette.background.paper,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                flexDirection: 'column' }}\n            >\n              <Typography variant=\"h6\" fontWeight=\"bold\">\n                {strength}%\n              </Typography>\n            </Box>\n          </Box>\n        </Box>\n      );\n\n    case 'steps': {\n      const steps = 5;\n      const activeStep = Math.ceil((strength / 100) * steps);\n      return (\n        <StepsContainer>\n          {Array.from({ length: steps }, (_, i) => (\n            <Step key={i} active={i === activeStep - 1} completed={i < activeStep - 1} animated={animated} />\n          ))}\n        </StepsContainer>\n      );\n    }\n\n    default:\n      return <StrengthBar variant=\"determinate\" value={strength} strength={strength} animated={animated} />;\n  }\n};\n\nconst StrengthHeading: React.FC<{\n  copy: PasswordStrengthCopy;\n  strength: number;\n  hasValue: boolean;\n  animated: boolean;\n}> = ({ copy, strength, hasValue, animated }) => (\n  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n    <Typography variant=\"body2\" color=\"text.secondary\">\n      {copy.strengthHeading}\n    </Typography>\n    {hasValue && (\n      <Fade in={true}>\n        <StrengthLabel\n          label={getStrengthLabel(strength, copy.bands)}\n          icon={getStrengthIcon(strength)}\n          size=\"small\"\n          strength={strength}\n          animated={animated}\n        />\n      </Fade>\n    )}\n  </Box>\n);\n\n// One row per enabled requirement. Previously five near-identical JSX blocks,\n// each with its own `requirements.x &&` guard.\n//\n// `forwardRef` because it is `Fade`'s child: Fade hands it a ref and reads\n// `scrollTop` off that node on enter, so a component that drops the ref throws\n// the moment the first character is typed. Only the ref: Fade's injected\n// `style` (opacity/visibility) is still dropped, so the list stays visible.\nconst RequirementsList = React.forwardRef<\n  HTMLDivElement,\n  {\n    copy: PasswordStrengthCopy;\n    requirements: PasswordRequirements;\n    checks: RequirementChecks;\n    animated: boolean;\n  }\n>(({ copy, requirements, checks, animated }, ref) => {\n  const rows: ReadonlyArray<[unknown, keyof RequirementChecks, React.ReactNode]> = [\n    [requirements.minLength, 'length', copy.requirements.minLength(requirements.minLength ?? 0)],\n    [requirements.uppercase, 'uppercase', copy.requirements.uppercase],\n    [requirements.lowercase, 'lowercase', copy.requirements.lowercase],\n    [requirements.numbers, 'numbers', copy.requirements.numbers],\n    [requirements.special, 'special', copy.requirements.special],\n  ];\n\n  return (\n    <Stack ref={ref} spacing={1}>\n      <Typography variant=\"caption\" color=\"text.secondary\" fontWeight=\"medium\">\n        {copy.requirementsHeading}\n      </Typography>\n      {rows\n        .filter(([enabled]) => Boolean(enabled))\n        .map(([, key, label]) => (\n          <RequirementItem key={key} met={checks[key]} animated={animated}>\n            <RequirementIcon met={checks[key]} />\n            <Typography variant=\"caption\">{label}</Typography>\n          </RequirementItem>\n        ))}\n    </Stack>\n  );\n});\nRequirementsList.displayName = 'RequirementsList';\n\n// The visible sections. Kept apart from PasswordStrength itself so the exported\n// component is just prop defaults plus the three memos, and every display guard\n// lives in one place.\nconst PasswordStrengthBody: React.FC<{\n  value: string;\n  strength: number;\n  copy: PasswordStrengthCopy;\n  requirements: PasswordRequirements;\n  requirementChecks: RequirementChecks;\n  suggestions: string[];\n  showStrengthLabel: boolean;\n  showRequirements: boolean;\n  showSuggestions: boolean;\n  variant: PasswordStrengthProps['variant'];\n  animated: boolean;\n}> = ({\n  copy,\n  value,\n  strength,\n  requirements,\n  requirementChecks,\n  suggestions,\n  showStrengthLabel,\n  showRequirements,\n  showSuggestions,\n  variant,\n  animated }) => (\n    <Stack spacing={2}>\n      {showStrengthLabel && (\n        <StrengthHeading\n          copy={copy}\n          strength={strength}\n          hasValue={value.length > 0}\n          animated={animated}\n        />\n      )}\n\n      <StrengthIndicator variant={variant} strength={strength} animated={animated} />\n\n      {showRequirements && (\n        <Fade in={value.length > 0}>\n          <RequirementsList\n            copy={copy}\n            requirements={requirements}\n            checks={requirementChecks}\n            animated={animated}\n          />\n        </Fade>\n      )}\n\n      {showSuggestions && suggestions.length > 0 && value.length > 0 && (\n        <Fade in={true}>\n          <SuggestionsList suggestions={suggestions} heading={copy.suggestionsHeading} />\n        </Fade>\n      )}\n    </Stack>\n);\n\n// Main component\nexport const PasswordStrength: FC<PasswordStrengthProps> = ({\n  copy,\n  value = '',\n  showRequirements = true,\n  requirements = defaultRequirements,\n  showStrengthLabel = true,\n  showSuggestions = false,\n  variant = 'linear',\n  animated = true,\n  'data-testid': dataTestId }) => {\n\n  const strength = useMemo(\n    () => calculatePasswordStrength(value, requirements),\n    [value, requirements],\n  );\n\n  const requirementChecks = useMemo(\n    () => evaluateRequirements(value, requirements),\n    [value, requirements],\n  );\n\n  const suggestions = useMemo(\n    () => buildSuggestions(requirementChecks, copy.suggestions, requirements.minLength ?? 0),\n    [requirementChecks, copy.suggestions, requirements.minLength],\n  );\n\n  return (\n    <StrengthContainer animated={animated} data-testid={dataTestId}>\n      <PasswordStrengthBody\n        copy={copy}\n        value={value}\n        strength={strength}\n        requirements={requirements}\n        requirementChecks={requirementChecks}\n        suggestions={suggestions}\n        showStrengthLabel={showStrengthLabel}\n        showRequirements={showRequirements}\n        showSuggestions={showSuggestions}\n        variant={variant}\n        animated={animated}\n      />\n    </StrengthContainer>\n  );\n};\n\n// Export default\nexport default PasswordStrength;\n"],"mappings":"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","names":[]}

package/dist/chunk-EIYTS5VZ.js

@@ -0,0 +1,270 @@
+import {
+  onMedia,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} 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 = (theme) => keyframes`from { opacity: 0; transform: translateX(${rem(theme, -20)}); } 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(theme)} 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: rem(theme, 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: rem(theme, 2),
+    height: isLast ? 0 : `calc(100% + ${rem(theme, 16)})`,
+    left: rem(theme, 19),
+    top: rem(theme, 40)
+  } : {
+    height: rem(theme, 2),
+    width: isLast ? 0 : rem(theme, 240),
+    top: rem(theme, 19),
+    left: rem(theme, 40)
+  }
+}));
+var TimelineDot = styled(Box, {
+  shouldForwardProp: (prop) => !["dotColor", "hasIcon", "animated"].includes(prop)
+})(({ theme, dotColor, hasIcon, animated }) => ({
+  width: rem(theme, 40),
+  height: rem(theme, 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: `${rems(theme, 0, 4, 12)} ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,
+  border: `${rem(theme, 2)} 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(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+    transition: theme.transitions.create(["transform", "box-shadow"]),
+    ...isClickable && {
+      cursor: "pointer",
+      "&:hover": {
+        transform: `translateY(${rem(theme, -2)})`,
+        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: rem(theme, 0.5),
+  textTransform: "uppercase"
+}));
+var MetadataChip = styled(Chip)(({ theme }) => ({
+  height: rem(theme, 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-EIYTS5VZ.js.map

package/dist/chunk-EIYTS5VZ.js.map

@@ -0,0 +1 @@
+{"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, type Theme } 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, rems } from '../../../tokens/relative';\n\nconst slideInAnimation = (theme: Theme) =>\n  keyframes`from { opacity: 0; transform: translateX(${rem(theme, -20)}); } 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(theme)} 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: rem(theme, 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: rem(theme, 2),\n        height: isLast ? 0 : `calc(100% + ${rem(theme, 16)})`,\n        left: rem(theme, 19),\n        top: rem(theme, 40),\n      }\n    : {\n        height: rem(theme, 2),\n        width: isLast ? 0 : rem(theme, 240),\n        top: rem(theme, 19),\n        left: rem(theme, 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: rem(theme, 40),\n  height: rem(theme, 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: `${rems(theme, 0, 4, 12)} ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,\n  border: `${rem(theme, 2)} 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(${rem(theme, 10)})`,\n    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\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(${rem(theme, -2)})`,\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: rem(theme, 0.5),\n  textTransform: 'uppercase',\n}));\n\nconst MetadataChip = styled(Chip)(({ theme }) => ({\n  height: rem(theme, 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":[]}