fix: Adding space between fields

package.json

@@ -37,12 +37,10 @@
     "publish": "lerna publish"
   },
   "dependencies": {
-    "@types/invariant": "^2.2.35",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.70.0",
     "uniforms": "4.0.0-alpha.5"
   },
   "devDependencies": {
@@ -59,6 +57,7 @@
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/invariant": "^2.2.35",
     "@types/jest": "^29.4.0",
     "@types/lodash": "^4.14.168",
     "@types/node": "^20.0.0",
@@ -72,6 +71,7 @@
     "jest": "^29.4.2",
     "jest-environment-jsdom": "^29.4.2",
     "rimraf": "^5.0.0",
+    "sass": "^1.70.0",
     "simpl-schema": "^3.4.1",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",

src/AutoForm.scss

@@ -0,0 +1,12 @@
+/*
+  This is required since there's a div between the form
+  element and its children that breaks the following styles
+    - display: grid
+    - gap: var(--pf-c-form--GridGap)
+  from @patternfly and making the fields very close to
+  each other
+*/
+form[data-testid='autoform'] > div {
+  display: inherit;
+  gap: inherit;
+}

src/AutoForm.tsx

@@ -19,6 +19,7 @@
 
 import { AutoForm } from "uniforms";
 import ValidatedQuickForm from "./ValidatedQuickForm";
+import './AutoForm.scss';
 
 function Auto(parent: any): any {
   class _ extends AutoForm.Auto(parent) {