@multiplatform.one/forms 7.4.1 → 7.5.0

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

@@ -0,0 +1,398 @@
+"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 Icon_exports = {};
+__export(Icon_exports, {
+  DRAWN_ICON_NAMES: () => import_drawnSet2.DRAWN_ICON_NAMES,
+  DrawnIcon: () => import_drawnSet2.DrawnIcon,
+  Icon: () => Icon,
+  filterDrawnIcons: () => import_drawnSet2.filterDrawnIcons,
+  isDrawnIconName: () => import_drawnSet2.isDrawnIconName,
+  parseIconOptions: () => import_drawnSet2.parseIconOptions,
+  resolveIconCatalog: () => import_drawnSet2.resolveIconCatalog
+});
+module.exports = __toCommonJS(Icon_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_fieldLayout = require("../../fieldLayout.native.js");
+var import_InputParts = require("../../InputParts/index.native.js");
+var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
+var import_Skeleton = require("../../Skeleton/index.native.js");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_tableCellContext = require("../../shared/tableCellContext.native.js");
+var import_utils = require("../../shared/utils.native.js");
+var import_t = require("../../shared/t.native.js");
+var import_drawnSet = require("./drawnSet.native.js");
+var import_drawnSet2 = require("./drawnSet.native.js");
+var adornmentRing = (0, import_theme.ensureFocusVisibleRing)({
+  outlineOffset: -2
+});
+var NESTED_GLYPH_WELL = 32;
+function EmptyGlyphWell() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    testID: "icon-empty-well",
+    width: 16,
+    height: 16,
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: "$borderColor",
+    borderRadius: 3
+  });
+}
+function IconControl(param) {
+  var {
+    value,
+    placeholder,
+    disabled,
+    readOnly,
+    hasError,
+    required,
+    id,
+    hasLabel,
+    a11yLabel,
+    helperText,
+    catalog,
+    onValueChange,
+    onBlurControl
+  } = param;
+  var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [open, setOpen] = (0, import_react.useState)(false);
+  var [query, setQuery] = (0, import_react.useState)("");
+  var drawn = (0, import_drawnSet.isDrawnIconName)(value) ? value : void 0;
+  var matches = (0, import_react.useMemo)(function () {
+    return (0, import_drawnSet.filterDrawnIcons)(catalog, query);
+  }, [catalog, query]);
+  var closePanel = (0, import_react.useCallback)(function () {
+    setOpen(false);
+    setQuery("");
+    onBlurControl === null || onBlurControl === void 0 ? void 0 : onBlurControl();
+  }, [onBlurControl]);
+  var handlePick = (0, import_react.useCallback)(function (name) {
+    onValueChange(name);
+    closePanel();
+  }, [closePanel, onValueChange]);
+  var handleClear = (0, import_react.useCallback)(function () {
+    onValueChange("");
+    setQuery("");
+  }, [onValueChange]);
+  var handleOpenChange = (0, import_react.useCallback)(function (next) {
+    if (disabled || readOnly) return;
+    if (next) {
+      setOpen(true);
+      return;
+    }
+    closePanel();
+  }, [closePanel, disabled, readOnly]);
+  if (readOnly) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      testID: "icon-field-readonly",
+      width: NESTED_GLYPH_WELL,
+      height: NESTED_GLYPH_WELL,
+      alignItems: "center",
+      justifyContent: "center",
+      children: drawn ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_drawnSet.DrawnIcon, {
+        name: drawn,
+        size: 16
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(EmptyGlyphWell, {})
+    });
+  }
+  var displayValue = open ? query : drawn ? drawn : value;
+  var showClear = Boolean(value) && !disabled;
+  var trigger = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+      cursor: "pointer",
+      onPress: import_tamagui.isWeb && !disabled ? function () {
+        return setOpen(true);
+      } : void 0,
+      size: knobProps.sizeToken,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+        testID: "icon-field",
+        theme: hasError ? "red" : void 0,
+        disabled,
+        ...(disabled ? {
+          opacity: 0.5,
+          pointerEvents: "none"
+        } : void 0),
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+          adornment: "leading",
+          children: drawn ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_drawnSet.DrawnIcon, {
+            name: drawn,
+            size: 16
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(EmptyGlyphWell, {})
+        }), !inTableCell && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+          id,
+          value: displayValue,
+          placeholder,
+          fontFamily: "$mono",
+          readOnly: !open,
+          disabled,
+          "aria-expanded": open,
+          "aria-haspopup": "listbox",
+          "aria-controls": open ? `${id !== null && id !== void 0 ? id : "icon"}-listbox` : void 0,
+          "aria-label": hasLabel ? void 0 : (0, import_t.t)("Icon"),
+          "aria-required": required || void 0,
+          "aria-invalid": hasError || void 0,
+          autoComplete: "off",
+          autoCapitalize: "none",
+          spellCheck: false,
+          onChangeText: open ? setQuery : void 0,
+          onFocus: function onFocus() {
+            if (!disabled) setOpen(true);
+          }
+        }), showClear ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+          tabIndex: 0,
+          "aria-label": (0, import_t.t)("Clear icon"),
+          disabled,
+          focusVisibleStyle: adornmentRing,
+          onPress: function onPress(e) {
+            e.stopPropagation();
+            handleClear();
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_drawnSet.DrawnIcon, {
+              name: "x",
+              size: 16
+            })
+          })
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+          adornment: "trailing",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_drawnSet.DrawnIcon, {
+            name: "chev-d",
+            size: 16
+          })
+        })]
+      })
+    })
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+    open,
+    onOpenChange: handleOpenChange,
+    trigger,
+    disabled,
+    scrollable: true,
+    sizing: "fill",
+    triggerA11y: {
+      label: a11yLabel || (0, import_t.t)("Icon"),
+      value: value || placeholder,
+      hint: helperText
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      testID: "icon-panel",
+      id: `${id !== null && id !== void 0 ? id : "icon"}-listbox`,
+      ...{
+        role: "listbox"
+      },
+      "aria-label": (0, import_t.t)("Icons"),
+      padding: "$2",
+      children: matches.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        testID: "icon-no-results",
+        color: import_colorRamps.formCommonColors.muted,
+        fontSize: "$3",
+        textAlign: "center",
+        padding: "$4",
+        children: (0, import_t.t)('No icon matches "{{query}}"', {
+          query
+        })
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        flexWrap: "wrap",
+        children: matches.map(function (name) {
+          var selected = name === value;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            role: "option",
+            "aria-selected": selected,
+            testID: `icon-option-${name}`,
+            width: "33.333%",
+            padding: "$1",
+            cursor: "pointer",
+            onPress: function onPress() {
+              return handlePick(name);
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+              height: 60,
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "$1",
+              borderRadius: "$3",
+              backgroundColor: selected ? "$color3" : "transparent",
+              hoverStyle: {
+                backgroundColor: "$color3"
+              },
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_drawnSet.DrawnIcon, {
+                name,
+                size: 16
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontFamily: "$mono",
+                fontSize: 11,
+                color: "$color10",
+                numberOfLines: 1,
+                children: name
+              })]
+            })
+          }, name);
+        })
+      })
+    })
+  });
+}
+function Icon(props) {
+  var {
+    defaultValue,
+    form,
+    placeholder = (0, import_t.t)("Choose an icon"),
+    mode,
+    name,
+    preserveValue,
+    validators,
+    disabled,
+    readOnly,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    onBlur,
+    value: controlledValue,
+    onChange,
+    onValueChange,
+    skeleton,
+    compact,
+    id: idProp,
+    icons,
+    options
+  } = (0, import_tamagui.useProps)(props);
+  var catalog = (0, import_react.useMemo)(function () {
+    return (0, import_drawnSet.resolveIconCatalog)(icons !== null && icons !== void 0 ? icons : (0, import_drawnSet.parseIconOptions)(options));
+  }, [icons, options]);
+  var emitValueChange = (0, import_react.useCallback)(function (newValue) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+  }, [onChange, onValueChange]);
+  var {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
+    form,
+    id: idProp,
+    compact
+  });
+  var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  var [standaloneValue, setStandaloneValue] = (0, import_react.useState)(function () {
+    return (controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue) || "";
+  });
+  (0, import_react.useEffect)(function () {
+    if (controlledValue !== void 0) {
+      setStandaloneValue(controlledValue);
+    }
+  }, [controlledValue]);
+  var handleStandaloneChange = (0, import_react.useCallback)(function (newValue) {
+    setStandaloneValue(newValue);
+    emitValueChange(newValue);
+  }, [emitValueChange]);
+  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: 96,
+        height: 14
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: 320,
+        height: knobProps.control.height,
+        borderRadius: knobProps.borderRadius.borderRadius
+      })]
+    });
+  }
+  var control = function control2(fieldValue, onValue, error) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconControl, {
+      value: fieldValue,
+      placeholder,
+      disabled,
+      readOnly,
+      hasError: !!error,
+      required,
+      id,
+      hasLabel: Boolean(label),
+      a11yLabel: typeof label === "string" ? label : void 0,
+      helperText,
+      catalog,
+      onValueChange: onValue,
+      onBlurControl: function onBlurControl() {
+        return onBlur === null || onBlur === void 0 ? void 0 : onBlur(void 0);
+      }
+    });
+  };
+  if (!resolvedForm || !name) {
+    var effectiveValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : standaloneValue;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error: errorProp,
+      helperText,
+      required,
+      size,
+      knobProps,
+      onBlur,
+      disabled,
+      children: control(effectiveValue, handleStandaloneChange, errorProp)
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    defaultValue,
+    form: resolvedForm,
+    mode,
+    name,
+    preserveValue,
+    validators: resolvedValidators,
+    children: function children(field) {
+      var resolvedError = (0, import_utils.getFieldError)(field, errorProp);
+      var fieldValue = field.state.value || "";
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size,
+        knobProps,
+        onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
+        disabled,
+        children: control(fieldValue, function (newValue) {
+          field.handleChange(newValue);
+          emitValueChange(newValue);
+        }, resolvedError)
+      });
+    }
+  });
+}
+//# sourceMappingURL=index.native.js.map

