@12-apps/ui 6.54.1 → 6.56.0

package/dist/chunk-SJ625KN4.js

@@ -0,0 +1,100 @@
+import {
+  BAR_GLOW,
+  CIRCULAR_GLOW,
+  GLASS_BAR_ALPHA,
+  GLASS_BAR_BORDER_ALPHA,
+  GLASS_BLUR_PX,
+  GLOW_BRIGHTNESS,
+  PROGRESS_SIZES,
+  PULSE
+} from "./chunk-IFUWFCPJ.js";
+import {
+  softNeutral
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Progress/Progress.styles.ts
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var pulseAnimation = keyframes`
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: ${PULSE.dip};
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return softNeutral(theme);
+  }
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    error: theme.palette.error,
+    info: theme.palette.info,
+    danger: theme.palette.error
+    // Add danger alias
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var SIZE_MAP = Object.fromEntries(
+  Object.entries(PROGRESS_SIZES).map(([size, step]) => [
+    size,
+    { heightPx: step.height, circularSizePx: step.circularSize, fontSize: sxRem(step.fontSize) }
+  ])
+);
+var getSizeStyles = (size) => SIZE_MAP[size] || SIZE_MAP.md;
+var barVariantStyles = (theme, variant, colorPalette) => {
+  switch (variant) {
+    case "linear":
+      return { backgroundColor: colorPalette.main };
+    case "gradient":
+      return {
+        background: `linear-gradient(90deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`
+      };
+    case "glass":
+      return {
+        backgroundColor: alpha(colorPalette.main, GLASS_BAR_ALPHA),
+        backdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)})`,
+        border: `1px solid ${alpha(colorPalette.main, GLASS_BAR_BORDER_ALPHA)}`
+      };
+    default:
+      return {};
+  }
+};
+var barEmphasisStyles = (theme, colorPalette, glow, pulse) => ({
+  ...glow && {
+    boxShadow: `${rems(theme, 0, 0, BAR_GLOW.blur, BAR_GLOW.spread)} ${alpha(colorPalette.main, BAR_GLOW.alpha)}`,
+    filter: `brightness(${GLOW_BRIGHTNESS})`
+  },
+  ...pulse && {
+    animation: `${pulseAnimation} ${PULSE.durationMs / 1e3}s infinite`
+  }
+});
+var circularEmphasisStyles = (theme, colorPalette, glow, pulse) => ({
+  ...glow && {
+    filter: `drop-shadow(${rems(theme, 0, 0, CIRCULAR_GLOW.blur)} ${alpha(colorPalette.main, CIRCULAR_GLOW.alpha)})`
+  },
+  ...pulse && {
+    animation: `${pulseAnimation} ${PULSE.durationMs / 1e3}s infinite`
+  }
+});
+
+export {
+  pulseAnimation,
+  getColorFromTheme,
+  getSizeStyles,
+  barVariantStyles,
+  barEmphasisStyles,
+  circularEmphasisStyles
+};
+//# sourceMappingURL=chunk-SJ625KN4.js.map

package/dist/chunk-SJTQW6JK.js

