@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/cjs/fields/Input/index.cjs

@@ -26,25 +26,25 @@ __export(Input_exports, {
 });
 module.exports = __toCommonJS(Input_exports);
 var import_react = require("react");
+var import_react2 = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldDefaults = require("../../fieldDefaults.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
 var import_LinkCell = require("../../utils/LinkCell.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const suppressBoxFocusRing = {
-  focused: false,
-  setFocused: _val => {}
-};
 function Input({
   name,
   form: formProp,
   validators,
   label,
   labelProps,
+  labelHidden,
+  "aria-label": ariaLabel,
   helperText,
   error,
   required,
@@ -87,51 +87,78 @@ function Input({
   });
   const inputRef = (0, import_react.useRef)(null);
   const focusTrigger = (0, import_InputParts.useForwardFocus)(inputRef);
-  const areaFocusRing = (0, import_theme.ensureFocusVisibleRing)({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2
-  });
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
   const purposeInputProps = (0, import_fieldDefaults.resolveFieldInputProps)(purpose, autoComplete);
+  const resolvedSize = size ?? knobProps.sizeToken;
+  const visualHeight = (0, import_utils.getFieldHeight)(resolvedSize);
+  const belowFloor = visualHeight < import_theme.MIN_PRESS_TARGET;
+  const visibleLabel = labelHidden ? void 0 : label;
+  const resolvedAriaLabel = ariaLabel ?? (labelHidden && typeof label === "string" ? label : void 0);
+  const boxContract = {
+    size: resolvedSize,
+    "data-density": knobProps.density,
+    "data-size": String(resolvedSize),
+    "data-visual-height": String(visualHeight),
+    "data-press-floor": belowFloor ? "slop" : "box",
+    "data-ring-target": "box",
+    ...(belowFloor ? {
+      hitSlop: (0, import_theme.pressTargetHitSlop)(visualHeight)
+    } : void 0)
+  };
+  const chromelessProps = chromeless ? {
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    hoverStyle: {
+      borderColor: "transparent",
+      ...control.hoverKnobProps
+    },
+    focusStyle: {
+      borderColor: "transparent",
+      ...control.focusKnobProps
+    }
+  } : void 0;
+  const layoutBind = {
+    id,
+    label: visibleLabel,
+    labelProps,
+    helperText,
+    required,
+    disabled,
+    size: resolvedSize,
+    knobProps,
+    purpose,
+    autoComplete,
+    placeholder,
+    "aria-label": resolvedAriaLabel
+  };
+  const areaName = visibleLabel || !resolvedAriaLabel ? void 0 : {
+    "aria-label": resolvedAriaLabel
+  };
   if (skeleton) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
-      size: size || knobProps.sizeToken,
-      children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-        variant: "text",
-        width: "30%",
-        height: 14
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-        variant: "rounded",
-        width: "100%",
-        height: knobProps.sizeToken
-      })]
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      ...layoutBind,
+      error,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: resolvedSize,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: visualHeight
+        })
+      })
     });
   }
   if (children) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-      size: size || knobProps.sizeToken,
+      size: resolvedSize,
       ...(error ? {
         theme: "red"
       } : void 0),
       children
     });
   }
-  const chromelessProps = chromeless ? {
-    borderWidth: 0,
-    backgroundColor: "transparent",
-    hoverStyle: {
-      borderColor: "transparent"
-    },
-    focusStyle: {
-      borderColor: "transparent",
-      ...(0, import_theme.ensureFocusVisibleRing)()
-    },
-    focusVisibleStyle: {
-      borderColor: "transparent",
-      ...(0, import_theme.ensureFocusVisibleRing)()
-    }
-  } : void 0;
   const renderInputBox = (inputValue, handleChange, handleBlur, hasError) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+    ...boxContract,
     ...(handleBlur ? {
       onBlur: handleBlur
     } : void 0),
