@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-AUSUCZYR.js

@@ -0,0 +1,294 @@
+import {
+  bounceAnimation,
+  glowAnimation,
+  pulseAnimation,
+  rippleAnimation,
+  shimmerAnimation,
+  spinAnimation
+} from "./chunk-RIEV4VXF.js";
+import {
+  DISABLED,
+  IOS_BASE_OFFSET,
+  IOS_THUMB_SHADOW,
+  IOS_TRAVEL_INSET,
+  NEUTRAL_CONTRAST,
+  RESTING_THUMB,
+  SWITCH_FOCUS_RING,
+  SWITCH_GLASS,
+  SWITCH_GLOW,
+  SWITCH_GRADIENT,
+  SWITCH_HOVER,
+  SWITCH_PULSE,
+  SWITCH_RIPPLE,
+  SWITCH_SPINNER,
+  SWITCH_TRANSITION,
+  THUMB_ELEVATION,
+  THUMB_RADIUS,
+  TRACK_LABEL,
+  TRACK_RADIUS,
+  geometryOf,
+  iosTrackShadow,
+  lookOf,
+  seconds,
+  showsTrackLabels,
+  trackColor
+} from "./chunk-D5SZXH7Q.js";
+import {
+  inkOver
+} from "./chunk-2BYKTBDL.js";
+import {
+  absoluteInk,
+  controlNeutral,
+  neutralTones
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Switch/Switch.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var neutralPalette = (theme) => controlNeutral(theme);
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return neutralPalette(theme);
+  }
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  const palette = colorMap[color] ?? theme.palette.primary;
+  const { primary } = theme.palette;
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || NEUTRAL_CONTRAST
+  };
+};
+var lengthOrPercent = (theme, value) => typeof value === "number" ? rem(theme, value) : value;
+var thumbShadow = (theme, look) => look === "ios" ? IOS_THUMB_SHADOW : theme.shadows[THUMB_ELEVATION[look]] ?? "none";
+var rippleOverlay = (palette) => ({
+  content: '""',
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  width: "100%",
+  height: "100%",
+  borderRadius: "50%",
+  background: alpha(palette.main, SWITCH_RIPPLE.alpha),
+  animation: `${rippleAnimation} ${seconds(SWITCH_RIPPLE.ms)} ease-out`,
+  transform: "translate(-50%, -50%)",
+  pointerEvents: "none"
+});
+var checkedInk = (flags, palette) => {
+  const fills = flags.gradient ? [palette.light || palette.main, palette.main, palette.dark || palette.main] : [palette.main];
+  return inkOver(fills, palette.contrastText || NEUTRAL_CONTRAST);
+};
+var checkedTrack = (theme, flags, palette) => ({
+  backgroundColor: palette.main,
+  opacity: 1,
+  border: 0,
+  position: "relative",
+  overflow: "hidden",
+  ...flags.glow && {
+    animation: `${glowAnimation(theme)} ${seconds(SWITCH_GLOW.ms)} ease-in-out infinite`,
+    boxShadow: `0 0 ${rem(theme, SWITCH_GLOW.blur)} ${alpha(palette.main, SWITCH_GLOW.alpha)}, inset 0 0 ${rem(theme, SWITCH_GLOW.insetBlur)} ${alpha(palette.main, SWITCH_GLOW.insetAlpha)}`
+  },
+  ...flags.gradient && {
+    background: `linear-gradient(${SWITCH_GRADIENT.checked.angleDeg}deg, ${palette.light || palette.main} ${SWITCH_GRADIENT.checked.stops[0]}%, ${palette.main} ${SWITCH_GRADIENT.checked.stops[1]}%, ${palette.dark || palette.main} ${SWITCH_GRADIENT.checked.stops[2]}%)`,
+    backgroundSize: "200% 100%",
+    animation: `${shimmerAnimation} ${seconds(SWITCH_GRADIENT.shimmerMs)} ease infinite`
+  }
+});
+var switchBaseSx = (theme, flags, palette, geometry, look) => {
+  const { width, thumbSize, padding } = geometry;
+  const isIos = look === "ios";
+  return {
+    padding: rem(theme, padding),
+    margin: 0,
+    transitionDuration: `${SWITCH_TRANSITION.ms}ms`,
+    transitionTimingFunction: SWITCH_TRANSITION.easing,
+    ...isIos && { transform: `translateX(${rem(theme, IOS_BASE_OFFSET)})` },
+    "&:hover": {
+      "& .MuiSwitch-thumb": {
+        transform: flags.loading ? "none" : `scale(${SWITCH_HOVER.thumbScale})`,
+        boxShadow: `${theme.shadows[SWITCH_HOVER.elevation]}, 0 0 ${rem(theme, SWITCH_HOVER.blur)} ${alpha(palette.main, SWITCH_HOVER.alpha)}`
+      },
+      ...flags.ripple && { "&::after": rippleOverlay(palette) }
+    },
+    "&.Mui-checked": {
+      // The thumb travels the track minus its own width and both paddings; the
+      // iOS look insets differently, so it gets its own distance.
+      transform: `translateX(${rem(theme, width - thumbSize - padding * 2)})`,
+      color: checkedInk(flags, palette),
+      "& .MuiSwitch-thumb": {
+        animation: flags.loading ? "none" : `${bounceAnimation} ${seconds(SWITCH_TRANSITION.ms)} ease-out`,
+        /*
+                  GLASS KEEPS ITS WASH AND GAINS AN OUTLINE (FUT-2067).
+        
+                  It used to keep the wash and nothing else, on the argument that a
+                  translucent thumb MEANS to show the track through itself, so painting
+                  it opaque would be repainting the variant rather than fixing it. The
+                  first half of that is still true and this still does not touch the
+                  fill. The second half was doing more work than the number supports:
+                  `SWITCH_GLASS.thumbAlpha` is **0.9**, so nine parts in ten of the knob
+                  are `background.paper` and one part is the track. On a pale brand that
+                  composites to within about 1.1:1 of the bar it is sitting on — the
+                  same "reads as OFF while it is on" state FUT-1924 exists for, in the
+                  one variant whose own argument points AT the tenant-controlled
+                  surface.
+        
+                  So the separation moves to the EDGE, which is the thing a glass
+                  surface is allowed to have. The colour is {@link checkedInk} — the
+                  same derivation the opaque thumb gets, so there is one rule for "what
+                  reads on this track" rather than two — at full strength rather than
+                  the `divider` hairline at `borderAlpha` 0.2 the resting thumb wears,
+                  which on a pale track is not an outline at all.
+        
+                  Checked only. The resting track is `action.disabled` washed over the
+                  page, which no tenant chooses, so the quiet hairline stays right
+                  there — the same split {@link checkedInk}'s own docblock makes.
+                */
+        ...flags.glass ? { borderColor: checkedInk(flags, palette) } : { backgroundColor: checkedInk(flags, palette) }
+      },
+      "& + .MuiSwitch-track": checkedTrack(theme, flags, palette),
+      "&.Mui-disabled + .MuiSwitch-track": { opacity: DISABLED.checkedTrackOpacity },
+      ...isIos && { transform: `translateX(${rem(theme, width - thumbSize - IOS_TRAVEL_INSET)})` }
+    },
+    "&.Mui-focusVisible .MuiSwitch-thumb": {
+      color: palette.main,
+      border: `${rem(theme, SWITCH_FOCUS_RING.width)} solid ${alpha(palette.main, SWITCH_FOCUS_RING.alpha)}`
+    },
+    "&.Mui-disabled .MuiSwitch-thumb": { color: neutralTones(theme).surface },
+    "&.Mui-disabled + .MuiSwitch-track": { opacity: DISABLED.trackOpacity }
+  };
+};
+var thumbSx = (theme, flags, palette, thumbSize, look) => ({
+  width: rem(theme, thumbSize),
+  height: rem(theme, thumbSize),
+  borderRadius: lengthOrPercent(theme, THUMB_RADIUS[look](thumbSize)),
+  // `.Mui-checked` above replaces this for the brand-filled track; see
+  // {@link RESTING_THUMB} for why the resting one stays white.
+  backgroundColor: RESTING_THUMB,
+  boxShadow: thumbShadow(theme, look),
+  transition: `all ${seconds(SWITCH_TRANSITION.ms)} ${SWITCH_TRANSITION.easing}`,
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  ...flags.glass && {
+    backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.thumbAlpha),
+    backdropFilter: `blur(${rem(theme, SWITCH_GLASS.thumbBlur)})`,
+    border: `1px solid ${alpha(theme.palette.divider, SWITCH_GLASS.borderAlpha)}`
+  },
+  ...flags.pulse && { animation: `${pulseAnimation} ${seconds(SWITCH_PULSE.ms)} ease-in-out infinite` },
+  ...flags.loading && {
+    // A spinner drawn inside the thumb rather than over the whole control.
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      width: rem(theme, thumbSize * SWITCH_SPINNER.sizeRatio),
+      height: rem(theme, thumbSize * SWITCH_SPINNER.sizeRatio),
+      border: `${rem(theme, SWITCH_SPINNER.borderWidth)} solid ${palette.main}`,
+      borderTop: `${rem(theme, SWITCH_SPINNER.borderWidth)} solid transparent`,
+      borderRadius: "50%",
+      animation: `${spinAnimation} ${seconds(SWITCH_SPINNER.ms)} linear infinite`
+    }
+  },
+  ...look === "material" && {
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      borderRadius: "inherit",
+      backgroundColor: palette.main,
+      opacity: 0,
+      transform: "scale(0)",
+      transition: "all 0.3s ease"
+    }
+  }
+});
+var trackLabels = (theme, flags, palette, onText, offText) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  paddingLeft: theme.spacing(TRACK_LABEL.insetUnits),
+  paddingRight: theme.spacing(TRACK_LABEL.insetUnits),
+  fontSize: rem(theme, TRACK_LABEL.fontSize),
+  fontWeight: TRACK_LABEL.fontWeight,
+  color: theme.palette.text.secondary,
+  "&::before, &::after": {
+    content: '""',
+    position: "absolute",
+    fontSize: rem(theme, TRACK_LABEL.fontSize),
+    fontWeight: TRACK_LABEL.fontWeight,
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 1
+  },
+  ...onText && {
+    "&::before": {
+      content: `"${onText}"`,
+      left: theme.spacing(TRACK_LABEL.insetUnits),
+      // The `on` word sits at the end the thumb travels TO, which is the
+      // filled half of the track once checked.
+      color: checkedInk(flags, palette)
+    }
+  },
+  ...offText && {
+    "&::after": {
+      content: `"${offText}"`,
+      right: theme.spacing(TRACK_LABEL.insetUnits),
+      color: theme.palette.text.secondary
+    }
+  }
+});
+var trackSx = (theme, flags, palette, height, look) => {
+  const { glass, gradient, onText, offText, customVariant } = flags;
+  return {
+    borderRadius: rem(theme, TRACK_RADIUS[look](height)),
+    backgroundColor: trackColor(
+      { black: absoluteInk(theme).black, disabled: theme.palette.action.disabled },
+      look
+    ),
+    opacity: 1,
+    transition: `all ${seconds(SWITCH_TRANSITION.ms)} ${SWITCH_TRANSITION.easing}`,
+    position: "relative",
+    boxShadow: look === "ios" ? iosTrackShadow() : "none",
+    ...glass && {
+      backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.trackAlpha),
+      backdropFilter: `blur(${rem(theme, SWITCH_GLASS.trackBlur)})`,
+      border: `1px solid ${alpha(theme.palette.divider, SWITCH_GLASS.borderAlpha)}`
+    },
+    ...gradient && !glass && {
+      background: `linear-gradient(${SWITCH_GRADIENT.resting.angleDeg}deg, ${alpha(palette.light || palette.main, SWITCH_GRADIENT.resting.lightAlpha)}, ${alpha(palette.main, SWITCH_GRADIENT.resting.mainAlpha)})`
+    },
+    ...showsTrackLabels(customVariant, onText, offText) && trackLabels(theme, flags, palette, onText, offText)
+  };
+};
+var onTrackInk = (theme, flags) => checkedInk(flags, getColorFromTheme(theme, flags.customColor ?? "primary"));
+var switchSx = (theme, flags) => {
+  const palette = getColorFromTheme(theme, flags.customColor ?? "primary");
+  const geometry = geometryOf(flags.customSize, flags.trackWidth, flags.trackHeight);
+  const look = lookOf(flags.customVariant);
+  return {
+    width: rem(theme, geometry.width),
+    height: rem(theme, geometry.height),
+    padding: 0,
+    overflow: "visible",
+    "& .MuiSwitch-switchBase": switchBaseSx(theme, flags, palette, geometry, look),
+    "& .MuiSwitch-thumb": thumbSx(theme, flags, palette, geometry.thumbSize, look),
+    "& .MuiSwitch-track": trackSx(theme, flags, palette, geometry.height, look)
+  };
+};
+
+export {
+  onTrackInk,
+  switchSx
+};
+//# sourceMappingURL=chunk-AUSUCZYR.js.map