@@ -0,0 +1,223 @@
+import {
+  onTrackInk,
+  switchSx
+} from "./chunk-XM2YEXGO.js";
+import {
+  LABEL_GAP_UNITS,
+  SWITCH_ICON_SIZES,
+  TAP_TARGET_MIN
+} from "./chunk-DCK5ZEIU.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Switch/Switch.parts.tsx
+import Box from "@mui/material/Box/index.js";
+import FormHelperText from "@mui/material/FormHelperText/index.js";
+import MuiSwitch from "@mui/material/Switch/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StyledSwitch = styled(MuiSwitch, {
+  shouldForwardProp: (prop) => ![
+    "customVariant",
+    "customColor",
+    "customSize",
+    "glow",
+    "glass",
+    "gradient",
+    "trackWidth",
+    "trackHeight",
+    "onText",
+    "offText",
+    "loading",
+    "ripple",
+    "pulse"
+  ].includes(prop)
+})(({ theme, ...flags }) => ({ ...switchSx(theme, flags) }));
+var StyledLabelContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["labelPosition", "error"].includes(prop)
+})(({ theme, labelPosition, error }) => {
+  const stacked = labelPosition === "top" || labelPosition === "bottom";
+  return {
+    display: "flex",
+    alignItems: stacked ? "flex-start" : "center",
+    flexDirection: labelPosition === "top" ? "column" : labelPosition === "bottom" ? "column-reverse" : "row",
+    gap: theme.spacing(stacked ? LABEL_GAP_UNITS.stacked : LABEL_GAP_UNITS.beside),
+    width: "100%",
+    ...error && { "& .MuiTypography-root": { color: theme.palette.error.main } }
+  };
+});
+var LabelContainer = ({ labelPosition, error, children }) => /* @__PURE__ */ jsx(StyledLabelContainer, { labelPosition, error, children });
+var SwitchIcon = ({
+  icon,
+  shown,
+  animated,
+  size,
+  side,
+  onInk
+}) => {
+  const isOn = side === "on";
+  const translate = isOn ? "translate(-50%, -50%)" : "translate(50%, -50%)";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        top: "50%",
+        ...isOn ? { left: shown ? sxRem(4) : "50%" } : { right: shown ? sxRem(4) : "50%" },
+        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+        opacity: shown ? 1 : 0,
+        transform: `${translate} scale(${shown && animated ? 1 : 0.8})`,
+        pointerEvents: "none",
+        zIndex: 2,
+        color: isOn ? onInk : "text.secondary",
+        fontSize: sxRem(SWITCH_ICON_SIZES[size] ?? SWITCH_ICON_SIZES.md)
+      },
+      children: icon
+    }
+  );
+};
+var SwitchControl = ({
+  checked,
+  onChange,
+  onIcon,
+  offIcon,
+  animated,
+  size,
+  dataTestId,
+  switchRef,
+  inputId,
+  inputProps,
+  describedBy,
+  rest,
+  ...flags
+}) => {
+  const props = rest;
+  const theme = useTheme();
+  const onInk = onTrackInk(theme, flags);
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", display: "inline-flex" }, children: [
+    /* @__PURE__ */ jsx(
+      StyledSwitch,
+      {
+        ref: switchRef,
+        ...flags,
+        checked,
+        onChange,
+        disabled: Boolean(flags.loading) || props.disabled,
+        ...props,
+        inputProps: {
+          "aria-label": props["aria-label"],
+          "data-testid": dataTestId || "switch",
+          ...inputProps,
+          id: inputId,
+          "aria-describedby": describedBy
+        }
+      }
+    ),
+    onIcon && /* @__PURE__ */ jsx(
+      SwitchIcon,
+      {
+        icon: onIcon,
+        shown: Boolean(checked),
+        animated,
+        size,
+        side: "on",
+        onInk
+      }
+    ),
+    offIcon && /* @__PURE__ */ jsx(
+      SwitchIcon,
+      {
+        icon: offIcon,
+        shown: !checked,
+        animated,
+        size,
+        side: "off",
+        onInk
+      }
+    )
+  ] });
+};
+var SwitchHelper = ({ helperText, error, dataTestId, id }) => helperText ? /* @__PURE__ */ jsx(
+  FormHelperText,
+  {
+    id,
+    error,
+    sx: { mt: 1 },
+    "data-testid": dataTestId ? `${dataTestId}-helper` : "switch-helper",
+    children: helperText
+  }
+) : null;
+var SwitchLabel = ({ label, description, error, dataTestId, htmlFor, descriptionId, disabled }) => /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+  /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component: "label",
+      htmlFor,
+      variant: "body2",
+      fontWeight: 500,
+      color: error ? "error.main" : "text.primary",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        // The floor applies to the row the label shares with the control. A
+        // description already makes the row taller than 40px, so forcing it
+        // there would only add blank space.
+        ...description ? {} : { minHeight: sxRem(TAP_TARGET_MIN) },
+        // A disabled control's label toggles nothing, so it must not wear the
+        // cursor that says it does.
+        ...htmlFor && !disabled ? { cursor: "pointer" } : {}
+      },
+      "data-testid": dataTestId ? `${dataTestId}-label` : "switch-label",
+      children: label
+    }
+  ),
+  description && /* @__PURE__ */ jsx(
+    Typography,
+    {
+      id: descriptionId,
+      variant: "caption",
+      color: error ? "error.main" : "text.secondary",
+      sx: { display: "block", mt: 0.5 },
+      children: description
+    }
+  )
+] });
+var SwitchRow = ({
+  label,
+  description,
+  labelPosition,
+  error,
+  dataTestId,
+  htmlFor,
+  descriptionId,
+  disabled,
+  control
+}) => {
+  if (!label) return /* @__PURE__ */ jsx(Fragment, { children: control });
+  return /* @__PURE__ */ jsxs(LabelContainer, { labelPosition, error, children: [
+    labelPosition === "start" && control,
+    /* @__PURE__ */ jsx(
+      SwitchLabel,
+      {
+        label,
+        description,
+        error,
+        dataTestId,
+        htmlFor,
+        descriptionId,
+        disabled
+      }
+    ),
+    labelPosition !== "start" && control
+  ] });
+};
+
+export {
+  SwitchIcon,
+  SwitchControl,
+  SwitchHelper,
+  SwitchRow
+};
+//# sourceMappingURL=chunk-SJTQW6JK.js.map

