@12-apps/ui 6.86.1 → 6.87.0

package/dist/chunk-D6JKCCRQ.js

@@ -0,0 +1,120 @@
+import {
+  useRulerDrag
+} from "./chunk-MAYAJXO6.js";
+import {
+  Axis,
+  Coverage,
+  RulerRow
+} from "./chunk-IP424VZD.js";
+import {
+  groupTitleSx,
+  rootSx,
+  rowSx,
+  skeletonNameSx,
+  skeletonTrackSx
+} from "./chunk-EEK2NK4W.js";
+import {
+  handleBlockKey,
+  keyCreateSpan
+} from "./chunk-BK3YLYL6.js";
+import {
+  DAY_RULER_METRICS
+} from "./chunk-7ZQ3KQ7J.js";
+import {
+  SR_ONLY_SX
+} from "./chunk-YSUJCKEE.js";
+import {
+  useAnnouncer
+} from "./chunk-35HMJQLO.js";
+import {
+  resolveLabels
+} from "./chunk-LL2BWQPM.js";
+import {
+  EN_US_UI_LABELS
+} from "./chunk-57FIUJJJ.js";
+
+// src/components/data-display/DayRuler/DayRuler.tsx
+import Box from "@mui/material/Box/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function grouped(rows) {
+  const out = [];
+  for (const row of rows) {
+    const last = out[out.length - 1];
+    if (last && last.title === row.group) last.rows.push(row);
+    else out.push({ title: row.group, rows: [row] });
+  }
+  return out;
+}
+function scaleOf(props) {
+  return {
+    from: props.from ?? 6,
+    to: props.to ?? 26,
+    snap: (props.snapMinutes ?? 15) / 60,
+    createHours: props.createHours ?? 4,
+    tickHours: props.tickHours ?? 4
+  };
+}
+function abilitiesOf(props) {
+  const open = !props.readOnly && !props.loading;
+  return { create: open && Boolean(props.onCreate), move: open && Boolean(props.onMove), resize: open && Boolean(props.onResize) };
+}
+function RulerBody({ props, ctx }) {
+  if (props.error) return /* @__PURE__ */ jsx(Fragment, { children: props.error });
+  if (props.loading) {
+    return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: DAY_RULER_METRICS.skeletonRows }, (_, index) => /* @__PURE__ */ jsxs(Box, { sx: rowSx, "aria-hidden": true, "data-testid": `${ctx.testId}-loading`, children: [
+      /* @__PURE__ */ jsx(Box, { sx: skeletonNameSx }),
+      /* @__PURE__ */ jsx(Box, { sx: skeletonTrackSx })
+    ] }, index)) });
+  }
+  if (props.rows.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: props.empty ?? null });
+  return /* @__PURE__ */ jsx(Fragment, { children: grouped(props.rows).map((group, index) => /* @__PURE__ */ jsxs(Box, { role: "list", "aria-label": group.title, children: [
+    group.title ? /* @__PURE__ */ jsx(Box, { component: "p", sx: groupTitleSx, "aria-hidden": true, children: group.title }) : null,
+    group.rows.map((row) => /* @__PURE__ */ jsx(RulerRow, { row, ctx }, row.id))
+  ] }, `${index}-${group.title ?? ""}`)) });
+}
+function DayRuler(props) {
+  const { now, onCreate, onMove, onResize } = props;
+  const testId = props.dataTestId ?? "day-ruler";
+  const labels = resolveLabels(EN_US_UI_LABELS.dayRuler, props.labels);
+  const scale = scaleOf(props);
+  const can = abilitiesOf(props);
+  const dragApi = useRulerDrag(scale, { onCreate, onMove, onResize });
+  const { text: announcement, say } = useAnnouncer();
+  const ctx = {
+    scale,
+    now,
+    can,
+    drag: dragApi.drag,
+    dragApi,
+    onBlockClick: props.onBlockClick,
+    onKeyCreate: (row) => {
+      const [start, end] = keyCreateSpan(scale, now, props.createStart?.(row.id));
+      onCreate?.(row.id, start, end);
+    },
+    onBlockKey: (event, block) => handleBlockKey(event, block, { scale, can, onMove, onResize, labels, say }),
+    createLabel: labels.createTrack,
+    testId
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: rootSx(props.rows.some((row) => row.actions !== void 0 && row.actions !== null)),
+      "data-testid": testId,
+      role: "region",
+      "aria-label": props["aria-label"],
+      "aria-busy": props.loading || void 0,
+      "aria-description": props.loading ? labels.loading : void 0,
+      children: [
+        props.coverage && props.coverage.length > 0 ? /* @__PURE__ */ jsx(Coverage, { coverage: props.coverage, label: props.coverageLabel, scale, testId }) : null,
+        /* @__PURE__ */ jsx(Axis, { scale, testId }),
+        /* @__PURE__ */ jsx(RulerBody, { props, ctx }),
+        /* @__PURE__ */ jsx(Box, { sx: SR_ONLY_SX, "aria-live": "polite", role: "status", "data-testid": `${testId}-live`, children: announcement })
+      ]
+    }
+  );
+}
+
+export {
+  DayRuler
+};
+//# sourceMappingURL=chunk-D6JKCCRQ.js.map