package/dist/chunk-AUSUCZYR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Switch/Switch.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport {\n  bounceAnimation,\n  glowAnimation,\n  pulseAnimation,\n  rippleAnimation,\n  shimmerAnimation,\n  spinAnimation,\n} from './Switch.animations';\nimport {\n  DISABLED,\n  IOS_BASE_OFFSET,\n  IOS_THUMB_SHADOW,\n  IOS_TRAVEL_INSET,\n  SWITCH_GLASS,\n  SWITCH_GLOW,\n  NEUTRAL_CONTRAST,\n  SWITCH_FOCUS_RING,\n  SWITCH_GRADIENT,\n  SWITCH_HOVER,\n  SWITCH_PULSE,\n  SWITCH_RIPPLE,\n  SWITCH_SPINNER,\n  SWITCH_TRANSITION,\n  RESTING_THUMB,\n  THUMB_ELEVATION,\n  THUMB_RADIUS,\n  TRACK_LABEL,\n  TRACK_RADIUS,\n  geometryOf,\n  iosTrackShadow,\n  lookOf,\n  seconds,\n  showsTrackLabels,\n  trackColor,\n  type SwitchGeometry,\n  type SwitchLook,\n} from './Switch.metrics';\nimport type { SwitchVariant } from './Switch.base';\n\nimport { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\nimport { inkOver } from '../../../tokens/theme';\nimport type { ColorValue, SizeValue } from '../../../tokens/vocabulary';\n\n// Every number below comes from `./Switch.metrics`, which the native renderer\n// reads too — see its header. The palette and the shadows stay on the MUI\n// theme so a host that re-themes either keeps moving the web.\ninterface ColorPalette {\n  main: string;\n  dark?: string;\n  light?: string;\n  contrastText?: string;\n}\n\n/** `neutral` is not a MUI palette entry, so it is the controls' neutral tone. */\nconst neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);\n\n/**\n * Resolves a colour name to a full palette, filling any step the theme leaves\n * out from `main` and then from the primary palette. `danger` is this\n * component's name for the error palette; the rest map straight through.\n */\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') {\n    return neutralPalette(theme);\n  }\n\n  const colorMap: Record<string, ColorPalette | undefined> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n  const palette = colorMap[color] ?? theme.palette.primary;\n  const { primary } = theme.palette;\n\n  return {\n    main: palette.main || primary.main,\n    dark: palette.dark || palette.main || primary.dark,\n    light: palette.light || palette.main || primary.light,\n    contrastText: palette.contrastText || NEUTRAL_CONTRAST,\n  };\n};\n\nexport interface SwitchFlags {\n  customVariant?: SwitchVariant;\n  customColor?: ColorValue;\n  customSize?: SizeValue;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n  trackWidth?: number;\n  trackHeight?: number;\n  onText?: string;\n  offText?: string;\n  loading?: boolean;\n  ripple?: boolean;\n  pulse?: boolean;\n}\n\n/** A metrics radius on the web: its px through the type scale, a percentage as-is. */\nconst lengthOrPercent = (theme: Theme, value: number | string): string =>\n  typeof value === 'number' ? rem(theme, value) : value;\n\nconst thumbShadow = (theme: Theme, look: SwitchLook): string =>\n  look === 'ios' ? IOS_THUMB_SHADOW : (theme.shadows[THUMB_ELEVATION[look]] ?? 'none');\n\n/** The ripple that expands from the thumb on hover. */\nconst rippleOverlay = (palette: ColorPalette): CSSObject => ({\n  content: '\"\"',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  width: '100%',\n  height: '100%',\n  borderRadius: '50%',\n  background: alpha(palette.main, SWITCH_RIPPLE.alpha),\n  animation: `${rippleAnimation} ${seconds(SWITCH_RIPPLE.ms)} ease-out`,\n  transform: 'translate(-50%, -50%)',\n  pointerEvents: 'none',\n});\n\n/**\n * The ink on the CHECKED track — the thumb, the `on` wording and any on-icon\n * (FUT-1924).\n *\n * All three stated `#fff`, and the checked track is `palette.main`: the one\n * surface in this component the TENANT picks. A store with a pale brand got a\n * white thumb on a pale green bar, which does not read as a knob at all — the\n * switch looks OFF while it is on, so this is a state a user misreads rather\n * than a colour they dislike.\n *\n * The `gradient` flag paints the track `light → main → dark`, so the fills the\n * thumb travels over are handed over together and {@link inkOver} takes the\n * worst of them.\n *\n * The RESTING track is not here on purpose: it is `theme.palette.action.disabled`\n * washed over the page, which no tenant chooses, and a white thumb on it is the\n * conventional look in both modes.\n */\nconst checkedInk = (flags: SwitchFlags, palette: ColorPalette): string => {\n  const fills = flags.gradient\n    ? [palette.light || palette.main, palette.main, palette.dark || palette.main]\n    : [palette.main];\n\n  return inkOver(fills, palette.contrastText || NEUTRAL_CONTRAST);\n};\n\n/** The checked track: the filled bar behind the thumb once the switch is on. */\nconst checkedTrack = (theme: Theme, flags: SwitchFlags, palette: ColorPalette): CSSObject => ({\n  backgroundColor: palette.main,\n  opacity: 1,\n  border: 0,\n  position: 'relative',\n  overflow: 'hidden',\n  ...(flags.glow && {\n    animation: `${glowAnimation(theme)} ${seconds(SWITCH_GLOW.ms)} ease-in-out infinite`,\n    boxShadow: `0 0 ${rem(theme, SWITCH_GLOW.blur)} ${alpha(palette.main, SWITCH_GLOW.alpha)}, inset 0 0 ${rem(theme, SWITCH_GLOW.insetBlur)} ${alpha(palette.main, SWITCH_GLOW.insetAlpha)}`,\n  }),\n  ...(flags.gradient && {\n    background: `linear-gradient(${SWITCH_GRADIENT.checked.angleDeg}deg, ${palette.light || palette.main} ${SWITCH_GRADIENT.checked.stops[0]}%, ${palette.main} ${SWITCH_GRADIENT.checked.stops[1]}%, ${palette.dark || palette.main} ${SWITCH_GRADIENT.checked.stops[2]}%)`,\n    backgroundSize: '200% 100%',\n    animation: `${shimmerAnimation} ${seconds(SWITCH_GRADIENT.shimmerMs)} ease infinite`,\n  }),\n});\n\nconst switchBaseSx = (\n  theme: Theme,\n  flags: SwitchFlags,\n  palette: ColorPalette,\n  geometry: SwitchGeometry,\n  look: SwitchLook,\n): CSSObject => {\n  const { width, thumbSize, padding } = geometry;\n  const isIos = look === 'ios';\n\n  return {\n    padding: rem(theme, padding),\n    margin: 0,\n    transitionDuration: `${SWITCH_TRANSITION.ms}ms`,\n    transitionTimingFunction: SWITCH_TRANSITION.easing,\n    ...(isIos && { transform: `translateX(${rem(theme, IOS_BASE_OFFSET)})` }),\n    '&:hover': {\n      '& .MuiSwitch-thumb': {\n        transform: flags.loading ? 'none' : `scale(${SWITCH_HOVER.thumbScale})`,\n        boxShadow: `${theme.shadows[SWITCH_HOVER.elevation]}, 0 0 ${rem(theme, SWITCH_HOVER.blur)} ${alpha(palette.main, SWITCH_HOVER.alpha)}`,\n      },\n      ...(flags.ripple && { '&::after': rippleOverlay(palette) }),\n    },\n    '&.Mui-checked': {\n      // The thumb travels the track minus its own width and both paddings; the\n      // iOS look insets differently, so it gets its own distance.\n      transform: `translateX(${rem(theme, width - thumbSize - padding * 2)})`,\n      color: checkedInk(flags, palette),\n      '& .MuiSwitch-thumb': {\n        animation: flags.loading ? 'none' : `${bounceAnimation} ${seconds(SWITCH_TRANSITION.ms)} ease-out`,\n        /*\n          GLASS KEEPS ITS WASH AND GAINS AN OUTLINE (FUT-2067).\n\n          It used to keep the wash and nothing else, on the argument that a\n          translucent thumb MEANS to show the track through itself, so painting\n          it opaque would be repainting the variant rather than fixing it. The\n          first half of that is still true and this still does not touch the\n          fill. The second half was doing more work than the number supports:\n          `SWITCH_GLASS.thumbAlpha` is **0.9**, so nine parts in ten of the knob\n          are `background.paper` and one part is the track. On a pale brand that\n          composites to within about 1.1:1 of the bar it is sitting on — the\n          same \"reads as OFF while it is on\" state FUT-1924 exists for, in the\n          one variant whose own argument points AT the tenant-controlled\n          surface.\n\n          So the separation moves to the EDGE, which is the thing a glass\n          surface is allowed to have. The colour is {@link checkedInk} — the\n          same derivation the opaque thumb gets, so there is one rule for \"what\n          reads on this track\" rather than two — at full strength rather than\n          the `divider` hairline at `borderAlpha` 0.2 the resting thumb wears,\n          which on a pale track is not an outline at all.\n\n          Checked only. The resting track is `action.disabled` washed over the\n          page, which no tenant chooses, so the quiet hairline stays right\n          there — the same split {@link checkedInk}'s own docblock makes.\n        */\n        ...(flags.glass\n          ? { borderColor: checkedInk(flags, palette) }\n          : { backgroundColor: checkedInk(flags, palette) }),\n      },\n      '& + .MuiSwitch-track': checkedTrack(theme, flags, palette),\n      '&.Mui-disabled + .MuiSwitch-track': { opacity: DISABLED.checkedTrackOpacity },\n      ...(isIos && { transform: `translateX(${rem(theme, width - thumbSize - IOS_TRAVEL_INSET)})` }),\n    },\n    '&.Mui-focusVisible .MuiSwitch-thumb': {\n      color: palette.main,\n      border: `${rem(theme, SWITCH_FOCUS_RING.width)} solid ${alpha(palette.main, SWITCH_FOCUS_RING.alpha)}`,\n    },\n    '&.Mui-disabled .MuiSwitch-thumb': { color: neutralTones(theme).surface },\n    '&.Mui-disabled + .MuiSwitch-track': { opacity: DISABLED.trackOpacity },\n  };\n};\n\nconst thumbSx = (\n  theme: Theme,\n  flags: SwitchFlags,\n  palette: ColorPalette,\n  thumbSize: number,\n  look: SwitchLook,\n): CSSObject => ({\n  width: rem(theme, thumbSize),\n  height: rem(theme, thumbSize),\n  borderRadius: lengthOrPercent(theme, THUMB_RADIUS[look](thumbSize)),\n  // `.Mui-checked` above replaces this for the brand-filled track; see\n  // {@link RESTING_THUMB} for why the resting one stays white.\n  backgroundColor: RESTING_THUMB,\n  boxShadow: thumbShadow(theme, look),\n  transition: `all ${seconds(SWITCH_TRANSITION.ms)} ${SWITCH_TRANSITION.easing}`,\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  ...(flags.glass && {\n    backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.thumbAlpha),\n    backdropFilter: `blur(${rem(theme, SWITCH_GLASS.thumbBlur)})`,\n    border: `1px solid ${alpha(theme.palette.divider, SWITCH_GLASS.borderAlpha)}`,\n  }),\n  ...(flags.pulse && { animation: `${pulseAnimation} ${seconds(SWITCH_PULSE.ms)} ease-in-out infinite` }),\n  ...(flags.loading && {\n    // A spinner drawn inside the thumb rather than over the whole control.\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      width: rem(theme, thumbSize * SWITCH_SPINNER.sizeRatio),\n      height: rem(theme, thumbSize * SWITCH_SPINNER.sizeRatio),\n      border: `${rem(theme, SWITCH_SPINNER.borderWidth)} solid ${palette.main}`,\n      borderTop: `${rem(theme, SWITCH_SPINNER.borderWidth)} solid transparent`,\n      borderRadius: '50%',\n      animation: `${spinAnimation} ${seconds(SWITCH_SPINNER.ms)} linear infinite`,\n    },\n  }),\n  ...(look === 'material' && {\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      borderRadius: 'inherit',\n      backgroundColor: palette.main,\n      opacity: 0,\n      transform: 'scale(0)',\n      transition: 'all 0.3s ease',\n    },\n  }),\n});\n\n/** The on/off wording the `label` variant prints inside the track. */\nconst trackLabels = (\n  theme: Theme,\n  flags: SwitchFlags,\n  palette: ColorPalette,\n  onText?: string,\n  offText?: string,\n): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  paddingLeft: theme.spacing(TRACK_LABEL.insetUnits),\n  paddingRight: theme.spacing(TRACK_LABEL.insetUnits),\n  fontSize: rem(theme, TRACK_LABEL.fontSize),\n  fontWeight: TRACK_LABEL.fontWeight,\n  color: theme.palette.text.secondary,\n  '&::before, &::after': {\n    content: '\"\"',\n    position: 'absolute',\n    fontSize: rem(theme, TRACK_LABEL.fontSize),\n    fontWeight: TRACK_LABEL.fontWeight,\n    top: '50%',\n    transform: 'translateY(-50%)',\n    zIndex: 1,\n  },\n  ...(onText && {\n    '&::before': {\n      content: `\"${onText}\"`,\n      left: theme.spacing(TRACK_LABEL.insetUnits),\n      // The `on` word sits at the end the thumb travels TO, which is the\n      // filled half of the track once checked.\n      color: checkedInk(flags, palette),\n    },\n  }),\n  ...(offText && {\n    '&::after': {\n      content: `\"${offText}\"`,\n      right: theme.spacing(TRACK_LABEL.insetUnits),\n      color: theme.palette.text.secondary,\n    },\n  }),\n});\n\nconst trackSx = (\n  theme: Theme,\n  flags: SwitchFlags,\n  palette: ColorPalette,\n  height: number,\n  look: SwitchLook,\n): CSSObject => {\n  const { glass, gradient, onText, offText, customVariant } = flags;\n\n  return {\n    borderRadius: rem(theme, TRACK_RADIUS[look](height)),\n    backgroundColor: trackColor(\n      { black: absoluteInk(theme).black, disabled: theme.palette.action.disabled },\n      look,\n    ),\n    opacity: 1,\n    transition: `all ${seconds(SWITCH_TRANSITION.ms)} ${SWITCH_TRANSITION.easing}`,\n    position: 'relative',\n    boxShadow: look === 'ios' ? iosTrackShadow() : 'none',\n    ...(glass && {\n      backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.trackAlpha),\n      backdropFilter: `blur(${rem(theme, SWITCH_GLASS.trackBlur)})`,\n      border: `1px solid ${alpha(theme.palette.divider, SWITCH_GLASS.borderAlpha)}`,\n    }),\n    ...(gradient &&\n      !glass && {\n        background: `linear-gradient(${SWITCH_GRADIENT.resting.angleDeg}deg, ${alpha(palette.light || palette.main, SWITCH_GRADIENT.resting.lightAlpha)}, ${alpha(palette.main, SWITCH_GRADIENT.resting.mainAlpha)})`,\n      }),\n    ...(showsTrackLabels(customVariant, onText, offText) &&\n      trackLabels(theme, flags, palette, onText, offText)),\n  };\n};\n\n/**\n * The same checked-track ink, for the two ICONS the control overlays on the\n * track — which are drawn as components rather than styles, so they cannot\n * reach {@link checkedInk} directly.\n */\nexport const onTrackInk = (theme: Theme, flags: SwitchFlags): string =>\n  checkedInk(flags, getColorFromTheme(theme, flags.customColor ?? 'primary'));\n\nexport const switchSx = (theme: Theme, flags: SwitchFlags): CSSObject => {\n  const palette = getColorFromTheme(theme, flags.customColor ?? 'primary');\n  const geometry = geometryOf(flags.customSize, flags.trackWidth, flags.trackHeight);\n  const look = lookOf(flags.customVariant);\n\n  return {\n    width: rem(theme, geometry.width),\n    height: rem(theme, geometry.height),\n    padding: 0,\n    overflow: 'visible',\n    '& .MuiSwitch-switchBase': switchBaseSx(theme, flags, palette, geometry, look),\n    '& .MuiSwitch-thumb': thumbSx(theme, flags, palette, geometry.thumbSize, look),\n    '& .MuiSwitch-track': trackSx(theme, flags, palette, geometry.height, look),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-AYLEZM6T.js

@@ -0,0 +1,187 @@
+import {
+  MoreGroup,
+  fieldClearing
+} from "./chunk-7EIOXZWL.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-2EAAWOZ2.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-more-filters.tsx
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import FilterAltRoundedIcon from "@mui/icons-material/FilterAltRounded";
+import Popover from "@mui/material/Popover/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MoreTrigger({
+  count,
+  appliedCount,
+  compact,
+  onOpen,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const applied = appliedCount > 0;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      color: "neutral",
+      onClick: (event) => onOpen(event.currentTarget),
+      dataTestId: `${testIdPrefix}-more-filters`,
+      "aria-label": applied ? copy.filters.moreFiltersApplied(count, appliedCount) : copy.filters.moreFilters(count),
+      children: /* @__PURE__ */ jsxs(
+        default2,
+        {
+          component: "span",
+          sx: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 0.5,
+            color: applied ? "primary.main" : void 0
+          },
+          children: [
+            /* @__PURE__ */ jsx(FilterAltRoundedIcon, { fontSize: "small" }),
+            !compact && /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: { xs: "none", sm: "inline" } }, children: copy.filters.moreTriggerLabel }),
+            /* @__PURE__ */ jsx(
+              default2,
+              {
+                component: "span",
+                "data-testid": `${testIdPrefix}-more-badge`,
+                sx: {
+                  px: 0.75,
+                  borderRadius: 5,
+                  bgcolor: applied ? "primary.main" : "action.selected",
+                  color: applied ? "primary.contrastText" : void 0,
+                  fontSize: sxRem(11),
+                  fontWeight: applied ? 700 : void 0
+                },
+                children: applied ? appliedCount : count
+              }
+            ),
+            !compact && /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" })
+          ]
+        }
+      )
+    }
+  );
+}
+function MoreHeading() {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        px: 1.5,
+        py: 1,
+        borderBottom: 1,
+        borderColor: "divider"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { textTransform: "uppercase", letterSpacing: sxRem(0.5), color: "text.disabled" }, children: copy.filters.moreHeading }) }),
+        /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { ml: "auto", color: "text.disabled" }, children: copy.filters.overflowNote }) })
+      ]
+    }
+  );
+}
+function MoreFooter({
+  onClearAll,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(default2, { sx: { px: 1.5, py: 1, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "button",
+      type: "button",
+      onClick: onClearAll,
+      "data-testid": `${testIdPrefix}-more-clear-all`,
+      sx: {
+        width: "100%",
+        border: 0,
+        p: 0,
+        bgcolor: "transparent",
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: sxRem(13),
+        textAlign: "left",
+        color: "primary.main",
+        "&:hover": { textDecoration: "underline" }
+      },
+      children: copy.filters.clearAll
+    }
+  ) });
+}
+function MoreFilters({
+  fields,
+  onOpenChange,
+  onClearAll,
+  anyApplied,
+  compact = false,
+  ...rest
+}) {
+  const [anchor, setAnchor] = useState(null);
+  if (fields.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      MoreTrigger,
+      {
+        count: fields.length,
+        appliedCount: fields.filter(
+          (field) => fieldClearing({
+            field,
+            pills: rest.pills,
+            ranges: rest.ranges,
+            onTogglePill: rest.onTogglePill,
+            onChangeRange: rest.onChangeRange
+          }).applied
+        ).length,
+        compact,
+        onOpen: (element) => {
+          setAnchor(element);
+          onOpenChange?.(true);
+        },
+        testIdPrefix: rest.testIdPrefix
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: Boolean(anchor),
+        anchorEl: anchor,
+        onClose: () => {
+          setAnchor(null);
+          onOpenChange?.(false);
+        },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        slotProps: { paper: { sx: { width: sxRem(300), maxWidth: (theme) => `calc(100vw - ${rem(theme, 32)})` } } },
+        children: /* @__PURE__ */ jsxs(default2, { "data-testid": `${rest.testIdPrefix}-more-panel`, children: [
+          /* @__PURE__ */ jsx(MoreHeading, {}),
+          /* @__PURE__ */ jsx(default2, { sx: { maxHeight: sxRem(320), overflowY: "auto", overflowX: "hidden", p: 1.5, minWidth: 0 }, children: fields.map((field) => /* @__PURE__ */ jsx(MoreGroup, { field, ...rest }, field.id)) }),
+          anyApplied && /* @__PURE__ */ jsx(MoreFooter, { onClearAll, testIdPrefix: rest.testIdPrefix })
+        ] })
+      }
+    )
+  ] });
+}
+
+export {
+  MoreFilters
+};
+//# sourceMappingURL=chunk-AYLEZM6T.js.map

