@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/esm/FieldDisplay/index.native.js

@@ -1,7 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckIcon, XIcon } from "@phosphor-icons/react";
-import { Text, View, XStack } from "tamagui";
+import { CheckIcon, FileIcon, ImageSquareIcon, StarIcon } from "@phosphor-icons/react";
+import { useReadableTextOn, useResolvedKnobs } from "@multiplatform.one/theme";
+import { getSize } from "@tamagui/get-token";
+import { useState } from "react";
+import { Image, Text, View, XStack, getVariableValue, useTheme } from "tamagui";
+import { Chip } from "../Chip/index.native.js";
 import { BarcodePreview } from "../fields/Barcode/BarcodePreview.native.js";
+import { formControlColors, formSelectedColors } from "../shared/colorRamps.native.js";
+import { useIsInTableCell } from "../shared/tableCellContext.native.js";
 import { t } from "../shared/t.native.js";
 import { asText, EMPTY, formatDateText, formatNumericText } from "./formatters.native.js";
 function _instanceof(left, right) {
@@ -18,28 +24,188 @@ function _type_of(obj) {
 
   return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function TextCell(param) {
+var CHIP_COLORS = /* @__PURE__ */new Set(["gray", "red", "green", "blue", "yellow", "orange", "purple"]);
+var INTENT_CHIP = {
+  success: "green",
+  error: "red",
+  warning: "yellow",
+  accent: "blue",
+  info: "blue"
+};
+function chipSizeFor(size) {
+  if (size === "small") return "$2";
+  if (size === "large") return "$4";
+  return "$3";
+}
+function framePadding(space) {
+  var _map_space;
+  var map = {
+    small: {
+      paddingHorizontal: "$1.5",
+      paddingVertical: "$2"
+    },
+    medium: {
+      paddingHorizontal: "$2",
+      paddingVertical: "$3"
+    },
+    large: {
+      paddingHorizontal: "$3",
+      paddingVertical: "$4"
+    }
+  };
+  return (_map_space = map[space]) !== null && _map_space !== void 0 ? _map_space : map.medium;
+}
+function resolveChipColor(value, fieldProps, opt) {
+  var _ref, _ref1, _ref2;
+  var _fieldProps_colors, _fieldProps_intents;
+  var raw = (_ref = (_ref1 = (_ref2 = opt === null || opt === void 0 ? void 0 : opt.color) !== null && _ref2 !== void 0 ? _ref2 : opt === null || opt === void 0 ? void 0 : opt.intent) !== null && _ref1 !== void 0 ? _ref1 : fieldProps === null || fieldProps === void 0 ? void 0 : (_fieldProps_colors = fieldProps.colors) === null || _fieldProps_colors === void 0 ? void 0 : _fieldProps_colors[value]) !== null && _ref !== void 0 ? _ref : fieldProps === null || fieldProps === void 0 ? void 0 : (_fieldProps_intents = fieldProps.intents) === null || _fieldProps_intents === void 0 ? void 0 : _fieldProps_intents[value];
+  if (typeof raw === "string") {
+    if (CHIP_COLORS.has(raw)) return raw;
+    if (INTENT_CHIP[raw]) return INTENT_CHIP[raw];
+  }
+  return "gray";
+}
+function isSafeHttpUrl(value) {
+  if (typeof value !== "string") return false;
+  try {
+    var parsed = new URL(value);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch (unused) {
+    return false;
+  }
+}
+function useDisplayChrome() {
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var inTableCell = useIsInTableCell();
+  var glyphSize = Math.max(12, Math.round(getVariableValue(getSize(knobProps.sizeToken)) * 0.45));
+  return {
+    knobProps,
+    inTableCell,
+    glyphSize
+  };
+}
+function DisplayFrame(param) {
+  var {
+    field,
+    children
+  } = param;
+  var {
+    knobProps,
+    inTableCell
+  } = useDisplayChrome();
+  if (inTableCell) {
+    return /* @__PURE__ */_jsx(XStack, {
+      "data-component": "FieldDisplay",
+      "data-field": field,
+      alignItems: "center",
+      minWidth: 0,
+      flex: 1,
+      children
+    });
+  }
+  return /* @__PURE__ */_jsx(XStack, {
+    "data-component": "FieldDisplay",
+    "data-field": field,
+    alignItems: "center",
+    minWidth: 0,
+    width: "100%",
+    ...knobProps.surface,
+    ...knobProps.borderRadius,
+    ...(knobProps.outlined ? {
+      backgroundColor: "transparent"
+    } : void 0),
+    ...framePadding(knobProps.space),
+    children
+  });
+}
+function ValueText(param) {
   var {
     children,
     mono = false,
-    align = "left"
+    align = "left",
+    lines = 1,
+    wrap = false,
+    empty = false
   } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
   return /* @__PURE__ */_jsx(Text, {
-    numberOfLines: 1,
-    fontSize: "$4",
-    lineHeight: "$4",
-    fontFamily: mono ? "$mono" : "$body",
+    ...(wrap ? void 0 : {
+      numberOfLines: lines
+    }),
+    ...knobProps.body,
+    ...knobProps.label,
+    fontFamily: mono ? "$mono" : knobProps.body.fontFamily,
     textAlign: align,
-    color: "$color",
+    color: empty ? "$color10" : knobProps.textAccentColor,
+    userSelect: "text",
+    flexShrink: 1,
+    minWidth: 0,
+    width: wrap ? "100%" : void 0,
+    display: wrap ? "block" : void 0,
+    whiteSpace: wrap ? "pre-wrap" : void 0,
+    children
+  });
+}
+function TextCell(param) {
+  var {
+    children,
+    mono = false,
+    align = "left",
+    lines = 1,
+    wrap = false
+  } = param;
+  var empty = children === EMPTY;
+  return /* @__PURE__ */_jsx(ValueText, {
+    mono,
+    align,
+    lines,
+    wrap,
+    empty,
     children
   });
 }
 function InputDisplay(param) {
   var {
-    value
+    value,
+    href,
+    multiline,
+    mono
   } = param;
+  var {
+    knobProps,
+    inTableCell
+  } = useDisplayChrome();
+  var text = asText(value);
+  var link = href || (isSafeHttpUrl(value) ? value : void 0);
+  if (link && text !== EMPTY) {
+    return /* @__PURE__ */_jsx(Text, {
+      numberOfLines: 1,
+      ...knobProps.body,
+      ...knobProps.label,
+      color: "$accentColor",
+      textDecorationLine: "underline",
+      // Render as an anchor on web; `tag`/`href` are applied by Tamagui at
+      // runtime though the Text prop type omits them.
+      ...{
+        tag: "a",
+        href: link
+      },
+      role: "link",
+      cursor: "pointer",
+      userSelect: "text",
+      flexShrink: 1,
+      minWidth: 0,
+      children: text
+    });
+  }
   return /* @__PURE__ */_jsx(TextCell, {
-    children: asText(value)
+    mono,
+    wrap: Boolean(multiline && !inTableCell),
+    children: text
   });
 }
 function NumericDisplay(param) {
@@ -106,79 +272,90 @@ function ChoiceDisplay(param) {
     value,
     fieldProps
   } = param;
-  var _ref, _ref1;
+  var _ref;
+  var {
+    knobProps
+  } = useDisplayChrome();
   if (value == null || value === "") return /* @__PURE__ */_jsx(TextCell, {
     children: EMPTY
   });
   var options = (_ref = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.options) !== null && _ref !== void 0 ? _ref : [];
-  if (Array.isArray(value)) {
-    var labels = value.map(function (v) {
+  var size = chipSizeFor(knobProps.size);
+  var values = Array.isArray(value) ? value : [value];
+  return /* @__PURE__ */_jsx(XStack, {
+    alignItems: "center",
+    flexWrap: "wrap",
+    minWidth: 0,
+    ...knobProps.gap,
+    children: values.map(function (item, index) {
       var _ref2;
-      var opt2 = options.find(function (o) {
-        return o.value === v || String(o.value) === String(v);
+      var opt = options.find(function (o) {
+        return o.value === item || String(o.value) === String(item);
       });
-      return (_ref2 = opt2 === null || opt2 === void 0 ? void 0 : opt2.label) !== null && _ref2 !== void 0 ? _ref2 : asText(v);
-    });
-    return /* @__PURE__ */_jsx(TextCell, {
-      children: labels.join(", ")
-    });
-  }
-  var opt = options.find(function (o) {
-    return o.value === value || String(o.value) === String(value);
-  });
-  return /* @__PURE__ */_jsx(TextCell, {
-    children: (_ref1 = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _ref1 !== void 0 ? _ref1 : asText(value)
+      return /* @__PURE__ */_jsx(Chip, {
+        size,
+        color: resolveChipColor(item, fieldProps, opt),
+        children: (_ref2 = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _ref2 !== void 0 ? _ref2 : asText(item)
+      }, `${String(item)}-${index}`);
+    })
   });
 }
 function BooleanDisplay(param) {
   var {
     value
   } = param;
+  var {
+    knobProps,
+    glyphSize
+  } = useDisplayChrome();
+  var onMark = useReadableTextOn(formSelectedColors.mark);
   if (value == null) return /* @__PURE__ */_jsx(TextCell, {
     align: "center",
     children: EMPTY
   });
-  return /* @__PURE__ */_jsx(XStack, {
-    justifyContent: "center",
+  var marked = Boolean(value);
+  return /* @__PURE__ */_jsx(View, {
+    width: glyphSize,
+    height: glyphSize,
+    ...knobProps.inputSurface,
+    ...knobProps.borderRadius,
+    backgroundColor: marked ? formSelectedColors.mark : knobProps.outlined ? "transparent" : formControlColors.background,
+    borderColor: marked ? formSelectedColors.mark : formControlColors.border,
     alignItems: "center",
-    width: "100%",
-    children: value ? /* @__PURE__ */_jsx(CheckIcon, {
-      size: 14,
-      weight: "bold"
-    }) :
-    // Distinct glyph for a real `false` — the EMPTY dash is reserved for
-    // null/undefined (no data).
-    /* @__PURE__ */
-    _jsx(XIcon, {
-      size: 14,
+    justifyContent: "center",
+    "aria-hidden": true,
+    children: marked ? /* @__PURE__ */_jsx(CheckIcon, {
+      size: Math.round(glyphSize * 0.65),
       weight: "bold",
-      opacity: 0.45
-    })
+      color: onMark !== null && onMark !== void 0 ? onMark : knobProps.textAccentColor
+    }) : null
   });
 }
 function ColorDisplay(param) {
   var {
     value
   } = param;
+  var {
+    knobProps,
+    glyphSize
+  } = useDisplayChrome();
   var hex = typeof value === "string" && value ? value : null;
   if (!hex) return /* @__PURE__ */_jsx(TextCell, {
     children: EMPTY
   });
   return /* @__PURE__ */_jsxs(XStack, {
     alignItems: "center",
-    gap: "$2",
+    minWidth: 0,
+    ...knobProps.gap,
     children: [/* @__PURE__ */_jsx(View, {
-      width: 14,
-      height: 14,
-      borderRadius: "$2",
-      borderWidth: 1,
+      width: glyphSize,
+      height: glyphSize,
+      ...knobProps.inputSurface,
+      ...knobProps.borderRadius,
       borderColor: "$borderColor",
       backgroundColor: hex
-    }), /* @__PURE__ */_jsx(Text, {
-      fontFamily: "$mono",
-      fontSize: "$4",
-      lineHeight: "$4",
-      color: "$color",
+    }), /* @__PURE__ */_jsx(ValueText, {
+      mono: true,
       children: hex.toUpperCase()
     })]
   });
@@ -218,6 +395,10 @@ function FileUploadDisplay(param) {
   } = param;
   var _ref;
   var _files_;
+  var {
+    knobProps,
+    glyphSize
+  } = useDisplayChrome();
   var files = Array.isArray(value) ? value : value ? [value] : [];
   if (!files.length) return /* @__PURE__ */_jsx(TextCell, {
     children: EMPTY
@@ -225,59 +406,99 @@ function FileUploadDisplay(param) {
   var label = files.length === 1 ? typeof files[0] === "string" ? files[0] : (_ref = (_files_ = files[0]) === null || _files_ === void 0 ? void 0 : _files_.name) !== null && _ref !== void 0 ? _ref : t("1 file") : t("{{count}} files", {
     count: files.length
   });
-  return /* @__PURE__ */_jsx(TextCell, {
-    children: label
+  return /* @__PURE__ */_jsxs(XStack, {
+    alignItems: "center",
+    minWidth: 0,
+    ...knobProps.gap,
+    children: [/* @__PURE__ */_jsx(FileIcon, {
+      size: glyphSize
+    }), /* @__PURE__ */_jsx(TextCell, {
+      children: label
+    })]
+  });
+}
+function Thumb(param) {
+  var {
+    src,
+    alt,
+    knobProps
+  } = param;
+  var [broken, setBroken] = useState(false);
+  var {
+    px
+  } = knobProps.nestedControl;
+  if (broken) {
+    return /* @__PURE__ */_jsx(View, {
+      width: px,
+      height: px,
+      ...knobProps.borderRadius,
+      backgroundColor: "$color3",
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden",
+      children: /* @__PURE__ */_jsx(ImageSquareIcon, {
+        size: Math.round(px * 0.45)
+      })
+    });
+  }
+  return /* @__PURE__ */_jsx(View, {
+    width: px,
+    height: px,
+    ...knobProps.borderRadius,
+    overflow: "hidden",
+    backgroundColor: "$color3",
+    children: /* @__PURE__ */_jsx(Image, {
+      src,
+      alt,
+      width: px,
+      height: px,
+      objectFit: "cover",
+      onError: function onError() {
+        return setBroken(true);
+      }
+    })
   });
 }
 function ImageDisplay(param) {
   var {
     value
   } = param;
+  var {
+    knobProps
+  } = useDisplayChrome();
   var src = typeof value === "string" && value ? value : null;
   if (!src) return /* @__PURE__ */_jsx(TextCell, {
     children: EMPTY
   });
-  return /* @__PURE__ */_jsx(View, {
-    width: 28,
-    height: 28,
-    borderRadius: "$2",
-    borderWidth: 1,
-    borderColor: "$borderColor",
-    overflow: "hidden",
-    backgroundColor: "$color3",
-    children: /* @__PURE__ */_jsx(View, {
-      width: "100%",
-      height: "100%",
-      backgroundImage: `url(${src})`,
-      backgroundSize: "cover",
-      backgroundPosition: "center"
-    })
+  return /* @__PURE__ */_jsx(Thumb, {
+    src,
+    alt: "",
+    knobProps
   });
 }
 function BarcodeDisplay(param) {
   var {
     value
   } = param;
+  var {
+    knobProps,
+    glyphSize
+  } = useDisplayChrome();
   var text = String(value !== null && value !== void 0 ? value : "");
   if (!text) return /* @__PURE__ */_jsx(TextCell, {
     children: EMPTY
   });
   return /* @__PURE__ */_jsxs(XStack, {
     alignItems: "center",
-    gap: "$2",
     minWidth: 0,
     flexShrink: 1,
-    children: [/* @__PURE__ */_jsx(Text, {
-      fontFamily: "$mono",
-      fontSize: "$4",
-      lineHeight: "$4",
-      color: "$color",
-      numberOfLines: 1,
-      flexShrink: 1,
+    ...knobProps.gap,
+    children: [/* @__PURE__ */_jsx(ValueText, {
+      mono: true,
       children: text
     }), /* @__PURE__ */_jsx(BarcodePreview, {
       value: text,
-      height: 16,
+      height: Math.max(12, glyphSize),
       moduleWidth: 1
     })]
   });
@@ -286,6 +507,15 @@ function SignatureDisplay(param) {
   var {
     value
   } = param;
+  var {
+    knobProps
+  } = useDisplayChrome();
+  var src = typeof value === "string" && value.startsWith("data:image") ? value : null;
+  if (src) return /* @__PURE__ */_jsx(Thumb, {
+    src,
+    alt: t("signed"),
+    knobProps
+  });
   var hasInk = typeof value === "string" && value.length > 0 || Array.isArray(value) && value.length > 0;
   return /* @__PURE__ */_jsx(TextCell, {
     children: hasInk ? t("signed") : EMPTY
@@ -328,6 +558,93 @@ function RichTextDisplay(param) {
     children: text
   });
 }
+function MeterDisplay(param) {
+  var {
+    value,
+    fieldProps
+  } = param;
+  var {
+    knobProps,
+    glyphSize
+  } = useDisplayChrome();
+  if (value == null || value === "") return /* @__PURE__ */_jsx(TextCell, {
+    children: EMPTY
+  });
+  var num = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(num)) return /* @__PURE__ */_jsx(TextCell, {
+    children: asText(value)
+  });
+  var max = typeof (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.max) === "number" ? fieldProps.max : num <= 1 ? 1 : 100;
+  var ratio = Math.min(1, Math.max(0, max === 0 ? 0 : num / max));
+  var trackHeight = Math.max(4, Math.round(glyphSize / 4));
+  return /* @__PURE__ */_jsxs(XStack, {
+    alignItems: "center",
+    minWidth: 0,
+    flex: 1,
+    ...knobProps.gap,
+    children: [/* @__PURE__ */_jsx(View, {
+      flex: 1,
+      minWidth: 48,
+      maxWidth: 160,
+      height: trackHeight,
+      overflow: "hidden",
+      backgroundColor: knobProps.outlined ? "transparent" : formControlColors.background,
+      ...knobProps.inputSurface,
+      ...knobProps.borderRadius,
+      children: /* @__PURE__ */_jsx(View, {
+        width: `${Math.round(ratio * 100)}%`,
+        height: "100%",
+        backgroundColor: formSelectedColors.mark
+      })
+    }), /* @__PURE__ */_jsx(TextCell, {
+      mono: true,
+      children: formatNumericText(num, {
+        precision: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.precision
+      })
+    })]
+  });
+}
+function RatingDisplay(param) {
+  var {
+    value,
+    fieldProps
+  } = param;
+  var _ref;
+  var _theme_accentBackground, _theme_color10, _theme_color8;
+  var {
+    knobProps,
+    glyphSize
+  } = useDisplayChrome();
+  var theme = useTheme();
+  if (value == null || value === "") return /* @__PURE__ */_jsx(TextCell, {
+    children: EMPTY
+  });
+  var num = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(num)) return /* @__PURE__ */_jsx(TextCell, {
+    children: asText(value)
+  });
+  var maxStars = typeof (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.maxStars) === "number" ? fieldProps.maxStars : 5;
+  var filled = num > 1 ? Math.round(Math.min(maxStars, num)) : Math.round(num * maxStars);
+  var filledColor = (_ref = (_theme_accentBackground = theme.accentBackground) === null || _theme_accentBackground === void 0 ? void 0 : _theme_accentBackground.val) !== null && _ref !== void 0 ? _ref : (_theme_color10 = theme.color10) === null || _theme_color10 === void 0 ? void 0 : _theme_color10.val;
+  var emptyColor = (_theme_color8 = theme.color8) === null || _theme_color8 === void 0 ? void 0 : _theme_color8.val;
+  return /* @__PURE__ */_jsx(XStack, {
+    alignItems: "center",
+    ...knobProps.gap,
+    "aria-label": t("{{star}} of {{max}} stars", {
+      star: filled,
+      max: maxStars
+    }),
+    children: Array.from({
+      length: maxStars
+    }, function (_, i) {
+      return /* @__PURE__ */_jsx(StarIcon, {
+        size: glyphSize,
+        weight: i < filled ? "fill" : "regular",
+        color: i < filled ? filledColor : emptyColor
+      }, i);
+    })
+  });
+}
 function FieldDisplay(param) {
   var {
     field = "input",
@@ -335,94 +652,137 @@ function FieldDisplay(param) {
     fieldProps,
     linkedValue
   } = param;
+  var body;
   switch (field) {
     case "input":
-    case "textarea":
     case "mentioninput":
     case "phoneinput":
+      body = /* @__PURE__ */_jsx(InputDisplay, {
+        value,
+        href: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.href
+      });
+      break;
     case "otp":
-      return /* @__PURE__ */_jsx(InputDisplay, {
-        value
+      body = /* @__PURE__ */_jsx(InputDisplay, {
+        value,
+        mono: true
       });
+      break;
+    case "textarea":
+      body = /* @__PURE__ */_jsx(InputDisplay, {
+        value,
+        multiline: true
+      });
+      break;
     case "barcode":
-      return /* @__PURE__ */_jsx(BarcodeDisplay, {
+      body = /* @__PURE__ */_jsx(BarcodeDisplay, {
         value
       });
+      break;
     case "stepper":
+      body = /* @__PURE__ */_jsx(NumericDisplay, {
+        value,
+        fieldProps
+      });
+      break;
     case "slider":
-    case "rating":
     case "progress":
-      return /* @__PURE__ */_jsx(NumericDisplay, {
+      body = /* @__PURE__ */_jsx(MeterDisplay, {
         value,
         fieldProps
       });
+      break;
+    case "rating":
+      body = /* @__PURE__ */_jsx(RatingDisplay, {
+        value,
+        fieldProps
+      });
+      break;
     case "select":
     case "combobox":
     case "radiogroup":
     case "togglegroup":
-      return /* @__PURE__ */_jsx(ChoiceDisplay, {
+      body = /* @__PURE__ */_jsx(ChoiceDisplay, {
         value,
         fieldProps
       });
+      break;
     case "checkbox":
     case "switch":
-      return /* @__PURE__ */_jsx(BooleanDisplay, {
+      body = /* @__PURE__ */_jsx(BooleanDisplay, {
         value
       });
+      break;
     case "datepicker":
     case "multidatepicker":
-      return /* @__PURE__ */_jsx(DateDisplay, {
+      body = /* @__PURE__ */_jsx(DateDisplay, {
         value,
         fieldProps
       });
+      break;
     case "datetimepicker":
     case "timepicker":
-      return /* @__PURE__ */_jsx(DateDisplay, {
+      body = /* @__PURE__ */_jsx(DateDisplay, {
         value,
         fieldProps,
         withTime: true
       });
+      break;
     case "daterangepicker":
-      return /* @__PURE__ */_jsx(DateRangeDisplay, {
+      body = /* @__PURE__ */_jsx(DateRangeDisplay, {
         value,
         linkedValue
       });
+      break;
     case "colorpicker":
-      return /* @__PURE__ */_jsx(ColorDisplay, {
+      body = /* @__PURE__ */_jsx(ColorDisplay, {
         value
       });
+      break;
     case "duration":
-      return /* @__PURE__ */_jsx(DurationDisplay, {
+      body = /* @__PURE__ */_jsx(DurationDisplay, {
         value
       });
+      break;
     case "fileupload":
-      return /* @__PURE__ */_jsx(FileUploadDisplay, {
+      body = /* @__PURE__ */_jsx(FileUploadDisplay, {
         value
       });
+      break;
     case "image":
-      return /* @__PURE__ */_jsx(ImageDisplay, {
+      body = /* @__PURE__ */_jsx(ImageDisplay, {
         value
       });
+      break;
     case "signature":
-      return /* @__PURE__ */_jsx(SignatureDisplay, {
+      body = /* @__PURE__ */_jsx(SignatureDisplay, {
         value
       });
+      break;
     case "geolocation":
-      return /* @__PURE__ */_jsx(GeolocationDisplay, {
+      body = /* @__PURE__ */_jsx(GeolocationDisplay, {
         value
       });
+      break;
     case "richtexteditor":
     case "markdowneditor":
     case "codeeditor":
-      return /* @__PURE__ */_jsx(RichTextDisplay, {
+      body = /* @__PURE__ */_jsx(RichTextDisplay, {
         value
       });
+      break;
     case "custom":
     default:
-      return /* @__PURE__ */_jsx(InputDisplay, {
-        value
+      body = /* @__PURE__ */_jsx(InputDisplay, {
+        value,
+        href: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.href
       });
+      break;
   }
+  return /* @__PURE__ */_jsx(DisplayFrame, {
+    field,
+    children: body
+  });
 }
 export { FieldDisplay };
 //# sourceMappingURL=index.native.js.map