@@ -149,93 +176,87 @@ function Input({
         "aria-readonly": "true",
         "aria-required": required || void 0,
         "aria-invalid": hasError || void 0,
+        ...areaName,
         color: "$color",
         children: inputValue ?? ""
       })
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
-      ...suppressBoxFocusRing,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-        ref: inputRef,
-        value: inputValue ?? "",
-        readOnly: true,
-        id,
-        focusStyle: areaFocusRing,
-        focusVisibleStyle: areaFocusRing,
-        "aria-readonly": "true",
-        "aria-required": required || void 0,
-        "aria-invalid": hasError || void 0
-      })
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
-      ...suppressBoxFocusRing,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-        ref: inputRef,
-        ...(purposeInputProps.inputMode !== void 0 ? {
-          inputMode: purposeInputProps.inputMode
-        } : void 0),
-        ...(purposeInputProps.keyboardType !== void 0 ? {
-          keyboardType: purposeInputProps.keyboardType
-        } : void 0),
-        ...(purposeInputProps.autoComplete !== void 0 ? {
-          autoComplete: purposeInputProps.autoComplete
-        } : void 0),
-        focusStyle: areaFocusRing,
-        focusVisibleStyle: areaFocusRing,
-        ...inputProps,
-        ...(multiline !== void 0 ? {
-          multiline
-        } : void 0),
-        ...(maxLength !== void 0 ? {
-          maxLength
-        } : void 0),
-        ...(keyboardType !== void 0 ? {
-          keyboardType
-        } : void 0),
-        ...(textContentType !== void 0 ? {
-          textContentType
-        } : void 0),
-        ...(autoComplete !== void 0 ? {
-          autoComplete
-        } : void 0),
-        ...(secureTextEntry !== void 0 ? {
-          secureTextEntry
-        } : void 0),
-        ...(placeholder !== void 0 ? {
-          placeholder
-        } : void 0),
-        disabled,
-        id,
-        defaultValue: inputValue,
-        "aria-required": required || void 0,
-        "aria-invalid": hasError || void 0,
-        onChange,
-        onChangeText: text => {
-          if (disabled) return;
-          handleChange?.(text);
-          onChangeText?.(text);
-        }
-      })
-    }), rightIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+      ref: inputRef,
+      value: inputValue ?? "",
+      readOnly: true,
+      id,
+      "aria-readonly": "true",
+      "aria-required": required || void 0,
+      "aria-invalid": hasError || void 0,
+      ...areaName
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+      ref: inputRef,
+      ...(purposeInputProps.inputMode !== void 0 ? {
+        inputMode: purposeInputProps.inputMode
+      } : void 0),
+      ...(purposeInputProps.keyboardType !== void 0 ? {
+        keyboardType: purposeInputProps.keyboardType
+      } : void 0),
+      ...(purposeInputProps.autoComplete !== void 0 ? {
+        autoComplete: purposeInputProps.autoComplete
+      } : void 0),
+      ...inputProps,
+      ...(multiline !== void 0 ? {
+        multiline
+      } : void 0),
+      ...(maxLength !== void 0 ? {
+        maxLength
+      } : void 0),
+      ...(keyboardType !== void 0 ? {
+        keyboardType
+      } : void 0),
+      ...(textContentType !== void 0 ? {
+        textContentType
+      } : void 0),
+      ...(autoComplete !== void 0 ? {
+        autoComplete
+      } : void 0),
+      ...(secureTextEntry !== void 0 ? {
+        secureTextEntry
+      } : void 0),
+      ...(placeholder !== void 0 ? {
+        placeholder
+      } : void 0),
+      disabled,
+      id,
+      defaultValue: inputValue,
+      "aria-required": required || void 0,
+      "aria-invalid": hasError || void 0,
+      ...areaName,
+      onChange,
+      onChangeText: text => {
+        if (disabled) return;
+        handleChange?.(text);
+        onChangeText?.(text);
+      }
+    }), rightIcon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
       adornment: "trailing",
       ...(rightIconInteractive ? void 0 : focusTrigger),
       children: rightIcon
-    })]
+    }) : hasError ?
+    // M3 / Polaris / Spectrum: in-field error glyph (color is not the
+    // only channel). Omitted when the consumer owns the trailing slot.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+      adornment: "trailing",
+      color: import_colorRamps.formCommonColors.error,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.WarningCircleIcon, {
+        "aria-hidden": true
+      })
+    }) : null]
   });
   if (!resolvedForm || !name) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-      id,
-      label,
-      labelProps,
+      ...layoutBind,
       error,
-      helperText,
-      required,
-      disabled,
-      size,
-      knobProps,
       onBlur,
-      purpose,
-      autoComplete,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-        size: size || knobProps.sizeToken,
+        size: resolvedSize,
         children: renderInputBox(value ?? defaultValue, void 0, void 0, !!error)
       })
     });
@@ -248,20 +269,11 @@ function Input({
     children: field => {
       const resolvedError = (0, import_utils.getFieldError)(field, error);
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-        id,
-        label,
-        labelProps,
+        ...layoutBind,
         error: resolvedError,
-        helperText,
-        required,
-        disabled,
-        size,
-        knobProps,
         onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
-        purpose,
-        autoComplete,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-          size: size || knobProps.sizeToken,
+          size: resolvedSize,
           children: renderInputBox(field.state.value, text => field.handleChange(text), void 0, !!resolvedError)
         })
       });

package/dist/cjs/fields/Input/index.native.js

