@12-apps/ui 6.89.0 → 6.89.2

package/dist/_internal/components/data-display/DayRuler/DayRuler.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   DayRuler
-} from "../../../../chunk-FKF34YJV.js";
-import "../../../../chunk-S4ITA3FA.js";
-import "../../../../chunk-EEK2NK4W.js";
+} from "../../../../chunk-HMEGQKNQ.js";
+import "../../../../chunk-ACM3HHZY.js";
+import "../../../../chunk-G2PVUPE7.js";
 import "../../../../chunk-Y3F2F36I.js";
 import "../../../../chunk-K3IB7S7Q.js";
 import "../../../../chunk-YMYJO2CZ.js";

package/dist/_internal/components/data-display/DayRuler/DayRuler.parts.js

@@ -3,8 +3,8 @@ import {
   Coverage,
   RulerRow,
   spanOf
-} from "../../../../chunk-S4ITA3FA.js";
-import "../../../../chunk-EEK2NK4W.js";
+} from "../../../../chunk-ACM3HHZY.js";
+import "../../../../chunk-G2PVUPE7.js";
 import "../../../../chunk-YMYJO2CZ.js";
 import "../../../../chunk-7ZQ3KQ7J.js";
 import "../../../../chunk-LE5JYNR7.js";

package/dist/_internal/components/data-display/DayRuler/DayRuler.styles.js

@@ -7,6 +7,7 @@ import {
   breakSx,
   coverageCellSx,
   coverageLabelSx,
+  coverageStrength,
   coverageSx,
   groupTitleSx,
   handleSx,
@@ -18,7 +19,7 @@ import {
   skeletonTrackSx,
   trackSx,
   whoSx
-} from "../../../../chunk-EEK2NK4W.js";
+} from "../../../../chunk-G2PVUPE7.js";
 import "../../../../chunk-7ZQ3KQ7J.js";
 import "../../../../chunk-4HK4FVMV.js";
 import "../../../../chunk-TZ23DNKY.js";
@@ -39,6 +40,7 @@ export {
   breakSx,
   coverageCellSx,
   coverageLabelSx,
+  coverageStrength,
   coverageSx,
   groupTitleSx,
   handleSx,

package/dist/_internal/components/data-display/index.js

@@ -218,9 +218,9 @@ import {
 import "../../../chunk-D3OXTS7Y.js";
 import {
   DayRuler
-} from "../../../chunk-FKF34YJV.js";
-import "../../../chunk-S4ITA3FA.js";
-import "../../../chunk-EEK2NK4W.js";
+} from "../../../chunk-HMEGQKNQ.js";
+import "../../../chunk-ACM3HHZY.js";
+import "../../../chunk-G2PVUPE7.js";
 import "../../../chunk-Y3F2F36I.js";
 import "../../../chunk-K3IB7S7Q.js";
 import "../../../chunk-YMYJO2CZ.js";

package/dist/_internal/components/form/ToggleGroup/ToggleGroup.js

@@ -1,6 +1,6 @@
 import {
   ToggleGroup
-} from "../../../../chunk-U2QV4TTZ.js";
+} from "../../../../chunk-HWQM5D3V.js";
 import "../../../../chunk-RGVNXES5.js";
 import "../../../../chunk-GDN2LUTZ.js";
 import "../../../../chunk-7ZADLRLP.js";

package/dist/_internal/components/form/index.js

@@ -94,7 +94,7 @@ import "../../../chunk-NKHNUTTY.js";
 import "../../../chunk-ONMSTW4B.js";
 import {
   ToggleGroup
-} from "../../../chunk-U2QV4TTZ.js";
+} from "../../../chunk-HWQM5D3V.js";
 import {
   MenuSelect
 } from "../../../chunk-OQW4OERS.js";

package/dist/_internal/components/form/total-form/Fields/ToggleField.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   ToggleField
-} from "../../../../../chunk-AYJGRQT4.js";
+} from "../../../../../chunk-RLTYBV4N.js";
 import "../../../../../chunk-4XK6JQ4D.js";
 import "../../../../../chunk-ONMSTW4B.js";
-import "../../../../../chunk-U2QV4TTZ.js";
+import "../../../../../chunk-HWQM5D3V.js";
 import "../../../../../chunk-C3UKR3NT.js";
 import "../../../../../chunk-D6KL74KI.js";
 import "../../../../../chunk-RGVNXES5.js";

package/dist/_internal/components/form/total-form/Fields/index.js

@@ -1,4 +1,4 @@
-import "../../../../../chunk-3Y6NO5XL.js";
+import "../../../../../chunk-BR3WBTTQ.js";
 import {
   TextField
 } from "../../../../../chunk-3IX2TP4I.js";
@@ -13,13 +13,13 @@ import {
 } from "../../../../../chunk-NQ6P7O7C.js";
 import {
   ToggleField
-} from "../../../../../chunk-AYJGRQT4.js";
+} from "../../../../../chunk-RLTYBV4N.js";
 import "../../../../../chunk-4XK6JQ4D.js";
 import "../../../../../chunk-II3YNC5S.js";
 import "../../../../../chunk-NZBEE2PR.js";
 import "../../../../../chunk-NKHNUTTY.js";
 import "../../../../../chunk-ONMSTW4B.js";
-import "../../../../../chunk-U2QV4TTZ.js";
+import "../../../../../chunk-HWQM5D3V.js";
 import "../../../../../chunk-OQW4OERS.js";
 import "../../../../../chunk-6VTOGR36.js";
 import "../../../../../chunk-IYC7NPX7.js";

package/dist/_internal/components/index.js

@@ -324,7 +324,7 @@ import "../../chunk-NKHNUTTY.js";
 import "../../chunk-ONMSTW4B.js";
 import {
   ToggleGroup
-} from "../../chunk-U2QV4TTZ.js";
+} from "../../chunk-HWQM5D3V.js";
 import {
   MenuSelect
 } from "../../chunk-OQW4OERS.js";
@@ -807,9 +807,9 @@ import {
 import "../../chunk-D3OXTS7Y.js";
 import {
   DayRuler
-} from "../../chunk-FKF34YJV.js";
-import "../../chunk-S4ITA3FA.js";
-import "../../chunk-EEK2NK4W.js";
+} from "../../chunk-HMEGQKNQ.js";
+import "../../chunk-ACM3HHZY.js";
+import "../../chunk-G2PVUPE7.js";
 import "../../chunk-Y3F2F36I.js";
 import "../../chunk-K3IB7S7Q.js";
 import "../../chunk-YMYJO2CZ.js";

package/dist/{chunk-S4ITA3FA.js → chunk-ACM3HHZY.js}

@@ -14,7 +14,7 @@ import {
   rowSx,
   trackSx,
   whoSx
-} from "./chunk-EEK2NK4W.js";
+} from "./chunk-G2PVUPE7.js";
 import {
   useTextFits
 } from "./chunk-YMYJO2CZ.js";
@@ -205,4 +205,4 @@ export {
   Coverage,
   Axis
 };
-//# sourceMappingURL=chunk-S4ITA3FA.js.map
+//# sourceMappingURL=chunk-ACM3HHZY.js.map

package/dist/{chunk-3Y6NO5XL.js → chunk-BR3WBTTQ.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk-NQ6P7O7C.js";
 import {
   ToggleField
-} from "./chunk-AYJGRQT4.js";
+} from "./chunk-RLTYBV4N.js";
 import {
   __export
 } from "./chunk-PZ5AY32C.js";
