@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-4GKDO4YK.js

@@ -1,325 +0,0 @@
-import {
-  withDefaults
-} from "./chunk-HPK33ACY.js";
-import {
-  accentFor
-} from "./chunk-TCAQOUIB.js";
-import {
-  muiSize
-} from "./chunk-7ZPUN7TV.js";
-import {
-  neutralTones
-} from "./chunk-FQ6UW7IY.js";
-
-// src/components/data-display/Carousel/Carousel.parts.tsx
-import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
-import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
-import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
-import Box from "@mui/material/Box/index.js";
-import IconButton from "@mui/material/IconButton/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { alpha, useTheme } from "@mui/material/styles/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-var activateOnKey = (onSelect) => (e) => {
-  if (e.key === "Enter" || e.key === " ") {
-    e.preventDefault();
-    onSelect();
-  }
-};
-var INDICATOR_POSITIONS = (theme) => ({
-  top: { top: theme.spacing(2), left: "50%", transform: "translateX(-50%)" },
-  bottom: { bottom: theme.spacing(2), left: "50%", transform: "translateX(-50%)" },
-  left: {
-    left: theme.spacing(2),
-    top: "50%",
-    transform: "translateY(-50%)",
-    flexDirection: "column"
-  },
-  right: {
-    right: theme.spacing(2),
-    top: "50%",
-    transform: "translateY(-50%)",
-    flexDirection: "column"
-  }
-});
-var indicatorAttrs = (index, isActive) => ({
-  "aria-label": `Go to slide ${index + 1}`,
-  "data-testid": `carousel-indicator-${index}`,
-  "data-active": isActive
-});
-var LineIndicator = ({ index, isActive, color, onSelect }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      role: "button",
-      tabIndex: 0,
-      ...indicatorAttrs(index, isActive),
-      sx: {
-        width: isActive ? 30 : 20,
-        height: 3,
-        backgroundColor: isActive ? accentFor(theme, color).main : alpha(accentFor(theme, color).main, 0.3),
-        borderRadius: 1.5,
-        transition: theme.transitions.create(["width", "background-color"]),
-        cursor: "pointer"
-      },
-      onClick: onSelect,
-      onKeyDown: activateOnKey(onSelect)
-    }
-  );
-};
-var NumberIndicator = ({ index, isActive, color, onSelect }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      role: "button",
-      tabIndex: 0,
-      ...indicatorAttrs(index, isActive),
-      sx: {
-        width: 24,
-        height: 24,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: "50%",
-        backgroundColor: isActive ? accentFor(theme, color).main : "transparent",
-        color: isActive ? accentFor(theme, color).contrastText : accentFor(theme, color).main,
-        border: `1px solid ${accentFor(theme, color).main}`,
-        fontSize: "0.75rem",
-        fontWeight: isActive ? "bold" : "normal",
-        cursor: "pointer",
-        transition: theme.transitions.create(["all"])
-      },
-      onClick: onSelect,
-      onKeyDown: activateOnKey(onSelect),
-      children: index + 1
-    }
-  );
-};
-var DotIndicator = ({ index, isActive, color, onSelect }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      size: "small",
-      ...indicatorAttrs(index, isActive),
-      onClick: onSelect,
-      sx: {
-        p: 0.5,
-        color: isActive ? accentFor(theme, color).main : alpha(accentFor(theme, color).main, 0.3),
-        transform: isActive ? "scale(1.2)" : "scale(1)",
-        transition: theme.transitions.create(["transform", "color"])
-      },
-      children: /* @__PURE__ */ jsx(FiberManualRecordIcon, { fontSize: "small" })
-    }
-  );
-};
-var INDICATORS = {
-  lines: LineIndicator,
-  numbers: NumberIndicator,
-  dots: DotIndicator
-};
-var INDICATORS_DEFAULTS = {
-  position: "bottom",
-  color: "primary",
-  variant: "dots"
-};
-var CarouselIndicators = (props) => {
-  const { count, activeIndex, onSelect, position, color, variant, className, style } = withDefaults(
-    props,
-    INDICATORS_DEFAULTS
-  );
-  const theme = useTheme();
-  const Indicator = INDICATORS[variant] ?? DotIndicator;
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      className,
-      "data-testid": "carousel-indicators",
-      sx: {
-        position: "absolute",
-        display: "flex",
-        gap: 1,
-        zIndex: 2,
-        ...INDICATOR_POSITIONS(theme)[position] ?? INDICATOR_POSITIONS(theme).bottom,
-        ...style
-      },
-      children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
-        Indicator,
-        {
-          index,
-          isActive: index === activeIndex,
-          color,
-          onSelect: () => onSelect(index)
-        },
-        index
-      ))
-    }
-  );
-};
-var ARROWS_DEFAULTS = {
-  position: "overlay",
-  disabled: false,
-  disablePrev: false,
-  disableNext: false,
-  color: "primary",
-  size: "md"
-};
-var arrowSx = (theme, color, isOverlay) => ({
-  position: "absolute",
-  top: "50%",
-  transform: "translateY(-50%)",
-  zIndex: 3,
-  backgroundColor: alpha(theme.palette.background.paper, 0.8),
-  color: accentFor(theme, color).main,
-  "&:disabled": { opacity: 0.3 },
-  ...isOverlay ? {
-    opacity: 0.7,
-    "&:hover": { backgroundColor: theme.palette.background.paper, opacity: 1 }
-  } : { "&:hover": { backgroundColor: theme.palette.background.paper } }
-});
-var CarouselArrows = (props) => {
-  const {
-    copy,
-    onPrev,
-    onNext,
-    position,
-    disabled,
-    disablePrev,
-    disableNext,
-    color,
-    size,
-    className,
-    style
-  } = withDefaults(props, ARROWS_DEFAULTS);
-  const theme = useTheme();
-  const sx = arrowSx(theme, color, position === "overlay");
-  const offset = position === "outside" ? -40 : 8;
-  return /* @__PURE__ */ jsxs(Box, { "data-testid": "carousel-navigation", children: [
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        onClick: onPrev,
-        disabled: disabled || disablePrev,
-        size: muiSize(size),
-        className,
-        "aria-label": copy.previous,
-        "data-testid": "carousel-prev-button",
-        sx: { ...sx, left: offset, ...style },
-        children: /* @__PURE__ */ jsx(ArrowBackIosIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        onClick: onNext,
-        disabled: disabled || disableNext,
-        "aria-label": copy.next,
-        size: muiSize(size),
-        className,
-        "data-testid": "carousel-next-button",
-        sx: { ...sx, right: offset, ...style },
-        children: /* @__PURE__ */ jsx(ArrowForwardIosIcon, {})
-      }
-    )
-  ] });
-};
-var THUMBNAIL_SIZES = { xs: 40, sm: 60, md: 80, lg: 100, xl: 120 };
-var DEFAULT_THUMBNAIL_SIZE = 60;
-var Thumbnail = ({ item, index, isActive, side, onSelect }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      onClick: onSelect,
-      "data-testid": `carousel-thumbnail-${index}`,
-      "data-active": isActive,
-      sx: {
-        width: side,
-        height: side,
-        border: `2px solid ${isActive ? theme.palette.primary.main : "transparent"}`,
-        borderRadius: 1,
-        overflow: "hidden",
-        cursor: "pointer",
-        opacity: isActive ? 1 : 0.6,
-        transition: theme.transitions.create(["opacity", "border-color"]),
-        "&:hover": { opacity: 1 }
-      },
-      children: item.image ? /* @__PURE__ */ jsx(
-        Box,
-        {
-          component: "img",
-          src: item.image,
-          alt: item.alt || item.title,
-          sx: { width: "100%", height: "100%", objectFit: "cover" }
-        }
-      ) : (
-        // No image to show, so the slide's number stands in for it.
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            sx: {
-              width: "100%",
-              height: "100%",
-              backgroundColor: neutralTones(theme).track,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: index + 1 })
-          }
-        )
-      )
-    }
-  );
-};
-var CarouselThumbnails = ({
-  items,
-  activeIndex,
-  onSelect,
-  size = "sm",
-  className,
-  style
-}) => {
-  const theme = useTheme();
-  const side = THUMBNAIL_SIZES[size] ?? DEFAULT_THUMBNAIL_SIZE;
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      className,
-      "data-testid": "carousel-thumbnails",
-      sx: {
-        position: "absolute",
-        // Hung below the frame, clear of its own height plus a gap.
-        bottom: -side - 16,
-        left: "50%",
-        transform: "translateX(-50%)",
-        display: "flex",
-        gap: 1,
-        p: 1,
-        backgroundColor: alpha(theme.palette.background.paper, 0.9),
-        borderRadius: 1,
-        ...style
-      },
-      children: items.map((item, index) => /* @__PURE__ */ jsx(
-        Thumbnail,
-        {
-          item,
-          index,
-          isActive: index === activeIndex,
-          side,
-          onSelect: () => onSelect(index)
-        },
-        item.id
-      ))
-    }
-  );
-};
-
-export {
-  CarouselIndicators,
-  CarouselArrows,
-  CarouselThumbnails
-};
-//# sourceMappingURL=chunk-4GKDO4YK.js.map

