@multiplatform.one/forms 7.4.1 → 7.6.0

package/dist/cjs/FieldDisplay/index.cjs

@@ -22,7 +22,9 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var FieldDisplay_exports = {};
 __export(FieldDisplay_exports, {
-  FieldDisplay: () => FieldDisplay
+  DescriptionListSlotProvider: () => DescriptionListSlotProvider,
+  FieldDisplay: () => FieldDisplay,
+  useIsInDescriptionList: () => useIsInDescriptionList
 });
 module.exports = __toCommonJS(FieldDisplay_exports);
 var import_react = require("@phosphor-icons/react");
@@ -33,10 +35,32 @@ var import_tamagui = require("tamagui");
 var import_Chip = require("../Chip/index.cjs");
 var import_BarcodePreview = require("../fields/Barcode/BarcodePreview.cjs");
 var import_colorRamps = require("../shared/colorRamps.cjs");
+var import_utils = require("../shared/utils.cjs");
 var import_tableCellContext = require("../shared/tableCellContext.cjs");
 var import_t = require("../shared/t.cjs");
 var import_formatters = require("./formatters.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const CHECKBOX_GLYPH_MAX_RADIUS_TOKEN = 2;
+const DescriptionListSlotContext = (0, import_react2.createContext)(false);
+function useIsInDescriptionList() {
+  return (0, import_react2.useContext)(DescriptionListSlotContext);
+}
+function DescriptionListSlotProvider({
+  children
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionListSlotContext.Provider, {
+    value: true,
+    children
+  });
+}
+const DisplaySlotContext = (0, import_react2.createContext)({
+  chromeless: false,
+  truncate: false,
+  inDescriptionList: false
+});
+function useDisplaySlot() {
+  return (0, import_react2.useContext)(DisplaySlotContext);
+}
 const CHIP_COLORS = /* @__PURE__ */new Set(["gray", "red", "green", "blue", "yellow", "orange", "purple"]);
 const INTENT_CHIP = {
   success: "green",
@@ -50,23 +74,6 @@ function chipSizeFor(size) {
   if (size === "large") return "$4";
   return "$3";
 }
-function framePadding(space) {
-  const map = {
-    small: {
-      paddingHorizontal: "$1.5",
-      paddingVertical: "$2"
-    },
-    medium: {
-      paddingHorizontal: "$2",
-      paddingVertical: "$3"
-    },
-    large: {
-      paddingHorizontal: "$3",
-      paddingVertical: "$4"
-    }
-  };
-  return map[space] ?? map.medium;
-}
 function resolveChipColor(value, fieldProps, opt) {
   const raw = opt?.color ?? opt?.intent ?? fieldProps?.colors?.[value] ?? fieldProps?.intents?.[value];
   if (typeof raw === "string") {
@@ -89,10 +96,15 @@ function useDisplayChrome() {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  const slot = useDisplaySlot();
   const glyphSize = Math.max(12, Math.round((0, import_tamagui.getVariableValue)((0, import_get_token.getSize)(knobProps.sizeToken)) * 0.45));
   return {
     knobProps,
     inTableCell,
+    inDescriptionList: slot.inDescriptionList,
+    chromeless: slot.chromeless || inTableCell,
+    align: slot.align,
+    truncate: slot.truncate,
     glyphSize
   };
 }
@@ -102,30 +114,35 @@ function DisplayFrame({
 }) {
   const {
     knobProps,
-    inTableCell
+    chromeless
   } = useDisplayChrome();
-  if (inTableCell) {
+  if (chromeless) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       "data-component": "FieldDisplay",
       "data-field": field,
+      "data-chromeless": "",
       alignItems: "center",
+      justifyContent: "flex-start",
       minWidth: 0,
       flex: 1,
+      width: "100%",
       children
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
     "data-component": "FieldDisplay",
     "data-field": field,
+    "data-space": knobProps.space,
+    "data-size": knobProps.size,
     alignItems: "center",
     minWidth: 0,
     width: "100%",
     ...knobProps.surface,
     ...knobProps.borderRadius,
+    ...knobProps.panelPadding,
     ...(knobProps.outlined ? {
       backgroundColor: "transparent"
     } : void 0),
-    ...framePadding(knobProps.space),
     children
   });
 }
@@ -135,7 +152,8 @@ function ValueText({
   align = "left",
   lines = 1,
   wrap = false,
-  empty = false
+  empty = false,
+  title
 }) {
   const {
     knobProps
@@ -155,23 +173,35 @@ function ValueText({
     width: wrap ? "100%" : void 0,
     display: wrap ? "block" : void 0,
     whiteSpace: wrap ? "pre-wrap" : void 0,
+    ...(import_tamagui.isWeb && title ? {
+      title
+    } : void 0),
     children
   });
 }
 function TextCell({
   children,
   mono = false,
-  align = "left",
+  align,
   lines = 1,
-  wrap = false
+  wrap
 }) {
+  const {
+    inDescriptionList,
+    truncate,
+    align: slotAlign
+  } = useDisplayChrome();
   const empty = children === import_formatters.EMPTY;
+  const resolvedAlign = align ?? slotAlign ?? "left";
+  const resolvedWrap = wrap ?? (inDescriptionList && !truncate);
+  const title = truncate && !resolvedWrap && typeof children === "string" && children !== import_formatters.EMPTY ? children : void 0;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ValueText, {
     mono,
-    align,
-    lines,
-    wrap,
+    align: resolvedAlign,
+    lines: truncate ? 1 : lines,
+    wrap: resolvedWrap,
     empty,
+    title,
     children
   });
 }
@@ -183,7 +213,8 @@ function InputDisplay({
 }) {
   const {
     knobProps,
-    inTableCell
+    inTableCell,
+    truncate
   } = useDisplayChrome();
   const text = (0, import_formatters.asText)(value);
   const link = href || (isSafeHttpUrl(value) ? value : void 0);
@@ -208,7 +239,7 @@ function InputDisplay({
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TextCell, {
     mono,
-    wrap: Boolean(multiline && !inTableCell),
+    wrap: Boolean(multiline && !inTableCell && !truncate),
     children: text
   });
 }
@@ -216,13 +247,17 @@ function NumericDisplay({
   value,
   fieldProps
 }) {
+  const {
+    align
+  } = useDisplayChrome();
+  const numericAlign = align ?? "right";
   if (value == null || value === "") return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TextCell, {
-    align: "right",
+    align: numericAlign,
     children: import_formatters.EMPTY
   });
   const num = typeof value === "number" ? value : Number(value);
   if (Number.isNaN(num)) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TextCell, {
-    align: "right",
+    align: numericAlign,
     children: (0, import_formatters.asText)(value)
   });
   const formatted = (0, import_formatters.formatNumericText)(num, {
@@ -231,7 +266,7 @@ function NumericDisplay({
   });
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TextCell, {
     mono: true,
-    align: "right",
+    align: numericAlign,
     children: formatted
   });
 }
@@ -301,21 +336,27 @@ function BooleanDisplay({
 }) {
   const {
     knobProps,
-    glyphSize
+    glyphSize,
+    align
   } = useDisplayChrome();
   const onMark = (0, import_theme.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
   if (value == null) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TextCell, {
-    align: "center",
+    align: align ?? "center",
     children: import_formatters.EMPTY
   });
   const marked = Boolean(value);
+  const glyphRadius = (0, import_utils.clampRadiusForControl)(knobProps.borderRadius.borderRadius, CHECKBOX_GLYPH_MAX_RADIUS_TOKEN);
+  const boxBorderWidth = Math.max(Number(knobProps.inputSurface.borderWidth) || 1, 2);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-checkbox-box": "",
+    "data-checkbox-radius": String(glyphRadius),
     width: glyphSize,
     height: glyphSize,
     ...knobProps.inputSurface,
-    ...knobProps.borderRadius,
+    borderWidth: boxBorderWidth,
+    borderRadius: glyphRadius,
     backgroundColor: marked ? import_colorRamps.formSelectedColors.mark : knobProps.outlined ? "transparent" : import_colorRamps.formControlColors.background,
-    borderColor: marked ? import_colorRamps.formSelectedColors.mark : import_colorRamps.formControlColors.border,
+    borderColor: marked ? import_colorRamps.formSelectedColors.mark : import_colorRamps.formControlColors.boundary,
     alignItems: "center",
     justifyContent: "center",
     "aria-hidden": true,
@@ -463,7 +504,8 @@ function ImageDisplay({
   });
 }
 function BarcodeDisplay({
-  value
+  value,
+  fieldProps
 }) {
   const {
     knobProps,
@@ -473,6 +515,8 @@ function BarcodeDisplay({
   if (!text) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TextCell, {
     children: import_formatters.EMPTY
   });
+  const formats = fieldProps?.formats;
+  const format = Array.isArray(formats) ? formats[0] : typeof fieldProps?.format === "string" ? fieldProps.format : void 0;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     alignItems: "center",
     minWidth: 0,
@@ -484,7 +528,9 @@ function BarcodeDisplay({
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BarcodePreview.BarcodePreview, {
       value: text,
       height: Math.max(12, glyphSize),
-      moduleWidth: 1
+      moduleWidth: 1,
+      format: typeof format === "string" ? format : void 0,
+      textFallback: false
     })]
   });
 }
@@ -624,8 +670,19 @@ function FieldDisplay({
   field = "input",
   value,
   fieldProps,
-  linkedValue
+  linkedValue,
+  chromeless = false,
+  align,
+  truncate = false
 }) {
+  const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  const inDescriptionList = useIsInDescriptionList();
+  const slot = (0, import_react2.useMemo)(() => ({
+    chromeless: chromeless || inTableCell || inDescriptionList,
+    align: align ?? (inDescriptionList ? "left" : void 0),
+    truncate,
+    inDescriptionList
+  }), [chromeless, inTableCell, inDescriptionList, align, truncate]);
   let body;
   switch (field) {
     case "input":
@@ -650,7 +707,8 @@ function FieldDisplay({
       break;
     case "barcode":
       body = /* @__PURE__ */(0, import_jsx_runtime.jsx)(BarcodeDisplay, {
-        value
+        value,
+        fieldProps
       });
       break;
     case "stepper":
@@ -753,8 +811,11 @@ function FieldDisplay({
       });
       break;
   }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DisplayFrame, {
-    field,
-    children: body
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DisplaySlotContext.Provider, {
+    value: slot,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DisplayFrame, {
+      field,
+      children: body
+    })
   });
 }

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

@@ -24,7 +24,9 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var FieldDisplay_exports = {};
 __export(FieldDisplay_exports, {
-  FieldDisplay: () => FieldDisplay
+  DescriptionListSlotProvider: () => DescriptionListSlotProvider,
+  FieldDisplay: () => FieldDisplay,
+  useIsInDescriptionList: () => useIsInDescriptionList
 });
 module.exports = __toCommonJS(FieldDisplay_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -36,6 +38,7 @@ var import_tamagui = require("tamagui");
 var import_Chip = require("../Chip");
 var import_BarcodePreview = require("../fields/Barcode/BarcodePreview.native.js");
 var import_colorRamps = require("../shared/colorRamps.native.js");
+var import_utils = require("../shared/utils.native.js");
 var import_tableCellContext = require("../shared/tableCellContext.native.js");
 var import_t = require("../shared/t.native.js");
 var import_formatters = require("./formatters.native.js");
@@ -53,6 +56,28 @@ function _type_of(obj) {
 
   return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
+var CHECKBOX_GLYPH_MAX_RADIUS_TOKEN = 2;
+var DescriptionListSlotContext = /* @__PURE__ */(0, import_react2.createContext)(false);
+function useIsInDescriptionList() {
+  return (0, import_react2.useContext)(DescriptionListSlotContext);
+}
+function DescriptionListSlotProvider(param) {
+  var {
+    children
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionListSlotContext.Provider, {
+    value: true,
+    children
+  });
+}
+var DisplaySlotContext = /* @__PURE__ */(0, import_react2.createContext)({
+  chromeless: false,
+  truncate: false,
+  inDescriptionList: false
+});
+function useDisplaySlot() {
+  return (0, import_react2.useContext)(DisplaySlotContext);
+}
 var CHIP_COLORS = /* @__PURE__ */new Set(["gray", "red", "green", "blue", "yellow", "orange", "purple"]);
 var INTENT_CHIP = {
   success: "green",
@@ -66,24 +91,6 @@ function chipSizeFor(size) {
   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;
@@ -108,10 +115,15 @@ function useDisplayChrome() {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  var slot = useDisplaySlot();
   var glyphSize = Math.max(12, Math.round((0, import_tamagui.getVariableValue)((0, import_get_token.getSize)(knobProps.sizeToken)) * 0.45));
   return {
     knobProps,
     inTableCell,
+    inDescriptionList: slot.inDescriptionList,
+    chromeless: slot.chromeless || inTableCell,
+    align: slot.align,
+    truncate: slot.truncate,
     glyphSize
   };
 }
@@ -122,30 +134,35 @@ function DisplayFrame(param) {
   } = param;
   var {
     knobProps,
-    inTableCell
+    chromeless
   } = useDisplayChrome();
-  if (inTableCell) {
+  if (chromeless) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       "data-component": "FieldDisplay",
       "data-field": field,
+      "data-chromeless": "",
       alignItems: "center",
+      justifyContent: "flex-start",
       minWidth: 0,
       flex: 1,
+      width: "100%",
       children
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
     "data-component": "FieldDisplay",
     "data-field": field,
+    "data-space": knobProps.space,
+    "data-size": knobProps.size,
     alignItems: "center",
     minWidth: 0,
     width: "100%",
     ...knobProps.surface,
     ...knobProps.borderRadius,
+    ...knobProps.panelPadding,
     ...(knobProps.outlined ? {
       backgroundColor: "transparent"
     } : void 0),
-    ...framePadding(knobProps.space),
     children
   });
 }
@@ -156,7 +173,8 @@ function ValueText(param) {
     align = "left",
     lines = 1,
     wrap = false,
-    empty = false
+    empty = false,
+    title
   } = param;
   var {
     knobProps
@@ -176,6 +194,9 @@ function ValueText(param) {
     width: wrap ? "100%" : void 0,
     display: wrap ? "block" : void 0,
     whiteSpace: wrap ? "pre-wrap" : void 0,
+    ...(import_tamagui.isWeb && title ? {
+      title
+    } : void 0),
     children
   });
 }
@@ -183,17 +204,27 @@ function TextCell(param) {
   var {
     children,
     mono = false,
-    align = "left",
+    align,
     lines = 1,
-    wrap = false
+    wrap
   } = param;
+  var _ref;
+  var {
+    inDescriptionList,
+    truncate,
+    align: slotAlign
+  } = useDisplayChrome();
   var empty = children === import_formatters.EMPTY;
+  var resolvedAlign = (_ref = align !== null && align !== void 0 ? align : slotAlign) !== null && _ref !== void 0 ? _ref : "left";
+  var resolvedWrap = wrap !== null && wrap !== void 0 ? wrap : inDescriptionList && !truncate;
+  var title = truncate && !resolvedWrap && typeof children === "string" && children !== import_formatters.EMPTY ? children : void 0;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ValueText, {
     mono,
-    align,
-    lines,
-    wrap,
+    align: resolvedAlign,
+    lines: truncate ? 1 : lines,
+    wrap: resolvedWrap,
     empty,
+    title,
     children
   });
 }
@@ -206,7 +237,8 @@ function InputDisplay(param) {
   } = param;
   var {
     knobProps,
-    inTableCell
+    inTableCell,
+    truncate
   } = useDisplayChrome();
   var text = (0, import_formatters.asText)(value);
   var link = href || (isSafeHttpUrl(value) ? value : void 0);
@@ -233,7 +265,7 @@ function InputDisplay(param) {
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TextCell, {
     mono,
-    wrap: Boolean(multiline && !inTableCell),
+    wrap: Boolean(multiline && !inTableCell && !truncate),
     children: text
   });
 }
@@ -242,13 +274,17 @@ function NumericDisplay(param) {
     value,
     fieldProps
   } = param;
+  var {
+    align
+  } = useDisplayChrome();
+  var numericAlign = align !== null && align !== void 0 ? align : "right";
   if (value == null || value === "") return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TextCell, {
-    align: "right",
+    align: numericAlign,
     children: import_formatters.EMPTY
   });
   var num = typeof value === "number" ? value : Number(value);
   if (Number.isNaN(num)) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TextCell, {
-    align: "right",
+    align: numericAlign,
     children: (0, import_formatters.asText)(value)
   });
   var formatted = (0, import_formatters.formatNumericText)(num, {
@@ -257,7 +293,7 @@ function NumericDisplay(param) {
   });
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TextCell, {
     mono: true,
-    align: "right",
+    align: numericAlign,
     children: formatted
   });
 }