@@ -29,18 +29,16 @@ __export(Input_exports, {
 module.exports = __toCommonJS(Input_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_react2 = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_fieldDefaults = require("../../fieldDefaults.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_utils = require("../../shared/utils.native.js");
 var import_InputParts = require("../../InputParts/index.native.js");
 var import_LinkCell = require("../../utils/LinkCell.native.js");
-var suppressBoxFocusRing = {
-  focused: false,
-  setFocused: function setFocused(_val) {}
-};
 function Input(param) {
   var {
     name,
@@ -48,6 +46,8 @@ function Input(param) {
     validators,
     label,
     labelProps,
+    labelHidden,
+    "aria-label": ariaLabel,
     helperText,
     error,
     required,
@@ -90,52 +90,79 @@ function Input(param) {
   });
   var inputRef = (0, import_react.useRef)(null);
   var focusTrigger = (0, import_InputParts.useForwardFocus)(inputRef);
-  var areaFocusRing = (0, import_theme.ensureFocusVisibleRing)({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2
-  });
   var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
   var purposeInputProps = (0, import_fieldDefaults.resolveFieldInputProps)(purpose, autoComplete);
+  var resolvedSize = size !== null && size !== void 0 ? size : knobProps.sizeToken;
+  var visualHeight = (0, import_utils.getFieldHeight)(resolvedSize);
+  var belowFloor = visualHeight < import_theme.MIN_PRESS_TARGET;
+  var visibleLabel = labelHidden ? void 0 : label;
+  var resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labelHidden && typeof label === "string" ? label : void 0;
+  var boxContract = {
+    size: resolvedSize,
+    "data-density": knobProps.density,
+    "data-size": String(resolvedSize),
+    "data-visual-height": String(visualHeight),
+    "data-press-floor": belowFloor ? "slop" : "box",
+    "data-ring-target": "box",
+    ...(belowFloor ? {
+      hitSlop: (0, import_theme.pressTargetHitSlop)(visualHeight)
+    } : void 0)
+  };
+  var chromelessProps = chromeless ? {
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    hoverStyle: {
+      borderColor: "transparent",
+      ...control.hoverKnobProps
+    },
+    focusStyle: {
+      borderColor: "transparent",
+      ...control.focusKnobProps
+    }
+  } : void 0;
+  var layoutBind = {
+    id,
+    label: visibleLabel,
+    labelProps,
+    helperText,
+    required,
+    disabled,
+    size: resolvedSize,
+    knobProps,
+    purpose,
+    autoComplete,
+    placeholder,
+    "aria-label": resolvedAriaLabel
+  };
+  var areaName = visibleLabel || !resolvedAriaLabel ? void 0 : {
+    "aria-label": resolvedAriaLabel
+  };
   if (skeleton) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
-      size: size || knobProps.sizeToken,
-      children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-        variant: "text",
-        width: "30%",
-        height: 14
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-        variant: "rounded",
-        width: "100%",
-        height: knobProps.sizeToken
-      })]
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      ...layoutBind,
+      error,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: resolvedSize,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          variant: "rounded",
+          width: "100%",
+          height: visualHeight
+        })
+      })
     });
   }
   if (children) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-      size: size || knobProps.sizeToken,
+      size: resolvedSize,
       ...(error ? {
         theme: "red"
       } : void 0),
       children
     });
   }
-  var chromelessProps = chromeless ? {
-    borderWidth: 0,
-    backgroundColor: "transparent",
-    hoverStyle: {
-      borderColor: "transparent"
-    },
-    focusStyle: {
-      borderColor: "transparent",
-      ...(0, import_theme.ensureFocusVisibleRing)()
-    },
-    focusVisibleStyle: {
-      borderColor: "transparent",
-      ...(0, import_theme.ensureFocusVisibleRing)()
-    }
-  } : void 0;
   var renderInputBox = function renderInputBox2(inputValue, handleChange, handleBlur, hasError) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+      ...boxContract,
       ...(handleBlur ? {
         onBlur: handleBlur
       } : void 0),
