@overmap-ai/forms 1.0.12-links.1 → 1.0.12-links.10

package/dist/fields/constants.d.ts

@@ -18,3 +18,7 @@ export declare const FieldTypeToClsMapping: {
     readonly "multi-string": typeof MultiStringField;
     readonly "multi-select": typeof MultiSelectField;
 };
+export declare const linkOptions: {
+    target: string;
+    rel: string;
+};

package/dist/forms.js

@@ -5,13 +5,14 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Flex, Text, useSeverityColor, Checkbox, TextArea, Select, IconButton, Badge, MultiSelect, Button, ButtonList, divButtonProps, Tooltip, Separator, useDiscardAlertDialog, Dialog, DropdownItemMenu, useAlertDialog, useToast } from "@overmap-ai/blocks";
+import { Flex, Text, useSeverityColor, Checkbox, Select, IconButton, Badge, MultiSelect, Button, TextArea, ButtonList, divButtonProps, Tooltip, Separator, useDiscardAlertDialog, Dialog, DropdownItemMenu, useAlertDialog, useToast } from "@overmap-ai/blocks";
 import { useField, useFormikContext, useFormik, FormikProvider } from "formik";
-import React, { useMemo, memo, useCallback, useState, useEffect, useRef, forwardRef, Fragment as Fragment$1, useReducer } from "react";
-import { CheckCircledIcon, FontFamilyIcon, CalendarIcon, InputIcon, RowsIcon, PlusIcon, Cross1Icon, ListBulletIcon, DropdownMenuIcon, CheckboxIcon, UploadIcon, StarFilledIcon, StarIcon, QuestionMarkCircledIcon, PersonIcon, Pencil1Icon, TrashIcon, CopyIcon, DragHandleDots2Icon, DotsVerticalIcon } from "@radix-ui/react-icons";
+import React, { useMemo, memo, useCallback, useState, useRef, useEffect, forwardRef, Fragment as Fragment$1, useReducer } from "react";
+import { CheckCircledIcon, FontFamilyIcon, CalendarIcon, PlusIcon, Cross1Icon, ListBulletIcon, DropdownMenuIcon, CheckboxIcon, UploadIcon, InputIcon, RowsIcon, StarFilledIcon, StarIcon, QuestionMarkCircledIcon, PersonIcon, Pencil1Icon, TrashIcon, CopyIcon, DragHandleDots2Icon, DotsVerticalIcon } from "@radix-ui/react-icons";
 import { TextField as TextField$1, Box, Card, Heading, Avatar, Em, Strong, Tabs } from "@radix-ui/themes";
+import Linkify from "linkify-react";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
-import { slugify, useAppSelector, selectFormRevision, useSDK, selectSubmissionAttachments, selectFilteredUserForms, selectUserFormMapping, selectOrganization, selectUser, selectNumberOfUserForms, selectCurrentUser, classNames, isToday, getLocalDateString, selectLatestFormRevision, useFileSrc, selectSubmissionsForForm } from "@overmap-ai/core";
+import { slugify, classNames, useAppSelector, selectFormRevision, useSDK, selectSubmissionAttachments, selectFilteredUserForms, selectUserFormMapping, selectOrganization, selectUser, selectNumberOfUserForms, selectCurrentUser, isToday, getLocalDateString, selectLatestFormRevision, useFileSrc, selectSubmissionsForForm } from "@overmap-ai/core";
 import get from "lodash.get";
 import set from "lodash.set";
 import cloneDeep from "lodash.clonedeep";