package/dist/cjs/fields/Icon/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Icon_exports","__export","DRAWN_ICON_NAMES","import_drawnSet2","DrawnIcon","Icon","filterDrawnIcons","isDrawnIconName","parseIconOptions","resolveIconCatalog","module","exports","import_jsx_runtime","require","import_theme","import_react","import_tamagui","import_fieldLayout","import_InputParts","import_FloatingPanel","import_Skeleton","import_colorRamps","import_tableCellContext","import_utils","import_t","import_drawnSet","adornmentRing","ensureFocusVisibleRing","outlineOffset","NESTED_GLYPH_WELL","EmptyGlyphWell","jsx","View","testID","width","height","borderWidth","borderStyle","borderColor","borderRadius","IconControl","param","placeholder","disabled","readOnly","hasError","required","id","hasLabel","a11yLabel","helperText","catalog","onValueChange","onBlurControl","inTableCell","useIsInTableCell","knobProps","useResolvedKnobs","open","setOpen","useState","query","setQuery","drawn","matches","useMemo","closePanel","useCallback","handlePick","name","handleClear","handleOpenChange","next","alignItems","justifyContent","children","size","displayValue","showClear","Boolean","trigger","Input","cursor","onPress","isWeb","sizeToken","jsxs","Box","theme","opacity","pointerEvents","adornment","Area","fontFamily","t","autoComplete","autoCapitalize","spellCheck","onChangeText","onFocus","Button","tabIndex","focusVisibleStyle","e","stopPropagation","FloatingPanel","onOpenChange","scrollable","sizing","triggerA11y","label","hint","YStack","role","padding","length","Text","color","formCommonColors","muted","fontSize","textAlign","XStack","flexWrap","map","selected","gap","backgroundColor","hoverStyle","numberOfLines","props","defaultValue","form","mode","preserveValue","validators","labelProps","error","errorProp","onBlur","controlledValue","onChange","skeleton","compact","idProp","icons","options","useProps","emitValueChange","newValue","resolvedForm","useFormField","resolvedValidators","useResolvedValidators","standaloneValue","setStandaloneValue","useEffect","handleStandaloneChange","Skeleton","variant","control","control2","fieldValue","onValue","effectiveValue","FieldLayout","Field","field","resolvedError","getFieldError","state","mergeFieldHandler","handleChange"],"sources":["../../../../src/fields/Icon/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -34,6 +34,7 @@ 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_tableCellContext = require("../../shared/tableCellContext.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const IMAGE_EXT = /\.(avif|bmp|gif|heic|heif|jpe?g|png|svg|webp)$/i;
@@ -79,13 +80,7 @@ function ImageControl({
   showRemove,
   placeholder,
   objectFit,
-  cappedRadius,
-  borderWidth,
-  outlined,
-  elevation,
-  transition,
-  body,
-  gap,
+  knobProps,
   disabledSurface,
   onChange,
   onChangeProp,
@@ -95,6 +90,8 @@ function ImageControl({
 }) {
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   const fieldA11y = (0, import_fieldLayout.useFieldA11y)();
+  const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  if (typeof document !== "undefined") (0, import_theme.ensureKeyboardModalityTracking)();
   const [previewUrl, setPreviewUrl] = (0, import_react2.useState)(null);
   const [broken, setBroken] = (0, import_react2.useState)(false);
   const [kbFrameFocus, setKbFrameFocus] = (0, import_react2.useState)(false);
@@ -197,7 +194,8 @@ function ImageControl({
     const file = e.dataTransfer.files?.[0];
     if (file) applyFile(file);
   }, [canInteract, applyFile]);
-  const frameBorderWidth = isDragOver && canInteract ? Math.max(borderWidth, 2) : borderWidth;
+  const restBorderWidth = knobProps.inputSurface.borderWidth;
+  const frameBorderWidth = isDragOver && canInteract ? Math.max(restBorderWidth, 2) : restBorderWidth;
   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", {
@@ -205,20 +203,22 @@ function ImageControl({
   }) : (0, import_t.t)("Add image");
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     alignItems: "flex-start",
-    ...(gap ?? {
-      gap: "$2"
-    }),
+    ...knobProps.gap,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(ImageFrame, {
       id,
+      "data-media-tile": "",
+      "data-radius-class": "R-SCALE",
+      "data-radius-unclamped": "",
       width: imageWidth,
       height: imageHeight,
-      borderRadius: cappedRadius,
+      ...knobProps.borderRadius,
+      ...knobProps.inputSurface,
       borderStyle: hasPreview ? "solid" : "dashed",
       borderWidth: frameBorderWidth,
       borderColor: frameBorderColor,
-      backgroundColor: outlined || hasPreview ? "transparent" : import_colorRamps.formInputColors.background.base,
-      elevation,
-      transition,
+      backgroundColor: inTableCell || knobProps.outlined || hasPreview ? "transparent" : import_colorRamps.formInputColors.background.base,
+      elevation: inTableCell ? void 0 : knobProps.elevation,
+      transition: knobProps.transition,
       ...(disabled ? disabledSurface : void 0),
       "aria-required": required || void 0,
       "aria-invalid": !!errorProp || void 0,
@@ -270,7 +270,7 @@ function ImageControl({
           size: iconSize,
           color: "var(--color11)"
         }), showCaption ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          ...body,
+          ...knobProps.body,
           color: import_colorRamps.formCommonColors.muted,
           textAlign: "center",
           numberOfLines: 2,
@@ -298,7 +298,7 @@ function ImageControl({
         },
         disabled: !canInteract
       })]
-    }), showRemove && hasValue && canInteract && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+    }), showRemove && hasValue && canInteract && !inTableCell && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
       chromeless: true,
       size: "$2",
       icon: import_react.XIcon,
