@12-apps/ui 6.41.1 → 6.42.0

package/dist/{chunk-ASCUWG55.js → chunk-IOCY5G43.js}

@@ -1,3 +1,7 @@
+import {
+  useLightboxCopy
+} from "./chunk-TEQYTEM2.js";
+
 // src/components/data-display/Lightbox/LightboxMedia.tsx
 import { jsx } from "react/jsx-runtime";
 var cursorFor = (zoomLevel, zoomable) => {
@@ -18,6 +22,7 @@ var LightboxMedia = ({
   onWheel,
   onDoubleClick
 }) => {
+  const copy = useLightboxCopy();
   if (item.type === "video") {
     return /* @__PURE__ */ jsx(
       "video",
@@ -27,7 +32,7 @@ var LightboxMedia = ({
         style: { maxWidth: "90vw", maxHeight: "80vh", objectFit: "contain" },
         onLoadStart,
         onLoadedData: onLoaded,
-        "aria-label": item.alt || `Video ${index + 1} of ${total}`,
+        "aria-label": item.alt || copy.videoFallback(index + 1, total),
         "data-testid": testId("video")
       }
     );
@@ -36,7 +41,7 @@ var LightboxMedia = ({
     "img",
     {
       src: item.src,
-      alt: item.alt || `Image ${index + 1} of ${total}`,
+      alt: item.alt || copy.imageFallback(index + 1, total),
       style: {
         // At 1x the image is bounded by the viewport; once zoomed it is allowed
         // to overflow so there is something to pan around.
@@ -60,4 +65,4 @@ var LightboxMedia = ({
 export {
   LightboxMedia
 };
-//# sourceMappingURL=chunk-ASCUWG55.js.map
+//# sourceMappingURL=chunk-IOCY5G43.js.map

package/dist/chunk-IOCY5G43.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/LightboxMedia.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React from 'react';\n\nimport { useLightboxCopy } from './lightbox-copy-context';\nimport type { LightboxItem } from './Lightbox.types';\n\nexport interface LightboxMediaProps {\n  item: LightboxItem;\n  index: number;\n  total: number;\n  zoomLevel: number;\n  panOffset: { x: number; y: number };\n  zoomable: boolean;\n  isDragging: boolean;\n  testId: (suffix: string) => string;\n  onLoadStart: () => void;\n  onLoaded: () => void;\n  onWheel: (event: React.WheelEvent) => void;\n  onDoubleClick: () => void;\n}\n\nconst cursorFor = (zoomLevel: number, zoomable: boolean): string => {\n  if (zoomLevel > 1) return 'move';\n  return zoomable ? 'zoom-in' : 'default';\n};\n\nexport const LightboxMedia: FC<LightboxMediaProps> = ({\n  item,\n  index,\n  total,\n  zoomLevel,\n  panOffset,\n  zoomable,\n  isDragging,\n  testId,\n  onLoadStart,\n  onLoaded,\n  onWheel,\n  onDoubleClick,\n}) => {\n  const copy = useLightboxCopy();\n\n  if (item.type === 'video') {\n    return (\n      <video\n        src={item.src}\n        controls\n        style={{ maxWidth: '90vw', maxHeight: '80vh', objectFit: 'contain' }}\n        onLoadStart={onLoadStart}\n        onLoadedData={onLoaded}\n        aria-label={item.alt || copy.videoFallback(index + 1, total)}\n        data-testid={testId('video')}\n      />\n    );\n  }\n\n  return (\n    <img\n      src={item.src}\n      alt={item.alt || copy.imageFallback(index + 1, total)}\n      style={{\n        // At 1x the image is bounded by the viewport; once zoomed it is allowed\n        // to overflow so there is something to pan around.\n        maxWidth: zoomLevel === 1 ? '90vw' : 'none',\n        maxHeight: zoomLevel === 1 ? '80vh' : 'none',\n        transform: `scale(${zoomLevel}) translate(${panOffset.x}px, ${panOffset.y}px)`,\n        transformOrigin: 'center',\n        cursor: cursorFor(zoomLevel, zoomable),\n        transition: isDragging ? 'none' : 'transform 0.2s ease',\n        objectFit: 'contain',\n      }}\n      onLoad={onLoaded}\n      onWheel={onWheel}\n      onDoubleClick={onDoubleClick}\n      draggable={false}\n      data-testid={testId('image')}\n    />\n  );\n};\n"],"mappings":";;;;;AA4CM;AAvBN,IAAM,YAAY,CAAC,WAAmB,aAA8B;AAClE,MAAI,YAAY,EAAG,QAAO;AAC1B,SAAO,WAAW,YAAY;AAChC;AAEO,IAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,OAAO,gBAAgB;AAE7B,MAAI,KAAK,SAAS,SAAS;AACzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,UAAQ;AAAA,QACR,OAAO,EAAE,UAAU,QAAQ,WAAW,QAAQ,WAAW,UAAU;AAAA,QACnE;AAAA,QACA,cAAc;AAAA,QACd,cAAY,KAAK,OAAO,KAAK,cAAc,QAAQ,GAAG,KAAK;AAAA,QAC3D,eAAa,OAAO,OAAO;AAAA;AAAA,IAC7B;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,KAAK;AAAA,MACV,KAAK,KAAK,OAAO,KAAK,cAAc,QAAQ,GAAG,KAAK;AAAA,MACpD,OAAO;AAAA;AAAA;AAAA,QAGL,UAAU,cAAc,IAAI,SAAS;AAAA,QACrC,WAAW,cAAc,IAAI,SAAS;AAAA,QACtC,WAAW,SAAS,SAAS,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,QACzE,iBAAiB;AAAA,QACjB,QAAQ,UAAU,WAAW,QAAQ;AAAA,QACrC,YAAY,aAAa,SAAS;AAAA,QAClC,WAAW;AAAA,MACb;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,eAAa,OAAO,OAAO;AAAA;AAAA,EAC7B;AAEJ;","names":[]}

package/dist/{chunk-RZ2VZ7SL.js → chunk-JMEPGXJG.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-BXC6GRLE.js";
 import {
   SettingsPanel
-} from "./chunk-TCNTIGMY.js";
+} from "./chunk-TDXEO2UI.js";
 import {
   atLeastRail
 } from "./chunk-NYFNF7I5.js";
@@ -135,4 +135,4 @@ SettingsLayout.displayName = "SettingsLayout";
 export {
   SettingsLayout
 };
-//# sourceMappingURL=chunk-RZ2VZ7SL.js.map
+//# sourceMappingURL=chunk-JMEPGXJG.js.map

package/dist/{chunk-3MEIGSDK.js → chunk-LTTYUSJ2.js}

@@ -3,7 +3,10 @@ var PT_BR_TUTORIAL_COPY = {
   skip: "Pular",
   previous: "Anterior",
   next: "Pr\xF3ximo",
-  restart: "Recome\xE7ar"
+  restart: "Recome\xE7ar",
+  complete: "Concluir",
+  finish: "Finalizar",
+  requiresAction: "Conclua a a\xE7\xE3o obrigat\xF3ria primeiro"
 };
 var PT_BR_CHROME_COPY = {
   dismissToast: "Fechar o aviso",
@@ -85,4 +88,4 @@ export {
   PT_BR_CHROME_COPY,
   PT_BR_NOTIFICATION_UNBLOCK_COPY
 };
-//# sourceMappingURL=chunk-3MEIGSDK.js.map
+//# sourceMappingURL=chunk-LTTYUSJ2.js.map

package/dist/chunk-LTTYUSJ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pt-BR.feedback.ts"],"sourcesContent":["/**\n * The pt-BR pack for the feedback family. Split out of `pt-BR.ts`, which is a\n * barrel over this folder — see that file for why.\n */\nimport type {\n  ChromeCopy,\n  NotificationUnblockCopy,\n  TutorialCopy,\n} from './copy';\n\nexport const PT_BR_TUTORIAL_COPY: TutorialCopy = {\n  skip: \"Pular\",\n  previous: \"Anterior\",\n  next: \"Próximo\",\n  restart: \"Recomeçar\",\n  complete: \"Concluir\",\n  finish: \"Finalizar\",\n  requiresAction: \"Conclua a ação obrigatória primeiro\",\n};\n\nexport const PT_BR_CHROME_COPY: ChromeCopy = {\n  dismissToast: \"Fechar o aviso\",\n  goBack: \"Voltar\",\n  closePanel: \"Fechar\",\n  closeTab: \"Fechar a aba\",\n  scrollRegion: \"Conteúdo rolável\",\n  scrollToTop: \"Voltar ao topo\",\n  share: \"Compartilhar\",\n};\n\nconst PT_BR_CHROMIUM_DESKTOP = [\n  \"Clique no ícone à esquerda do endereço do site.\",\n  \"Abra \\\"Configurações do site\\\".\",\n  \"Em \\\"Notificações\\\", escolha \\\"Permitir\\\".\",\n  \"Volte a esta página e recarregue.\",\n] as const;\n\nconst PT_BR_CHROMIUM_ANDROID = [\n  \"Toque no ícone à esquerda do endereço do site.\",\n  \"Toque em \\\"Permissões\\\".\",\n  \"Toque em \\\"Notificações\\\" e escolha \\\"Permitir\\\".\",\n  \"Volte a esta página e recarregue.\",\n] as const;\n\nexport const PT_BR_NOTIFICATION_UNBLOCK_COPY: NotificationUnblockCopy = {\n  ios: [\n    \"Abra os Ajustes do iPhone.\",\n    \"Toque em \\\"Notificações\\\".\",\n    \"Encontre este app na lista e ative \\\"Permitir Notificações\\\".\",\n  ],\n  chrome: { desktop: PT_BR_CHROMIUM_DESKTOP, android: PT_BR_CHROMIUM_ANDROID },\n  edge: {\n    desktop: [\n      \"Clique no cadeado à esquerda do endereço do site.\",\n      \"Abra \\\"Permissões para este site\\\".\",\n      \"Em \\\"Notificações\\\", escolha \\\"Permitir\\\".\",\n      \"Volte a esta página e recarregue.\",\n    ],\n    android: PT_BR_CHROMIUM_ANDROID,\n  },\n  firefox: {\n    desktop: [\n      \"Clique no ícone de permissões à esquerda do endereço do site.\",\n      \"Ao lado de \\\"Enviar notificações\\\", clique no X para tirar o bloqueio.\",\n      \"Recarregue a página e ative as notificações de novo.\",\n    ],\n    android: [\n      \"Abra o menu do navegador e toque em \\\"Configurações\\\".\",\n      \"Toque em \\\"Permissões de sites\\\" e depois em \\\"Notificações\\\".\",\n      \"Encontre este site e escolha \\\"Permitir\\\".\",\n      \"Volte a esta página e recarregue.\",\n    ],\n  },\n  opera: { desktop: PT_BR_CHROMIUM_DESKTOP, android: PT_BR_CHROMIUM_ANDROID },\n  safari: {\n    desktop: [\n      \"No menu Safari, abra \\\"Ajustes\\\".\",\n      \"Vá na aba \\\"Sites\\\" e, na lateral, em \\\"Notificações\\\".\",\n      \"Encontre este site e escolha \\\"Permitir\\\".\",\n      \"Volte a esta página e recarregue.\",\n    ],\n  },\n  samsung: {\n    android: [\n      \"Abra o menu do navegador e toque em \\\"Configurações\\\".\",\n      \"Toque em \\\"Sites e downloads\\\" e depois em \\\"Notificações\\\".\",\n      \"Encontre este site e permita as notificações.\",\n      \"Volte a esta página e recarregue.\",\n    ],\n  },\n  other: [\n    \"Abra as configurações do navegador.\",\n    \"Procure as permissões dos sites e depois \\\"Notificações\\\".\",\n    \"Permita as notificações para este site.\",\n    \"Volte a esta página e recarregue.\",\n  ],\n};\n"],"mappings":";AAUO,IAAM,sBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,gBAAgB;AAClB;AAEO,IAAM,oBAAgC;AAAA,EAC3C,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,cAAc;AAAA,EACd,aAAa;AAAA,EACb,OAAO;AACT;AAEA,IAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,kCAA2D;AAAA,EACtE,KAAK;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,QAAQ,EAAE,SAAS,wBAAwB,SAAS,uBAAuB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,wBAAwB,SAAS,uBAAuB;AAAA,EAC1E,QAAQ;AAAA,IACN,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/{chunk-3AQD2EA6.js → chunk-M42ZOCO7.js}

@@ -3,7 +3,7 @@ import {
   StackedView,
   WaterfallView,
   phaseColors
-} from "./chunk-WFAJTO2B.js";
+} from "./chunk-UVFZQCC7.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -55,12 +55,12 @@ var calculatePercentages = (data) => {
     response: (data.response || 0) / total * 100
   };
 };
-var phasesOf = (data) => [
-  { key: "dns", label: "DNS Lookup", value: data.dns },
-  { key: "connect", label: "Connection", value: data.connect },
-  { key: "ssl", label: "SSL/TLS", value: data.ssl },
-  { key: "request", label: "Request", value: data.request },
-  { key: "response", label: "Response", value: data.response }
+var phasesOf = (data, copy) => [
+  { key: "dns", label: copy.dns, value: data.dns },
+  { key: "connect", label: copy.connect, value: data.connect },
+  { key: "ssl", label: copy.ssl, value: data.ssl },
+  { key: "request", label: copy.request, value: data.request },
+  { key: "response", label: copy.response, value: data.response }
 ].filter((phase) => phase.value !== void 0 && phase.value > 0);
 var VIEWS = {
   waterfall: WaterfallView,
@@ -77,7 +77,7 @@ var TimingDiagram = ({
   variant = "waterfall"
 }) => {
   const percentages = useMemo(() => calculatePercentages(data), [data]);
-  const phases = phasesOf(data);
+  const phases = phasesOf(data, copy);
   const View = VIEWS[variant];
   return /* @__PURE__ */ jsxs(DiagramContainer, { elevation: 2, role: "region", "aria-label": copy.regionLabel, tabIndex: 0, children: [
     /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: "bold", gutterBottom: true, children: copy.heading }),
@@ -87,6 +87,7 @@ var TimingDiagram = ({
         phases,
         percentages,
         data,
+        copy,
         animated,
         showLabels,
         showTooltips,
@@ -111,4 +112,4 @@ export {
   TimingDiagram,
   TimingDiagram_default
 };
-//# sourceMappingURL=chunk-3AQD2EA6.js.map
+//# sourceMappingURL=chunk-M42ZOCO7.js.map

package/dist/chunk-M42ZOCO7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/TimingDiagram/TimingDiagram.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { TimingDiagramCopy } from '../../../copy';\n\nimport type { TimingData, TimingDiagramProps } from './TimingDiagram.types';\nimport type { Phase, PhaseKey, TimingViewProps } from './TimingDiagram.views';\nimport {\n  HorizontalView,\n  phaseColors,\n  StackedView,\n  WaterfallView,\n} from './TimingDiagram.views';\nimport { rem } from '../../../tokens/relative';\n\n// Styled components\nconst DiagramContainer = styled(Paper)(({ theme }) => ({\n  padding: theme.spacing(3),\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  borderRadius: theme.shape.borderRadius * 2,\n}));\n\nconst Legend = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: theme.spacing(2),\n  marginTop: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n}));\n\nconst LegendItem = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  '& .color': {\n    width: rem(theme, 12),\n    height: rem(theme, 12),\n    borderRadius: rem(theme, 2),\n  },\n  '& .label': {\n    fontSize: rem(theme, 12.8),\n    color: theme.palette.text.secondary,\n  },\n}));\n\n// Helper functions\nconst calculatePercentages = (data: TimingData): Record<string, number> => {\n  const total = data.total || 1;\n  return {\n    dns: ((data.dns || 0) / total) * 100,\n    connect: ((data.connect || 0) / total) * 100,\n    ssl: ((data.ssl || 0) / total) * 100,\n    request: ((data.request || 0) / total) * 100,\n    response: ((data.response || 0) / total) * 100,\n  };\n};\n\n// A phase with no recorded time never happened — an HTTP request has no SSL\n// handshake, for instance — so it gets no bar and no legend entry.\nconst phasesOf = (data: TimingData, copy: TimingDiagramCopy): Phase[] =>\n  [\n    { key: 'dns', label: copy.dns, value: data.dns },\n    { key: 'connect', label: copy.connect, value: data.connect },\n    { key: 'ssl', label: copy.ssl, value: data.ssl },\n    { key: 'request', label: copy.request, value: data.request },\n    { key: 'response', label: copy.response, value: data.response },\n  ].filter((phase) => phase.value !== undefined && phase.value > 0);\n\nconst VIEWS: Record<string, FC<TimingViewProps>> = {\n  waterfall: WaterfallView,\n  stacked: StackedView,\n  horizontal: HorizontalView,\n};\n\n// Main component\nexport const TimingDiagram: FC<TimingDiagramProps> = ({\n  copy,\n  data,\n  showLabels = true,\n  height,\n  animated = true,\n  showTooltips = true,\n  variant = 'waterfall',\n}) => {\n  const percentages = useMemo(() => calculatePercentages(data), [data]);\n  const phases = phasesOf(data, copy);\n  const View = VIEWS[variant];\n\n  return (\n    <DiagramContainer elevation={2} role=\"region\" aria-label={copy.regionLabel} tabIndex={0}>\n      <Typography variant=\"h6\" fontWeight=\"bold\" gutterBottom>\n        {copy.heading}\n      </Typography>\n\n      {View && (\n        <View\n          phases={phases}\n          percentages={percentages}\n          data={data}\n          copy={copy}\n          animated={animated}\n          showLabels={showLabels}\n          showTooltips={showTooltips}\n          // The waterfall's plot height, 40 design px unless the caller says otherwise.\n          plotHeightPx={height ?? 40}\n        />\n      )}\n\n      {showLabels && (\n        <Legend>\n          {phases.map((phase) => (\n            <LegendItem key={phase.key}>\n              <Box\n                className=\"color\"\n                sx={(theme) => ({ backgroundColor: phaseColors(theme)[phase.key as PhaseKey] })}\n              />\n              <Typography className=\"label\">{phase.label}</Typography>\n            </LegendItem>\n          ))}\n        </Legend>\n      )}\n    </DiagramContainer>\n  );\n};\n\n// Export default\nexport default TimingDiagram;\n"],"mappings":"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","names":[]}

package/dist/{chunk-GJFAI3J5.js → chunk-OOB3YWPX.js}

@@ -6,22 +6,22 @@ import {
 } from "./chunk-N2GEKC4J.js";
 import {
   LightboxOverlay
-} from "./chunk-IVJKILIX.js";
+} from "./chunk-VZ4VAQX3.js";
 import {
   LightboxCurrentMedia
-} from "./chunk-2DWBJJK6.js";
+} from "./chunk-RBGUS7WO.js";
 import {
   useLightbox
 } from "./chunk-HJPPNVCF.js";
-import {
-  LightboxCopyProvider
-} from "./chunk-TEQYTEM2.js";
 import {
   LightboxThumbnails
-} from "./chunk-BAFDSAWY.js";
+} from "./chunk-SV4FYSDL.js";
 import {
   makeTestId
 } from "./chunk-3KA6MYIR.js";
+import {
+  LightboxCopyProvider
+} from "./chunk-TEQYTEM2.js";
 import {
   scrim
 } from "./chunk-FQ6UW7IY.js";
@@ -42,7 +42,13 @@ var DIALOG_STATIC_PROPS = {
   TransitionComponent: Fade,
   TransitionProps: { timeout: 300 },
   PaperProps: { sx: { background: (theme) => scrim(theme, 0.9), backdropFilter: (theme) => `blur(${rem(theme, 2)})` } },
-  "aria-label": "Lightbox",
+  // `aria-labelledby` is the one accessible name for the modal itself: MUI
+  // forwards it (with `aria-modal` and its own `role="dialog"`) onto the
+  // Paper, the element that is actually the WAI-ARIA dialog. A plain
+  // `aria-label` alongside it would land on the OUTER root instead — a
+  // second, non-modal `role="dialog"` this component sets of its own accord
+  // — duplicating (and, as a static English literal, contradicting) the name
+  // the Paper already carries.
   "aria-labelledby": "lightbox-title",
   role: "dialog",
   "aria-modal": "true"
@@ -67,8 +73,9 @@ var Lightbox = React.forwardRef((componentProps, ref) => {
       "data-testid": dataTestId || "lightbox",
       children: [
         /* @__PURE__ */ jsxs(Typography, { id: "lightbox-title", variant: "h6", sx: { position: "absolute", left: sxRem(-1e4) }, children: [
-          "Lightbox - ",
-          currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`
+          props.copy.dialogLabel,
+          " - ",
+          currentItem?.alt || props.copy.itemPosition(currentIndex + 1, items.length)
         ] }),
         /* @__PURE__ */ jsx(
           LightboxOverlay,
@@ -135,4 +142,4 @@ export {
   Lightbox,
   Lightbox_default
 };
-//# sourceMappingURL=chunk-GJFAI3J5.js.map
+//# sourceMappingURL=chunk-OOB3YWPX.js.map

package/dist/chunk-OOB3YWPX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/Lightbox.tsx"],"sourcesContent":["import Dialog from '@mui/material/Dialog/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { makeTestId } from './Lightbox.constants';\nimport { resolveLightboxProps } from './Lightbox.helpers';\nimport { LightboxCopyProvider } from './lightbox-copy-context';\nimport type { LightboxProps, LightboxRef } from './Lightbox.types';\nimport { LightboxCurrentMedia } from './LightboxCurrentMedia';\nimport { LightboxOverlay } from './LightboxOverlay';\nimport { LightboxStage } from './LightboxStage';\nimport { LightboxThumbnails } from './LightboxThumbnails';\nimport { useLightbox } from './useLightbox';\nimport { scrim } from '../../../tokens/ink';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst DIALOG_STATIC_PROPS = {\n  maxWidth: false,\n  fullScreen: true,\n  TransitionComponent: Fade,\n  TransitionProps: { timeout: 300 },\n  PaperProps: { sx: { background: (theme: Theme) => scrim(theme, 0.9), backdropFilter: (theme: Theme) => `blur(${rem(theme, 2)})` } },\n  // `aria-labelledby` is the one accessible name for the modal itself: MUI\n  // forwards it (with `aria-modal` and its own `role=\"dialog\"`) onto the\n  // Paper, the element that is actually the WAI-ARIA dialog. A plain\n  // `aria-label` alongside it would land on the OUTER root instead — a\n  // second, non-modal `role=\"dialog\"` this component sets of its own accord\n  // — duplicating (and, as a static English literal, contradicting) the name\n  // the Paper already carries.\n  'aria-labelledby': 'lightbox-title',\n  role: 'dialog',\n  'aria-modal': 'true',\n} as const;\n\nexport const Lightbox = React.forwardRef<LightboxRef, LightboxProps>((componentProps, ref) => {\n  const props = resolveLightboxProps(componentProps);\n  const { isOpen, items, loop, autoplay, showControls, showCaptions, thumbnails, zoomable } = props;\n  const { className, style, dataTestId } = props;\n\n  const testId = makeTestId(dataTestId);\n  const lightbox = useLightbox(props, ref);\n  const { currentIndex, currentItem, zoom } = lightbox;\n\n  return (\n    <LightboxCopyProvider copy={props.copy}>\n    <Dialog\n      open={isOpen}\n      onClose={lightbox.close}\n      {...DIALOG_STATIC_PROPS}\n      className={className}\n      style={style}\n      onTouchStart={lightbox.handleTouchStart}\n      onTouchEnd={lightbox.handleTouchEnd}\n      data-testid={dataTestId || 'lightbox'}\n    >\n      {/* Visually hidden title for screen readers */}\n      <Typography id=\"lightbox-title\" variant=\"h6\" sx={{ position: 'absolute', left: sxRem(-10000) }}>\n        {props.copy.dialogLabel} - {currentItem?.alt || props.copy.itemPosition(currentIndex + 1, items.length)}\n      </Typography>\n\n      <LightboxOverlay\n        testId={testId}\n        itemCount={items.length}\n        currentIndex={currentIndex}\n        showControls={showControls}\n        loop={loop}\n        autoplay={autoplay}\n        canZoom={lightbox.canZoom}\n        isAutoPlaying={lightbox.isAutoPlaying}\n        onClose={lightbox.close}\n        onPrev={lightbox.prev}\n        onNext={lightbox.next}\n        onZoomIn={zoom.zoomIn}\n        onZoomOut={zoom.zoomOut}\n        onResetZoom={zoom.resetZoom}\n        onToggleAutoplay={() => lightbox.setIsAutoPlaying((playing) => !playing)}\n      />\n\n      <LightboxStage\n        items={items}\n        currentItem={currentItem}\n        currentIndex={currentIndex}\n        isLoading={lightbox.isLoading}\n        showCaptions={showCaptions}\n        thumbnails={thumbnails}\n        testId={testId}\n        media={\n          <LightboxCurrentMedia\n            item={currentItem}\n            index={currentIndex}\n            total={items.length}\n            zoomable={zoomable}\n            zoom={zoom}\n            testId={testId}\n            onLoadingChange={lightbox.setIsLoading}\n            onWheel={lightbox.handleWheel}\n          />\n        }\n        thumbnailStrip={\n          thumbnails &&\n          items.length > 1 && (\n            <LightboxThumbnails\n              items={items}\n              currentIndex={currentIndex}\n              testId={testId}\n              onSelect={lightbox.goToIndex}\n            />\n          )\n        }\n      />\n    </Dialog>\n    </LightboxCopyProvider>\n  );\n});\n\nLightbox.displayName = 'Lightbox';\n\nexport default Lightbox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,gBAAgB;AAEvB,OAAO,WAAW;AAsDZ,SAIA,KAJA;AAxCN,IAAM,sBAAsB;AAAA,EAC1B,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,iBAAiB,EAAE,SAAS,IAAI;AAAA,EAChC,YAAY,EAAE,IAAI,EAAE,YAAY,CAAC,UAAiB,MAAM,OAAO,GAAG,GAAG,gBAAgB,CAAC,UAAiB,QAAQ,IAAI,OAAO,CAAC,CAAC,IAAI,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlI,mBAAmB;AAAA,EACnB,MAAM;AAAA,EACN,cAAc;AAChB;AAEO,IAAM,WAAW,MAAM,WAAuC,CAAC,gBAAgB,QAAQ;AAC5F,QAAM,QAAQ,qBAAqB,cAAc;AACjD,QAAM,EAAE,QAAQ,OAAO,MAAM,UAAU,cAAc,cAAc,YAAY,SAAS,IAAI;AAC5F,QAAM,EAAE,WAAW,OAAO,WAAW,IAAI;AAEzC,QAAM,SAAS,WAAW,UAAU;AACpC,QAAM,WAAW,YAAY,OAAO,GAAG;AACvC,QAAM,EAAE,cAAc,aAAa,KAAK,IAAI;AAE5C,SACE,oBAAC,wBAAqB,MAAM,MAAM,MAClC;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,SAAS,SAAS;AAAA,MACjB,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,cAAc,SAAS;AAAA,MACvB,YAAY,SAAS;AAAA,MACrB,eAAa,cAAc;AAAA,MAG3B;AAAA,6BAAC,cAAW,IAAG,kBAAiB,SAAQ,MAAK,IAAI,EAAE,UAAU,YAAY,MAAM,MAAM,IAAM,EAAE,GAC1F;AAAA,gBAAM,KAAK;AAAA,UAAY;AAAA,UAAI,aAAa,OAAO,MAAM,KAAK,aAAa,eAAe,GAAG,MAAM,MAAM;AAAA,WACxG;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,MAAM;AAAA,YACjB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,SAAS;AAAA,YAClB,eAAe,SAAS;AAAA,YACxB,SAAS,SAAS;AAAA,YAClB,QAAQ,SAAS;AAAA,YACjB,QAAQ,SAAS;AAAA,YACjB,UAAU,KAAK;AAAA,YACf,WAAW,KAAK;AAAA,YAChB,aAAa,KAAK;AAAA,YAClB,kBAAkB,MAAM,SAAS,iBAAiB,CAAC,YAAY,CAAC,OAAO;AAAA;AAAA,QACzE;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,SAAS;AAAA,YACpB;AAAA,YACA;AAAA,YACA;AAAA,YACA,OACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,OAAO,MAAM;AAAA,gBACb;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,iBAAiB,SAAS;AAAA,gBAC1B,SAAS,SAAS;AAAA;AAAA,YACpB;AAAA,YAEF,gBACE,cACA,MAAM,SAAS,KACb;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,UAAU,SAAS;AAAA;AAAA,YACrB;AAAA;AAAA,QAGN;AAAA;AAAA;AAAA,EACF,GACA;AAEJ,CAAC;AAED,SAAS,cAAc;AAEvB,IAAO,mBAAQ;","names":[]}

package/dist/{chunk-TZASFX6G.js → chunk-P53KRCKW.js}

@@ -1,11 +1,11 @@
-import {
-  useLightboxCopy
-} from "./chunk-TEQYTEM2.js";
 import {
   OVERLAY_Z_INDEX,
   navButtonSx,
   overlayButtonSx
 } from "./chunk-3KA6MYIR.js";
+import {
+  useLightboxCopy
+} from "./chunk-TEQYTEM2.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -156,4 +156,4 @@ export {
   LightboxZoomControls,
   LightboxAutoplayButton
 };
-//# sourceMappingURL=chunk-TZASFX6G.js.map
+//# sourceMappingURL=chunk-P53KRCKW.js.map

package/dist/{chunk-2DWBJJK6.js → chunk-RBGUS7WO.js}

@@ -1,6 +1,6 @@
 import {
   LightboxMedia
-} from "./chunk-ASCUWG55.js";
+} from "./chunk-IOCY5G43.js";
 
 // src/components/data-display/Lightbox/LightboxCurrentMedia.tsx
 import { jsx } from "react/jsx-runtime";
@@ -37,4 +37,4 @@ var LightboxCurrentMedia = ({
 export {
   LightboxCurrentMedia
 };
-//# sourceMappingURL=chunk-2DWBJJK6.js.map
+//# sourceMappingURL=chunk-RBGUS7WO.js.map

package/dist/{chunk-ZEYUSS3W.js → chunk-SQNQQTP7.js}

@@ -1,7 +1,7 @@
 import {
   GridBody,
   GridHeader
-} from "./chunk-H5ZTIELC.js";
+} from "./chunk-ZFXTRPQO.js";
 import {
   DataGridEmpty,
   DataGridError,
@@ -30,7 +30,7 @@ function resolveChrome(props) {
     },
     placeholder: {
       dataTestId,
-      ariaLabel: props.ariaLabel ?? "Data grid",
+      ariaLabel: props.ariaLabel ?? props.copy.gridLabel,
       className,
       style,
       // Only the DOM-safe leftovers reach the element: every grid-specific prop
@@ -80,6 +80,7 @@ var DataGrid = (props) => {
   );
 };
 var GRID_ONLY_PROPS = [
+  "copy",
   "rows",
   "columns",
   "getRowId",
@@ -117,4 +118,4 @@ export {
   DataGrid,
   GRID_ONLY_PROPS
 };
-//# sourceMappingURL=chunk-ZEYUSS3W.js.map
+//# sourceMappingURL=chunk-SQNQQTP7.js.map

package/dist/chunk-SQNQQTP7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataGrid/DataGrid.tsx"],"sourcesContent":["/**\n * `DataGrid` — the shell.\n *\n * Everything that is not \"which of the four renders is this, and what wraps the\n * table\" lives beside it: the state in `DataGrid.model.ts`, the client-mode row\n * pipeline in `DataGrid.rows.ts`, the cells and rows in `DataGrid.cells.tsx`,\n * the head/body in `DataGrid.body.tsx`, and the loading/error/empty renders in\n * `DataGrid.states.tsx`.\n *\n * All FOUR renders carry the caller's `data-testid`. It used to be applied only\n * on the populated one, so a grid whose first paint had no rows could not be\n * found by a test at all — see `DataGrid.states.tsx` for the full story.\n */\nimport Paper from '@mui/material/Paper/index.js';\nimport Table from '@mui/material/Table/index.js';\nimport TableContainer from '@mui/material/TableContainer/index.js';\nimport type React from 'react';\n\nimport { GridBody, GridHeader } from './DataGrid.body';\nimport { useDataGridModel } from './DataGrid.model';\nimport { DataGridEmpty, DataGridError, DataGridLoading } from './DataGrid.states';\nimport type { DataGridProps } from './DataGrid.types';\n\n/**\n * The chrome every render needs, with the defaults resolved ONCE.\n *\n * Extracted from the component body because a dozen destructuring defaults are\n * a dozen branches: the gate counted them, correctly, as complexity the render\n * did not need to carry.\n */\nfunction resolveChrome<T extends Record<string, unknown>>(props: DataGridProps<T>): {\n  dataAttrs: Record<string, unknown>;\n  placeholder: {\n    dataTestId?: string;\n    ariaLabel: string;\n    className?: string;\n    style?: React.CSSProperties;\n    htmlProps: React.HTMLAttributes<HTMLElement>;\n  };\n} {\n  const { className, style, 'data-testid': dataTestId, ...rest } = props;\n  const stickyHeader = props.stickyHeader ?? true;\n  return {\n    dataAttrs: {\n      'data-ui': 'datagrid',\n      'data-density': props.density ?? 'comfortable',\n      'data-size-mode': props.sizeMode ?? 'auto',\n      'data-virtual-rows': props.virtualizeRows ?? true,\n      'data-virtual-cols': props.virtualizeColumns ?? false,\n      'data-sticky-header': stickyHeader,\n    },\n    placeholder: {\n      dataTestId,\n      ariaLabel: props.ariaLabel ?? props.copy.gridLabel,\n      className,\n      style,\n      // Only the DOM-safe leftovers reach the element: every grid-specific prop\n      // is named in `GRID_ONLY_PROPS`, so this cannot smuggle `rows` onto a div.\n      htmlProps: omitGridProps(rest as Record<string, unknown>),\n    },\n  };\n}\n\nexport const DataGrid = <T extends Record<string, unknown> = Record<string, unknown>>(\n  props: DataGridProps<T>,\n): React.JSX.Element => {\n  const model = useDataGridModel(props);\n  const { dataAttrs, placeholder } = resolveChrome(props);\n\n  if (props.loading) return <DataGridLoading {...placeholder} />;\n  if (props.error) return <DataGridError {...placeholder} error={props.error} />;\n  if (model.processedRows.length === 0) {\n    return <DataGridEmpty {...placeholder} emptyState={props.emptyState} emptyText={props.emptyText} />;\n  }\n\n  const leadingColumns = (props.selection?.mode ?? 'none') !== 'none' ? 1 : 0;\n  const totalColumns =\n    model.visibleColumns.length + leadingColumns + (props.expansion ? 1 : 0);\n  const section = { model, props, totalColumns };\n\n  return (\n    <Paper\n      ref={model.containerRef}\n      {...dataAttrs}\n      data-testid={placeholder.dataTestId}\n      className={placeholder.className}\n      style={placeholder.style}\n      role=\"grid\"\n      aria-label={placeholder.ariaLabel}\n      aria-description={props.ariaDescription}\n      aria-rowcount={model.processedRows.length + 1} // +1 for the header row\n      aria-colcount={totalColumns}\n      sx={{ height: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}\n      {...placeholder.htmlProps}\n    >\n      <TableContainer\n        sx={{ flex: 1, overflow: 'auto', position: 'relative' }}\n        onScroll={model.onScroll}\n      >\n        <Table stickyHeader={props.stickyHeader ?? true}>\n          <GridHeader {...section} />\n          <GridBody {...section} />\n        </Table>\n      </TableContainer>\n    </Paper>\n  );\n};\n\n/**\n * The grid props that are NOT HTML attributes.\n *\n * `DataGridProps` extends `HTMLAttributes`, so the rest-spread carries the\n * grid's own configuration too. React would warn (or worse, serialize an array\n * of rows into an attribute) if any of it reached the DOM.\n *\n * Exported so a test can render a grid carrying every name on it and assert\n * none reaches the DOM — the check that would have caught `emptyText` missing.\n */\nexport const GRID_ONLY_PROPS = [\n  'copy',\n  'rows',\n  'columns',\n  'getRowId',\n  'sizeMode',\n  'density',\n  'rowHeight',\n  'headerHeight',\n  'footerHeight',\n  'selection',\n  'pagination',\n  'sorting',\n  'filtering',\n  'expansion',\n  'editing',\n  'virtualizeRows',\n  'virtualizeColumns',\n  'stickyHeader',\n  'stickyFooter',\n  'loading',\n  'error',\n  'emptyState',\n  'emptyText',\n  'onRequestData',\n  'ariaLabel',\n  'ariaDescription',\n] as const;\n\nfunction omitGridProps(rest: Record<string, unknown>): React.HTMLAttributes<HTMLElement> {\n  const html: Record<string, unknown> = { ...rest };\n  for (const key of GRID_ONLY_PROPS) delete html[key];\n  return html as React.HTMLAttributes<HTMLElement>;\n}\n\nDataGrid.displayName = 'DataGrid';\n"],"mappings":";;;;;;;;;;;;;;AAaA,OAAO,WAAW;AAClB,OAAO,WAAW;AAClB,OAAO,oBAAoB;AAsDC,cA8BpB,YA9BoB;AAvC5B,SAAS,cAAiD,OASxD;AACA,QAAM,EAAE,WAAW,OAAO,eAAe,YAAY,GAAG,KAAK,IAAI;AACjE,QAAM,eAAe,MAAM,gBAAgB;AAC3C,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,gBAAgB,MAAM,WAAW;AAAA,MACjC,kBAAkB,MAAM,YAAY;AAAA,MACpC,qBAAqB,MAAM,kBAAkB;AAAA,MAC7C,qBAAqB,MAAM,qBAAqB;AAAA,MAChD,sBAAsB;AAAA,IACxB;AAAA,IACA,aAAa;AAAA,MACX;AAAA,MACA,WAAW,MAAM,aAAa,MAAM,KAAK;AAAA,MACzC;AAAA,MACA;AAAA;AAAA;AAAA,MAGA,WAAW,cAAc,IAA+B;AAAA,IAC1D;AAAA,EACF;AACF;AAEO,IAAM,WAAW,CACtB,UACsB;AACtB,QAAM,QAAQ,iBAAiB,KAAK;AACpC,QAAM,EAAE,WAAW,YAAY,IAAI,cAAc,KAAK;AAEtD,MAAI,MAAM,QAAS,QAAO,oBAAC,mBAAiB,GAAG,aAAa;AAC5D,MAAI,MAAM,MAAO,QAAO,oBAAC,iBAAe,GAAG,aAAa,OAAO,MAAM,OAAO;AAC5E,MAAI,MAAM,cAAc,WAAW,GAAG;AACpC,WAAO,oBAAC,iBAAe,GAAG,aAAa,YAAY,MAAM,YAAY,WAAW,MAAM,WAAW;AAAA,EACnG;AAEA,QAAM,kBAAkB,MAAM,WAAW,QAAQ,YAAY,SAAS,IAAI;AAC1E,QAAM,eACJ,MAAM,eAAe,SAAS,kBAAkB,MAAM,YAAY,IAAI;AACxE,QAAM,UAAU,EAAE,OAAO,OAAO,aAAa;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,MAAM;AAAA,MACV,GAAG;AAAA,MACJ,eAAa,YAAY;AAAA,MACzB,WAAW,YAAY;AAAA,MACvB,OAAO,YAAY;AAAA,MACnB,MAAK;AAAA,MACL,cAAY,YAAY;AAAA,MACxB,oBAAkB,MAAM;AAAA,MACxB,iBAAe,MAAM,cAAc,SAAS;AAAA,MAC5C,iBAAe;AAAA,MACf,IAAI,EAAE,QAAQ,QAAQ,UAAU,UAAU,SAAS,QAAQ,eAAe,SAAS;AAAA,MAClF,GAAG,YAAY;AAAA,MAEhB;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,EAAE,MAAM,GAAG,UAAU,QAAQ,UAAU,WAAW;AAAA,UACtD,UAAU,MAAM;AAAA,UAEhB,+BAAC,SAAM,cAAc,MAAM,gBAAgB,MACzC;AAAA,gCAAC,cAAY,GAAG,SAAS;AAAA,YACzB,oBAAC,YAAU,GAAG,SAAS;AAAA,aACzB;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAYO,IAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAS,cAAc,MAAkE;AACvF,QAAM,OAAgC,EAAE,GAAG,KAAK;AAChD,aAAW,OAAO,gBAAiB,QAAO,KAAK,GAAG;AAClD,SAAO;AACT;AAEA,SAAS,cAAc;","names":[]}

package/dist/chunk-SV4FYSDL.js

@@ -0,0 +1,92 @@
+import {
+  thumbnailStripSx
+} from "./chunk-3KA6MYIR.js";
+import {
+  useLightboxCopy
+} from "./chunk-TEQYTEM2.js";
+import {
+  onMedia,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Lightbox/LightboxThumbnails.tsx
+import PlayIcon from "@mui/icons-material/PlayArrow";
+import Box from "@mui/material/Box/index.js";
+import { jsx } from "react/jsx-runtime";
+var THUMB = { widthPx: 60, heightPx: 40 };
+var frame = (theme, color) => `${rem(theme, 2)} solid ${color}`;
+var VideoThumbnail = () => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      width: "100%",
+      height: "100%",
+      background: (theme) => sheen(theme, 0.1),
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /* @__PURE__ */ jsx(PlayIcon, { sx: { color: onMedia, fontSize: sxRem(16) } })
+  }
+);
+var LightboxThumbnails = ({
+  items,
+  currentIndex,
+  testId,
+  onSelect
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        ...thumbnailStripSx,
+        position: "absolute",
+        bottom: sxRem(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: sxRem(THUMB.widthPx),
+            height: sxRem(THUMB.heightPx),
+            cursor: "pointer",
+            border: (theme) => frame(theme, currentIndex === index ? onMedia(theme) : "transparent"),
+            borderRadius: 0.5,
+            overflow: "hidden",
+            flexShrink: 0,
+            "&:hover": { border: (theme) => frame(theme, sheen(theme, 0.7)) }
+          },
+          "data-testid": testId(`thumbnail-${index}`),
+          children: item.type === "video" ? /* @__PURE__ */ jsx(VideoThumbnail, {}) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.src,
+              alt: item.alt || copy.thumbnailFallback(index + 1),
+              style: { width: "100%", height: "100%", objectFit: "cover" }
+            }
+          )
+        },
+        `${item.src}-${index}`
+      ))
+    }
+  );
+};
+
+export {
+  LightboxThumbnails
+};
+//# sourceMappingURL=chunk-SV4FYSDL.js.map

package/dist/chunk-SV4FYSDL.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/Box/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { thumbnailStripSx } from './Lightbox.constants';\nimport { useLightboxCopy } from './lightbox-copy-context';\nimport type { LightboxItem } from './Lightbox.types';\nimport { onMedia, sheen } from '../../../tokens/ink';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n/** One filmstrip frame, in design px. */\nconst THUMB = { widthPx: 60, heightPx: 40 } as const;\n\nconst frame = (theme: Theme, color: string): string => `${rem(theme, 2)} solid ${color}`;\n\nconst VideoThumbnail: FC = () => (\n  <Box\n    sx={{\n      width: '100%',\n      height: '100%',\n      background: (theme: Theme) => sheen(theme, 0.1),\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n    }}\n  >\n    <PlayIcon sx={{ color: onMedia, fontSize: sxRem(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  const copy = useLightboxCopy();\n  return (\n  <Box\n    sx={{\n      ...thumbnailStripSx,\n      position: 'absolute',\n      bottom: sxRem(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: sxRem(THUMB.widthPx),\n          height: sxRem(THUMB.heightPx),\n          cursor: 'pointer',\n          border: (theme: Theme) => frame(theme, currentIndex === index ? onMedia(theme) : 'transparent'),\n          borderRadius: 0.5,\n          overflow: 'hidden',\n          flexShrink: 0,\n          '&:hover': { border: (theme: Theme) => frame(theme, sheen(theme, 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 || copy.thumbnailFallback(index + 1)}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n          />\n        )}\n      </Box>\n    ))}\n  </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,cAAc;AACrB,OAAO,SAAS;AA2BZ;AAfJ,IAAM,QAAQ,EAAE,SAAS,IAAI,UAAU,GAAG;AAE1C,IAAM,QAAQ,CAAC,OAAc,UAA0B,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,KAAK;AAEtF,IAAM,iBAAqB,MACzB;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY,CAAC,UAAiB,MAAM,OAAO,GAAG;AAAA,MAC9C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,IAEA,8BAAC,YAAS,IAAI,EAAE,OAAO,SAAS,UAAU,MAAM,EAAE,EAAE,GAAG;AAAA;AACzD;AAUK,IAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,OAAO,gBAAgB;AAC7B,SACA;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,GAAG;AAAA,QACH,UAAU;AAAA,QACV,QAAQ,MAAM,EAAE;AAAA,QAChB,MAAM;AAAA,QACN,WAAW;AAAA,QACX,SAAS;AAAA,QACT,KAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,MACX;AAAA,MACA,eAAa,OAAO,YAAY;AAAA,MAE/B,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM,SAAS,KAAK;AAAA,UAC7B,IAAI;AAAA,YACF,OAAO,MAAM,MAAM,OAAO;AAAA,YAC1B,QAAQ,MAAM,MAAM,QAAQ;AAAA,YAC5B,QAAQ;AAAA,YACR,QAAQ,CAAC,UAAiB,MAAM,OAAO,iBAAiB,QAAQ,QAAQ,KAAK,IAAI,aAAa;AAAA,YAC9F,cAAc;AAAA,YACd,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,WAAW,EAAE,QAAQ,CAAC,UAAiB,MAAM,OAAO,MAAM,OAAO,GAAG,CAAC,EAAE;AAAA,UACzE;AAAA,UACA,eAAa,OAAO,aAAa,KAAK,EAAE;AAAA,UAEvC,eAAK,SAAS,UACb,oBAAC,kBAAe,IAEhB;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,KAAK;AAAA,cACV,KAAK,KAAK,OAAO,KAAK,kBAAkB,QAAQ,CAAC;AAAA,cACjD,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,QAAQ;AAAA;AAAA,UAC7D;AAAA;AAAA,QArBG,GAAG,KAAK,GAAG,IAAI,KAAK;AAAA,MAuB3B,CACD;AAAA;AAAA,EACH;AAEF;","names":[]}

package/dist/{chunk-CKHFYTIX.js → chunk-TBMGYQJF.js}

@@ -5,8 +5,10 @@ import {
   TOUCH_TARGET
 } from "./chunk-NYFNF7I5.js";
 import {
+  physicalScrollLeft,
+  toRawScrollLeft,
   watchVisitorScroll
-} from "./chunk-SLJAQA2X.js";
+} from "./chunk-GT2RCOHM.js";
 import {
   rem,
   sxRem
@@ -25,7 +27,7 @@ function prefersReducedMotion() {
 function centredScrollLeft(strip, chip) {
   const chipBox = chip.getBoundingClientRect();
   const visibleStart = strip.getBoundingClientRect().left + strip.clientLeft;
-  const chipCentre = chipBox.left - visibleStart + strip.scrollLeft + chipBox.width / 2;
+  const chipCentre = chipBox.left - visibleStart + physicalScrollLeft(strip) + chipBox.width / 2;
   const target = chipCentre - strip.clientWidth / 2;
   return Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));
 }
@@ -46,7 +48,7 @@ function useCentreActiveChip(stripRef, activeItemId, itemsKey) {
       const left = centredScrollLeft(strip, chip);
       if (Math.abs(left - visitor.aimedAt()) < 0.5) return;
       visitor.beforeOwnScroll(left);
-      strip.scrollTo({ left, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+      strip.scrollTo({ left: toRawScrollLeft(strip, left), behavior: prefersReducedMotion() ? "auto" : "smooth" });
     };
     visitor.onSettled(centre);
     centre();
@@ -149,7 +151,15 @@ function SettingsSectionChips({
         display: "flex",
         alignItems: "center",
         gap: 0.75,
-        px: 0.25,
+        // The start side keeps its old, symmetric 0.25 — nothing sits flush
+        // against it once scrolled. The END side is where a scrolled-to-end
+        // chip's own border used to sit almost against the clip boundary
+        // (FUT-2775): sized like the gap BETWEEN chips (`gap` above) rather
+        // than invented fresh, so the last chip clears the edge by the same
+        // margin any two chips clear each other. Logical, not `pr`: the side
+        // that gets clipped is the strip's END, whichever edge that is.
+        paddingInlineStart: 0.25,
+        paddingInlineEnd: 0.75,
         py: 0.25,
         overflowX: "auto",
         overflowY: "hidden",
@@ -176,4 +186,4 @@ SettingsSectionChips.displayName = "SettingsSectionChips";
 export {
   SettingsSectionChips
 };
-//# sourceMappingURL=chunk-CKHFYTIX.js.map
+//# sourceMappingURL=chunk-TBMGYQJF.js.map

package/dist/chunk-TBMGYQJF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionChips.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useEffect, useRef, type RefObject } from 'react';\n\nimport { physicalScrollLeft, toRawScrollLeft, watchVisitorScroll } from './SettingsSectionChips.scroll';\nimport { SettingsStatusMarker } from './SettingsStatusMarker';\nimport { TOUCH_TARGET } from './SettingsLayout.styles';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n/**\n * The chip's drawn height, against `TOUCH_TARGET`'s 44 for the tappable one.\n *\n * The strip sits between a section's header and its first field on the width\n * with the least room for either, so the pill is sized to its text rather than\n * to the thumb — and the thumb is served by the hit area instead.\n */\nconst CHIP_HEIGHT = sxRem(34);\nimport type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout.types';\n\nexport interface SettingsSectionChipsProps {\n  /** The sibling sections to offer — usually the open item's own group. */\n  items: SettingsNavItem[];\n  /** Which one is open. */\n  activeItemId?: string;\n  /** Accessible name of the strip, in the host's language. */\n  ariaLabel: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}\n\n/** True when the visitor asked the OS for less movement. Re-read per scroll. */\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Where the strip has to scroll for `chip`'s centre to sit on its own, clamped\n * to what the strip can scroll.\n *\n * Measured from the two boxes rather than from `chip.offsetLeft`. `offsetLeft`\n * counts from the nearest POSITIONED ancestor, and the strip is not one — nor\n * are the panel and layout around it — so it counted from whatever box the host\n * happened to position, and every target overshot by the strip's offset inside\n * it. The clamp hid that for the last chip; a middle one was simply off-centre.\n * The boxes are both in viewport coordinates, so their difference is the strip's\n * own, whatever the host wraps it in.\n *\n * Read and returned in PHYSICAL pixels (`physicalScrollLeft`, FUT-2775): the\n * bounding-rect arithmetic above is already direction-blind, and an RTL\n * scroller's raw `scrollLeft` is not — the CSSOM View spec has it `0` at the\n * strip's right-hand start and NEGATIVE past it, not `0`-to-`scrollWidth` like\n * an LTR one. `Math.max(0, …)` alone, against that raw value, would clamp every\n * legitimate RTL target straight back to the start. Physical throughout keeps\n * this comparable to {@link VisitorScrollWatch.aimedAt}; the caller converts to\n * this engine's raw `scrollLeft` (`toRawScrollLeft`) only at the `scrollTo` call.\n */\nfunction centredScrollLeft(strip: HTMLElement, chip: HTMLElement): number {\n  const chipBox = chip.getBoundingClientRect();\n  const visibleStart = strip.getBoundingClientRect().left + strip.clientLeft;\n  const chipCentre = chipBox.left - visibleStart + physicalScrollLeft(strip) + chipBox.width / 2;\n  const target = chipCentre - strip.clientWidth / 2;\n  return Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));\n}\n\n/** The chip for `id`, walked rather than selected. */\nfunction findChip(strip: HTMLElement, id: string): HTMLElement | undefined {\n  // An id is host data, and a section id carrying a quote would turn a selector\n  // string into a thrown SyntaxError — which here would take the whole strip\n  // down to centre one chip.\n  return Array.from(strip.children).find(\n    (node): node is HTMLElement => node instanceof HTMLElement && node.dataset.chipId === id,\n  );\n}\n\n/**\n * Keep the open section's chip in view, however the visitor got here — and\n * however the strip's content settles after it mounted.\n *\n * Keyed on `activeItemId` in an effect rather than done in a click handler:\n * arriving by the desktop rail, by a card, by a pasted link and by the browser's\n * back button all have to land the same way, and only one of those is a click on\n * a chip. Every re-render otherwise starts the strip at scroll 0, which parks\n * the active chip off the right edge on any list longer than a screen — the\n * visitor is told where they are by an element they cannot see.\n *\n * Centring ONCE is not enough (FUT-2606). A host can widen a chip after mount\n * with the ids unchanged — a status marker whose read resolves late, a web font\n * arriving — and a strip that fitted at mount then overflows with its last chip\n * clipped, because the one centring saw nothing to scroll. So the strip and\n * every chip are watched with a `ResizeObserver`, and a resize re-aims at the\n * active chip when its target has moved.\n *\n * Never against the visitor, though: once they have scrolled the strip\n * themselves, it is theirs until the open section changes\n * ({@link watchVisitorScroll}, which also says why the strip's OWN smooth scroll\n * never counts as theirs). A strip that yanks back mid-drag because a\n * marker loaded is worse than one that does not centre.\n *\n * `itemsKey` rather than `items`: a host almost always rebuilds that array per\n * render (`groups.flatMap(...)`), and depending on it would re-run this on every\n * render and reset the visitor's latch with it.\n *\n * The key joins on NUL — as the ESCAPE `'\\u0000'`, which it must stay. A\n * literal NUL byte works identically at runtime and makes git classify this file\n * as BINARY: `git diff` prints \"Binary file not shown\" and the GitHub review UI\n * shows nothing at all. This file shipped that way once, and the cost was not\n * the byte — it was a whole change nobody could read.\n */\nfunction useCentreActiveChip(\n  stripRef: RefObject<HTMLDivElement | null>,\n  activeItemId: string | undefined,\n  itemsKey: string,\n): void {\n  useEffect(() => {\n    const strip = stripRef.current;\n    if (!strip || !activeItemId) return undefined;\n    // Feature-checked, not assumed. `Element.scrollTo` is absent in jsdom and in\n    // a few embedded webviews, and an unguarded call there THROWS out of an\n    // effect — which React escalates to the nearest error boundary. The whole\n    // settings area would go down to centre one chip, and the host's own tests\n    // could not render the shell at all. Same reasoning as walking the children\n    // instead of building a selector: nothing in here is worth a crash.\n    if (typeof strip.scrollTo !== 'function') return undefined;\n    const visitor = watchVisitorScroll(strip);\n    const centre = (): void => {\n      const chip = findChip(strip, activeItemId);\n      // Not while a scroll that may be the visitor's is still moving: a resize\n      // mid-drag must not yank the strip. It is re-tried once that scroll rests.\n      if (!chip || visitor.hasScrolled() || visitor.isUndecided()) return;\n      // Physical pixels throughout (FUT-2775) — comparable to `aimedAt()` and to\n      // what `beforeOwnScroll` records; converted to this engine's raw\n      // `scrollLeft` only for the actual `scrollTo` call below.\n      const left = centredScrollLeft(strip, chip);\n      // Only when the target MOVED: a resize that leaves it where it was must not\n      // restart a smooth scroll that is already on its way there. The aim is a\n      // runtime-computed scroll offset, like the exempt `left` below — not a size.\n      if (Math.abs(left - visitor.aimedAt()) < 0.5) return;\n      visitor.beforeOwnScroll(left);\n      strip.scrollTo({ left: toRawScrollLeft(strip, left), behavior: prefersReducedMotion() ? 'auto' : 'smooth' });\n    };\n    visitor.onSettled(centre);\n    centre();\n    // Also feature-checked: without it the strip still centres once, as before.\n    const resizes = typeof ResizeObserver === 'function' ? new ResizeObserver(centre) : undefined;\n    resizes?.observe(strip);\n    for (const child of Array.from(strip.children)) resizes?.observe(child);\n    return () => {\n      resizes?.disconnect();\n      visitor.detach();\n    };\n  }, [stripRef, activeItemId, itemsKey]);\n}\n\n/** One chip: a link when the host gave it a target, else a button. */\nfunction SectionChip({\n  item,\n  active,\n  theme,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: {\n  item: SettingsNavItem;\n  active: boolean;\n  theme: Theme;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const asLink = item.href !== undefined && linkComponent !== undefined;\n  const behaviour = asLink\n    ? { component: linkComponent, href: item.href }\n    : { component: 'button' as const, type: 'button' as const, onClick: () => onSelectItem?.(item.id) };\n\n  return (\n    <Box\n      {...behaviour}\n      data-chip-id={item.id}\n      data-testid={`${testIdPrefix}-chip-${item.id}`}\n      aria-current={active ? 'page' : undefined}\n      sx={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 0.75,\n        flex: '0 0 auto',\n        position: 'relative',\n        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.\n        //\n        // Shrinking `minHeight` alone would have bought a slimmer strip with a\n        // smaller hit area — on the one width where the strip IS the navigation\n        // and the input is a thumb. The `::after` below keeps the tappable\n        // region at the full target while the pill itself takes less room, so\n        // this is a visual change and not an accessibility trade.\n        minHeight: CHIP_HEIGHT,\n        px: 1.5,\n        borderRadius: 999,\n        cursor: 'pointer',\n        font: 'inherit',\n        fontSize: rem(theme, 13),\n        fontWeight: active ? 700 : 500,\n        textDecoration: 'none',\n        whiteSpace: 'nowrap',\n        color: active ? 'primary.main' : 'text.secondary',\n        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : 'transparent',\n        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,\n        // Spans the chip's width only, so neighbours never overlap: the strip\n        // is a row, and the extra reach is vertical.\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          insetInlineStart: 0,\n          insetInlineEnd: 0,\n          top: '50%',\n          transform: 'translateY(-50%)',\n          height: rem(theme, TOUCH_TARGET),\n        },\n      }}\n    >\n      {item.status ? (\n        <SettingsStatusMarker\n          status={item.status}\n          label={item.statusLabel}\n          testId={`${testIdPrefix}-chip-status-${item.id}`}\n        />\n      ) : null}\n      {item.label}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width section strip: horizontally scrollable chips for the sections\n * beside the open one.\n *\n * It clips its own overflow — `overflow-x: auto` on the strip, never on an\n * ancestor. A strip that pushes the page wide makes every OTHER screen at that\n * width scroll sideways too, and the cause is nowhere near the symptom.\n */\nexport function SettingsSectionChips({\n  items,\n  activeItemId,\n  ariaLabel,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: SettingsSectionChipsProps): React.JSX.Element {\n  const theme = useTheme();\n  const stripRef = useRef<HTMLDivElement | null>(null);\n  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join('\\u0000'));\n\n  return (\n    <Box\n      ref={stripRef}\n      component=\"nav\"\n      aria-label={ariaLabel}\n      data-testid={`${testIdPrefix}-chips`}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.75,\n        // The start side keeps its old, symmetric 0.25 — nothing sits flush\n        // against it once scrolled. The END side is where a scrolled-to-end\n        // chip's own border used to sit almost against the clip boundary\n        // (FUT-2775): sized like the gap BETWEEN chips (`gap` above) rather\n        // than invented fresh, so the last chip clears the edge by the same\n        // margin any two chips clear each other. Logical, not `pr`: the side\n        // that gets clipped is the strip's END, whichever edge that is.\n        paddingInlineStart: 0.25,\n        paddingInlineEnd: 0.75,\n        py: 0.25,\n        overflowX: 'auto',\n        overflowY: 'hidden',\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n      }}\n    >\n      {items.map((item) => (\n        <SectionChip\n          key={item.id}\n          item={item}\n          active={item.id === activeItemId}\n          theme={theme}\n          linkComponent={linkComponent}\n          onSelectItem={onSelectItem}\n          testIdPrefix={testIdPrefix}\n        />\n      ))}\n    </Box>\n  );\n}\n\nSettingsSectionChips.displayName = 'SettingsSectionChips';\n"],"mappings":"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","names":[]}

package/dist/{chunk-TCNTIGMY.js → chunk-TDXEO2UI.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-6KEXHOIF.js";
 import {
   SettingsSectionChips
-} from "./chunk-CKHFYTIX.js";
+} from "./chunk-TBMGYQJF.js";
 import {
   TOUCH_TARGET,
   atLeastRail,
@@ -167,4 +167,4 @@ function SettingsPanel({
 export {
   SettingsPanel
 };
-//# sourceMappingURL=chunk-TCNTIGMY.js.map
+//# sourceMappingURL=chunk-TDXEO2UI.js.map

package/dist/{chunk-ASHXIAJO.js → chunk-UGH2DDST.js}

@@ -3,7 +3,10 @@ var EN_US_TUTORIAL_COPY = {
   skip: "Skip",
   previous: "Back",
   next: "Next",
-  restart: "Start over"
+  restart: "Start over",
+  complete: "Complete",
+  finish: "Finish",
+  requiresAction: "Complete the required action first"
 };
 var EN_US_CHROME_COPY = {
   dismissToast: "Dismiss",
@@ -85,4 +88,4 @@ export {
   EN_US_CHROME_COPY,
   EN_US_NOTIFICATION_UNBLOCK_COPY
 };
-//# sourceMappingURL=chunk-ASHXIAJO.js.map
+//# sourceMappingURL=chunk-UGH2DDST.js.map

package/dist/chunk-UGH2DDST.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/en-US.feedback.ts"],"sourcesContent":["/**\n * The en-US pack for the feedback family. Split the same way\n * `pt-BR.feedback.ts` is — see `en-US.ts` for why.\n */\nimport type {\n  ChromeCopy,\n  NotificationUnblockCopy,\n  TutorialCopy,\n} from './copy';\n\nexport const EN_US_TUTORIAL_COPY: TutorialCopy = {\n  skip: \"Skip\",\n  previous: \"Back\",\n  next: \"Next\",\n  restart: \"Start over\",\n  complete: \"Complete\",\n  finish: \"Finish\",\n  requiresAction: \"Complete the required action first\",\n};\n\nexport const EN_US_CHROME_COPY: ChromeCopy = {\n  dismissToast: \"Dismiss\",\n  goBack: \"Back\",\n  closePanel: \"Close\",\n  closeTab: \"Close tab\",\n  scrollRegion: \"Scrollable content\",\n  scrollToTop: \"Back to top\",\n  share: \"Share\",\n};\n\nconst EN_US_CHROMIUM_DESKTOP = [\n  \"Click the icon to the left of the site's address.\",\n  \"Open \\\"Site settings\\\".\",\n  \"Under \\\"Notifications\\\", choose \\\"Allow\\\".\",\n  \"Come back to this page and reload it.\",\n] as const;\n\nconst EN_US_CHROMIUM_ANDROID = [\n  \"Tap the icon to the left of the site's address.\",\n  \"Tap \\\"Permissions\\\".\",\n  \"Tap \\\"Notifications\\\" and choose \\\"Allow\\\".\",\n  \"Come back to this page and reload it.\",\n] as const;\n\nexport const EN_US_NOTIFICATION_UNBLOCK_COPY: NotificationUnblockCopy = {\n  ios: [\n    \"Open the iPhone's Settings.\",\n    \"Tap \\\"Notifications\\\".\",\n    \"Find this app in the list and turn on \\\"Allow Notifications\\\".\",\n  ],\n  chrome: { desktop: EN_US_CHROMIUM_DESKTOP, android: EN_US_CHROMIUM_ANDROID },\n  edge: {\n    desktop: [\n      \"Click the lock to the left of the site's address.\",\n      \"Open \\\"Permissions for this site\\\".\",\n      \"Under \\\"Notifications\\\", choose \\\"Allow\\\".\",\n      \"Come back to this page and reload it.\",\n    ],\n    android: EN_US_CHROMIUM_ANDROID,\n  },\n  firefox: {\n    desktop: [\n      \"Click the permissions icon to the left of the site's address.\",\n      \"Next to \\\"Send notifications\\\", click the X to clear the block.\",\n      \"Reload the page and turn notifications on again.\",\n    ],\n    android: [\n      \"Open the browser menu and tap \\\"Settings\\\".\",\n      \"Tap \\\"Site permissions\\\", then \\\"Notifications\\\".\",\n      \"Find this site and choose \\\"Allow\\\".\",\n      \"Come back to this page and reload it.\",\n    ],\n  },\n  opera: { desktop: EN_US_CHROMIUM_DESKTOP, android: EN_US_CHROMIUM_ANDROID },\n  safari: {\n    desktop: [\n      \"In the Safari menu, open \\\"Settings\\\".\",\n      \"Go to the \\\"Websites\\\" tab and pick \\\"Notifications\\\" in the sidebar.\",\n      \"Find this site and choose \\\"Allow\\\".\",\n      \"Come back to this page and reload it.\",\n    ],\n  },\n  samsung: {\n    android: [\n      \"Open the browser menu and tap \\\"Settings\\\".\",\n      \"Tap \\\"Sites and downloads\\\", then \\\"Notifications\\\".\",\n      \"Find this site and allow notifications.\",\n      \"Come back to this page and reload it.\",\n    ],\n  },\n  other: [\n    \"Open the browser's settings.\",\n    \"Look for site permissions, then \\\"Notifications\\\".\",\n    \"Allow notifications for this site.\",\n    \"Come back to this page and reload it.\",\n  ],\n};\n"],"mappings":";AAUO,IAAM,sBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,gBAAgB;AAClB;AAEO,IAAM,oBAAgC;AAAA,EAC3C,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,cAAc;AAAA,EACd,aAAa;AAAA,EACb,OAAO;AACT;AAEA,IAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,kCAA2D;AAAA,EACtE,KAAK;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,QAAQ,EAAE,SAAS,wBAAwB,SAAS,uBAAuB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,wBAAwB,SAAS,uBAAuB;AAAA,EAC1E,QAAQ;AAAA,IACN,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/{chunk-WFAJTO2B.js → chunk-UVFZQCC7.js}

@@ -179,6 +179,7 @@ var StackedView = ({
   phases,
   percentages,
   data,
+  copy,
   animated,
   showLabels,
   showTooltips
@@ -205,10 +206,7 @@ var StackedView = ({
     }) }),
     /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", mt: 1 }, children: [
       /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "0ms" }),
-      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", fontWeight: "bold", children: [
-        "Total: ",
-        formatTime(data.total)
-      ] })
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", fontWeight: "bold", children: copy.total(formatTime(data.total)) })
     ] })
   ] });
 };
@@ -267,6 +265,7 @@ var HorizontalView = ({
   phases,
   percentages,
   data,
+  copy,
   animated
 }) => {
   const theme = useTheme();
@@ -287,10 +286,7 @@ var HorizontalView = ({
       },
       phase.key
     )),
-    /* @__PURE__ */ jsx(Box, { sx: { mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }, children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: "bold", color: "primary", children: [
-      "Total Time: ",
-      formatTime(data.total)
-    ] }) })
+    /* @__PURE__ */ jsx(Box, { sx: { mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: "bold", color: "primary", children: copy.totalTime(formatTime(data.total)) }) })
   ] });
 };
 
@@ -301,4 +297,4 @@ export {
   StackedView,
   HorizontalView
 };
-//# sourceMappingURL=chunk-WFAJTO2B.js.map
+//# sourceMappingURL=chunk-UVFZQCC7.js.map