@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-BF63NETF.js

@@ -0,0 +1,298 @@
+import {
+  SuggestionsList,
+  buildSuggestions,
+  calculatePasswordStrength,
+  defaultRequirements,
+  evaluateRequirements,
+  getStrengthIcon,
+  getStrengthLabel
+} from "./chunk-PWF4PYZL.js";
+
+// src/components/form/PasswordStrength/PasswordStrength.tsx
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import {
+  alpha,
+  Box,
+  Chip,
+  Fade,
+  keyframes,
+  LinearProgress,
+  Stack,
+  styled,
+  Typography,
+  useTheme
+} from "@mui/material";
+import { 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 = keyframes`
+  from {
+    transform: translateX(-10px);
+    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(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(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} 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(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: 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__ */ jsx(Box, { sx: { position: "relative", display: "inline-flex" }, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          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__ */ jsx(
+            Box,
+            {
+              sx: {
+                width: 64,
+                height: 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 = ({ copy, requirements, checks, animated }) => {
+  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, { 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))
+  ] });
+};
+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-BF63NETF.js.map

package/dist/chunk-BF63NETF.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 {\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';\nimport type { PasswordStrengthCopy } from '../../../copy';\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  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.\nconst RequirementsList: React.FC<{\n  copy: PasswordStrengthCopy;\n  requirements: PasswordRequirements;\n  checks: RequirementChecks;\n  animated: boolean;\n}> = ({ copy, requirements, checks, animated }) => {\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 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};\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-BGYLL467.js

@@ -0,0 +1,108 @@
+import {
+  detectCountryFromNumber,
+  formatPhoneNumber,
+  validatePhoneNumber
+} from "./chunk-5P6OV64V.js";
+import {
+  countries
+} from "./chunk-3JDP5OUR.js";
+
+// src/components/form/PhoneInput/PhoneInput.hooks.ts
+import { useEffect, useRef, useState } from "react";
+var usePhoneInput = ({
+  defaultValue,
+  initialCountryCode,
+  onChange
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  const [selectedCountry, setSelectedCountry] = useState(
+    countries.find((c) => c.code === initialCountryCode) || countries[0]
+  );
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [isValid, setIsValid] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const onChangeRef = useRef(onChange);
+  const isInitialMountRef = useRef(true);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    if (!selectedCountry) return;
+    const valid = validatePhoneNumber(value, selectedCountry.code);
+    setIsValid(valid);
+    if (isInitialMountRef.current) {
+      isInitialMountRef.current = false;
+      return;
+    }
+    if (onChangeRef.current) {
+      onChangeRef.current(value, valid, selectedCountry.code);
+    }
+  }, [value, selectedCountry]);
+  const handlers = usePhoneHandlers({
+    value,
+    setValue,
+    selectedCountry,
+    setSelectedCountry,
+    setAnchorEl,
+    setIsFocused
+  });
+  return {
+    value,
+    selectedCountry,
+    anchorEl,
+    isValid,
+    isFocused,
+    setIsFocused,
+    setAnchorEl,
+    ...handlers
+  };
+};
+var usePhoneHandlers = ({
+  value,
+  setValue,
+  selectedCountry,
+  setSelectedCountry,
+  setAnchorEl,
+  setIsFocused
+}) => {
+  const handleCountryClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleCountryClose = () => {
+    setAnchorEl(null);
+  };
+  const handleCountrySelect = (country) => {
+    setSelectedCountry(country);
+    handleCountryClose();
+    if (value) {
+      const formatted = formatPhoneNumber(value, country.code);
+      setValue(formatted);
+    }
+  };
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    if (newValue.startsWith("+")) {
+      const detectedCountry = detectCountryFromNumber(newValue);
+      if (detectedCountry) {
+        const detectedCountryData = countries.find((c) => c.code === detectedCountry);
+        if (detectedCountryData && detectedCountryData.code !== selectedCountry?.code) {
+          setSelectedCountry(detectedCountryData);
+        }
+      }
+    }
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (value && selectedCountry) {
+      const formatted = formatPhoneNumber(value, selectedCountry.code);
+      setValue(formatted);
+    }
+  };
+  return { handleCountryClick, handleCountryClose, handleCountrySelect, handleChange, handleBlur };
+};
+
+export {
+  usePhoneInput
+};
+//# sourceMappingURL=chunk-BGYLL467.js.map

package/dist/chunk-BGYLL467.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/PhoneInput/PhoneInput.hooks.ts"],"sourcesContent":["import type { CountryCode } from 'libphonenumber-js';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { countries } from './countries';\nimport { detectCountryFromNumber, formatPhoneNumber, validatePhoneNumber } from './phone';\nimport type { CountryData } from './PhoneInput.types';\n\n// Value, selected country, menu anchor and validity, plus the handlers that move\n// between them. Kept out of the component so its body is markup.\nexport const usePhoneInput = ({\n  defaultValue,\n  initialCountryCode,\n  onChange,\n}: {\n  defaultValue: string;\n  initialCountryCode: CountryCode;\n  onChange?: (value: string, isValid: boolean, country: CountryCode) => void;\n}) => {\nconst [value, setValue] = useState(defaultValue);\nconst [selectedCountry, setSelectedCountry] = useState(\n  countries.find((c) => c.code === initialCountryCode) || countries[0],\n);\nconst [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\nconst [isValid, setIsValid] = useState(false);\nconst [isFocused, setIsFocused] = useState(false);\nconst onChangeRef = useRef(onChange);\nconst isInitialMountRef = useRef(true);\n\n// Update ref when onChange changes\nuseEffect(() => {\n  onChangeRef.current = onChange;\n}, [onChange]);\n\nuseEffect(() => {\n  if (!selectedCountry) return;\n\n  const valid = validatePhoneNumber(value, selectedCountry.code);\n  setIsValid(valid);\n\n  // Skip onChange call on initial mount\n  if (isInitialMountRef.current) {\n    isInitialMountRef.current = false;\n    return;\n  }\n\n  // Call onChange for all value/country changes after initial mount\n  if (onChangeRef.current) {\n    onChangeRef.current(value, valid, selectedCountry.code);\n  }\n}, [value, selectedCountry]);\n\n  const handlers = usePhoneHandlers({\n    value,\n    setValue,\n    selectedCountry,\n    setSelectedCountry,\n    setAnchorEl,\n    setIsFocused,\n  });\n\n  return {\n    value,\n    selectedCountry,\n    anchorEl,\n    isValid,\n    isFocused,\n    setIsFocused,\n    setAnchorEl,\n    ...handlers,\n  };\n};\n\n// Opening and closing the country menu, picking a country, typing, and\n// reformatting on blur.\nconst usePhoneHandlers = ({\n  value,\n  setValue,\n  selectedCountry,\n  setSelectedCountry,\n  setAnchorEl,\n  setIsFocused,\n}: {\n  value: string;\n  setValue: React.Dispatch<React.SetStateAction<string>>;\n  selectedCountry?: CountryData;\n  setSelectedCountry: React.Dispatch<React.SetStateAction<CountryData | undefined>>;\n  setAnchorEl: React.Dispatch<React.SetStateAction<null | HTMLElement>>;\n  setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;\n}) => {\n  const handleCountryClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleCountryClose = () => {\n    setAnchorEl(null);\n  };\n\n  const handleCountrySelect = (country: CountryData) => {\n    setSelectedCountry(country);\n    handleCountryClose();\n\n    // Reformat number with new country code\n    if (value) {\n      const formatted = formatPhoneNumber(value, country.code);\n      setValue(formatted);\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value;\n    setValue(newValue);\n\n    // Auto-detect country if user types international format\n    if (newValue.startsWith('+')) {\n      const detectedCountry = detectCountryFromNumber(newValue);\n      if (detectedCountry) {\n        const detectedCountryData = countries.find((c) => c.code === detectedCountry);\n        if (detectedCountryData && detectedCountryData.code !== selectedCountry?.code) {\n          setSelectedCountry(detectedCountryData);\n        }\n      }\n    }\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n    if (value && selectedCountry) {\n      const formatted = formatPhoneNumber(value, selectedCountry.code);\n      setValue(formatted);\n    }\n  };\n\n  return { handleCountryClick, handleCountryClose, handleCountrySelect, handleChange, handleBlur };\n};\n"],"mappings":";;;;;;;;;;AACA,SAAgB,WAAW,QAAQ,gBAAgB;AAQ5C,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACN,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C,UAAU,KAAK,CAAC,MAAM,EAAE,SAAS,kBAAkB,KAAK,UAAU,CAAC;AAAA,EACrE;AACA,QAAM,CAAC,UAAU,WAAW,IAAI,SAA6B,IAAI;AACjE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,cAAc,OAAO,QAAQ;AACnC,QAAM,oBAAoB,OAAO,IAAI;AAGrC,YAAU,MAAM;AACd,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACd,QAAI,CAAC,gBAAiB;AAEtB,UAAM,QAAQ,oBAAoB,OAAO,gBAAgB,IAAI;AAC7D,eAAW,KAAK;AAGhB,QAAI,kBAAkB,SAAS;AAC7B,wBAAkB,UAAU;AAC5B;AAAA,IACF;AAGA,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,OAAO,OAAO,gBAAgB,IAAI;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,OAAO,eAAe,CAAC;AAEzB,QAAM,WAAW,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;AAIA,IAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAOM;AACJ,QAAM,qBAAqB,CAAC,UAAyC;AACnE,gBAAY,MAAM,aAAa;AAAA,EACjC;AAEA,QAAM,qBAAqB,MAAM;AAC/B,gBAAY,IAAI;AAAA,EAClB;AAEA,QAAM,sBAAsB,CAAC,YAAyB;AACpD,uBAAmB,OAAO;AAC1B,uBAAmB;AAGnB,QAAI,OAAO;AACT,YAAM,YAAY,kBAAkB,OAAO,QAAQ,IAAI;AACvD,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,UAA+C;AACnE,UAAM,WAAW,MAAM,OAAO;AAC9B,aAAS,QAAQ;AAGjB,QAAI,SAAS,WAAW,GAAG,GAAG;AAC5B,YAAM,kBAAkB,wBAAwB,QAAQ;AACxD,UAAI,iBAAiB;AACnB,cAAM,sBAAsB,UAAU,KAAK,CAAC,MAAM,EAAE,SAAS,eAAe;AAC5E,YAAI,uBAAuB,oBAAoB,SAAS,iBAAiB,MAAM;AAC7E,6BAAmB,mBAAmB;AAAA,QACxC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,aAAa,MAAM;AACvB,iBAAa,KAAK;AAClB,QAAI,SAAS,iBAAiB;AAC5B,YAAM,YAAY,kBAAkB,OAAO,gBAAgB,IAAI;AAC/D,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AAEA,SAAO,EAAE,oBAAoB,oBAAoB,qBAAqB,cAAc,WAAW;AACjG;","names":[]}

package/dist/chunk-BH5GSBR3.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-BH5GSBR3.js.map

package/dist/chunk-BH5GSBR3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-BN6POCYF.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-BN6POCYF.js.map

package/dist/chunk-BN6POCYF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-BNBBPGA4.js

@@ -0,0 +1,65 @@
+import {
+  dayCount,
+  isAfterDay
+} from "./chunk-FRAVVI4A.js";
+import {
+  isoToMasked
+} from "./chunk-VKXGYBXD.js";
+
+// src/components/form/DateRangePicker/DateRangePicker.range.ts
+function resolveDayRange(draft, maxRangeDays) {
+  const { from, to } = draft;
+  if (!from || !to) return { ok: false, problem: "incomplete", days: 0 };
+  if (isAfterDay(from, to)) return { ok: false, problem: "reversed", days: 0 };
+  const days = dayCount(from, to);
+  if (maxRangeDays !== void 0 && days > maxRangeDays) {
+    return { ok: false, problem: "over-max", days };
+  }
+  return { ok: true, window: { from, to }, days };
+}
+function defaultMessages() {
+  const dayMask = "dd/mm/yyyy";
+  return {
+    from: "Start date",
+    to: "End date",
+    quickRanges: "Quick ranges",
+    incomplete: "Choose both dates.",
+    reversed: "The end date must be on or after the start date.",
+    overMax: ({ maxRangeDays }) => `Choose a range of at most ${maxRangeDays} days.`,
+    summary: ({ from, to }) => `${isoToMasked(from, dayMask)} \u2013 ${isoToMasked(to, dayMask)}`,
+    calendarLabel: "Calendar",
+    dayMask
+  };
+}
+function statusMessage(status, messages, maxRangeDays) {
+  if (status.ok) return messages.summary(status.window);
+  if (status.problem === "incomplete") return messages.incomplete;
+  if (status.problem === "reversed") return messages.reversed;
+  return messages.overMax({ maxRangeDays: maxRangeDays ?? status.days, days: status.days });
+}
+function resolveQuickRanges(quickRanges, context, maxRangeDays) {
+  return quickRanges.map((quickRange) => {
+    const window = quickRange.resolve(context);
+    const days = dayCount(window.from, window.to);
+    return {
+      ...quickRange,
+      window,
+      days,
+      overMax: maxRangeDays !== void 0 && days > maxRangeDays
+    };
+  });
+}
+function activeQuickRangeId(options, draft) {
+  return options.find(
+    (option) => option.window.from === draft.from && option.window.to === draft.to
+  )?.id;
+}
+
+export {
+  resolveDayRange,
+  defaultMessages,
+  statusMessage,
+  resolveQuickRanges,
+  activeQuickRangeId
+};
+//# sourceMappingURL=chunk-BNBBPGA4.js.map

package/dist/chunk-BNBBPGA4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/DateRangePicker/DateRangePicker.range.ts"],"sourcesContent":["/**\n * Judging a draft, and saying so in words.\n *\n * The picker never repairs what it is given. A reversed pair is not silently\n * swapped and an over-long one is not clipped to the cap: both are reported,\n * because a control that returns a different range from the one on screen is\n * indistinguishable from one that ignored you. The caller reads\n * {@link DateRangeStatus} and keeps its own confirm button shut.\n */\nimport { isoToMasked } from '../../data-display/DataViews/data-views-day-input';\n\nimport { dayCount, isAfterDay } from './DateRangePicker.dates';\nimport type {\n  DateRangePickerMessages,\n  DateRangeDraft,\n  DateRangeStatus,\n  QuickRange,\n  QuickRangeContext,\n  ResolvedQuickRange,\n} from './DateRangePicker.types';\n\n/**\n * Whether a draft is a window this picker will hand over.\n *\n * Exported because the caller needs the same verdict the picker shows: a dialog\n * disabling its \"Apply\" button must not re-derive \"is this legal\" from the two\n * strings, or the two answers drift and the button ends up enabled over a\n * message saying the range is impossible.\n */\nexport function resolveDayRange(\n  draft: DateRangeDraft,\n  maxRangeDays?: number,\n): DateRangeStatus {\n  const { from, to } = draft;\n  if (!from || !to) return { ok: false, problem: 'incomplete', days: 0 };\n  if (isAfterDay(from, to)) return { ok: false, problem: 'reversed', days: 0 };\n\n  const days = dayCount(from, to);\n  if (maxRangeDays !== undefined && days > maxRangeDays) {\n    return { ok: false, problem: 'over-max', days };\n  }\n  return { ok: true, window: { from, to }, days };\n}\n\n/**\n * The English defaults.\n *\n * The summary prints the days in the SAME `dd/mm/aaaa` the two fields are\n * masked to, rather than in the host locale's order. One control cannot show\n * the same date two ways: an `en-US` host formatting the summary as `08/05`\n * over a field reading `05/08` leaves the reader to work out which of the two\n * is lying. A host that wants its own order replaces `messages.summary`, which\n * moves both halves of the decision to the same place.\n */\nexport function defaultMessages(): DateRangePickerMessages {\n  // ONE mask, read by both the fields and the summary below. They are the same\n  // date in the same control, so a summary formatted in a different order from\n  // the boxes it summarises is a control arguing with itself — which is what\n  // two independent literals eventually become.\n  const dayMask = 'dd/mm/yyyy';\n  return {\n    from: 'Start date',\n    to: 'End date',\n    quickRanges: 'Quick ranges',\n    incomplete: 'Choose both dates.',\n    reversed: 'The end date must be on or after the start date.',\n    overMax: ({ maxRangeDays }) => `Choose a range of at most ${maxRangeDays} days.`,\n    summary: ({ from, to }) => `${isoToMasked(from, dayMask)} – ${isoToMasked(to, dayMask)}`,\n    calendarLabel: 'Calendar',\n    dayMask,\n  };\n}\n\n/** The line under the fields: the chosen window, or why there isn't one. */\nexport function statusMessage(\n  status: DateRangeStatus,\n  messages: DateRangePickerMessages,\n  maxRangeDays: number | undefined,\n): string {\n  if (status.ok) return messages.summary(status.window);\n  if (status.problem === 'incomplete') return messages.incomplete;\n  if (status.problem === 'reversed') return messages.reversed;\n  return messages.overMax({ maxRangeDays: maxRangeDays ?? status.days, days: status.days });\n}\n\n/** Every quick range with its window, its length, and whether it is over cap. */\nexport function resolveQuickRanges(\n  quickRanges: QuickRange[],\n  context: QuickRangeContext,\n  maxRangeDays: number | undefined,\n): ResolvedQuickRange[] {\n  return quickRanges.map((quickRange) => {\n    const window = quickRange.resolve(context);\n    const days = dayCount(window.from, window.to);\n    return {\n      ...quickRange,\n      window,\n      days,\n      overMax: maxRangeDays !== undefined && days > maxRangeDays,\n    };\n  });\n}\n\n/** The quick range the draft currently IS, if it is exactly one of them. */\nexport function activeQuickRangeId(\n  options: ResolvedQuickRange[],\n  draft: DateRangeDraft,\n): string | undefined {\n  return options.find(\n    (option) => option.window.from === draft.from && option.window.to === draft.to,\n  )?.id;\n}\n"],"mappings":";;;;;;;;;AA6BO,SAAS,gBACd,OACA,cACiB;AACjB,QAAM,EAAE,MAAM,GAAG,IAAI;AACrB,MAAI,CAAC,QAAQ,CAAC,GAAI,QAAO,EAAE,IAAI,OAAO,SAAS,cAAc,MAAM,EAAE;AACrE,MAAI,WAAW,MAAM,EAAE,EAAG,QAAO,EAAE,IAAI,OAAO,SAAS,YAAY,MAAM,EAAE;AAE3E,QAAM,OAAO,SAAS,MAAM,EAAE;AAC9B,MAAI,iBAAiB,UAAa,OAAO,cAAc;AACrD,WAAO,EAAE,IAAI,OAAO,SAAS,YAAY,KAAK;AAAA,EAChD;AACA,SAAO,EAAE,IAAI,MAAM,QAAQ,EAAE,MAAM,GAAG,GAAG,KAAK;AAChD;AAYO,SAAS,kBAA2C;AAKzD,QAAM,UAAU;AAChB,SAAO;AAAA,IACL,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS,CAAC,EAAE,aAAa,MAAM,6BAA6B,YAAY;AAAA,IACxE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,MAAM,OAAO,CAAC,WAAM,YAAY,IAAI,OAAO,CAAC;AAAA,IACtF,eAAe;AAAA,IACf;AAAA,EACF;AACF;AAGO,SAAS,cACd,QACA,UACA,cACQ;AACR,MAAI,OAAO,GAAI,QAAO,SAAS,QAAQ,OAAO,MAAM;AACpD,MAAI,OAAO,YAAY,aAAc,QAAO,SAAS;AACrD,MAAI,OAAO,YAAY,WAAY,QAAO,SAAS;AACnD,SAAO,SAAS,QAAQ,EAAE,cAAc,gBAAgB,OAAO,MAAM,MAAM,OAAO,KAAK,CAAC;AAC1F;AAGO,SAAS,mBACd,aACA,SACA,cACsB;AACtB,SAAO,YAAY,IAAI,CAAC,eAAe;AACrC,UAAM,SAAS,WAAW,QAAQ,OAAO;AACzC,UAAM,OAAO,SAAS,OAAO,MAAM,OAAO,EAAE;AAC5C,WAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,SAAS,iBAAiB,UAAa,OAAO;AAAA,IAChD;AAAA,EACF,CAAC;AACH;AAGO,SAAS,mBACd,SACA,OACoB;AACpB,SAAO,QAAQ;AAAA,IACb,CAAC,WAAW,OAAO,OAAO,SAAS,MAAM,QAAQ,OAAO,OAAO,OAAO,MAAM;AAAA,EAC9E,GAAG;AACL;","names":[]}

package/dist/chunk-BO6S47KI.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-BO6S47KI.js.map

package/dist/chunk-BO6S47KI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-BPSGDJ7F.js

@@ -0,0 +1,78 @@
+import {
+  thumbnailStripSx
+} from "./chunk-56SJYTIT.js";
+
+// src/components/data-display/Lightbox/LightboxThumbnails.tsx
+import PlayIcon from "@mui/icons-material/PlayArrow";
+import { Box } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var THUMB_WIDTH = 60;
+var THUMB_HEIGHT = 40;
+var VideoThumbnail = () => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      width: "100%",
+      height: "100%",
+      background: "rgba(255, 255, 255, 0.1)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /* @__PURE__ */ jsx(PlayIcon, { sx: { color: "white", fontSize: 16 } })
+  }
+);
+var LightboxThumbnails = ({
+  items,
+  currentIndex,
+  testId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      ...thumbnailStripSx,
+      position: "absolute",
+      bottom: 16,
+      left: "50%",
+      transform: "translateX(-50%)",
+      display: "flex",
+      gap: 1,
+      maxWidth: "90vw",
+      overflowX: "auto",
+      padding: 1
+    },
+    "data-testid": testId("thumbnails"),
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        onClick: () => onSelect(index),
+        sx: {
+          width: THUMB_WIDTH,
+          height: THUMB_HEIGHT,
+          cursor: "pointer",
+          border: currentIndex === index ? "2px solid white" : "2px solid transparent",
+          borderRadius: 0.5,
+          overflow: "hidden",
+          flexShrink: 0,
+          "&:hover": { border: "2px solid rgba(255, 255, 255, 0.7)" }
+        },
+        "data-testid": testId(`thumbnail-${index}`),
+        children: item.type === "video" ? /* @__PURE__ */ jsx(VideoThumbnail, {}) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.src,
+            alt: item.alt || `Thumbnail ${index + 1}`,
+            style: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        )
+      },
+      `${item.src}-${index}`
+    ))
+  }
+);
+
+export {
+  LightboxThumbnails
+};
+//# sourceMappingURL=chunk-BPSGDJ7F.js.map

package/dist/chunk-BPSGDJ7F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/LightboxThumbnails.tsx"],"sourcesContent":["import PlayIcon from '@mui/icons-material/PlayArrow';\nimport { Box } from '@mui/material';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { thumbnailStripSx } from './Lightbox.constants';\nimport type { LightboxItem } from './Lightbox.types';\n\nconst THUMB_WIDTH = 60;\nconst THUMB_HEIGHT = 40;\n\nconst VideoThumbnail: FC = () => (\n  <Box\n    sx={{\n      width: '100%',\n      height: '100%',\n      background: 'rgba(255, 255, 255, 0.1)',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n    }}\n  >\n    <PlayIcon sx={{ color: 'white', fontSize: 16 }} />\n  </Box>\n);\n\nexport interface LightboxThumbnailsProps {\n  items: LightboxItem[];\n  currentIndex: number;\n  testId: (suffix: string) => string;\n  onSelect: (index: number) => void;\n}\n\nexport const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({\n  items,\n  currentIndex,\n  testId,\n  onSelect,\n}) => (\n  <Box\n    sx={{\n      ...thumbnailStripSx,\n      position: 'absolute',\n      bottom: 16,\n      left: '50%',\n      transform: 'translateX(-50%)',\n      display: 'flex',\n      gap: 1,\n      maxWidth: '90vw',\n      overflowX: 'auto',\n      padding: 1,\n    }}\n    data-testid={testId('thumbnails')}\n  >\n    {items.map((item, index) => (\n      <Box\n        key={`${item.src}-${index}`}\n        onClick={() => onSelect(index)}\n        sx={{\n          width: THUMB_WIDTH,\n          height: THUMB_HEIGHT,\n          cursor: 'pointer',\n          border: currentIndex === index ? '2px solid white' : '2px solid transparent',\n          borderRadius: 0.5,\n          overflow: 'hidden',\n          flexShrink: 0,\n          '&:hover': { border: '2px solid rgba(255, 255, 255, 0.7)' },\n        }}\n        data-testid={testId(`thumbnail-${index}`)}\n      >\n        {item.type === 'video' ? (\n          <VideoThumbnail />\n        ) : (\n          <img\n            src={item.src}\n            alt={item.alt || `Thumbnail ${index + 1}`}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n          />\n        )}\n      </Box>\n    ))}\n  </Box>\n);\n"],"mappings":";;;;;AAAA,OAAO,cAAc;AACrB,SAAS,WAAW;AAqBhB;AAdJ,IAAM,cAAc;AACpB,IAAM,eAAe;AAErB,IAAM,iBAAqB,MACzB;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,IAEA,8BAAC,YAAS,IAAI,EAAE,OAAO,SAAS,UAAU,GAAG,GAAG;AAAA;AAClD;AAUK,IAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,GAAG;AAAA,MACH,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,MACX,SAAS;AAAA,MACT,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,eAAa,OAAO,YAAY;AAAA,IAE/B,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,MAAC;AAAA;AAAA,QAEC,SAAS,MAAM,SAAS,KAAK;AAAA,QAC7B,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ,iBAAiB,QAAQ,oBAAoB;AAAA,UACrD,cAAc;AAAA,UACd,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,WAAW,EAAE,QAAQ,qCAAqC;AAAA,QAC5D;AAAA,QACA,eAAa,OAAO,aAAa,KAAK,EAAE;AAAA,QAEvC,eAAK,SAAS,UACb,oBAAC,kBAAe,IAEhB;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,KAAK;AAAA,YACV,KAAK,KAAK,OAAO,aAAa,QAAQ,CAAC;AAAA,YACvC,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,QAAQ;AAAA;AAAA,QAC7D;AAAA;AAAA,MArBG,GAAG,KAAK,GAAG,IAAI,KAAK;AAAA,IAuB3B,CACD;AAAA;AACH;","names":[]}