@@ -106,7 +107,7 @@ class BaseField extends BaseFormElement {
 __publicField(BaseField, "fieldTypeName");
 __publicField(BaseField, "fieldTypeDescription");
 const description$1 = "_description_17zed_1";
-const styles$3 = {
+const styles$4 = {
   description: description$1
 };
 const InputWithLabel = (props) => {
@@ -120,7 +121,7 @@ const InputWithLabelAndHelpText = (props) => {
   const { helpText, children, severity } = props;
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
     children,
-    /* @__PURE__ */ jsx(Flex, { direction: "column", children: /* @__PURE__ */ jsx(Text, { size: "1", severity, className: styles$3.description, children: helpText }) })
+    /* @__PURE__ */ jsx(Flex, { direction: "column", children: /* @__PURE__ */ jsx(Text, { size: "1", severity, className: styles$4.description, children: helpText }) })
   ] });
 };
 const useFormikInput = (props) => {
@@ -472,65 +473,12 @@ __publicField(StringOrTextField, "_validateMax", (value, allValues) => {
   }
   return null;
 });
-const StringInput = memo(function StringInput2(props) {
-  const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
-  const color = useSeverityColor(severity);
-  console.log(inputId, label, fieldProps, field, rest);
-  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(TextField$1.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }) }) });
-});
-const _StringField = class _StringField extends StringOrTextField {
-  constructor(options) {
-    const { inputType = "text", ...rest } = options;
-    const maxLength = options.maxLength ? Math.min(500, options.maxLength) : 500;
-    const minLength = options.minLength ? Math.min(options.minLength, maxLength) : void 0;
-    super({ ...rest, maxLength, minLength, type: "string" });
-    __publicField(this, "inputType");
-    this.inputType = inputType;
-  }
-  serialize() {
-    return { ...super._serialize(), input_type: this.inputType };
-  }
-  static deserialize(data) {
-    if (data.type !== "string")
-      throw new Error("Type mismatch.");
-    const { maximum_length, minimum_length, input_type, ...rest } = data;
-    return new _StringField({ ...rest, maxLength: maximum_length, minLength: minimum_length, inputType: input_type });
-  }
-  getInput(props) {
-    return /* @__PURE__ */ jsx(StringInput, { field: this, ...props });
-  }
-};
-__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, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
-  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(TextArea, { ...rest, ...fieldProps, resize: "vertical", id: inputId, severity }) }) });
-});
-const _TextField = class _TextField extends StringOrTextField {
-  constructor(options) {
-    const maxLength = options.maxLength ? Math.min(5e3, options.maxLength) : 5e3;
-    const minLength = options.minLength ? Math.min(options.minLength, maxLength) : void 0;
-    super({ ...options, maxLength, minLength, type: "text" });
-  }
-  serialize() {
-    return super._serialize();
-  }
-  static deserialize(data) {
-    if (data.type !== "text")
-      throw new Error("Type mismatch.");
-    const { maximum_length, minimum_length, ...rest } = data;
-    return new _TextField({ ...rest, maxLength: maximum_length, minLength: minimum_length });
-  }
-  getInput(props) {
-    return /* @__PURE__ */ jsx(TextInput, { field: this, ...props });
-  }
+const TextFieldRoot = "_TextFieldRoot_8ge74_1";
+const TextFieldInputCopy = "_TextFieldInputCopy_8ge74_5";
+const styles$3 = {
+  TextFieldRoot,
+  TextFieldInputCopy
 };
-__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, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
   const { onChange, onBlur } = fieldProps;
@@ -955,16 +903,6 @@ __publicField(_MultiSelectField, "fieldTypeName", "Multi-select");
 __publicField(_MultiSelectField, "fieldTypeDescription", "Allows the user to select a multiple options from a list of options.");
 __publicField(_MultiSelectField, "Icon", CheckboxIcon);
 let MultiSelectField = _MultiSelectField;
-const FieldInputCloner = memo(function FieldInputCloner2({ field, ...props }) {
-  const [{ value: identifier }] = useField(field.options.clonedFieldIdentifier);
-  const deserializedField = useMemo(() => {
-    const options = field.options.getFieldToClone(identifier);
-    if (!options)
-      return null;
-    return deserialize(options);
-  }, [field.options, identifier]);
-  return useFieldInput(deserializedField, props);
-});
 class CustomField extends BaseField {
   constructor(options, Component) {
     super({ ...options, type: "custom" });
@@ -984,164 +922,6 @@ class CustomField extends BaseField {
 }
 __publicField(CustomField, "fieldTypeName", "Custom");
 __publicField(CustomField, "fieldTypeDescription", "Allows re-rendering of field already in the form");
-class FieldInputClonerField extends CustomField {
-  constructor(options) {
-    super(options, FieldInputCloner);
-  }
-}
-const FieldSectionLayout = memo(function FieldSectionLayout2(props) {
-  const { field: section, ...rest } = props;
-  const { label, description: description2, fields, condition } = section;
-  const { values, setFieldValue } = useFormikContext();
-  const conditionValue = (condition == null ? void 0 : condition.identifier) ? get(values, condition.identifier) : void 0;
-  const conditionMet = useMemo(() => isConditionMet(condition, conditionValue), [condition, conditionValue]);
-  useEffect(() => {
-    if (!conditionMet) {
-      for (const childField of fields) {
-        setFieldValue(childField.getId(), "").then();
-      }
-    }
-  }, [conditionMet, fields, setFieldValue]);
-  const inputs = useFieldInputs(fields, rest);
-  if (!conditionMet) {
-    return null;
-  }
-  if (!label) {
-    return inputs;
-  }
-  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-      /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: label }),
-      /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: description2 })
-    ] }),
-    inputs
-  ] }) });
-});
-const _FieldSection = class _FieldSection extends BaseFormElement {
-  constructor(options) {
-    const { label = null, fields, condition = null, conditional, ...base } = options;
-    super({ ...base, type: "section" });
-    __publicField(this, "label");
-    __publicField(this, "fields");
-    __publicField(this, "condition");
-    this.fields = fields;
-    this.condition = condition;
-    this.label = label;
-    if (conditional === false) {
-      this.condition = null;
-    }
-  }
-  static getFieldCreationSchema(options) {
-    if (options.length === 0)
-      return [];
-    return [
-      new BooleanField({
-        label: "Conditional",
-        description: "Conditionally show or hide this section.",
-        identifier: "conditional",
-        required: false
-      }),
-      // Declare a section that will hold options for the condition (if any).
-      new _FieldSection({
-        label: "Conditional settings",
-        identifier: "conditional-settings",
-        // This section will only be rendered if the above "Conditional" field is checked.
-        condition: {
-          identifier: "conditional",
-          value: true
-        },
-        // These are the options of the condition.
-        fields: [
-          // Declare a select field that will be used to select the field against which we will check the
-          // condition. This must be selected before the next field is rendered.
-          new SelectField({
-            label: "Field",
-            description: "The field to use for the condition.",
-            // The options (for the field against which we will check the condition) are all the labels of
-            // the fields in the previous section(s) (or fields declared before with no section) that
-            // support conditions. We pass in both the label and the identifier of each supported field. The
-            // identifier becomes the value of the option.
-            options: options.map((option) => {
-              if (!option.label)
-                return null;
-              if (option.type === "upload")
-                return null;
-              return {
-                label: option.label,
-                value: option.identifier
-              };
-            }).filter((option) => !!option),
-            identifier: "condition.identifier",
-            required: true
-          }),
-          // Declare a custom field that will be used to input a value for the condition. The value of the
-          // conditional field selected in the previous step must be equal to the value the user inputs into
-          // this field for the section to be rendered.
-          new FieldInputClonerField({
-            label: "Value",
-            identifier: "condition.value",
-            required: true,
-            clonedFieldIdentifier: "condition.identifier",
-            getFieldToClone(identifier) {
-              if (!identifier) {
-                return null;
-              }
-              const option = options.find((option2) => option2.identifier === identifier);
-              if (!option) {
-                console.error("Could not find field with identifier", identifier);
-                return null;
-              }
-              return {
-                ...option,
-                // Override some options to make it make sense in the context and to make it work with the framework.
-                label: "Value",
-                identifier: "condition.value",
-                description: "The value to compare against.",
-                required: option.type !== "boolean"
-              };
-            }
-          })
-        ]
-      })
-    ];
-  }
-  static deserialize(data) {
-    var _a;
-    if (data.type !== "section")
-      throw new Error("Invalid type");
-    const fields = ((_a = data.fields) == null ? void 0 : _a.map(deserializeField)) ?? [];
-    return new _FieldSection({ ...data, fields });
-  }
-  conditional() {
-    return this.condition !== null;
-  }
-  serialize() {
-    return {
-      ...super._serialize(),
-      label: this.label,
-      condition: this.condition,
-      conditional: this.conditional(),
-      fields: this.fields.map((field) => field.serialize())
-    };
-  }
-  getErrors(allValues) {
-    const errors = {};
-    for (const field of this.fields) {
-      const id = field.getId();
-      const error = field.getError(get(allValues, id), allValues);
-      if (error) {
-        set(errors, field.getId(), error);
-      }
-    }
-    return errors;
-  }
-  getInput(props) {
-    return /* @__PURE__ */ jsx(FieldSectionLayout, { field: this, ...props });
-  }
-};
-__publicField(_FieldSection, "fieldTypeName", "Section");
-__publicField(_FieldSection, "fieldTypeDescription", "Sections can be useful for grouping fields together. They can also be conditionally shown or hidden.");
-let FieldSection = _FieldSection;
 const previewImage = "_previewImage_1ig84_1";
 const styles$2 = {
   previewImage
@@ -1397,6 +1177,253 @@ const FieldTypeToClsMapping = {
   "multi-string": MultiStringField,
   "multi-select": MultiSelectField
 };
+const linkOptions = { target: "_blank", rel: "noopener" };
+const StringInput = memo(function StringInput2(props) {
+  const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+  const color = useSeverityColor(severity);
+  console.log(inputId, label, fieldProps, field, rest);
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxs(InputWithLabel, { severity, inputId, labelId, label, children: [
+    /* @__PURE__ */ jsx(TextField$1.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }),
+    /* @__PURE__ */ jsxs(TextField$1.Root, { className: styles$3.TextFieldRoot, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames(
+            "rt-TextFieldInput rt-r-size-2 rt-variant-surface",
+            styles$3.TextFieldInputCopy
+          ),
+          children: /* @__PURE__ */ jsx(Linkify, { options: linkOptions, children: fieldProps.value })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "rt-TextFieldChrome" })
+    ] })
+  ] }) });
+});
+const _StringField = class _StringField extends StringOrTextField {
+  constructor(options) {
+    const { inputType = "text", ...rest } = options;
+    const maxLength = options.maxLength ? Math.min(500, options.maxLength) : 500;
+    const minLength = options.minLength ? Math.min(options.minLength, maxLength) : void 0;
+    super({ ...rest, maxLength, minLength, type: "string" });
+    __publicField(this, "inputType");
+    this.inputType = inputType;
+  }
+  serialize() {
+    return { ...super._serialize(), input_type: this.inputType };
+  }
+  static deserialize(data) {
+    if (data.type !== "string")
+      throw new Error("Type mismatch.");
+    const { maximum_length, minimum_length, input_type, ...rest } = data;
+    return new _StringField({ ...rest, maxLength: maximum_length, minLength: minimum_length, inputType: input_type });
+  }
+  getInput(props) {
+    return /* @__PURE__ */ jsx(StringInput, { field: this, ...props });
+  }
+};
+__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, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxs(InputWithLabel, { severity, inputId, labelId, label, children: [
+    /* @__PURE__ */ jsx(TextArea, { ...rest, ...fieldProps, resize: "vertical", id: inputId, severity }),
+    /* @__PURE__ */ jsx("div", { className: "rt-TextAreaInput", children: /* @__PURE__ */ jsx(Linkify, { options: linkOptions, children: fieldProps.value }) }),
+    /* @__PURE__ */ jsx("div", { className: "rt-TextAreaChrome" })
+  ] }) });
+});
+const _TextField = class _TextField extends StringOrTextField {
+  constructor(options) {
+    const maxLength = options.maxLength ? Math.min(5e3, options.maxLength) : 5e3;
+    const minLength = options.minLength ? Math.min(options.minLength, maxLength) : void 0;
+    super({ ...options, maxLength, minLength, type: "text" });
+  }
+  serialize() {
+    return super._serialize();
+  }
+  static deserialize(data) {
+    if (data.type !== "text")
+      throw new Error("Type mismatch.");
+    const { maximum_length, minimum_length, ...rest } = data;
+    return new _TextField({ ...rest, maxLength: maximum_length, minLength: minimum_length });
+  }
+  getInput(props) {
+    return /* @__PURE__ */ jsx(TextInput, { field: this, ...props });
+  }
+};
+__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 FieldInputCloner = memo(function FieldInputCloner2({ field, ...props }) {
+  const [{ value: identifier }] = useField(field.options.clonedFieldIdentifier);
+  const deserializedField = useMemo(() => {
+    const options = field.options.getFieldToClone(identifier);
+    if (!options)
+      return null;
+    return deserialize(options);
+  }, [field.options, identifier]);
+  return useFieldInput(deserializedField, props);
+});
+class FieldInputClonerField extends CustomField {
+  constructor(options) {
+    super(options, FieldInputCloner);
+  }
+}
+const FieldSectionLayout = memo(function FieldSectionLayout2(props) {
+  const { field: section, ...rest } = props;
+  const { label, description: description2, fields, condition } = section;
+  const { values, setFieldValue } = useFormikContext();
+  const conditionValue = (condition == null ? void 0 : condition.identifier) ? get(values, condition.identifier) : void 0;
+  const conditionMet = useMemo(() => isConditionMet(condition, conditionValue), [condition, conditionValue]);
+  useEffect(() => {
+    if (!conditionMet) {
+      for (const childField of fields) {
+        setFieldValue(childField.getId(), "").then();
+      }
+    }
+  }, [conditionMet, fields, setFieldValue]);
+  const inputs = useFieldInputs(fields, rest);
+  if (!conditionMet) {
+    return null;
+  }
+  if (!label) {
+    return inputs;
+  }
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: label }),
+      /* @__PURE__ */ jsx(Text, { className: styles$4.description, children: description2 })
+    ] }),
+    inputs
+  ] }) });
+});
+const _FieldSection = class _FieldSection extends BaseFormElement {
+  constructor(options) {
+    const { label = null, fields, condition = null, conditional, ...base } = options;
+    super({ ...base, type: "section" });
+    __publicField(this, "label");
+    __publicField(this, "fields");
+    __publicField(this, "condition");
+    this.fields = fields;
+    this.condition = condition;
+    this.label = label;
+    if (conditional === false) {
+      this.condition = null;
+    }
+  }
+  static getFieldCreationSchema(options) {
+    if (options.length === 0)
+      return [];
+    return [
+      new BooleanField({
+        label: "Conditional",
+        description: "Conditionally show or hide this section.",
+        identifier: "conditional",
+        required: false
+      }),
+      // Declare a section that will hold options for the condition (if any).
+      new _FieldSection({
+        label: "Conditional settings",
+        identifier: "conditional-settings",
+        // This section will only be rendered if the above "Conditional" field is checked.
+        condition: {
+          identifier: "conditional",
+          value: true
+        },
+        // These are the options of the condition.
+        fields: [
+          // Declare a select field that will be used to select the field against which we will check the
+          // condition. This must be selected before the next field is rendered.
+          new SelectField({
+            label: "Field",
+            description: "The field to use for the condition.",
+            // The options (for the field against which we will check the condition) are all the labels of
+            // the fields in the previous section(s) (or fields declared before with no section) that
+            // support conditions. We pass in both the label and the identifier of each supported field. The
+            // identifier becomes the value of the option.
+            options: options.map((option) => {
+              if (!option.label)
+                return null;
+              if (option.type === "upload")
+                return null;
+              return {
+                label: option.label,
+                value: option.identifier
+              };
+            }).filter((option) => !!option),
+            identifier: "condition.identifier",
+            required: true
+          }),
+          // Declare a custom field that will be used to input a value for the condition. The value of the
+          // conditional field selected in the previous step must be equal to the value the user inputs into
+          // this field for the section to be rendered.
+          new FieldInputClonerField({
+            label: "Value",
+            identifier: "condition.value",
+            required: true,
+            clonedFieldIdentifier: "condition.identifier",
+            getFieldToClone(identifier) {
+              if (!identifier) {
+                return null;
+              }
+              const option = options.find((option2) => option2.identifier === identifier);
+              if (!option) {
+                console.error("Could not find field with identifier", identifier);
+                return null;
+              }
+              return {
+                ...option,
+                // Override some options to make it make sense in the context and to make it work with the framework.
+                label: "Value",
+                identifier: "condition.value",
+                description: "The value to compare against.",
+                required: option.type !== "boolean"
+              };
+            }
+          })
+        ]
+      })
+    ];
+  }
+  static deserialize(data) {
+    var _a;
+    if (data.type !== "section")
+      throw new Error("Invalid type");
+    const fields = ((_a = data.fields) == null ? void 0 : _a.map(deserializeField)) ?? [];
+    return new _FieldSection({ ...data, fields });
+  }
+  conditional() {
+    return this.condition !== null;
+  }
+  serialize() {
+    return {
+      ...super._serialize(),
+      label: this.label,
+      condition: this.condition,
+      conditional: this.conditional(),
+      fields: this.fields.map((field) => field.serialize())
+    };
+  }
+  getErrors(allValues) {
+    const errors = {};
+    for (const field of this.fields) {
+      const id = field.getId();
+      const error = field.getError(get(allValues, id), allValues);
+      if (error) {
+        set(errors, field.getId(), error);
+      }
+    }
+    return errors;
+  }
+  getInput(props) {
+    return /* @__PURE__ */ jsx(FieldSectionLayout, { field: this, ...props });
+  }
+};
+__publicField(_FieldSection, "fieldTypeName", "Section");
+__publicField(_FieldSection, "fieldTypeDescription", "Sections can be useful for grouping fields together. They can also be conditionally shown or hidden.");
+let FieldSection = _FieldSection;
 const deserializeField = (serializedField) => {
   const fieldType = serializedField.type;
   const fieldCls = FieldTypeToClsMapping[fieldType];
@@ -1535,7 +1562,7 @@ const FormRenderer = memo(
       [schema.title]
     );
     const Description = useMemo(
-      () => typeof schema.description === "string" ? /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: schema.description }) : schema.description,
+      () => typeof schema.description === "string" ? /* @__PURE__ */ jsx(Text, { className: styles$4.description, children: schema.description }) : schema.description,
       [schema.description]
     );
     const inputs = useFieldInputs(schema.fields, { formId: formId2, disabled: readonly });
@@ -2399,7 +2426,7 @@ const FieldSectionWithActions = memo(function FieldSectionWithActions2(props) {
         /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", grow: "1", children: [
           /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
             /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: field.label }),
-            /* @__PURE__ */ jsx(Text, { className: styles$3.description, children: field.description })
+            /* @__PURE__ */ jsx(Text, { className: styles$4.description, children: field.description })
           ] }),
           field.condition && /* @__PURE__ */ jsx(Text, { size: "1", children: /* @__PURE__ */ jsxs(Em, { children: [
             "Display only if ",