@@ -335,21 +371,27 @@ function BooleanDisplay(param) {
   } = param;
   var {
     knobProps,
-    glyphSize
+    glyphSize,
+    align
   } = useDisplayChrome();
   var onMark = (0, import_theme.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
   if (value == null) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TextCell, {
-    align: "center",
+    align: align !== null && align !== void 0 ? align : "center",
     children: import_formatters.EMPTY
   });
   var marked = Boolean(value);
+  var glyphRadius = (0, import_utils.clampRadiusForControl)(knobProps.borderRadius.borderRadius, CHECKBOX_GLYPH_MAX_RADIUS_TOKEN);
+  var boxBorderWidth = Math.max(Number(knobProps.inputSurface.borderWidth) || 1, 2);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-checkbox-box": "",
+    "data-checkbox-radius": String(glyphRadius),
     width: glyphSize,
     height: glyphSize,
     ...knobProps.inputSurface,
-    ...knobProps.borderRadius,
+    borderWidth: boxBorderWidth,
+    borderRadius: glyphRadius,
     backgroundColor: marked ? import_colorRamps.formSelectedColors.mark : knobProps.outlined ? "transparent" : import_colorRamps.formControlColors.background,
-    borderColor: marked ? import_colorRamps.formSelectedColors.mark : import_colorRamps.formControlColors.border,
+    borderColor: marked ? import_colorRamps.formSelectedColors.mark : import_colorRamps.formControlColors.boundary,
     alignItems: "center",
     justifyContent: "center",
     "aria-hidden": true,
