@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/cjs/fields/Geolocation/mapMath.native.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var mapMath_exports = {};
+__export(mapMath_exports, {
+  OSM_TILE_SIZE: () => OSM_TILE_SIZE,
+  latLngFromMapClick: () => latLngFromMapClick,
+  latToTile: () => latToTile,
+  lngToTile: () => lngToTile,
+  tileToLat: () => tileToLat,
+  tileToLng: () => tileToLng,
+  tilesForView: () => tilesForView,
+  wrapTileX: () => wrapTileX,
+  zoomFromDelta: () => zoomFromDelta
+});
+module.exports = __toCommonJS(mapMath_exports);
+var OSM_TILE_SIZE = 256;
+function zoomFromDelta(delta) {
+  var clamped = Math.min(Math.max(delta, 5e-4), 45);
+  return Math.max(1, Math.min(19, Math.round(Math.log2(360 / (clamped * 2)))));
+}
+function lngToTile(lng, zoom) {
+  return (lng + 180) / 360 * Math.pow(2, zoom);
+}
+function latToTile(lat, zoom) {
+  var clamped = Math.max(-85.05112878, Math.min(85.05112878, lat));
+  var rad = clamped * Math.PI / 180;
+  return (1 - Math.log(Math.tan(rad) + 1 / Math.cos(rad)) / Math.PI) / 2 * Math.pow(2, zoom);
+}
+function tileToLng(x, zoom) {
+  return x / Math.pow(2, zoom) * 360 - 180;
+}
+function tileToLat(y, zoom) {
+  var rad = Math.atan(Math.sinh(Math.PI * (1 - 2 * y / Math.pow(2, zoom))));
+  return rad * 180 / Math.PI;
+}
+function wrapTileX(x, zoom) {
+  var n = Math.pow(2, zoom);
+  return (x % n + n) % n;
+}
+function latLngFromMapClick(args) {
+  var {
+    offsetX,
+    offsetY,
+    width,
+    height,
+    lat,
+    lng,
+    zoom
+  } = args;
+  var worldX = lngToTile(lng, zoom) + (offsetX - width / 2) / OSM_TILE_SIZE;
+  var worldY = latToTile(lat, zoom) + (offsetY - height / 2) / OSM_TILE_SIZE;
+  return {
+    lat: tileToLat(worldY, zoom),
+    lng: tileToLng(worldX, zoom)
+  };
+}
+function tilesForView(args) {
+  var {
+    lat,
+    lng,
+    zoom,
+    width,
+    height
+  } = args;
+  if (width < 1 || height < 1) return [];
+  var n = Math.pow(2, zoom);
+  var cx = lngToTile(lng, zoom);
+  var cy = latToTile(lat, zoom);
+  var minTx = Math.floor(cx - width / 2 / OSM_TILE_SIZE);
+  var maxTx = Math.ceil(cx + width / 2 / OSM_TILE_SIZE);
+  var minTy = Math.max(0, Math.floor(cy - height / 2 / OSM_TILE_SIZE));
+  var maxTy = Math.min(n - 1, Math.ceil(cy + height / 2 / OSM_TILE_SIZE));
+  var tiles = [];
+  for (var ty = minTy; ty <= maxTy; ty++) {
+    for (var tx = minTx; tx <= maxTx; tx++) {
+      tiles.push({
+        tx: wrapTileX(tx, zoom),
+        ty,
+        left: (tx - cx) * OSM_TILE_SIZE + width / 2,
+        top: (ty - cy) * OSM_TILE_SIZE + height / 2
+      });
+    }
+  }
+  return tiles;
+}
+//# sourceMappingURL=mapMath.native.js.map

package/dist/cjs/fields/Geolocation/mapMath.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","mapMath_exports","__export","OSM_TILE_SIZE","latLngFromMapClick","latToTile","lngToTile","tileToLat","tileToLng","tilesForView","wrapTileX","zoomFromDelta","module","exports","delta","clamped","Math","min","max","round","log2","lng","zoom","pow","lat","rad","PI","log","tan","cos","x","y","atan","sinh","n","args","offsetX","offsetY","width","height","worldX","worldY","cx","cy","minTx","floor","maxTx","ceil","minTy","maxTy","tiles","ty","tx","push","left","top"],"sources":["../../../../src/fields/Geolocation/mapMath.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/fields/ImageField/index.cjs

