@salemcobalt/ui 0.2.0-rc.23 → 0.2.0-rc.25

package/README.md

@@ -33,7 +33,7 @@ Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS alwa
 | `Card`                   | `variant` outlined · elevated · filled · plain (a quiet row: no surface, a hover wash without border or shadow, selected is `accent.wash` with a 1px `accent.border`); `padding` none · sm · md · lg; `interactive`; `selected` (visual only: pair with `aria-pressed`/`aria-selected`/`aria-current`; also turns a Score inside solid); `as` or `render` to make it an `a`/`button`/`li`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `Stack`, `Inline`        | `gap` from the spacing scale (`none` … `4xl`); `align`; `justify`; `as`. `Inline` wraps unless `wrap={false}`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | `Kbd`                    | One key per `Kbd`; `Kbd.Group label="Command K"` groups a shortcut with a `+` (or `separator="space"`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `Dialog`                 | `Root` (`open`, `defaultOpen`, `onOpenChange`, `dismissible`, `onRequestClose(reason)`: Esc, backdrop and every `Close` ask instead of closing; close by setting `open`), `Trigger`, `Content` (`size` sm · md · lg, every size clamps to the viewport minus a 16px gutter; `variant="sheet"` becomes a bottom sheet below 640px with a scrolling `Body`; `variant="fullscreen"` covers the viewport, inset 16px from 900px, with a scrolling `Body`), `Title`, `Description`, `Body`, `Actions`, `Close`. Menus, selects and tooltips opened inside render above it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `Dialog`                 | `Root` (`open`, `defaultOpen`, `onOpenChange`, `dismissible`, `onRequestClose(reason)`: Esc, backdrop and every `Close` ask instead of closing; close by setting `open`), `Trigger`, `Content` (`size` sm · md · lg, every size clamps to the viewport minus a 16px gutter; `variant="sheet"` becomes a bottom sheet below 640px with a scrolling `Body` and swipe-down-to-dismiss from its handle or header (top 64px, outside controls and `Body`; closes past 30% of its height or on a flick, otherwise springs back; the handle is a `Close` named "Dismiss"; `dismissOnSwipe={false}` where an accidental close loses work, also off when the Root is not `dismissible`); `variant="fullscreen"` covers the viewport, inset 16px from 900px, with a scrolling `Body`), `Title`, `Description`, `Body`, `Actions`, `Close`. Menus, selects and tooltips opened inside render above it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `FullScreenFlow`         | A multi-step takeover on `Dialog variant="fullscreen"` (docs/adr/0006). `Root` (`open` default `true`, required `onRequestClose(reason)` for Esc and the ×, `onNext`/`onBack` for Enter and the arrow keys outside controls, `decoration`), `Header` (`title` names the dialog, `logo`, `compactTitle` below 760px, `status`, `closeLabel`; children: `Progress`), `Progress` (`chapters` `{ label, steps }[]`, `step` counted from 1, `label`; current chapter `aria-current="step"`), `Body`, `Rail` (from 1000px, `footer`) › `RailGroup` (`label`) › `RailItem` (`current`, `done`, `disabled`, `adornment`), `Viewport` (`direction` forward · back; one keyed `Step`), `Step` (`title` an `<h2>` that takes focus, `eyebrow`, `description`, `announcement` for the live region), `Footer` (`back`, `hint`, children; 44px buttons). The app owns the step state; the flow owns motion, focus and announcements.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `Toolbar`                | `Root` (required `aria-label`, `wrap`, `gap`), `Group` (`aria-label`, `gap`), `Separator`, `Spacer`, `Button` (`render={<IconButton … />}` or `render={<Menu.Trigger render={…} />}` so the control joins the roving focus: Tab enters, arrows move, Tab leaves), `Link` (an anchor in the same navigation; `render={<IconButton label render={<a href />} />}` for an icon link).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `Banner`                 | `tone` info (default) · success · warning · danger · neutral; `icon` (or `false`); `action` slot; `dismissible` + `onDismiss` (`open` to control); warning and danger are `role="alert"`, the rest `role="status"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
@@ -53,7 +53,7 @@ Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS alwa
 | `SelectionBar`           | Floating bulk-action bar on Toolbar, centred at the bottom of the viewport (content width up to 48rem, gutters and the safe area respected, full width between the gutters under 640px, fade and slide-up, none under reduced motion): `count` (hidden at 0), `onClear`, children are `Toolbar.Button`s, `aria-label` ("Bulk actions"), `countLabel`, `clearLabel`. Mount it at the end of the scrolling content: while open it leaves a spacer as tall as itself so the last rows scroll clear. A polite status region announces the count; focus returns to where it came from when the bar leaves.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `Toast`                  | `Toast.Provider` (`timeout` 6000, `limit` 3) near the root, `useToast().add({ title, description, tone, action: { label, onClick }, timeout, priority })` below it; Base UI Toast: polite region, paused on hover and focus, F6 to reach it, bottom-end at `--sc-z-toast`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `PriorityNav`            | Priority+ primary navigation (docs/adr/0005): required `aria-label`; `items` as `{ href, label, id?, current?, badge?, badgeLabel? }` in priority order; links that fit stay inline and the rest go into a "More" disclosure (APG disclosure navigation: a `button` with `aria-expanded`, not a menu; Esc, click outside and focus leaving close it). The `current` link is never collapsed. `moreLabel`, `moreCountLabel(n)` (announced only: "More, 3 links"), `renderLink={(props) => <Link {...props} />}` for a router. Server-renders every link on one clipped line (scrolls sideways without JS), measures widths once (again after web fonts load or when keys/string labels change) and re-renders only when the inline count changes. Takes the free space in a flex row (`flex: 1 1 0%`); in a grid use a `minmax(0, 1fr)` track. The open panel sits in the top layer (Popover API), anchored to the toggle with CSS anchor positioning (a JS fallback elsewhere) and capped to the viewport. `data-overflowing` + `onOverflowChange(boolean)` let a header make room, with `overflowHysteresis` (px) so it cannot oscillate. Under 400px wide (container query) More shows only an ellipsis. `badge` (a count, or `'dot'`; `0` shows nothing) draws an accent pill or dot after the label, decorative, with `badgeLabel` ("2 suggestions to review") appended to the link's name; while the item is collapsed, More shows the collapsed items' summed count (a dot when they only have dots) and adds their `badgeLabel`s to its name ("More, 3 links, 2 suggestions to review"). Icon-only, the badge sits on More's corner. No motion. |
-| `Popover`                | Non-modal panel on Base UI Popover: `Root` (`open`, `defaultOpen`, `onOpenChange`, `modal` default false), `Trigger` (secondary Button, or `render={<IconButton label dot />}`), `Content` (`side`, `align`, `sideOffset`, `arrow`; Menu's surface, `--sc-z-dropdown`), `Title` (names the dialog), `Description`, `Close` (the × with no children, or wraps a Button). Esc and focus return come from Base UI.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `Popover`                | Non-modal panel on Base UI Popover: `Root` (`open`, `defaultOpen`, `onOpenChange`, `modal` default false), `Trigger` (secondary Button, or `render={<IconButton label dot />}`), `Content` (`side`, `align`, `sideOffset`, `arrow`, `anchor` to position against another element than the Trigger, e.g. a row's action button with a controlled `Root`; portaled to `document.body`; Menu's surface, `--sc-z-dropdown`, dropping to the backdrop layer while a Dialog opened from inside it is open, so the Dialog covers it), `Title` (names the dialog), `Description`, `Close` (the × with no children, or wraps a Button). Esc and focus return come from Base UI.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `BroomIcon`              | Animated 24px-grid icon for "a sweep is running": `sweeping`, `size` (Icon sizes, default `lg`, or `display` 72px with a 1.75px stroke), `title`. Inline SVG; strokes stay 1.25px at any size; holds still with the dust shown under `prefers-reduced-motion`. Inside an IconButton it takes the next icon size up.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `Score`                  | A number on a tinted tile or in a ring: required `value` (a number, or `null` for not scored yet: a muted dash on the neutral tile or in an empty ring, no tone, no arc, read as "Fit score: not scored"), `max` (100), `tone` neutral · accent (default) · success · warning · danger (no thresholds inside: map value to tone in the app), `variant` tile · ring (64px, decorative SVG, arc animates only on change, none under reduced motion), `size` sm 40 · md 48 (tile), `caption`, `label` ("Fit score"), `valueText`, `selected`. Assistive tech reads one visually hidden sentence, "Fit score 94 out of 100"; the visible number is `aria-hidden`, no `aria-label`. A tile turns solid when `selected` or inside `.sc-card[data-selected]`, `[aria-pressed="true"]` or `[aria-selected="true"]`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `ReasonList`             | `ReasonList` (`ul`) + `ReasonList.Item` (`li`): required `tone` for (filled square) · against (bar) · gap (hollow circle), so the marker shape carries the meaning as well as the colour; `size` sm · md; `divider` (dashed rule above). Name it with a heading via `aria-labelledby`; `<strong>` inside picks out key words.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |

package/dist/index.d.ts

@@ -738,13 +738,21 @@ interface DialogContentProps extends Omit<Dialog$1.Popup.Props, 'className'> {
      * the Root when leaving needs a confirmation.
      */
     variant?: DialogVariant | undefined;
+    /**
+     * `sheet` only. Below 640px a downward drag on the handle or the header (the top 64px, outside controls
+     * and `Dialog.Body`) moves the sheet; letting go past 30% of its height, or flicking down, closes it the
+     * way a press on the handle does (the handle is a `Dialog.Close` named "Dismiss"). Set `false` where an
+     * accidental close loses work; the handle then stays as decoration only. Off whenever the Root is not
+     * `dismissible`. Default `true`.
+     */
+    dismissOnSwipe?: boolean | undefined;
     className?: string | undefined;
 }
 /**
  * Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close.
  * Menus, selects and tooltips opened from inside render above it (`--sc-z-dropdown` > `--sc-z-dialog`).
  */
-declare function Content$2({ size, variant, className, children, ...rest }: DialogContentProps): react.JSX.Element;
+declare function Content$2({ size, variant, dismissOnSwipe, className, children, ...rest }: DialogContentProps): react.JSX.Element;
 interface DialogTitleProps extends Omit<Dialog$1.Title.Props, 'className'> {
     className?: string | undefined;
 }
@@ -2729,10 +2737,16 @@ interface PopoverContentProps extends Omit<Popover$1.Popup.Props, 'className'> {
     sideOffset?: number | undefined;
     /** Draws a tip pointing at the trigger. */
     arrow?: boolean | undefined;
+    /**
+     * What to position against instead of the `Popover.Trigger`: an element, a ref to one, a virtual element or a
+     * function returning either. For a popover opened from elsewhere (a menu item, a row action) with a controlled
+     * `Popover.Root open`. The panel is still portaled to `document.body`.
+     */
+    anchor?: Popover$1.Positioner.Props['anchor'];
     className?: string | undefined;
 }
 /** Portal, positioner and the panel. Any content goes inside; name it with `Popover.Title`. */
-declare function Content({ side, align, sideOffset, arrow, className, children, ...rest }: PopoverContentProps): react.JSX.Element;
+declare function Content({ side, align, sideOffset, arrow, anchor, className, children, ...rest }: PopoverContentProps): react.JSX.Element;
 interface PopoverTitleProps extends Omit<Popover$1.Title.Props, 'className'> {
     className?: string | undefined;
 }

package/dist/index.js

@@ -167,6 +167,141 @@ var Kbd = Object.assign(KbdBase, { Group: KbdGroup });
 
 // src/components/Dialog/Dialog.tsx
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { createContext, useCallback, useContext } from "react";
+
+// src/components/Dialog/sheetSwipe.ts
+var SHEET_SWIPE = {
+  /** Height in px, from the sheet's top edge, where a drag may start: the handle and the header. */
+  zone: 64,
+  /** Movement in px before a press becomes a drag, so taps stay taps. */
+  slop: 6,
+  /** Fraction of the sheet's height past which a release dismisses. */
+  distance: 0.3,
+  /** Release speed in px/ms: this fast downward dismisses at any distance, this fast upward keeps it open. */
+  velocity: 0.5,
+  /** Only samples this recent (ms) before the release count toward its speed. */
+  window: 100
+};
+function dragIntent(dx, dy, slop = SHEET_SWIPE.slop) {
+  if (Math.abs(dx) < slop && Math.abs(dy) < slop) return "pending";
+  return dy > 0 && dy >= Math.abs(dx) ? "drag" : "cancel";
+}
+function releaseVelocity(samples, window2 = SHEET_SWIPE.window) {
+  const last = samples[samples.length - 1];
+  if (!last) return 0;
+  const first = samples.find((s) => last.t - s.t <= window2) ?? last;
+  const dt = last.t - first.t;
+  return dt > 0 ? (last.y - first.y) / dt : 0;
+}
+function shouldDismissSheet({ offset, height, velocity }) {
+  if (offset <= 0 || height <= 0) return false;
+  if (velocity >= SHEET_SWIPE.velocity) return true;
+  if (velocity <= -SHEET_SWIPE.velocity) return false;
+  return offset >= height * SHEET_SWIPE.distance;
+}
+var IGNORE = 'a,button,input,select,textarea,label,[role="button"],[contenteditable]';
+function attachSheetSwipe(handle) {
+  const popup = handle.parentElement;
+  if (!popup) return () => {
+  };
+  let press = null;
+  let dragging = false;
+  let height = 0;
+  let samples = [];
+  let suppressClick = false;
+  const startsDrag = (e) => {
+    if (!e.isPrimary || e.pointerType === "mouse" && e.button !== 0) return false;
+    if (handle.getClientRects().length === 0) return false;
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target || handle.contains(target)) return true;
+    if (target.closest(IGNORE) || target.closest(".sc-dialog__body")) return false;
+    return e.clientY - popup.getBoundingClientRect().top <= SHEET_SWIPE.zone;
+  };
+  const settle = () => {
+    delete popup.dataset.swiping;
+    popup.style.removeProperty("transform");
+  };
+  const onDown = (e) => {
+    if (press || !startsDrag(e)) return;
+    press = { id: e.pointerId, x: e.clientX, y: e.clientY };
+    samples = [{ t: e.timeStamp, y: e.clientY }];
+  };
+  const onMove = (e) => {
+    if (!press || e.pointerId !== press.id) return;
+    const dy = e.clientY - press.y;
+    if (!dragging) {
+      const intent = dragIntent(e.clientX - press.x, dy);
+      if (intent === "pending") return;
+      if (intent === "cancel") {
+        press = null;
+        return;
+      }
+      dragging = true;
+      height = popup.getBoundingClientRect().height;
+      popup.dataset.swiping = "";
+      popup.setPointerCapture?.(e.pointerId);
+      window.getSelection()?.removeAllRanges();
+    }
+    e.preventDefault();
+    samples.push({ t: e.timeStamp, y: e.clientY });
+    if (samples.length > 32) samples = samples.slice(-16);
+    popup.style.transform = `translateY(${Math.max(0, dy)}px)`;
+  };
+  const end = (e, cancelled) => {
+    if (!press || e.pointerId !== press.id) return;
+    const startY = press.y;
+    const wasDragging = dragging;
+    press = null;
+    dragging = false;
+    if (!wasDragging) return;
+    window.setTimeout(() => {
+      suppressClick = false;
+    }, 0);
+    if (cancelled) {
+      suppressClick = true;
+      settle();
+      return;
+    }
+    samples.push({ t: e.timeStamp, y: e.clientY });
+    const release = {
+      offset: Math.max(0, e.clientY - startY),
+      height,
+      velocity: releaseVelocity(samples)
+    };
+    if (shouldDismissSheet(release)) {
+      delete popup.dataset.swiping;
+      handle.click();
+      suppressClick = true;
+      window.requestAnimationFrame(() => {
+        if (popup.isConnected && popup.hasAttribute("data-open")) settle();
+      });
+    } else {
+      suppressClick = true;
+      settle();
+    }
+  };
+  const onUp = (e) => end(e, false);
+  const onCancel = (e) => end(e, true);
+  const onClick = (e) => {
+    if (!suppressClick) return;
+    suppressClick = false;
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  popup.addEventListener("pointerdown", onDown);
+  popup.addEventListener("pointermove", onMove);
+  popup.addEventListener("pointerup", onUp);
+  popup.addEventListener("pointercancel", onCancel);
+  popup.addEventListener("click", onClick, true);
+  return () => {
+    popup.removeEventListener("pointerdown", onDown);
+    popup.removeEventListener("pointermove", onMove);
+    popup.removeEventListener("pointerup", onUp);
+    popup.removeEventListener("pointercancel", onCancel);
+    popup.removeEventListener("click", onClick, true);
+    settle();
+  };
+}
 
 // src/components/Icon/Icon.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -447,6 +582,7 @@ var REQUESTABLE = /* @__PURE__ */ new Set([
   "outside-press",
   "close-press"
 ]);
+var DismissibleContext = createContext(true);
 function Root({
   dismissible = true,
   onOpenChange,
@@ -473,27 +609,49 @@ function Root({
         }
         onOpenChange?.(next);
       },
-      children
+      children: /* @__PURE__ */ jsx6(DismissibleContext.Provider, { value: dismissible, children })
     }
   );
 }
 var Trigger = BaseDialog.Trigger;
-function Content({ size = "md", variant = "dialog", className, children, ...rest }) {
+function Content({
+  size = "md",
+  variant = "dialog",
+  dismissOnSwipe = true,
+  className,
+  children,
+  ...rest
+}) {
+  const dismissible = useContext(DismissibleContext);
+  const isSheet = variant === "sheet";
+  const swipe = isSheet && dismissOnSwipe && dismissible;
   return /* @__PURE__ */ jsxs5(BaseDialog.Portal, { children: [
     /* @__PURE__ */ jsx6(BaseDialog.Backdrop, { className: "sc-dialog__backdrop" }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsxs5(
       BaseDialog.Popup,
       {
         className: cx("sc-dialog__popup", className),
         "data-size": size,
         "data-variant": variant,
+        "data-swipe-dismiss": swipe ? "" : void 0,
         "aria-modal": "true",
         ...rest,
-        children
+        children: [
+          isSheet && /* @__PURE__ */ jsx6(SheetHandle, { swipe }),
+          children
+        ]
       }
     )
   ] });
 }
+function SheetHandle({ swipe }) {
+  const attach = useCallback(
+    (node) => node ? attachSheetSwipe(node) : void 0,
+    []
+  );
+  if (!swipe) return /* @__PURE__ */ jsx6("div", { className: "sc-dialog__handle", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx6(BaseDialog.Close, { ref: attach, className: "sc-dialog__handle", "aria-label": "Dismiss" });
+}
 function Title({ className, ...rest }) {
   return /* @__PURE__ */ jsx6(BaseDialog.Title, { className: cx("sc-dialog__title", className), ...rest });
 }
@@ -1402,14 +1560,14 @@ function Text({
 // src/components/Table/Table.tsx
 import { Checkbox as BaseCheckbox2 } from "@base-ui/react/checkbox";
 import {
-  createContext,
-  useContext
+  createContext as createContext2,
+  useContext as useContext2
 } from "react";
 import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
-var SelectionContext = createContext(null);
-var RowIdContext = createContext(void 0);
+var SelectionContext = createContext2(null);
+var RowIdContext = createContext2(void 0);
 function useSelection(part) {
-  const selection = useContext(SelectionContext);
+  const selection = useContext2(SelectionContext);
   if (!selection) throw new Error(`${part} needs Table.Root selection={useRowSelection(ids)}`);
   return selection;
 }
@@ -1498,7 +1656,7 @@ function Row({
   onMouseDown,
   ...rest
 }) {
-  const selection = useContext(SelectionContext);
+  const selection = useContext2(SelectionContext);
   const selectable = selection !== null && selectionId !== void 0;
   const isSelected = selected ?? (selectable && selection.isSelected(selectionId));
   const row = /* @__PURE__ */ jsx21(
@@ -1571,7 +1729,7 @@ function SelectionHeader({
 }
 function SelectionCell({ label, className, onClick, onClickCapture, ...rest }) {
   const selection = useSelection("Table.SelectionCell");
-  const id = useContext(RowIdContext);
+  const id = useContext2(RowIdContext);
   if (id === void 0) throw new Error("Table.SelectionCell goes inside a Table.Row with selectionId");
   return /* @__PURE__ */ jsx21(
     "td",
@@ -2255,9 +2413,9 @@ function fileTypeLabel(file) {
 }
 
 // src/utils/useMediaQuery.ts
-import { useCallback, useSyncExternalStore } from "react";
+import { useCallback as useCallback2, useSyncExternalStore } from "react";
 function useMediaQuery(query) {
-  const subscribe = useCallback(
+  const subscribe = useCallback2(
     (onChange) => {
       if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
       };
@@ -3111,6 +3269,7 @@ function Content3({
   align = "center",
   sideOffset,
   arrow = false,
+  anchor,
   className,
   children,
   ...rest
@@ -3121,6 +3280,7 @@ function Content3({
       side,
       align,
       sideOffset: sideOffset ?? (arrow ? 8 : 4),
+      anchor,
       className: "sc-popover__positioner",
       children: /* @__PURE__ */ jsxs27(BasePopover.Popup, { className: cx("sc-popover", className), ...rest, children: [
         arrow ? /* @__PURE__ */ jsx32(BasePopover.Arrow, { className: "sc-popover__arrow" }) : null,
@@ -3190,9 +3350,9 @@ function BroomIcon({ sweeping = false, size = "lg", title, className, ...rest })
 // src/components/FullScreenFlow/FullScreenFlow.tsx
 import {
   Children as Children2,
-  createContext as createContext2,
-  useCallback as useCallback2,
-  useContext as useContext2,
+  createContext as createContext3,
+  useCallback as useCallback3,
+  useContext as useContext3,
   useEffect as useEffect6,
   useId as useId5,
   useMemo as useMemo3,
@@ -3200,9 +3360,9 @@ import {
   useState as useState8
 } from "react";
 import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
-var FlowContext = createContext2({ announce: () => {
+var FlowContext = createContext3({ announce: () => {
 } });
-var FrameContext = createContext2(void 0);
+var FrameContext = createContext3(void 0);
 var ENTER_IGNORES = 'textarea, button, a[href], summary, select, [contenteditable], [role="combobox"], [data-flow-keys="local"]';
 var ARROW_IGNORES = 'input, textarea, select, button, a[href], summary, [contenteditable], [role="radiogroup"], [role="slider"], [role="listbox"], [role="tablist"], [role="menu"], [role="grid"], [role="combobox"], [data-flow-keys="local"]';
 function Root7({
@@ -3217,7 +3377,7 @@ function Root7({
   const popupRef = useRef6(null);
   const [message, setMessage] = useState8("");
   const timer = useRef6(void 0);
-  const announce = useCallback2((next) => {
+  const announce = useCallback3((next) => {
     setMessage("");
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setMessage(next), 30);
@@ -3403,7 +3563,7 @@ function Viewport2({ direction = "forward", className, children, ...rest }) {
   } else if (state.current.element !== element) {
     setState((s) => ({ ...s, current: { ...s.current, element } }));
   }
-  const finishExit = useCallback2((leftKey) => {
+  const finishExit = useCallback3((leftKey) => {
     setState((s) => s.leaving?.key === leftKey ? { ...s, leaving: null } : s);
   }, []);
   const ref = useRef6(null);
@@ -3472,8 +3632,8 @@ function Step({
 }) {
   const id = useId5();
   const titleRef = useRef6(null);
-  const phase = useContext2(FrameContext);
-  const { announce } = useContext2(FlowContext);
+  const phase = useContext3(FrameContext);
+  const { announce } = useContext3(FlowContext);
   const message = announcement ?? (typeof title === "string" ? title : void 0);
   const latest = useRef6({ message, announce });
   useEffect6(() => {