@@ -347,7 +347,6 @@ function ImageField({
     compact
   });
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
-  const cappedRadius = (0, import_utils.clampRadiusForControl)(knobProps.borderRadius.borderRadius, 6);
   const [validationError, setValidationError] = (0, import_react2.useState)();
   if (skeleton) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
@@ -375,13 +374,7 @@ function ImageField({
     showRemove,
     placeholder,
     objectFit,
-    cappedRadius,
-    borderWidth: knobProps.borderRadius.borderWidth ?? 1,
-    outlined: knobProps.outlined,
-    elevation: knobProps.elevation,
-    transition: knobProps.transition,
-    body: knobProps.body,
-    gap: knobProps.gap,
+    knobProps,
     disabledSurface: disabled ? disabledState.surfaceKnobProps : void 0,
     onChangeProp,
     onValueChange,

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

@@ -32,11 +32,12 @@ 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");
+var import_Button = require("../../Button/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
-var import_Skeleton = require("../../Skeleton");
+var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_t = require("../../shared/t.native.js");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_tableCellContext = require("../../shared/tableCellContext.native.js");
 var import_utils = require("../../shared/utils.native.js");
 function _instanceof(left, right) {
   "@swc/helpers - instanceof";
@@ -93,13 +94,7 @@ function ImageControl(param) {
     showRemove,
     placeholder,
     objectFit,
-    cappedRadius,
-    borderWidth,
-    outlined,
-    elevation,
-    transition,
-    body,
-    gap,
+    knobProps,
     disabledSurface,
     onChange,
     onChangeProp,
@@ -110,6 +105,8 @@ function ImageControl(param) {
   var _ref;
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var fieldA11y = (0, import_fieldLayout.useFieldA11y)();
+  var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  if (typeof document !== "undefined") (0, import_theme.ensureKeyboardModalityTracking)();
   var [previewUrl, setPreviewUrl] = (0, import_react2.useState)(null);
   var [broken, setBroken] = (0, import_react2.useState)(false);
   var [kbFrameFocus, setKbFrameFocus] = (0, import_react2.useState)(false);
@@ -218,7 +215,8 @@ function ImageControl(param) {
     var file = (_e_dataTransfer_files = e.dataTransfer.files) === null || _e_dataTransfer_files === void 0 ? void 0 : _e_dataTransfer_files[0];
     if (file) applyFile(file);
   }, [canInteract, applyFile]);
-  var frameBorderWidth = isDragOver && canInteract ? Math.max(borderWidth, 2) : borderWidth;
+  var restBorderWidth = knobProps.inputSurface.borderWidth;
+  var frameBorderWidth = isDragOver && canInteract ? Math.max(restBorderWidth, 2) : restBorderWidth;
   var frameBorderColor = errorProp || isDragOver && canInteract ? errorProp ? import_colorRamps.formCommonColors.error : import_colorRamps.formCommonColors.text : import_colorRamps.formInputColors.border.base;
   var altText = typeof label === "string" && label ? label : (fieldA11y === null || fieldA11y === void 0 ? void 0 : fieldA11y.label) || (0, import_t.t)("Selected image");
   var emptyName = typeof label === "string" && label ? (0, import_t.t)("{{label}}: add image", {
@@ -226,20 +224,22 @@ function ImageControl(param) {
   }) : (0, import_t.t)("Add image");
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     alignItems: "flex-start",
-    ...(gap !== null && gap !== void 0 ? gap : {
-      gap: "$2"
-    }),
+    ...knobProps.gap,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(ImageFrame, {
       id,
+      "data-media-tile": "",
+      "data-radius-class": "R-SCALE",
+      "data-radius-unclamped": "",
       width: imageWidth,
       height: imageHeight,
-      borderRadius: cappedRadius,
+      ...knobProps.borderRadius,
+      ...knobProps.inputSurface,
       borderStyle: hasPreview ? "solid" : "dashed",
       borderWidth: frameBorderWidth,
       borderColor: frameBorderColor,
-      backgroundColor: outlined || hasPreview ? "transparent" : import_colorRamps.formInputColors.background.base,
-      elevation,
-      transition,
+      backgroundColor: inTableCell || knobProps.outlined || hasPreview ? "transparent" : import_colorRamps.formInputColors.background.base,
+      elevation: inTableCell ? void 0 : knobProps.elevation,
+      transition: knobProps.transition,
       ...(disabled ? disabledSurface : void 0),
       "aria-required": required || void 0,
       "aria-invalid": !!errorProp || void 0,
@@ -295,7 +295,7 @@ function ImageControl(param) {
           size: iconSize,
           color: "var(--color11)"
         }), showCaption ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          ...body,
+          ...knobProps.body,
           color: import_colorRamps.formCommonColors.muted,
           textAlign: "center",
           numberOfLines: 2,
@@ -323,7 +323,7 @@ function ImageControl(param) {
         },
         disabled: !canInteract
       })]
-    }), showRemove && hasValue && canInteract && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+    }), showRemove && hasValue && canInteract && !inTableCell && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
       chromeless: true,
       size: "$2",
       icon: import_react.XIcon,
@@ -364,7 +364,6 @@ function ImageField(param) {
     skeleton,
     compact
   } = param;
-  var _knobProps_borderRadius_borderWidth;
   var {
     resolvedForm,
     knobProps,
@@ -376,7 +375,6 @@ function ImageField(param) {
     compact
   });
   var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
-  var cappedRadius = (0, import_utils.clampRadiusForControl)(knobProps.borderRadius.borderRadius, 6);
   var [validationError, setValidationError] = (0, import_react2.useState)();
   if (skeleton) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
@@ -404,13 +402,7 @@ function ImageField(param) {
     showRemove,
     placeholder,
     objectFit,
-    cappedRadius,
-    borderWidth: (_knobProps_borderRadius_borderWidth = knobProps.borderRadius.borderWidth) !== null && _knobProps_borderRadius_borderWidth !== void 0 ? _knobProps_borderRadius_borderWidth : 1,
-    outlined: knobProps.outlined,
-    elevation: knobProps.elevation,
-    transition: knobProps.transition,
-    body: knobProps.body,
-    gap: knobProps.gap,
+    knobProps,
     disabledSurface: disabled ? disabledState.surfaceKnobProps : void 0,
     onChangeProp,
     onValueChange,