package/dist/chunk-AYLEZM6T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-more-filters.tsx"],"sourcesContent":["\"use client\";\n\nimport KeyboardArrowDownRoundedIcon from \"@mui/icons-material/KeyboardArrowDownRounded\";\n// A FUNNEL, not the tune sliders this used to share with \"Exibir\". The two\n// sit a few px apart on the same bar and do unrelated things — one narrows\n// WHICH rows you see, the other changes HOW they are shown — and with one\n// glyph between them the bar offered the operator no way to tell which was\n// which. On a phone, where both are icon-only, they were indistinguishable.\nimport FilterAltRoundedIcon from \"@mui/icons-material/FilterAltRounded\";\nimport Popover from \"@mui/material/Popover/index.js\";\nimport type { Theme } from \"@mui/material/styles/index.js\";\nimport { useState } from \"react\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Button } from \"../../form/Button\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport { fieldClearing, MoreGroup, type MoreFieldProps } from \"./data-views-more-fields\";\nimport type { OverflowField } from \"./data-views-overflow\";\nimport { rem, sxRem } from \"../../../tokens/relative\";\n\n/**\n * \"MAIS\" — the filter overflow: its trigger, its panel and its footer. What\n * goes INSIDE it is `data-views-more-fields`.\n *\n * It holds the fields that had no room on the toolbar. An applied filter is\n * ranked ahead of an idle one for the visible slots but is NOT exempt (see\n * `useFilterOverflow`), so an applied filter can be in here — on a phone, most\n * of them are. That is why the trigger changes tone and counts the applied\n * ones: a filter you cannot see is a filter you forget you set, and the badge\n * is what stops that.\n */\n\ninterface MoreFiltersProps<T extends Record<string, unknown>> extends MoreFieldProps {\n  fields: OverflowField<T>[];\n}\n\n/**\n * The trigger, badged with how many fields had no room on the bar — and told\n * apart when some of them are APPLIED.\n *\n * An applied filter can land in here now (it is ranked first, not exempt), so\n * this button is the only thing on screen still saying it exists. A neutral\n * badge reading \"3\" would make \"three filters you have not used\" and \"three\n * filters narrowing this list\" look identical, which is the whole failure the\n * old exemption was written to avoid. So an overflow holding applied filters\n * takes the applied tone and counts them in its own badge.\n */\nfunction MoreTrigger({\n  count,\n  appliedCount,\n  compact,\n  onOpen,\n  testIdPrefix,\n}: {\n  count: number;\n  appliedCount: number;\n  /** Icon only — the same rung that strips Exibir/Exportar. */\n  compact: boolean;\n  onOpen: (anchor: HTMLElement) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const applied = appliedCount > 0;\n  return (\n    <Button\n      variant=\"outline\"\n      size=\"sm\"\n      color=\"neutral\"\n      onClick={(event) => onOpen(event.currentTarget as HTMLElement)}\n      dataTestId={`${testIdPrefix}-more-filters`}\n      aria-label={\n        applied\n          ? copy.filters.moreFiltersApplied(count, appliedCount)\n          : copy.filters.moreFilters(count)\n      }\n    >\n      <Box\n        component=\"span\"\n        sx={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          gap: 0.5,\n          color: applied ? \"primary.main\" : undefined,\n        }}\n      >\n        <FilterAltRoundedIcon fontSize=\"small\" />\n        {!compact && (\n          <Box component=\"span\" sx={{ display: { xs: \"none\", sm: \"inline\" } }}>\n            {copy.filters.moreTriggerLabel}\n          </Box>\n        )}\n        <Box\n          component=\"span\"\n          data-testid={`${testIdPrefix}-more-badge`}\n          sx={{\n            px: 0.75,\n            borderRadius: 5,\n            bgcolor: applied ? \"primary.main\" : \"action.selected\",\n            color: applied ? \"primary.contrastText\" : undefined,\n            fontSize: sxRem(11),\n            fontWeight: applied ? 700 : undefined,\n          }}\n        >\n          {applied ? appliedCount : count}\n        </Box>\n        {!compact && <KeyboardArrowDownRoundedIcon fontSize=\"small\" />}\n      </Box>\n    </Button>\n  );\n}\n\n/** The panel's heading: what these are, and why they are in here. */\nfunction MoreHeading(): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 1,\n        px: 1.5,\n        py: 1,\n        borderBottom: 1,\n        borderColor: \"divider\",\n      }}\n    >\n      <Text variant=\"caption\" as=\"span\">\n        <Box component=\"span\" sx={{ textTransform: \"uppercase\", letterSpacing: sxRem(0.5), color: \"text.disabled\" }}>\n          {copy.filters.moreHeading}\n        </Box>\n      </Text>\n      <Text variant=\"caption\" as=\"span\">\n        <Box component=\"span\" sx={{ ml: \"auto\", color: \"text.disabled\" }}>\n          {copy.filters.overflowNote}\n        </Box>\n      </Text>\n    </Box>\n  );\n}\n\n/**\n * The panel's own way back to the unfiltered list.\n *\n * The bar's \"Limpar\" is the primary one, but it is a control like any other\n * and the ladder can take its label — and on the narrowest rungs this panel is\n * where most of the fields ended up anyway. Clearing everything from inside it\n * saves closing it to reach a button three pixels wide.\n */\nfunction MoreFooter({\n  onClearAll,\n  testIdPrefix,\n}: {\n  onClearAll: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box sx={{ px: 1.5, py: 1, borderTop: 1, borderColor: \"divider\" }}>\n      <Box\n        component=\"button\"\n        type=\"button\"\n        onClick={onClearAll}\n        data-testid={`${testIdPrefix}-more-clear-all`}\n        sx={{\n          width: \"100%\",\n          border: 0,\n          p: 0,\n          bgcolor: \"transparent\",\n          cursor: \"pointer\",\n          font: \"inherit\",\n          fontSize: sxRem(13),\n          textAlign: \"left\",\n          color: \"primary.main\",\n          \"&:hover\": { textDecoration: \"underline\" },\n        }}\n      >\n        {copy.filters.clearAll}\n      </Box>\n    </Box>\n  );\n}\n\n/** The overflow trigger + panel. Renders nothing when everything fits. */\nexport function MoreFilters<T extends Record<string, unknown>>({\n  fields,\n  onOpenChange,\n  onClearAll,\n  anyApplied,\n  compact = false,\n  ...rest\n}: MoreFiltersProps<T> & {\n  /** Icon only — the same rung that strips Exibir/Exportar. */\n  compact?: boolean;\n  /** Clears every filter, not just the ones in here. */\n  onClearAll: () => void;\n  /** Whether anything is applied anywhere — the footer is pointless otherwise. */\n  anyApplied: boolean;\n  /**\n   * So the shell can FREEZE the measured split while this panel is open.\n   *\n   * Applying a filter in here makes its field active, and an active field\n   * takes an inline slot first — so the field being edited was promoted OUT of\n   * this panel mid-keystroke, taking the focused input with it. Typing \"12\"\n   * got as far as \"1\" and then had nowhere to go.\n   */\n  onOpenChange?: (open: boolean) => void;\n}): React.JSX.Element | null {\n  const [anchor, setAnchor] = useState<HTMLElement | null>(null);\n  if (fields.length === 0) return null;\n  return (\n    <>\n      <MoreTrigger\n        count={fields.length}\n        appliedCount={\n          fields.filter(\n            (field) =>\n              fieldClearing({\n                field,\n                pills: rest.pills,\n                ranges: rest.ranges,\n                onTogglePill: rest.onTogglePill,\n                onChangeRange: rest.onChangeRange,\n              }).applied,\n          ).length\n        }\n        compact={compact}\n        onOpen={(element) => {\n          setAnchor(element);\n          onOpenChange?.(true);\n        }}\n        testIdPrefix={rest.testIdPrefix}\n      />\n      <Popover\n        open={Boolean(anchor)}\n        anchorEl={anchor}\n        onClose={() => {\n          setAnchor(null);\n          onOpenChange?.(false);\n        }}\n        anchorOrigin={{ vertical: \"bottom\", horizontal: \"left\" }}\n        slotProps={{ paper: { sx: { width: sxRem(300), maxWidth: (theme: Theme) => `calc(100vw - ${rem(theme, 32)})` } } }}\n      >\n        <Box data-testid={`${rest.testIdPrefix}-more-panel`}>\n          <MoreHeading />\n          {/* overflowX hidden, not auto: this panel is a fixed 300px and its\n              contents are told to shrink into it. A horizontal scrollbar here\n              means something refused to, which is a bug to fix rather than a\n              scrollbar to live with. */}\n          <Box sx={{ maxHeight: sxRem(320), overflowY: \"auto\", overflowX: \"hidden\", p: 1.5, minWidth: 0 }}>\n            {fields.map((field) => (\n              <MoreGroup key={field.id} field={field} {...rest} />\n            ))}\n          </Box>\n          {anyApplied && (\n            <MoreFooter onClearAll={onClearAll} testIdPrefix={rest.testIdPrefix} />\n          )}\n        </Box>\n      </Popover>\n    </>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-BAFDSAWY.js

