@eifi1/ui-kit 0.54.0 → 0.55.0

package/src/components/checkbox-group.tsx

@@ -1,247 +0,0 @@
-import { useId } from "react";
-import type { ReactNode } from "react";
-import { cn } from "../lib/cn";
-import { Checkbox } from "./checkbox";
-import { hasContent } from "../lib/presence";
-import { useCommitReason, type CommitScope } from "./write-lock";
-import {
-  FIELD_ERROR_CLASS,
-  fieldHelpMark,
-  mergeDescribedBy,
-  RequiredStarOnLegend,
-  useInlineHint,
-  type FieldHelpProps,
-} from "./field-parts";
-
-/** One box of a {@link CheckboxGroup}. */
-export interface CheckboxGroupOption<T extends string = string> {
-  value: T;
-  /** The words beside the box — its accessible name. */
-  label: ReactNode;
-  /** A line under the label ("Imprint, Privacy Policy and Terms only"), attached to the
-   *  box with `aria-describedby` — {@link Checkbox}'s `description`. */
-  hint?: ReactNode;
-  /** This box cannot be changed; the others can. */
-  disabled?: boolean;
-}
-
-/** Whether the legend is drawn. `"sr-only"` keeps it as the group's name for a screen
- *  reader where the dialog's title already says it to the eye. */
-export type CheckboxGroupLegendVisibility = "visible" | "sr-only";
-
-export interface CheckboxGroupProps<T extends string = string> extends FieldHelpProps {
-  /** The question the boxes answer — the fieldset's `<legend>`, which names the group.
-   *  Without one, pass `aria-label`. */
-  legend?: ReactNode;
-  /** Default `"visible"`. */
-  legendVisibility?: CheckboxGroupLegendVisibility;
-  "aria-label"?: string;
-  /** One box per option, in this order. */
-  options: CheckboxGroupOption<T>[];
-  /** The ticked values. Controlled. */
-  value: T[];
-  /**
-   * The new set on every tick. In the ORDER OF `options`, not the order the boxes were
-   * ticked, so a list saved from it does not change with the order someone clicked in
-   * (ChoiceCardGroup's rule). A value in `value` that no option carries — a grant for a
-   * locale the app no longer offers — is kept, after the known ones: a picker that
-   * dropped what it could not show would delete it on the next unrelated tick.
-   */
-  onChange: (value: T[]) => void;
-  /**
-   * `"vertical"` (default): one box per line. `"horizontal"`: a wrapping row, for a few
-   * short labels. With `columns`, vertical becomes a grid of that many columns from the
-   * `sm` breakpoint up and stays one column on a phone — the reviewer dialog's shape.
-   */
-  layout?: "vertical" | "horizontal";
-  /** Columns for a vertical group, from `sm` up (one on a phone). Default 1. */
-  columns?: 1 | 2 | 3 | 4;
-  /** Shared by every box — what a plain form submits the values under. */
-  name?: string;
-  /** Every box: the fieldset's own `disabled` (which disables them all natively), each
-   *  box faded as a disabled Checkbox is, and the legend with them. */
-  disabled?: boolean;
-  /**
-   * At least one box must be ticked. Draws the required star after the legend, and puts
-   * the native `required` on every box while NONE is ticked — so a form refuses an
-   * empty set — and on none once one is (ChoiceCardGroup's rule: checkboxes cannot say
-   * "at least one" natively).
-   */
-  required?: boolean;
-  /**
-   * Standing advice for the group, under the boxes, attached to the fieldset with
-   * `aria-describedby` before the error — the field anatomy every kit field keeps.
-   * A `help` beside it (0.36) is a "?" after the legend — with a visible legend only —
-   * and names nothing: the fieldset is then named by the legend's words alone.
-   */
-  hint?: ReactNode;
-  /** What is wrong with the set, in the caller's words. Under the boxes, on the
-   *  fieldset's `aria-describedby`, and paints every box invalid. */
-  error?: ReactNode;
-  /** Paints every box invalid without a message (the message lives elsewhere). */
-  invalid?: boolean;
-  /**
-   * The group SAVES on change — each tick is written straight away (a reviewer's
-   * per-locale grants). Under a locked {@link WriteLockProvider} every box is locked
-   * the focusable way with the lock's reason. See {@link Checkbox}'s `commit`.
-   */
-  commit?: CommitScope;
-  /** Why no box can be changed — every box gets it, and it wins over `disabled` (the
-   *  boxes stay focusable to say it). See {@link Checkbox}'s `disabledReason`. */
-  disabledReason?: ReactNode;
-  /** The fieldset's id. */
-  id?: string;
-  /** Classes for the fieldset — the outermost element, where layout belongs. */
-  className?: string;
-  /** Classes for the box list (the grid or the row). */
-  listClassName?: string;
-  /** Ids of something else on the page that describes the group; merged before the
-   *  group's own hint and error. */
-  "aria-describedby"?: string;
-}
-
-// Literal class strings so Tailwind's scanner sees each one.
-const COLUMNS: Record<NonNullable<CheckboxGroupProps["columns"]>, string> = {
-  1: "flex flex-col gap-2",
-  2: "grid grid-cols-1 gap-2 sm:grid-cols-2",
-  3: "grid grid-cols-1 gap-2 sm:grid-cols-3",
-  4: "grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4",
-};
-
-/**
- * A set of kit {@link Checkbox}es answering one question, in a `<fieldset>`.
- *
- * Kurvenschmiede's reviewer dialog (features/admin/reviewer-dialog.tsx) builds this by
- * hand — a fieldset, an `sr-only` legend, a grid of checkboxes, a `toggle(code, on)`
- * that adds or filters a `string[]` — and keksdose's and kastlan's reviewer grants build
- * the same picker for the same per-locale grant. The hand-built ones differ in the parts
- * that are easy to get wrong: whether the legend names the group, whether a hint or an
- * error is attached to anything, what order the saved list comes out in, and whether a
- * value the picker cannot show survives a tick.
- *
- * Every box is a kit {@link Checkbox}, so the native checkbox semantics stay (each box
- * submits under `name` in a plain form). The legend is the group's name; the hint and
- * error describe the fieldset. For a choice of ONE, use radios ({@link ChoiceCardGroup},
- * {@link ToggleGroup}).
- */
-export function CheckboxGroup<T extends string = string>({
-  legend,
-  legendVisibility = "visible",
-  "aria-label": ariaLabel,
-  options,
-  value,
-  onChange,
-  layout = "vertical",
-  columns = 1,
-  name,
-  disabled,
-  required,
-  hint,
-  help,
-  error,
-  invalid,
-  commit,
-  disabledReason,
-  id,
-  className,
-  listClassName,
-  "aria-describedby": ariaDescribedBy,
-}: CheckboxGroupProps<T>) {
-  const generated = useId();
-  const hintId = `${generated}-hint`;
-  const errorId = `${generated}-error`;
-  // §4: a FieldHint under the group is its words at Large and on a touch screen, not a
-  // lone "?" (DUP-2, refactor audit 2026-10). A HelpPopover stays a "?".
-  // A `help` "?" after a VISIBLE legend (0.36): the label line a group has. Its FieldHint
-  // hint is then its words at every size, as everywhere a help stands beside one.
-  const helpMark = fieldHelpMark(legend !== undefined && legendVisibility === "visible" ? help : undefined, legend);
-  const legendTextId = `${generated}-legend`;
-  const shownHint = useInlineHint(hint, helpMark !== undefined);
-  const showHint = hasContent(shownHint);
-  const showError = hasContent(error);
-  const isInvalid = Boolean(invalid) || showError;
-  const ticked = new Set(value);
-  // Resolved here rather than per box: a reason has to keep the fieldset from being
-  // natively `disabled` too, or it would take every box out of the tab order — the
-  // thing a reason exists to prevent.
-  const reason = useCommitReason(commit, disabledReason);
-  const locked = hasContent(reason);
-
-  const toggle = (v: T, on: boolean) => {
-    const next = new Set(value);
-    if (on) next.add(v);
-    else next.delete(v);
-    const known = new Set(options.map((o) => o.value));
-    onChange([
-      ...options.map((o) => o.value).filter((x) => next.has(x)),
-      // Values no option carries, kept in their own order — see `onChange`.
-      ...value.filter((x) => !known.has(x)),
-    ]);
-  };
-
-  return (
-    <fieldset
-      id={id}
-      aria-label={ariaLabel}
-      // With a help "?" inside the legend, the legend's WORDS name the group: a legend
-      // names its fieldset by its whole content, the "?"'s "About …" included.
-      aria-labelledby={helpMark !== undefined && ariaLabel === undefined ? legendTextId : undefined}
-      aria-describedby={mergeDescribedBy(ariaDescribedBy, showHint && hintId, showError && errorId)}
-      disabled={disabled && !locked}
-      // `relative` holds an `sr-only` legend (sr-only-containment.test); `min-w-0`
-      // undoes a fieldset's `min-width: min-content`, which would otherwise push a long
-      // label past a phone's edge instead of wrapping it.
-      className={cn("relative m-0 min-w-0 border-0 p-0", className)}
-    >
-      {legend !== undefined && (
-        <legend
-          className={
-            legendVisibility === "sr-only"
-              ? "sr-only"
-              : cn("mb-2 p-0 text-sm font-medium text-primary", (disabled || locked) && "opacity-60")
-          }
-        >
-          {helpMark === undefined ? legend : <span id={legendTextId}>{legend}</span>}
-          {required && (
-            <span aria-hidden className="ms-0.5 text-danger">
-              *
-            </span>
-          )}
-          {helpMark !== undefined && <span className="ms-1 inline-flex align-middle font-normal">{helpMark}</span>}
-        </legend>
-      )}
-      <RequiredStarOnLegend.Provider value={true}>
-        <div
-          className={cn(layout === "horizontal" ? "flex flex-wrap gap-x-4 gap-y-2" : COLUMNS[columns], listClassName)}
-        >
-          {options.map((o) => (
-            <Checkbox
-              key={o.value}
-              name={name}
-              value={o.value}
-              label={o.label}
-              description={o.hint}
-              checked={ticked.has(o.value)}
-              onCheckedChange={(on) => toggle(o.value, on)}
-              disabled={disabled || o.disabled}
-              invalid={isInvalid || undefined}
-              required={required && value.length === 0 ? true : undefined}
-              disabledReason={reason}
-            />
-          ))}
-        </div>
-      </RequiredStarOnLegend.Provider>
-      {showHint && (
-        // A `div`, not a `p`: a hint may be a node with a link in it.
-        <div id={hintId} className="mt-1.5 text-caption leading-tight text-muted">
-          {shownHint}
-        </div>
-      )}
-      {showError && (
-        <p id={errorId} className={FIELD_ERROR_CLASS}>
-          {error}
-        </p>
-      )}
-    </fieldset>
-  );
-}

