@cosmicdrift/kumiko-renderer-web 0.193.0 → 0.194.0

package/src/primitives/money-input.tsx

@@ -16,7 +16,7 @@
 
 import { currencyDecimals } from "@cosmicdrift/kumiko-headless";
 import { Minus, Plus } from "lucide-react";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
 
 // Re-exported for backward compat — callers used to import this from here
@@ -72,8 +72,7 @@ export function MoneyInput({
   const major = value === "" ? null : value / factor;
   const formatted = value === "" ? "" : formatMoney(value, currency, resolvedLocale);
 
-  // Edit-Mode: Decimal-String ohne Tausender-Trenner. Konsistente Helper-
-  // Funktion damit Focus-Init und Render-Fallback nicht auseinanderdriften.
+  // Edit-Mode: Decimal-String ohne Tausender-Trenner.
   const toEditable = (m: number | null): string =>
     m === null
       ? ""
@@ -83,8 +82,6 @@ export function MoneyInput({
           useGrouping: false,
         });
 
-  const editable = focused ? draft : toEditable(major);
-
   const handleFocus = (): void => {
     setDraft(toEditable(major));
     setFocused(true);
@@ -102,7 +99,7 @@ export function MoneyInput({
   // click position from the formatted view to the editable one, which has
   // no well-defined equivalent once separators and the currency symbol
   // are stripped.
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (focused) inputRef.current?.select();
   }, [focused]);
 
@@ -134,7 +131,7 @@ export function MoneyInput({
         disabled={disabled}
         aria-required={required}
         aria-invalid={hasError === true ? true : undefined}
-        value={focused ? editable : formatted}
+        value={focused ? draft : formatted}
         onFocus={handleFocus}
         onBlur={handleBlur}
         onChange={(e) => setDraft(e.target.value)}

package/src/ui/sheet.tsx

@@ -48,6 +48,7 @@ function SheetOverlay({
 function SheetContent({
   className,
   overlayClassName,
+  overlayStyle,
   children,
   side = "right",
   showCloseButton = true,
@@ -56,10 +57,11 @@ function SheetContent({
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
   overlayClassName?: string
+  overlayStyle?: React.CSSProperties
 }) {
   return (
     <SheetPortal>
-      <SheetOverlay className={overlayClassName} />
+      <SheetOverlay className={overlayClassName} style={overlayStyle} />
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(

package/src/widgets/__tests__/drawer.test.tsx

@@ -32,4 +32,297 @@ describe("Drawer", () => {
     fireEvent.keyDown(screen.getByTestId("drawer"), { key: "Escape" });
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
+
+  describe("backdrop", () => {
+    function getOverlay(): HTMLElement {
+      const overlay = document.querySelector('[data-slot="sheet-overlay"]');
+      if (overlay === null) throw new Error("sheet-overlay not found");
+      return overlay as HTMLElement;
+    }
+
+    test("default: keine Blur, 20% Abdunklung", () => {
+      render(
+        <Drawer open={true} onOpenChange={() => {}} title="Mail" testId="drawer">
+          <div>Body</div>
+        </Drawer>,
+      );
+      const overlay = getOverlay();
+      expect(overlay.style.backdropFilter).toBe("");
+      expect(overlay.style.backgroundColor).toBe("rgb(0 0 0 / 20%)");
+    });
+
+    test("backdrop={{ blurPx: 4 }}: backdrop-filter blur(4px)", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          title="Mail"
+          testId="drawer"
+          backdrop={{ blurPx: 4 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(getOverlay().style.backdropFilter).toBe("blur(4px)");
+    });
+
+    test("backdrop={{ dimPercent: 0 }}: keine Abdunklung", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          title="Mail"
+          testId="drawer"
+          backdrop={{ dimPercent: 0 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(getOverlay().style.backgroundColor).toBe("rgb(0 0 0 / 0%)");
+    });
+  });
+
+  describe("resize", () => {
+    // happy-dom exposes innerWidth as an accessor (get/set) on the window
+    // instance. Object.defineProperty(...) with a plain `value` replaces
+    // that accessor with a data property, permanently — later test files
+    // sharing this single-process happy-dom then read a frozen, stale
+    // width instead of happy-dom's real viewport state.
+    // Capturing and restoring the exact original descriptor keeps the
+    // accessor (or its absence) intact for every test that runs after.
+    function withViewportWidth(px: number, run: () => void): void {
+      const originalDescriptor = Object.getOwnPropertyDescriptor(window, "innerWidth");
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: px,
+      });
+      try {
+        run();
+      } finally {
+        if (originalDescriptor) {
+          Object.defineProperty(window, "innerWidth", originalDescriptor);
+        } else {
+          delete (window as unknown as { innerWidth?: number }).innerWidth;
+        }
+      }
+    }
+
+    test("clamps an out-of-range defaultWidthPx on initial render, before any interaction (fw#1965)", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 1200, minWidthPx: 300, maxWidthPx: 800 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("800");
+    });
+    test("Startbreite folgt max(520px, 25vw) wenn resize.defaultWidthPx fehlt", () => {
+      withViewportWidth(3000, () => {
+        render(
+          <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
+            <div>Body</div>
+          </Drawer>,
+        );
+        expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("750");
+      });
+    });
+
+    test("Startbreite clamped auf effectiveMaxWidthPx wenn 25vw ueber MAX_WIDTH_PX hinauslaeuft", () => {
+      withViewportWidth(8000, () => {
+        render(
+          <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
+            <div>Body</div>
+          </Drawer>,
+        );
+        const handle = screen.getByRole("separator");
+        const valueNow = Number(handle.getAttribute("aria-valuenow"));
+        const valueMax = Number(handle.getAttribute("aria-valuemax"));
+        expect(valueMax).toBe(1000);
+        expect(valueNow).toBe(valueMax);
+        expect(valueNow).toBeLessThanOrEqual(valueMax);
+      });
+    });
+
+    test("resize.defaultWidthPx wird ebenfalls gegen effectiveMaxWidthPx geclamped", () => {
+      withViewportWidth(2000, () => {
+        render(
+          <Drawer
+            open={true}
+            onOpenChange={() => {}}
+            side="right"
+            testId="drawer"
+            resize={{ defaultWidthPx: 5000 }}
+          >
+            <div>Body</div>
+          </Drawer>,
+        );
+        expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("1000");
+      });
+    });
+
+    test("Startbreite clamped auf 520px Minimum bei schmalem Viewport", () => {
+      withViewportWidth(800, () => {
+        render(
+          <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
+            <div>Body</div>
+          </Drawer>,
+        );
+        expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("520");
+      });
+    });
+
+    test("resize.defaultWidthPx schlägt die Viewport-Formel", () => {
+      withViewportWidth(3000, () => {
+        render(
+          <Drawer
+            open={true}
+            onOpenChange={() => {}}
+            side="right"
+            testId="drawer"
+            resize={{ defaultWidthPx: 600 }}
+          >
+            <div>Body</div>
+          </Drawer>,
+        );
+        expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("600");
+      });
+    });
+
+    test("side='right': ArrowLeft grows, ArrowRight shrinks", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const handle = screen.getByRole("separator");
+      expect(handle.getAttribute("aria-valuenow")).toBe("400");
+      fireEvent.keyDown(handle, { key: "ArrowLeft" });
+      expect(handle.getAttribute("aria-valuenow")).toBe("416");
+      fireEvent.keyDown(handle, { key: "ArrowRight" });
+      expect(handle.getAttribute("aria-valuenow")).toBe("400");
+    });
+
+    test("side='left': ArrowRight grows, ArrowLeft shrinks (direction mirrored)", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="left"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const handle = screen.getByRole("separator");
+      fireEvent.keyDown(handle, { key: "ArrowRight" });
+      expect(handle.getAttribute("aria-valuenow")).toBe("416");
+      fireEvent.keyDown(handle, { key: "ArrowLeft" });
+      expect(handle.getAttribute("aria-valuenow")).toBe("400");
+    });
+
+    test("clamps growth at maxWidthPx and shrink at minWidthPx (shift = 40px step)", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 490, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const handle = screen.getByRole("separator");
+      fireEvent.keyDown(handle, { key: "ArrowLeft", shiftKey: true });
+      expect(handle.getAttribute("aria-valuenow")).toBe("500");
+      for (let i = 0; i < 20; i++) {
+        fireEvent.keyDown(handle, { key: "ArrowRight", shiftKey: true });
+      }
+      expect(handle.getAttribute("aria-valuenow")).toBe("300");
+    });
+
+    test("maximize toggle switches aria-pressed and expands to maxWidthPx", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const maximizeButton = screen.getByRole("button", { name: /maximize drawer width/i });
+      expect(maximizeButton.getAttribute("aria-pressed")).toBe("false");
+      fireEvent.click(maximizeButton);
+      expect(maximizeButton.getAttribute("aria-pressed")).toBe("true");
+      expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("500");
+      fireEvent.click(maximizeButton);
+      expect(maximizeButton.getAttribute("aria-pressed")).toBe("false");
+      expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("400");
+    });
+
+    test("arrow key after maximize resizes from the maximized width, not the pre-maximize width", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const maximizeButton = screen.getByRole("button", { name: /maximize drawer width/i });
+      fireEvent.click(maximizeButton);
+      expect(screen.getByRole("separator").getAttribute("aria-valuenow")).toBe("500");
+
+      const handle = screen.getByRole("separator");
+      fireEvent.keyDown(handle, { key: "ArrowRight" });
+      // Shrinking from the visible 500px maximized width, not from the
+      // stale 400px `width` state that was never updated while maximized.
+      expect(handle.getAttribute("aria-valuenow")).toBe("484");
+    });
+
+    test("side='top' with resize set: no resize handle, no maximize button (vertical drawers can't resize)", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="top"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.queryByRole("separator")).toBeNull();
+      expect(screen.queryByRole("button", { name: /maximize drawer width/i })).toBeNull();
+    });
+
+    test("resize prop omitted: no resize handle, no maximize button", () => {
+      render(
+        <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer">
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.queryByRole("separator")).toBeNull();
+      expect(screen.queryByRole("button", { name: /maximize drawer width/i })).toBeNull();
+    });
+  });
 });

package/src/widgets/__tests__/infinity-list.test.tsx

@@ -123,6 +123,44 @@ describe("InfinityList", () => {
     expect(calls).toBe(2);
   });
 
+  test("dedupliziert nach rowId beim Append — eine Row die auf Seite 2 erneut auftaucht wird nicht doppelt gerendert (fw#1829)", async () => {
+    let calls = 0;
+    const dispatcher = createMockDispatcher({
+      query: (async () => {
+        calls += 1;
+        if (calls === 1) {
+          return {
+            isSuccess: true,
+            data: {
+              rows: [
+                { id: "m1", subject: "Erste" },
+                { id: "m2", subject: "Zweite" },
+              ],
+              nextCursor: "c1",
+            },
+          };
+        }
+        // Offset-based cursor re-serves m2 (already on page 1, e.g. after a
+        // live-merge shifted the offset) alongside a genuinely new row.
+        return {
+          isSuccess: true,
+          data: {
+            rows: [
+              { id: "m2", subject: "Zweite" },
+              { id: "m3", subject: "Dritte" },
+            ],
+            nextCursor: null,
+          },
+        };
+      }) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(list("inbox:query:message:list"), dispatcher);
+    await waitFor(() => expect(screen.getByText("Zweite")).toBeTruthy());
+    fireIntersect();
+    await waitFor(() => expect(screen.getByText("Dritte")).toBeTruthy());
+    expect(screen.getAllByText("Zweite")).toHaveLength(1);
+  });
+
   test("Fehler → ErrorState, Retry lädt neu", async () => {
     let calls = 0;
     const dispatcher = createMockDispatcher({

package/src/widgets/__tests__/upload-zone.test.tsx

@@ -49,9 +49,133 @@ describe("UploadZone", () => {
     const onUpload = mock(async () => {});
     render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
     const input = screen.getByTestId("zone-input") as HTMLInputElement;
+    // "files" is stubbed the same way; a plain `expect(input.value).toBe("")`
+    // is vacuous because happy-dom never wrote anything else there — a spy on
+    // the setter is what actually proves the component performs the reset.
+    const setValue = mock((_value: string) => {});
+    Object.defineProperty(input, "value", { set: setValue, get: () => "", configurable: true });
     pick(input, [new File(["a"], "a.pdf")]);
 
     await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));
-    expect(input.value).toBe("");
+    await waitFor(() => expect(setValue).toHaveBeenCalledWith(""));
+  });
+
+  test("ruft onUpload bei Drop mit Dateien auf", async () => {
+    const onUpload = mock(async () => {});
+    render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+    const file = new File(["hi"], "dropped.pdf", { type: "application/pdf" });
+    fireEvent.drop(screen.getByTestId("zone-dropzone"), { dataTransfer: { files: [file] } });
+
+    await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));
+    expect(onUpload).toHaveBeenCalledWith(file);
+  });
+
+  test("a dropped file that doesn't match `accept` is rejected, not passed to onUpload", async () => {
+    const onUpload = mock(async () => {});
+    render(
+      <UploadZone title="Datei hochladen" onUpload={onUpload} accept={["image/*"]} testId="zone" />,
+    );
+    const file = new File(["hi"], "dropped.pdf", { type: "application/pdf" });
+    fireEvent.drop(screen.getByTestId("zone-dropzone"), { dataTransfer: { files: [file] } });
+
+    await waitFor(() => expect(screen.getByText("dropped.pdf")).toBeTruthy());
+    expect(screen.getByText("File type not allowed")).toBeTruthy();
+    expect(onUpload).not.toHaveBeenCalled();
+  });
+
+  test("a dropped file that matches `accept` still uploads normally", async () => {
+    const onUpload = mock(async () => {});
+    render(
+      <UploadZone title="Datei hochladen" onUpload={onUpload} accept={["image/*"]} testId="zone" />,
+    );
+    const file = new File(["hi"], "photo.png", { type: "image/png" });
+    fireEvent.drop(screen.getByTestId("zone-dropzone"), { dataTransfer: { files: [file] } });
+
+    await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));
+    expect(onUpload).toHaveBeenCalledWith(file);
+  });
+
+  test("a non-Error throw from onUpload shows the translated fallback, not the raw token", async () => {
+    const onUpload = mock(async () => {
+      throw "upload_failed";
+    });
+    render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+    const file = new File(["hi"], "huge.pdf", { type: "application/pdf" });
+    pick(screen.getByTestId("zone-input"), [file]);
+
+    // Both the sr-only status label and the visible error line now read
+    // "Failed" (same i18n key) — assert at least one is present rather than
+    // requiring a single match.
+    await waitFor(() => expect(screen.getAllByText("Failed").length).toBeGreaterThan(0));
+    expect(screen.queryByText("upload_failed")).toBeNull();
+  });
+
+  test("disabled unterdrückt den Drop", () => {
+    const onUpload = mock(async () => {});
+    render(<UploadZone title="Datei hochladen" onUpload={onUpload} disabled testId="zone" />);
+    const file = new File(["hi"], "dropped.pdf", { type: "application/pdf" });
+    fireEvent.drop(screen.getByTestId("zone-dropzone"), { dataTransfer: { files: [file] } });
+
+    expect(onUpload).not.toHaveBeenCalled();
+  });
+
+  test("dragLeave auf ein Kind-Element behält den aktiven State, auf ein Element außerhalb setzt ihn zurück", () => {
+    const onUpload = mock(async () => {});
+    render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+    const dropzone = screen.getByTestId("zone-dropzone");
+    const childIcon = screen.getByText("Datei hochladen");
+
+    fireEvent.dragOver(dropzone, { dataTransfer: {} });
+    expect(dropzone.className).toContain("border-primary");
+
+    // happy-dom's DragEvent constructor ignores `relatedTarget` in the init
+    // dict, so it must be forced via defineProperty rather than passed
+    // through fireEvent.dragLeave(el, init).
+    const leaveTo = (relatedTarget: Element): void => {
+      const evt = new DragEvent("dragleave", { bubbles: true, cancelable: true });
+      Object.defineProperty(evt, "relatedTarget", { value: relatedTarget, configurable: true });
+      fireEvent(dropzone, evt);
+    };
+
+    leaveTo(childIcon);
+    expect(dropzone.className).toContain("border-primary");
+
+    leaveTo(document.body);
+    expect(dropzone.className).not.toContain("border-primary");
+  });
+
+  test("gibt Bilder verkleinert an onUpload weiter (nicht die Originaldatei)", async () => {
+    class FakeOffscreenCanvas {
+      getContext() {
+        return { drawImage: mock(() => {}) };
+      }
+      convertToBlob() {
+        return Promise.resolve(new Blob(["resized-bytes"], { type: "image/jpeg" }));
+      }
+    }
+    // @ts-expect-error test stub for a browser-only API missing in happy-dom
+    globalThis.OffscreenCanvas = FakeOffscreenCanvas;
+    globalThis.createImageBitmap = mock(async () => ({
+      close: mock(() => {}),
+      height: 100,
+      width: 100,
+    }));
+
+    try {
+      const onUpload = mock(async (_uploaded: File) => {});
+      render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+      const file = new File(["x"], "photo.jpg", { type: "image/jpeg" });
+      pick(screen.getByTestId("zone-input"), [file]);
+
+      await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));
+      const [uploaded] = onUpload.mock.calls[0] ?? [];
+      expect(uploaded?.size).toBe("resized-bytes".length);
+      expect(uploaded?.size).not.toBe(file.size);
+    } finally {
+      // @ts-expect-error restore missing-API baseline
+      globalThis.OffscreenCanvas = undefined;
+      // @ts-expect-error restore missing-API baseline
+      globalThis.createImageBitmap = undefined;
+    }
   });
 });

