@overmap-ai/core 1.0.33-revamp-forms-builder.6 → 1.0.33-revamp-forms-builder.8

package/dist/forms/fields/FieldSection/FieldSectionLayout.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FieldSection } from ".";
+import { FieldSection } from "./FieldSection.tsx";
 import { ComponentProps } from "../typings.ts";
 /**
  * Used by FieldSection to render a section of fields.

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { NumberField } from ".";
+import type { NumberField } from "./NumberField.tsx";
 import { ComponentProps } from "../typings.ts";
 export declare const NumberInput: import("react").NamedExoticComponent<ComponentProps<NumberField>>;

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

@@ -1,13 +1,14 @@
 import { StringField, TextField } from "./StringOrTextFields";
 import { BooleanField } from "./BooleanField";
 import { DateField } from "./DateField";
+import { NumberField } from "./NumberField";
 import { MultiSelectField, SelectField } from "./SelectField";
 import { CustomField } from "./CustomField";
 import { MultiStringField } from "./MultiStringField";
 import { UploadField } from "./UploadField";
 export declare const FieldTypeToClsMapping: {
     readonly date: typeof DateField;
-    readonly number: typeof DateField;
+    readonly number: typeof NumberField;
     readonly boolean: typeof BooleanField;
     readonly select: typeof SelectField;
     readonly string: typeof StringField;

package/dist/overmap-core.js

@@ -375,7 +375,7 @@ function Item(fun, array) {
 Item.prototype.run = function() {
   this.fun.apply(null, this.array);
 };
-var title = "browser";
+var title$1 = "browser";
 var platform = "browser";
 var browser = true;
 var env = {};
@@ -431,7 +431,7 @@ function uptime() {
 }
 var browser$1 = {
   nextTick,
-  title,
+  title: title$1,
   browser,
   env,
   argv,
@@ -3441,15 +3441,15 @@ const defaultStore = configureStore({
     });
   }
 });
-function extractResponseFromError(error) {
+function extractResponseFromError(error2) {
   function isResponse(response) {
     const knownKeys = ["ok", "redirect", "clientError", "serverError", "error"];
     return typeof response === "object" && response !== null && knownKeys.every((key) => key in response);
   }
-  if (isResponse(error))
-    return error;
-  if (typeof error === "object" && error !== null) {
-    const typedError = error;
+  if (isResponse(error2))
+    return error2;
+  if (typeof error2 === "object" && error2 !== null) {
+    const typedError = error2;
     if (isResponse(typedError.response))
       return typedError.response;
     if (typedError.response && isResponse(typedError.response.response))
@@ -3566,8 +3566,8 @@ async function performRequest(action, client) {
   }
   try {
     return await requestToSend.query(queryParams);
-  } catch (error) {
-    const errorResponse = extractResponseFromError(error);
+  } catch (error2) {
+    const errorResponse = extractResponseFromError(error2);
     const status = errorResponse == null ? void 0 : errorResponse.status;
     if (status === 401) {
       console.debug("Forbidden; renewing tokens and retrying.");
@@ -3575,8 +3575,8 @@ async function performRequest(action, client) {
         await client.auth.renewTokens();
         console.debug("Successfully renewed tokens; retrying request.");
         return await requestToSend.query(queryParams);
-      } catch (error2) {
-        console.warn("Failed to renew tokens.", error2);
+      } catch (error22) {
+        console.warn("Failed to renew tokens.", error22);
         const loggedIn = state.authReducer.isLoggedIn;
         if (loggedIn) {
           console.warn("Signing out already signed-in user.");
@@ -3589,7 +3589,7 @@ async function performRequest(action, client) {
         });
       }
     }
-    const apiErrorMessage = extractErrorMessage(errorResponse, error) || "An unexpected error occurred.";
+    const apiErrorMessage = extractErrorMessage(errorResponse, error2) || "An unexpected error occurred.";
     throw new APIError(apiErrorMessage, errorResponse, {
       discard: discardStatuses.includes(status)
     });
@@ -3781,9 +3781,9 @@ class BaseApiService {
       };
       performRequest(fullOfflineAction, this.client).then((result) => {
         promise.resolve(result.body);
-      }).catch((error) => {
-        discard(error, fullOfflineAction);
-        promise.reject(error);
+      }).catch((error2) => {
+        discard(error2, fullOfflineAction);
+        promise.reject(error2);
       });
     } else {
       const innerPromise = store.dispatch(
@@ -3793,19 +3793,19 @@ class BaseApiService {
         if (response) {
           promise.resolve(response.body);
         } else {
-          const error = new APIError(
+          const error2 = new APIError(
             "Could not get a response from the server.",
             response,
             {
               discard: true
             }
           );
-          promise.reject(error);
+          promise.reject(error2);
         }
       };
-      const errorHandler = (error) => {
-        error.options.discard = true;
-        promise.reject(error);
+      const errorHandler = (error2) => {
+        error2.options.discard = true;
+        promise.reject(error2);
       };
       innerPromise.then(successOrUndefinedHandler, errorHandler);
     }
@@ -4752,17 +4752,17 @@ class IssueService extends BaseApiService {
     });
     void promise.then((result) => {
       store.dispatch(updateIssue(result));
-    }).catch((error) => {
+    }).catch((error2) => {
       var _a2;
-      console.error(error);
-      if (error instanceof APIError) {
+      console.error(error2);
+      if (error2 instanceof APIError) {
         (_a2 = unsafeShowToast) == null ? void 0 : _a2({
           title: "Could not create issue",
           description: "An unexpected error occurred while creating the issue."
         });
       }
       store.dispatch(removeIssue(issuePayload.offline_id));
-      throw error;
+      throw error2;
     });
     return [issuePayload, promise];
   }
@@ -6089,6 +6089,20 @@ const OvermapProvider = (props) => {
   }
   return /* @__PURE__ */ jsx(OvermapContext.Provider, { value: null, children: ret });
 };