package/dist/chunk-4GKDO4YK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Carousel/Carousel.parts.tsx"],"sourcesContent":["import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\nimport FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';\nimport Box from '@mui/material/Box/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { neutralTones } from '../../../tokens/ink';\nimport { accentFor, muiSize } from '../../../tokens/scales';\n\nimport type {\n  CarouselArrowsProps,\n  CarouselIndicatorsProps,\n  CarouselItem,\n  CarouselThumbnailsProps,\n} from './Carousel.types';\n\ntype IndicatorPosition = NonNullable<CarouselIndicatorsProps['position']>;\ntype IndicatorVariant = NonNullable<CarouselIndicatorsProps['variant']>;\ntype Color = NonNullable<CarouselIndicatorsProps['color']>;\n\n/** Fires `onSelect` for the keys a native button would treat as activation. */\nconst activateOnKey = (onSelect: () => void) => (e: React.KeyboardEvent) => {\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    onSelect();\n  }\n};\n\nconst INDICATOR_POSITIONS = (theme: Theme): Record<IndicatorPosition, CSSObject> => ({\n  top: { top: theme.spacing(2), left: '50%', transform: 'translateX(-50%)' },\n  bottom: { bottom: theme.spacing(2), left: '50%', transform: 'translateX(-50%)' },\n  left: {\n    left: theme.spacing(2),\n    top: '50%',\n    transform: 'translateY(-50%)',\n    flexDirection: 'column',\n  },\n  right: {\n    right: theme.spacing(2),\n    top: '50%',\n    transform: 'translateY(-50%)',\n    flexDirection: 'column',\n  },\n});\n\ninterface IndicatorProps {\n  index: number;\n  isActive: boolean;\n  color: Color;\n  onSelect: () => void;\n}\n\n/** Attributes every indicator variant carries, whatever it draws. */\nconst indicatorAttrs = (index: number, isActive: boolean) => ({\n  'aria-label': `Go to slide ${index + 1}`,\n  'data-testid': `carousel-indicator-${index}`,\n  'data-active': isActive,\n});\n\nconst LineIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"button\"\n      tabIndex={0}\n      {...indicatorAttrs(index, isActive)}\n      sx={{\n        width: isActive ? 30 : 20,\n        height: 3,\n        backgroundColor: isActive\n          ? accentFor(theme, color).main\n          : alpha(accentFor(theme, color).main, 0.3),\n        borderRadius: 1.5,\n        transition: theme.transitions.create(['width', 'background-color']),\n        cursor: 'pointer',\n      }}\n      onClick={onSelect}\n      onKeyDown={activateOnKey(onSelect)}\n    />\n  );\n};\n\nconst NumberIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"button\"\n      tabIndex={0}\n      {...indicatorAttrs(index, isActive)}\n      sx={{\n        width: 24,\n        height: 24,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: '50%',\n        backgroundColor: isActive ? accentFor(theme, color).main : 'transparent',\n        color: isActive ? accentFor(theme, color).contrastText : accentFor(theme, color).main,\n        border: `1px solid ${accentFor(theme, color).main}`,\n        fontSize: '0.75rem',\n        fontWeight: isActive ? 'bold' : 'normal',\n        cursor: 'pointer',\n        transition: theme.transitions.create(['all']),\n      }}\n      onClick={onSelect}\n      onKeyDown={activateOnKey(onSelect)}\n    >\n      {index + 1}\n    </Box>\n  );\n};\n\nconst DotIndicator: React.FC<IndicatorProps> = ({ index, isActive, color, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <IconButton\n      size=\"small\"\n      {...indicatorAttrs(index, isActive)}\n      onClick={onSelect}\n      sx={{\n        p: 0.5,\n        color: isActive ? accentFor(theme, color).main : alpha(accentFor(theme, color).main, 0.3),\n        transform: isActive ? 'scale(1.2)' : 'scale(1)',\n        transition: theme.transitions.create(['transform', 'color']),\n      }}\n    >\n      <FiberManualRecordIcon fontSize=\"small\" />\n    </IconButton>\n  );\n};\n\nconst INDICATORS: Record<IndicatorVariant, React.FC<IndicatorProps>> = {\n  lines: LineIndicator,\n  numbers: NumberIndicator,\n  dots: DotIndicator,\n};\n\nconst INDICATORS_DEFAULTS = {\n  position: 'bottom',\n  color: 'primary',\n  variant: 'dots',\n} satisfies Partial<CarouselIndicatorsProps>;\n\nexport const CarouselIndicators: React.FC<CarouselIndicatorsProps> = (props) => {\n  const { count, activeIndex, onSelect, position, color, variant, className, style } = withDefaults(\n    props,\n    INDICATORS_DEFAULTS,\n  ) as CarouselIndicatorsProps & Required<Pick<CarouselIndicatorsProps, keyof typeof INDICATORS_DEFAULTS>>;\n\n  const theme = useTheme();\n  const Indicator = INDICATORS[variant] ?? DotIndicator;\n\n  return (\n    <Box\n      className={className}\n      data-testid=\"carousel-indicators\"\n      sx={{\n        position: 'absolute',\n        display: 'flex',\n        gap: 1,\n        zIndex: 2,\n        ...(INDICATOR_POSITIONS(theme)[position] ?? INDICATOR_POSITIONS(theme).bottom),\n        ...style,\n      }}\n    >\n      {Array.from({ length: count }).map((_, index) => (\n        <Indicator\n          key={index}\n          index={index}\n          isActive={index === activeIndex}\n          color={color}\n          onSelect={() => onSelect(index)}\n        />\n      ))}\n    </Box>\n  );\n};\n\nconst ARROWS_DEFAULTS = {\n  position: 'overlay',\n  disabled: false,\n  disablePrev: false,\n  disableNext: false,\n  color: 'primary',\n  size: 'md',\n} satisfies Partial<CarouselArrowsProps>;\n\n/**\n * All three positions place the arrow the same way; only `overlay` fades it back\n * until hovered, and only `outside` sits it clear of the frame.\n */\nconst arrowSx = (theme: Theme, color: Color, isOverlay: boolean): CSSObject => ({\n  position: 'absolute',\n  top: '50%',\n  transform: 'translateY(-50%)',\n  zIndex: 3,\n  backgroundColor: alpha(theme.palette.background.paper, 0.8),\n  color: accentFor(theme, color).main,\n  '&:disabled': { opacity: 0.3 },\n  ...(isOverlay\n    ? {\n        opacity: 0.7,\n        '&:hover': { backgroundColor: theme.palette.background.paper, opacity: 1 },\n      }\n    : { '&:hover': { backgroundColor: theme.palette.background.paper } }),\n});\n\nexport const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {\n  const {\n    copy, onPrev, onNext, position, disabled, disablePrev, disableNext, color, size, className,\n    style,\n  } = withDefaults(props, ARROWS_DEFAULTS) as CarouselArrowsProps &\n    Required<Pick<CarouselArrowsProps, keyof typeof ARROWS_DEFAULTS>>;\n\n  const theme = useTheme();\n  const sx = arrowSx(theme, color, position === 'overlay');\n  const offset = position === 'outside' ? -40 : 8;\n\n  return (\n    <Box data-testid=\"carousel-navigation\">\n      <IconButton\n        onClick={onPrev}\n        disabled={disabled || disablePrev}\n        size={muiSize(size)}\n        className={className}\n        aria-label={copy.previous}\n        data-testid=\"carousel-prev-button\"\n        sx={{ ...sx, left: offset, ...style }}\n      >\n        <ArrowBackIosIcon />\n      </IconButton>\n\n      <IconButton\n        onClick={onNext}\n        disabled={disabled || disableNext}\n        aria-label={copy.next}\n        size={muiSize(size)}\n        className={className}\n        data-testid=\"carousel-next-button\"\n        sx={{ ...sx, right: offset, ...style }}\n      >\n        <ArrowForwardIosIcon />\n      </IconButton>\n    </Box>\n  );\n};\n\nconst THUMBNAIL_SIZES = { xs: 40, sm: 60, md: 80, lg: 100, xl: 120 } as const;\nconst DEFAULT_THUMBNAIL_SIZE = 60;\n\nconst Thumbnail: React.FC<{\n  item: CarouselItem;\n  index: number;\n  isActive: boolean;\n  side: number;\n  onSelect: () => void;\n}> = ({ item, index, isActive, side, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      onClick={onSelect}\n      data-testid={`carousel-thumbnail-${index}`}\n      data-active={isActive}\n      sx={{\n        width: side,\n        height: side,\n        border: `2px solid ${isActive ? theme.palette.primary.main : 'transparent'}`,\n        borderRadius: 1,\n        overflow: 'hidden',\n        cursor: 'pointer',\n        opacity: isActive ? 1 : 0.6,\n        transition: theme.transitions.create(['opacity', 'border-color']),\n        '&:hover': { opacity: 1 },\n      }}\n    >\n      {item.image ? (\n        <Box\n          component=\"img\"\n          src={item.image}\n          alt={item.alt || item.title}\n          sx={{ width: '100%', height: '100%', objectFit: 'cover' }}\n        />\n      ) : (\n        // No image to show, so the slide's number stands in for it.\n        <Box\n          sx={{\n            width: '100%',\n            height: '100%',\n            backgroundColor: neutralTones(theme).track,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          <Typography variant=\"caption\">{index + 1}</Typography>\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nexport const CarouselThumbnails: React.FC<CarouselThumbnailsProps> = ({\n  items,\n  activeIndex,\n  onSelect,\n  size = 'sm',\n  className,\n  style,\n}) => {\n  const theme = useTheme();\n  const side = THUMBNAIL_SIZES[size as keyof typeof THUMBNAIL_SIZES] ?? DEFAULT_THUMBNAIL_SIZE;\n\n  return (\n    <Box\n      className={className}\n      data-testid=\"carousel-thumbnails\"\n      sx={{\n        position: 'absolute',\n        // Hung below the frame, clear of its own height plus a gap.\n        bottom: -side - 16,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        display: 'flex',\n        gap: 1,\n        p: 1,\n        backgroundColor: alpha(theme.palette.background.paper, 0.9),\n        borderRadius: 1,\n        ...style,\n      }}\n    >\n      {items.map((item, index) => (\n        <Thumbnail\n          key={item.id}\n          item={item}\n          index={index}\n          isActive={index === activeIndex}\n          side={side}\n          onSelect={() => onSelect(index)}\n        />\n      ))}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-4M6CEQVK.js