@@ -26,75 +26,288 @@ __export(ImageField_exports, {
 });
 module.exports = __toCommonJS(ImageField_exports);
 var import_react = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const ImageContainer = (0, import_tamagui.styled)(import_tamagui.View, {
-  name: "ImageFieldContainer",
+const IMAGE_EXT = /\.(avif|bmp|gif|heic|heif|jpe?g|png|svg|webp)$/i;
+const CAPTION_MIN_EDGE = 56;
+const ImageFrame = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ImageFieldFrame",
   position: "relative",
   alignItems: "center",
   justifyContent: "center",
   overflow: "hidden",
-  variants: {
-    interactive: {
-      true: {
-        cursor: "pointer",
-        hoverStyle: {
-          opacity: 0.9
-        },
-        pressStyle: {
-          opacity: 0.8
-        }
-      },
-      false: {
-        cursor: "default"
-      }
-    },
-    hasImage: {
-      true: {
-        borderStyle: "solid",
-        borderWidth: 1,
-        borderColor: import_colorRamps.formCardColors.border.base
-      },
-      false: {
-        borderStyle: "dashed",
-        borderWidth: 1,
-        borderColor: import_colorRamps.formInputColors.border.base,
-        backgroundColor: import_colorRamps.formInputColors.background.base
-      }
-    },
-    disabledState: {
-      true: {
-        opacity: 0.5
-      },
-      false: {
-        opacity: 1
-      }
-    }
-  }
-});
-const RemoveButton = (0, import_tamagui.styled)(import_tamagui.View, {
-  name: "ImageFieldRemove",
-  position: "absolute",
-  top: -6,
-  insetInlineEnd: -6,
-  width: 18,
-  height: 18,
-  borderRadius: 1e3,
-  backgroundColor: import_colorRamps.formCommonColors.text,
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer",
-  zIndex: 1,
-  hoverStyle: {
-    backgroundColor: import_colorRamps.formCommonColors.error
+  outlineWidth: 0,
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0
   }
 });