+const tabsList = "_tabsList_h0sgi_1";
+const tabTrigger = "_tabTrigger_h0sgi_9";
+const floatingButtonContainer = "_floatingButtonContainer_h0sgi_13";
+const title = "_title_h0sgi_20";
+const description$2 = "_description_h0sgi_26";
+const error = "_error_h0sgi_33";
+const styles$7 = {
+  tabsList,
+  tabTrigger,
+  floatingButtonContainer,
+  title,
+  description: description$2,
+  error
+};
 class BaseFormElement {
   constructor(options) {
     __publicField(this, "type");
@@ -6155,15 +6169,15 @@ class BaseField extends BaseFormElement {
       return "This field is required.";
     }
     for (const validator of this.getFieldValidators()) {
-      const error = validator(value);
-      if (error)
-        return error;
+      const error2 = validator(value);
+      if (error2)
+        return error2;
     }
     if (allValues) {
       for (const validator of this.getFormValidators()) {
-        const error = validator(value, allValues);
-        if (error)
-          return error;
+        const error2 = validator(value, allValues);
+        if (error2)
+          return error2;
       }
     }
   }
@@ -6185,7 +6199,7 @@ class BaseField extends BaseFormElement {
 __publicField(BaseField, "fieldTypeName");
 __publicField(BaseField, "fieldTypeDescription");
 const description$1 = "_description_17zed_1";
-const styles$5 = {
+const styles$6 = {
   description: description$1
 };
 const InputWithLabel = (props) => {
@@ -6199,7 +6213,7 @@ const InputWithHelpText = (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$5.description, children: helpText }) })
+    /* @__PURE__ */ jsx(Flex, { direction: "column", children: /* @__PURE__ */ jsx(Text, { size: "1", severity, className: styles$6.description, children: helpText }) })
   ] });
 };
 const InputWithLabelAndHelpText = (props) => {
@@ -8217,20 +8231,20 @@ __publicField(StringOrTextField, "_validateMax", (path) => (value, allValues) =>
 });
 const clickableLinkContainer = "_clickableLinkContainer_1ace7_1";
 const TextFieldInputCopy = "_TextFieldInputCopy_1ace7_5";