@@ -1,121 +0,0 @@
-import {
-  TOUCH_TARGET,
-  displayAcrossRail
-} from "./chunk-LIG7TKIB.js";
-
-// src/components/layout/SettingsLayout/SettingsSectionHeader.tsx
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import Box from "@mui/material/Box/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-var CLIP = {
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-};
-function HeaderText({
-  title,
-  description
-}) {
-  return /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        component: "h2",
-        sx: { m: 0, font: "inherit", fontSize: "1rem", fontWeight: 600, lineHeight: 1.3, ...CLIP },
-        children: title
-      }
-    ),
-    description !== void 0 && description !== "" && /* @__PURE__ */ jsx(
-      Box,
-      {
-        component: "p",
-        sx: {
-          m: 0,
-          font: "inherit",
-          fontSize: "0.8125rem",
-          color: "text.secondary",
-          lineHeight: 1.35,
-          ...CLIP
-        },
-        children: description
-      }
-    )
-  ] });
-}
-function SettingsSectionHeader({
-  href,
-  backLabel,
-  title,
-  description,
-  breakpoint,
-  linkComponent,
-  testIdPrefix
-}) {
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      "data-testid": `${testIdPrefix}-section-header`,
-      sx: (theme) => ({
-        ...displayAcrossRail(theme, breakpoint, "flex", "none"),
-        alignItems: "center",
-        gap: 1.5,
-        minWidth: 0,
-        // ITS OWN SURFACE, not the panel's.
-        //
-        // The header, the chip strip and the first card were all the same
-        // white, so nothing said where "you are here" ended and the screen
-        // began — the eye had only the type sizes to go on. A tint plus the
-        // rule below turns three stacked runs of text into two blocks.
-        //
-        // `paper` against a `default` panel rather than a hand-picked grey, so
-        // it tracks the host's theme (and its dark mode) instead of being a
-        // light-mode constant that goes wrong the moment the palette does.
-        bgcolor: "background.paper",
-        px: 1.5,
-        pt: 1.5,
-        pb: 1.5,
-        mb: 1,
-        borderRadius: 1,
-        // A rule under the header, because what follows it is the sibling strip
-        // — a row of other sections. Without a line the section's own name and
-        // the chip naming a DIFFERENT section sit in one undifferentiated
-        // block, which reads as one navigation rather than as "you are here"
-        // above "go elsewhere".
-        borderBottom: 1,
-        borderColor: "divider"
-      }),
-      children: [
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            component: linkComponent,
-            href,
-            "aria-label": backLabel,
-            "data-testid": `${testIdPrefix}-back`,
-            sx: (theme) => ({
-              flex: "0 0 auto",
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: TOUCH_TARGET,
-              height: TOUCH_TARGET,
-              border: 1,
-              borderColor: "divider",
-              borderRadius: 2,
-              color: "text.primary",
-              textDecoration: "none",
-              "&:hover": { backgroundColor: theme.palette.action.hover }
-            }),
-            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" })
-          }
-        ),
-        /* @__PURE__ */ jsx(HeaderText, { title, description })
-      ]
-    }
-  );
-}
-
-export {
-  SettingsSectionHeader
-};
-//# sourceMappingURL=chunk-4M6CEQVK.js.map