package/dist/chunk-D6JKCCRQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DayRuler/DayRuler.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport type React from 'react';\n\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\nimport { resolveLabels } from '../../../utils/resolve-labels';\nimport { SR_ONLY_SX } from '../ScheduleGrid/ScheduleGrid.styles';\nimport { useAnnouncer } from '../ScheduleGrid/useAnnouncer';\nimport { handleBlockKey, keyCreateSpan, type RulerAbilities, type RulerScale } from './DayRuler.keyboard';\nimport { DAY_RULER_METRICS as M } from './DayRuler.metrics';\nimport { Axis, Coverage, RulerRow, type RowContext } from './DayRuler.parts';\nimport { groupTitleSx, rootSx, rowSx, skeletonNameSx, skeletonTrackSx } from './DayRuler.styles';\nimport type { DayRulerProps, DayRulerRow } from './DayRuler.types';\nimport { useRulerDrag } from './useRulerDrag';\n\n/** The rows, grouped under a heading each time `row.group` changes. */\nfunction grouped(rows: readonly DayRulerRow[]): { title?: string; rows: DayRulerRow[] }[] {\n  const out: { title?: string; rows: DayRulerRow[] }[] = [];\n  for (const row of rows) {\n    const last = out[out.length - 1];\n    if (last && last.title === row.group) last.rows.push(row);\n    else out.push({ title: row.group, rows: [row] });\n  }\n  return out;\n}\n\nfunction scaleOf(props: DayRulerProps): RulerScale {\n  return {\n    from: props.from ?? 6,\n    to: props.to ?? 26,\n    snap: (props.snapMinutes ?? 15) / 60,\n    createHours: props.createHours ?? 4,\n    tickHours: props.tickHours ?? 4,\n  };\n}\n\nfunction abilitiesOf(props: DayRulerProps): RulerAbilities {\n  const open = !props.readOnly && !props.loading;\n  return { create: open && Boolean(props.onCreate), move: open && Boolean(props.onMove), resize: open && Boolean(props.onResize) };\n}\n\n/** The groups and their rows — or the skeleton, the host's error, or the host's empty state. */\nfunction RulerBody({ props, ctx }: { props: DayRulerProps; ctx: RowContext }): React.JSX.Element {\n  if (props.error) return <>{props.error}</>;\n  if (props.loading) {\n    return (\n      <>\n        {Array.from({ length: M.skeletonRows }, (_, index) => (\n          <Box key={index} sx={rowSx} aria-hidden data-testid={`${ctx.testId}-loading`}>\n            <Box sx={skeletonNameSx} />\n            <Box sx={skeletonTrackSx} />\n          </Box>\n        ))}\n      </>\n    );\n  }\n  if (props.rows.length === 0) return <>{props.empty ?? null}</>;\n  return (\n    <>\n      {grouped(props.rows).map((group, index) => (\n        <Box key={`${index}-${group.title ?? ''}`} role=\"list\" aria-label={group.title}>\n          {group.title ? (\n            <Box component=\"p\" sx={groupTitleSx} aria-hidden>\n              {group.title}\n            </Box>\n          ) : null}\n          {group.rows.map((row) => (\n            <RulerRow key={row.id} row={row} ctx={ctx} />\n          ))}\n        </Box>\n      ))}\n    </>\n  );\n}\n\n/**\n * One day as an hour ruler per row — who is on the escala when, and who is\n * really on shift (FUT-3825). Drag on an empty stretch to create (a click\n * alone is `createHours`), drag a block to move it, drag its ends to change\n * them; every hour snaps to `snapMinutes`. On a narrow ruler (a phone) each row\n * stacks and the blocks are tap-only: touch scrolls and never drags.\n *\n * The ruler reports gestures; hours, limits and refusals are the host's.\n */\nexport function DayRuler(props: DayRulerProps): React.JSX.Element {\n  const { now, onCreate, onMove, onResize } = props;\n  const testId = props.dataTestId ?? 'day-ruler';\n  const labels = resolveLabels(EN_US_UI_LABELS.dayRuler, props.labels);\n  const scale = scaleOf(props);\n  const can = abilitiesOf(props);\n  const dragApi = useRulerDrag(scale, { onCreate, onMove, onResize });\n  const { text: announcement, say } = useAnnouncer();\n\n  const ctx: RowContext = {\n    scale,\n    now,\n    can,\n    drag: dragApi.drag,\n    dragApi,\n    onBlockClick: props.onBlockClick,\n    onKeyCreate: (row) => {\n      const [start, end] = keyCreateSpan(scale, now, props.createStart?.(row.id));\n      onCreate?.(row.id, start, end);\n    },\n    onBlockKey: (event, block) => handleBlockKey(event, block, { scale, can, onMove, onResize, labels, say }),\n    createLabel: labels.createTrack,\n    testId,\n  };\n\n  return (\n    <Box\n      sx={rootSx(props.rows.some((row) => row.actions !== undefined && row.actions !== null))}\n      data-testid={testId}\n      role=\"region\"\n      aria-label={props['aria-label']}\n      aria-busy={props.loading || undefined}\n      aria-description={props.loading ? labels.loading : undefined}\n    >\n      {props.coverage && props.coverage.length > 0 ? (\n        <Coverage coverage={props.coverage} label={props.coverageLabel} scale={scale} testId={testId} />\n      ) : null}\n      <Axis scale={scale} testId={testId} />\n      <RulerBody props={props} ctx={ctx} />\n      <Box sx={SR_ONLY_SX} aria-live=\"polite\" role=\"status\" data-testid={`${testId}-live`}>\n        {announcement}\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-DJNKSDQH.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-DJNKSDQH.js.map

package/dist/chunk-DJNKSDQH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-YGLAGY74.js → chunk-DM57YWZH.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-LL2BWQPM.js";
 import {
   EN_US_UI_LABELS
-} from "./chunk-XOXXG7Q5.js";
+} from "./chunk-57FIUJJJ.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -99,4 +99,4 @@ export {
   Timeline,
   Timeline_default
 };
-//# sourceMappingURL=chunk-YGLAGY74.js.map
+//# sourceMappingURL=chunk-DM57YWZH.js.map

package/dist/{chunk-NASLJO2R.js → chunk-DRJGHTQU.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-IM4DMKH4.js";
 import {
   EN_US_UI_LABELS
-} from "./chunk-XOXXG7Q5.js";
+} from "./chunk-57FIUJJJ.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -220,4 +220,4 @@ export {
   SheetFooter,
   SheetOverlay
 };
-//# sourceMappingURL=chunk-NASLJO2R.js.map
+//# sourceMappingURL=chunk-DRJGHTQU.js.map

package/dist/{chunk-BLZDSCIZ.js → chunk-DYHOBKPU.js}

@@ -1,3 +1,8 @@
+import {
+  DataGridEmpty,
+  DataGridError,
+  DataGridLoading
+} from "./chunk-EARWC6PD.js";
 import {
   useDataGridModel
 } from "./chunk-LDROG4QI.js";
@@ -5,11 +10,6 @@ import {
   GridBody,
   GridHeader
 } from "./chunk-5RYPVYWP.js";
-import {
-  DataGridEmpty,
-  DataGridError,
-  DataGridLoading
-} from "./chunk-EARWC6PD.js";
 
 // src/components/data-display/DataGrid/DataGrid.tsx
 import Paper from "@mui/material/Paper/index.js";
@@ -120,4 +120,4 @@ export {
   DataGrid,
   GRID_ONLY_PROPS
 };
-//# sourceMappingURL=chunk-BLZDSCIZ.js.map
+//# sourceMappingURL=chunk-DYHOBKPU.js.map

package/dist/{chunk-FCLON3MO.js → chunk-EE6DJPB7.js}

@@ -1,16 +1,16 @@
-import {
-  ColumnsTab
-} from "./chunk-WSAUWJFO.js";
 import {
   DisplayTab,
   SortTab
 } from "./chunk-YEGZIYVM.js";
+import {
+  ColumnsTab
+} from "./chunk-WSAUWJFO.js";
 import {
   ViewActions,
   ViewFooter,
   ViewHeader,
   ViewsList
-} from "./chunk-ENJOBJPK.js";
+} from "./chunk-2MT6VSS2.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -19,7 +19,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-HJJR2WGL.js";
+} from "./chunk-YOXYSAUI.js";
 import {
   rem,
   sxRem
@@ -265,4 +265,4 @@ function DataViewsDisplayPanel({
 export {
   DataViewsDisplayPanel
 };
-//# sourceMappingURL=chunk-FCLON3MO.js.map
+//# sourceMappingURL=chunk-EE6DJPB7.js.map

package/dist/chunk-EEK2NK4W.js

@@ -0,0 +1,281 @@
+import {
+  DAY_RULER_METRICS
+} from "./chunk-7ZQ3KQ7J.js";
+import {
+  actualBarColor,
+  blockToneStyles,
+  breakHatch
+} from "./chunk-4HK4FVMV.js";
+import {
+  softSignal
+} from "./chunk-TZ23DNKY.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-O6MJWHU5.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DayRuler/DayRuler.styles.ts
+function rootSx(hasActions) {
+  return (theme) => ({
+    containerType: "inline-size",
+    minWidth: 0,
+    width: "100%",
+    userSelect: "none",
+    "--dr-actions": hasActions ? rem(theme, DAY_RULER_METRICS.sideColumn) : "0%"
+  });
+}
+function compact(theme) {
+  return `@container (width < ${rem(theme, DAY_RULER_METRICS.compactBelow)})`;
+}
+function phone(theme) {
+  return `@container (width < ${rem(theme, DAY_RULER_METRICS.phoneBelow)})`;
+}
+var lineSx = (theme) => ({
+  display: "grid",
+  gridTemplateColumns: `${rem(theme, DAY_RULER_METRICS.sideColumn)} minmax(0, 1fr) var(--dr-actions)`,
+  columnGap: rem(theme, DAY_RULER_METRICS.gap),
+  alignItems: "center",
+  // Stacked: across the full width, like the tracks; the label above the counts.
+  [compact(theme)]: {
+    gridTemplateColumns: "minmax(0, 1fr)",
+    rowGap: rem(theme, DAY_RULER_METRICS.coverage.gap),
+    "& > span:empty": { display: "none" }
+  },
+  [phone(theme)]: { display: "none" }
+});
+var coverageLabelSx = { fontSize: sxRem(DAY_RULER_METRICS.meta), color: "text.secondary" };
+function coverageSx(hours) {
+  return (theme) => ({
+    display: "grid",
+    gridTemplateColumns: `repeat(${hours}, minmax(0, 1fr))`,
+    gap: rem(theme, DAY_RULER_METRICS.coverage.gap),
+    height: rem(theme, DAY_RULER_METRICS.coverage.height)
+  });
+}
+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"
+  });
+}
+var axisSx = (theme) => ({
+  position: "relative",
+  height: rem(theme, DAY_RULER_METRICS.axis.height),
+  fontSize: rem(theme, DAY_RULER_METRICS.axis.font),
+  color: theme.palette.text.secondary,
+  mt: 0.5,
+  "& > span": { position: "absolute", transform: "translateX(-50%)", whiteSpace: "nowrap" }
+});
+var groupTitleSx = {
+  fontSize: sxRem(DAY_RULER_METRICS.groupTitle),
+  letterSpacing: "0.05em",
+  textTransform: "uppercase",
+  color: "text.secondary",
+  fontWeight: 500,
+  pt: 1.5,
+  pb: 0.5,
+  m: 0
+};
+var rowSx = (theme) => ({
+  display: "grid",
+  gridTemplateColumns: `${rem(theme, DAY_RULER_METRICS.sideColumn)} minmax(0, 1fr) var(--dr-actions)`,
+  gridTemplateAreas: '"who track actions"',
+  columnGap: rem(theme, DAY_RULER_METRICS.gap),
+  alignItems: "center",
+  py: rem(theme, DAY_RULER_METRICS.rowPaddingY),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  [compact(theme)]: {
+    gridTemplateColumns: "minmax(0, 1fr) auto",
+    gridTemplateAreas: '"who actions" "track track"',
+    rowGap: theme.spacing(1),
+    py: theme.spacing(1.5)
+  }
+});
+var whoSx = { gridArea: "who", minWidth: 0 };
+var actionsSx = {
+  gridArea: "actions",
+  display: "flex",
+  gap: 1,
+  alignItems: "center",
+  justifyContent: "flex-end",
+  flexWrap: "wrap",
+  minWidth: 0
+};
+function breakSx(span) {
+  return (theme) => ({
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: `${span.at}%`,
+    width: `${span.share}%`,
+    background: breakHatch(theme, rem(theme, DAY_RULER_METRICS.breakStripe.ink), rem(theme, DAY_RULER_METRICS.breakStripe.ink + DAY_RULER_METRICS.breakStripe.gap)),
+    pointerEvents: "none",
+    // Where the band meets an end of the block it takes the block's rounding:
+    // on a phone the block does not clip (its hit area reaches past it).
+    ...span.at <= 0.01 ? { borderTopLeftRadius: "inherit", borderBottomLeftRadius: "inherit" } : {},
+    ...span.at + span.share >= 99.99 ? { borderTopRightRadius: "inherit", borderBottomRightRadius: "inherit" } : {}
+  });
+}
+function hourLines(theme, hours, every) {
+  const line = theme.palette.divider;
+  const step = `${100 * every / hours}%`;
+  const hairline = `${FIELD_BORDER_WIDTH}px`;
+  return `repeating-linear-gradient(to right, ${line} 0, ${line} ${hairline}, transparent ${hairline}, transparent ${step})`;
+}
+function trackSx(opts) {
+  return (theme) => ({
+    gridArea: "track",
+    position: "relative",
+    height: rem(theme, DAY_RULER_METRICS.track.height),
+    borderRadius: rem(theme, DAY_RULER_METRICS.track.radius),
+    backgroundColor: theme.palette.action.hover,
+    backgroundImage: hourLines(theme, opts.hours, 1),
+    cursor: opts.interactive ? "crosshair" : "default",
+    touchAction: "auto",
+    outline: "none",
+    "&:focus-visible": { boxShadow: `0 0 0 ${rem(theme, DAY_RULER_METRICS.ring)} ${theme.palette.primary.main}` },
+    [compact(theme)]: {
+      height: rem(theme, DAY_RULER_METRICS.track.compactHeight),
+      borderRadius: rem(theme, DAY_RULER_METRICS.track.compactRadius),
+      backgroundImage: hourLines(theme, opts.hours, opts.tickHours)
+    }
+  });
+}
+function blockSx(tone, span, opts) {
+  return (theme) => ({
+    ...blockToneStyles(theme, tone, true),
+    position: "absolute",
+    left: `${span.at}%`,
+    width: `${span.share}%`,
+    top: rem(theme, DAY_RULER_METRICS.block.top),
+    height: rem(theme, DAY_RULER_METRICS.block.height),
+    boxSizing: "border-box",
+    borderRadius: rem(theme, DAY_RULER_METRICS.block.radius),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: `0 ${rem(theme, DAY_RULER_METRICS.block.paddingX)}`,
+    margin: 0,
+    font: "inherit",
+    fontSize: rem(theme, DAY_RULER_METRICS.block.font),
+    fontWeight: 500,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    cursor: opts.movable ? "grab" : "pointer",
+    boxShadow: opts.selected ? `0 0 0 ${rem(theme, DAY_RULER_METRICS.ring)} ${theme.palette.primary.main}` : "none",
+    "&:focus-visible": { outline: `${rem(theme, DAY_RULER_METRICS.ring)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, DAY_RULER_METRICS.ringOffset) },
+    "& [data-dr-text]": { position: "relative", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 },
+    '& [data-dr-text="short"]': { display: "none" },
+    [compact(theme)]: {
+      top: rem(theme, DAY_RULER_METRICS.block.compactTop),
+      height: rem(theme, DAY_RULER_METRICS.block.compactHeight),
+      // A 40px hit area around the 20px bar, the look unchanged: the text cuts
+      // itself (its spans ellipsize), so the block need not clip.
+      overflow: "visible",
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: "50%",
+        height: rem(theme, DAY_RULER_METRICS.block.hitArea),
+        transform: "translateY(-50%)"
+      },
+      '&[data-narrow] [data-dr-text="full"]': { display: "none" },
+      '&[data-narrow] [data-dr-text="short"]': { display: "inline" }
+    }
+  });
+}
+function handleSx(side) {
+  return (theme) => ({
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    [side === "l" ? "left" : "right"]: 0,
+    width: rem(theme, DAY_RULER_METRICS.handle),
+    cursor: "ew-resize"
+  });
+}
+function actualSx(span) {
+  return (theme) => ({
+    position: "absolute",
+    left: `${span.at}%`,
+    width: `${span.share}%`,
+    top: rem(theme, DAY_RULER_METRICS.actual.top),
+    height: rem(theme, DAY_RULER_METRICS.actual.height),
+    borderRadius: rem(theme, DAY_RULER_METRICS.actual.radius),
+    backgroundColor: actualBarColor(theme),
+    pointerEvents: "none",
+    [compact(theme)]: { top: rem(theme, DAY_RULER_METRICS.actual.compactTop), height: rem(theme, DAY_RULER_METRICS.actual.compactHeight) }
+  });
+}
+function actualLabelSx(left) {
+  return (theme) => ({
+    position: "absolute",
+    left: `calc(${left}% + ${rem(theme, DAY_RULER_METRICS.actualLabel.offset)})`,
+    top: rem(theme, DAY_RULER_METRICS.actualLabel.top),
+    fontSize: rem(theme, DAY_RULER_METRICS.actualLabel.font),
+    color: theme.palette.text.secondary,
+    whiteSpace: "nowrap",
+    pointerEvents: "none",
+    [compact(theme)]: { display: "none" }
+  });
+}
+function nowSx(left) {
+  return (theme) => ({
+    position: "absolute",
+    left: `${left}%`,
+    top: rem(theme, -DAY_RULER_METRICS.now.overhang),
+    bottom: rem(theme, -DAY_RULER_METRICS.now.overhang),
+    width: rem(theme, DAY_RULER_METRICS.now.width),
+    backgroundColor: theme.palette.primary.main,
+    pointerEvents: "none"
+  });
+}
+var skeletonTrackSx = (theme) => ({
+  gridArea: "track",
+  height: rem(theme, DAY_RULER_METRICS.track.height),
+  borderRadius: rem(theme, DAY_RULER_METRICS.track.radius),
+  backgroundColor: theme.palette.action.hover
+});
+var skeletonNameSx = (theme) => ({
+  gridArea: "who",
+  height: rem(theme, DAY_RULER_METRICS.name),
+  width: "60%",
+  borderRadius: rem(theme, DAY_RULER_METRICS.skeletonNameRadius),
+  backgroundColor: theme.palette.action.hover
+});
+
+export {
+  rootSx,
+  lineSx,
+  coverageLabelSx,
+  coverageSx,
+  coverageCellSx,
+  axisSx,
+  groupTitleSx,
+  rowSx,
+  whoSx,
+  actionsSx,
+  breakSx,
+  trackSx,
+  blockSx,
+  handleSx,
+  actualSx,
+  actualLabelSx,
+  nowSx,
+  skeletonTrackSx,
+  skeletonNameSx
+};
+//# sourceMappingURL=chunk-EEK2NK4W.js.map

package/dist/chunk-EEK2NK4W.js.map

@@ -0,0 +1 @@
+{"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":";;;;;;;;;;;;;;;;;;;;AAcO,SAAS,OAAO,YAAqC;AAC1D,SAAO,CAAC,WAAkB;AAAA,IACxB,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,gBAAgB,aAAa,IAAI,OAAO,kBAAE,UAAU,IAAI;AAAA,EAC1D;AACF;AAGA,SAAS,QAAQ,OAAsB;AACrC,SAAO,uBAAuB,IAAI,OAAO,kBAAE,YAAY,CAAC;AAC1D;AAGA,SAAS,MAAM,OAAsB;AACnC,SAAO,uBAAuB,IAAI,OAAO,kBAAE,UAAU,CAAC;AACxD;AAGO,IAAM,SAAyB,CAAC,WAAkB;AAAA,EACvD,SAAS;AAAA,EACT,qBAAqB,GAAG,IAAI,OAAO,kBAAE,UAAU,CAAC;AAAA,EAChD,WAAW,IAAI,OAAO,kBAAE,GAAG;AAAA,EAC3B,YAAY;AAAA;AAAA,EAEZ,CAAC,QAAQ,KAAK,CAAC,GAAG;AAAA,IAChB,qBAAqB;AAAA,IACrB,QAAQ,IAAI,OAAO,kBAAE,SAAS,GAAG;AAAA,IACjC,kBAAkB,EAAE,SAAS,OAAO;AAAA,EACtC;AAAA,EACA,CAAC,MAAM,KAAK,CAAC,GAAG,EAAE,SAAS,OAAO;AACpC;AAEO,IAAM,kBAAkC,EAAE,UAAU,MAAM,kBAAE,IAAI,GAAG,OAAO,iBAAiB;AAE3F,SAAS,WAAW,OAA+B;AACxD,SAAO,CAAC,WAAkB;AAAA,IACxB,SAAS;AAAA,IACT,qBAAqB,UAAU,KAAK;AAAA,IACpC,KAAK,IAAI,OAAO,kBAAE,SAAS,GAAG;AAAA,IAC9B,QAAQ,IAAI,OAAO,kBAAE,SAAS,MAAM;AAAA,EACtC;AACF;AAEO,SAAS,eAAe,OAA+B;AAC5D,SAAO,CAAC,WAAkB;AAAA,IACxB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU,IAAI,OAAO,kBAAE,SAAS,IAAI;AAAA,IACpC,cAAc,IAAI,OAAO,kBAAE,SAAS,MAAM;AAAA,IAC1C,OAAO,MAAM,QAAQ,KAAK;AAAA,IAC1B,iBAAiB,QAAQ,IAAI,WAAW,OAAO,SAAS,IAAI,MAAM,QAAQ,OAAO;AAAA,IACjF,QAAQ,QAAQ,IAAI,aAAa,MAAM,QAAQ,QAAQ,IAAI,KAAK;AAAA,IAChE,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AACF;AAEO,IAAM,SAAyB,CAAC,WAAkB;AAAA,EACvD,UAAU;AAAA,EACV,QAAQ,IAAI,OAAO,kBAAE,KAAK,MAAM;AAAA,EAChC,UAAU,IAAI,OAAO,kBAAE,KAAK,IAAI;AAAA,EAChC,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC1B,IAAI;AAAA,EACJ,YAAY,EAAE,UAAU,YAAY,WAAW,oBAAoB,YAAY,SAAS;AAC1F;AAEO,IAAM,eAA+B;AAAA,EAC1C,UAAU,MAAM,kBAAE,UAAU;AAAA,EAC5B,eAAe;AAAA,EACf,eAAe;AAAA,EACf,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,GAAG;AACL;AAMO,IAAM,QAAwB,CAAC,WAAkB;AAAA,EACtD,SAAS;AAAA,EACT,qBAAqB,GAAG,IAAI,OAAO,kBAAE,UAAU,CAAC;AAAA,EAChD,mBAAmB;AAAA,EACnB,WAAW,IAAI,OAAO,kBAAE,GAAG;AAAA,EAC3B,YAAY;AAAA,EACZ,IAAI,IAAI,OAAO,kBAAE,WAAW;AAAA,EAC5B,cAAc,aAAa,MAAM,QAAQ,OAAO;AAAA,EAChD,CAAC,QAAQ,KAAK,CAAC,GAAG;AAAA,IAChB,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,QAAQ,MAAM,QAAQ,CAAC;AAAA,IACvB,IAAI,MAAM,QAAQ,GAAG;AAAA,EACvB;AACF;AAEO,IAAM,QAAwB,EAAE,UAAU,OAAO,UAAU,EAAE;AAE7D,IAAM,YAA4B;AAAA,EACvC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AACZ;AAGO,SAAS,QAAQ,MAA4B;AAClD,SAAO,CAAC,WAAkB;AAAA,IACxB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM,GAAG,KAAK,EAAE;AAAA,IAChB,OAAO,GAAG,KAAK,KAAK;AAAA,IACpB,YAAY,WAAW,OAAO,IAAI,OAAO,kBAAE,YAAY,GAAG,GAAG,IAAI,OAAO,kBAAE,YAAY,MAAM,kBAAE,YAAY,GAAG,CAAC;AAAA,IAC9G,eAAe;AAAA;AAAA;AAAA,IAGf,GAAI,KAAK,MAAM,OAAO,EAAE,qBAAqB,WAAW,wBAAwB,UAAU,IAAI,CAAC;AAAA,IAC/F,GAAI,KAAK,KAAK,KAAK,SAAS,QAAQ,EAAE,sBAAsB,WAAW,yBAAyB,UAAU,IAAI,CAAC;AAAA,EACjH;AACF;AAGA,SAAS,UAAU,OAAc,OAAe,OAAuB;AACrE,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM,OAAO,GAAI,MAAM,QAAS,KAAK;AACrC,QAAM,WAAW,GAAG,kBAAkB;AACtC,SAAO,uCAAuC,IAAI,OAAO,IAAI,IAAI,QAAQ,iBAAiB,QAAQ,iBAAiB,IAAI;AACzH;AAEO,SAAS,QAAQ,MAAkF;AACxG,SAAO,CAAC,WAAkB;AAAA,IACxB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ,IAAI,OAAO,kBAAE,MAAM,MAAM;AAAA,IACjC,cAAc,IAAI,OAAO,kBAAE,MAAM,MAAM;AAAA,IACvC,iBAAiB,MAAM,QAAQ,OAAO;AAAA,IACtC,iBAAiB,UAAU,OAAO,KAAK,OAAO,CAAC;AAAA,IAC/C,QAAQ,KAAK,cAAc,cAAc;AAAA,IACzC,aAAa;AAAA,IACb,SAAS;AAAA,IACT,mBAAmB,EAAE,WAAW,SAAS,IAAI,OAAO,kBAAE,IAAI,CAAC,IAAI,MAAM,QAAQ,QAAQ,IAAI,GAAG;AAAA,IAC5F,CAAC,QAAQ,KAAK,CAAC,GAAG;AAAA,MAChB,QAAQ,IAAI,OAAO,kBAAE,MAAM,aAAa;AAAA,MACxC,cAAc,IAAI,OAAO,kBAAE,MAAM,aAAa;AAAA,MAC9C,iBAAiB,UAAU,OAAO,KAAK,OAAO,KAAK,SAAS;AAAA,IAC9D;AAAA,EACF;AACF;AAQO,SAAS,QAAQ,MAAyB,MAAY,MAA+D;AAC1H,SAAO,CAAC,WAA6B;AAAA,IACnC,GAAG,gBAAgB,OAAO,MAAM,IAAI;AAAA,IACpC,UAAU;AAAA,IACV,MAAM,GAAG,KAAK,EAAE;AAAA,IAChB,OAAO,GAAG,KAAK,KAAK;AAAA,IACpB,KAAK,IAAI,OAAO,kBAAE,MAAM,GAAG;AAAA,IAC3B,QAAQ,IAAI,OAAO,kBAAE,MAAM,MAAM;AAAA,IACjC,WAAW;AAAA,IACX,cAAc,IAAI,OAAO,kBAAE,MAAM,MAAM;AAAA,IACvC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,SAAS,KAAK,IAAI,OAAO,kBAAE,MAAM,QAAQ,CAAC;AAAA,IAC1C,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU,IAAI,OAAO,kBAAE,MAAM,IAAI;AAAA,IACjC,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ,KAAK,UAAU,SAAS;AAAA,IAChC,WAAW,KAAK,WAAW,SAAS,IAAI,OAAO,kBAAE,IAAI,CAAC,IAAI,MAAM,QAAQ,QAAQ,IAAI,KAAK;AAAA,IACzF,mBAAmB,EAAE,SAAS,GAAG,IAAI,OAAO,kBAAE,IAAI,CAAC,UAAU,MAAM,QAAQ,QAAQ,IAAI,IAAI,eAAe,IAAI,OAAO,kBAAE,UAAU,EAAE;AAAA,IACnI,oBAAoB,EAAE,UAAU,YAAY,UAAU,UAAU,cAAc,YAAY,UAAU,EAAE;AAAA,IACtG,4BAA4B,EAAE,SAAS,OAAO;AAAA,IAC9C,CAAC,QAAQ,KAAK,CAAC,GAAG;AAAA,MAChB,KAAK,IAAI,OAAO,kBAAE,MAAM,UAAU;AAAA,MAClC,QAAQ,IAAI,OAAO,kBAAE,MAAM,aAAa;AAAA;AAAA;AAAA,MAGxC,UAAU;AAAA,MACV,YAAY;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,QACL,QAAQ,IAAI,OAAO,kBAAE,MAAM,OAAO;AAAA,QAClC,WAAW;AAAA,MACb;AAAA,MACA,wCAAwC,EAAE,SAAS,OAAO;AAAA,MAC1D,yCAAyC,EAAE,SAAS,SAAS;AAAA,IAC/D;AAAA,EACF;AACF;AAEO,SAAS,SAAS,MAAiC;AACxD,SAAO,CAAC,WAAkB;AAAA,IACxB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,CAAC,SAAS,MAAM,SAAS,OAAO,GAAG;AAAA,IACnC,OAAO,IAAI,OAAO,kBAAE,MAAM;AAAA,IAC1B,QAAQ;AAAA,EACV;AACF;AAEO,SAAS,SAAS,MAA4B;AACnD,SAAO,CAAC,WAAkB;AAAA,IACxB,UAAU;AAAA,IACV,MAAM,GAAG,KAAK,EAAE;AAAA,IAChB,OAAO,GAAG,KAAK,KAAK;AAAA,IACpB,KAAK,IAAI,OAAO,kBAAE,OAAO,GAAG;AAAA,IAC5B,QAAQ,IAAI,OAAO,kBAAE,OAAO,MAAM;AAAA,IAClC,cAAc,IAAI,OAAO,kBAAE,OAAO,MAAM;AAAA,IACxC,iBAAiB,eAAe,KAAK;AAAA,IACrC,eAAe;AAAA,IACf,CAAC,QAAQ,KAAK,CAAC,GAAG,EAAE,KAAK,IAAI,OAAO,kBAAE,OAAO,UAAU,GAAG,QAAQ,IAAI,OAAO,kBAAE,OAAO,aAAa,EAAE;AAAA,EACvG;AACF;AAEO,SAAS,cAAc,MAA8B;AAC1D,SAAO,CAAC,WAAkB;AAAA,IACxB,UAAU;AAAA,IACV,MAAM,QAAQ,IAAI,OAAO,IAAI,OAAO,kBAAE,YAAY,MAAM,CAAC;AAAA,IACzD,KAAK,IAAI,OAAO,kBAAE,YAAY,GAAG;AAAA,IACjC,UAAU,IAAI,OAAO,kBAAE,YAAY,IAAI;AAAA,IACvC,OAAO,MAAM,QAAQ,KAAK;AAAA,IAC1B,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,CAAC,QAAQ,KAAK,CAAC,GAAG,EAAE,SAAS,OAAO;AAAA,EACtC;AACF;AAEO,SAAS,MAAM,MAA8B;AAClD,SAAO,CAAC,WAAkB;AAAA,IACxB,UAAU;AAAA,IACV,MAAM,GAAG,IAAI;AAAA,IACb,KAAK,IAAI,OAAO,CAAC,kBAAE,IAAI,QAAQ;AAAA,IAC/B,QAAQ,IAAI,OAAO,CAAC,kBAAE,IAAI,QAAQ;AAAA,IAClC,OAAO,IAAI,OAAO,kBAAE,IAAI,KAAK;AAAA,IAC7B,iBAAiB,MAAM,QAAQ,QAAQ;AAAA,IACvC,eAAe;AAAA,EACjB;AACF;AAEO,IAAM,kBAAkC,CAAC,WAAkB;AAAA,EAChE,UAAU;AAAA,EACV,QAAQ,IAAI,OAAO,kBAAE,MAAM,MAAM;AAAA,EACjC,cAAc,IAAI,OAAO,kBAAE,MAAM,MAAM;AAAA,EACvC,iBAAiB,MAAM,QAAQ,OAAO;AACxC;AAEO,IAAM,iBAAiC,CAAC,WAAkB;AAAA,EAC/D,UAAU;AAAA,EACV,QAAQ,IAAI,OAAO,kBAAE,IAAI;AAAA,EACzB,OAAO;AAAA,EACP,cAAc,IAAI,OAAO,kBAAE,kBAAkB;AAAA,EAC7C,iBAAiB,MAAM,QAAQ,OAAO;AACxC;","names":[]}

package/dist/{chunk-ANUO67JQ.js → chunk-EIMFA7KP.js}

@@ -2,7 +2,7 @@ import {
   SwitchControl,
   SwitchHelper,
   SwitchRow
-} from "./chunk-2FQF4CNE.js";
+} from "./chunk-OPP6USJC.js";
 import {
   switchIds
 } from "./chunk-SZS7VZJN.js";
@@ -124,4 +124,4 @@ Switch.displayName = "Switch";
 export {
   Switch
 };
-//# sourceMappingURL=chunk-ANUO67JQ.js.map
+//# sourceMappingURL=chunk-EIMFA7KP.js.map

package/dist/{chunk-C5RQBTRZ.js → chunk-EIOGJBJ5.js}

@@ -3,12 +3,19 @@ import {
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx
+import Box from "@mui/material/Box/index.js";
 import Paper from "@mui/material/Paper/index.js";
 import { alpha, useTheme } from "@mui/material/styles/index.js";
-import { jsx } from "react/jsx-runtime";
-var AddressSuggestionsPaper = (props) => {
+import { Children } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AddressSuggestionsPaper = ({
+  emptyText,
+  children,
+  ...props
+}) => {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx(
+  const empty = Children.toArray(children).length === 0;
+  return /* @__PURE__ */ jsxs(
     Paper,
     {
       ...props,
@@ -20,7 +27,20 @@ var AddressSuggestionsPaper = (props) => {
         backdropFilter: `blur(${rem(theme, 20)})`,
         WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(theme.palette.divider, 0.18)}`
-      }
+      },
+      children: [
+        children,
+        empty && emptyText && /* @__PURE__ */ jsx(
+          Box,
+          {
+            role: "presentation",
+            "data-testid": "address-suggestions-empty",
+            onMouseDown: (event) => event.preventDefault(),
+            sx: { px: 2, py: 1.5, color: "text.secondary" },
+            children: emptyText
+          }
+        )
+      ]
     }
   );
 };