+function isImageFile(file, accept) {
+  if (file.type.startsWith("image/")) return true;
+  if (IMAGE_EXT.test(file.name)) return true;
+  if (!accept) return false;
+  const accepted = accept.split(",").map(type => type.trim().toLowerCase());
+  const name = file.name.toLowerCase();
+  return accepted.some(type => {
+    if (type.startsWith(".")) return name.endsWith(type);
+    if (type.endsWith("/*")) return file.type.startsWith(type.slice(0, -1));
+    return file.type === type || file.type.match(type.replace("*", ".*"));
+  });
+}
+function ImageControl({
+  id,
+  label,
+  currentValue,
+  errorProp,
+  required,
+  disabled,
+  readOnly,
+  accept,
+  maxSize,
+  imageWidth,
+  imageHeight,
+  showRemove,
+  placeholder,
+  objectFit,
+  cappedRadius,
+  borderWidth,
+  outlined,
+  elevation,
+  transition,
+  body,
+  gap,
+  disabledSurface,
+  onChange,
+  onChangeProp,
+  onValueChange,
+  onInvalid,
+  blurHandler
+}) {
+  const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  const fieldA11y = (0, import_fieldLayout.useFieldA11y)();
+  const [previewUrl, setPreviewUrl] = (0, import_react2.useState)(null);
+  const [broken, setBroken] = (0, import_react2.useState)(false);
+  const [kbFrameFocus, setKbFrameFocus] = (0, import_react2.useState)(false);
+  const [isDragOver, setIsDragOver] = (0, import_react2.useState)(false);
+  const fileInputRef = (0, import_react2.useRef)(null);
+  const dragDepthRef = (0, import_react2.useRef)(0);
+  const canInteract = !disabled && !readOnly;
+  (0, import_react2.useEffect)(() => {
+    setBroken(false);
+    if (!(currentValue instanceof File) || !import_tamagui.isWeb) {
+      setPreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(currentValue);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [currentValue]);
+  const displayUrl = typeof currentValue === "string" && currentValue ? currentValue : currentValue instanceof File ? previewUrl : null;
+  const hasValue = currentValue instanceof File || typeof currentValue === "string" && !!currentValue;
+  const hasPreview = !!displayUrl && !broken;
+  const minEdge = Math.min(imageWidth, imageHeight);
+  const caption = placeholder === void 0 ? (0, import_t.t)("Add image") : placeholder;
+  const showCaption = Boolean(caption) && !hasPreview && (placeholder !== void 0 || minEdge >= CAPTION_MIN_EDGE);
+  const iconSize = Math.max(14, Math.min(32, Math.round(minEdge * 0.28)));
+  const emit = (0, import_react2.useCallback)(next => {
+    onInvalid?.(void 0);
+    onChange?.(next);
+    onChangeProp?.(next);
+    onValueChange?.(next);
+    blurHandler?.();
+  }, [onChange, onChangeProp, onValueChange, onInvalid, blurHandler]);
+  const validateFile = (0, import_react2.useCallback)(file => {
+    if (maxSize && file.size > maxSize) {
+      const sizeMB = (maxSize / 1024 / 1024).toFixed(1);
+      return (0, import_t.t)("Image must be less than {{size}}MB", {
+        size: sizeMB
+      });
+    }
+    if (!isImageFile(file, accept)) {
+      return (0, import_t.t)("File must be an image");
+    }
+    return null;
+  }, [maxSize, accept]);
+  const applyFile = (0, import_react2.useCallback)(file => {
+    const invalid = validateFile(file);
+    if (invalid) {
+      setBroken(false);
+      onInvalid?.(invalid);
+      return;
+    }
+    setBroken(false);
+    emit(file);
+  }, [validateFile, emit, onInvalid]);
+  const openFileDialog = (0, import_react2.useCallback)(() => {
+    if (!canInteract) return;
+    fileInputRef.current?.click();
+  }, [canInteract]);
+  const isInteractiveChild = (0, import_react2.useCallback)(e => {
+    const target = e.target;
+    const current = e.currentTarget;
+    if (!target?.closest || !current) return false;
+    const interactive = target.closest('button, a, input, select, textarea, [role="button"]');
+    return !!interactive && interactive !== current;
+  }, []);
+  const handleFramePress = (0, import_react2.useCallback)(e => {
+    if (isInteractiveChild(e)) return;
+    openFileDialog();
+  }, [isInteractiveChild, openFileDialog]);
+  const handleFrameKeyDown = (0, import_react2.useCallback)(e => {
+    if (e.target !== e.currentTarget) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault?.();
+      openFileDialog();
+    }
+  }, [openFileDialog]);
+  const handleRemove = (0, import_react2.useCallback)(e => {
+    e?.stopPropagation?.();
+    setBroken(false);
+    emit(null);
+  }, [emit]);
+  const handleDragEnter = (0, import_react2.useCallback)(e => {
+    e.preventDefault();
+    if (!canInteract) return;
+    dragDepthRef.current += 1;
+    setIsDragOver(true);
+  }, [canInteract]);
+  const handleDragOver = (0, import_react2.useCallback)(e => {
+    e.preventDefault();
+  }, []);
+  const handleDragLeave = (0, import_react2.useCallback)(e => {
+    e.preventDefault();
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+    if (dragDepthRef.current === 0) setIsDragOver(false);
+  }, []);
+  const handleDrop = (0, import_react2.useCallback)(e => {
+    e.preventDefault();
+    dragDepthRef.current = 0;
+    setIsDragOver(false);
+    if (!canInteract) return;
+    const file = e.dataTransfer.files?.[0];
+    if (file) applyFile(file);
+  }, [canInteract, applyFile]);
+  const frameBorderWidth = isDragOver && canInteract ? Math.max(borderWidth, 2) : borderWidth;
+  const frameBorderColor = errorProp || isDragOver && canInteract ? errorProp ? import_colorRamps.formCommonColors.error : import_colorRamps.formCommonColors.text : import_colorRamps.formInputColors.border.base;
+  const altText = typeof label === "string" && label ? label : fieldA11y?.label || (0, import_t.t)("Selected image");
+  const emptyName = typeof label === "string" && label ? (0, import_t.t)("{{label}}: add image", {
+    label
+  }) : (0, import_t.t)("Add image");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    alignItems: "flex-start",
+    ...(gap ?? {
+      gap: "$2"
+    }),
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(ImageFrame, {
+      id,
+      width: imageWidth,
+      height: imageHeight,
+      borderRadius: cappedRadius,
+      borderStyle: hasPreview ? "solid" : "dashed",
+      borderWidth: frameBorderWidth,
+      borderColor: frameBorderColor,
+      backgroundColor: outlined || hasPreview ? "transparent" : import_colorRamps.formInputColors.background.base,
+      elevation,
+      transition,
+      ...(disabled ? disabledSurface : void 0),
+      "aria-required": required || void 0,
+      "aria-invalid": !!errorProp || void 0,
+      "aria-readonly": readOnly || void 0,
+      "aria-disabled": disabled || void 0,
+      "aria-describedby": describedBy,
+      ...(!import_tamagui.isWeb ? {
+        accessibilityRole: canInteract ? "button" : void 0,
+        accessibilityLabel: fieldA11y?.label ?? (typeof label === "string" ? label : emptyName),
+        accessibilityHint: fieldA11y?.description,
+        accessibilityState: {
+          disabled: !!disabled
+        }
+      } : {}),
+      ...(kbFrameFocus ? (0, import_theme.ensureFocusVisibleRing)({
+        outlineOffset: -2
+      }) : void 0),
+      ...(canInteract ? {
+        role: "button",
+        tabIndex: 0,
+        cursor: "pointer",
+        onFocus: () => {
+          if ((0, import_theme.wasKeyboardFocus)()) setKbFrameFocus(true);
+        },
+        onBlur: () => setKbFrameFocus(false),
+        ...(label && id ? null : {
+          "aria-label": emptyName
+        }),
+        onPress: handleFramePress,
+        onKeyDown: handleFrameKeyDown,
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop
+      } : {}),
+      children: [hasPreview ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
+        src: displayUrl,
+        alt: altText,
+        width: imageWidth,
+        height: imageHeight,
+        objectFit,
+        onError: () => setBroken(true)
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "$1",
+        padding: "$1",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ImageSquareIcon, {
+          size: iconSize,
+          color: "var(--color11)"
+        }), showCaption ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...body,
+          color: import_colorRamps.formCommonColors.muted,
+          textAlign: "center",
+          numberOfLines: 2,
+          children: hasValue && broken ? (0, import_t.t)("Image failed to load") : caption
+        }) : hasValue && broken ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: import_colorRamps.formCommonColors.muted,
+          textAlign: "center",
+          fontSize: "$1",
+          children: (0, import_t.t)("Image failed to load")
+        }) : null]
+      }), import_tamagui.isWeb && /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept,
+        tabIndex: -1,
+        "aria-hidden": true,
+        onChange: e => {
+          const files = e.target.files;
+          e.target.value = "";
+          if (!files || files.length === 0) return;
+          applyFile(files[0]);
+        },
+        style: {
+          display: "none"
+        },
+        disabled: !canInteract
+      })]
+    }), showRemove && hasValue && canInteract && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      chromeless: true,
+      size: "$2",
+      icon: import_react.XIcon,
+      "aria-label": (0, import_t.t)("Remove image"),
+      onPress: () => handleRemove(),
+      children: (0, import_t.t)("Remove")
+    })]
+  });
+}
 function ImageField({
   name,
   form: formProp,
@@ -119,12 +332,14 @@ function ImageField({
   imageHeight = 48,
   showRemove = true,
   placeholder,
+  objectFit = "cover",
   skeleton,
   compact
 }) {
   const {
     resolvedForm,
     knobProps,
+    disabledState,
     id
   } = (0, import_utils.useFormField)({
     form: formProp,
@@ -133,60 +348,7 @@ function ImageField({
   });
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
   const cappedRadius = (0, import_utils.clampRadiusForControl)(knobProps.borderRadius.borderRadius, 6);
-  const [previewUrl, setPreviewUrl] = (0, import_react2.useState)(null);
   const [validationError, setValidationError] = (0, import_react2.useState)();
-  const fileInputRef = (0, import_react2.useRef)(null);
-  const resolvedValue = value !== void 0 ? value : defaultValue;
-  (0, import_react2.useEffect)(() => {
-    if (!(resolvedValue instanceof File) || !import_tamagui.isWeb) {
-      setPreviewUrl(null);
-      return;
-    }
-    const url = URL.createObjectURL(resolvedValue);
-    setPreviewUrl(url);
-    return () => URL.revokeObjectURL(url);
-  }, [resolvedValue]);
-  const getDisplayUrl = (0, import_react2.useCallback)(val => {
-    if (!val) return null;
-    if (typeof val === "string") return val;
-    if (val instanceof File) return previewUrl;
-    return null;
-  }, [previewUrl]);
-  const validateFile = (0, import_react2.useCallback)(file => {
-    if (maxSize && file.size > maxSize) {
-      const sizeMB = (maxSize / 1024 / 1024).toFixed(1);
-      return `Image must be less than ${sizeMB}MB`;
-    }
-    if (!file.type.startsWith("image/")) {
-      return "File must be an image";
-    }
-    return null;
-  }, [maxSize]);
-  const handleFileSelect = (0, import_react2.useCallback)((files, onChange, blurHandler) => {
-    if (!files || files.length === 0) return;
-    const file = files[0];
-    const validationError2 = validateFile(file);
-    if (validationError2) {
-      setValidationError(validationError2);
-      return;
-    }
-    setValidationError(void 0);
-    onChange?.(file);
-    onChangeProp?.(file);
-    onValueChange?.(file);
-    blurHandler?.();
-  }, [validateFile, onChangeProp, onValueChange]);
-  const handleRemove = (0, import_react2.useCallback)((e, onChange, blurHandler) => {
-    e.stopPropagation();
-    onChange?.(null);
-    onChangeProp?.(null);
-    onValueChange?.(null);
-    blurHandler?.();
-  }, [onChangeProp, onValueChange]);
-  const openFileDialog = (0, import_react2.useCallback)(() => {
-    if (disabled || readOnly) return;
-    fileInputRef.current?.click();
-  }, [disabled, readOnly]);
   if (skeleton) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
@@ -200,62 +362,30 @@ function ImageField({
       })
     });
   }
-  const canInteract = !disabled && !readOnly;
-  const renderImageField = (currentValue, errorProp, onChange, blurHandler) => {
-    const displayUrl = getDisplayUrl(currentValue);
-    const hasImage = !!displayUrl;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ImageContainer, {
-      width: imageWidth,
-      height: imageHeight,
-      borderRadius: cappedRadius,
-      interactive: canInteract,
-      hasImage,
-      disabledState: !!disabled,
-      onPress: canInteract ? openFileDialog : void 0,
-      ...(errorProp ? {
-        borderColor: import_colorRamps.formCommonColors.error
-      } : void 0),
-      "aria-required": required || void 0,
-      "aria-invalid": !!errorProp || void 0,
-      "aria-readonly": readOnly || void 0,
-      children: [hasImage ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
-          src: displayUrl,
-          alt: typeof label === "string" && label ? label : (0, import_t.t)("Selected image"),
-          width: imageWidth,
-          height: imageHeight,
-          objectFit: "cover"
-        }), showRemove && canInteract && /* @__PURE__ */(0, import_jsx_runtime.jsx)(RemoveButton, {
-          onPress: e => handleRemove(e, onChange, blurHandler),
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-            size: 10,
-            color: "var(--color1)"
-          })
-        })]
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "$1",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ImageIcon, {
-          size: 16,
-          color: "var(--color10)"
-        }), placeholder && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$1",
-          color: import_colorRamps.formCommonColors.muted,
-          textAlign: "center",
-          children: placeholder
-        })]
-      }), import_tamagui.isWeb && /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
-        ref: fileInputRef,
-        type: "file",
-        accept,
-        onChange: e => handleFileSelect(e.target.files, onChange, blurHandler),
-        style: {
-          display: "none"
-        },
-        disabled: !canInteract
-      })]
-    });
+  const controlProps = {
+    id,
+    label,
+    required,
+    disabled,
+    readOnly,
+    accept,
+    maxSize,
+    imageWidth,
+    imageHeight,
+    showRemove,
+    placeholder,
+    objectFit,
+    cappedRadius,
+    borderWidth: knobProps.borderRadius.borderWidth ?? 1,
+    outlined: knobProps.outlined,
+    elevation: knobProps.elevation,
+    transition: knobProps.transition,
+    body: knobProps.body,
+    gap: knobProps.gap,
+    disabledSurface: disabled ? disabledState.surfaceKnobProps : void 0,
+    onChangeProp,
+    onValueChange,
+    onInvalid: setValidationError
   };
   if (!resolvedForm || !name) {
     const standaloneError = error ?? validationError;
@@ -269,7 +399,11 @@ function ImageField({
       size,
       knobProps,
       disabled,
-      children: renderImageField(value ?? defaultValue, standaloneError, void 0)
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ImageControl, {
+        ...controlProps,
+        currentValue: value ?? defaultValue,
+        errorProp: standaloneError
+      })
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
@@ -291,9 +425,13 @@ function ImageField({
         size,
         knobProps,
         disabled,
-        children: renderImageField(value !== void 0 ? value : fieldValue, resolvedError, val => {
-          field.handleChange(val);
-        }, blurHandler)
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ImageControl, {
+          ...controlProps,
+          currentValue: value !== void 0 ? value : fieldValue,
+          errorProp: resolvedError,
+          onChange: val => field.handleChange(val),
+          blurHandler
+        })
       });
     }
   });