@12-apps/ui 5.0.0 → 5.0.1

package/dist/form/PasswordStrength.js

@@ -0,0 +1,351 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/form/PasswordStrength/PasswordStrength.tsx
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import {
+  alpha,
+  Box as Box2,
+  Chip,
+  Fade,
+  keyframes,
+  LinearProgress,
+  Stack,
+  styled,
+  Typography as Typography2,
+  useTheme
+} from "@mui/material";
+import { useMemo } from "react";
+
+// src/components/form/PasswordStrength/PasswordStrength.helpers.tsx
+import SecurityIcon from "@mui/icons-material/Security";
+import SuccessIcon from "@mui/icons-material/CheckCircle";
+import WarningIcon from "@mui/icons-material/Warning";
+import { Box, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultRequirements = {
+  minLength: 8,
+  uppercase: true,
+  lowercase: true,
+  numbers: true,
+  special: true
+};
+var SPECIAL_CHARACTERS = /[!@#$%^&*(),.?":{}|<>]/;
+var DEFAULT_MIN_LENGTH = 8;
+var REQUIREMENT_POINTS = {
+  length: 20,
+  uppercase: 10,
+  lowercase: 10,
+  numbers: 15,
+  special: 15
+};
+var evaluateRequirements = (password, requirements) => {
+  if (!password) {
+    return { length: false, uppercase: false, lowercase: false, numbers: false, special: false };
+  }
+  return {
+    length: password.length >= (requirements.minLength || DEFAULT_MIN_LENGTH),
+    uppercase: !requirements.uppercase || /[A-Z]/.test(password),
+    lowercase: !requirements.lowercase || /[a-z]/.test(password),
+    numbers: !requirements.numbers || /\d/.test(password),
+    special: !requirements.special || SPECIAL_CHARACTERS.test(password)
+  };
+};
+var lengthBonus = (length) => {
+  const base = Math.min(length * 3, 30);
+  const over12 = length > 12 ? 10 : 0;
+  const over16 = length > 16 ? 10 : 0;
+  return base + over12 + over16;
+};
+var calculatePasswordStrength = (password, requirements) => {
+  if (!password) return 0;
+  const checks = evaluateRequirements(password, requirements);
+  const earned = Object.entries(REQUIREMENT_POINTS).reduce(
+    (total, [key, points]) => total + (checks[key] ? points : 0),
+    0
+  );
+  return Math.min(earned + lengthBonus(password.length), 100);
+};
+var STRENGTH_LABELS = [
+  [20, "Very Weak"],
+  [40, "Weak"],
+  [60, "Fair"],
+  [80, "Good"]
+];
+var getStrengthLabel = (strength) => STRENGTH_LABELS.find(([ceiling]) => strength <= ceiling)?.[1] ?? "Strong";
+var getStrengthIcon = (strength) => {
+  if (strength <= 40) return /* @__PURE__ */ jsx(WarningIcon, {});
+  if (strength <= 80) return /* @__PURE__ */ jsx(SecurityIcon, {});
+  return /* @__PURE__ */ jsx(SuccessIcon, {});
+};
+var SUGGESTIONS = [
+  ["length", "Use at least 8 characters"],
+  ["uppercase", "Add uppercase letters"],
+  ["lowercase", "Add lowercase letters"],
+  ["numbers", "Include numbers"],
+  ["special", "Add special characters"]
+];
+var buildSuggestions = (checks) => SUGGESTIONS.filter(([key]) => !checks[key]).map(([, tip]) => tip);
+var SuggestionsList = ({ suggestions }) => /* @__PURE__ */ jsxs(Box, { children: [
+  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", fontWeight: "medium", children: "Suggestions:" }),
+  /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: suggestions.map((tip) => /* @__PURE__ */ jsxs(Typography, { variant: "caption", display: "block", color: "warning.main", sx: { ml: 2 }, children: [
+    "\u2022 ",
+    tip
+  ] }, tip)) })
+] });
+
+// src/components/form/PasswordStrength/PasswordStrength.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var RequirementIcon = ({ met }) => {
+  return met ? /* @__PURE__ */ jsx2(CheckIcon, { "data-testid": "check-icon" }) : /* @__PURE__ */ jsx2(CloseIcon, { "data-testid": "close-icon" });
+};
+var pulseAnimation = keyframes`
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+`;
+var slideInAnimation = keyframes`
+  from {
+    transform: translateX(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+`;
+var StrengthContainer = styled(Box2, {
+  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(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  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: 8,
+    borderRadius: 4,
+    backgroundColor: alpha(theme.palette.action.disabled, 0.1),
+    "& .MuiLinearProgress-bar": {
+      borderRadius: 4,
+      background: getGradient(),
+      transition: animated ? "all 0.3s ease" : "none",
+      boxShadow: `0 2px 8px ${alpha(getColor(), 0.3)}`
+    }
+  };
+});
+var RequirementItem = styled(Box2, {
+  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} 0.3s ease` : "none",
+  "& svg": {
+    fontSize: "1rem",
+    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(Box2)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(2)
+}));
+var Step = styled(Box2, {
+  shouldForwardProp: (prop) => prop !== "active" && prop !== "completed" && prop !== "animated"
+})(
+  ({ theme, active, completed, animated }) => ({
+    flex: 1,
+    height: 6,
+    borderRadius: 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 2px 8px ${alpha(theme.palette.success.main, 0.3)}` : "none"
+  })
+);
+var StrengthIndicator = ({ variant, strength, animated }) => {
+  const theme = useTheme();
+  switch (variant) {
+    case "circular":
+      return /* @__PURE__ */ jsx2(Box2, { sx: { position: "relative", display: "inline-flex" }, children: /* @__PURE__ */ jsx2(
+        Box2,
+        {
+          sx: {
+            width: 80,
+            height: 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 4px 12px ${alpha(theme.palette.success.main, strength / 200)}`
+          },
+          children: /* @__PURE__ */ jsx2(
+            Box2,
+            {
+              sx: {
+                width: 64,
+                height: 64,
+                borderRadius: "50%",
+                background: theme.palette.background.paper,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexDirection: "column"
+              },
+              children: /* @__PURE__ */ jsxs2(Typography2, { variant: "h6", fontWeight: "bold", children: [
+                strength,
+                "%"
+              ] })
+            }
+          )
+        }
+      ) });
+    case "steps": {
+      const steps = 5;
+      const activeStep = Math.ceil(strength / 100 * steps);
+      return /* @__PURE__ */ jsx2(StepsContainer, { children: Array.from({ length: steps }, (_, i) => /* @__PURE__ */ jsx2(Step, { active: i === activeStep - 1, completed: i < activeStep - 1, animated }, i)) });
+    }
+    default:
+      return /* @__PURE__ */ jsx2(StrengthBar, { variant: "determinate", value: strength, strength, animated });
+  }
+};
+var StrengthHeading = ({ strength, hasValue, animated }) => /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+  /* @__PURE__ */ jsx2(Typography2, { variant: "body2", color: "text.secondary", children: "Password Strength" }),
+  hasValue && /* @__PURE__ */ jsx2(Fade, { in: true, children: /* @__PURE__ */ jsx2(
+    StrengthLabel,
+    {
+      label: getStrengthLabel(strength),
+      icon: getStrengthIcon(strength),
+      size: "small",
+      strength,
+      animated
+    }
+  ) })
+] });
+var RequirementsList = ({ requirements, checks, animated }) => {
+  const rows = [
+    [requirements.minLength, "length", `At least ${requirements.minLength} characters`],
+    [requirements.uppercase, "uppercase", "One uppercase letter"],
+    [requirements.lowercase, "lowercase", "One lowercase letter"],
+    [requirements.numbers, "numbers", "One number"],
+    [requirements.special, "special", "One special character"]
+  ];
+  return /* @__PURE__ */ jsxs2(Stack, { spacing: 1, children: [
+    /* @__PURE__ */ jsx2(Typography2, { variant: "caption", color: "text.secondary", fontWeight: "medium", children: "Requirements:" }),
+    rows.filter(([enabled]) => Boolean(enabled)).map(([, key, label]) => /* @__PURE__ */ jsxs2(RequirementItem, { met: checks[key], animated, children: [
+      /* @__PURE__ */ jsx2(RequirementIcon, { met: checks[key] }),
+      /* @__PURE__ */ jsx2(Typography2, { variant: "caption", children: label })
+    ] }, key))
+  ] });
+};
+var PasswordStrengthBody = ({
+  value,
+  strength,
+  requirements,
+  requirementChecks,
+  suggestions,
+  showStrengthLabel,
+  showRequirements,
+  showSuggestions,
+  variant,
+  animated
+}) => /* @__PURE__ */ jsxs2(Stack, { spacing: 2, children: [
+  showStrengthLabel && /* @__PURE__ */ jsx2(StrengthHeading, { strength, hasValue: value.length > 0, animated }),
+  /* @__PURE__ */ jsx2(StrengthIndicator, { variant, strength, animated }),
+  showRequirements && /* @__PURE__ */ jsx2(Fade, { in: value.length > 0, children: /* @__PURE__ */ jsx2(
+    RequirementsList,
+    {
+      requirements,
+      checks: requirementChecks,
+      animated
+    }
+  ) }),
+  showSuggestions && suggestions.length > 0 && value.length > 0 && /* @__PURE__ */ jsx2(Fade, { in: true, children: /* @__PURE__ */ jsx2(SuggestionsList, { suggestions }) })
+] });
+var PasswordStrength = ({
+  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), [requirementChecks]);
+  return /* @__PURE__ */ jsx2(StrengthContainer, { animated, "data-testid": dataTestId, children: /* @__PURE__ */ jsx2(
+    PasswordStrengthBody,
+    {
+      value,
+      strength,
+      requirements,
+      requirementChecks,
+      suggestions,
+      showStrengthLabel,
+      showRequirements,
+      showSuggestions,
+      variant,
+      animated
+    }
+  ) });
+};
+export {
+  PasswordStrength
+};
+//# sourceMappingURL=PasswordStrength.js.map

package/dist/form/PasswordStrength.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/form/PasswordStrength/PasswordStrength.tsx","../../src/components/form/PasswordStrength/PasswordStrength.helpers.tsx"],"sourcesContent":["import CheckIcon from '@mui/icons-material/Check';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport {\n  alpha,\n  Box,\n  Chip,\n  Fade,\n  keyframes,\n  LinearProgress,\n  Stack,\n  styled,\n  Typography,\n  useTheme } from '@mui/material';\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';\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 = keyframes`\n  from {\n    transform: translateX(-10px);\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(10px)',\n  WebkitBackdropFilter: 'blur(10px)',\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: 8,\n    borderRadius: 4,\n    backgroundColor: alpha(theme.palette.action.disabled, 0.1),\n    '& .MuiLinearProgress-bar': {\n      borderRadius: 4,\n      background: getGradient(),\n      transition: animated ? 'all 0.3s ease' : 'none',\n      boxShadow: `0 2px 8px ${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} 0.3s ease` : 'none',\n  '& svg': {\n    fontSize: '1rem',\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: 6,\n    borderRadius: 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 2px 8px ${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: 80,\n              height: 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 4px 12px ${alpha(theme.palette.success.main, strength / 200)}` }}\n          >\n            <Box\n              sx={{\n                width: 64,\n                height: 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  strength: number;\n  hasValue: boolean;\n  animated: boolean;\n}> = ({ strength, hasValue, animated }) => (\n  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n    <Typography variant=\"body2\" color=\"text.secondary\">\n      Password Strength\n    </Typography>\n    {hasValue && (\n      <Fade in={true}>\n        <StrengthLabel\n          label={getStrengthLabel(strength)}\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.\nconst RequirementsList: React.FC<{\n  requirements: PasswordRequirements;\n  checks: RequirementChecks;\n  animated: boolean;\n}> = ({ requirements, checks, animated }) => {\n  const rows: ReadonlyArray<[unknown, keyof RequirementChecks, React.ReactNode]> = [\n    [requirements.minLength, 'length', `At least ${requirements.minLength} characters`],\n    [requirements.uppercase, 'uppercase', 'One uppercase letter'],\n    [requirements.lowercase, 'lowercase', 'One lowercase letter'],\n    [requirements.numbers, 'numbers', 'One number'],\n    [requirements.special, 'special', 'One special character'],\n  ];\n\n  return (\n    <Stack spacing={1}>\n      <Typography variant=\"caption\" color=\"text.secondary\" fontWeight=\"medium\">\n        Requirements:\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};\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  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  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 strength={strength} hasValue={value.length > 0} animated={animated} />\n      )}\n\n      <StrengthIndicator variant={variant} strength={strength} animated={animated} />\n\n      {showRequirements && (\n        <Fade in={value.length > 0}>\n          <RequirementsList\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} />\n        </Fade>\n      )}\n    </Stack>\n);\n\n// Main component\nexport const PasswordStrength: FC<PasswordStrengthProps> = ({\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(() => buildSuggestions(requirementChecks), [requirementChecks]);\n\n  return (\n    <StrengthContainer animated={animated} data-testid={dataTestId}>\n      <PasswordStrengthBody\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","import SecurityIcon from '@mui/icons-material/Security';\nimport SuccessIcon from '@mui/icons-material/CheckCircle';\nimport WarningIcon from '@mui/icons-material/Warning';\nimport { Box, Typography } from '@mui/material';\nimport React from 'react';\n\nimport type { PasswordRequirements } from './PasswordStrength.types';\n\nexport const defaultRequirements: PasswordRequirements = {\n  minLength: 8,\n  uppercase: true,\n  lowercase: true,\n  numbers: true,\n  special: true,\n};\n\n\nconst SPECIAL_CHARACTERS = /[!@#$%^&*(),.?\":{}|<>]/;\nconst DEFAULT_MIN_LENGTH = 8;\n\n// Points awarded per satisfied requirement.\nconst REQUIREMENT_POINTS = {\n  length: 20,\n  uppercase: 10,\n  lowercase: 10,\n  numbers: 15,\n  special: 15,\n} as const;\n\nexport type RequirementChecks = Record<keyof typeof REQUIREMENT_POINTS, boolean>;\n\n// A requirement that is switched off counts as satisfied. This was previously\n// written out twice — once to score the password and once to render the\n// checklist — so the two could drift.\nexport const evaluateRequirements = (\n  password: string,\n  requirements: PasswordRequirements,\n): RequirementChecks => {\n  if (!password) {\n    return { length: false, uppercase: false, lowercase: false, numbers: false, special: false };\n  }\n\n  return {\n    length: password.length >= (requirements.minLength || DEFAULT_MIN_LENGTH),\n    uppercase: !requirements.uppercase || /[A-Z]/.test(password),\n    lowercase: !requirements.lowercase || /[a-z]/.test(password),\n    numbers: !requirements.numbers || /\\d/.test(password),\n    special: !requirements.special || SPECIAL_CHARACTERS.test(password),\n  };\n};\n\nconst lengthBonus = (length: number): number => {\n  const base = Math.min(length * 3, 30);\n  const over12 = length > 12 ? 10 : 0;\n  const over16 = length > 16 ? 10 : 0;\n\n  return base + over12 + over16;\n};\n\nexport const calculatePasswordStrength = (\n  password: string,\n  requirements: PasswordRequirements,\n): number => {\n  if (!password) return 0;\n\n  const checks = evaluateRequirements(password, requirements);\n  const earned = Object.entries(REQUIREMENT_POINTS).reduce(\n    (total, [key, points]) => total + (checks[key as keyof RequirementChecks] ? points : 0),\n    0,\n  );\n\n  return Math.min(earned + lengthBonus(password.length), 100);\n};\n\nconst STRENGTH_LABELS: ReadonlyArray<[number, string]> = [\n  [20, 'Very Weak'],\n  [40, 'Weak'],\n  [60, 'Fair'],\n  [80, 'Good'],\n];\n\nexport const getStrengthLabel = (strength: number): string =>\n  STRENGTH_LABELS.find(([ceiling]) => strength <= ceiling)?.[1] ?? 'Strong';\n\nexport const getStrengthIcon = (strength: number) => {\n  if (strength <= 40) return <WarningIcon />;\n  if (strength <= 80) return <SecurityIcon />;\n  return <SuccessIcon />;\n};\n\nconst SUGGESTIONS: ReadonlyArray<[keyof RequirementChecks, string]> = [\n  ['length', 'Use at least 8 characters'],\n  ['uppercase', 'Add uppercase letters'],\n  ['lowercase', 'Add lowercase letters'],\n  ['numbers', 'Include numbers'],\n  ['special', 'Add special characters'],\n];\n\nexport const buildSuggestions = (checks: RequirementChecks): string[] =>\n  SUGGESTIONS.filter(([key]) => !checks[key]).map(([, tip]) => tip);\n\n// Rendered by PasswordStrength; depends on nothing styled, so it lives beside\n// the pure helpers rather than in the component file.\nexport const SuggestionsList: React.FC<{ suggestions: string[] }> = ({ suggestions }) => (\n  <Box>\n    <Typography variant=\"caption\" color=\"text.secondary\" fontWeight=\"medium\">\n      Suggestions:\n    </Typography>\n    <Box sx={{ mt: 1 }}>\n      {suggestions.map((tip) => (\n        <Typography key={tip} variant=\"caption\" display=\"block\" color=\"warning.main\" sx={{ ml: 2 }}>\n          • {tip}\n        </Typography>\n      ))}\n    </Box>\n  </Box>\n);\n"],"mappings":"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","names":["Box","Typography","jsx","jsxs","Box","Typography"]}