@multiplatform.one/forms 7.11.0 → 7.16.0

package/src/fields/Input/index.tsx

@@ -1,3 +1,4 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 import type { ComponentProps, ReactElement, ReactNode } from "react";
 import { useCallback, useRef } from "react";
 import { writeToClipboard } from "@multiplatform.one/platform";
@@ -160,6 +161,7 @@ export function Input({
   copy,
   onCopyResult,
 }: InputProps) {
+  const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, control, id } = useFormField({
     form: formProp,
     id: idProp,
@@ -178,7 +180,7 @@ export function Input({
   // density ≠ size: compact steps knobProps.sizeToken; an explicit `size`
   // ejects only the painted box height and leaves density alone.
   const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
-  const visualHeight = getFieldHeight(resolvedSize);
+  const visualHeight = getFieldHeight(resolvedSize, 1, hydrationTouch);
   const belowFloor = visualHeight < MIN_PRESS_TARGET;
   const visibleLabel = labelHidden ? undefined : label;
   const resolvedAriaLabel =
@@ -267,7 +269,7 @@ export function Input({
 
   if (children) {
     return (
-      <InputParts size={resolvedSize} {...(error ? { theme: "red" } : undefined)}>
+      <InputParts size={resolvedSize} {...(error ? { theme: "error" } : undefined)}>
         {children}
       </InputParts>
     );

package/src/fields/MentionInput/MentionInput.spec.tsx

@@ -1,10 +1,21 @@
-import { act, fireEvent, waitFor } from "@testing-library/react";
+import { act, fireEvent, waitFor, within } from "@testing-library/react";
 import { useForm } from "@tanstack/react-form";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { MentionInput, parseMentionValue } from "./index";
 
+/** Web panels portal out to the page (MPO-335, LC-90), so panel text is read from the page. */
+function findInPage(text: string): Element | undefined {
+  try {
+    return within(document.body).queryByText(text, { exact: false }) ?? undefined;
+  } catch {
+    return Array.from(document.body.querySelectorAll("*")).find((el) =>
+      el.textContent?.includes(text),
+    );
+  }
+}
+
 const userMentions = {
   trigger: "@",
   data: [
@@ -59,8 +70,8 @@ describe("MentionInput", () => {
       />,
     );
 
-    expect(result.findTextElement("Comment")).toBeDefined();
-    const textArea = result.container.querySelector("textarea");
+    expect(findInPage("Comment")).toBeDefined();
+    const textArea = result.baseElement.querySelector("textarea");
     expect(textArea?.getAttribute("placeholder")).toBe("Type @ to mention");
   });
 
@@ -82,7 +93,7 @@ describe("MentionInput", () => {
       />,
     );
 
-    const textArea = result.container.querySelector("textarea");
+    const textArea = result.baseElement.querySelector("textarea");
     expect(textArea).toBeTruthy();
     if (textArea) fireEvent.change(textArea, { target: { value: "hello" } });
 
@@ -96,7 +107,7 @@ describe("MentionInput", () => {
     const result = renderWithProviders(
       <MentionInput label="Comment" mentions={[userMentions]} defaultValue="hello there" />,
     );
-    expect(result.container.querySelector("textarea")?.value).toBe("hello there");
+    expect(result.baseElement.querySelector("textarea")?.value).toBe("hello there");
   });
 
   it("does not emit onChange on mount (LC-14: seed is not a user edit)", () => {
@@ -116,8 +127,8 @@ describe("MentionInput", () => {
     const result = renderWithProviders(
       <MentionInput label="Comment" name="comment" mentions={[userMentions]} skeleton />,
     );
-    expect(result.findTextElement("Comment")).toBeDefined();
-    expect(result.container.querySelector("textarea")).toBeNull();
+    expect(findInPage("Comment")).toBeDefined();
+    expect(result.baseElement.querySelector("textarea")).toBeNull();
   });
 
   it("standalone controlled: a value arriving after mount displays without onChange", async () => {
@@ -126,7 +137,7 @@ describe("MentionInput", () => {
     const result = renderWithProviders(
       <MentionInput label="Comment" mentions={[userMentions]} value="" onChange={onChange} />,
     );
-    expect(result.container.querySelector("textarea")?.value).toBe("");
+    expect(result.baseElement.querySelector("textarea")?.value).toBe("");
 
     result.rerender(
       <MentionInput
@@ -138,7 +149,7 @@ describe("MentionInput", () => {
       />,
     );
     await waitFor(() => {
-      expect(result.container.querySelector("textarea")?.value).toBe("seeded");
+      expect(result.baseElement.querySelector("textarea")?.value).toBe("seeded");
     });
     expect(onChange).not.toHaveBeenCalled();
     expect(onTextChange).not.toHaveBeenCalled();
@@ -169,7 +180,7 @@ describe("MentionInput", () => {
       formApi?.setFieldValue("comment", { text: "seeded later", mentions: [] });
     });
     await waitFor(() => {
-      expect(result.container.querySelector("textarea")?.value).toBe("seeded later");
+      expect(result.baseElement.querySelector("textarea")?.value).toBe("seeded later");
     });
     expect(onChange).not.toHaveBeenCalled();
   });
@@ -179,13 +190,13 @@ describe("MentionInput", () => {
       <MentionInput label="Comment" name="comment" mentions={[userMentions]} />,
     );
 
-    const textArea = result.container.querySelector("textarea");
+    const textArea = result.baseElement.querySelector("textarea");
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
     typeTrigger(textArea, "@");
 
-    const listbox = result.container.ownerDocument.querySelector('[role="listbox"]');
+    const listbox = result.baseElement.ownerDocument.querySelector('[role="listbox"]');
     expect(listbox).toBeTruthy();
     if (!listbox) return;
 
@@ -198,11 +209,11 @@ describe("MentionInput", () => {
     const options = listbox.querySelectorAll('[role="option"]');
     expect(options.length).toBe(2);
     // Both rows reserve a media slot when any item has an avatar (Bob has none).
-    expect(result.findTextElement("Alice")).toBeDefined();
-    expect(result.findTextElement("Bob")).toBeDefined();
-    expect(result.findTextElement("Engineer")).toBeDefined();
-    expect(result.findTextElement("Designer")).toBeDefined();
-    expect(result.findTextElement("B")).toBeDefined(); // Bob initials fallback
+    expect(findInPage("Alice")).toBeDefined();
+    expect(findInPage("Bob")).toBeDefined();
+    expect(findInPage("Engineer")).toBeDefined();
+    expect(findInPage("Designer")).toBeDefined();
+    expect(findInPage("B")).toBeDefined(); // Bob initials fallback
     // LC-73: overlay rows paint nestedControl (32px at medium), not a raw 28.
     const slots = listbox.querySelectorAll("[data-media-slot]");
     expect(slots.length).toBe(2);
@@ -220,13 +231,13 @@ describe("MentionInput", () => {
       <MentionInput label="Comment" name="comment" mentions={[userMentions]} {...props} />,
     );
 
-    const textArea = result.container.querySelector("textarea");
+    const textArea = result.baseElement.querySelector("textarea");
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
     typeTrigger(textArea, "@");
 
-    expect(result.container.ownerDocument.querySelector('[role="listbox"]')).toBeNull();
+    expect(result.baseElement.ownerDocument.querySelector('[role="listbox"]')).toBeNull();
   });
 
   it("does not reserve a media slot for all-text triggers (hashtags)", () => {
@@ -246,17 +257,17 @@ describe("MentionInput", () => {
       />,
     );
 
-    const textArea = result.container.querySelector("textarea");
+    const textArea = result.baseElement.querySelector("textarea");
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
     typeTrigger(textArea, "#");
 
-    const listbox = result.container.ownerDocument.querySelector('[role="listbox"]');
+    const listbox = result.baseElement.ownerDocument.querySelector('[role="listbox"]');
     expect(listbox).toBeTruthy();
-    expect(result.findTextElement("react")).toBeDefined();
+    expect(findInPage("react")).toBeDefined();
     // No avatar / initials glyphs for an all-text list.
-    expect(result.container.ownerDocument.querySelector("img")).toBeNull();
+    expect(result.baseElement.ownerDocument.querySelector("img")).toBeNull();
     expect(listbox?.querySelector("[data-media-slot]")).toBeNull();
   });
 
@@ -265,16 +276,16 @@ describe("MentionInput", () => {
       <MentionInput label="Comment" name="comment" mentions={[userMentions]} />,
     );
 
-    const textArea = result.container.querySelector("textarea");
+    const textArea = result.baseElement.querySelector("textarea");
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
     typeTrigger(textArea, "@zzzz");
 
-    const listbox = result.container.ownerDocument.querySelector('[role="listbox"]');
+    const listbox = result.baseElement.ownerDocument.querySelector('[role="listbox"]');
     expect(listbox).toBeTruthy();
     expect(listbox?.querySelectorAll('[role="option"]').length).toBe(0);
-    expect(result.findTextElement("No matches")).toBeDefined();
+    expect(findInPage("No matches")).toBeDefined();
   });
 
   it("inserts the active suggestion on Tab (GitHub/Slack)", () => {
@@ -283,7 +294,7 @@ describe("MentionInput", () => {
       <MentionInput label="Comment" name="comment" mentions={[userMentions]} onChange={onChange} />,
     );
 
-    const textArea = result.container.querySelector("textarea");
+    const textArea = result.baseElement.querySelector("textarea");
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
@@ -309,13 +320,13 @@ describe("MentionInput", () => {
       <MentionInput label="Comment" name="comment" mentions={[userMentions]} />,
     );
 
-    const textArea = result.container.querySelector("textarea");
+    const textArea = result.baseElement.querySelector("textarea");
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
     typeTrigger(textArea, "@");
 
-    const options = result.container.ownerDocument.querySelectorAll('[role="option"]');
+    const options = result.baseElement.ownerDocument.querySelectorAll('[role="option"]');
     expect(options.length).toBe(2);
     expect(options[0]?.getAttribute("data-keyboard-ring")).toBe("true");
     expect(options[1]?.getAttribute("data-keyboard-ring")).toBeNull();
@@ -331,7 +342,7 @@ describe("MentionInput", () => {
       <MentionInput label="Comment" name="comment" mentions={[userMentions]} onChange={onChange} />,
     );
 
-    const textArea = result.container.querySelector("textarea");
+    const textArea = result.baseElement.querySelector("textarea");
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 

package/src/fields/MentionInput/index.tsx

@@ -1,3 +1,4 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 import type { Validator } from "../../types";
 
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
@@ -24,6 +25,7 @@ import { ScrollArrow } from "../../shared/floatingList";
 import { Skeleton } from "../../Skeleton";
 import { zIndex } from "../../shared/zIndex";
 import { useFloatingPanel, panelTransition } from "../../FloatingPanel";
+import { PanelPortal } from "../../FloatingPanel/PanelPortal";
 import { Field, FieldLayout } from "../../fieldLayout";
 import {
   getFieldError,
@@ -240,6 +242,7 @@ export function MentionInput<
   TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(props: MentionInputProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+  const hydrationTouch = useTouchSurface();
   const {
     defaultValue,
     form,
@@ -274,8 +277,8 @@ export function MentionInput<
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const resolvedSizeToken = (size || knobProps.sizeToken) as SizeTokens;
-  const minHeight = minHeightProp ?? getFieldHeight(resolvedSizeToken, 3);
-  const maxHeight = maxHeightProp ?? getFieldHeight(resolvedSizeToken, 8);
+  const minHeight = minHeightProp ?? getFieldHeight(resolvedSizeToken, 3, hydrationTouch);
+  const maxHeight = maxHeightProp ?? getFieldHeight(resolvedSizeToken, 8, hydrationTouch);
   const minRows = Math.max(1, Math.round(minHeight / 20));
   const maxRows = Math.max(minRows, Math.round(maxHeight / 20));
 
@@ -798,126 +801,132 @@ export function MentionInput<
   const { style: elevatedSurfaceStyle, ...elevatedSurfaceProps } = panel.knobProps.elevatedSurface;
 
   const floatingDropdown = panel.mounted ? (
-    <YStack
-      {...getFloatingProps({
-        ref: panel.refs.setFloating,
-        style: {
-          ...elevatedSurfaceStyle,
-          position: panel.strategy,
-          top: panel.y ?? 0,
-          left: panel.x ?? 0,
-          scrollbarWidth: "none" as any,
-          zIndex: zIndex.dropdown,
-          overflow: "auto",
-          opacity: panel.visible ? 1 : 0,
-          transform: panel.visible ? "scale(1)" : "scale(0.96)",
-          transition: panel.knobProps.transition ? panelTransition : "none",
-          transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
-        },
-        onScroll: (e: any) => panel.updateArrows(e.target as HTMLElement),
-      })}
-      outlineWidth={0}
-      pointerEvents={panel.visible ? "auto" : "none"}
-      {...elevatedSurfaceProps}
-      borderRadius={panel.dropdownRadius}
-      padding={0}
-      maxHeight={suggestionsMaxHeight}
-      minWidth={suggestionsMinWidth}
-      role={"listbox" as "list"}
-      id={suggestionListId}
-      aria-label={t("Suggestions")}
-    >
-      <ScrollArrow
-        direction="up"
-        scrollRef={panel.refs.floating}
-        visible={panel.arrowUp}
-        arrowScrollDirRef={panel.arrowScrollDirRef}
-      />
-      {/* LC-01: rows are direct children of the scroll container — no padded
-          wrapper, the container owns only its border. */}
-      {hasSuggestions
-        ? suggestions.map((item, index) => {
-            const optionId = `${id}-option-${item.id}`;
-            const active = index === selectedIndex;
-            const keyboardRing = active && keyboardHighlight;
-            const secondary = mentionSecondary(item, currentTrigger ?? "");
-            return (
-              <MentionSuggestionItem
-                key={item.id}
-                ref={(node: any) => {
-                  itemRefs.current[index] = node;
-                }}
-                selected={active}
-                onPress={() => handleSuggestionPress(item)}
-                onMouseEnter={() => {
-                  setKeyboardHighlight(false);
-                  setSelectedIndex(index);
-                }}
-                role="option"
-                id={optionId}
-                aria-selected={active}
-                data-keyboard-ring={keyboardRing ? "true" : undefined}
-                {...(keyboardRing ? keyboardFocusRingProps : undefined)}
-              >
-                {/* LC-08 MEDIA-SLOT-ROW: when any row in the list has media, every
-                    row reserves the same fixed slot (initials fallback, centered)
-                    so the text columns share one left edge. */}
-                {suggestionsHaveMedia && (
-                  <YStack
-                    width={mediaSlot}
-                    height={mediaSlot}
-                    alignItems="center"
-                    justifyContent="center"
-                    flexShrink={0}
-                    data-media-slot={mediaSlot}
-                  >
-                    <Avatar size={mediaSlot} circular>
-                      {item.avatar ? <Avatar.Image src={item.avatar} /> : null}
-                      <Avatar.Fallback
-                        backgroundColor={formInputColors.background.focus}
-                        justifyContent="center"
-                        alignItems="center"
-                      >
-                        <Text fontSize={helperFontSizeMap[knobProps.sizeToken as string] ?? "$2"}>
-                          {item.display[0]}
-                        </Text>
-                      </Avatar.Fallback>
-                    </Avatar>
-                  </YStack>
-                )}
-                <YStack flex={1} minWidth={0}>
-                  <MentionMatchText text={item.display} query={searchQuery} {...knobProps.label} />
-                  {secondary ? (
+    <PanelPortal anchor={panel.triggerRef.current}>
+      <YStack
+        {...getFloatingProps({
+          ref: panel.refs.setFloating,
+          style: {
+            ...elevatedSurfaceStyle,
+            position: panel.strategy,
+            top: panel.y ?? 0,
+            left: panel.x ?? 0,
+            scrollbarWidth: "none" as any,
+            zIndex: zIndex.dropdown,
+            overflow: "auto",
+            opacity: panel.visible ? 1 : 0,
+            transform: panel.visible ? "scale(1)" : "scale(0.96)",
+            transition: panel.knobProps.transition ? panelTransition : "none",
+            transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
+          },
+          onScroll: (e: any) => panel.updateArrows(e.target as HTMLElement),
+        })}
+        outlineWidth={0}
+        pointerEvents={panel.visible ? "auto" : "none"}
+        {...elevatedSurfaceProps}
+        borderRadius={panel.dropdownRadius}
+        padding={0}
+        maxHeight={suggestionsMaxHeight}
+        minWidth={suggestionsMinWidth}
+        role={"listbox" as "list"}
+        id={suggestionListId}
+        aria-label={t("Suggestions")}
+      >
+        <ScrollArrow
+          direction="up"
+          scrollRef={panel.refs.floating}
+          visible={panel.arrowUp}
+          arrowScrollDirRef={panel.arrowScrollDirRef}
+        />
+        {/* LC-01: rows are direct children of the scroll container — no padded
+            wrapper, the container owns only its border. */}
+        {hasSuggestions
+          ? suggestions.map((item, index) => {
+              const optionId = `${id}-option-${item.id}`;
+              const active = index === selectedIndex;
+              const keyboardRing = active && keyboardHighlight;
+              const secondary = mentionSecondary(item, currentTrigger ?? "");
+              return (
+                <MentionSuggestionItem
+                  key={item.id}
+                  ref={(node: any) => {
+                    itemRefs.current[index] = node;
+                  }}
+                  selected={active}
+                  onPress={() => handleSuggestionPress(item)}
+                  onMouseEnter={() => {
+                    setKeyboardHighlight(false);
+                    setSelectedIndex(index);
+                  }}
+                  role="option"
+                  id={optionId}
+                  aria-selected={active}
+                  data-keyboard-ring={keyboardRing ? "true" : undefined}
+                  {...(keyboardRing ? keyboardFocusRingProps : undefined)}
+                >
+                  {/* LC-08 MEDIA-SLOT-ROW: when any row in the list has media, every
+                      row reserves the same fixed slot (initials fallback, centered)
+                      so the text columns share one left edge. */}
+                  {suggestionsHaveMedia && (
+                    <YStack
+                      width={mediaSlot}
+                      height={mediaSlot}
+                      alignItems="center"
+                      justifyContent="center"
+                      flexShrink={0}
+                      data-media-slot={mediaSlot}
+                    >
+                      <Avatar size={mediaSlot} circular>
+                        {item.avatar ? <Avatar.Image src={item.avatar} /> : null}
+                        <Avatar.Fallback
+                          backgroundColor={formInputColors.background.focus}
+                          justifyContent="center"
+                          alignItems="center"
+                        >
+                          <Text fontSize={helperFontSizeMap[knobProps.sizeToken as string] ?? "$2"}>
+                            {item.display[0]}
+                          </Text>
+                        </Avatar.Fallback>
+                      </Avatar>
+                    </YStack>
+                  )}
+                  <YStack flex={1} minWidth={0}>
                     <MentionMatchText
-                      text={secondary}
+                      text={item.display}
                       query={searchQuery}
-                      fontSize={helperFontSizeMap[knobProps.sizeToken as string] ?? "$2"}
-                      color={formCommonColors.muted}
-                      {...knobProps.body}
+                      {...knobProps.label}
                     />
-                  ) : null}
-                </YStack>
-              </MentionSuggestionItem>
-            );
-          })
-        : triggerActive && (
-            <YStack paddingHorizontal="$3" paddingVertical="$2" role="status" aria-live="polite">
-              <Text
-                fontSize={helperFontSizeMap[knobProps.sizeToken as string] ?? "$2"}
-                color={formCommonColors.muted}
-                {...knobProps.body}
-              >
-                {t("No matches")}
-              </Text>
-            </YStack>
-          )}
-      <ScrollArrow
-        direction="down"
-        scrollRef={panel.refs.floating}
-        visible={panel.arrowDown}
-        arrowScrollDirRef={panel.arrowScrollDirRef}
-      />
-    </YStack>
+                    {secondary ? (
+                      <MentionMatchText
+                        text={secondary}
+                        query={searchQuery}
+                        fontSize={helperFontSizeMap[knobProps.sizeToken as string] ?? "$2"}
+                        color={formCommonColors.muted}
+                        {...knobProps.body}
+                      />
+                    ) : null}
+                  </YStack>
+                </MentionSuggestionItem>
+              );
+            })
+          : triggerActive && (
+              <YStack paddingHorizontal="$3" paddingVertical="$2" role="status" aria-live="polite">
+                <Text
+                  fontSize={helperFontSizeMap[knobProps.sizeToken as string] ?? "$2"}
+                  color={formCommonColors.muted}
+                  {...knobProps.body}
+                >
+                  {t("No matches")}
+                </Text>
+              </YStack>
+            )}
+        <ScrollArrow
+          direction="down"
+          scrollRef={panel.refs.floating}
+          visible={panel.arrowDown}
+          arrowScrollDirRef={panel.arrowScrollDirRef}
+        />
+      </YStack>
+    </PanelPortal>
   ) : null;
 
   // ── TextArea ───────────────────────────────────────────────

package/src/fields/OTPInput/index.tsx

@@ -1,3 +1,4 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 import type { Validator } from "../../types";
 
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
@@ -144,12 +145,12 @@ function digitFontSize(cellSize: string | number | undefined): string {
  * exactly the defect MPO-56 killed, so the radius rides the painted token instead.
  * Same source as the avatar square face (`avatarTokenPx`, components/Avatar).
  */
-export function otpCellHeightPx(cellSize: string | number | undefined): number {
+export function otpCellHeightPx(cellSize: string | number | undefined, touch?: boolean): number {
   if (typeof cellSize === "number" && Number.isFinite(cellSize) && cellSize > 0) return cellSize;
   const token = (cellSize ?? "$4") as SizeTokens;
   const painted = getVariableValue(getSize(token));
   if (typeof painted === "number" && Number.isFinite(painted) && painted > 0) return painted;
-  return getFieldHeight(token);
+  return getFieldHeight(token, 1, touch);
 }
 
 /**
@@ -220,6 +221,7 @@ const OTPDigitInput = memo(function OTPDigitInput({
   attachRef,
 }: OTPDigitInputProps) {
   const didFinishSSR = useDidFinishSSR();
+  const hydrationTouch = useTouchSurface();
   const { knobProps, control } = useResolvedKnobs();
   // Honor the size the field was given (InputParts root receives
   // `fieldProps.size || knobProps.sizeToken`): table cells pass a compact
@@ -241,7 +243,7 @@ const OTPDigitInput = memo(function OTPDigitInput({
 
   const cellRadius = getOTPCellRadius(
     knobProps.borderRadius.borderRadius,
-    otpCellHeightPx(cellSize),
+    otpCellHeightPx(cellSize, hydrationTouch),
   );
   const isNumeric = type === "numeric";
   const cellBorder = hasError
@@ -734,6 +736,7 @@ export function OTPInput<
     ...fieldProps
   } = useProps(props);
 
+  const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
   const resolvedValidators = useResolvedValidators(
     fieldProps.required,
@@ -896,7 +899,7 @@ export function OTPInput<
     const cellSize = fieldProps.size || knobProps.sizeToken;
     const cellRadius = getOTPCellRadius(
       knobProps.borderRadius.borderRadius,
-      otpCellHeightPx(cellSize),
+      otpCellHeightPx(cellSize, hydrationTouch),
     );
     const cellGap = knobProps.gap.gap;
     const groups = otpGroupSizes(length, separator);