package/dist/chunk-4M6CEQVK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionHeader.tsx"],"sourcesContent":["'use client';\n\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { displayAcrossRail, TOUCH_TARGET } from './SettingsLayout.styles';\nimport type { SettingsLayoutProps, SettingsRailBreakpoint } from './SettingsLayout.types';\n\n/** One line that must not wrap, whatever the section is called. */\nconst CLIP = {\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n} as const;\n\n/**\n * The name of where you are, and optionally what it holds.\n *\n * `minWidth: 0` on the wrapper is what lets the clipping work at all: without\n * it a flex item refuses to shrink below its content, so a long section name\n * pushes the back button off the row instead of ellipsising.\n */\nfunction HeaderText({\n  title,\n  description,\n}: {\n  title: string;\n  description?: string;\n}): React.JSX.Element {\n  return (\n    <Box sx={{ minWidth: 0 }}>\n      <Box\n        component=\"h2\"\n        sx={{ m: 0, font: 'inherit', fontSize: '1rem', fontWeight: 600, lineHeight: 1.3, ...CLIP }}\n      >\n        {title}\n      </Box>\n      {description !== undefined && description !== '' && (\n        <Box\n          component=\"p\"\n          sx={{\n            m: 0,\n            font: 'inherit',\n            fontSize: '0.8125rem',\n            color: 'text.secondary',\n            lineHeight: 1.35,\n            ...CLIP,\n          }}\n        >\n          {description}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width panel header: a back control, and the name of where you are.\n *\n * ## Why this replaced a \"‹ Voltar\" link\n *\n * The bare link spent a whole row saying only that a back existed. Under it came\n * the sibling chips and under those the section's own Salvar, so three stacked\n * rows went by before the first field — on the width with the least room for\n * them. Worse, none of the three said WHICH section was open: the chips mark the\n * active one, but a chip strip scrolls, so the answer could be off-screen.\n *\n * Folding the control into a square button beside the title buys back a row and\n * makes the header say where you are, which is what a header is for.\n *\n * ## Narrow only, and mounted at every width\n *\n * `displayAcrossRail` hides this above the breakpoint rather than unmounting it,\n * for the reason the whole component works that way: navigation that exists at\n * one width and not the other is navigation nothing can assert about. Above the\n * breakpoint the rail is on screen with the open row marked, so a back control\n * would point at a list already visible.\n *\n * The button is `TOUCH_TARGET` square because this is the phone shape, and it\n * keeps the accessible name — the visible text is the section, not the verb, so\n * a screen reader still hears \"Voltar\" rather than being handed an icon.\n */\nexport function SettingsSectionHeader({\n  href,\n  backLabel,\n  title,\n  description,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  backLabel: string;\n  title: string;\n  description?: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps['linkComponent']>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-section-header`}\n      sx={(theme) => ({\n        ...displayAcrossRail(theme, breakpoint, 'flex', 'none'),\n        alignItems: 'center',\n        gap: 1.5,\n        minWidth: 0,\n        // ITS OWN SURFACE, not the panel's.\n        //\n        // The header, the chip strip and the first card were all the same\n        // white, so nothing said where \"you are here\" ended and the screen\n        // began — the eye had only the type sizes to go on. A tint plus the\n        // rule below turns three stacked runs of text into two blocks.\n        //\n        // `paper` against a `default` panel rather than a hand-picked grey, so\n        // it tracks the host's theme (and its dark mode) instead of being a\n        // light-mode constant that goes wrong the moment the palette does.\n        bgcolor: 'background.paper',\n        px: 1.5,\n        pt: 1.5,\n        pb: 1.5,\n        mb: 1,\n        borderRadius: 1,\n        // A rule under the header, because what follows it is the sibling strip\n        // — a row of other sections. Without a line the section's own name and\n        // the chip naming a DIFFERENT section sit in one undifferentiated\n        // block, which reads as one navigation rather than as \"you are here\"\n        // above \"go elsewhere\".\n        borderBottom: 1,\n        borderColor: 'divider',\n      })}\n    >\n      <Box\n        component={linkComponent}\n        href={href}\n        aria-label={backLabel}\n        data-testid={`${testIdPrefix}-back`}\n        sx={(theme) => ({\n          flex: '0 0 auto',\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: TOUCH_TARGET,\n          height: TOUCH_TARGET,\n          border: 1,\n          borderColor: 'divider',\n          borderRadius: 2,\n          color: 'text.primary',\n          textDecoration: 'none',\n          '&:hover': { backgroundColor: theme.palette.action.hover },\n        })}\n      >\n        <ChevronLeftIcon fontSize=\"small\" />\n      </Box>\n\n      <HeaderText title={title} description={description} />\n    </Box>\n  );\n}\n"],"mappings":";;;;;;AAEA,OAAO,qBAAqB;AAC5B,OAAO,SAAS;AA4BZ,SACE,KADF;AArBJ,IAAM,OAAO;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AASA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGsB;AACpB,SACE,qBAAC,OAAI,IAAI,EAAE,UAAU,EAAE,GACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI,EAAE,GAAG,GAAG,MAAM,WAAW,UAAU,QAAQ,YAAY,KAAK,YAAY,KAAK,GAAG,KAAK;AAAA,QAExF;AAAA;AAAA,IACH;AAAA,IACC,gBAAgB,UAAa,gBAAgB,MAC5C;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI;AAAA,UACF,GAAG;AAAA,UACH,MAAM;AAAA,UACN,UAAU;AAAA,UACV,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,GAAG;AAAA,QACL;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AA4BO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,GAAG,YAAY;AAAA,MAC5B,IAAI,CAAC,WAAW;AAAA,QACd,GAAG,kBAAkB,OAAO,YAAY,QAAQ,MAAM;AAAA,QACtD,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWV,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMd,cAAc;AAAA,QACd,aAAa;AAAA,MACf;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX;AAAA,YACA,cAAY;AAAA,YACZ,eAAa,GAAG,YAAY;AAAA,YAC5B,IAAI,CAAC,WAAW;AAAA,cACd,MAAM;AAAA,cACN,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,cAChB,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR,aAAa;AAAA,cACb,cAAc;AAAA,cACd,OAAO;AAAA,cACP,gBAAgB;AAAA,cAChB,WAAW,EAAE,iBAAiB,MAAM,QAAQ,OAAO,MAAM;AAAA,YAC3D;AAAA,YAEA,8BAAC,mBAAgB,UAAS,SAAQ;AAAA;AAAA,QACpC;AAAA,QAEA,oBAAC,cAAW,OAAc,aAA0B;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}

package/dist/chunk-4M7QHSKY.js

@@ -1,103 +0,0 @@
-import {
-  arrowColor,
-  emphasisStyles,
-  getSizeStyles,
-  variantStyles
-} from "./chunk-5LPQ6T5S.js";
-import {
-  resolveTooltipProps,
-  usePinnedTooltip
-} from "./chunk-SCRN2RE4.js";
-
-// src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx
-import MuiTooltip from "@mui/material/Tooltip/index.js";
-import { styled } from "@mui/material/styles/index.js";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-var StyledTooltip = styled(MuiTooltip, {
-  shouldForwardProp: (prop) => !["customVariant", "customSize", "glow", "pulse"].includes(prop)
-})(({ theme, customVariant, customSize, glow, pulse }) => {
-  const sizeStyles = getSizeStyles(customSize);
-  return {
-    "& .MuiTooltip-tooltip": {
-      borderRadius: theme.spacing(1),
-      fontSize: sizeStyles.fontSize,
-      padding: sizeStyles.padding,
-      fontWeight: 500,
-      transition: "all 0.3s ease",
-      position: "relative",
-      overflow: "hidden",
-      ...variantStyles(theme, customVariant),
-      ...emphasisStyles(theme, glow, pulse)
-    },
-    "& .MuiTooltip-arrow": {
-      color: arrowColor(theme, customVariant)
-    }
-  };
-});
-var InteractiveTooltip = React.forwardRef(
-  (rawProps, ref) => {
-    const {
-      variant,
-      size,
-      glow,
-      pulse,
-      maxWidth,
-      dataTestId,
-      hoverContent,
-      pinnedContent,
-      clickable,
-      onPin,
-      onUnpin,
-      className,
-      children,
-      ...props
-    } = resolveTooltipProps(rawProps);
-    const { isPinned, isControlledOpen, wrapperRef, handleClick } = usePinnedTooltip({
-      clickable,
-      onPin,
-      onUnpin
-    });
-    const tooltipContent = isPinned ? pinnedContent : hoverContent;
-    const childElement = children;
-    const childWithProps = React.cloneElement(childElement, {
-      onClick: (e) => {
-        handleClick(e);
-        childElement.props.onClick?.(e);
-      },
-      "data-testid": dataTestId ? `${dataTestId}-trigger` : void 0
-    });
-    return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className, children: /* @__PURE__ */ jsx(
-      StyledTooltip,
-      {
-        ref,
-        customVariant: variant,
-        customSize: size,
-        glow,
-        pulse,
-        title: tooltipContent,
-        open: isPinned ? isControlledOpen : void 0,
-        enterDelay: isPinned ? 0 : 100,
-        leaveDelay: 0,
-        disableHoverListener: isPinned,
-        disableFocusListener: isPinned,
-        disableTouchListener: isPinned,
-        slotProps: {
-          tooltip: {
-            sx: { maxWidth },
-            role: "tooltip",
-            ...dataTestId && { "data-testid": `${dataTestId}-content` }
-          }
-        },
-        ...props,
-        children: childWithProps
-      }
-    ) });
-  }
-);
-InteractiveTooltip.displayName = "InteractiveTooltip";
-
-export {
-  InteractiveTooltip
-};
-//# sourceMappingURL=chunk-4M7QHSKY.js.map