-const styles$4 = {
+const styles$5 = {
   clickableLinkContainer,
   TextFieldInputCopy
 };
 const StringInput = memo(function StringInput2(props) {
   const [{ inputId, labelId, size, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
   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$4.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, color }) : /* @__PURE__ */ jsxs(TextField$1.Root, { className: styles$5.clickableLinkContainer, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         className: classNames$1(
           "rt-TextFieldInput rt-r-size-2 rt-variant-surface",
-          styles$4.TextFieldInputCopy
+          styles$5.TextFieldInputCopy
         ),
         children: /* @__PURE__ */ jsx(
           Linkify,
@@ -8894,7 +8908,7 @@ class CustomField extends BaseField {
 __publicField(CustomField, "fieldTypeName", "Custom");
 __publicField(CustomField, "fieldTypeDescription", "Allows re-rendering of field already in the form");
 const previewImage = "_previewImage_1ig84_1";
-const styles$3 = {
+const styles$4 = {
   previewImage
 };
 const convertBytesToLargestUnit = (bytes) => {
@@ -8983,7 +8997,7 @@ const NumberInput = memo(function NumberInput22(props) {
 });
 const DisplayFile = memo(function DisplayFile2({ file, field, onRemove, disabled }) {
   const [resolvedFile, setResolvedFile] = useState(null);
-  const error = useMemo(() => resolvedFile && field.getError([resolvedFile]), [field, resolvedFile]);
+  const error2 = useMemo(() => resolvedFile && field.getError([resolvedFile]), [field, resolvedFile]);
   const { url, name, size } = useMemo(() => {
     let url2 = null;
     let name2;
@@ -9023,10 +9037,10 @@ const DisplayFile = memo(function DisplayFile2({ file, field, onRemove, disabled
       /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
         /* @__PURE__ */ jsx(Text, { children: name }),
         /* @__PURE__ */ jsx(Text, { size: "1", children: size }),
-        error && /* @__PURE__ */ jsx(Text, { size: "1", severity: "danger", children: error })
+        error2 && /* @__PURE__ */ jsx(Text, { size: "1", severity: "danger", children: error2 })
       ] })
     ] }),
-    url && /* @__PURE__ */ jsx("img", { className: styles$3.previewImage, src: url, alt: name })
+    url && /* @__PURE__ */ jsx("img", { className: styles$4.previewImage, src: url, alt: name })
   ] }) });
 });
 const emptyUploadField = {
@@ -9154,9 +9168,11 @@ __publicField(_UploadField, "fieldTypeName", "Upload");
 __publicField(_UploadField, "fieldTypeDescription", "Allows a file to be uploaded.");
 __publicField(_UploadField, "Icon", UploadIcon);
 let UploadField = _UploadField;
+console.log(NumberField);
+console.log(DateField);
 const FieldTypeToClsMapping = {
   date: DateField,
-  number: DateField,
+  number: NumberField,
   boolean: BooleanField,
   select: SelectField,
   string: StringField,
@@ -9236,7 +9252,7 @@ const FieldSectionLayout = memo(function FieldSectionLayout2(props) {
   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$5.description, children: description2 })
+      /* @__PURE__ */ jsx(Text, { className: styles$6.description, children: description2 })
     ] }),
     inputs
   ] }) });
@@ -9363,9 +9379,9 @@ const _FieldSection = class _FieldSection extends BaseFormElement {
     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);
+      const error2 = field.getError(get(allValues, id), allValues);
+      if (error2) {
+        set(errors, field.getId(), error2);
       }
     }
     return errors;
@@ -9566,9 +9582,9 @@ const validateForm = (schema, form) => {
         throw new Error("Invalid field type");
       }
       const id = field.getId();
-      const error = field.getError(get(form, id), form);
-      if (error)
-        set(errors, id, error);
+      const error2 = field.getError(get(form, id), form);
+      if (error2)
+        set(errors, id, error2);
     }
   }
   if (hasKeys(errors))