@@ -0,0 +1,86 @@
+import {
+  thumbnailStripSx
+} from "./chunk-3KA6MYIR.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
+}) => /* @__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 || `Thumbnail ${index + 1}`,
+            style: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        )
+      },
+      `${item.src}-${index}`
+    ))
+  }
+);
+
+export {
+  LightboxThumbnails
+};
+//# sourceMappingURL=chunk-BAFDSAWY.js.map

package/dist/chunk-BAFDSAWY.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 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  <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 || `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,OAAO,SAAS;AA0BZ;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,MACE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,GAAG;AAAA,MACH,UAAU;AAAA,MACV,QAAQ,MAAM,EAAE;AAAA,MAChB,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,MAAM,MAAM,OAAO;AAAA,UAC1B,QAAQ,MAAM,MAAM,QAAQ;AAAA,UAC5B,QAAQ;AAAA,UACR,QAAQ,CAAC,UAAiB,MAAM,OAAO,iBAAiB,QAAQ,QAAQ,KAAK,IAAI,aAAa;AAAA,UAC9F,cAAc;AAAA,UACd,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,WAAW,EAAE,QAAQ,CAAC,UAAiB,MAAM,OAAO,MAAM,OAAO,GAAG,CAAC,EAAE;AAAA,QACzE;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":[]}