package/dist/chunk-4M7QHSKY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx"],"sourcesContent":["import MuiTooltip from '@mui/material/Tooltip/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { resolveTooltipProps, usePinnedTooltip } from './InteractiveTooltip.hooks';\nimport {\n  arrowColor,\n  emphasisStyles,\n  getSizeStyles,\n  variantStyles,\n} from './InteractiveTooltip.styles';\nimport type { InteractiveTooltipProps } from './InteractiveTooltip.types';\n\nconst StyledTooltip = styled(MuiTooltip, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customSize', 'glow', 'pulse'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customSize?: string;\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, customSize, glow, pulse }) => {\n  const sizeStyles = getSizeStyles(customSize);\n\n  return {\n    '& .MuiTooltip-tooltip': {\n      borderRadius: theme.spacing(1),\n      fontSize: sizeStyles.fontSize,\n      padding: sizeStyles.padding,\n      fontWeight: 500,\n      transition: 'all 0.3s ease',\n      position: 'relative',\n      overflow: 'hidden',\n      ...variantStyles(theme, customVariant),\n      ...emphasisStyles(theme, glow, pulse),\n    },\n\n    '& .MuiTooltip-arrow': {\n      color: arrowColor(theme, customVariant),\n    },\n  };\n});\n\nexport const InteractiveTooltip = React.forwardRef<HTMLDivElement, InteractiveTooltipProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      size,\n      glow,\n      pulse,\n      maxWidth,\n      dataTestId,\n      hoverContent,\n      pinnedContent,\n      clickable,\n      onPin,\n      onUnpin,\n      className,\n      children,\n      ...props\n    } = resolveTooltipProps(rawProps);\n\n    const { isPinned, isControlledOpen, wrapperRef, handleClick } = usePinnedTooltip({\n      clickable,\n      onPin,\n      onUnpin,\n    });\n\n    // Determine which content to show\n    const tooltipContent = isPinned ? pinnedContent : hoverContent;\n\n    // Child with click handler and ref\n    const childElement = children as React.ReactElement<{\n      onClick?: (e: React.MouseEvent) => void;\n      'data-testid'?: string;\n    }>;\n\n    const childWithProps = React.cloneElement(childElement, {\n      onClick: (e: React.MouseEvent) => {\n        handleClick(e);\n        // Call original onClick if it exists\n        childElement.props.onClick?.(e);\n      },\n      'data-testid': dataTestId ? `${dataTestId}-trigger` : undefined,\n    });\n\n    return (\n      <div ref={wrapperRef} className={className}>\n        <StyledTooltip\n          ref={ref}\n          customVariant={variant}\n          customSize={size}\n          glow={glow}\n          pulse={pulse}\n          title={tooltipContent}\n          open={isPinned ? isControlledOpen : undefined}\n          enterDelay={isPinned ? 0 : 100}\n          leaveDelay={0}\n          disableHoverListener={isPinned}\n          disableFocusListener={isPinned}\n          disableTouchListener={isPinned}\n          slotProps={{\n            tooltip: {\n              sx: { maxWidth },\n              role: 'tooltip',\n              ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),\n            },\n          }}\n          {...props}\n        >\n          {childWithProps}\n        </StyledTooltip>\n      </div>\n    );\n  },\n);\n\nInteractiveTooltip.displayName = 'InteractiveTooltip';\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,cAAc;AACvB,OAAO,WAAW;AAsFV;AA3ER,IAAM,gBAAgB,OAAO,YAAY;AAAA,EACvC,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,cAAc,QAAQ,OAAO,EAAE,SAAS,IAAc;AAC7E,CAAC,EAKE,CAAC,EAAE,OAAO,eAAe,YAAY,MAAM,MAAM,MAAM;AACxD,QAAM,aAAa,cAAc,UAAU;AAE3C,SAAO;AAAA,IACL,yBAAyB;AAAA,MACvB,cAAc,MAAM,QAAQ,CAAC;AAAA,MAC7B,UAAU,WAAW;AAAA,MACrB,SAAS,WAAW;AAAA,MACpB,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,MACV,GAAG,cAAc,OAAO,aAAa;AAAA,MACrC,GAAG,eAAe,OAAO,MAAM,KAAK;AAAA,IACtC;AAAA,IAEA,uBAAuB;AAAA,MACrB,OAAO,WAAW,OAAO,aAAa;AAAA,IACxC;AAAA,EACF;AACF,CAAC;AAEM,IAAM,qBAAqB,MAAM;AAAA,EACtC,CAAC,UAAU,QAAQ;AACjB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,oBAAoB,QAAQ;AAEhC,UAAM,EAAE,UAAU,kBAAkB,YAAY,YAAY,IAAI,iBAAiB;AAAA,MAC/E;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAGD,UAAM,iBAAiB,WAAW,gBAAgB;AAGlD,UAAM,eAAe;AAKrB,UAAM,iBAAiB,MAAM,aAAa,cAAc;AAAA,MACtD,SAAS,CAAC,MAAwB;AAChC,oBAAY,CAAC;AAEb,qBAAa,MAAM,UAAU,CAAC;AAAA,MAChC;AAAA,MACA,eAAe,aAAa,GAAG,UAAU,aAAa;AAAA,IACxD,CAAC;AAED,WACE,oBAAC,SAAI,KAAK,YAAY,WACpB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAe;AAAA,QACf,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,MAAM,WAAW,mBAAmB;AAAA,QACpC,YAAY,WAAW,IAAI;AAAA,QAC3B,YAAY;AAAA,QACZ,sBAAsB;AAAA,QACtB,sBAAsB;AAAA,QACtB,sBAAsB;AAAA,QACtB,WAAW;AAAA,UACT,SAAS;AAAA,YACP,IAAI,EAAE,SAAS;AAAA,YACf,MAAM;AAAA,YACN,GAAI,cAAc,EAAE,eAAe,GAAG,UAAU,WAAW;AAAA,UAC7D;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;","names":[]}