@@ -9629,7 +9645,7 @@ const FormRenderer = memo(
       [schema.title]
     );
     const Description = useMemo(
-      () => typeof schema.description === "string" ? /* @__PURE__ */ jsx(Text, { className: styles$5.description, children: schema.description }) : schema.description,
+      () => typeof schema.description === "string" ? /* @__PURE__ */ jsx(Text, { className: styles$6.description, children: schema.description }) : schema.description,
       [schema.description]
     );
     const inputs = useFieldInputs(schema.fields, { formId: formId2, disabled: readonly });
@@ -9706,7 +9722,7 @@ const FormSubmissionViewer = memo(
 );
 const favoriteIcon = "_favoriteIcon_1bixi_1";
 const regularIcon = "_regularIcon_1bixi_9";
-const styles$2 = {
+const styles$3 = {
   favoriteIcon,
   regularIcon
 };
@@ -9818,7 +9834,7 @@ const FormBrowserEntry = (props) => {
           /* @__PURE__ */ jsx(
             IconButton,
             {
-              className: classNames$1(form.favorite ? styles$2.favoriteIcon : styles$2.regularIcon),
+              className: classNames$1(form.favorite ? styles$3.favoriteIcon : styles$3.regularIcon),
               variant: "ghost",
               onClick: handleFavoriteClick,
               "aria-label": form.favorite ? "Favorite form" : "Standard form",
@@ -9844,7 +9860,7 @@ const FormBrowserEntry = (props) => {
 };
 const submissionsContainer = "_submissionsContainer_9iirt_1";
 const stopHorizontalOverflow = "_stopHorizontalOverflow_9iirt_6";
-const styles$1 = {
+const styles$2 = {
   submissionsContainer,
   stopHorizontalOverflow
 };
@@ -9875,7 +9891,7 @@ const FormSubmissionBrowserEntry = memo(function FormSubmissionBrowserEntry2(pro
     }
   }, [submission, onSubmissionClick]);
   const row = /* @__PURE__ */ jsx(ButtonList.Item, { onClick: handleClick, asChild: true, children: /* @__PURE__ */ jsxs(Flex, { grow: "1", width: "100%", p: "2", gap: "2", justify: "between", children: [
-    /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", className: styles$1.stopHorizontalOverflow, children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", className: styles$2.stopHorizontalOverflow, children: [
       /* @__PURE__ */ jsx(Avatar, { src: creatorProfileSrc, size: "1", fallback: creatorProfileFallback }),
       /* @__PURE__ */ jsx(Text, { size: "2", noWrap: true, children: labelType === "creator" ? (createdBy || currentUser).username : revision.title })
     ] }),
@@ -9919,7 +9935,7 @@ const FormSubmissionBrowser = memo(function FormSubmissionBrowser2(props) {
   return /* @__PURE__ */ jsx(
     ButtonList.Root,
     {
-      className: classNames$1(styles$1.submissionsContainer, className),
+      className: classNames$1(styles$2.submissionsContainer, className),
       size: "small",
       variant,
       before: !compact && /* @__PURE__ */ jsxs(Text, { severity: "info", children: [
@@ -9983,11 +9999,11 @@ const PatchFormProvider = memo(
     );
     const validate = useCallback(
       (form) => {
-        const error = validateForm(schema, form);
-        if (error) {
-          onError(error);
+        const error2 = validateForm(schema, form);
+        if (error2) {
+          onError(error2);
         }
-        return error;
+        return error2;
       },
       [schema, onError]
     );
@@ -10008,6 +10024,10 @@ const PatchFormProvider = memo(
     return /* @__PURE__ */ jsx(FormikProvider, { value: formik, children: /* @__PURE__ */ jsx("form", { ...rest, ref, onSubmit: formik.handleSubmit, children }) });
   })
 );
+const typeBadge$1 = "_typeBadge_m8kq2_1";
+const styles$1 = {
+  typeBadge: typeBadge$1
+};
 const formId = "form-builder";
 const fieldsToChoose = [
   ["string", "text"],
@@ -10168,8 +10188,12 @@ const FieldActions = memo((props) => {
   ] });
 });
 FieldActions.displayName = "FieldActions";
-const description = "_description_17zed_1";
+const popoverInputsContainer = "_popoverInputsContainer_12h31_1";
+const typeBadge = "_typeBadge_12h31_5";
+const description = "_description_12h31_10";
 const styles = {
+  popoverInputsContainer,
+  typeBadge,
   description
 };
 const FieldSettingsPopover = memo((props) => {
@@ -10193,7 +10217,7 @@ const FieldSettingsPopover = memo((props) => {
         },
         "settings"
       ),
-      children: () => /* @__PURE__ */ jsx(Flex, { direction: "column", style: { maxWidth: "240px" }, children: popoverInputs })
+      children: () => /* @__PURE__ */ jsx(Flex, { className: styles.popoverInputsContainer, direction: "column", children: popoverInputs })
     }
   );
 });
@@ -10292,8 +10316,8 @@ const FieldBuilder = memo((props) => {
     showPopoverInputs = initial.conditional;
   }
   const popoverHasErrors = popoverFields.some((field) => {
-    const error = get(errors, fieldCls === FieldSection ? `${parentPath}.${index2}.condition` : field.getId());
-    return error && (typeof error !== "object" || hasKeys(error));
+    const error2 = get(errors, fieldCls === FieldSection ? `${parentPath}.${index2}.condition` : field.getId());
+    return error2 && (typeof error2 !== "object" || hasKeys(error2));
   });
   return /* @__PURE__ */ jsxs(Flex, { align: "center", grow: "1", children: [
     /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
@@ -10328,7 +10352,7 @@ const FieldBuilder = memo((props) => {
           }
         ),
         /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
-          /* @__PURE__ */ jsx(Badge, { style: { width: "fit-content", height: "24px" }, children: (_f = fieldTypeItems.flat().find((item) => item.value === type)) == null ? void 0 : _f.content }),
+          /* @__PURE__ */ jsx(Badge, { className: styles.typeBadge, children: (_f = fieldTypeItems.flat().find((item) => item.value === type)) == null ? void 0 : _f.content }),
           showPopoverInputs && /* @__PURE__ */ jsx(FieldSettingsPopover, { popoverInputs, hasError: popoverHasErrors })
         ] })
       ] }),
@@ -10339,7 +10363,6 @@ const FieldBuilder = memo((props) => {
           render: ({ setValue, value }) => /* @__PURE__ */ jsx(
             Input,
             {
-              className: styles.Input,
               placeholder: `Enter a ${type === "section" ? "section" : "field"} label`,
               value,
               onChange: (event) => {
@@ -10360,7 +10383,7 @@ const FieldBuilder = memo((props) => {
           render: ({ setValue, value }) => /* @__PURE__ */ jsx(
             TextArea,
             {
-              style: { minHeight: "max-content" },
+              className: styles.description,
               placeholder: `Enter a ${type === "section" ? "section" : "field"} description`,
               value,
               onChange: (event) => {
@@ -10745,7 +10768,7 @@ const BasicFieldSection = memo((props) => {
       children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
         /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: "2", children: [
           /* @__PURE__ */ jsx(Text, { size: "4", children: field.label }),
-          /* @__PURE__ */ jsx(Badge, { style: { width: "fit-content" }, children: /* @__PURE__ */ jsxs(Text, { children: [
+          /* @__PURE__ */ jsx(Badge, { className: styles$1.typeBadge, children: /* @__PURE__ */ jsxs(Text, { children: [
             field.fields.length,
             " Fields"
           ] }) })
@@ -10753,7 +10776,7 @@ const BasicFieldSection = memo((props) => {
         /* @__PURE__ */ jsx(Flex, { direction: "row", gap: "2", children: field.fields.map((child) => {
           const childInfo = FieldTypeToClsMapping[child.type];
           const Icon = childInfo.Icon;
-          return /* @__PURE__ */ jsx(Flex, { gap: "3", children: /* @__PURE__ */ jsxs(Badge, { style: { width: "fit-content" }, children: [
+          return /* @__PURE__ */ jsx(Flex, { gap: "3", children: /* @__PURE__ */ jsxs(Badge, { className: styles$1.typeBadge, children: [
             /* @__PURE__ */ jsx(Icon, {}),
             /* @__PURE__ */ jsx(Text, { children: childInfo.fieldTypeName })
           ] }) }, child.identifier);
@@ -10905,22 +10928,10 @@ const FormBuilder = memo(
     });
     const previewSchema = useMemo(() => formRevisionToSchema(formik.values), [formik.values]);
     return /* @__PURE__ */ jsx(Tabs.Root, { ref, defaultValue: "edit", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
-      /* @__PURE__ */ jsxs(
-        Tabs.List,
-        {
-          style: {
-            display: "flex",
-            position: "sticky",
-            top: 0,
-            zIndex: 2e3,
-            backgroundColor: "var(--color-background)"
-          },
-          children: [
-            /* @__PURE__ */ jsx(Tabs.Trigger, { style: { flex: 1 }, value: "edit", children: "Edit" }),
-            /* @__PURE__ */ jsx(Tabs.Trigger, { style: { flex: 1 }, value: "preview", children: "Preview" })
-          ]
-        }
-      ),
+      /* @__PURE__ */ jsxs(Tabs.List, { className: styles$7.TabsList, children: [
+        /* @__PURE__ */ jsx(Tabs.Trigger, { className: styles$7.tabTrigger, value: "edit", children: "Edit" }),
+        /* @__PURE__ */ jsx(Tabs.Trigger, { className: styles$7.tabTrigger, value: "preview", children: "Preview" })
+      ] }),
       /* @__PURE__ */ jsxs(Tabs.Content, { value: "edit", children: [
         /* @__PURE__ */ jsxs(Text, { children: [
           "Create your form using various field types. Sections can be",
@@ -10939,12 +10950,9 @@ const FormBuilder = memo(
                 render: ({ setValue, value, meta }) => /* @__PURE__ */ jsx(InputWithHelpText, { severity: "danger", helpText: meta.error ?? null, children: /* @__PURE__ */ jsx(
                   Input,
                   {
-                    style: {
-                      // var(--accent-a11) for red and var(--accent-1) for gray
-                      border: meta.error ? "1px solid #ff9592" : "1px solid #5a6169",
-                      paddingLeft: "8px",
-                      fontWeight: "bold"
-                    },
+                    className: classNames$1(styles$7.title, {
+                      [styles$7.error]: meta.error
+                    }),
                     placeholder: "Form title",
                     value,
                     onChange: (event) => {
@@ -10965,12 +10973,7 @@ const FormBuilder = memo(
                 render: ({ setValue, value }) => /* @__PURE__ */ jsx(
                   TextArea,
                   {
-                    style: {
-                      minHeight: "max-content",
-                      border: "1px solid #5a6169",
-                      paddingLeft: "8px",
-                      paddingTop: "8px"
-                    },
+                    className: styles$7.description,
                     placeholder: "Explain the purpose of this form",
                     value,
                     onChange: (event) => {
@@ -10987,24 +10990,10 @@ const FormBuilder = memo(
             /* @__PURE__ */ jsx(FieldsEditor, {}),
             /* @__PURE__ */ jsx(Text, { severity: "danger", size: "1", children: typeof formik.errors.fields === "string" && formik.errors.fields })
           ] }),
-          /* @__PURE__ */ jsxs(
-            Flex,
-            {
-              justify: "end",
-              align: "center",
-              gap: "2",
-              style: {
-                position: "sticky",
-                bottom: 0,
-                paddingBottom: "10px",
-                paddingRight: "10px"
-              },
-              children: [
-                /* @__PURE__ */ jsx(Button, { type: "button", variant: "solid", severity: "info", onClick: onCancel, children: "Cancel" }),
-                /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save form" })
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxs(Flex, { className: styles$7.floatingButtonContainer, align: "center", justify: "end", gap: "2", children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "solid", severity: "info", onClick: onCancel, children: "Cancel" }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save form" })
+          ] })
         ] }) })
       ] }),
       /* @__PURE__ */ jsx(Tabs.Content, { value: "preview", children: /* @__PURE__ */ jsx(FormRenderer, { schema: previewSchema, onSubmit: previewSubmit }) })