@eifi1/ui-kit 0.51.4 → 0.51.6

package/src/components/date-picker.tsx

@@ -7,13 +7,7 @@ import { splitTriggerAria } from "./trigger-aria";
 import { FIELD_BASE } from "./field-base";
 import { FieldBox, useFieldMessages } from "./field-parts";
 import { Tooltip } from "./tooltip";
-import {
-  DateField,
-  useDatePickerLabels,
-  useTriggerFormat,
-  withEndHint,
-  type DatePickerBaseProps,
-} from "./date-field";
+import { DateField, useDatePickerLabels, useTriggerFormat, withEndHint, type DatePickerBaseProps } from "./date-field";
 import { PanelCalendar } from "./jump-calendar";
 // The shared field, the month-jump calendar and the range picker live in date-field.tsx,
 // jump-calendar.tsx and date-range-picker.tsx (MOD-9); their public names are still this

package/src/components/date-range-picker.tsx

@@ -191,11 +191,7 @@ function PresetColumn({
     <div
       role="group"
       aria-label={label}
-      className={
-        sheet
-          ? "grid grid-cols-2 gap-0.5"
-          : "flex w-32 shrink-0 flex-col gap-0.5 border-e border-subtle pe-2"
-      }
+      className={sheet ? "grid grid-cols-2 gap-0.5" : "flex w-32 shrink-0 flex-col gap-0.5 border-e border-subtle pe-2"}
     >
       {presets.map((p, i) => {
         const selected = i === marked;
@@ -210,9 +206,7 @@ function PresetColumn({
               "rounded px-2 text-start",
               // 44px on a phone: the kit's touch-target size (`SHEET_ROW_CLASS`).
               sheet ? "min-h-11 py-2 text-sm" : "py-1.5 text-xs",
-              selected
-                ? "bg-active font-medium text-primary"
-                : "text-secondary hover:bg-hover",
+              selected ? "bg-active font-medium text-primary" : "text-secondary hover:bg-hover",
             )}
           >
             {p.label}
@@ -419,11 +413,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
   const activeId = controlled ? preset : ownPreset;
   const a = from ? render(from) : "";
   const b = to ? render(to) : "";
-  const triggerText = from
-    ? to
-      ? `${a}${separator}${b}`
-      : `${a}${separator}…`
-    : (placeholder ?? "");
+  const triggerText = from ? (to ? `${a}${separator}${b}` : `${a}${separator}…`) : (placeholder ?? "");
   const hasPresets = Boolean(presets && presets.length > 0);
   const sheet = usePhoneLayout();
   const commitRange = (f: string, t: string, presetId: string | undefined) => {

package/src/components/description-list.tsx

@@ -159,9 +159,7 @@ export function DescriptionList({
   // outer `min(100%, …)` keeps a single card from overflowing a pane narrower than
   // its minimum.
   const track =
-    columns !== undefined
-      ? `max(${minCardWidth}, (100% - ${columns - 1} * ${gap.len}) / ${columns})`
-      : minCardWidth;
+    columns !== undefined ? `max(${minCardWidth}, (100% - ${columns - 1} * ${gap.len}) / ${columns})` : minCardWidth;
   const grid: CSSProperties | undefined = cards
     ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${track}), 1fr))` }
     : undefined;
@@ -293,9 +291,7 @@ export function DescriptionItem({
   // A hint is a fact: on a touch screen and at Large it is words under the term, not a
   // 14 px "?" nobody can hover open — the fields' rule (DUP-2, refactor audit 2026-10),
   // which this string hint had been left out of. Elsewhere the "?" as before.
-  const shownHint = useInlineHint(
-    hint ? <FieldHint label={hint} side="top" className="shrink-0" /> : undefined,
-  );
+  const shownHint = useInlineHint(hint ? <FieldHint label={hint} side="top" className="shrink-0" /> : undefined);
   const spanClass =
     span === "full"
       ? "col-span-full"
@@ -317,7 +313,10 @@ export function DescriptionItem({
       {typeof shownHint === "string" ? (
         // Its own line under the term, in the reading case of a sentence rather than a
         // card term's capitals — StatTile's inline hint.
-        <span data-slot="description-hint" className="basis-full text-caption leading-tight normal-case tracking-normal">
+        <span
+          data-slot="description-hint"
+          className="basis-full text-caption leading-tight normal-case tracking-normal"
+        >
           {shownHint}
         </span>
       ) : (
@@ -350,12 +349,7 @@ export function DescriptionItem({
     return (
       <div
         {...rest}
-        className={cn(
-          "min-w-0 rounded-md border border-subtle bg-surface",
-          CARD_PAD[density],
-          spanClass,
-          className,
-        )}
+        className={cn("min-w-0 rounded-md border border-subtle bg-surface", CARD_PAD[density], spanClass, className)}
       >
         {termNode}
         {detail}

package/src/components/dialog-frame.tsx

@@ -152,7 +152,9 @@ export function DialogFrame({
       labelledBy={titleId}
       // The caller's own description (a warning inside the body, say) is ADDED to the
       // frame's, not traded for it: both are the dialog's.
-      aria-describedby={[hasDescription ? descriptionId : undefined, describedBy].filter(Boolean).join(" ") || undefined}
+      aria-describedby={
+        [hasDescription ? descriptionId : undefined, describedBy].filter(Boolean).join(" ") || undefined
+      }
       // `overflow-hidden` replaces the panel's own `overflow-y-auto` (tailwind-merge
       // treats them as one group), `p-0` its `p-4`: the scroller and the padding move
       // to the body, which is the only part that should move.
@@ -210,13 +212,20 @@ export function DialogFrame({
  *  only exists INSIDE the `Modal` (the frame's own body runs outside it). */
 function FrameClose({ label, onClose }: { label?: string; onClose: () => void }) {
   const close = useContext(ModalCloseContext) ?? onClose;
-  const labels = useKitLabels("dialogFrame", DEFAULT_DIALOG_FRAME_LABELS, label === undefined ? undefined : { close: label });
+  const labels = useKitLabels(
+    "dialogFrame",
+    DEFAULT_DIALOG_FRAME_LABELS,
+    label === undefined ? undefined : { close: label },
+  );
   return (
     <button
       type="button"
       onClick={close}
       aria-label={labels.close}
-      className={cn("-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary", FOCUS_RING)}
+      className={cn(
+        "-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary",
+        FOCUS_RING,
+      )}
     >
       <X aria-hidden className="size-5" />
     </button>

package/src/components/disclosure.tsx

@@ -386,9 +386,7 @@ export function Disclosure({
         ) : (
           <span className={cn("block", card && "text-sm font-semibold text-primary")}>{title}</span>
         )}
-        {hint !== undefined && (
-          <span className="mt-0.5 block text-xs font-normal text-muted">{hint}</span>
-        )}
+        {hint !== undefined && <span className="mt-0.5 block text-xs font-normal text-muted">{hint}</span>}
       </span>
       {/* The space is for the accessible name — "Net profit 1,234.50", not
           "Net profit1,234.50"; between flex items it renders as nothing. */}
@@ -404,22 +402,20 @@ export function Disclosure({
 
   // Preflight already makes h1–h6 inherit size and weight, so the heading adds
   // structure and nothing visible.
-  const header = Heading ? <Heading className={trailingBeside ? "min-w-0 flex-1" : undefined}>{button}</Heading> : button;
+  const header = Heading ? (
+    <Heading className={trailingBeside ? "min-w-0 flex-1" : undefined}>{button}</Heading>
+  ) : (
+    button
+  );
 
   return (
-    <div
-      {...rest}
-      className={cn(card && "rounded-lg border border-subtle bg-surface shadow-sm", className)}
-    >
+    <div {...rest} className={cn(card && "rounded-lg border border-subtle bg-surface shadow-sm", className)}>
       {trailingBeside ? (
         <div
           className={cn(
             "relative flex items-center gap-2",
             card &&
-              cn(
-                "rounded-lg pe-4 has-[[data-disclosure-trigger]:enabled:hover]:bg-hover",
-                joined && "rounded-b-none",
-              ),
+              cn("rounded-lg pe-4 has-[[data-disclosure-trigger]:enabled:hover]:bg-hover", joined && "rounded-b-none"),
           )}
         >
           {header}

package/src/components/dropdown.tsx

@@ -163,8 +163,7 @@ export function useDropdown<T extends HTMLElement = HTMLDivElement>({
  * input each time the panel opens, so typing filters immediately.
  */
 export function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {
-  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } =
-    useDropdown<T>();
+  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } = useDropdown<T>();
   const [query, setQuery] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
   // The list's layer again, under `inputRef` for the search box's handler (round 0.35
@@ -196,8 +195,7 @@ export function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {
 /** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled
  *  where the focus is (see the note above), so the div's own handler signature is
  *  omitted in favour of it. */
-export interface DropdownSearchHeaderProps
-  extends Omit<ComponentPropsWithRef<"div">, "onKeyDown"> {
+export interface DropdownSearchHeaderProps extends Omit<ComponentPropsWithRef<"div">, "onKeyDown"> {
   query: string;
   onQueryChange: (v: string) => void;
   inputRef: RefObject<HTMLInputElement | null>;
@@ -251,13 +249,7 @@ export function DropdownSearchHeader({
     // input whose only name is its placeholder has none the moment a character is
     // typed into it — the placeholder disappears — which is why this is worth a prop
     // at all rather than something a caller could add from outside.
-    <div
-      {...rest}
-      className={cn(
-        "flex items-center gap-2 border-b border-subtle px-2 py-1.5",
-        className,
-      )}
-    >
+    <div {...rest} className={cn("flex items-center gap-2 border-b border-subtle px-2 py-1.5", className)}>
       <Search className="size-4 text-placeholder" />
       <input
         ref={inputRef}

package/src/components/empty-state.tsx

@@ -130,9 +130,7 @@ export function EmptyState({
       {/* `text-sm`: a heading keeps the box's size, not whatever a stylesheet gives h2. */}
       <Title className={cn("text-sm font-medium text-secondary", toneClass)}>{title}</Title>
       {hasHint && <div className="mt-1 text-xs">{hint}</div>}
-      {action != null && (
-        <div className="mt-4 flex flex-wrap items-center justify-center gap-2">{action}</div>
-      )}
+      {action != null && <div className="mt-4 flex flex-wrap items-center justify-center gap-2">{action}</div>}
     </div>
   );
 }

package/src/components/entity-combobox.tsx

@@ -34,8 +34,7 @@ export type { ComboClearValue, ComboOption } from "./combobox-core";
 /** `onChange` is the kit's — "a selection was made", carrying values — rather
  *  than the div's form event, so the DOM's spelling of it is omitted. */
 export interface EntityComboboxProps<V extends string | number, C extends ComboClearValue = null>
-  extends Omit<ComponentPropsWithoutRef<"div">, "onChange">,
-    FieldHelpProps {
+  extends Omit<ComponentPropsWithoutRef<"div">, "onChange">, FieldHelpProps {
   /** Selected id; `null`, `undefined` or `clearValue` when nothing is selected. */
   value: V | C | null | undefined;
   /** Selecting an option emits its value; the clear button emits `clearValue`. */
@@ -311,10 +310,7 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
             // A caller's own name wins over the composition: two fields labelled
             // "Account" on a transfer form are the from and the to, and only the
             // caller knows which is which.
-            aria-label={
-              ariaLabel ??
-              (typeof label === "string" ? common.fieldValue(label, triggerText) : undefined)
-            }
+            aria-label={ariaLabel ?? (typeof label === "string" ? common.fieldValue(label, triggerText) : undefined)}
             // The focusable kind of disabled while locked (Button's rule): a native
             // `disabled` would take the field out of the tab order, and the reason with it.
             disabled={lock.locked ? undefined : disabled}

package/src/components/error-boundary.tsx

@@ -107,9 +107,7 @@ export function describeThrown(error: unknown): ErrorBoundaryDetails {
  * Never throws: it runs inside the fallback's own render, where a throw is a white
  * screen. An error it cannot read is not a chunk failure.
  */
-export function isChunkLoadError(
-  error: { name?: string | null; message?: string | null } | null | undefined,
-): boolean {
+export function isChunkLoadError(error: { name?: string | null; message?: string | null } | null | undefined): boolean {
   try {
     const s = `${error?.name ?? ""} ${error?.message ?? ""}`;
     return /ChunkLoadError|dynamically imported module|module script failed|Loading chunk|Failed to fetch/i.test(s);
@@ -405,7 +403,11 @@ function currentPage(): { page: string; path: string } {
   }
 }
 
-function buildReport(details: ErrorBoundaryDetails, componentStack: string | undefined, props: ErrorBoundaryProps): CrashReport {
+function buildReport(
+  details: ErrorBoundaryDetails,
+  componentStack: string | undefined,
+  props: ErrorBoundaryProps,
+): CrashReport {
   const { page, path } = currentPage();
   const extras: Record<string, string> = {};
   try {
@@ -638,9 +640,7 @@ function ErrorFallback({
             </p>
           )}
           {filing === "filed" && (
-            <p className="-mt-1 mb-1 basis-full text-xs">
-              {reference ? text.reportedAs(reference) : text.reported}
-            </p>
+            <p className="-mt-1 mb-1 basis-full text-xs">{reference ? text.reportedAs(reference) : text.reported}</p>
           )}
           {mode === "error" ? [retryButton, reloadButton] : [reloadButton, retryButton]}
           {copyReport && reportText !== null && filing !== "filed" && (

package/src/components/field-base.tsx

@@ -78,8 +78,7 @@ export const FIELD_BASE =
  *  reason other than "you may not edit this". Attribute-scoped for the same reason
  *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge
  *  cannot make the later one win. */
-export const FIELD_WRITABLE_LOOK =
-  "[&[readonly]]:bg-surface [&[readonly]]:text-primary";
+export const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-surface [&[readonly]]:text-primary";
 
 // Extra top padding leaves room for a label that floats INSIDE the field (the
 // "filled" pattern) — the label sits in the top strip, the value below it. Used by
@@ -190,10 +189,7 @@ export function FieldChevron({ className, ...rest }: FieldChevronProps) {
       // a name, and an `aria-hidden` a caller could switch off by accident is a second
       // announcement of the same field.
       aria-hidden
-      className={cn(
-        "pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder",
-        className,
-      )}
+      className={cn("pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder", className)}
     />
   );
 }
@@ -256,8 +252,7 @@ export function SelectWidthFloor({ values, size = "md" }: { values: readonly str
 // At Large it is a static label ABOVE the field instead (0.33, §10.17): in flow, so it
 // wraps; always in its floated look, since there is no strip to float into and no
 // placeholder to stand in for; no transition, since it never moves.
-const LABEL_FLOATED_AT_LARGE =
-  "large:text-caption large:leading-tight large:text-secondary large:transition-none";
+const LABEL_FLOATED_AT_LARGE = "large:text-caption large:leading-tight large:text-secondary large:transition-none";
 
 export const FLOATING_LABEL_CLASS = cn(
   "pointer-events-none absolute start-3 top-2.5 text-sm text-placeholder transition-all",
@@ -294,7 +289,10 @@ const FLOATING_ROW_CLASS = cn(
 
 /** The static label's row with its "?" at the field's end, in the top strip — and at
  *  Large above the field (LABEL_ABOVE_AT_LARGE). */
-const STATIC_ROW_CLASS = cn("pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1", LABEL_ABOVE_AT_LARGE);
+const STATIC_ROW_CLASS = cn(
+  "pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1",
+  LABEL_ABOVE_AT_LARGE,
+);
 
 /**
  * The one place that assembles a labelled field: a `relative` wrapper around the
@@ -602,11 +600,7 @@ export function CharacterCount({
         aria-hidden
         className={cn(
           "shrink-0 text-caption leading-tight tabular-nums",
-          zone === "limit"
-            ? "text-danger"
-            : zone === "near"
-              ? "text-warning"
-              : "text-muted",
+          zone === "limit" ? "text-danger" : zone === "near" ? "text-warning" : "text-muted",
         )}
       >
         {used}/{max}

package/src/components/field-parts.tsx

@@ -55,8 +55,7 @@ export { assignRef, mergeRefs } from "../lib/refs";
 // laid out by one flex row instead of by two absolute offsets guessing at the
 // same baseline — which is what put dev#468's "?" three pixels above the word it
 // belongs to.
-export const STATIC_LABEL_TYPE =
-  "text-caption leading-tight text-muted peer-disabled:opacity-50";
+export const STATIC_LABEL_TYPE = "text-caption leading-tight text-muted peer-disabled:opacity-50";
 
 /**
  * A field's label at Large and Extra large (0.33, docs/text-size-harmonization.md
@@ -150,13 +149,7 @@ export interface FieldHintProps extends Omit<ComponentPropsWithRef<"button">, "c
   side?: TooltipSide;
 }
 
-export function FieldHint({
-  label,
-  side = "start",
-  className,
-  "aria-label": ariaLabel,
-  ...rest
-}: FieldHintProps) {
+export function FieldHint({ label, side = "start", className, "aria-label": ariaLabel, ...rest }: FieldHintProps) {
   return (
     // `tap="toggle"` (0.25): the "?" exists only to explain, so a tap on a phone shows
     // the bubble and the next tap hides it — the touch rule (no bubble left behind by a
@@ -281,7 +274,6 @@ export interface FieldHelpSource {
   name?: ReactNode;
 }
 
-
 /**
  * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or
  * something for the label line (a {@link FieldHint} "?", or any other node).
@@ -434,7 +426,10 @@ export function StaticLabelRow({ hint, children }: { hint: ReactNode; children:
   return (
     <div
       data-field-label=""
-      className={cn("pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1", LABEL_ABOVE_AT_LARGE)}
+      className={cn(
+        "pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1",
+        LABEL_ABOVE_AT_LARGE,
+      )}
     >
       {children}
       <span className="pointer-events-auto flex shrink-0 items-center">{hint}</span>
@@ -606,8 +601,7 @@ export function useDisabledReasonLine(display: DisabledReasonDisplay = "auto"):
 /** The reason line's type: a field caption's ({@link FIELD_CAPTION_CLASS}), so a locked
  *  control's "why" reads like a field's standing advice. Capped, so a long reason under
  *  a small control wraps rather than widening its row without end. */
-export const DISABLED_REASON_LINE_CLASS =
-  "mt-1 block max-w-[20rem] text-caption leading-tight text-muted";
+export const DISABLED_REASON_LINE_CLASS = "mt-1 block max-w-[20rem] text-caption leading-tight text-muted";
 
 /**
  * A control and its `disabledReason` as a line under it — the `"line"` form of
@@ -713,15 +707,7 @@ export function useFieldMessages({
  * once `error` is passed the box is kept even with no message, so the trigger is never
  * reparented — and remounted, losing focus — as the message comes and goes.
  */
-export function FieldBox({
-  below,
-  reserve,
-  children,
-}: {
-  below: ReactNode;
-  reserve: boolean;
-  children: ReactNode;
-}) {
+export function FieldBox({ below, reserve, children }: { below: ReactNode; reserve: boolean; children: ReactNode }) {
   if (below === null && !reserve) return <>{children}</>;
   return (
     <div>
@@ -746,7 +732,10 @@ export function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: React
     // over the row (and take the "?"'s hover) otherwise. Above the field at Large.
     <div
       data-field-label=""
-      className={cn("pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1", LABEL_ABOVE_AT_LARGE)}
+      className={cn(
+        "pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1",
+        LABEL_ABOVE_AT_LARGE,
+      )}
     >
       <FieldLabel className={cn(LABEL_IN_ROW, "max-w-full")}>{label}</FieldLabel>
       <span className="pointer-events-auto flex shrink-0 items-center">{hint}</span>

package/src/components/field-sync.tsx

@@ -282,8 +282,7 @@ export function FieldSyncIndicator({
   const large = useLargeText();
   showLabel = showLabel || large;
   const { color, Icon } = STATE_STYLE[state];
-  const text =
-    state === "error" ? (error?.message?.trim() ? error.message : l.error) : l[state];
+  const text = state === "error" ? (error?.message?.trim() ? error.message : l.error) : l[state];
 
   return (
     <span
@@ -443,11 +442,12 @@ export function FieldSyncRow<T>({
     >
       {children}
       <span className="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3">
-        {state === "edited" && (
-          <PencilLine aria-hidden className="size-4 text-[var(--status-edited)]" />
-        )}
+        {state === "edited" && <PencilLine aria-hidden className="size-4 text-[var(--status-edited)]" />}
         {state === "pending" && (
-          <Loader2 aria-hidden className="size-4 animate-spin text-[var(--status-pending)] motion-reduce:animate-none" />
+          <Loader2
+            aria-hidden
+            className="size-4 animate-spin text-[var(--status-pending)] motion-reduce:animate-none"
+          />
         )}
         {state === "synced" && (
           <Check
@@ -474,11 +474,7 @@ export function FieldSyncRow<T>({
           </Tooltip>
         )}
       </span>
-      <span
-        role={isError ? "alert" : "status"}
-        aria-live={isError ? "assertive" : "polite"}
-        className="sr-only"
-      >
+      <span role={isError ? "alert" : "status"} aria-live={isError ? "assertive" : "polite"} className="sr-only">
         {shown === null ? "" : text}
       </span>
     </div>

package/src/components/file-button.tsx

@@ -64,7 +64,8 @@ export type {
 type ButtonOwnProps = ComponentPropsWithoutRef<typeof Button>;
 
 export interface FileButtonProps
-  extends Omit<UseFilePickerOptions, "disabled">,
+  extends
+    Omit<UseFilePickerOptions, "disabled">,
     // `onDrop` & co. stay the caller's own when `droppable` is off; `type` is fixed to
     // "button" (see 2. above) — a file trigger never submits a form.
     Omit<ButtonOwnProps, "type" | "children" | "accept" | "capture" | "multiple"> {
@@ -106,7 +107,6 @@ export interface FileButtonProps
   ref?: Ref<HTMLButtonElement>;
 }
 
-
 /**
  * {@link useFilePicker} behind a {@link Button}: `variant` and every other button prop
  * pass through, and the ref is the `<button>` (so `ref.current.click()` opens the
@@ -177,7 +177,11 @@ export function FileButton({
     disabled: refusing,
   });
   const pickedText =
-    picked.length === 0 ? "" : picked.length === 1 ? picked[0].name : pickerLabels.selected(picked.length, picked[0].name);
+    picked.length === 0
+      ? ""
+      : picked.length === 1
+        ? picked[0].name
+        : pickerLabels.selected(picked.length, picked[0].name);
   const [dragOver, setDragOver] = useState(false);
 
   const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer?.types ?? []).includes("Files");

package/src/components/file-dropzone.tsx

@@ -235,8 +235,7 @@ export function FileDropzone({
   // page is not announced by itself.
   const status = useAnnounce();
   const alert = useAnnounce({ politeness: "assertive" });
-  const feedback: FileDropzoneRejectionFeedback =
-    rejectionFeedback ?? (onInvalid || onReject ? "none" : "toast");
+  const feedback: FileDropzoneRejectionFeedback = rejectionFeedback ?? (onInvalid || onReject ? "none" : "toast");
   const dropLabel = dropLabelProp ?? labels.dropzone;
   const browseLabel = browseLabelProp ?? labels.browse;
   const emptyLabel = emptyLabelProp ?? (multiple ? labels.emptyMultiple : labels.empty);
@@ -272,9 +271,7 @@ export function FileDropzone({
     if (!stands || rejected.length > 0) {
       for (const r of rejected) onInvalid?.(r.file);
       if (rejected.length > 0) onReject?.(rejected);
-      const message = stands
-        ? summariseRejections(rejected, labels)
-        : labels.rejectedPick(picked.length);
+      const message = stands ? summariseRejections(rejected, labels) : labels.rejectedPick(picked.length);
       if (feedback === "toast") {
         // The kit's `toast`, which loads sonner (an optional peer) lazily, so an app
         // that never trips this never has to install it. Nothing downstream depends
@@ -378,10 +375,10 @@ export function FileDropzone({
               : locked
                 ? "cursor-not-allowed border-subtle"
                 : dragOver
-                ? "cursor-pointer border-strong bg-active"
-                : showError
-                  ? "cursor-pointer border-danger-strong"
-                  : "cursor-pointer border-subtle hover:border-strong",
+                  ? "cursor-pointer border-strong bg-active"
+                  : showError
+                    ? "cursor-pointer border-danger-strong"
+                    : "cursor-pointer border-subtle hover:border-strong",
           className,
         )}
       >
@@ -468,9 +465,7 @@ export function FileDropzone({
                 {locked && !(file && !multiple) ? (
                   reasonLine
                 ) : (
-                  <div className="text-xs text-muted">
-                    {file && !multiple ? fileText.size(file.size) : hint}
-                  </div>
+                  <div className="text-xs text-muted">{file && !multiple ? fileText.size(file.size) : hint}</div>
                 )}
                 {locked && file && !multiple && reasonLine}
               </>