package/dist/chunk-SOR2KLNR.js

@@ -0,0 +1,174 @@
+import {
+  bounceKeyframes
+} from "./chunk-CIEOLDFN.js";
+import {
+  getScaleDistance
+} from "./chunk-CB6DTWD5.js";
+import {
+  shadowInk
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/MapPreview/MapDecorations.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+import NavigationIcon from "@mui/icons-material/Navigation";
+import PlaceIcon from "@mui/icons-material/Place";
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MapRoads = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: "20%", left: "15%", width: "70%", height: "60%", opacity: 0.2 }, children: /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", style: { position: "absolute" }, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 10,50 Q 30,30 50,50 T 90,50",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "2",
+        fill: "none",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 50,10 L 50,90",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "1.5",
+        fill: "none",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 20,30 L 80,70",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "1",
+        fill: "none",
+        opacity: "0.2"
+      }
+    )
+  ] }) });
+};
+var DecorativePin = ({ top, left }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top, left, opacity: 0.6 }, children: /* @__PURE__ */ jsx(PlaceIcon, { sx: { fontSize: rem(theme, 20), color: theme.palette.primary.main } }) });
+};
+var MapDecorativePins = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DecorativePin, { top: "30%", left: "25%" }),
+  /* @__PURE__ */ jsx(DecorativePin, { top: "65%", left: "70%" })
+] });
+var MapCentreMarker = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": "map-marker",
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -100%)",
+        zIndex: 2,
+        filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`
+      },
+      children: /* @__PURE__ */ jsx(
+        LocationIcon,
+        {
+          sx: {
+            fontSize: rem(theme, 36),
+            color: theme.palette.error.main,
+            animation: "bounce 2s infinite",
+            "@keyframes bounce": bounceKeyframes(theme)
+          }
+        }
+      )
+    }
+  );
+};
+var MapScaleBar = ({ zoom }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        bottom: theme.spacing(2),
+        right: theme.spacing(2),
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        padding: theme.spacing(0.5, 1),
+        background: alpha(theme.palette.background.paper, 0.9),
+        borderRadius: theme.shape.borderRadius,
+        fontSize: rem(theme, 12),
+        color: theme.palette.text.secondary
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              width: rem(theme, 40),
+              height: rem(theme, 2),
+              background: theme.palette.text.secondary,
+              position: "relative",
+              // The end caps that make the bar read as a measurement.
+              "&::before, &::after": {
+                content: '""',
+                position: "absolute",
+                width: rem(theme, 2),
+                height: rem(theme, 6),
+                background: theme.palette.text.secondary
+              },
+              "&::before": { left: 0, top: rem(theme, -2) },
+              "&::after": { right: 0, top: rem(theme, -2) }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", children: getScaleDistance(zoom) })
+      ]
+    }
+  );
+};
+var MapCompass = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        top: theme.spacing(2),
+        left: theme.spacing(2),
+        width: rem(theme, 40),
+        height: rem(theme, 40),
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: alpha(theme.palette.background.paper, 0.9),
+        borderRadius: "50%",
+        boxShadow: theme.shadows[2]
+      },
+      children: /* @__PURE__ */ jsx(
+        NavigationIcon,
+        {
+          sx: { fontSize: rem(theme, 24), color: theme.palette.primary.main, transform: "rotate(-45deg)" }
+        }
+      )
+    }
+  );
+};
+
+export {
+  MapRoads,
+  MapDecorativePins,
+  MapCentreMarker,
+  MapScaleBar,
+  MapCompass
+};
+//# sourceMappingURL=chunk-SOR2KLNR.js.map

package/dist/chunk-SSX5ITPM.js

@@ -0,0 +1,91 @@
+import {
+  alpha
+} from "./chunk-F5H2ZXST.js";
+import {
+  ATTENTION_INK,
+  CELEBRATION_GRADIENTS,
+  CODE_EDITOR_CHROME,
+  DATA_VIZ_NEON,
+  EFFECT_GLOW,
+  GLASS_SLATE,
+  HIGHLIGHT_MARK,
+  MAP_SURFACE,
+  NEUTRAL_RAMP,
+  PANEL_SHADOW_INK,
+  SOCIAL_BRAND,
+  TIMING_PHASES
+} from "./chunk-N3GAFIXG.js";
+
+// src/tokens/ink.ts
+var DEFAULT_UI_INK = {
+  dataVizNeon: DATA_VIZ_NEON,
+  timingPhases: TIMING_PHASES,
+  mapSurface: MAP_SURFACE,
+  codeEditor: CODE_EDITOR_CHROME,
+  socialBrand: SOCIAL_BRAND,
+  celebration: CELEBRATION_GRADIENTS,
+  attention: ATTENTION_INK,
+  highlightMark: HIGHLIGHT_MARK,
+  glassSlate: GLASS_SLATE,
+  panelShadowInk: PANEL_SHADOW_INK,
+  effectGlow: EFFECT_GLOW
+};
+function uiInk(theme) {
+  return { ...DEFAULT_UI_INK, ...theme.uiInk };
+}
+var scrim = (theme, opacity) => alpha(theme.palette.common.black, opacity);
+var shadowInk = (theme, opacity = 1) => alpha(theme.palette.common.black, opacity);
+var sheen = (theme, opacity = 1) => alpha(theme.palette.common.white, opacity);
+var onMedia = (theme) => theme.palette.common.white;
+var absoluteInk = (theme) => ({
+  black: theme.palette.common.black,
+  white: theme.palette.common.white
+});
+var modeInk = (theme) => theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.common.black;
+var step = (theme, n) => theme.palette.grey[n] ?? NEUTRAL_RAMP[n];
+function neutralTones(theme) {
+  return {
+    /** A dark chip on a light UI: a tooltip, a context menu, a code block's dark ground. */
+    inverseSurface: step(theme, 900),
+    /** A raised dark panel. */
+    raised: step(theme, 800),
+    /** A neutral control's fill. */
+    strong: step(theme, 700),
+    /** A neutral accent: a badge, a strong scrollbar thumb. */
+    emphasis: step(theme, 600),
+    /** A quiet mark: an offline dot, a secondary icon. */
+    muted: step(theme, 500),
+    /** An idle connector, a light scrollbar thumb. */
+    subtle: step(theme, 400),
+    /** An idle track, a placeholder fill. */
+    track: step(theme, 300),
+    /** A faint track, a light scrollbar channel. */
+    faint: step(theme, 200),
+    /** A light code block, a light card. */
+    surface: step(theme, 100),
+    /** The lightest ground. */
+    canvas: step(theme, 50)
+  };
+}
+function controlNeutral(theme) {
+  return { main: step(theme, 700), dark: step(theme, 800), light: step(theme, 500), contrastText: theme.palette.common.white };
+}
+function softNeutral(theme) {
+  const main = step(theme, 500);
+  return { main, light: step(theme, 300), dark: step(theme, 700), contrastText: theme.palette.getContrastText(main) };
+}
+
+export {
+  DEFAULT_UI_INK,
+  uiInk,
+  scrim,
+  shadowInk,
+  sheen,
+  onMedia,
+  absoluteInk,
+  modeInk,
+  neutralTones,
+  controlNeutral,
+  softNeutral
+};
+//# sourceMappingURL=chunk-SSX5ITPM.js.map

package/dist/chunk-SSX5ITPM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/ink.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { alpha } from './color';\nimport {\n  ATTENTION_INK,\n  CELEBRATION_GRADIENTS,\n  CODE_EDITOR_CHROME,\n  DATA_VIZ_NEON,\n  EFFECT_GLOW,\n  GLASS_SLATE,\n  HIGHLIGHT_MARK,\n  MAP_SURFACE,\n  NEUTRAL_RAMP,\n  PANEL_SHADOW_INK,\n  SOCIAL_BRAND,\n  TIMING_PHASES,\n} from './ink.core';\n\n/**\n * EVERY COLOUR A COMPONENT DRAWS, BY ROLE (FUT-2593, under FUT-2585).\n *\n * A component never writes a hex, an `rgba()`, a named colour or a step on the\n * grey ramp; it asks for a ROLE, and the role reads the theme:\n *\n * - the palette's own roles, straight — `text.secondary`, `divider`,\n *   `action.hover`, a semantic `main` and its `contrastText`;\n * - the INK roles below, over the palette's two absolutes — a scrim behind a\n *   modal, a shadow's ink, a glass sheen, the ink on a photo;\n * - the NEUTRAL tones, over the grey ramp, named by what they do rather than by\n *   their step, so a host that re-greys the ramp re-greys every one;\n * - `uiInk(theme)`, the colours with no palette role at all (`./ink.core.ts`),\n *   which a host can replace through `theme.uiInk`;\n * - `surfaces(theme)` and `softSignal(theme, signal)` (`./surfaces.ts`), the\n *   grounds a board and its cards sit on and a signal's soft background,\n *   which a host can replace through `theme.uiSurfaces` / `theme.uiSoftSignal`.\n *\n * Every default is the value the component drew before, so moving a component\n * onto these changed nothing on screen. `scripts/ui-tokens-gate.mjs` refuses a\n * raw colour or a ramp step in a component from here on.\n */\n\nexport interface UiInk {\n  dataVizNeon: { series: readonly string[]; ground: string; accent: string };\n  timingPhases: Record<keyof typeof TIMING_PHASES, string>;\n  mapSurface: Record<keyof typeof MAP_SURFACE, string>;\n  codeEditor: { light: Record<keyof typeof CODE_EDITOR_CHROME.light, string>; dark: Record<keyof typeof CODE_EDITOR_CHROME.dark, string> };\n  socialBrand: typeof SOCIAL_BRAND;\n  celebration: { mint: readonly [string, string]; violet: readonly [string, string] };\n  attention: { from: string; to: string; glow: string };\n  highlightMark: string;\n  glassSlate: string;\n  panelShadowInk: string;\n  effectGlow: { muiBlue: string; brandIndigo: string };\n}\n\nexport const DEFAULT_UI_INK: UiInk = {\n  dataVizNeon: DATA_VIZ_NEON,\n  timingPhases: TIMING_PHASES,\n  mapSurface: MAP_SURFACE,\n  codeEditor: CODE_EDITOR_CHROME,\n  socialBrand: SOCIAL_BRAND,\n  celebration: CELEBRATION_GRADIENTS,\n  attention: ATTENTION_INK,\n  highlightMark: HIGHLIGHT_MARK,\n  glassSlate: GLASS_SLATE,\n  panelShadowInk: PANEL_SHADOW_INK,\n  effectGlow: EFFECT_GLOW,\n};\n\ndeclare module '@mui/material/styles' {\n  interface Theme {\n    /** Colours with no palette role, by name. See `@12-apps/ui/tokens`' `uiInk`. */\n    uiInk?: Partial<UiInk>;\n  }\n  interface ThemeOptions {\n    /**\n     * Replace any of the named colour sets `@12-apps/ui` draws with. Each set is\n     * replaced WHOLE (the merge is one level deep): to change `codeEditor.dark`,\n     * pass `codeEditor` with both `light` and `dark`.\n     */\n    uiInk?: Partial<UiInk>;\n  }\n}\n\n/** The named colour sets, with the host's `theme.uiInk` layered over the defaults. */\nexport function uiInk(theme: Theme): UiInk {\n  return { ...DEFAULT_UI_INK, ...theme.uiInk };\n}\n\n/* ── Ink roles over the palette's two absolutes ───────────────────────────── */\n\n/** The dim laid behind a modal, a lightbox, a spotlight. */\nexport const scrim = (theme: Theme, opacity: number): string => alpha(theme.palette.common.black, opacity);\n\n/** The colour of a drop shadow or a glow's dark half. */\nexport const shadowInk = (theme: Theme, opacity = 1): string => alpha(theme.palette.common.black, opacity);\n\n/** A highlight: a glass edge, a shimmer, a pressed-in light. */\nexport const sheen = (theme: Theme, opacity = 1): string => alpha(theme.palette.common.white, opacity);\n\n/** Ink that sits ON a photo, a gradient or a scrim — never on the page. */\nexport const onMedia = (theme: Theme): string => theme.palette.common.white;\n\n/**\n * The palette's two absolutes, for the places the hue must be exactly black or\n * white: a CSS mask's opaque stop, the black `dark` tooltip.\n */\nexport const absoluteInk = (theme: Theme): { black: string; white: string } => ({\n  black: theme.palette.common.black,\n  white: theme.palette.common.white,\n});\n\n/** The absolute that CONTRASTS with the mode's page: black in light mode, white in dark. */\nexport const modeInk = (theme: Theme): string =>\n  theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black;\n\n/* ── Neutral tones over the grey ramp ─────────────────────────────────────── */\n\nconst step = (theme: Theme, n: keyof typeof NEUTRAL_RAMP): string => theme.palette.grey[n] ?? NEUTRAL_RAMP[n];\n\n/**\n * The neutral scale by ROLE. The names say what a tone is for, so a component\n * reads `neutralTones(theme).track` rather than \"grey 300\", and a host that\n * re-greys the ramp moves every one of them together.\n */\nexport function neutralTones(theme: Theme) {\n  return {\n    /** A dark chip on a light UI: a tooltip, a context menu, a code block's dark ground. */\n    inverseSurface: step(theme, 900),\n    /** A raised dark panel. */\n    raised: step(theme, 800),\n    /** A neutral control's fill. */\n    strong: step(theme, 700),\n    /** A neutral accent: a badge, a strong scrollbar thumb. */\n    emphasis: step(theme, 600),\n    /** A quiet mark: an offline dot, a secondary icon. */\n    muted: step(theme, 500),\n    /** An idle connector, a light scrollbar thumb. */\n    subtle: step(theme, 400),\n    /** An idle track, a placeholder fill. */\n    track: step(theme, 300),\n    /** A faint track, a light scrollbar channel. */\n    faint: step(theme, 200),\n    /** A light code block, a light card. */\n    surface: step(theme, 100),\n    /** The lightest ground. */\n    canvas: step(theme, 50),\n  };\n}\n\n/** The four-stop accent a component's `neutral` colour resolves to. */\nexport interface NeutralAccent {\n  main: string;\n  light: string;\n  dark: string;\n  contrastText: string;\n}\n\n/**\n * The neutral the CONTROLS draw with — grey 700, pressed 800, soft 500, white\n * ink — for `Button`, `Toggle`, `RadioGroup`, `Switch`, `Slider`, `Textarea`,\n * `InputOTP`. Not `accentFor(theme, 'neutral')` (600/400/800, a badge's): the\n * controls have always been one step darker.\n */\nexport function controlNeutral(theme: Theme): NeutralAccent {\n  return { main: step(theme, 700), dark: step(theme, 800), light: step(theme, 500), contrastText: theme.palette.common.white };\n}\n\n/** The softer neutral a notice or a progress track draws with — 500 on a 300 ground, 700 pressed. */\nexport function softNeutral(theme: Theme): NeutralAccent {\n  const main = step(theme, 500);\n  return { main, light: step(theme, 300), dark: step(theme, 700), contrastText: theme.palette.getContrastText(main) };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuDO,IAAM,iBAAwB;AAAA,EACnC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AACd;AAkBO,SAAS,MAAM,OAAqB;AACzC,SAAO,EAAE,GAAG,gBAAgB,GAAG,MAAM,MAAM;AAC7C;AAKO,IAAM,QAAQ,CAAC,OAAc,YAA4B,MAAM,MAAM,QAAQ,OAAO,OAAO,OAAO;AAGlG,IAAM,YAAY,CAAC,OAAc,UAAU,MAAc,MAAM,MAAM,QAAQ,OAAO,OAAO,OAAO;AAGlG,IAAM,QAAQ,CAAC,OAAc,UAAU,MAAc,MAAM,MAAM,QAAQ,OAAO,OAAO,OAAO;AAG9F,IAAM,UAAU,CAAC,UAAyB,MAAM,QAAQ,OAAO;AAM/D,IAAM,cAAc,CAAC,WAAoD;AAAA,EAC9E,OAAO,MAAM,QAAQ,OAAO;AAAA,EAC5B,OAAO,MAAM,QAAQ,OAAO;AAC9B;AAGO,IAAM,UAAU,CAAC,UACtB,MAAM,QAAQ,SAAS,SAAS,MAAM,QAAQ,OAAO,QAAQ,MAAM,QAAQ,OAAO;AAIpF,IAAM,OAAO,CAAC,OAAc,MAAyC,MAAM,QAAQ,KAAK,CAAC,KAAK,aAAa,CAAC;AAOrG,SAAS,aAAa,OAAc;AACzC,SAAO;AAAA;AAAA,IAEL,gBAAgB,KAAK,OAAO,GAAG;AAAA;AAAA,IAE/B,QAAQ,KAAK,OAAO,GAAG;AAAA;AAAA,IAEvB,QAAQ,KAAK,OAAO,GAAG;AAAA;AAAA,IAEvB,UAAU,KAAK,OAAO,GAAG;AAAA;AAAA,IAEzB,OAAO,KAAK,OAAO,GAAG;AAAA;AAAA,IAEtB,QAAQ,KAAK,OAAO,GAAG;AAAA;AAAA,IAEvB,OAAO,KAAK,OAAO,GAAG;AAAA;AAAA,IAEtB,OAAO,KAAK,OAAO,GAAG;AAAA;AAAA,IAEtB,SAAS,KAAK,OAAO,GAAG;AAAA;AAAA,IAExB,QAAQ,KAAK,OAAO,EAAE;AAAA,EACxB;AACF;AAgBO,SAAS,eAAe,OAA6B;AAC1D,SAAO,EAAE,MAAM,KAAK,OAAO,GAAG,GAAG,MAAM,KAAK,OAAO,GAAG,GAAG,OAAO,KAAK,OAAO,GAAG,GAAG,cAAc,MAAM,QAAQ,OAAO,MAAM;AAC7H;AAGO,SAAS,YAAY,OAA6B;AACvD,QAAM,OAAO,KAAK,OAAO,GAAG;AAC5B,SAAO,EAAE,MAAM,OAAO,KAAK,OAAO,GAAG,GAAG,MAAM,KAAK,OAAO,GAAG,GAAG,cAAc,MAAM,QAAQ,gBAAgB,IAAI,EAAE;AACpH;","names":[]}