@@ -30,4 +30,4 @@ __export(Fields_exports, {
 export {
   Fields_exports
 };
-//# sourceMappingURL=chunk-3Y6NO5XL.js.map
+//# sourceMappingURL=chunk-BR3WBTTQ.js.map

package/dist/{chunk-EEK2NK4W.js → chunk-G2PVUPE7.js}

@@ -6,9 +6,6 @@ import {
   blockToneStyles,
   breakHatch
 } from "./chunk-4HK4FVMV.js";
-import {
-  softSignal
-} from "./chunk-TZ23DNKY.js";
 import {
   FIELD_BORDER_WIDTH
 } from "./chunk-O6MJWHU5.js";
@@ -18,6 +15,7 @@ import {
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/DayRuler/DayRuler.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
 function rootSx(hasActions) {
   return (theme) => ({
     containerType: "inline-size",
@@ -55,19 +53,30 @@ function coverageSx(hours) {
     height: rem(theme, DAY_RULER_METRICS.coverage.height)
   });
 }
+function coverageStrength(count) {
+  if (count <= 0) return 0;
+  return Math.min(0.85, 0.18 + count * 0.09);
+}
 function coverageCellSx(count) {
-  return (theme) => ({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: rem(theme, DAY_RULER_METRICS.coverage.font),
-    borderRadius: rem(theme, DAY_RULER_METRICS.coverage.radius),
-    color: theme.palette.text.primary,
-    backgroundColor: count > 0 ? softSignal(theme, "success") : theme.palette.action.hover,
-    border: count > 0 ? `1px solid ${theme.palette.success.main}` : "1px solid transparent",
-    minWidth: 0,
-    overflow: "hidden"
-  });
+  return (theme) => {
+    const strength = coverageStrength(count);
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: rem(theme, DAY_RULER_METRICS.coverage.font),
+      borderRadius: rem(theme, DAY_RULER_METRICS.coverage.radius),
+      color: theme.palette.text.primary,
+      // A tonal fill, as the prototype's coverage line draws it — never an outline (FUT-3831). It is
+      // the success colour over the page, so a staffed hour is LIGHTER than an empty one in dark mode
+      // and plainly green in light, where the soft-signal blend read as the empty grey. The hairline
+      // stays transparent so a count never shifts its cell.
+      backgroundColor: strength > 0 ? alpha(theme.palette.success.main, strength) : theme.palette.action.hover,
+      border: "1px solid transparent",
+      minWidth: 0,
+      overflow: "hidden"
+    };
+  };
 }
 var axisSx = (theme) => ({
   position: "relative",
@@ -262,6 +271,7 @@ export {
   lineSx,
   coverageLabelSx,
   coverageSx,
+  coverageStrength,
   coverageCellSx,
   axisSx,
   groupTitleSx,
@@ -278,4 +288,4 @@ export {
   skeletonTrackSx,
   skeletonNameSx
 };
-//# sourceMappingURL=chunk-EEK2NK4W.js.map
+//# sourceMappingURL=chunk-G2PVUPE7.js.map

package/dist/chunk-G2PVUPE7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DayRuler/DayRuler.styles.ts"],"sourcesContent":["import { alpha, type CSSObject, type SxProps, type Theme } from '@mui/material/styles/index.js';\n\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { actualBarColor, blockToneStyles, breakHatch } from '../ScheduleGrid/schedule-tones';\nimport type { ScheduleBlockTone } from '../ScheduleGrid/ScheduleGrid.types';\nimport { DAY_RULER_METRICS as M } from './DayRuler.metrics';\n\n/** The container narrow rows answer to (container queries, never media queries). */\n/**\n * `--dr-actions`: the actions column, 220px when any row has actions and\n * nothing when none does (no empty column at the end of every row).\n */\nexport function rootSx(hasActions: boolean): SxProps<Theme> {\n  return (theme: Theme) => ({\n    containerType: 'inline-size',\n    minWidth: 0,\n    width: '100%',\n    userSelect: 'none',\n    '--dr-actions': hasActions ? rem(theme, M.sideColumn) : '0%',\n  });\n}\n\n/** `@container` below which a row stacks (the coverage and axis rows go full width). Bounds are \"from px up\". */\nfunction compact(theme: Theme): string {\n  return `@container (width < ${rem(theme, M.compactBelow)})`;\n}\n\n/** `@container` below which the pane is phone-sized: no coverage row, no axis. Bounds are \"from px up\". */\nfunction phone(theme: Theme): string {\n  return `@container (width < ${rem(theme, M.phoneBelow)})`;\n}\n\n/** Name · track · actions, the coverage row and the axis row share these columns on a computer. */\nexport const lineSx: SxProps<Theme> = (theme: Theme) => ({\n  display: 'grid',\n  gridTemplateColumns: `${rem(theme, M.sideColumn)} minmax(0, 1fr) var(--dr-actions)`,\n  columnGap: rem(theme, M.gap),\n  alignItems: 'center',\n  // Stacked: across the full width, like the tracks; the label above the counts.\n  [compact(theme)]: {\n    gridTemplateColumns: 'minmax(0, 1fr)',\n    rowGap: rem(theme, M.coverage.gap),\n    '& > span:empty': { display: 'none' },\n  },\n  [phone(theme)]: { display: 'none' },\n});\n\nexport const coverageLabelSx: SxProps<Theme> = { fontSize: sxRem(M.meta), color: 'text.secondary' };\n\nexport function coverageSx(hours: number): SxProps<Theme> {\n  return (theme: Theme) => ({\n    display: 'grid',\n    gridTemplateColumns: `repeat(${hours}, minmax(0, 1fr))`,\n    gap: rem(theme, M.coverage.gap),\n    height: rem(theme, M.coverage.height),\n  });\n}\n\n/**\n * How strongly a staffed hour is filled: the prototype's tonal success step, deeper with each\n * person on the escala (0.18 + 0.09 per person, at most 0.85). An empty hour has none.\n */\nexport function coverageStrength(count: number): number {\n  if (count <= 0) return 0;\n  return Math.min(0.85, 0.18 + count * 0.09);\n}\n\nexport function coverageCellSx(count: number): SxProps<Theme> {\n  return (theme: Theme) => {\n    const strength = coverageStrength(count);\n    return {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      fontSize: rem(theme, M.coverage.font),\n      borderRadius: rem(theme, M.coverage.radius),\n      color: theme.palette.text.primary,\n      // A tonal fill, as the prototype's coverage line draws it — never an outline (FUT-3831). It is\n      // the success colour over the page, so a staffed hour is LIGHTER than an empty one in dark mode\n      // and plainly green in light, where the soft-signal blend read as the empty grey. The hairline\n      // stays transparent so a count never shifts its cell.\n      backgroundColor: strength > 0 ? alpha(theme.palette.success.main, strength) : theme.palette.action.hover,\n      border: '1px solid transparent',\n      minWidth: 0,\n      overflow: 'hidden',\n    };\n  };\n}\n\nexport const axisSx: SxProps<Theme> = (theme: Theme) => ({\n  position: 'relative',\n  height: rem(theme, M.axis.height),\n  fontSize: rem(theme, M.axis.font),\n  color: theme.palette.text.secondary,\n  mt: 0.5,\n  '& > span': { position: 'absolute', transform: 'translateX(-50%)', whiteSpace: 'nowrap' },\n});\n\nexport const groupTitleSx: SxProps<Theme> = {\n  fontSize: sxRem(M.groupTitle),\n  letterSpacing: '0.05em',\n  textTransform: 'uppercase',\n  color: 'text.secondary',\n  fontWeight: 500,\n  pt: 1.5,\n  pb: 0.5,\n  m: 0,\n};\n\n/**\n * One person's row. A computer: name · track · actions on one line. A narrow\n * ruler (a phone): name and actions on top, the track under them, full width.\n */\nexport const rowSx: SxProps<Theme> = (theme: Theme) => ({\n  display: 'grid',\n  gridTemplateColumns: `${rem(theme, M.sideColumn)} minmax(0, 1fr) var(--dr-actions)`,\n  gridTemplateAreas: '\"who track actions\"',\n  columnGap: rem(theme, M.gap),\n  alignItems: 'center',\n  py: rem(theme, M.rowPaddingY),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  [compact(theme)]: {\n    gridTemplateColumns: 'minmax(0, 1fr) auto',\n    gridTemplateAreas: '\"who actions\" \"track track\"',\n    rowGap: theme.spacing(1),\n    py: theme.spacing(1.5),\n  },\n});\n\nexport const whoSx: SxProps<Theme> = { gridArea: 'who', minWidth: 0 };\n\nexport const actionsSx: SxProps<Theme> = {\n  gridArea: 'actions',\n  display: 'flex',\n  gap: 1,\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  flexWrap: 'wrap',\n  minWidth: 0,\n};\n\n/** A break inside a block: a hatched band across its height, under its text. `span` is in % of the block. */\nexport function breakSx(span: Span): SxProps<Theme> {\n  return (theme: Theme) => ({\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: `${span.at}%`,\n    width: `${span.share}%`,\n    background: breakHatch(theme, rem(theme, M.breakStripe.ink), rem(theme, M.breakStripe.ink + M.breakStripe.gap)),\n    pointerEvents: 'none',\n    // Where the band meets an end of the block it takes the block's rounding:\n    // on a phone the block does not clip (its hit area reaches past it).\n    ...(span.at <= 0.01 ? { borderTopLeftRadius: 'inherit', borderBottomLeftRadius: 'inherit' } : {}),\n    ...(span.at + span.share >= 99.99 ? { borderTopRightRadius: 'inherit', borderBottomRightRadius: 'inherit' } : {}),\n  });\n}\n\n/** The hour lines: one every `every` hours of a `hours`-long ruler. */\nfunction hourLines(theme: Theme, hours: number, every: number): string {\n  const line = theme.palette.divider;\n  const step = `${(100 * every) / hours}%`;\n  const hairline = `${FIELD_BORDER_WIDTH}px`;\n  return `repeating-linear-gradient(to right, ${line} 0, ${line} ${hairline}, transparent ${hairline}, transparent ${step})`;\n}\n\nexport function trackSx(opts: { hours: number; tickHours: number; interactive: boolean }): SxProps<Theme> {\n  return (theme: Theme) => ({\n    gridArea: 'track',\n    position: 'relative',\n    height: rem(theme, M.track.height),\n    borderRadius: rem(theme, M.track.radius),\n    backgroundColor: theme.palette.action.hover,\n    backgroundImage: hourLines(theme, opts.hours, 1),\n    cursor: opts.interactive ? 'crosshair' : 'default',\n    touchAction: 'auto',\n    outline: 'none',\n    '&:focus-visible': { boxShadow: `0 0 0 ${rem(theme, M.ring)} ${theme.palette.primary.main}` },\n    [compact(theme)]: {\n      height: rem(theme, M.track.compactHeight),\n      borderRadius: rem(theme, M.track.compactRadius),\n      backgroundImage: hourLines(theme, opts.hours, opts.tickHours),\n    },\n  });\n}\n\n/** Where a bar starts and how long it is, both in % of the track. */\nexport interface Span {\n  at: number;\n  share: number;\n}\n\nexport function blockSx(tone: ScheduleBlockTone, span: Span, opts: { selected: boolean; movable: boolean }): SxProps<Theme> {\n  return (theme: Theme): CSSObject => ({\n    ...blockToneStyles(theme, tone, true),\n    position: 'absolute',\n    left: `${span.at}%`,\n    width: `${span.share}%`,\n    top: rem(theme, M.block.top),\n    height: rem(theme, M.block.height),\n    boxSizing: 'border-box',\n    borderRadius: rem(theme, M.block.radius),\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: `0 ${rem(theme, M.block.paddingX)}`,\n    margin: 0,\n    font: 'inherit',\n    fontSize: rem(theme, M.block.font),\n    fontWeight: 500,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    cursor: opts.movable ? 'grab' : 'pointer',\n    boxShadow: opts.selected ? `0 0 0 ${rem(theme, M.ring)} ${theme.palette.primary.main}` : 'none',\n    '&:focus-visible': { outline: `${rem(theme, M.ring)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, M.ringOffset) },\n    '& [data-dr-text]': { position: 'relative', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 },\n    '& [data-dr-text=\"short\"]': { display: 'none' },\n    [compact(theme)]: {\n      top: rem(theme, M.block.compactTop),\n      height: rem(theme, M.block.compactHeight),\n      // A 40px hit area around the 20px bar, the look unchanged: the text cuts\n      // itself (its spans ellipsize), so the block need not clip.\n      overflow: 'visible',\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        left: 0,\n        right: 0,\n        top: '50%',\n        height: rem(theme, M.block.hitArea),\n        transform: 'translateY(-50%)',\n      },\n      '&[data-narrow] [data-dr-text=\"full\"]': { display: 'none' },\n      '&[data-narrow] [data-dr-text=\"short\"]': { display: 'inline' },\n    },\n  });\n}\n\nexport function handleSx(side: 'l' | 'r'): SxProps<Theme> {\n  return (theme: Theme) => ({\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    [side === 'l' ? 'left' : 'right']: 0,\n    width: rem(theme, M.handle),\n    cursor: 'ew-resize',\n  });\n}\n\nexport function actualSx(span: Span): SxProps<Theme> {\n  return (theme: Theme) => ({\n    position: 'absolute',\n    left: `${span.at}%`,\n    width: `${span.share}%`,\n    top: rem(theme, M.actual.top),\n    height: rem(theme, M.actual.height),\n    borderRadius: rem(theme, M.actual.radius),\n    backgroundColor: actualBarColor(theme),\n    pointerEvents: 'none',\n    [compact(theme)]: { top: rem(theme, M.actual.compactTop), height: rem(theme, M.actual.compactHeight) },\n  });\n}\n\nexport function actualLabelSx(left: number): SxProps<Theme> {\n  return (theme: Theme) => ({\n    position: 'absolute',\n    left: `calc(${left}% + ${rem(theme, M.actualLabel.offset)})`,\n    top: rem(theme, M.actualLabel.top),\n    fontSize: rem(theme, M.actualLabel.font),\n    color: theme.palette.text.secondary,\n    whiteSpace: 'nowrap',\n    pointerEvents: 'none',\n    [compact(theme)]: { display: 'none' },\n  });\n}\n\nexport function nowSx(left: number): SxProps<Theme> {\n  return (theme: Theme) => ({\n    position: 'absolute',\n    left: `${left}%`,\n    top: rem(theme, -M.now.overhang),\n    bottom: rem(theme, -M.now.overhang),\n    width: rem(theme, M.now.width),\n    backgroundColor: theme.palette.primary.main,\n    pointerEvents: 'none',\n  });\n}\n\nexport const skeletonTrackSx: SxProps<Theme> = (theme: Theme) => ({\n  gridArea: 'track',\n  height: rem(theme, M.track.height),\n  borderRadius: rem(theme, M.track.radius),\n  backgroundColor: theme.palette.action.hover,\n});\n\nexport const skeletonNameSx: SxProps<Theme> = (theme: Theme) => ({\n  gridArea: 'who',\n  height: rem(theme, M.name),\n  width: '60%',\n  borderRadius: rem(theme, M.skeletonNameRadius),\n  backgroundColor: theme.palette.action.hover,\n});\n"],"mappings":"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","names":[]}

package/dist/{chunk-FKF34YJV.js → chunk-HMEGQKNQ.js}

@@ -2,14 +2,14 @@ import {
   Axis,
   Coverage,
   RulerRow
-} from "./chunk-S4ITA3FA.js";
+} from "./chunk-ACM3HHZY.js";
 import {
   groupTitleSx,
   rootSx,
   rowSx,
   skeletonNameSx,
   skeletonTrackSx
-} from "./chunk-EEK2NK4W.js";
+} from "./chunk-G2PVUPE7.js";
 import {
   handleBlockKey,
   keyCreateSpan
@@ -117,4 +117,4 @@ function DayRuler(props) {
 export {
   DayRuler
 };
-//# sourceMappingURL=chunk-FKF34YJV.js.map
+//# sourceMappingURL=chunk-HMEGQKNQ.js.map

package/dist/{chunk-U2QV4TTZ.js → chunk-HWQM5D3V.js}

@@ -67,6 +67,23 @@ var StyledToggleGroup = styled(ToggleButtonGroup, {
     }
   };
 });
+function selectedSx(theme, palette, gradient) {
+  const ring = rem(theme, FIELD_BORDER_WIDTH * 2);
+  return {
+    "&.Mui-selected": {
+      backgroundColor: palette.main,
+      color: palette.contrastText,
+      ...gradient && { background: `linear-gradient(135deg, ${palette.main}, ${palette.dark})` }
+    },
+    "&.Mui-selected:hover": {
+      backgroundColor: palette.dark,
+      color: palette.contrastText,
+      ...gradient && { background: `linear-gradient(135deg, ${palette.dark}, ${palette.dark})` }
+    },
+    "&.Mui-selected.Mui-focusVisible": { backgroundColor: palette.main, color: palette.contrastText },
+    "&.Mui-focusVisible": { outline: `${ring} solid ${palette.main}`, outlineOffset: ring }
+  };
+}
 var ToggleGroup = forwardRef(
   ({
     variant = "single",
@@ -116,13 +133,7 @@ var ToggleGroup = forwardRef(
               minHeight: (theme2) => fieldHeight(theme2, asFieldSize(size)),
               paddingTop: 0,
               paddingBottom: 0,
-              "&.Mui-selected": {
-                backgroundColor: colorPalette.main,
-                color: colorPalette.contrastText,
-                ...gradient && {
-                  background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark})`
-                }
-              }
+              ...selectedSx(theme, colorPalette, gradient)
             },
             children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
               option.icon,
@@ -140,4 +151,4 @@ ToggleGroup.displayName = "ToggleGroup";
 export {
   ToggleGroup
 };
-//# sourceMappingURL=chunk-U2QV4TTZ.js.map
+//# sourceMappingURL=chunk-HWQM5D3V.js.map

package/dist/chunk-HWQM5D3V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport ToggleButton from '@mui/material/ToggleButton/index.js';\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup/index.js';\nimport { alpha, useTheme, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React, { forwardRef } from 'react';\n\nimport type { ToggleGroupProps } from './ToggleGroup.types';\nimport { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { controlNeutral } from '../../../tokens/ink';\nimport { rem, remPx, rems } from '../../../tokens/relative';\nimport { cssLengthToPx } from '../../../tokens/css-units';\n\n/** The glass frame's padding (4px at the design scale); its border is the field hairline. */\nconst glassPadding = (theme: Theme): string => rem(theme, 4);\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n  if (color === 'neutral') {\n    const neutral = controlNeutral(theme);\n    return { ...neutral, contrastText: theme.palette.getContrastText(neutral.main) };\n  }\n\n  const colorMap = {\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\n  const palette = colorMap[color as keyof typeof colorMap] || theme.palette.primary;\n\n  // Ensure palette has required properties\n  return {\n    main: palette.main,\n    dark: palette.dark || palette.main,\n    light: palette.light || palette.main,\n    contrastText: palette.contrastText || theme.palette.getContrastText(palette.main),\n  };\n};\n\n/** The glass frame's radius: the field radius plus its padding, the buttons' margin and its border. */\nconst glassFrameRadius = (theme: Theme): number =>\n  fieldRadius(theme) + remPx(theme, 4) + cssLengthToPx(theme.spacing(0.5), 4) + FIELD_BORDER_WIDTH;\n\nconst StyledToggleGroup = styled(ToggleButtonGroup, {\n  shouldForwardProp: (prop) => !['customColor', 'customSize', 'glass'].includes(prop as string),\n})<{\n  customColor?: string;\n  customSize?: string;\n  glass?: boolean;\n}>(({ theme, glass }) => {\n  // Each button is the field, so it takes the field radius. The glass frame\n  // around them is inset by its padding, the buttons' margin and its border,\n  // and rounds by that much more so the two corners stay concentric.\n  const radius = fieldRadius(theme);\n  return {\n    backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',\n    backdropFilter: glass ? `blur(${rem(theme, 20)})` : 'none',\n    borderRadius: glass ? glassFrameRadius(theme) : radius,\n    padding: glass ? glassPadding(theme) : 0,\n    border: glass ? `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',\n\n    '& .MuiToggleButtonGroup-grouped': {\n      margin: theme.spacing(0.5),\n      border: 0,\n      borderRadius: `${radius}px !important`,\n    },\n  };\n});\n\ntype Palette = ReturnType<typeof getColorFromTheme>;\n\n/**\n * The chosen option's fill, in every state. MUI's own `.Mui-selected:hover` (and\n * its focus-visible) out-rank a plain `.Mui-selected` rule and paint the chosen\n * option a translucent grey under white text: hovered — as it always is right\n * after a click — or focused, it stopped reading as chosen (FUT-3831). It keeps\n * its colour's fill, the darker step on hover, and keyboard focus adds a ring,\n * never a new fill.\n */\nfunction selectedSx(theme: Theme, palette: Palette, gradient: boolean) {\n  const ring = rem(theme, FIELD_BORDER_WIDTH * 2);\n  return {\n    '&.Mui-selected': {\n      backgroundColor: palette.main,\n      color: palette.contrastText,\n      ...(gradient && { background: `linear-gradient(135deg, ${palette.main}, ${palette.dark})` }),\n    },\n    '&.Mui-selected:hover': {\n      backgroundColor: palette.dark,\n      color: palette.contrastText,\n      ...(gradient && { background: `linear-gradient(135deg, ${palette.dark}, ${palette.dark})` }),\n    },\n    '&.Mui-selected.Mui-focusVisible': { backgroundColor: palette.main, color: palette.contrastText },\n    '&.Mui-focusVisible': { outline: `${ring} solid ${palette.main}`, outlineOffset: ring },\n  };\n}\n\nexport const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(\n  (\n    {\n      variant = 'single',\n      color = 'primary',\n      size = 'md',\n      options,\n      glass = false,\n      gradient = false,\n      value,\n      onChange,\n      dataTestId = 'toggle-group',\n      ...props\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const colorPalette = getColorFromTheme(theme, color);\n\n    const sizeMap = {\n      xs: { padding: rems(theme, 4, 8), fontSize: rem(theme, 12) },\n      sm: { padding: rems(theme, 6, 12), fontSize: rem(theme, 14) },\n      md: { padding: rems(theme, 8, 16), fontSize: rem(theme, 16) },\n      lg: { padding: rems(theme, 10, 20), fontSize: rem(theme, 18) },\n      xl: { padding: rems(theme, 12, 24), fontSize: rem(theme, 20) },\n    };\n\n    return (\n      <StyledToggleGroup\n        ref={ref}\n        customColor={color}\n        customSize={size}\n        glass={glass}\n        value={value}\n        onChange={onChange}\n        exclusive={variant === 'exclusive' || variant === 'single'}\n        data-testid={dataTestId}\n        {...props}\n      >\n        {options.map((option) => (\n          <ToggleButton\n            key={option.value}\n            value={option.value}\n            disabled={option.disabled}\n            data-testid={`${dataTestId}-item-${option.value}`}\n            sx={{\n              textTransform: 'none',\n              fontWeight: 500,\n              transition: 'all 0.3s ease',\n              ...sizeMap[size as keyof typeof sizeMap],\n              // The theme's field height for the size; the label centres in it.\n              minHeight: (theme) => fieldHeight(theme, asFieldSize(size)),\n              paddingTop: 0,\n              paddingBottom: 0,\n\n              ...selectedSx(theme, colorPalette, gradient),\n            }}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n              {option.icon}\n              {option.label}\n            </Box>\n          </ToggleButton>\n        ))}\n      </StyledToggleGroup>\n    );\n  },\n);\n\nToggleGroup.displayName = 'ToggleGroup';\n"],"mappings":"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","names":["theme"]}

package/dist/{chunk-AYJGRQT4.js → chunk-RLTYBV4N.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   ToggleGroup
-} from "./chunk-U2QV4TTZ.js";
+} from "./chunk-HWQM5D3V.js";
 import {
   FormControl,
   FormLabel,
@@ -39,4 +39,4 @@ function ToggleField({ name, options, label }) {
 export {
   ToggleField
 };
-//# sourceMappingURL=chunk-AYJGRQT4.js.map
+//# sourceMappingURL=chunk-RLTYBV4N.js.map

package/dist/data-display/DayRuler.js

@@ -5,9 +5,9 @@ import {
 import "../chunk-D3OXTS7Y.js";
 import {
   DayRuler
-} from "../chunk-FKF34YJV.js";
-import "../chunk-S4ITA3FA.js";
-import "../chunk-EEK2NK4W.js";
+} from "../chunk-HMEGQKNQ.js";
+import "../chunk-ACM3HHZY.js";
+import "../chunk-G2PVUPE7.js";
 import "../chunk-Y3F2F36I.js";
 import "../chunk-K3IB7S7Q.js";
 import "../chunk-YMYJO2CZ.js";

package/dist/form/ToggleGroup.js

@@ -1,7 +1,7 @@
 import "../chunk-ONMSTW4B.js";
 import {
   ToggleGroup
-} from "../chunk-U2QV4TTZ.js";
+} from "../chunk-HWQM5D3V.js";
 import "../chunk-RGVNXES5.js";
 import "../chunk-GDN2LUTZ.js";
 import "../chunk-7ZADLRLP.js";

package/dist/form/total-form.js

@@ -9,7 +9,7 @@ import {
 } from "../chunk-CPAJYJUD.js";
 import {
   Fields_exports
-} from "../chunk-3Y6NO5XL.js";
+} from "../chunk-BR3WBTTQ.js";
 import {
   TextField
 } from "../chunk-3IX2TP4I.js";
@@ -20,7 +20,7 @@ import "../chunk-YGWLMTPB.js";
 import {
   CategoryField
 } from "../chunk-NQ6P7O7C.js";
-import "../chunk-AYJGRQT4.js";
+import "../chunk-RLTYBV4N.js";
 import {
   FormContext,
   useFormContext
@@ -29,7 +29,7 @@ import "../chunk-II3YNC5S.js";
 import "../chunk-NZBEE2PR.js";
 import "../chunk-NKHNUTTY.js";
 import "../chunk-ONMSTW4B.js";
-import "../chunk-U2QV4TTZ.js";
+import "../chunk-HWQM5D3V.js";
 import "../chunk-OQW4OERS.js";
 import "../chunk-6VTOGR36.js";
 import "../chunk-IYC7NPX7.js";

package/dist/types/components/data-display/DayRuler/DayRuler.styles.d.ts

@@ -1,4 +1,4 @@
-import type { SxProps, Theme } from '@mui/material/styles/index.js';
+import { type SxProps, type Theme } from '@mui/material/styles/index.js';
 import type { ScheduleBlockTone } from '../ScheduleGrid/ScheduleGrid.types';
 /** The container narrow rows answer to (container queries, never media queries). */
 /**
@@ -10,6 +10,11 @@ export declare function rootSx(hasActions: boolean): SxProps<Theme>;
 export declare const lineSx: SxProps<Theme>;
 export declare const coverageLabelSx: SxProps<Theme>;
 export declare function coverageSx(hours: number): SxProps<Theme>;
+/**
+ * How strongly a staffed hour is filled: the prototype's tonal success step, deeper with each
+ * person on the escala (0.18 + 0.09 per person, at most 0.85). An empty hour has none.
+ */
+export declare function coverageStrength(count: number): number;
 export declare function coverageCellSx(count: number): SxProps<Theme>;
 export declare const axisSx: SxProps<Theme>;
 export declare const groupTitleSx: SxProps<Theme>;

package/dist/types/components/data-display/DayRuler/DayRuler.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DayRuler.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DayRuler/DayRuler.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAM/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAG5E,oFAAoF;AACpF;;;GAGG;AACH,wBAAgB,MAAM,CAAC,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,CAQ1D;AAYD,mGAAmG;AACnG,eAAO,MAAM,MAAM,EAAE,OAAO,CAAC,KAAK,CAYhC,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,KAAK,CAAwD,CAAC;AAEpG,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAOxD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAa5D;AAED,eAAO,MAAM,MAAM,EAAE,OAAO,CAAC,KAAK,CAOhC,CAAC;AAEH,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,KAAK,CASvC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,OAAO,CAAC,KAAK,CAc/B,CAAC;AAEH,eAAO,MAAM,KAAK,EAAE,OAAO,CAAC,KAAK,CAAoC,CAAC;AAEtE,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,KAAK,CAQpC,CAAC;AAEF,6GAA6G;AAC7G,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,CAclD;AAUD,wBAAgB,OAAO,CAAC,IAAI,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAkBxG;AAED,qEAAqE;AACrE,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CA4C1H;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CASxD;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,CAYnD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAW1D;AAED,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAUlD;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,KAAK,CAKzC,CAAC;AAEH,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,KAAK,CAMxC,CAAC"}
+{"version":3,"file":"DayRuler.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DayRuler/DayRuler.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAKhG,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAG5E,oFAAoF;AACpF;;;GAGG;AACH,wBAAgB,MAAM,CAAC,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,CAQ1D;AAYD,mGAAmG;AACnG,eAAO,MAAM,MAAM,EAAE,OAAO,CAAC,KAAK,CAYhC,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,KAAK,CAAwD,CAAC;AAEpG,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAOxD;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGtD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAoB5D;AAED,eAAO,MAAM,MAAM,EAAE,OAAO,CAAC,KAAK,CAOhC,CAAC;AAEH,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,KAAK,CASvC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,OAAO,CAAC,KAAK,CAc/B,CAAC;AAEH,eAAO,MAAM,KAAK,EAAE,OAAO,CAAC,KAAK,CAAoC,CAAC;AAEtE,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,KAAK,CAQpC,CAAC;AAEF,6GAA6G;AAC7G,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,CAclD;AAUD,wBAAgB,OAAO,CAAC,IAAI,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAkBxG;AAED,qEAAqE;AACrE,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CA4C1H;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CASxD;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,CAYnD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAW1D;AAED,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAUlD;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,KAAK,CAKzC,CAAC;AAEH,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,KAAK,CAMxC,CAAC"}

package/dist/types/components/form/ToggleGroup/ToggleGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/ToggleGroup/ToggleGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAkE5D,eAAO,MAAM,WAAW,sGA0EvB,CAAC"}
+{"version":3,"file":"ToggleGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/ToggleGroup/ToggleGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA8F5D,eAAO,MAAM,WAAW,sGAmEvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.89.0",
+  "version": "6.89.2",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/DayRuler/DayRuler.styles.ts

@@ -1,8 +1,7 @@
-import type { CSSObject, SxProps, Theme } from '@mui/material/styles/index.js';
+import { alpha, type CSSObject, type SxProps, type Theme } from '@mui/material/styles/index.js';
 
 import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';
 import { rem, sxRem } from '../../../tokens/relative';
-import { softSignal } from '../../../tokens/surfaces';
 import { actualBarColor, blockToneStyles, breakHatch } from '../ScheduleGrid/schedule-tones';
 import type { ScheduleBlockTone } from '../ScheduleGrid/ScheduleGrid.types';
 import { DAY_RULER_METRICS as M } from './DayRuler.metrics';
@@ -58,19 +57,35 @@ export function coverageSx(hours: number): SxProps<Theme> {
   });
 }
 
+/**
+ * How strongly a staffed hour is filled: the prototype's tonal success step, deeper with each
+ * person on the escala (0.18 + 0.09 per person, at most 0.85). An empty hour has none.
+ */
+export function coverageStrength(count: number): number {
+  if (count <= 0) return 0;
+  return Math.min(0.85, 0.18 + count * 0.09);
+}
+
 export function coverageCellSx(count: number): SxProps<Theme> {
-  return (theme: Theme) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: rem(theme, M.coverage.font),
-    borderRadius: rem(theme, M.coverage.radius),
-    color: theme.palette.text.primary,
-    backgroundColor: count > 0 ? softSignal(theme, 'success') : theme.palette.action.hover,
-    border: count > 0 ? `1px solid ${theme.palette.success.main}` : '1px solid transparent',
-    minWidth: 0,
-    overflow: 'hidden',
-  });
+  return (theme: Theme) => {
+    const strength = coverageStrength(count);
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: rem(theme, M.coverage.font),
+      borderRadius: rem(theme, M.coverage.radius),
+      color: theme.palette.text.primary,
+      // A tonal fill, as the prototype's coverage line draws it — never an outline (FUT-3831). It is
+      // the success colour over the page, so a staffed hour is LIGHTER than an empty one in dark mode
+      // and plainly green in light, where the soft-signal blend read as the empty grey. The hairline
+      // stays transparent so a count never shifts its cell.
+      backgroundColor: strength > 0 ? alpha(theme.palette.success.main, strength) : theme.palette.action.hover,
+      border: '1px solid transparent',
+      minWidth: 0,
+      overflow: 'hidden',
+    };
+  };
 }
 
 export const axisSx: SxProps<Theme> = (theme: Theme) => ({

package/src/components/form/ToggleGroup/ToggleGroup.tsx

@@ -71,6 +71,34 @@ const StyledToggleGroup = styled(ToggleButtonGroup, {
   };
 });
 
+type Palette = ReturnType<typeof getColorFromTheme>;
+
+/**
+ * The chosen option's fill, in every state. MUI's own `.Mui-selected:hover` (and
+ * its focus-visible) out-rank a plain `.Mui-selected` rule and paint the chosen
+ * option a translucent grey under white text: hovered — as it always is right
+ * after a click — or focused, it stopped reading as chosen (FUT-3831). It keeps
+ * its colour's fill, the darker step on hover, and keyboard focus adds a ring,
+ * never a new fill.
+ */
+function selectedSx(theme: Theme, palette: Palette, gradient: boolean) {
+  const ring = rem(theme, FIELD_BORDER_WIDTH * 2);
+  return {
+    '&.Mui-selected': {
+      backgroundColor: palette.main,
+      color: palette.contrastText,
+      ...(gradient && { background: `linear-gradient(135deg, ${palette.main}, ${palette.dark})` }),
+    },
+    '&.Mui-selected:hover': {
+      backgroundColor: palette.dark,
+      color: palette.contrastText,
+      ...(gradient && { background: `linear-gradient(135deg, ${palette.dark}, ${palette.dark})` }),
+    },
+    '&.Mui-selected.Mui-focusVisible': { backgroundColor: palette.main, color: palette.contrastText },
+    '&.Mui-focusVisible': { outline: `${ring} solid ${palette.main}`, outlineOffset: ring },
+  };
+}
+
 export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
   (
     {
@@ -126,14 +154,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
               paddingTop: 0,
               paddingBottom: 0,
 
-              '&.Mui-selected': {
-                backgroundColor: colorPalette.main,
-                color: colorPalette.contrastText,
-
-                ...(gradient && {
-                  background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark})`,
-                }),
-              },
+              ...selectedSx(theme, colorPalette, gradient),
             }}
           >
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>

package/dist/chunk-EEK2NK4W.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DayRuler/DayRuler.styles.ts"],"sourcesContent":["import type { CSSObject, SxProps, Theme } from '@mui/material/styles/index.js';\n\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { softSignal } from '../../../tokens/surfaces';\nimport { actualBarColor, blockToneStyles, breakHatch } from '../ScheduleGrid/schedule-tones';\nimport type { ScheduleBlockTone } from '../ScheduleGrid/ScheduleGrid.types';\nimport { DAY_RULER_METRICS as M } from './DayRuler.metrics';\n\n/** The container narrow rows answer to (container queries, never media queries). */\n/**\n * `--dr-actions`: the actions column, 220px when any row has actions and\n * nothing when none does (no empty column at the end of every row).\n */\nexport function rootSx(hasActions: boolean): SxProps<Theme> {\n  return (theme: Theme) => ({\n    containerType: 'inline-size',\n    minWidth: 0,\n    width: '100%',\n    userSelect: 'none',\n    '--dr-actions': hasActions ? rem(theme, M.sideColumn) : '0%',\n  });\n}\n\n/** `@container` below which a row stacks (the coverage and axis rows go full width). Bounds are \"from px up\". */\nfunction compact(theme: Theme): string {\n  return `@container (width < ${rem(theme, M.compactBelow)})`;\n}\n\n/** `@container` below which the pane is phone-sized: no coverage row, no axis. Bounds are \"from px up\". */\nfunction phone(theme: Theme): string {\n  return `@container (width < ${rem(theme, M.phoneBelow)})`;\n}\n\n/** Name · track · actions, the coverage row and the axis row share these columns on a computer. */\nexport const lineSx: SxProps<Theme> = (theme: Theme) => ({\n  display: 'grid',\n  gridTemplateColumns: `${rem(theme, M.sideColumn)} minmax(0, 1fr) var(--dr-actions)`,\n  columnGap: rem(theme, M.gap),\n  alignItems: 'center',\n  // Stacked: across the full width, like the tracks; the label above the counts.\n  [compact(theme)]: {\n    gridTemplateColumns: 'minmax(0, 1fr)',\n    rowGap: rem(theme, M.coverage.gap),\n    '& > span:empty': { display: 'none' },\n  },\n  [phone(theme)]: { display: 'none' },\n});\n\nexport const coverageLabelSx: SxProps<Theme> = { fontSize: sxRem(M.meta), color: 'text.secondary' };\n\nexport function coverageSx(hours: number): SxProps<Theme> {\n  return (theme: Theme) => ({\n    display: 'grid',\n    gridTemplateColumns: `repeat(${hours}, minmax(0, 1fr))`,\n    gap: rem(theme, M.coverage.gap),\n    height: rem(theme, M.coverage.height),\n  });\n}\n\nexport function coverageCellSx(count: number): SxProps<Theme> {\n  return (theme: Theme) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: rem(theme, M.coverage.font),\n    borderRadius: rem(theme, M.coverage.radius),\n    color: theme.palette.text.primary,\n    backgroundColor: count > 0 ? softSignal(theme, 'success') : theme.palette.action.hover,\n    border: count > 0 ? `1px solid ${theme.palette.success.main}` : '1px solid transparent',\n    minWidth: 0,\n    overflow: 'hidden',\n  });\n}\n\nexport const axisSx: SxProps<Theme> = (theme: Theme) => ({\n  position: 'relative',\n  height: rem(theme, M.axis.height),\n  fontSize: rem(theme, M.axis.font),\n  color: theme.palette.text.secondary,\n  mt: 0.5,\n  '& > span': { position: 'absolute', transform: 'translateX(-50%)', whiteSpace: 'nowrap' },\n});\n\nexport const groupTitleSx: SxProps<Theme> = {\n  fontSize: sxRem(M.groupTitle),\n  letterSpacing: '0.05em',\n  textTransform: 'uppercase',\n  color: 'text.secondary',\n  fontWeight: 500,\n  pt: 1.5,\n  pb: 0.5,\n  m: 0,\n};\n\n/**\n * One person's row. A computer: name · track · actions on one line. A narrow\n * ruler (a phone): name and actions on top, the track under them, full width.\n */\nexport const rowSx: SxProps<Theme> = (theme: Theme) => ({\n  display: 'grid',\n  gridTemplateColumns: `${rem(theme, M.sideColumn)} minmax(0, 1fr) var(--dr-actions)`,\n  gridTemplateAreas: '\"who track actions\"',\n  columnGap: rem(theme, M.gap),\n  alignItems: 'center',\n  py: rem(theme, M.rowPaddingY),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  [compact(theme)]: {\n    gridTemplateColumns: 'minmax(0, 1fr) auto',\n    gridTemplateAreas: '\"who actions\" \"track track\"',\n    rowGap: theme.spacing(1),\n    py: theme.spacing(1.5),\n  },\n});\n\nexport const whoSx: SxProps<Theme> = { gridArea: 'who', minWidth: 0 };\n\nexport const actionsSx: SxProps<Theme> = {\n  gridArea: 'actions',\n  display: 'flex',\n  gap: 1,\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  flexWrap: 'wrap',\n  minWidth: 0,\n};\n\n/** A break inside a block: a hatched band across its height, under its text. `span` is in % of the block. */\nexport function breakSx(span: Span): SxProps<Theme> {\n  return (theme: Theme) => ({\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: `${span.at}%`,\n    width: `${span.share}%`,\n    background: breakHatch(theme, rem(theme, M.breakStripe.ink), rem(theme, M.breakStripe.ink + M.breakStripe.gap)),\n    pointerEvents: 'none',\n    // Where the band meets an end of the block it takes the block's rounding:\n    // on a phone the block does not clip (its hit area reaches past it).\n    ...(span.at <= 0.01 ? { borderTopLeftRadius: 'inherit', borderBottomLeftRadius: 'inherit' } : {}),\n    ...(span.at + span.share >= 99.99 ? { borderTopRightRadius: 'inherit', borderBottomRightRadius: 'inherit' } : {}),\n  });\n}\n\n/** The hour lines: one every `every` hours of a `hours`-long ruler. */\nfunction hourLines(theme: Theme, hours: number, every: number): string {\n  const line = theme.palette.divider;\n  const step = `${(100 * every) / hours}%`;\n  const hairline = `${FIELD_BORDER_WIDTH}px`;\n  return `repeating-linear-gradient(to right, ${line} 0, ${line} ${hairline}, transparent ${hairline}, transparent ${step})`;\n}\n\nexport function trackSx(opts: { hours: number; tickHours: number; interactive: boolean }): SxProps<Theme> {\n  return (theme: Theme) => ({\n    gridArea: 'track',\n    position: 'relative',\n    height: rem(theme, M.track.height),\n    borderRadius: rem(theme, M.track.radius),\n    backgroundColor: theme.palette.action.hover,\n    backgroundImage: hourLines(theme, opts.hours, 1),\n    cursor: opts.interactive ? 'crosshair' : 'default',\n    touchAction: 'auto',\n    outline: 'none',\n    '&:focus-visible': { boxShadow: `0 0 0 ${rem(theme, M.ring)} ${theme.palette.primary.main}` },\n    [compact(theme)]: {\n      height: rem(theme, M.track.compactHeight),\n      borderRadius: rem(theme, M.track.compactRadius),\n      backgroundImage: hourLines(theme, opts.hours, opts.tickHours),\n    },\n  });\n}\n\n/** Where a bar starts and how long it is, both in % of the track. */\nexport interface Span {\n  at: number;\n  share: number;\n}\n\nexport function blockSx(tone: ScheduleBlockTone, span: Span, opts: { selected: boolean; movable: boolean }): SxProps<Theme> {\n  return (theme: Theme): CSSObject => ({\n    ...blockToneStyles(theme, tone, true),\n    position: 'absolute',\n    left: `${span.at}%`,\n    width: `${span.share}%`,\n    top: rem(theme, M.block.top),\n    height: rem(theme, M.block.height),\n    boxSizing: 'border-box',\n    borderRadius: rem(theme, M.block.radius),\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: `0 ${rem(theme, M.block.paddingX)}`,\n    margin: 0,\n    font: 'inherit',\n    fontSize: rem(theme, M.block.font),\n    fontWeight: 500,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    cursor: opts.movable ? 'grab' : 'pointer',\n    boxShadow: opts.selected ? `0 0 0 ${rem(theme, M.ring)} ${theme.palette.primary.main}` : 'none',\n    '&:focus-visible': { outline: `${rem(theme, M.ring)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, M.ringOffset) },\n    '& [data-dr-text]': { position: 'relative', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 },\n    '& [data-dr-text=\"short\"]': { display: 'none' },\n    [compact(theme)]: {\n      top: rem(theme, M.block.compactTop),\n      height: rem(theme, M.block.compactHeight),\n      // A 40px hit area around the 20px bar, the look unchanged: the text cuts\n      // itself (its spans ellipsize), so the block need not clip.\n      overflow: 'visible',\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        left: 0,\n        right: 0,\n        top: '50%',\n        height: rem(theme, M.block.hitArea),\n        transform: 'translateY(-50%)',\n      },\n      '&[data-narrow] [data-dr-text=\"full\"]': { display: 'none' },\n      '&[data-narrow] [data-dr-text=\"short\"]': { display: 'inline' },\n    },\n  });\n}\n\nexport function handleSx(side: 'l' | 'r'): SxProps<Theme> {\n  return (theme: Theme) => ({\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    [side === 'l' ? 'left' : 'right']: 0,\n    width: rem(theme, M.handle),\n    cursor: 'ew-resize',\n  });\n}\n\nexport function actualSx(span: Span): SxProps<Theme> {\n  return (theme: Theme) => ({\n    position: 'absolute',\n    left: `${span.at}%`,\n    width: `${span.share}%`,\n    top: rem(theme, M.actual.top),\n    height: rem(theme, M.actual.height),\n    borderRadius: rem(theme, M.actual.radius),\n    backgroundColor: actualBarColor(theme),\n    pointerEvents: 'none',\n    [compact(theme)]: { top: rem(theme, M.actual.compactTop), height: rem(theme, M.actual.compactHeight) },\n  });\n}\n\nexport function actualLabelSx(left: number): SxProps<Theme> {\n  return (theme: Theme) => ({\n    position: 'absolute',\n    left: `calc(${left}% + ${rem(theme, M.actualLabel.offset)})`,\n    top: rem(theme, M.actualLabel.top),\n    fontSize: rem(theme, M.actualLabel.font),\n    color: theme.palette.text.secondary,\n    whiteSpace: 'nowrap',\n    pointerEvents: 'none',\n    [compact(theme)]: { display: 'none' },\n  });\n}\n\nexport function nowSx(left: number): SxProps<Theme> {\n  return (theme: Theme) => ({\n    position: 'absolute',\n    left: `${left}%`,\n    top: rem(theme, -M.now.overhang),\n    bottom: rem(theme, -M.now.overhang),\n    width: rem(theme, M.now.width),\n    backgroundColor: theme.palette.primary.main,\n    pointerEvents: 'none',\n  });\n}\n\nexport const skeletonTrackSx: SxProps<Theme> = (theme: Theme) => ({\n  gridArea: 'track',\n  height: rem(theme, M.track.height),\n  borderRadius: rem(theme, M.track.radius),\n  backgroundColor: theme.palette.action.hover,\n});\n\nexport const skeletonNameSx: SxProps<Theme> = (theme: Theme) => ({\n  gridArea: 'who',\n  height: rem(theme, M.name),\n  width: '60%',\n  borderRadius: rem(theme, M.skeletonNameRadius),\n  backgroundColor: theme.palette.action.hover,\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-U2QV4TTZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport ToggleButton from '@mui/material/ToggleButton/index.js';\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup/index.js';\nimport { alpha, useTheme, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React, { forwardRef } from 'react';\n\nimport type { ToggleGroupProps } from './ToggleGroup.types';\nimport { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { controlNeutral } from '../../../tokens/ink';\nimport { rem, remPx, rems } from '../../../tokens/relative';\nimport { cssLengthToPx } from '../../../tokens/css-units';\n\n/** The glass frame's padding (4px at the design scale); its border is the field hairline. */\nconst glassPadding = (theme: Theme): string => rem(theme, 4);\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n  if (color === 'neutral') {\n    const neutral = controlNeutral(theme);\n    return { ...neutral, contrastText: theme.palette.getContrastText(neutral.main) };\n  }\n\n  const colorMap = {\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\n  const palette = colorMap[color as keyof typeof colorMap] || theme.palette.primary;\n\n  // Ensure palette has required properties\n  return {\n    main: palette.main,\n    dark: palette.dark || palette.main,\n    light: palette.light || palette.main,\n    contrastText: palette.contrastText || theme.palette.getContrastText(palette.main),\n  };\n};\n\n/** The glass frame's radius: the field radius plus its padding, the buttons' margin and its border. */\nconst glassFrameRadius = (theme: Theme): number =>\n  fieldRadius(theme) + remPx(theme, 4) + cssLengthToPx(theme.spacing(0.5), 4) + FIELD_BORDER_WIDTH;\n\nconst StyledToggleGroup = styled(ToggleButtonGroup, {\n  shouldForwardProp: (prop) => !['customColor', 'customSize', 'glass'].includes(prop as string),\n})<{\n  customColor?: string;\n  customSize?: string;\n  glass?: boolean;\n}>(({ theme, glass }) => {\n  // Each button is the field, so it takes the field radius. The glass frame\n  // around them is inset by its padding, the buttons' margin and its border,\n  // and rounds by that much more so the two corners stay concentric.\n  const radius = fieldRadius(theme);\n  return {\n    backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',\n    backdropFilter: glass ? `blur(${rem(theme, 20)})` : 'none',\n    borderRadius: glass ? glassFrameRadius(theme) : radius,\n    padding: glass ? glassPadding(theme) : 0,\n    border: glass ? `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',\n\n    '& .MuiToggleButtonGroup-grouped': {\n      margin: theme.spacing(0.5),\n      border: 0,\n      borderRadius: `${radius}px !important`,\n    },\n  };\n});\n\nexport const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(\n  (\n    {\n      variant = 'single',\n      color = 'primary',\n      size = 'md',\n      options,\n      glass = false,\n      gradient = false,\n      value,\n      onChange,\n      dataTestId = 'toggle-group',\n      ...props\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const colorPalette = getColorFromTheme(theme, color);\n\n    const sizeMap = {\n      xs: { padding: rems(theme, 4, 8), fontSize: rem(theme, 12) },\n      sm: { padding: rems(theme, 6, 12), fontSize: rem(theme, 14) },\n      md: { padding: rems(theme, 8, 16), fontSize: rem(theme, 16) },\n      lg: { padding: rems(theme, 10, 20), fontSize: rem(theme, 18) },\n      xl: { padding: rems(theme, 12, 24), fontSize: rem(theme, 20) },\n    };\n\n    return (\n      <StyledToggleGroup\n        ref={ref}\n        customColor={color}\n        customSize={size}\n        glass={glass}\n        value={value}\n        onChange={onChange}\n        exclusive={variant === 'exclusive' || variant === 'single'}\n        data-testid={dataTestId}\n        {...props}\n      >\n        {options.map((option) => (\n          <ToggleButton\n            key={option.value}\n            value={option.value}\n            disabled={option.disabled}\n            data-testid={`${dataTestId}-item-${option.value}`}\n            sx={{\n              textTransform: 'none',\n              fontWeight: 500,\n              transition: 'all 0.3s ease',\n              ...sizeMap[size as keyof typeof sizeMap],\n              // The theme's field height for the size; the label centres in it.\n              minHeight: (theme) => fieldHeight(theme, asFieldSize(size)),\n              paddingTop: 0,\n              paddingBottom: 0,\n\n              '&.Mui-selected': {\n                backgroundColor: colorPalette.main,\n                color: colorPalette.contrastText,\n\n                ...(gradient && {\n                  background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark})`,\n                }),\n              },\n            }}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n              {option.icon}\n              {option.label}\n            </Box>\n          </ToggleButton>\n        ))}\n      </StyledToggleGroup>\n    );\n  },\n);\n\nToggleGroup.displayName = 'ToggleGroup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,kBAAkB;AACzB,OAAO,uBAAuB;AAC9B,SAAS,OAAO,UAAU,cAAc;AAExC,SAAgB,kBAAkB;AA4GxB,cAyBE,YAzBF;AAlGV,IAAM,eAAe,CAAC,UAAyB,IAAI,OAAO,CAAC;AAE3D,IAAM,oBAAoB,CAAC,OAAc,UAAkB;AACzD,MAAI,UAAU,WAAW;AACvB,UAAM,UAAU,eAAe,KAAK;AACpC,WAAO,EAAE,GAAG,SAAS,cAAc,MAAM,QAAQ,gBAAgB,QAAQ,IAAI,EAAE;AAAA,EACjF;AAEA,QAAM,WAAW;AAAA,IACf,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,QAAQ;AAAA,EACxB;AAEA,QAAM,UAAU,SAAS,KAA8B,KAAK,MAAM,QAAQ;AAG1E,SAAO;AAAA,IACL,MAAM,QAAQ;AAAA,IACd,MAAM,QAAQ,QAAQ,QAAQ;AAAA,IAC9B,OAAO,QAAQ,SAAS,QAAQ;AAAA,IAChC,cAAc,QAAQ,gBAAgB,MAAM,QAAQ,gBAAgB,QAAQ,IAAI;AAAA,EAClF;AACF;AAGA,IAAM,mBAAmB,CAAC,UACxB,YAAY,KAAK,IAAI,MAAM,OAAO,CAAC,IAAI,cAAc,MAAM,QAAQ,GAAG,GAAG,CAAC,IAAI;AAEhF,IAAM,oBAAoB,OAAO,mBAAmB;AAAA,EAClD,mBAAmB,CAAC,SAAS,CAAC,CAAC,eAAe,cAAc,OAAO,EAAE,SAAS,IAAc;AAC9F,CAAC,EAIE,CAAC,EAAE,OAAO,MAAM,MAAM;AAIvB,QAAM,SAAS,YAAY,KAAK;AAChC,SAAO;AAAA,IACL,iBAAiB,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,IAAI;AAAA,IACtE,gBAAgB,QAAQ,QAAQ,IAAI,OAAO,EAAE,CAAC,MAAM;AAAA,IACpD,cAAc,QAAQ,iBAAiB,KAAK,IAAI;AAAA,IAChD,SAAS,QAAQ,aAAa,KAAK,IAAI;AAAA,IACvC,QAAQ,QAAQ,GAAG,kBAAkB,YAAY,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC,KAAK;AAAA,IAEvF,mCAAmC;AAAA,MACjC,QAAQ,MAAM,QAAQ,GAAG;AAAA,MACzB,QAAQ;AAAA,MACR,cAAc,GAAG,MAAM;AAAA,IACzB;AAAA,EACF;AACF,CAAC;AAEM,IAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,QAAQ,SAAS;AACvB,UAAM,eAAe,kBAAkB,OAAO,KAAK;AAEnD,UAAM,UAAU;AAAA,MACd,IAAI,EAAE,SAAS,KAAK,OAAO,GAAG,CAAC,GAAG,UAAU,IAAI,OAAO,EAAE,EAAE;AAAA,MAC3D,IAAI,EAAE,SAAS,KAAK,OAAO,GAAG,EAAE,GAAG,UAAU,IAAI,OAAO,EAAE,EAAE;AAAA,MAC5D,IAAI,EAAE,SAAS,KAAK,OAAO,GAAG,EAAE,GAAG,UAAU,IAAI,OAAO,EAAE,EAAE;AAAA,MAC5D,IAAI,EAAE,SAAS,KAAK,OAAO,IAAI,EAAE,GAAG,UAAU,IAAI,OAAO,EAAE,EAAE;AAAA,MAC7D,IAAI,EAAE,SAAS,KAAK,OAAO,IAAI,EAAE,GAAG,UAAU,IAAI,OAAO,EAAE,EAAE;AAAA,IAC/D;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAa;AAAA,QACb,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,YAAY,eAAe,YAAY;AAAA,QAClD,eAAa;AAAA,QACZ,GAAG;AAAA,QAEH,kBAAQ,IAAI,CAAC,WACZ;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,eAAa,GAAG,UAAU,SAAS,OAAO,KAAK;AAAA,YAC/C,IAAI;AAAA,cACF,eAAe;AAAA,cACf,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,GAAG,QAAQ,IAA4B;AAAA;AAAA,cAEvC,WAAW,CAACA,WAAU,YAAYA,QAAO,YAAY,IAAI,CAAC;AAAA,cAC1D,YAAY;AAAA,cACZ,eAAe;AAAA,cAEf,kBAAkB;AAAA,gBAChB,iBAAiB,aAAa;AAAA,gBAC9B,OAAO,aAAa;AAAA,gBAEpB,GAAI,YAAY;AAAA,kBACd,YAAY,2BAA2B,aAAa,IAAI,KAAK,aAAa,IAAI;AAAA,gBAChF;AAAA,cACF;AAAA,YACF;AAAA,YAEA,+BAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE,GACtD;AAAA,qBAAO;AAAA,cACP,OAAO;AAAA,eACV;AAAA;AAAA,UA3BK,OAAO;AAAA,QA4Bd,CACD;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;","names":["theme"]}