@overmap-ai/core 1.0.33-revamp-forms-builder.19 → 1.0.33-revamp-forms-builder.21

package/dist/forms/fields/BaseField/BaseField.d.ts

@@ -16,8 +16,8 @@ export declare abstract class BaseFormElement<TIdentifier extends FieldTypeIdent
 }
 export declare const emptyBaseField: {
     label: string;
-    required: boolean;
     description: string;
+    required: boolean;
 };
 export interface FieldCreationSchemaObject {
     field: AnyField;

package/dist/forms/fields/BaseField/hooks.d.ts

@@ -8,6 +8,7 @@ export declare const useFormikInput: <TField extends AnyField>(props: ComponentP
     readonly inputId: string;
     readonly labelId: string;
     readonly label: string;
+    readonly showInputOnly: boolean | undefined;
     readonly fieldProps: import("formik").FieldInputProps<ValueOfField<TField>>;
     readonly helpers: import("formik").FieldHelperProps<ValueOfField<TField>>;
     readonly field: TField;

package/dist/forms/fields/BooleanField/BooleanField.d.ts

@@ -6,8 +6,8 @@ import { ISerializedField, SerializedBooleanField } from "../../typings";
 export declare const emptyBooleanField: {
     type: string;
     label: string;
-    required: boolean;
     description: string;
+    required: boolean;
 };
 export declare class BooleanField extends BaseField<boolean, "boolean"> {
     static readonly fieldTypeName = "Checkbox";

package/dist/forms/fields/BooleanField/BooleanInput.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { BooleanField } from "./BooleanField";
 import { ComponentProps } from "../typings";
-export declare const BooleanInput: import("react").NamedExoticComponent<ComponentProps<BooleanField>>;
+export declare const BooleanInput: import("react").MemoExoticComponent<(props: ComponentProps<BooleanField>) => import("react/jsx-runtime").JSX.Element>;

package/dist/forms/fields/CustomField/CustomField.d.ts

@@ -6,8 +6,8 @@ export type CustomFieldOptions<TValue> = ChildFieldOptions<TValue>;
 export declare const emptyCustomField: {
     type: string;
     label: string;
-    required: boolean;
     description: string;
+    required: boolean;
 };
 export declare class CustomField<TValue extends FieldValue, 
 /** The options passed to constructor */

package/dist/forms/fields/DateField/DateField.d.ts

@@ -6,8 +6,8 @@ import { ISerializedField, SerializedDateField } from "../../typings";
 export declare const emptyDateField: {
     type: string;
     label: string;
-    required: boolean;
     description: string;
+    required: boolean;
 };
 export declare class DateField extends BaseField<string, "date"> {
     static readonly fieldTypeName = "Date";

package/dist/forms/fields/DateField/DateInput.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DateField } from "./DateField";
 import { ComponentProps } from "../typings";
-export declare const DateInput: import("react").NamedExoticComponent<ComponentProps<DateField>>;
+export declare const DateInput: import("react").MemoExoticComponent<(props: ComponentProps<DateField>) => import("react/jsx-runtime").JSX.Element>;

package/dist/forms/fields/MultiStringField/MultiStringField.d.ts

@@ -12,8 +12,8 @@ export declare const emptyMultiStringField: {
     minimum_length: number;
     maximum_length: null;
     label: string;
-    required: boolean;
     description: string;
+    required: boolean;
 };
 /**
  * A field that lets the user input multiple strings. Each string must be unique. Useful for things like:

package/dist/forms/fields/MultiStringField/MultiStringInput.d.ts

@@ -5,4 +5,4 @@ import { MultiStringField } from "./MultiStringField";
  * Allows the user to create an array of unique strings and customize the order.
  * User to generate options for the Select field.
  */
-export declare const MultiStringInput: import("react").NamedExoticComponent<ComponentProps<MultiStringField>>;
+export declare const MultiStringInput: import("react").MemoExoticComponent<(props: ComponentProps<MultiStringField>) => import("react/jsx-runtime").JSX.Element>;

package/dist/forms/fields/NumberField/NumberField.d.ts

@@ -11,8 +11,8 @@ export declare const emptyNumberField: {
     maximum: number;
     integers: boolean;
     label: string;
-    required: boolean;
     description: string;
+    required: boolean;
 };
 export interface NumberFieldOptions extends ChildFieldOptions<NumberFieldValue> {
     maximum?: number;

package/dist/forms/fields/NumberField/NumberInput.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ComponentProps } from "../typings";
 import { NumberField } from "./NumberField";
-export declare const NumberInput: import("react").NamedExoticComponent<ComponentProps<NumberField>>;
+export declare const NumberInput: import("react").MemoExoticComponent<(props: ComponentProps<NumberField>) => import("react/jsx-runtime").JSX.Element>;

package/dist/forms/fields/SelectField/MultiSelectField.d.ts

@@ -11,8 +11,8 @@ export declare const emptyMultiSelectField: {
     type: string;
     options: never[];
     label: string;
-    required: boolean;
     description: string;
+    required: boolean;
 };
 export declare class MultiSelectField extends BaseSelectField<SelectFieldOptionValue[], "multi-select"> {
     static readonly fieldTypeName = "Multi-select";

package/dist/forms/fields/SelectField/MultiSelectInput.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ComponentProps } from "../typings";
 import { MultiSelectField } from "./MultiSelectField";
-export declare const MultiSelectInput: import("react").NamedExoticComponent<ComponentProps<MultiSelectField>>;
+export declare const MultiSelectInput: import("react").MemoExoticComponent<(props: ComponentProps<MultiSelectField>) => import("react/jsx-runtime").JSX.Element>;

package/dist/forms/fields/SelectField/SelectField.d.ts

@@ -11,8 +11,8 @@ export declare const emptySelectField: {
     type: string;
     options: never[];
     label: string;
-    required: boolean;
     description: string;
+    required: boolean;
 };
 export declare class SelectField extends BaseSelectField<SelectFieldOptionValue, "select"> {
     static readonly fieldTypeName = "Dropdown";

package/dist/forms/fields/SelectField/SelectInput.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ComponentProps } from "../typings";
 import { SelectField } from "./SelectField";
-export declare const SelectInput: import("react").NamedExoticComponent<ComponentProps<SelectField>>;
+export declare const SelectInput: import("react").MemoExoticComponent<(props: ComponentProps<SelectField>) => import("react/jsx-runtime").JSX.Element>;

package/dist/forms/fields/StringOrTextFields/StringField/StringField.d.ts

@@ -11,8 +11,8 @@ export declare const emptyStringField: {
     maximum_length: number;
     input_type: string;
     label: string;
-    required: boolean;
     description: string;
+    required: boolean;
 };
 export declare class StringField extends StringOrTextField<"string"> {
     static readonly fieldTypeName = "Short Text";

package/dist/forms/fields/StringOrTextFields/StringField/StringInput.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { StringField } from "./StringField";
 import { ComponentProps } from "../../typings";
-export declare const StringInput: import("react").NamedExoticComponent<ComponentProps<StringField>>;
+export declare const StringInput: import("react").MemoExoticComponent<(props: ComponentProps<StringField>) => import("react/jsx-runtime").JSX.Element>;

package/dist/forms/fields/StringOrTextFields/TextField/TextField.d.ts

@@ -8,8 +8,8 @@ export declare const emptyTextField: {
     type: string;
     maximum_length: number;
     label: string;
-    required: boolean;
     description: string;
+    required: boolean;
 };
 export declare class TextField extends StringOrTextField<"text"> {
     static readonly fieldTypeName = "Paragraph";

package/dist/forms/fields/StringOrTextFields/TextField/TextInput.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TextField } from "./TextField";
 import { ComponentProps } from "../../typings";
-export declare const TextInput: import("react").NamedExoticComponent<ComponentProps<TextField>>;
+export declare const TextInput: import("react").MemoExoticComponent<(props: ComponentProps<TextField>) => import("react/jsx-runtime").JSX.Element>;

package/dist/forms/fields/UploadField/UploadField.d.ts

@@ -16,8 +16,8 @@ export declare const emptyUploadField: {
     maximum_size: undefined;
     maximum_files: number;
     label: string;
-    required: boolean;
     description: string;
+    required: boolean;
 };
 export declare class UploadField extends BaseField<File[], "upload"> {
     static readonly fieldTypeName = "Upload";

package/dist/forms/fields/UploadField/UploadInput.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { UploadField } from "./UploadField";
 import { ComponentProps } from "../typings";
-export declare const NumberInput: import("react").NamedExoticComponent<ComponentProps<UploadField>>;
+export declare const NumberInput: import("react").MemoExoticComponent<(props: ComponentProps<UploadField>) => import("react/jsx-runtime").JSX.Element>;

package/dist/forms/fields/constants.d.ts

@@ -22,8 +22,8 @@ export declare const FieldTypeToEmptyFieldMapping: {
     readonly date: {
         type: string;
         label: string;
-        required: boolean;
         description: string;
+        required: boolean;
     };
     readonly number: {
         type: string;
@@ -31,42 +31,42 @@ export declare const FieldTypeToEmptyFieldMapping: {
         maximum: number;
         integers: boolean;
         label: string;
-        required: boolean;
         description: string;
+        required: boolean;
     };
     readonly boolean: {
         type: string;
         label: string;
-        required: boolean;
         description: string;
+        required: boolean;
     };
     readonly select: {
         type: string;
         options: never[];
         label: string;
-        required: boolean;
         description: string;
+        required: boolean;
     };
     readonly string: {
         type: string;
         maximum_length: number;
         input_type: string;
         label: string;
-        required: boolean;
         description: string;
+        required: boolean;
     };
     readonly text: {
         type: string;
         maximum_length: number;
         label: string;
-        required: boolean;
         description: string;
+        required: boolean;
     };
     readonly custom: {
         type: string;
         label: string;
-        required: boolean;
         description: string;
+        required: boolean;
     };
     readonly upload: {
         type: string;
@@ -74,22 +74,22 @@ export declare const FieldTypeToEmptyFieldMapping: {
         maximum_size: undefined;
         maximum_files: number;
         label: string;
-        required: boolean;
         description: string;
+        required: boolean;
     };
     readonly "multi-string": {
         type: string;
         minimum_length: number;
         maximum_length: null;
         label: string;
-        required: boolean;
         description: string;
+        required: boolean;
     };
     readonly "multi-select": {
         type: string;
         options: never[];
         label: string;
-        required: boolean;
         description: string;
+        required: boolean;
     };
 };

package/dist/forms/fields/typings.d.ts

@@ -20,6 +20,7 @@ export interface ComponentProps<TField extends BaseFormElement> extends Omit<HTM
     field: TField;
     formId: string;
     size?: TextProps["size"];
+    showInputOnly?: boolean;
 }
 export type GetInputProps<TField extends BaseFormElement> = Omit<ComponentProps<TField>, "field">;
 export type AnyField = BaseField<any>;

package/dist/overmap-core.js

@@ -6133,9 +6133,9 @@ class BaseFormElement {
   }
 }
 const emptyBaseField = {
-  label: "",
-  required: false,
-  description: ""
+  label: "Question",
+  description: "Optional description",
+  required: false
 };
 class BaseField extends BaseFormElement {
   constructor(options) {
@@ -6225,7 +6225,7 @@ const InputWithLabelAndHelpText = (props) => {
   return /* @__PURE__ */ jsx(InputWithHelpText, { ...restProps, children });
 };
 const useFormikInput = (props) => {
-  const { id, field, formId: formId2, size, ...rest } = props;
+  const { id, field, formId: formId2, size, showInputOnly, ...rest } = props;
   const [fieldProps, meta, helpers] = useField(field.getId());
   const { touched } = meta;
   const helpText = meta.error ?? field.description;
@@ -6259,6 +6259,7 @@ const useFormikInput = (props) => {
       inputId,
       labelId,
       label,
+      showInputOnly,
       fieldProps: fieldPropsWithValidation,
       helpers,
       field
@@ -6267,8 +6268,11 @@ const useFormikInput = (props) => {
   ];
 };
 const truthyValues = [true, "true"];
-const BooleanInput = memo(function BooleanInput2(props) {
-  const [{ inputId, labelId, size, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+const BooleanInput = memo((props) => {
+  const [{ inputId, labelId, size, severity, showInputOnly, fieldProps }, rest] = useFormikInput(props);
+  let [{ helpText, label }] = useFormikInput(props);
+  helpText = showInputOnly ? null : helpText;
+  label = showInputOnly ? "" : label;
   const color = useSeverityColor(severity);
   const value = truthyValues.includes(fieldProps.value);
   return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(
@@ -6298,6 +6302,7 @@ const BooleanInput = memo(function BooleanInput2(props) {
     }
   ) });
 });
+BooleanInput.displayName = "BooleanInput";
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null)
     return {};
@@ -8149,8 +8154,11 @@ const Tabs = Object.assign({}, {
   Trigger: TabsTrigger,
   Content: TabsContent
 });
-const NumberInput$1 = memo(function NumberInput2(props) {
-  const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+const NumberInput$1 = memo((props) => {
+  const [{ inputId, labelId, size, severity, showInputOnly, fieldProps, field }, rest] = useFormikInput(props);
+  let [{ helpText, label }] = useFormikInput(props);
+  helpText = showInputOnly ? null : helpText;
+  label = showInputOnly ? "" : label;
   const color = useSeverityColor(severity);
   return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(
     TextField$1.Input,
@@ -8159,6 +8167,7 @@ const NumberInput$1 = memo(function NumberInput2(props) {
       ...fieldProps,
       type: "number",
       id: inputId,
+      placeholder: "Enter a number",
       min: field.minimum,
       max: field.maximum,
       step: field.integers ? 1 : 0.1,
@@ -8166,6 +8175,7 @@ const NumberInput$1 = memo(function NumberInput2(props) {
     }
   ) }) });
 });
+NumberInput$1.displayName = "NumberInput";
 const emptyNumberField = {
   ...emptyBaseField,
   type: "number",
@@ -8296,12 +8306,16 @@ __publicField(_NumberField, "_validateMax", (path) => (value, allValues) => {
   return null;
 });
 let NumberField = _NumberField;
-const DateInput = memo(function DateInput2(props) {
-  const [{ inputId, labelId, size, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+const DateInput = memo((props) => {
+  const [{ inputId, labelId, size, severity, showInputOnly, fieldProps }, rest] = useFormikInput(props);
+  let [{ helpText, label }] = useFormikInput(props);
+  helpText = showInputOnly ? null : helpText;
+  label = showInputOnly ? "" : label;
   const color = useSeverityColor(severity);
   const value = fieldProps.value ? fieldProps.value.split("T")[0] : "";
   return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(TextField$1.Input, { ...rest, ...fieldProps, type: "date", id: inputId, color, value }) }) });
 });
+DateInput.displayName = "DateInput";
 const emptyDateField = {
   ...emptyBaseField,
   type: "date"
@@ -8442,10 +8456,23 @@ const styles$5 = {
   clickableLinkContainer,
   TextFieldInputCopy
 };
-const StringInput = memo(function StringInput2(props) {
-  const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+const StringInput = memo((props) => {
+  const [{ inputId, labelId, size, severity, showInputOnly, fieldProps, field }, rest] = useFormikInput(props);
+  let [{ helpText, label }] = useFormikInput(props);
+  helpText = showInputOnly ? null : helpText;
+  label = showInputOnly ? "" : label;
   const color = useSeverityColor(severity);
-  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: !rest.disabled ? /* @__PURE__ */ jsx(TextField$1.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }) : /* @__PURE__ */ jsxs(TextField$1.Root, { className: styles$5.clickableLinkContainer, children: [
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: !rest.disabled ? /* @__PURE__ */ jsx(
+    TextField$1.Input,
+    {
+      ...rest,
+      ...fieldProps,
+      type: field.inputType,
+      id: inputId,
+      placeholder: "Enter a short description",
+      color
+    }
+  ) : /* @__PURE__ */ jsxs(TextField$1.Root, { className: styles$5.clickableLinkContainer, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -8468,6 +8495,7 @@ const StringInput = memo(function StringInput2(props) {
     /* @__PURE__ */ jsx("div", { className: "rt-TextFieldChrome" })
   ] }) }) });
 });
+StringInput.displayName = "StringInput";
 const emptyStringField = {
   ...emptyBaseField,
   type: "string",
@@ -8500,10 +8528,24 @@ __publicField(_StringField, "fieldTypeName", "Short Text");
 __publicField(_StringField, "fieldTypeDescription", "Short text fields can hold up to 500 characters on a single line.");
 __publicField(_StringField, "Icon", InputIcon);
 let StringField = _StringField;
-const TextInput = memo(function TextInput2(props) {
-  const [{ inputId, labelId, size, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
-  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(TextArea, { ...rest, ...fieldProps, resize: "vertical", id: inputId, severity }) }) });
+const TextInput = memo((props) => {
+  const [{ inputId, labelId, size, severity, showInputOnly, fieldProps }, rest] = useFormikInput(props);
+  let [{ helpText, label }] = useFormikInput(props);
+  helpText = showInputOnly ? null : helpText;
+  label = showInputOnly ? "" : label;
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { size, severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(
+    TextArea,
+    {
+      ...rest,
+      ...fieldProps,
+      resize: "vertical",
+      id: inputId,
+      placeholder: "Enter a description",
+      severity
+    }
+  ) }) });
 });
+TextInput.displayName = "TextInput";
 const emptyTextField = {
   ...emptyBaseField,
   type: "text",
@@ -8532,9 +8574,12 @@ __publicField(_TextField, "fieldTypeName", "Paragraph");
 __publicField(_TextField, "fieldTypeDescription", "Paragraph fields can hold up to 5000 characters and can have multiple lines.");
 __publicField(_TextField, "Icon", RowsIcon);
 let TextField = _TextField;
-const SelectInput = memo(function SelectInput2(props) {
-  const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+const SelectInput = memo((props) => {
+  const [{ inputId, labelId, size, severity, showInputOnly, fieldProps, field }, rest] = useFormikInput(props);
   const { onChange, onBlur } = fieldProps;
+  let [{ helpText, label }] = useFormikInput(props);
+  helpText = showInputOnly ? null : helpText;
+  label = showInputOnly ? "" : label;
   const options = useMemo(
     () => field.options.map((option) => ({ value: option.value, itemContent: option.label })),
     [field.options]
@@ -8559,6 +8604,7 @@ const SelectInput = memo(function SelectInput2(props) {
     }
   ) }) });
 });
+SelectInput.displayName = "SelectInput";
 const emptySection = (id = "", fields = []) => ({
   type: "section",
   fields,
@@ -8723,8 +8769,11 @@ const useFieldReordering = () => {
   );
   return { reorderSection, reorderField };
 };
-const MultiStringInput = memo(function MultiStringInput2(props) {
-  const [{ inputId, labelId, size, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+const MultiStringInput = memo((props) => {
+  const [{ inputId, labelId, size, severity, showInputOnly, fieldProps }, rest] = useFormikInput(props);
+  let [{ helpText, label }] = useFormikInput(props);
+  helpText = showInputOnly ? null : helpText;
+  label = showInputOnly ? "" : label;
   const color = useSeverityColor(severity);
   const value = useMemo(
     () => Array.isArray(fieldProps.value) ? fieldProps.value : [],
@@ -8865,6 +8914,7 @@ const MultiStringInput = memo(function MultiStringInput2(props) {
     ] }) })
   ] }) });
 });
+MultiStringInput.displayName = "MultiStringInput";
 const emptyMultiStringField = {
   ...emptyBaseField,
   type: "multi-string",
@@ -8999,9 +9049,12 @@ const parseValueToArray = (value) => {
     return value;
   return [value];
 };
-const MultiSelectInput = memo(function MultiSelectInput2(props) {
-  const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+const MultiSelectInput = memo((props) => {
+  const [{ inputId, labelId, size, severity, showInputOnly, fieldProps, field }, rest] = useFormikInput(props);
   const { onChange, onBlur } = fieldProps;
+  let [{ helpText, label }] = useFormikInput(props);
+  helpText = showInputOnly ? null : helpText;
+  label = showInputOnly ? "" : label;
   const value = useMemo(() => parseValueToArray(fieldProps.value), [fieldProps.value]);
   const handleChange = useCallback(
     (value2) => {
@@ -9024,6 +9077,7 @@ const MultiSelectInput = memo(function MultiSelectInput2(props) {
     }
   ) }) });
 });
+MultiSelectInput.displayName = "MultiSelectInput";
 const emptyMultiSelectField = {
   ...emptyBaseField,
   type: "multi-select",
@@ -9115,21 +9169,25 @@ const convertBytesToLargestUnit = (bytes) => {
   });
   return formatter.format(sizeInUnit);
 };
-const NumberInput = memo(function NumberInput22(props) {
+const NumberInput = memo((props) => {
   var _a2;
-  const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+  const [{ inputId, labelId, size, severity, helpText, showInputOnly, fieldProps, field }, rest] = useFormikInput(props);
   const { onChange } = fieldProps;
+  let [{ label }] = useFormikInput(props);
+  label = showInputOnly ? "" : label;
   const color = useSeverityColor(severity);
   const input = useRef(null);
   const { value } = fieldProps;
   const updatedHelpText = useMemo(() => {
+    if (showInputOnly)
+      return null;
     if (helpText)
       return helpText;
     if (field.maxFileSize) {
       return `Maximum file size: ${field.maxFileSize}MB`;
     }
     return null;
-  }, [field.maxFileSize, helpText]);
+  }, [field.maxFileSize, helpText, showInputOnly]);
   const handleClick = useCallback(() => {
     var _a3;
     (_a3 = input.current) == null ? void 0 : _a3.click();
@@ -9148,7 +9206,7 @@ const NumberInput = memo(function NumberInput22(props) {
   const buttonText = field.maxFiles > 1 ? multipleButtonText : singleButtonText;
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
     /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText: updatedHelpText, severity, children: /* @__PURE__ */ jsxs(InputWithLabel, { size, severity, inputId, labelId, label, children: [
-      /* @__PURE__ */ jsx(Flex, { direction: "row", gap: "2", children: /* @__PURE__ */ jsx(Box, { width: "max-content", asChild: true, children: /* @__PURE__ */ jsxs(Button, { ...rest, onClick: handleClick, children: [
+      /* @__PURE__ */ jsx(Flex, { direction: "row", gap: "2", children: /* @__PURE__ */ jsx(Box, { width: "max-content", asChild: true, children: /* @__PURE__ */ jsxs(Button, { ...rest, variant: "soft", onClick: handleClick, children: [
         /* @__PURE__ */ jsx(UploadIcon, {}),
         " ",
         buttonText
@@ -9183,7 +9241,9 @@ const NumberInput = memo(function NumberInput22(props) {
     )) })
   ] });
 });
-const DisplayFile = memo(function DisplayFile2({ file, field, onRemove, disabled }) {
+NumberInput.displayName = "NumberInput";
+const DisplayFile = memo((props) => {
+  const { file, field, onRemove, disabled } = props;
   const [resolvedFile, setResolvedFile] = useState(null);
   const error2 = useMemo(() => resolvedFile && field.getError([resolvedFile]), [field, resolvedFile]);
   const { url, name, size } = useMemo(() => {
@@ -9231,6 +9291,7 @@ const DisplayFile = memo(function DisplayFile2({ file, field, onRemove, disabled
     url && /* @__PURE__ */ jsx("img", { className: styles$4.previewImage, src: url, alt: name })
   ] }) });
 });
+DisplayFile.displayName = "DisplayFile";
 const emptyUploadField = {
   ...emptyBaseField,
   type: "upload",
@@ -10213,13 +10274,15 @@ const FieldActions = memo((props) => {
   ] });
 });
 FieldActions.displayName = "FieldActions";
-const popoverInputsContainer = "_popoverInputsContainer_1s3np_1";
-const typeBadge = "_typeBadge_1s3np_5";
-const description = "_description_1s3np_10";
+const popoverInputsContainer = "_popoverInputsContainer_18pn8_1";
+const typeBadge = "_typeBadge_18pn8_5";
+const description = "_description_18pn8_10";
+const previewInput = "_previewInput_18pn8_14";
 const styles = {
   popoverInputsContainer,
   typeBadge,
-  description
+  description,
+  previewInput
 };
 const FieldSettingsPopover = memo((props) => {
   const { popoverInputs, hasError } = props;
@@ -10344,8 +10407,10 @@ const FieldBuilder = memo((props) => {
     const error2 = get(errors, fieldCls === FieldSection ? `${parentPath}.${index2}.condition` : field.getId());
     return error2 && (typeof error2 !== "object" || hasKeys(error2));
   });
+  const deserializedField = useMemo(() => deserialize(initial), [initial]);
+  const previewInput2 = useFieldInput(deserializedField, { formId, disabled: true, showInputOnly: true });
   return /* @__PURE__ */ jsxs(Flex, { align: "center", grow: "1", children: [
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", grow: "1", children: [
       fieldCls === FieldSection && /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
         directlyShownFields.length > 0 && directlyShownInputs,
         /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
@@ -10401,6 +10466,7 @@ const FieldBuilder = memo((props) => {
           )
         }
       ),
+      fieldCls !== FieldSection && /* @__PURE__ */ jsx("div", { className: styles.previewInput, children: previewInput2 }),
       /* @__PURE__ */ jsx(
         PatchField,
         {
@@ -10795,7 +10861,7 @@ const BasicFieldSection = memo((props) => {
           /* @__PURE__ */ jsx(Text, { size: "4", children: field.label }),
           /* @__PURE__ */ jsx(Badge, { className: styles$1.typeBadge, children: /* @__PURE__ */ jsxs(Text, { children: [
             field.fields.length,
-            " Fields"
+            " fields"
           ] }) })
         ] }),
         /* @__PURE__ */ jsx(Flex, { direction: "row", gap: "2", children: field.fields.map((child) => {