@@ -507,7 +549,8 @@ function ImageDisplay(param) {
 }
 function BarcodeDisplay(param) {
   var {
-    value
+    value,
+    fieldProps
   } = param;
   var {
     knobProps,
@@ -517,6 +560,8 @@ function BarcodeDisplay(param) {
   if (!text) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(TextCell, {
     children: import_formatters.EMPTY
   });
+  var formats = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.formats;
+  var format = Array.isArray(formats) ? formats[0] : typeof (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.format) === "string" ? fieldProps.format : void 0;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     alignItems: "center",
     minWidth: 0,
@@ -525,10 +570,18 @@ function BarcodeDisplay(param) {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ValueText, {
       mono: true,
       children: text
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BarcodePreview.BarcodePreview, {
+    }),
+    /* The value is already printed beside the symbol, so an undrawable one
+    contributes NOTHING rather than a second copy of the string. At this
+    bound that is every QR past a short value at a large size — a display
+    cell cannot hold 33 whole-pixel modules without growing the row. */
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_BarcodePreview.BarcodePreview, {
       value: text,
       height: Math.max(12, glyphSize),
-      moduleWidth: 1
+      moduleWidth: 1,
+      format: typeof format === "string" ? format : void 0,
+      textFallback: false
     })]
   });
 }