package/src/components/checkbox.tsx

@@ -1,346 +0,0 @@
-import { useCallback, useContext, useEffect, useId, useRef } from "react";
-import { Check, Minus } from "lucide-react";
-import type { ChangeEvent, InputHTMLAttributes, ReactNode, Ref } from "react";
-import { cn } from "../lib/cn";
-import { hasContent } from "../lib/presence";
-import {
-  assignRef,
-  DISABLED_REASON_LINE_CLASS,
-  FIELD_ERROR_CLASS,
-  LockedReason,
-  mergeDescribedBy,
-  RequiredStarOnLegend,
-  useDisabledReasonLine,
-  useLockReason,
-  type DisabledReasonDisplay,
-} from "./field-parts";
-import { FOCUS_RING } from "./focus-ring";
-import type { CommitScope } from "./write-lock";
-
-/**
- * A checkbox that is still `<input type="checkbox">`.
- *
- * The three consuming apps had three answers: ~30 raw inputs in Keksdose leaning on
- * `tokens.css`'s `accent-color`, a label-plus-box `CheckboxField` in Lenkbank, and a
- * Radix `<button role="checkbox">` in Kastlan. The native element is the one that
- * needs no ARIA to be a checkbox — it submits with its form, answers to `required`,
- * resets with the form and takes a `<label for>` click — so it stays underneath, and
- * only its paint is replaced (`appearance-none`, a token-coloured box, and a glyph
- * laid over it that ignores the pointer so the click still lands on the input).
- *
- * `accent-color` alone was not enough: it tints the native box but cannot change its
- * border, so an INVALID checkbox had no way to say so, and the unchecked box kept the
- * browser's own grey outline in both themes.
- */
-
-// The box. 1rem (16px at Normal), like every raw checkbox it replaces, so a migration
-// moves nothing; its corner `rounded` (0.25rem) rather than a fixed 4px, so it keeps its
-// shape as it grows with the text (0.32, §3.2).
-//
-// The kit's focus frame (§5), with an offset in the surface colour: a --brand ring
-// touching a --brand-filled (checked) box would be a ring painted in the colour it sits
-// on — present in the DOM and invisible on screen. The offset is what separates the two.
-const BOX =
-  "peer size-4 shrink-0 cursor-pointer appearance-none rounded border border-strong bg-surface shadow-sm transition-colors " +
-  "checked:border-brand checked:bg-brand " +
-  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-surface ` +
-  "disabled:cursor-not-allowed";
-
-/**
- * The 48 px touch target at Large (0.32, §4) for a LABELLED box: the label's own hit
- * area, an invisible `::after` that is part of the `<label>` — so a tap on it ticks the
- * box through `for` — reaching back over the box and its gap (`-start-6`: 1rem + 0.5rem)
- * and out to 48 px tall on a one-line label. It changes no layout; a label already taller
- * than 48 px keeps its own box (`max(0px, …)`). A bare box has no label to grow, and
- * takes its target from where it stands (a table row's tap, the caller's own label).
- */
-const LABEL_TOUCH_LARGE =
-  "large:relative large:after:absolute large:after:-start-6 large:after:end-0 " +
-  "large:after:-inset-y-[max(0px,calc((48px-100%)/2))] large:after:content-['']";
-
-// A mixed box wears the checked fill whether or not the underlying input is checked:
-// `indeterminate` is a property the browser keeps separately from `checked`, and the
-// dash means "some", which is neither answer.
-const BOX_MIXED = "border-brand bg-brand";
-
-// The same geometry as FIELD_INVALID — a border plus a 1px ring, so the highlight
-// survives fractional display scaling on every edge (see the note on FIELD_BASE in field-base.tsx). The
-// focus ring turns danger too, so focusing a wrong box does not repaint it as fine.
-const BOX_INVALID =
-  "border-danger-strong ring-1 ring-danger-strong checked:border-danger-strong focus-visible:ring-[var(--danger)]";
-
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
-  /**
-   * The words beside the box. Rendered as a `<label for>` rather than a label that
-   * wraps the input, so `description` and `error` can sit under it without becoming
-   * part of the accessible NAME — a wrapping label would have the screen reader read
-   * the whole paragraph as the checkbox's name.
-   */
-  label?: ReactNode;
-  /** Secondary text under the label ("Used when no account is chosen"). Pointed at by
-   *  `aria-describedby`, merged with any the caller passed. Kastlan's
-   *  `CheckboxField` `description` variant. */
-  description?: ReactNode;
-  /**
-   * "Some but not all" — the header box of a list whose rows are partly selected.
-   * A DOM property with no HTML attribute, so it is set on the element after every
-   * render; it does not touch `checked`, and a click clears it (the browser's rule,
-   * and the caller's `onChange` decides what the click means).
-   */
-  indeterminate?: boolean;
-  /** See {@link Input}'s `invalid`: paints the box and sets `aria-invalid` together,
-   *  so the two cannot be spelled separately. */
-  invalid?: boolean;
-  /** What is wrong, in the caller's words ("Accept the terms to continue"). Rendered
-   *  under the label, attached with `aria-describedby`, and implies `invalid`. */
-  error?: ReactNode;
-  /** The checked state as a boolean — the `(next) => …` shape Lenkbank's
-   *  `CheckboxField` and Radix's `onCheckedChange` both used, so a migration does not
-   *  have to unwrap `event.target.checked` at every call site. Fires alongside
-   *  `onChange`, never instead of it. */
-  onCheckedChange?: (checked: boolean) => void;
-  /** Classes for the `<input>` itself. `className` styles the OUTERMOST element —
-   *  the row when there is a label, the box's own wrapper when there is not — which
-   *  is where layout (`self-end pb-2` to sit on a field's baseline) belongs. */
-  inputClassName?: string;
-  /**
-   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the
-   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a
-   * screen reader announces "required"), and draws the kit's required mark after the
-   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from
-   * the control, so a star inside the name would only be read out as noise. Write the
-   * label WITHOUT a literal "*". No mark without a label.
-   */
-  required?: boolean;
-  /**
-   * Why the box cannot be changed — {@link Button}'s `disabledReason`, for a checkbox
-   * that SAVES on change (keksdose K3: a setting ticked straight into the server, kept
-   * behind a hand-rolled `SaveGuard` that forced a native `disabled` — out of the tab
-   * order, so the reason never reached a keyboard).
-   *
-   * With a reason the box is `aria-disabled` instead: still focusable, a click or Space
-   * changes nothing and fires no `onChange` / `onCheckedChange`, the reason is in the
-   * kit {@link Tooltip} on the box and on its `aria-describedby`, and the row fades as a
-   * disabled one does. It wins over `disabled`. Changing the lock mounts the box anew (it
-   * moves in or out of the Tooltip), as a locked Button is.
-   */
-  disabledReason?: ReactNode;
-  /**
-   * Where `disabledReason` shows (0.32, §4 "No fact only in a tooltip"): by default, at
-   * Large and on a touch screen, as a line under the label (a bare box: under the box),
-   * and in the tooltip otherwise. See {@link DisabledReasonDisplay}.
-   */
-  disabledReasonDisplay?: DisabledReasonDisplay;
-  /**
-   * This box COMMITS — ticking it saves. Under a locked {@link WriteLockProvider} it is
-   * locked the `disabledReason` way with the lock's reason (which wins over its own).
-   * No provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3.
-   */
-  commit?: CommitScope;
-  /** The `<input type="checkbox">`. A React 19 ref prop since 0.34 (MOD-4, refactor
-   *  audit 2026-10); it was `forwardRef`. */
-  ref?: Ref<HTMLInputElement>;
-}
-
-/**
- * A native checkbox in the kit's tokens, with an optional label, description and
- * error.
- *
- * Without `label`, `description` or `error` it renders the box and nothing else, so
- * it drops into a table cell or a caller's own `<label>` exactly as the raw input
- * did — give it an `aria-label` there. Every other prop reaches the `<input>`
- * (`checked`, `defaultChecked`, `name`, `required`, `data-*`, `aria-*`), so it works
- * controlled, uncontrolled, and inside a plain `<form>`.
- */
-export function Checkbox({
-  ref,
-  label,
-  description,
-  indeterminate = false,
-  invalid,
-  error,
-  onCheckedChange,
-  onChange,
-  className,
-  inputClassName,
-  id,
-  disabled,
-  required,
-  disabledReason,
-  disabledReasonDisplay,
-  commit,
-  onClick,
-  ...rest
-}: CheckboxProps) {
-  const generated = useId();
-  const inputId = id ?? generated;
-  const lock = useLockReason(commit, disabledReason);
-  const locked = lock.locked;
-  const reasonLine = useDisabledReasonLine(disabledReasonDisplay);
-  // Locked is disabled the focusable way: the row fades and the words stop inviting a
-  // click exactly as they do for `disabled`.
-  const looksDisabled = Boolean(disabled) || locked;
-  // In a CheckboxGroup the legend carries the star; the box keeps `required` itself.
-  const starOnLegend = useContext(RequiredStarOnLegend);
-  const descriptionId = `${inputId}-description`;
-  const errorId = `${inputId}-error`;
-  const showError = hasContent(error);
-  const showDescription = hasContent(description);
-  const isInvalid = Boolean(invalid) || showError;
-  // Nothing to lay out beside the box: render the box alone, as the raw input was.
-  const bare = label === undefined && !showDescription && !showError;
-
-  const local = useRef<HTMLInputElement | null>(null);
-  const setRef = useCallback(
-    (node: HTMLInputElement | null) => {
-      local.current = node;
-      assignRef(ref, node);
-    },
-    [ref],
-  );
-  // After EVERY render, not only when the prop changes: a click clears the property
-  // in the DOM, and a controlled caller that keeps `indeterminate` true expects the
-  // dash back on the next render even though the prop never changed.
-  useEffect(() => {
-    if (local.current) local.current.indeterminate = indeterminate;
-  });
-
-  const control = (
-    <span className={cn("relative inline-flex shrink-0", bare && !locked && className)}>
-      <input
-        ref={setRef}
-        id={bare ? id : inputId}
-        // A reason wins over `disabled`, as on Button: the point of giving one is that
-        // the box stays reachable.
-        disabled={locked ? undefined : disabled}
-        required={required}
-        {...rest}
-        // After the spread, like Switch: a props object spread at a checkbox must not
-        // be able to turn it into something else.
-        type="checkbox"
-        aria-disabled={locked || rest["aria-disabled"] || undefined}
-        // OR-ed with the spread so a caller's own `aria-invalid` survives — Input's rule.
-        aria-invalid={isInvalid || rest["aria-invalid"] || undefined}
-        aria-describedby={mergeDescribedBy(
-          rest["aria-describedby"],
-          showDescription && descriptionId,
-          locked && lock.reasonId,
-          showError && errorId,
-        )}
-        // A locked box's click is swallowed, as a locked Button's is.
-        onClick={locked ? undefined : onClick}
-        onChange={(e: ChangeEvent<HTMLInputElement>) => {
-          if (locked) {
-            // Put the tick back, and report nothing. Undone here rather than by
-            // cancelling the click: a cancelled click is reverted by the browser AFTER
-            // React has restored a controlled box, and jsdom reverts it by toggling, which
-            // turned a restored tick back over (the suites the apps run would have seen a
-            // locked box change). Setting the property also keeps React's own record of
-            // the value in step, so an uncontrolled box reports its next real change.
-            // Covers a click on the label and Space too — both arrive as a click.
-            e.currentTarget.checked = !e.currentTarget.checked;
-            e.currentTarget.indeterminate = indeterminate;
-            return;
-          }
-          onChange?.(e);
-          onCheckedChange?.(e.target.checked);
-        }}
-        className={cn(
-          BOX,
-          indeterminate && BOX_MIXED,
-          isInvalid && BOX_INVALID,
-          locked && "cursor-not-allowed",
-          inputClassName,
-        )}
-      />
-      {/* The glyph is drawn over the box, not inside it (an input has no children),
-          and ignores the pointer so a click on the tick still toggles the input. The
-          tick is shown by `peer-checked`, so an UNCONTROLLED box shows it too; the
-          dash replaces it outright while `indeterminate` holds. */}
-      {indeterminate ? (
-        <Minus
-          aria-hidden
-          strokeWidth={3}
-          className="pointer-events-none absolute inset-0 m-auto size-3 text-brand-contrast"
-        />
-      ) : (
-        <Check
-          aria-hidden
-          strokeWidth={3}
-          className="pointer-events-none invisible absolute inset-0 m-auto size-3 text-brand-contrast peer-checked:visible"
-        />
-      )}
-    </span>
-  );
-  // The reason's Tooltip goes round the BOX, not the row: the row is the caller's
-  // layout (`className`), and a wrapper round it would move that into a span. A bare
-  // box hands its `className` to the wrapper, which is then the outermost element.
-  // With words beside it, the reason LINE goes under them instead (Switch's shape).
-  const lineInWords = locked && reasonLine && !bare;
-  const box =
-    locked && !lineInWords ? (
-      <LockedReason lock={lock} line={reasonLine} className={cn("shrink-0", bare && className)}>
-        {control}
-      </LockedReason>
-    ) : (
-      control
-    );
-  // The row's fade moves onto its parts while the reason line is in it, as on Switch.
-  const dimParts = lineInWords;
-
-  if (bare) return box;
-
-  return (
-    <div
-      className={cn(
-        // `items-start` + a 1.25rem cell for the box: the box centres on the label's FIRST
-        // line (text-sm's line is 1.25rem), so a label that wraps keeps the box at the top
-        // rather than floating to the middle of a paragraph.
-        "flex items-start gap-2",
-        // The whole row fades, the way ToggleGroup and the fields do, so the label does
-        // not stay at full strength beside a box you cannot change.
-        looksDisabled && !dimParts && "opacity-60",
-        className,
-      )}
-    >
-      <span className={cn("flex h-5 shrink-0 items-center", dimParts && "opacity-60")}>{box}</span>
-      <span className="min-w-0">
-        {label !== undefined && (
-          <label
-            htmlFor={inputId}
-            className={cn(
-              "block text-sm leading-5 text-primary",
-              // `select-none`: a double-click to toggle twice would otherwise select the
-              // words, and a drag that starts on them starts a native text drag.
-              looksDisabled ? "cursor-not-allowed" : "cursor-pointer select-none",
-              LABEL_TOUCH_LARGE,
-              dimParts && "opacity-60",
-            )}
-          >
-            {label}
-            {required && !starOnLegend && (
-              <span aria-hidden className="ms-0.5 text-danger">
-                *
-              </span>
-            )}
-          </label>
-        )}
-        {showDescription && (
-          <span id={descriptionId} className={cn("mt-0.5 block text-xs text-muted", dimParts && "opacity-60")}>
-            {description}
-          </span>
-        )}
-        {lineInWords && (
-          <span id={lock.reasonId} className={DISABLED_REASON_LINE_CLASS}>
-            {lock.reason}
-          </span>
-        )}
-        {showError && (
-          <span id={errorId} className={cn("block", FIELD_ERROR_CLASS)}>
-            {error}
-          </span>
-        )}
-      </span>
-    </div>
-  );
-}