@@ -28,4 +48,4 @@ var AddressSuggestionsPaper = (props) => {
 export {
   AddressSuggestionsPaper
 };
-//# sourceMappingURL=chunk-C5RQBTRZ.js.map
+//# sourceMappingURL=chunk-EIOGJBJ5.js.map

package/dist/chunk-EIOGJBJ5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx"],"sourcesContent":["import type { PaperProps } from '@mui/material/Paper/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React, { Children } from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nexport interface AddressSuggestionsPaperProps extends PaperProps {\n  /**\n   * Said when the list is open with nothing in it. MUI never renders its own\n   * `noOptionsText` for a `freeSolo` field, so an empty list was a blank strip\n   * (FUT-4162): the paper says it instead, exactly when MUI gave it no content\n   * (no suggestions and no loading row).\n   */\n  emptyText?: React.ReactNode;\n}\n\n// The dropdown surface, frosted to match the glass field.\nexport const AddressSuggestionsPaper: FC<AddressSuggestionsPaperProps> = ({\n  emptyText,\n  children,\n  ...props\n}) => {\n  const theme = useTheme();\n  const empty = Children.toArray(children).length === 0;\n\n  return (\n    <Paper\n      {...props}\n      elevation={8}\n      data-testid=\"address-suggestions-dropdown\"\n      sx={{\n        mt: 1,\n        background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        WebkitBackdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n      }}\n    >\n      {children}\n      {empty && emptyText && (\n        <Box\n          role=\"presentation\"\n          data-testid=\"address-suggestions-empty\"\n          // Keeps the input focused, as MUI's own no-options row does.\n          onMouseDown={(event) => event.preventDefault()}\n          sx={{ px: 2, py: 1.5, color: 'text.secondary' }}\n        >\n          {emptyText}\n        </Box>\n      )}\n    </Paper>\n  );\n};\n"],"mappings":";;;;;AACA,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,SAAS,OAAO,gBAAgB;AAEhC,SAAgB,gBAAgB;AAwB5B,SAcI,KAdJ;AATG,IAAM,0BAA4D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAQ,SAAS,QAAQ,QAAQ,EAAE,WAAW;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC;AAAA,QACrI,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QACtC,sBAAsB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QAC5C,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AAAA,MACzD;AAAA,MAEC;AAAA;AAAA,QACA,SAAS,aACR;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAY;AAAA,YAEZ,aAAa,CAAC,UAAU,MAAM,eAAe;AAAA,YAC7C,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,OAAO,iBAAiB;AAAA,YAE7C;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/{chunk-AKE6KVQG.js → chunk-EVIQUBC6.js}

@@ -1,10 +1,10 @@
+import {
+  labelPosition
+} from "./chunk-COOSJKZL.js";
 import {
   labelOrder,
   placeLabels
 } from "./chunk-J3AWGTJY.js";
-import {
-  labelPosition
-} from "./chunk-COOSJKZL.js";
 import {
   rem,
   remPx
@@ -252,4 +252,4 @@ function AreaLabel({
 export {
   RegionMapDrawing
 };
-//# sourceMappingURL=chunk-AKE6KVQG.js.map
+//# sourceMappingURL=chunk-EVIQUBC6.js.map