@@ -679,8 +732,21 @@ function FieldDisplay(param) {
     field = "input",
     value,
     fieldProps,
-    linkedValue
+    linkedValue,
+    chromeless = false,
+    align,
+    truncate = false
   } = param;
+  var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  var inDescriptionList = useIsInDescriptionList();
+  var slot = (0, import_react2.useMemo)(function () {
+    return {
+      chromeless: chromeless || inTableCell || inDescriptionList,
+      align: align !== null && align !== void 0 ? align : inDescriptionList ? "left" : void 0,
+      truncate,
+      inDescriptionList
+    };
+  }, [chromeless, inTableCell, inDescriptionList, align, truncate]);
   var body;
   switch (field) {
     case "input":
@@ -705,7 +771,8 @@ function FieldDisplay(param) {
       break;
     case "barcode":
       body = /* @__PURE__ */(0, import_jsx_runtime.jsx)(BarcodeDisplay, {
-        value
+        value,
+        fieldProps
       });
       break;
     case "stepper":
@@ -808,9 +875,12 @@ function FieldDisplay(param) {
       });
       break;
   }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DisplayFrame, {
-    field,
-    children: body
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DisplaySlotContext.Provider, {
+    value: slot,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DisplayFrame, {
+      field,
+      children: body
+    })
   });
 }
 //# sourceMappingURL=index.native.js.map