@@ -155,94 +182,88 @@ function Input(param) {
           "aria-readonly": "true",
           "aria-required": required || void 0,
           "aria-invalid": hasError || void 0,
+          ...areaName,
           color: "$color",
           children: inputValue !== null && inputValue !== void 0 ? inputValue : ""
         })
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
-        ...suppressBoxFocusRing,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-          ref: inputRef,
-          value: inputValue !== null && inputValue !== void 0 ? inputValue : "",
-          readOnly: true,
-          id,
-          focusStyle: areaFocusRing,
-          focusVisibleStyle: areaFocusRing,
-          "aria-readonly": "true",
-          "aria-required": required || void 0,
-          "aria-invalid": hasError || void 0
-        })
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
-        ...suppressBoxFocusRing,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-          ref: inputRef,
-          ...(purposeInputProps.inputMode !== void 0 ? {
-            inputMode: purposeInputProps.inputMode
-          } : void 0),
-          ...(purposeInputProps.keyboardType !== void 0 ? {
-            keyboardType: purposeInputProps.keyboardType
-          } : void 0),
-          ...(purposeInputProps.autoComplete !== void 0 ? {
-            autoComplete: purposeInputProps.autoComplete
-          } : void 0),
-          focusStyle: areaFocusRing,
-          focusVisibleStyle: areaFocusRing,
-          ...inputProps,
-          ...(multiline !== void 0 ? {
-            multiline
-          } : void 0),
-          ...(maxLength !== void 0 ? {
-            maxLength
-          } : void 0),
-          ...(keyboardType !== void 0 ? {
-            keyboardType
-          } : void 0),
-          ...(textContentType !== void 0 ? {
-            textContentType
-          } : void 0),
-          ...(autoComplete !== void 0 ? {
-            autoComplete
-          } : void 0),
-          ...(secureTextEntry !== void 0 ? {
-            secureTextEntry
-          } : void 0),
-          ...(placeholder !== void 0 ? {
-            placeholder
-          } : void 0),
-          disabled,
-          id,
-          defaultValue: inputValue,
-          "aria-required": required || void 0,
-          "aria-invalid": hasError || void 0,
-          onChange,
-          onChangeText: function onChangeText1(text) {
-            if (disabled) return;
-            handleChange === null || handleChange === void 0 ? void 0 : handleChange(text);
-            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
-          }
-        })
-      }), rightIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+        ref: inputRef,
+        value: inputValue !== null && inputValue !== void 0 ? inputValue : "",
+        readOnly: true,
+        id,
+        "aria-readonly": "true",
+        "aria-required": required || void 0,
+        "aria-invalid": hasError || void 0,
+        ...areaName
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+        ref: inputRef,
+        ...(purposeInputProps.inputMode !== void 0 ? {
+          inputMode: purposeInputProps.inputMode
+        } : void 0),
+        ...(purposeInputProps.keyboardType !== void 0 ? {
+          keyboardType: purposeInputProps.keyboardType
+        } : void 0),
+        ...(purposeInputProps.autoComplete !== void 0 ? {
+          autoComplete: purposeInputProps.autoComplete
+        } : void 0),
+        ...inputProps,
+        ...(multiline !== void 0 ? {
+          multiline
+        } : void 0),
+        ...(maxLength !== void 0 ? {
+          maxLength
+        } : void 0),
+        ...(keyboardType !== void 0 ? {
+          keyboardType
+        } : void 0),
+        ...(textContentType !== void 0 ? {
+          textContentType
+        } : void 0),
+        ...(autoComplete !== void 0 ? {
+          autoComplete
+        } : void 0),
+        ...(secureTextEntry !== void 0 ? {
+          secureTextEntry
+        } : void 0),
+        ...(placeholder !== void 0 ? {
+          placeholder
+        } : void 0),
+        disabled,
+        id,
+        defaultValue: inputValue,
+        "aria-required": required || void 0,
+        "aria-invalid": hasError || void 0,
+        ...areaName,
+        onChange,
+        onChangeText: function onChangeText1(text) {
+          if (disabled) return;
+          handleChange === null || handleChange === void 0 ? void 0 : handleChange(text);
+          onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
+        }
+      }), rightIcon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
         adornment: "trailing",
         ...(rightIconInteractive ? void 0 : focusTrigger),
         children: rightIcon
-      })]
+      }) : hasError ?
+      // M3 / Polaris / Spectrum: in-field error glyph (color is not the
+      // only channel). Omitted when the consumer owns the trailing slot.
+      /* @__PURE__ */
+      (0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+        adornment: "trailing",
+        color: import_colorRamps.formCommonColors.error,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.WarningCircleIcon, {
+          "aria-hidden": true
+        })
+      }) : null]
     });
   };
   if (!resolvedForm || !name) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-      id,
-      label,
-      labelProps,
+      ...layoutBind,
       error,
-      helperText,
-      required,
-      disabled,
-      size,
-      knobProps,
       onBlur,
-      purpose,
-      autoComplete,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-        size: size || knobProps.sizeToken,
+        size: resolvedSize,
         children: renderInputBox(value !== null && value !== void 0 ? value : defaultValue, void 0, void 0, !!error)
       })
     });
@@ -255,20 +276,11 @@ function Input(param) {
     children: function children2(field) {
       var resolvedError = (0, import_utils.getFieldError)(field, error);
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
-        id,
-        label,
-        labelProps,
+        ...layoutBind,
         error: resolvedError,
-        helperText,
-        required,
-        disabled,
-        size,
-        knobProps,
         onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
-        purpose,
-        autoComplete,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-          size: size || knobProps.sizeToken,
+          size: resolvedSize,
           children: renderInputBox(field.state.value, function (text) {
             return field.handleChange(text);
           }, void 0, !!resolvedError)