package/src/widgets/__tests__/widgets.test.tsx

@@ -44,6 +44,23 @@ describe("ProgressBar", () => {
     expect(screen.getByTestId("bar").getAttribute("aria-valuenow")).toBe("0");
   });
 
+  test("NaN (z.B. aus done/total mit total=0) wird 0 statt NaN durchzureichen", () => {
+    render(<ProgressBar value={Number.NaN} testId="bar" />);
+    const bar = screen.getByTestId("bar");
+    expect(bar.getAttribute("aria-valuenow")).toBe("0");
+    const fill = bar.firstElementChild as HTMLElement;
+    expect(fill.style.width).toBe("0%");
+  });
+
+  test("className landet auf dem Wrapper, h-2 bleibt auf dem Testid-/Track-Element (fw#1970)", () => {
+    render(<ProgressBar value={0.5} testId="bar" className="mt-4" />);
+    const bar = screen.getByTestId("bar");
+    expect(bar.parentElement?.className).toContain("mt-4");
+    expect(bar.parentElement?.className).toContain("w-full");
+    expect(bar.className).toContain("h-2");
+    expect(bar.className).not.toContain("mt-4");
+  });
+
   test("Füll-Element bildet den Wert über Breite ab und erbt die Höhe nicht vom Elternteil", () => {
     render(<ProgressBar value={0.5} testId="bar" />);
     const bar = screen.getByTestId("bar");
@@ -54,6 +71,14 @@ describe("ProgressBar", () => {
     expect(fill.className).toContain("inset-y-0");
     expect(bar.className).toContain("relative");
   });
+
+  test("die testId sitzt auf der Track-Höhe, className erreicht den äußeren Wrapper", () => {
+    render(<ProgressBar value={0.5} testId="bar" className="mb-4" />);
+    const track = screen.getByTestId("bar");
+    const wrapper = track.parentElement as HTMLElement;
+    expect(wrapper.className).toContain("mb-4");
+    expect(track.className).toContain("h-2");
+  });
 });
 
 describe("StepBar", () => {

package/src/widgets/ai-text-field.tsx

@@ -45,6 +45,7 @@ interface AiTextFieldBaseProps {
   readonly disabled?: boolean;
   readonly placeholder?: string;
   readonly testId?: string;
+  readonly hideLabel?: boolean;
   /** Ghost-text completion on/off. Default true. */
   readonly completion?: boolean;
   /** Debounce for ghost-text requests, ms. Default 500 — kept low in
@@ -88,6 +89,7 @@ function AiTextCore({
   disabled,
   placeholder,
   testId,
+  hideLabel,
   rows,
   completion = true,
   completionDebounceMs = 500,
@@ -183,7 +185,7 @@ function AiTextCore({
 
   return (
     <>
-      <Field id={id} label={label} required={required} testId={testId}>
+      <Field id={id} label={label} required={required} hideLabel={hideLabel} testId={testId}>
         <div className="relative w-full">
           {showGhost && (
             <div