diff --git a/packages/antd/package.json b/packages/antd/package.json
index 5f6c230d50..2cd404f4eb 100644
--- a/packages/antd/package.json
+++ b/packages/antd/package.json
@@ -8,29 +8,29 @@
   "type": "module",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     },
     "./dist": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./dist/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     }
   },
   "scripts": {
diff --git a/packages/antd/test/__snapshots__/GridSnap.test.tsx.snap b/packages/antd/test/__snapshots__/GridSnap.test.tsx.snap
index 33dbb45d9e..2a492b2c20 100644
--- a/packages/antd/test/__snapshots__/GridSnap.test.tsx.snap
+++ b/packages/antd/test/__snapshots__/GridSnap.test.tsx.snap
@@ -1280,103 +1280,143 @@ exports[`Complex grid renders person and address and employment in a complex gri
                           }
                         }
                       >
-                        <div
-                          aria-describedby="root_employment__error root_employment__description root_employment__help"
-                          className="ant-radio-group ant-radio-group-outline css-dev-only-do-not-override-1d4w9r2"
-                          id="root_employment"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <label
-                            className="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
-                            onClick={[Function]}
-                            style={{}}
-                          >
-                            <span
-                              className="ant-radio ant-wave-target ant-radio-checked"
-                            >
-                              <input
-                                autoFocus={false}
-                                checked={true}
-                                className="ant-radio-input"
-                                disabled={false}
-                                id="root_employment-0"
-                                name="root_employment"
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                type="radio"
-                                value="0"
-                              />
-                              <span
-                                className="ant-radio-inner"
-                              />
-                            </span>
-                            <span
-                              className="ant-radio-label"
-                            >
-                              Company
-                            </span>
-                          </label>
-                          <label
-                            className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
-                            onClick={[Function]}
-                            style={{}}
-                          >
-                            <span
-                              className="ant-radio ant-wave-target"
-                            >
-                              <input
-                                autoFocus={false}
-                                checked={false}
-                                className="ant-radio-input"
-                                disabled={false}
-                                id="root_employment-1"
-                                name="root_employment"
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                type="radio"
-                                value="1"
-                              />
-                              <span
-                                className="ant-radio-inner"
-                              />
-                            </span>
-                            <span
-                              className="ant-radio-label"
-                            >
-                              Education
-                            </span>
-                          </label>
-                          <label
-                            className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
-                            onClick={[Function]}
-                            style={{}}
+                        <div>
+                          <div
+                            className="ant-form-item css-dev-only-do-not-override-1d4w9r2"
                           >
-                            <span
-                              className="ant-radio ant-wave-target"
-                            >
-                              <input
-                                autoFocus={false}
-                                checked={false}
-                                className="ant-radio-input"
-                                disabled={false}
-                                id="root_employment-2"
-                                name="root_employment"
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                type="radio"
-                                value="2"
-                              />
-                              <span
-                                className="ant-radio-inner"
-                              />
-                            </span>
-                            <span
-                              className="ant-radio-label"
+                            <div
+                              className="ant-row ant-form-item-row css-dev-only-do-not-override-1d4w9r2"
+                              style={
+                                {
+                                  "rowGap": undefined,
+                                }
+                              }
                             >
-                              Other
-                            </span>
-                          </label>
+                              <div
+                                className="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-1d4w9r2"
+                                style={{}}
+                              >
+                                <label
+                                  className=""
+                                  htmlFor="root_employment"
+                                  title="Employment"
+                                >
+                                  Employment
+                                </label>
+                              </div>
+                              <div
+                                className="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-1d4w9r2"
+                                style={{}}
+                              >
+                                <div
+                                  className="ant-form-item-control-input"
+                                >
+                                  <div
+                                    className="ant-form-item-control-input-content"
+                                  >
+                                    <div
+                                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                                      className="ant-radio-group ant-radio-group-outline css-dev-only-do-not-override-1d4w9r2"
+                                      id="root_employment"
+                                      onBlur={[Function]}
+                                      onFocus={[Function]}
+                                    >
+                                      <label
+                                        className="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
+                                        onClick={[Function]}
+                                        style={{}}
+                                      >
+                                        <span
+                                          className="ant-radio ant-wave-target ant-radio-checked"
+                                        >
+                                          <input
+                                            autoFocus={false}
+                                            checked={true}
+                                            className="ant-radio-input"
+                                            disabled={false}
+                                            id="root_employment-0"
+                                            name="root_employment"
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            type="radio"
+                                            value="0"
+                                          />
+                                          <span
+                                            className="ant-radio-inner"
+                                          />
+                                        </span>
+                                        <span
+                                          className="ant-radio-label"
+                                        >
+                                          Company
+                                        </span>
+                                      </label>
+                                      <label
+                                        className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
+                                        onClick={[Function]}
+                                        style={{}}
+                                      >
+                                        <span
+                                          className="ant-radio ant-wave-target"
+                                        >
+                                          <input
+                                            autoFocus={false}
+                                            checked={false}
+                                            className="ant-radio-input"
+                                            disabled={false}
+                                            id="root_employment-1"
+                                            name="root_employment"
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            type="radio"
+                                            value="1"
+                                          />
+                                          <span
+                                            className="ant-radio-inner"
+                                          />
+                                        </span>
+                                        <span
+                                          className="ant-radio-label"
+                                        >
+                                          Education
+                                        </span>
+                                      </label>
+                                      <label
+                                        className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
+                                        onClick={[Function]}
+                                        style={{}}
+                                      >
+                                        <span
+                                          className="ant-radio ant-wave-target"
+                                        >
+                                          <input
+                                            autoFocus={false}
+                                            checked={false}
+                                            className="ant-radio-input"
+                                            disabled={false}
+                                            id="root_employment-2"
+                                            name="root_employment"
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            type="radio"
+                                            value="2"
+                                          />
+                                          <span
+                                            className="ant-radio-inner"
+                                          />
+                                        </span>
+                                        <span
+                                          className="ant-radio-label"
+                                        >
+                                          Other
+                                        </span>
+                                      </label>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
                         </div>
                       </div>
                       <div
@@ -3082,103 +3122,143 @@ exports[`Complex grid renders person and address and employment in a complex gri
                           }
                         }
                       >
-                        <div
-                          aria-describedby="root_employment__error root_employment__description root_employment__help"
-                          className="ant-radio-group ant-radio-group-outline css-dev-only-do-not-override-1d4w9r2"
-                          id="root_employment"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <label
-                            className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
-                            onClick={[Function]}
-                            style={{}}
-                          >
-                            <span
-                              className="ant-radio ant-wave-target"
-                            >
-                              <input
-                                autoFocus={false}
-                                checked={false}
-                                className="ant-radio-input"
-                                disabled={false}
-                                id="root_employment-0"
-                                name="root_employment"
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                type="radio"
-                                value="0"
-                              />
-                              <span
-                                className="ant-radio-inner"
-                              />
-                            </span>
-                            <span
-                              className="ant-radio-label"
-                            >
-                              Company
-                            </span>
-                          </label>
-                          <label
-                            className="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
-                            onClick={[Function]}
-                            style={{}}
-                          >
-                            <span
-                              className="ant-radio ant-wave-target ant-radio-checked"
-                            >
-                              <input
-                                autoFocus={false}
-                                checked={true}
-                                className="ant-radio-input"
-                                disabled={false}
-                                id="root_employment-1"
-                                name="root_employment"
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                type="radio"
-                                value="1"
-                              />
-                              <span
-                                className="ant-radio-inner"
-                              />
-                            </span>
-                            <span
-                              className="ant-radio-label"
-                            >
-                              Education
-                            </span>
-                          </label>
-                          <label
-                            className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
-                            onClick={[Function]}
-                            style={{}}
+                        <div>
+                          <div
+                            className="ant-form-item css-dev-only-do-not-override-1d4w9r2"
                           >
-                            <span
-                              className="ant-radio ant-wave-target"
-                            >
-                              <input
-                                autoFocus={false}
-                                checked={false}
-                                className="ant-radio-input"
-                                disabled={false}
-                                id="root_employment-2"
-                                name="root_employment"
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                type="radio"
-                                value="2"
-                              />
-                              <span
-                                className="ant-radio-inner"
-                              />
-                            </span>
-                            <span
-                              className="ant-radio-label"
+                            <div
+                              className="ant-row ant-form-item-row css-dev-only-do-not-override-1d4w9r2"
+                              style={
+                                {
+                                  "rowGap": undefined,
+                                }
+                              }
                             >
-                              Other
-                            </span>
-                          </label>
+                              <div
+                                className="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-1d4w9r2"
+                                style={{}}
+                              >
+                                <label
+                                  className=""
+                                  htmlFor="root_employment"
+                                  title="Employment"
+                                >
+                                  Employment
+                                </label>
+                              </div>
+                              <div
+                                className="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-1d4w9r2"
+                                style={{}}
+                              >
+                                <div
+                                  className="ant-form-item-control-input"
+                                >
+                                  <div
+                                    className="ant-form-item-control-input-content"
+                                  >
+                                    <div
+                                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                                      className="ant-radio-group ant-radio-group-outline css-dev-only-do-not-override-1d4w9r2"
+                                      id="root_employment"
+                                      onBlur={[Function]}
+                                      onFocus={[Function]}
+                                    >
+                                      <label
+                                        className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
+                                        onClick={[Function]}
+                                        style={{}}
+                                      >
+                                        <span
+                                          className="ant-radio ant-wave-target"
+                                        >
+                                          <input
+                                            autoFocus={false}
+                                            checked={false}
+                                            className="ant-radio-input"
+                                            disabled={false}
+                                            id="root_employment-0"
+                                            name="root_employment"
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            type="radio"
+                                            value="0"
+                                          />
+                                          <span
+                                            className="ant-radio-inner"
+                                          />
+                                        </span>
+                                        <span
+                                          className="ant-radio-label"
+                                        >
+                                          Company
+                                        </span>
+                                      </label>
+                                      <label
+                                        className="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
+                                        onClick={[Function]}
+                                        style={{}}
+                                      >
+                                        <span
+                                          className="ant-radio ant-wave-target ant-radio-checked"
+                                        >
+                                          <input
+                                            autoFocus={false}
+                                            checked={true}
+                                            className="ant-radio-input"
+                                            disabled={false}
+                                            id="root_employment-1"
+                                            name="root_employment"
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            type="radio"
+                                            value="1"
+                                          />
+                                          <span
+                                            className="ant-radio-inner"
+                                          />
+                                        </span>
+                                        <span
+                                          className="ant-radio-label"
+                                        >
+                                          Education
+                                        </span>
+                                      </label>
+                                      <label
+                                        className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
+                                        onClick={[Function]}
+                                        style={{}}
+                                      >
+                                        <span
+                                          className="ant-radio ant-wave-target"
+                                        >
+                                          <input
+                                            autoFocus={false}
+                                            checked={false}
+                                            className="ant-radio-input"
+                                            disabled={false}
+                                            id="root_employment-2"
+                                            name="root_employment"
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            type="radio"
+                                            value="2"
+                                          />
+                                          <span
+                                            className="ant-radio-inner"
+                                          />
+                                        </span>
+                                        <span
+                                          className="ant-radio-label"
+                                        >
+                                          Other
+                                        </span>
+                                      </label>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
                         </div>
                       </div>
                       <div
@@ -4962,103 +5042,143 @@ exports[`Complex grid renders person and address and employment in a complex gri
                           }
                         }
                       >
-                        <div
-                          aria-describedby="root_employment__error root_employment__description root_employment__help"
-                          className="ant-radio-group ant-radio-group-outline css-dev-only-do-not-override-1d4w9r2"
-                          id="root_employment"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <label
-                            className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
-                            onClick={[Function]}
-                            style={{}}
-                          >
-                            <span
-                              className="ant-radio ant-wave-target"
-                            >
-                              <input
-                                autoFocus={false}
-                                checked={false}
-                                className="ant-radio-input"
-                                disabled={false}
-                                id="root_employment-0"
-                                name="root_employment"
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                type="radio"
-                                value="0"
-                              />
-                              <span
-                                className="ant-radio-inner"
-                              />
-                            </span>
-                            <span
-                              className="ant-radio-label"
-                            >
-                              Company
-                            </span>
-                          </label>
-                          <label
-                            className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
-                            onClick={[Function]}
-                            style={{}}
-                          >
-                            <span
-                              className="ant-radio ant-wave-target"
-                            >
-                              <input
-                                autoFocus={false}
-                                checked={false}
-                                className="ant-radio-input"
-                                disabled={false}
-                                id="root_employment-1"
-                                name="root_employment"
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                type="radio"
-                                value="1"
-                              />
-                              <span
-                                className="ant-radio-inner"
-                              />
-                            </span>
-                            <span
-                              className="ant-radio-label"
-                            >
-                              Education
-                            </span>
-                          </label>
-                          <label
-                            className="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
-                            onClick={[Function]}
-                            style={{}}
+                        <div>
+                          <div
+                            className="ant-form-item css-dev-only-do-not-override-1d4w9r2"
                           >
-                            <span
-                              className="ant-radio ant-wave-target ant-radio-checked"
-                            >
-                              <input
-                                autoFocus={false}
-                                checked={true}
-                                className="ant-radio-input"
-                                disabled={false}
-                                id="root_employment-2"
-                                name="root_employment"
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                type="radio"
-                                value="2"
-                              />
-                              <span
-                                className="ant-radio-inner"
-                              />
-                            </span>
-                            <span
-                              className="ant-radio-label"
+                            <div
+                              className="ant-row ant-form-item-row css-dev-only-do-not-override-1d4w9r2"
+                              style={
+                                {
+                                  "rowGap": undefined,
+                                }
+                              }
                             >
-                              Other
-                            </span>
-                          </label>
+                              <div
+                                className="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-1d4w9r2"
+                                style={{}}
+                              >
+                                <label
+                                  className=""
+                                  htmlFor="root_employment"
+                                  title="Employment"
+                                >
+                                  Employment
+                                </label>
+                              </div>
+                              <div
+                                className="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-1d4w9r2"
+                                style={{}}
+                              >
+                                <div
+                                  className="ant-form-item-control-input"
+                                >
+                                  <div
+                                    className="ant-form-item-control-input-content"
+                                  >
+                                    <div
+                                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                                      className="ant-radio-group ant-radio-group-outline css-dev-only-do-not-override-1d4w9r2"
+                                      id="root_employment"
+                                      onBlur={[Function]}
+                                      onFocus={[Function]}
+                                    >
+                                      <label
+                                        className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
+                                        onClick={[Function]}
+                                        style={{}}
+                                      >
+                                        <span
+                                          className="ant-radio ant-wave-target"
+                                        >
+                                          <input
+                                            autoFocus={false}
+                                            checked={false}
+                                            className="ant-radio-input"
+                                            disabled={false}
+                                            id="root_employment-0"
+                                            name="root_employment"
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            type="radio"
+                                            value="0"
+                                          />
+                                          <span
+                                            className="ant-radio-inner"
+                                          />
+                                        </span>
+                                        <span
+                                          className="ant-radio-label"
+                                        >
+                                          Company
+                                        </span>
+                                      </label>
+                                      <label
+                                        className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
+                                        onClick={[Function]}
+                                        style={{}}
+                                      >
+                                        <span
+                                          className="ant-radio ant-wave-target"
+                                        >
+                                          <input
+                                            autoFocus={false}
+                                            checked={false}
+                                            className="ant-radio-input"
+                                            disabled={false}
+                                            id="root_employment-1"
+                                            name="root_employment"
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            type="radio"
+                                            value="1"
+                                          />
+                                          <span
+                                            className="ant-radio-inner"
+                                          />
+                                        </span>
+                                        <span
+                                          className="ant-radio-label"
+                                        >
+                                          Education
+                                        </span>
+                                      </label>
+                                      <label
+                                        className="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
+                                        onClick={[Function]}
+                                        style={{}}
+                                      >
+                                        <span
+                                          className="ant-radio ant-wave-target ant-radio-checked"
+                                        >
+                                          <input
+                                            autoFocus={false}
+                                            checked={true}
+                                            className="ant-radio-input"
+                                            disabled={false}
+                                            id="root_employment-2"
+                                            name="root_employment"
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            type="radio"
+                                            value="2"
+                                          />
+                                          <span
+                                            className="ant-radio-inner"
+                                          />
+                                        </span>
+                                        <span
+                                          className="ant-radio-label"
+                                        >
+                                          Other
+                                        </span>
+                                      </label>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
                         </div>
                       </div>
                       <div
@@ -6453,103 +6573,143 @@ exports[`Complex grid renders person and address and employment in a complex gri
                           }
                         }
                       >
-                        <div
-                          aria-describedby="root_employment__error root_employment__description root_employment__help"
-                          className="ant-radio-group ant-radio-group-outline css-dev-only-do-not-override-1d4w9r2"
-                          id="root_employment"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <label
-                            className="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
-                            onClick={[Function]}
-                            style={{}}
-                          >
-                            <span
-                              className="ant-radio ant-wave-target ant-radio-checked"
-                            >
-                              <input
-                                autoFocus={false}
-                                checked={true}
-                                className="ant-radio-input"
-                                disabled={false}
-                                id="root_employment-0"
-                                name="root_employment"
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                type="radio"
-                                value="0"
-                              />
-                              <span
-                                className="ant-radio-inner"
-                              />
-                            </span>
-                            <span
-                              className="ant-radio-label"
-                            >
-                              Company
-                            </span>
-                          </label>
-                          <label
-                            className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
-                            onClick={[Function]}
-                            style={{}}
-                          >
-                            <span
-                              className="ant-radio ant-wave-target"
-                            >
-                              <input
-                                autoFocus={false}
-                                checked={false}
-                                className="ant-radio-input"
-                                disabled={false}
-                                id="root_employment-1"
-                                name="root_employment"
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                type="radio"
-                                value="1"
-                              />
-                              <span
-                                className="ant-radio-inner"
-                              />
-                            </span>
-                            <span
-                              className="ant-radio-label"
-                            >
-                              Education
-                            </span>
-                          </label>
-                          <label
-                            className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
-                            onClick={[Function]}
-                            style={{}}
+                        <div>
+                          <div
+                            className="ant-form-item css-dev-only-do-not-override-1d4w9r2"
                           >
-                            <span
-                              className="ant-radio ant-wave-target"
-                            >
-                              <input
-                                autoFocus={false}
-                                checked={false}
-                                className="ant-radio-input"
-                                disabled={false}
-                                id="root_employment-2"
-                                name="root_employment"
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                type="radio"
-                                value="2"
-                              />
-                              <span
-                                className="ant-radio-inner"
-                              />
-                            </span>
-                            <span
-                              className="ant-radio-label"
+                            <div
+                              className="ant-row ant-form-item-row css-dev-only-do-not-override-1d4w9r2"
+                              style={
+                                {
+                                  "rowGap": undefined,
+                                }
+                              }
                             >
-                              Other
-                            </span>
-                          </label>
+                              <div
+                                className="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-1d4w9r2"
+                                style={{}}
+                              >
+                                <label
+                                  className=""
+                                  htmlFor="root_employment"
+                                  title="Employment"
+                                >
+                                  Employment
+                                </label>
+                              </div>
+                              <div
+                                className="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-1d4w9r2"
+                                style={{}}
+                              >
+                                <div
+                                  className="ant-form-item-control-input"
+                                >
+                                  <div
+                                    className="ant-form-item-control-input-content"
+                                  >
+                                    <div
+                                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                                      className="ant-radio-group ant-radio-group-outline css-dev-only-do-not-override-1d4w9r2"
+                                      id="root_employment"
+                                      onBlur={[Function]}
+                                      onFocus={[Function]}
+                                    >
+                                      <label
+                                        className="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
+                                        onClick={[Function]}
+                                        style={{}}
+                                      >
+                                        <span
+                                          className="ant-radio ant-wave-target ant-radio-checked"
+                                        >
+                                          <input
+                                            autoFocus={false}
+                                            checked={true}
+                                            className="ant-radio-input"
+                                            disabled={false}
+                                            id="root_employment-0"
+                                            name="root_employment"
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            type="radio"
+                                            value="0"
+                                          />
+                                          <span
+                                            className="ant-radio-inner"
+                                          />
+                                        </span>
+                                        <span
+                                          className="ant-radio-label"
+                                        >
+                                          Company
+                                        </span>
+                                      </label>
+                                      <label
+                                        className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
+                                        onClick={[Function]}
+                                        style={{}}
+                                      >
+                                        <span
+                                          className="ant-radio ant-wave-target"
+                                        >
+                                          <input
+                                            autoFocus={false}
+                                            checked={false}
+                                            className="ant-radio-input"
+                                            disabled={false}
+                                            id="root_employment-1"
+                                            name="root_employment"
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            type="radio"
+                                            value="1"
+                                          />
+                                          <span
+                                            className="ant-radio-inner"
+                                          />
+                                        </span>
+                                        <span
+                                          className="ant-radio-label"
+                                        >
+                                          Education
+                                        </span>
+                                      </label>
+                                      <label
+                                        className="ant-radio-wrapper ant-radio-wrapper-in-form-item css-dev-only-do-not-override-1d4w9r2"
+                                        onClick={[Function]}
+                                        style={{}}
+                                      >
+                                        <span
+                                          className="ant-radio ant-wave-target"
+                                        >
+                                          <input
+                                            autoFocus={false}
+                                            checked={false}
+                                            className="ant-radio-input"
+                                            disabled={false}
+                                            id="root_employment-2"
+                                            name="root_employment"
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            type="radio"
+                                            value="2"
+                                          />
+                                          <span
+                                            className="ant-radio-inner"
+                                          />
+                                        </span>
+                                        <span
+                                          className="ant-radio-label"
+                                        >
+                                          Other
+                                        </span>
+                                      </label>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
                         </div>
                       </div>
                       <div
diff --git a/packages/chakra-ui/package.json b/packages/chakra-ui/package.json
index 78643317dd..f587d1be09 100644
--- a/packages/chakra-ui/package.json
+++ b/packages/chakra-ui/package.json
@@ -8,29 +8,29 @@
   "type": "module",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     },
     "./dist": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./dist/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     }
   },
   "files": [
diff --git a/packages/chakra-ui/test/__snapshots__/GridSnap.test.tsx.snap b/packages/chakra-ui/test/__snapshots__/GridSnap.test.tsx.snap
index 11144f4f23..598ddbf664 100644
--- a/packages/chakra-ui/test/__snapshots__/GridSnap.test.tsx.snap
+++ b/packages/chakra-ui/test/__snapshots__/GridSnap.test.tsx.snap
@@ -262,14 +262,14 @@ exports[`Complex grid renders person and address and employment in a complex gri
   grid-column: span 3/span 3;
 }
 
-.emotion-111 {
+.emotion-112 {
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
 }
 
-.emotion-111>*:not(style)~*:not(style) {
+.emotion-112>*:not(style)~*:not(style) {
   margin-top: 0px;
   -webkit-margin-end: 0px;
   margin-inline-end: 0px;
@@ -278,7 +278,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
   margin-inline-start: 0.5rem;
 }
 
-.emotion-112 {
+.emotion-113 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -288,7 +288,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
   cursor: pointer;
 }
 
-.emotion-113 {
+.emotion-114 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -303,7 +303,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
   flex-shrink: 0;
 }
 
-.emotion-114 {
+.emotion-115 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -312,11 +312,11 @@ exports[`Complex grid renders person and address and employment in a complex gri
   margin-inline-start: 0.5rem;
 }
 
-.emotion-155 {
+.emotion-156 {
   margin-top: 3px;
 }
 
-.emotion-156 {
+.emotion-157 {
   display: inline-flex;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1263,174 +1263,181 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   }
                 }
               >
-                <div
-                  className="chakra-form-control emotion-11"
-                  role="group"
-                >
-                  <label
-                    className="chakra-form__label emotion-12"
-                    htmlFor="root_employment"
-                    id="root_employment-label"
-                  >
-                    Employment
-                  </label>
+                <div>
                   <div
-                    aria-describedby="root_employment__error root_employment__description root_employment__help"
-                    className="chakra-radio-group emotion-0"
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    role="radiogroup"
+                    className="chakra-form-control emotion-0"
+                    role="group"
                   >
                     <div
-                      className="chakra-stack emotion-111"
+                      className="chakra-form-control emotion-11"
+                      role="group"
                     >
                       <label
-                        className="chakra-radio emotion-112"
-                        data-checked=""
-                      >
-                        <input
-                          checked={true}
-                          className="chakra-radio__input"
-                          disabled={false}
-                          id="root_employment-0"
-                          name="root_employment"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          readOnly={false}
-                          required={false}
-                          style={
-                            {
-                              "border": "0px",
-                              "clip": "rect(0px, 0px, 0px, 0px)",
-                              "height": "1px",
-                              "margin": "-1px",
-                              "overflow": "hidden",
-                              "padding": "0px",
-                              "position": "absolute",
-                              "whiteSpace": "nowrap",
-                              "width": "1px",
-                            }
-                          }
-                          type="radio"
-                          value="0"
-                        />
-                        <span
-                          aria-hidden={true}
-                          className="chakra-radio__control emotion-113"
-                          data-checked=""
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        />
-                        <span
-                          className="chakra-radio__label emotion-114"
-                          data-checked=""
-                          onMouseDown={[Function]}
-                          onTouchStart={[Function]}
-                        >
-                          Company
-                        </span>
-                      </label>
-                      <label
-                        className="chakra-radio emotion-112"
+                        className="chakra-form__label emotion-12"
+                        htmlFor="root_employment"
+                        id="root_employment-label"
                       >
-                        <input
-                          checked={false}
-                          className="chakra-radio__input"
-                          disabled={false}
-                          id="root_employment-1"
-                          name="root_employment"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          readOnly={false}
-                          required={false}
-                          style={
-                            {
-                              "border": "0px",
-                              "clip": "rect(0px, 0px, 0px, 0px)",
-                              "height": "1px",
-                              "margin": "-1px",
-                              "overflow": "hidden",
-                              "padding": "0px",
-                              "position": "absolute",
-                              "whiteSpace": "nowrap",
-                              "width": "1px",
-                            }
-                          }
-                          type="radio"
-                          value="1"
-                        />
-                        <span
-                          aria-hidden={true}
-                          className="chakra-radio__control emotion-113"
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        />
-                        <span
-                          className="chakra-radio__label emotion-114"
-                          onMouseDown={[Function]}
-                          onTouchStart={[Function]}
-                        >
-                          Education
-                        </span>
+                        Employment
                       </label>
-                      <label
-                        className="chakra-radio emotion-112"
+                      <div
+                        aria-describedby="root_employment__error root_employment__description root_employment__help"
+                        className="chakra-radio-group emotion-0"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        role="radiogroup"
                       >
-                        <input
-                          checked={false}
-                          className="chakra-radio__input"
-                          disabled={false}
-                          id="root_employment-2"
-                          name="root_employment"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          readOnly={false}
-                          required={false}
-                          style={
-                            {
-                              "border": "0px",
-                              "clip": "rect(0px, 0px, 0px, 0px)",
-                              "height": "1px",
-                              "margin": "-1px",
-                              "overflow": "hidden",
-                              "padding": "0px",
-                              "position": "absolute",
-                              "whiteSpace": "nowrap",
-                              "width": "1px",
-                            }
-                          }
-                          type="radio"
-                          value="2"
-                        />
-                        <span
-                          aria-hidden={true}
-                          className="chakra-radio__control emotion-113"
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        />
-                        <span
-                          className="chakra-radio__label emotion-114"
-                          onMouseDown={[Function]}
-                          onTouchStart={[Function]}
+                        <div
+                          className="chakra-stack emotion-112"
                         >
-                          Other
-                        </span>
-                      </label>
+                          <label
+                            className="chakra-radio emotion-113"
+                            data-checked=""
+                          >
+                            <input
+                              checked={true}
+                              className="chakra-radio__input"
+                              disabled={false}
+                              id="root_employment-0"
+                              name="root_employment"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              readOnly={false}
+                              required={false}
+                              style={
+                                {
+                                  "border": "0px",
+                                  "clip": "rect(0px, 0px, 0px, 0px)",
+                                  "height": "1px",
+                                  "margin": "-1px",
+                                  "overflow": "hidden",
+                                  "padding": "0px",
+                                  "position": "absolute",
+                                  "whiteSpace": "nowrap",
+                                  "width": "1px",
+                                }
+                              }
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              aria-hidden={true}
+                              className="chakra-radio__control emotion-114"
+                              data-checked=""
+                              onMouseDown={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                              onMouseUp={[Function]}
+                            />
+                            <span
+                              className="chakra-radio__label emotion-115"
+                              data-checked=""
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                            >
+                              Company
+                            </span>
+                          </label>
+                          <label
+                            className="chakra-radio emotion-113"
+                          >
+                            <input
+                              checked={false}
+                              className="chakra-radio__input"
+                              disabled={false}
+                              id="root_employment-1"
+                              name="root_employment"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              readOnly={false}
+                              required={false}
+                              style={
+                                {
+                                  "border": "0px",
+                                  "clip": "rect(0px, 0px, 0px, 0px)",
+                                  "height": "1px",
+                                  "margin": "-1px",
+                                  "overflow": "hidden",
+                                  "padding": "0px",
+                                  "position": "absolute",
+                                  "whiteSpace": "nowrap",
+                                  "width": "1px",
+                                }
+                              }
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              aria-hidden={true}
+                              className="chakra-radio__control emotion-114"
+                              onMouseDown={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                              onMouseUp={[Function]}
+                            />
+                            <span
+                              className="chakra-radio__label emotion-115"
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                            >
+                              Education
+                            </span>
+                          </label>
+                          <label
+                            className="chakra-radio emotion-113"
+                          >
+                            <input
+                              checked={false}
+                              className="chakra-radio__input"
+                              disabled={false}
+                              id="root_employment-2"
+                              name="root_employment"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              readOnly={false}
+                              required={false}
+                              style={
+                                {
+                                  "border": "0px",
+                                  "clip": "rect(0px, 0px, 0px, 0px)",
+                                  "height": "1px",
+                                  "margin": "-1px",
+                                  "overflow": "hidden",
+                                  "padding": "0px",
+                                  "position": "absolute",
+                                  "whiteSpace": "nowrap",
+                                  "width": "1px",
+                                }
+                              }
+                              type="radio"
+                              value="2"
+                            />
+                            <span
+                              aria-hidden={true}
+                              className="chakra-radio__control emotion-114"
+                              onMouseDown={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                              onMouseUp={[Function]}
+                            />
+                            <span
+                              className="chakra-radio__label emotion-115"
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                            >
+                              Other
+                            </span>
+                          </label>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -1698,10 +1705,10 @@ exports[`Complex grid renders person and address and employment in a complex gri
     </div>
   </div>
   <div
-    className="emotion-155"
+    className="emotion-156"
   >
     <button
-      className="chakra-button emotion-156"
+      className="chakra-button emotion-157"
       disabled={false}
       type="submit"
     >
@@ -1973,14 +1980,14 @@ exports[`Complex grid renders person and address and employment in a complex gri
   grid-column: span 3/span 3;
 }
 
-.emotion-111 {
+.emotion-112 {
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
 }
 
-.emotion-111>*:not(style)~*:not(style) {
+.emotion-112>*:not(style)~*:not(style) {
   margin-top: 0px;
   -webkit-margin-end: 0px;
   margin-inline-end: 0px;
@@ -1989,7 +1996,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
   margin-inline-start: 0.5rem;
 }
 
-.emotion-112 {
+.emotion-113 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1999,7 +2006,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
   cursor: pointer;
 }
 
-.emotion-113 {
+.emotion-114 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -2014,7 +2021,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
   flex-shrink: 0;
 }
 
-.emotion-114 {
+.emotion-115 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2023,11 +2030,11 @@ exports[`Complex grid renders person and address and employment in a complex gri
   margin-inline-start: 0.5rem;
 }
 
-.emotion-160 {
+.emotion-161 {
   margin-top: 3px;
 }
 
-.emotion-161 {
+.emotion-162 {
   display: inline-flex;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2974,174 +2981,181 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   }
                 }
               >
-                <div
-                  className="chakra-form-control emotion-11"
-                  role="group"
-                >
-                  <label
-                    className="chakra-form__label emotion-12"
-                    htmlFor="root_employment"
-                    id="root_employment-label"
-                  >
-                    Employment
-                  </label>
+                <div>
                   <div
-                    aria-describedby="root_employment__error root_employment__description root_employment__help"
-                    className="chakra-radio-group emotion-0"
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    role="radiogroup"
+                    className="chakra-form-control emotion-0"
+                    role="group"
                   >
                     <div
-                      className="chakra-stack emotion-111"
+                      className="chakra-form-control emotion-11"
+                      role="group"
                     >
                       <label
-                        className="chakra-radio emotion-112"
-                      >
-                        <input
-                          checked={false}
-                          className="chakra-radio__input"
-                          disabled={false}
-                          id="root_employment-0"
-                          name="root_employment"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          readOnly={false}
-                          required={false}
-                          style={
-                            {
-                              "border": "0px",
-                              "clip": "rect(0px, 0px, 0px, 0px)",
-                              "height": "1px",
-                              "margin": "-1px",
-                              "overflow": "hidden",
-                              "padding": "0px",
-                              "position": "absolute",
-                              "whiteSpace": "nowrap",
-                              "width": "1px",
-                            }
-                          }
-                          type="radio"
-                          value="0"
-                        />
-                        <span
-                          aria-hidden={true}
-                          className="chakra-radio__control emotion-113"
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        />
-                        <span
-                          className="chakra-radio__label emotion-114"
-                          onMouseDown={[Function]}
-                          onTouchStart={[Function]}
-                        >
-                          Company
-                        </span>
-                      </label>
-                      <label
-                        className="chakra-radio emotion-112"
-                        data-checked=""
+                        className="chakra-form__label emotion-12"
+                        htmlFor="root_employment"
+                        id="root_employment-label"
                       >
-                        <input
-                          checked={true}
-                          className="chakra-radio__input"
-                          disabled={false}
-                          id="root_employment-1"
-                          name="root_employment"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          readOnly={false}
-                          required={false}
-                          style={
-                            {
-                              "border": "0px",
-                              "clip": "rect(0px, 0px, 0px, 0px)",
-                              "height": "1px",
-                              "margin": "-1px",
-                              "overflow": "hidden",
-                              "padding": "0px",
-                              "position": "absolute",
-                              "whiteSpace": "nowrap",
-                              "width": "1px",
-                            }
-                          }
-                          type="radio"
-                          value="1"
-                        />
-                        <span
-                          aria-hidden={true}
-                          className="chakra-radio__control emotion-113"
-                          data-checked=""
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        />
-                        <span
-                          className="chakra-radio__label emotion-114"
-                          data-checked=""
-                          onMouseDown={[Function]}
-                          onTouchStart={[Function]}
-                        >
-                          Education
-                        </span>
+                        Employment
                       </label>
-                      <label
-                        className="chakra-radio emotion-112"
+                      <div
+                        aria-describedby="root_employment__error root_employment__description root_employment__help"
+                        className="chakra-radio-group emotion-0"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        role="radiogroup"
                       >
-                        <input
-                          checked={false}
-                          className="chakra-radio__input"
-                          disabled={false}
-                          id="root_employment-2"
-                          name="root_employment"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          readOnly={false}
-                          required={false}
-                          style={
-                            {
-                              "border": "0px",
-                              "clip": "rect(0px, 0px, 0px, 0px)",
-                              "height": "1px",
-                              "margin": "-1px",
-                              "overflow": "hidden",
-                              "padding": "0px",
-                              "position": "absolute",
-                              "whiteSpace": "nowrap",
-                              "width": "1px",
-                            }
-                          }
-                          type="radio"
-                          value="2"
-                        />
-                        <span
-                          aria-hidden={true}
-                          className="chakra-radio__control emotion-113"
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        />
-                        <span
-                          className="chakra-radio__label emotion-114"
-                          onMouseDown={[Function]}
-                          onTouchStart={[Function]}
+                        <div
+                          className="chakra-stack emotion-112"
                         >
-                          Other
-                        </span>
-                      </label>
+                          <label
+                            className="chakra-radio emotion-113"
+                          >
+                            <input
+                              checked={false}
+                              className="chakra-radio__input"
+                              disabled={false}
+                              id="root_employment-0"
+                              name="root_employment"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              readOnly={false}
+                              required={false}
+                              style={
+                                {
+                                  "border": "0px",
+                                  "clip": "rect(0px, 0px, 0px, 0px)",
+                                  "height": "1px",
+                                  "margin": "-1px",
+                                  "overflow": "hidden",
+                                  "padding": "0px",
+                                  "position": "absolute",
+                                  "whiteSpace": "nowrap",
+                                  "width": "1px",
+                                }
+                              }
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              aria-hidden={true}
+                              className="chakra-radio__control emotion-114"
+                              onMouseDown={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                              onMouseUp={[Function]}
+                            />
+                            <span
+                              className="chakra-radio__label emotion-115"
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                            >
+                              Company
+                            </span>
+                          </label>
+                          <label
+                            className="chakra-radio emotion-113"
+                            data-checked=""
+                          >
+                            <input
+                              checked={true}
+                              className="chakra-radio__input"
+                              disabled={false}
+                              id="root_employment-1"
+                              name="root_employment"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              readOnly={false}
+                              required={false}
+                              style={
+                                {
+                                  "border": "0px",
+                                  "clip": "rect(0px, 0px, 0px, 0px)",
+                                  "height": "1px",
+                                  "margin": "-1px",
+                                  "overflow": "hidden",
+                                  "padding": "0px",
+                                  "position": "absolute",
+                                  "whiteSpace": "nowrap",
+                                  "width": "1px",
+                                }
+                              }
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              aria-hidden={true}
+                              className="chakra-radio__control emotion-114"
+                              data-checked=""
+                              onMouseDown={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                              onMouseUp={[Function]}
+                            />
+                            <span
+                              className="chakra-radio__label emotion-115"
+                              data-checked=""
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                            >
+                              Education
+                            </span>
+                          </label>
+                          <label
+                            className="chakra-radio emotion-113"
+                          >
+                            <input
+                              checked={false}
+                              className="chakra-radio__input"
+                              disabled={false}
+                              id="root_employment-2"
+                              name="root_employment"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              readOnly={false}
+                              required={false}
+                              style={
+                                {
+                                  "border": "0px",
+                                  "clip": "rect(0px, 0px, 0px, 0px)",
+                                  "height": "1px",
+                                  "margin": "-1px",
+                                  "overflow": "hidden",
+                                  "padding": "0px",
+                                  "position": "absolute",
+                                  "whiteSpace": "nowrap",
+                                  "width": "1px",
+                                }
+                              }
+                              type="radio"
+                              value="2"
+                            />
+                            <span
+                              aria-hidden={true}
+                              className="chakra-radio__control emotion-114"
+                              onMouseDown={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                              onMouseUp={[Function]}
+                            />
+                            <span
+                              className="chakra-radio__label emotion-115"
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                            >
+                              Other
+                            </span>
+                          </label>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -3451,10 +3465,10 @@ exports[`Complex grid renders person and address and employment in a complex gri
     </div>
   </div>
   <div
-    className="emotion-160"
+    className="emotion-161"
   >
     <button
-      className="chakra-button emotion-161"
+      className="chakra-button emotion-162"
       disabled={false}
       type="submit"
     >
@@ -3726,14 +3740,14 @@ exports[`Complex grid renders person and address and employment in a complex gri
   grid-column: span 3/span 3;
 }
 
-.emotion-111 {
+.emotion-112 {
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
 }
 
-.emotion-111>*:not(style)~*:not(style) {
+.emotion-112>*:not(style)~*:not(style) {
   margin-top: 0px;
   -webkit-margin-end: 0px;
   margin-inline-end: 0px;
@@ -3742,7 +3756,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
   margin-inline-start: 0.5rem;
 }
 
-.emotion-112 {
+.emotion-113 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -3752,7 +3766,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
   cursor: pointer;
 }
 
-.emotion-113 {
+.emotion-114 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -3767,7 +3781,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
   flex-shrink: 0;
 }
 
-.emotion-114 {
+.emotion-115 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3776,11 +3790,11 @@ exports[`Complex grid renders person and address and employment in a complex gri
   margin-inline-start: 0.5rem;
 }
 
-.emotion-127 {
+.emotion-128 {
   margin-top: 3px;
 }
 
-.emotion-128 {
+.emotion-129 {
   display: inline-flex;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -4727,174 +4741,181 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   }
                 }
               >
-                <div
-                  className="chakra-form-control emotion-11"
-                  role="group"
-                >
-                  <label
-                    className="chakra-form__label emotion-12"
-                    htmlFor="root_employment"
-                    id="root_employment-label"
-                  >
-                    Employment
-                  </label>
+                <div>
                   <div
-                    aria-describedby="root_employment__error root_employment__description root_employment__help"
-                    className="chakra-radio-group emotion-0"
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    role="radiogroup"
+                    className="chakra-form-control emotion-0"
+                    role="group"
                   >
                     <div
-                      className="chakra-stack emotion-111"
+                      className="chakra-form-control emotion-11"
+                      role="group"
                     >
                       <label
-                        className="chakra-radio emotion-112"
-                      >
-                        <input
-                          checked={false}
-                          className="chakra-radio__input"
-                          disabled={false}
-                          id="root_employment-0"
-                          name="root_employment"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          readOnly={false}
-                          required={false}
-                          style={
-                            {
-                              "border": "0px",
-                              "clip": "rect(0px, 0px, 0px, 0px)",
-                              "height": "1px",
-                              "margin": "-1px",
-                              "overflow": "hidden",
-                              "padding": "0px",
-                              "position": "absolute",
-                              "whiteSpace": "nowrap",
-                              "width": "1px",
-                            }
-                          }
-                          type="radio"
-                          value="0"
-                        />
-                        <span
-                          aria-hidden={true}
-                          className="chakra-radio__control emotion-113"
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        />
-                        <span
-                          className="chakra-radio__label emotion-114"
-                          onMouseDown={[Function]}
-                          onTouchStart={[Function]}
-                        >
-                          Company
-                        </span>
-                      </label>
-                      <label
-                        className="chakra-radio emotion-112"
+                        className="chakra-form__label emotion-12"
+                        htmlFor="root_employment"
+                        id="root_employment-label"
                       >
-                        <input
-                          checked={false}
-                          className="chakra-radio__input"
-                          disabled={false}
-                          id="root_employment-1"
-                          name="root_employment"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          readOnly={false}
-                          required={false}
-                          style={
-                            {
-                              "border": "0px",
-                              "clip": "rect(0px, 0px, 0px, 0px)",
-                              "height": "1px",
-                              "margin": "-1px",
-                              "overflow": "hidden",
-                              "padding": "0px",
-                              "position": "absolute",
-                              "whiteSpace": "nowrap",
-                              "width": "1px",
-                            }
-                          }
-                          type="radio"
-                          value="1"
-                        />
-                        <span
-                          aria-hidden={true}
-                          className="chakra-radio__control emotion-113"
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        />
-                        <span
-                          className="chakra-radio__label emotion-114"
-                          onMouseDown={[Function]}
-                          onTouchStart={[Function]}
-                        >
-                          Education
-                        </span>
+                        Employment
                       </label>
-                      <label
-                        className="chakra-radio emotion-112"
-                        data-checked=""
+                      <div
+                        aria-describedby="root_employment__error root_employment__description root_employment__help"
+                        className="chakra-radio-group emotion-0"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        role="radiogroup"
                       >
-                        <input
-                          checked={true}
-                          className="chakra-radio__input"
-                          disabled={false}
-                          id="root_employment-2"
-                          name="root_employment"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          readOnly={false}
-                          required={false}
-                          style={
-                            {
-                              "border": "0px",
-                              "clip": "rect(0px, 0px, 0px, 0px)",
-                              "height": "1px",
-                              "margin": "-1px",
-                              "overflow": "hidden",
-                              "padding": "0px",
-                              "position": "absolute",
-                              "whiteSpace": "nowrap",
-                              "width": "1px",
-                            }
-                          }
-                          type="radio"
-                          value="2"
-                        />
-                        <span
-                          aria-hidden={true}
-                          className="chakra-radio__control emotion-113"
-                          data-checked=""
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        />
-                        <span
-                          className="chakra-radio__label emotion-114"
-                          data-checked=""
-                          onMouseDown={[Function]}
-                          onTouchStart={[Function]}
+                        <div
+                          className="chakra-stack emotion-112"
                         >
-                          Other
-                        </span>
-                      </label>
+                          <label
+                            className="chakra-radio emotion-113"
+                          >
+                            <input
+                              checked={false}
+                              className="chakra-radio__input"
+                              disabled={false}
+                              id="root_employment-0"
+                              name="root_employment"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              readOnly={false}
+                              required={false}
+                              style={
+                                {
+                                  "border": "0px",
+                                  "clip": "rect(0px, 0px, 0px, 0px)",
+                                  "height": "1px",
+                                  "margin": "-1px",
+                                  "overflow": "hidden",
+                                  "padding": "0px",
+                                  "position": "absolute",
+                                  "whiteSpace": "nowrap",
+                                  "width": "1px",
+                                }
+                              }
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              aria-hidden={true}
+                              className="chakra-radio__control emotion-114"
+                              onMouseDown={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                              onMouseUp={[Function]}
+                            />
+                            <span
+                              className="chakra-radio__label emotion-115"
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                            >
+                              Company
+                            </span>
+                          </label>
+                          <label
+                            className="chakra-radio emotion-113"
+                          >
+                            <input
+                              checked={false}
+                              className="chakra-radio__input"
+                              disabled={false}
+                              id="root_employment-1"
+                              name="root_employment"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              readOnly={false}
+                              required={false}
+                              style={
+                                {
+                                  "border": "0px",
+                                  "clip": "rect(0px, 0px, 0px, 0px)",
+                                  "height": "1px",
+                                  "margin": "-1px",
+                                  "overflow": "hidden",
+                                  "padding": "0px",
+                                  "position": "absolute",
+                                  "whiteSpace": "nowrap",
+                                  "width": "1px",
+                                }
+                              }
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              aria-hidden={true}
+                              className="chakra-radio__control emotion-114"
+                              onMouseDown={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                              onMouseUp={[Function]}
+                            />
+                            <span
+                              className="chakra-radio__label emotion-115"
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                            >
+                              Education
+                            </span>
+                          </label>
+                          <label
+                            className="chakra-radio emotion-113"
+                            data-checked=""
+                          >
+                            <input
+                              checked={true}
+                              className="chakra-radio__input"
+                              disabled={false}
+                              id="root_employment-2"
+                              name="root_employment"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              readOnly={false}
+                              required={false}
+                              style={
+                                {
+                                  "border": "0px",
+                                  "clip": "rect(0px, 0px, 0px, 0px)",
+                                  "height": "1px",
+                                  "margin": "-1px",
+                                  "overflow": "hidden",
+                                  "padding": "0px",
+                                  "position": "absolute",
+                                  "whiteSpace": "nowrap",
+                                  "width": "1px",
+                                }
+                              }
+                              type="radio"
+                              value="2"
+                            />
+                            <span
+                              aria-hidden={true}
+                              className="chakra-radio__control emotion-114"
+                              data-checked=""
+                              onMouseDown={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                              onMouseUp={[Function]}
+                            />
+                            <span
+                              className="chakra-radio__label emotion-115"
+                              data-checked=""
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                            >
+                              Other
+                            </span>
+                          </label>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -4917,7 +4938,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
                       <label
                         className="chakra-form__label emotion-12"
                         htmlFor="root_employment_description"
-                        id="field-178-label"
+                        id="field-182-label"
                       >
                         Describe your job
                         <span
@@ -4956,10 +4977,10 @@ exports[`Complex grid renders person and address and employment in a complex gri
     </div>
   </div>
   <div
-    className="emotion-127"
+    className="emotion-128"
   >
     <button
-      className="chakra-button emotion-128"
+      className="chakra-button emotion-129"
       disabled={false}
       type="submit"
     >
@@ -5231,14 +5252,14 @@ exports[`Complex grid renders person and address and employment in a complex gri
   grid-column: span 3/span 3;
 }
 
-.emotion-111 {
+.emotion-112 {
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
 }
 
-.emotion-111>*:not(style)~*:not(style) {
+.emotion-112>*:not(style)~*:not(style) {
   margin-top: 0px;
   -webkit-margin-end: 0px;
   margin-inline-end: 0px;
@@ -5247,7 +5268,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
   margin-inline-start: 0.5rem;
 }
 
-.emotion-112 {
+.emotion-113 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -5257,7 +5278,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
   cursor: pointer;
 }
 
-.emotion-113 {
+.emotion-114 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -5272,7 +5293,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
   flex-shrink: 0;
 }
 
-.emotion-114 {
+.emotion-115 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -5281,11 +5302,11 @@ exports[`Complex grid renders person and address and employment in a complex gri
   margin-inline-start: 0.5rem;
 }
 
-.emotion-155 {
+.emotion-156 {
   margin-top: 3px;
 }
 
-.emotion-156 {
+.emotion-157 {
   display: inline-flex;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -6232,174 +6253,181 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   }
                 }
               >
-                <div
-                  className="chakra-form-control emotion-11"
-                  role="group"
-                >
-                  <label
-                    className="chakra-form__label emotion-12"
-                    htmlFor="root_employment"
-                    id="root_employment-label"
-                  >
-                    Employment
-                  </label>
+                <div>
                   <div
-                    aria-describedby="root_employment__error root_employment__description root_employment__help"
-                    className="chakra-radio-group emotion-0"
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    role="radiogroup"
+                    className="chakra-form-control emotion-0"
+                    role="group"
                   >
                     <div
-                      className="chakra-stack emotion-111"
+                      className="chakra-form-control emotion-11"
+                      role="group"
                     >
                       <label
-                        className="chakra-radio emotion-112"
-                        data-checked=""
-                      >
-                        <input
-                          checked={true}
-                          className="chakra-radio__input"
-                          disabled={false}
-                          id="root_employment-0"
-                          name="root_employment"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          readOnly={false}
-                          required={false}
-                          style={
-                            {
-                              "border": "0px",
-                              "clip": "rect(0px, 0px, 0px, 0px)",
-                              "height": "1px",
-                              "margin": "-1px",
-                              "overflow": "hidden",
-                              "padding": "0px",
-                              "position": "absolute",
-                              "whiteSpace": "nowrap",
-                              "width": "1px",
-                            }
-                          }
-                          type="radio"
-                          value="0"
-                        />
-                        <span
-                          aria-hidden={true}
-                          className="chakra-radio__control emotion-113"
-                          data-checked=""
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        />
-                        <span
-                          className="chakra-radio__label emotion-114"
-                          data-checked=""
-                          onMouseDown={[Function]}
-                          onTouchStart={[Function]}
-                        >
-                          Company
-                        </span>
-                      </label>
-                      <label
-                        className="chakra-radio emotion-112"
+                        className="chakra-form__label emotion-12"
+                        htmlFor="root_employment"
+                        id="root_employment-label"
                       >
-                        <input
-                          checked={false}
-                          className="chakra-radio__input"
-                          disabled={false}
-                          id="root_employment-1"
-                          name="root_employment"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          readOnly={false}
-                          required={false}
-                          style={
-                            {
-                              "border": "0px",
-                              "clip": "rect(0px, 0px, 0px, 0px)",
-                              "height": "1px",
-                              "margin": "-1px",
-                              "overflow": "hidden",
-                              "padding": "0px",
-                              "position": "absolute",
-                              "whiteSpace": "nowrap",
-                              "width": "1px",
-                            }
-                          }
-                          type="radio"
-                          value="1"
-                        />
-                        <span
-                          aria-hidden={true}
-                          className="chakra-radio__control emotion-113"
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        />
-                        <span
-                          className="chakra-radio__label emotion-114"
-                          onMouseDown={[Function]}
-                          onTouchStart={[Function]}
-                        >
-                          Education
-                        </span>
+                        Employment
                       </label>
-                      <label
-                        className="chakra-radio emotion-112"
+                      <div
+                        aria-describedby="root_employment__error root_employment__description root_employment__help"
+                        className="chakra-radio-group emotion-0"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        role="radiogroup"
                       >
-                        <input
-                          checked={false}
-                          className="chakra-radio__input"
-                          disabled={false}
-                          id="root_employment-2"
-                          name="root_employment"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          readOnly={false}
-                          required={false}
-                          style={
-                            {
-                              "border": "0px",
-                              "clip": "rect(0px, 0px, 0px, 0px)",
-                              "height": "1px",
-                              "margin": "-1px",
-                              "overflow": "hidden",
-                              "padding": "0px",
-                              "position": "absolute",
-                              "whiteSpace": "nowrap",
-                              "width": "1px",
-                            }
-                          }
-                          type="radio"
-                          value="2"
-                        />
-                        <span
-                          aria-hidden={true}
-                          className="chakra-radio__control emotion-113"
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        />
-                        <span
-                          className="chakra-radio__label emotion-114"
-                          onMouseDown={[Function]}
-                          onTouchStart={[Function]}
+                        <div
+                          className="chakra-stack emotion-112"
                         >
-                          Other
-                        </span>
-                      </label>
+                          <label
+                            className="chakra-radio emotion-113"
+                            data-checked=""
+                          >
+                            <input
+                              checked={true}
+                              className="chakra-radio__input"
+                              disabled={false}
+                              id="root_employment-0"
+                              name="root_employment"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              readOnly={false}
+                              required={false}
+                              style={
+                                {
+                                  "border": "0px",
+                                  "clip": "rect(0px, 0px, 0px, 0px)",
+                                  "height": "1px",
+                                  "margin": "-1px",
+                                  "overflow": "hidden",
+                                  "padding": "0px",
+                                  "position": "absolute",
+                                  "whiteSpace": "nowrap",
+                                  "width": "1px",
+                                }
+                              }
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              aria-hidden={true}
+                              className="chakra-radio__control emotion-114"
+                              data-checked=""
+                              onMouseDown={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                              onMouseUp={[Function]}
+                            />
+                            <span
+                              className="chakra-radio__label emotion-115"
+                              data-checked=""
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                            >
+                              Company
+                            </span>
+                          </label>
+                          <label
+                            className="chakra-radio emotion-113"
+                          >
+                            <input
+                              checked={false}
+                              className="chakra-radio__input"
+                              disabled={false}
+                              id="root_employment-1"
+                              name="root_employment"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              readOnly={false}
+                              required={false}
+                              style={
+                                {
+                                  "border": "0px",
+                                  "clip": "rect(0px, 0px, 0px, 0px)",
+                                  "height": "1px",
+                                  "margin": "-1px",
+                                  "overflow": "hidden",
+                                  "padding": "0px",
+                                  "position": "absolute",
+                                  "whiteSpace": "nowrap",
+                                  "width": "1px",
+                                }
+                              }
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              aria-hidden={true}
+                              className="chakra-radio__control emotion-114"
+                              onMouseDown={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                              onMouseUp={[Function]}
+                            />
+                            <span
+                              className="chakra-radio__label emotion-115"
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                            >
+                              Education
+                            </span>
+                          </label>
+                          <label
+                            className="chakra-radio emotion-113"
+                          >
+                            <input
+                              checked={false}
+                              className="chakra-radio__input"
+                              disabled={false}
+                              id="root_employment-2"
+                              name="root_employment"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              readOnly={false}
+                              required={false}
+                              style={
+                                {
+                                  "border": "0px",
+                                  "clip": "rect(0px, 0px, 0px, 0px)",
+                                  "height": "1px",
+                                  "margin": "-1px",
+                                  "overflow": "hidden",
+                                  "padding": "0px",
+                                  "position": "absolute",
+                                  "whiteSpace": "nowrap",
+                                  "width": "1px",
+                                }
+                              }
+                              type="radio"
+                              value="2"
+                            />
+                            <span
+                              aria-hidden={true}
+                              className="chakra-radio__control emotion-114"
+                              onMouseDown={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                              onMouseUp={[Function]}
+                            />
+                            <span
+                              className="chakra-radio__label emotion-115"
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                            >
+                              Other
+                            </span>
+                          </label>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -6667,10 +6695,10 @@ exports[`Complex grid renders person and address and employment in a complex gri
     </div>
   </div>
   <div
-    className="emotion-155"
+    className="emotion-156"
   >
     <button
-      className="chakra-button emotion-156"
+      className="chakra-button emotion-157"
       disabled={false}
       type="submit"
     >
diff --git a/packages/core/package.json b/packages/core/package.json
index 5cddc5fa27..5b0779ed44 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -31,29 +31,29 @@
   "type": "module",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     },
     "./dist": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./dist/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     }
   },
   "files": [
diff --git a/packages/core/src/components/fields/LayoutGridField.tsx b/packages/core/src/components/fields/LayoutGridField.tsx
index 2af245cbb3..9a58f3c304 100644
--- a/packages/core/src/components/fields/LayoutGridField.tsx
+++ b/packages/core/src/components/fields/LayoutGridField.tsx
@@ -135,13 +135,13 @@ function getNonNullishValue<T = unknown>(value?: T, fallback?: T): T | undefined
 
 /** The `LayoutGridField` will render a schema, uiSchema and formData combination out into a GridTemplate in the shape
  * described in the uiSchema. To define the grid to use to render the elements within a field in the schema, provide in
- * the uiSchema for that field the object contained under a `ui:LayoutGridField` element. E.g. (as a JSON object):
+ * the uiSchema for that field the object contained under a `ui:layoutGrid` element. E.g. (as a JSON object):
  *
  * ```
  * {
  *   "field1" : {
  *     "ui:field": "LayoutGridField",
- *     "ui:LayoutGridField": {
+ *     "ui:layoutGrid": {
  *       "ui:row": { ... }
  *     }
  *   }
@@ -155,7 +155,7 @@ function getNonNullishValue<T = unknown>(value?: T, fallback?: T): T | undefined
  * Simple `ui:row` definition, without additional `GridTemplate` props:
  * ```
  *  "ui:row": [
- *    { "ui:row"|"ui:column"|"ui:condition": ... },
+ *    { "ui:row"|"ui:col"|"ui:columns"|"ui:condition": ... },
  *    ...
  *  ]
  * ```
@@ -168,7 +168,7 @@ function getNonNullishValue<T = unknown>(value?: T, fallback?: T): T | undefined
  *    "alignContent": "flex-start",
  *    "className": "GridRow",
  *    "children": [
- *      { "ui:row"|"ui:column"|"ui:condition": ... },
+ *      { "ui:row"|"ui:col"|"ui:columns"|"ui:condition": ... },
  *      ...
  *    ]
  *  }
diff --git a/packages/core/src/components/fields/LayoutMultiSchemaField.tsx b/packages/core/src/components/fields/LayoutMultiSchemaField.tsx
index a3ce244363..1635efe29b 100644
--- a/packages/core/src/components/fields/LayoutMultiSchemaField.tsx
+++ b/packages/core/src/components/fields/LayoutMultiSchemaField.tsx
@@ -24,6 +24,7 @@ import {
 import get from 'lodash/get';
 import has from 'lodash/has';
 import isEmpty from 'lodash/isEmpty';
+import noop from 'lodash/noop';
 import omit from 'lodash/omit';
 import set from 'lodash/set';
 
@@ -115,6 +116,7 @@ export default function LayoutMultiSchemaField<
   const id = get(idSchema, ID_KEY);
   const discriminator = getDiscriminatorFieldFromSchema(schema);
   const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, options);
+  const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, options);
   const schemaHash = hashObject(schema);
   const optionsHash = hashObject(options);
   const uiSchemaHash = uiSchema ? hashObject(uiSchema) : '';
@@ -174,9 +176,29 @@ export default function LayoutMultiSchemaField<
 
   // filtering the options based on the type of widget because `selectField` does not recognize the `convertOther` prop
   const widgetOptions = { enumOptions, ...uiOptions };
+  const errors =
+    !hideFieldError && rawErrors.length > 0 ? (
+      <FieldErrorTemplate idSchema={idSchema} schema={schema} errors={rawErrors} registry={registry} />
+    ) : undefined;
+  const ignored = (value: string) => noop;
 
   return (
-    <>
+    <FieldTemplate
+      id={id}
+      schema={schema}
+      label={(title || schema.title) ?? ''}
+      disabled={disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions))}
+      uiSchema={uiSchema}
+      formContext={formContext}
+      required={required}
+      readonly={!!readonly}
+      registry={registry}
+      displayLabel={displayLabel}
+      errors={errors}
+      onChange={onChange}
+      onDropPropertyClick={ignored}
+      onKeyChange={ignored}
+    >
       <Widget
         id={id}
         name={name}
@@ -201,9 +223,6 @@ export default function LayoutMultiSchemaField<
         value={selectedOption}
         options={widgetOptions}
       />
-      {!hideFieldError && rawErrors.length > 0 && (
-        <FieldErrorTemplate idSchema={idSchema} schema={schema} errors={rawErrors} registry={registry} />
-      )}
-    </>
+    </FieldTemplate>
   );
 }
diff --git a/packages/core/test/LayoutMultiSchemaField.test.tsx b/packages/core/test/LayoutMultiSchemaField.test.tsx
index 51bd694645..6c73171109 100644
--- a/packages/core/test/LayoutMultiSchemaField.test.tsx
+++ b/packages/core/test/LayoutMultiSchemaField.test.tsx
@@ -7,6 +7,7 @@ import {
   ErrorSchemaBuilder,
   FieldErrorProps,
   FieldProps,
+  FieldTemplateProps,
   getDiscriminatorFieldFromSchema,
   ID_KEY,
   IdSchema,
@@ -132,6 +133,7 @@ const anyOfSchema = {
 
 const DEFAULT_ID = 'test-id';
 const FIELD_ERROR_TEST_ID = 'FakeFieldErrorTemplate-testId';
+const FIELD_TEMPLATE_TEST_ID = 'FakeFieldTemplate-testId';
 
 const NOT_SHOWN_ERROR_SCHEMA = new ErrorSchemaBuilder().addErrors(
   'error message will not be rendered due to hideError flag',
@@ -147,6 +149,16 @@ function FakeFieldErrorTemplate(props: FieldErrorProps) {
   return <span data-testid={FIELD_ERROR_TEST_ID}>{errors}</span>;
 }
 
+function FakeFieldTemplate(props: FieldTemplateProps) {
+  const { children, errors } = props;
+  return (
+    <div data-testid={FIELD_TEMPLATE_TEST_ID}>
+      {children}
+      {errors}
+    </div>
+  );
+}
+
 const SelectWidgetTestId = 'select-widget-testid';
 
 function WrappedSelectWidget(props: WidgetProps) {
@@ -197,7 +209,7 @@ describe('LayoutMultiSchemaField', () => {
       registry: getTestRegistry(
         schema,
         {},
-        { FieldErrorTemplate: FakeFieldErrorTemplate },
+        { FieldErrorTemplate: FakeFieldErrorTemplate, FieldTemplate: FakeFieldTemplate },
         { SelectWidget: WrappedSelectWidget, RadioWidget: WrappedRadioWidget },
       ),
       schema,
@@ -252,8 +264,12 @@ describe('LayoutMultiSchemaField', () => {
 
     const { rerender } = render(<LayoutMultiSchemaField {...props} />);
 
+    // Renders the FakeFieldTemplate
+    const fakeFieldTemplate = screen.getByTestId(FIELD_TEMPLATE_TEST_ID);
+    expect(fakeFieldTemplate).toBeInTheDocument();
+
     // Renders the formControl that is the outer wrapper of the RadioWidget
-    const formControl = screen.getByTestId(RadioWidgetTestId);
+    const formControl = within(fakeFieldTemplate).getByTestId(SelectWidgetTestId);
     expect(formControl).toBeInTheDocument();
 
     // Renders formGroup
@@ -300,8 +316,12 @@ describe('LayoutMultiSchemaField', () => {
     });
     render(<LayoutMultiSchemaField {...props} />);
 
+    // Renders the FakeFieldTemplate
+    const fakeFieldTemplate = screen.getByTestId(FIELD_TEMPLATE_TEST_ID);
+    expect(fakeFieldTemplate).toBeInTheDocument();
+
     // Renders a form control
-    const formControl = screen.getByTestId(SelectWidgetTestId);
+    const formControl = within(fakeFieldTemplate).getByTestId(SelectWidgetTestId);
     expect(formControl).toBeInTheDocument();
 
     // Renders the select button with correct text
@@ -374,8 +394,12 @@ describe('LayoutMultiSchemaField', () => {
     // onFocus is called automatically because autofocus is true
     expect(props.onFocus).toHaveBeenCalledTimes(1);
 
+    // Renders the FakeFieldTemplate
+    const fakeFieldTemplate = screen.getByTestId(FIELD_TEMPLATE_TEST_ID);
+    expect(fakeFieldTemplate).toBeInTheDocument();
+
     // Renders a form control
-    const formControl = screen.getByTestId(SelectWidgetTestId);
+    const formControl = within(fakeFieldTemplate).getByTestId(SelectWidgetTestId);
     expect(formControl).toBeInTheDocument();
 
     // Renders the select button
@@ -438,8 +462,12 @@ describe('LayoutMultiSchemaField', () => {
     });
     render(<LayoutMultiSchemaField {...props} />);
 
+    // Renders the FakeFieldTemplate
+    const fakeFieldTemplate = screen.getByTestId(FIELD_TEMPLATE_TEST_ID);
+    expect(fakeFieldTemplate).toBeInTheDocument();
+
     // Renders a form control
-    const formControl = screen.getByTestId(SelectWidgetTestId);
+    const formControl = within(fakeFieldTemplate).getByTestId(SelectWidgetTestId);
     expect(formControl).toBeInTheDocument();
 
     // Renders the select button
@@ -462,8 +490,12 @@ describe('LayoutMultiSchemaField', () => {
     });
     render(<LayoutMultiSchemaField {...props} />);
 
+    // Renders the FakeFieldTemplate
+    const fakeFieldTemplate = screen.getByTestId(FIELD_TEMPLATE_TEST_ID);
+    expect(fakeFieldTemplate).toBeInTheDocument();
+
     // Renders the formControl that is the outer wrapper of the RadioWidget
-    const formControl = screen.getByTestId(RadioWidgetTestId);
+    const formControl = within(fakeFieldTemplate).getByTestId(SelectWidgetTestId);
     expect(formControl).toBeInTheDocument();
 
     const formGroup = within(formControl).getByRole('radiogroup');
diff --git a/packages/core/test/__snapshots__/GridSnap.test.tsx.snap b/packages/core/test/__snapshots__/GridSnap.test.tsx.snap
index 5527b2c0b3..d6fca0d458 100644
--- a/packages/core/test/__snapshots__/GridSnap.test.tsx.snap
+++ b/packages/core/test/__snapshots__/GridSnap.test.tsx.snap
@@ -828,77 +828,85 @@ exports[`Complex grid renders person and address and employment in a complex gri
             }
           }
         >
-          <div
-            className="field-radio-group"
-            id="root_employment"
-            role="radiogroup"
-          >
+          <div>
             <label
-              className="radio-inline "
-            >
-              <span>
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  autoFocus={false}
-                  checked={true}
-                  id="root_employment-0"
-                  name="root_employment"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  type="radio"
-                  value="0"
-                />
+              className="control-label"
+              htmlFor="root_employment"
+            >
+              Employment
+            </label>
+            <div
+              className="field-radio-group"
+              id="root_employment"
+              role="radiogroup"
+            >
+              <label
+                className="radio-inline "
+              >
                 <span>
-                  Company
+                  <input
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    autoFocus={false}
+                    checked={true}
+                    id="root_employment-0"
+                    name="root_employment"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    type="radio"
+                    value="0"
+                  />
+                  <span>
+                    Company
+                  </span>
                 </span>
-              </span>
-            </label>
-            <label
-              className="radio-inline "
-            >
-              <span>
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  autoFocus={false}
-                  checked={false}
-                  id="root_employment-1"
-                  name="root_employment"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  type="radio"
-                  value="1"
-                />
+              </label>
+              <label
+                className="radio-inline "
+              >
                 <span>
-                  Education
+                  <input
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    autoFocus={false}
+                    checked={false}
+                    id="root_employment-1"
+                    name="root_employment"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    type="radio"
+                    value="1"
+                  />
+                  <span>
+                    Education
+                  </span>
                 </span>
-              </span>
-            </label>
-            <label
-              className="radio-inline "
-            >
-              <span>
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  autoFocus={false}
-                  checked={false}
-                  id="root_employment-2"
-                  name="root_employment"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  type="radio"
-                  value="2"
-                />
+              </label>
+              <label
+                className="radio-inline "
+              >
                 <span>
-                  Other
+                  <input
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    autoFocus={false}
+                    checked={false}
+                    id="root_employment-2"
+                    name="root_employment"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    type="radio"
+                    value="2"
+                  />
+                  <span>
+                    Other
+                  </span>
                 </span>
-              </span>
-            </label>
+              </label>
+            </div>
           </div>
         </div>
         <div
@@ -2169,77 +2177,85 @@ exports[`Complex grid renders person and address and employment in a complex gri
             }
           }
         >
-          <div
-            className="field-radio-group"
-            id="root_employment"
-            role="radiogroup"
-          >
+          <div>
             <label
-              className="radio-inline "
-            >
-              <span>
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  autoFocus={false}
-                  checked={false}
-                  id="root_employment-0"
-                  name="root_employment"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  type="radio"
-                  value="0"
-                />
+              className="control-label"
+              htmlFor="root_employment"
+            >
+              Employment
+            </label>
+            <div
+              className="field-radio-group"
+              id="root_employment"
+              role="radiogroup"
+            >
+              <label
+                className="radio-inline "
+              >
                 <span>
-                  Company
+                  <input
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    autoFocus={false}
+                    checked={false}
+                    id="root_employment-0"
+                    name="root_employment"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    type="radio"
+                    value="0"
+                  />
+                  <span>
+                    Company
+                  </span>
                 </span>
-              </span>
-            </label>
-            <label
-              className="radio-inline "
-            >
-              <span>
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  autoFocus={false}
-                  checked={true}
-                  id="root_employment-1"
-                  name="root_employment"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  type="radio"
-                  value="1"
-                />
+              </label>
+              <label
+                className="radio-inline "
+              >
                 <span>
-                  Education
+                  <input
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    autoFocus={false}
+                    checked={true}
+                    id="root_employment-1"
+                    name="root_employment"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    type="radio"
+                    value="1"
+                  />
+                  <span>
+                    Education
+                  </span>
                 </span>
-              </span>
-            </label>
-            <label
-              className="radio-inline "
-            >
-              <span>
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  autoFocus={false}
-                  checked={false}
-                  id="root_employment-2"
-                  name="root_employment"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  type="radio"
-                  value="2"
-                />
+              </label>
+              <label
+                className="radio-inline "
+              >
                 <span>
-                  Other
+                  <input
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    autoFocus={false}
+                    checked={false}
+                    id="root_employment-2"
+                    name="root_employment"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    type="radio"
+                    value="2"
+                  />
+                  <span>
+                    Other
+                  </span>
                 </span>
-              </span>
-            </label>
+              </label>
+            </div>
           </div>
         </div>
         <div
@@ -3542,77 +3558,85 @@ exports[`Complex grid renders person and address and employment in a complex gri
             }
           }
         >
-          <div
-            className="field-radio-group"
-            id="root_employment"
-            role="radiogroup"
-          >
+          <div>
             <label
-              className="radio-inline "
-            >
-              <span>
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  autoFocus={false}
-                  checked={false}
-                  id="root_employment-0"
-                  name="root_employment"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  type="radio"
-                  value="0"
-                />
+              className="control-label"
+              htmlFor="root_employment"
+            >
+              Employment
+            </label>
+            <div
+              className="field-radio-group"
+              id="root_employment"
+              role="radiogroup"
+            >
+              <label
+                className="radio-inline "
+              >
                 <span>
-                  Company
+                  <input
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    autoFocus={false}
+                    checked={false}
+                    id="root_employment-0"
+                    name="root_employment"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    type="radio"
+                    value="0"
+                  />
+                  <span>
+                    Company
+                  </span>
                 </span>
-              </span>
-            </label>
-            <label
-              className="radio-inline "
-            >
-              <span>
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  autoFocus={false}
-                  checked={false}
-                  id="root_employment-1"
-                  name="root_employment"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  type="radio"
-                  value="1"
-                />
+              </label>
+              <label
+                className="radio-inline "
+              >
                 <span>
-                  Education
+                  <input
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    autoFocus={false}
+                    checked={false}
+                    id="root_employment-1"
+                    name="root_employment"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    type="radio"
+                    value="1"
+                  />
+                  <span>
+                    Education
+                  </span>
                 </span>
-              </span>
-            </label>
-            <label
-              className="radio-inline "
-            >
-              <span>
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  autoFocus={false}
-                  checked={true}
-                  id="root_employment-2"
-                  name="root_employment"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  type="radio"
-                  value="2"
-                />
+              </label>
+              <label
+                className="radio-inline "
+              >
                 <span>
-                  Other
+                  <input
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    autoFocus={false}
+                    checked={true}
+                    id="root_employment-2"
+                    name="root_employment"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    type="radio"
+                    value="2"
+                  />
+                  <span>
+                    Other
+                  </span>
                 </span>
-              </span>
-            </label>
+              </label>
+            </div>
           </div>
         </div>
         <div
@@ -4494,77 +4518,85 @@ exports[`Complex grid renders person and address and employment in a complex gri
             }
           }
         >
-          <div
-            className="field-radio-group"
-            id="root_employment"
-            role="radiogroup"
-          >
+          <div>
             <label
-              className="radio-inline "
-            >
-              <span>
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  autoFocus={false}
-                  checked={true}
-                  id="root_employment-0"
-                  name="root_employment"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  type="radio"
-                  value="0"
-                />
+              className="control-label"
+              htmlFor="root_employment"
+            >
+              Employment
+            </label>
+            <div
+              className="field-radio-group"
+              id="root_employment"
+              role="radiogroup"
+            >
+              <label
+                className="radio-inline "
+              >
                 <span>
-                  Company
+                  <input
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    autoFocus={false}
+                    checked={true}
+                    id="root_employment-0"
+                    name="root_employment"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    type="radio"
+                    value="0"
+                  />
+                  <span>
+                    Company
+                  </span>
                 </span>
-              </span>
-            </label>
-            <label
-              className="radio-inline "
-            >
-              <span>
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  autoFocus={false}
-                  checked={false}
-                  id="root_employment-1"
-                  name="root_employment"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  type="radio"
-                  value="1"
-                />
+              </label>
+              <label
+                className="radio-inline "
+              >
                 <span>
-                  Education
+                  <input
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    autoFocus={false}
+                    checked={false}
+                    id="root_employment-1"
+                    name="root_employment"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    type="radio"
+                    value="1"
+                  />
+                  <span>
+                    Education
+                  </span>
                 </span>
-              </span>
-            </label>
-            <label
-              className="radio-inline "
-            >
-              <span>
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  autoFocus={false}
-                  checked={false}
-                  id="root_employment-2"
-                  name="root_employment"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  type="radio"
-                  value="2"
-                />
+              </label>
+              <label
+                className="radio-inline "
+              >
                 <span>
-                  Other
+                  <input
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    autoFocus={false}
+                    checked={false}
+                    id="root_employment-2"
+                    name="root_employment"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    type="radio"
+                    value="2"
+                  />
+                  <span>
+                    Other
+                  </span>
                 </span>
-              </span>
-            </label>
+              </label>
+            </div>
           </div>
         </div>
         <div
diff --git a/packages/daisyui/package.json b/packages/daisyui/package.json
index 35ac2cc5ab..7a1d0ff4de 100644
--- a/packages/daisyui/package.json
+++ b/packages/daisyui/package.json
@@ -8,29 +8,29 @@
   "type": "module",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     },
     "./dist": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./dist/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     }
   },
   "files": [
diff --git a/packages/docs/docs/api-reference/LayoutGridField.md b/packages/docs/docs/api-reference/LayoutGridField.md
new file mode 100644
index 0000000000..523dea9834
--- /dev/null
+++ b/packages/docs/docs/api-reference/LayoutGridField.md
@@ -0,0 +1,268 @@
+# LayoutGridField
+
+The `LayoutGridField` will render a schema, uiSchema and formData combination out into a `GridTemplate` in the shape
+described in the uiSchema. To define the grid to use to render the elements within a field in the schema, provide in
+the uiSchema for that field the object contained under a `ui:layoutGrid` element. E.g. (as a JSON object):
+
+```json
+{
+  "field1" : {
+    "ui:field": "LayoutGridField",
+    "ui:layoutGrid": {
+      "ui:row": { ... }
+    }
+  }
+}
+```
+
+See the [LayoutGridField usage](../usage/layout-grid.md) for more detailed walk-through on how to use the component. This page is condensed
+version of the `uiSchema` APIs for faster reference.
+
+## ui:row
+
+The outermost level of a `LayoutGridField` is the `ui:row` that defines the nested rows, columns, and/or condition
+elements (i.e. "grid elements") in the grid. This definition is either a simple "grid elements" OR an object with
+native `GridTemplate` implementation-specific props and a `children` array of "grid elements". E.g. (as JSON objects):
+
+Simple `ui:row` definition, without additional `GridTemplate` props:
+
+```json
+{
+  "ui:row": [
+    { "ui:row"|"ui:col"|"ui:columns"|"ui:condition": ... },
+    ...
+  ]
+}
+```
+
+Complex `ui:row` definition, with additional `GridTemplate` (this example uses `@mui/material/Grid2` native props):
+
+```json
+{
+  "ui:row": {
+    "spacing": 2,
+    "size": {
+      "md": 4
+    },
+    "alignContent": "flex-start",
+    "className": "GridRow",
+    "children": [
+        {
+          "ui:row"|"ui:col"|"ui:columns"|"ui:condition": ...
+        },
+        ...
+      ]
+    }
+  }
+```
+
+> NOTE: Special note about the native `className` prop values. All className values will automatically be looked up in
+> the `formContext.lookupMap` in case they have been defined using a CSS-in-JS approach. In other words, from the
+> example above, if the `Form` was constructed with a `layoutGridLookupMap` set to `{ GridRow: cssInJs.GridRowClass }`
+> then when rendered, the native `GridTemplate` will get the `className` with the value from
+> `cssInJs.GridRowClass`. This automatic lookup will happen for any of the "grid elements" when rendering with
+> `GridTemplate` props. If multiple className values are present, for example:
+> `{ className: 'GridRow GridColumn' }`, the classNames are split apart, looked up individually, and joined
+> together to form one className with the values from `cssInJs.GridRowClass` and `cssInJs.GridColumnClass`. See the
+> [example](../usage/layout-grid.md#named-lookup-support-for-classname) in the usage documentation.
+
+## ui:col
+
+The `ui:col` grid element is used to specify the list of columns within a grid row. A `ui:col` element can take on
+several forms:
+
+1. a simple list of dotted-path field names within the root field;
+2. a list of objects containing the dotted-path field `name` any other props that are gathered into `ui:options` for the field;
+3. a list with a one-off `render` functional component with or without a non-field `name` identifier and any other to-be-spread props; and
+4. an object with native `GridTemplate` implementation specific props and a `children` array with 1) or 2) or even a nested `ui:row` or a `ui:condition` containing a `ui:row` (although this should be used carefully). E.g. (as JSON objects):
+
+Simple `ui:col` definition, without additional `GridTemplate` props and form 1 only children:
+
+```json
+{
+  "ui:col": ["innerField", "inner.grandChild", ...]
+}
+```
+
+Complicated `ui:col` definition, without additional `GridTemplate` props and form 2 only children:
+
+```json
+{
+  "ui:col": [
+    { "name": "innerField", "fullWidth": true },
+    { "name": "inner.grandChild", "fullWidth": false },
+    ...
+  ]
+}
+```
+
+More complicated `ui:col` definition, without additional `GridTemplate` props and form 2 children, one being a
+one-off `render` functional component without a non-field `name` identifier
+
+```json
+{
+  "ui:col": [
+    "innerField",
+    {
+      "render": "WizardNavButton",
+      "isNext": true,
+      "size": "large"
+    }
+  ]
+}
+```
+
+Most complicated `ui:col` definition, additional `GridTemplate` props and form 1, 2 and 3 children (this example
+uses @mui/material/Grid2 native props):
+
+```json
+{
+  "ui:col": {
+    "size": { "md": 4 },
+    "className": "GridColumn",
+    "children": [
+      "innerField",
+      { "name": "inner.grandChild", "fullWidth": true },
+      { "name": "customRender", "render": "CustomRender", "toSpread": "prop-value" },
+      { "ui:row|ui:condition": ... },
+      ...
+    ]
+  }
+}
+```
+
+> NOTE: If a `name` prop does not exist or its value does not match any field in a schema, then it is assumed to be a
+> custom `render` component. If the `render` prop does not exist, a null render will occur. If `render` is a
+> string, its value will be looked up in the `formContext.lookupMap` first before defaulting to a null render. If the
+> resulting looked up `render` is not a function (React components are functions), then it will be a null render.
+
+## ui:columns
+
+The `ui:columns` grid element is syntactic sugar to specify a set of `ui:col` columns that all share the same set of
+native `GridTemplate` props. In other words rather than writing the following configuration that renders a
+`<GridTemplate>` element with 3 `<GridTemplate column className="GridColumn col-md-4">` nodes and 2
+`<GridTemplate column className="col-md-6">` nodes within it (one for each of the fields contained in the `children`
+list):
+
+```json
+{
+  "ui:row": {
+    "children": [
+      {
+        "ui:col": {
+          "className": "GridColumn col-md-4",
+          "children": ["innerField"]
+        }
+      },
+      {
+        "ui:col": {
+          "className": "GridColumn col-md-4",
+          "children": ["inner.grandChild"]
+        }
+      },
+      {
+        "ui:col": {
+          "className": "GridColumn col-md-4",
+          "children": [{ "name": "inner.grandChild2" }]
+        }
+      },
+      {
+        "ui:col": {
+          "className": "col-md-6",
+          "children": ["innerField2"]
+        }
+      },
+      {
+        "ui:col": {
+          "className": "col-md-6",
+          "children": ["inner.grandChild3"]
+        }
+      }
+    ]
+  }
+}
+```
+
+One can write this instead:
+
+```json
+{
+  "ui:row": {
+    "children": [
+      {
+        "ui:columns": {
+          "className": "GridColumn col-md-4",
+          "children": ["innerField", "inner.grandChild", { "name": "inner.grandChild2", "fullWidth": true }]
+        }
+      },
+      {
+        "ui:columns": {
+          "className": "col-md-6",
+          "children": ["innerField2", "inner.grandChild3"]
+        }
+      }
+    ]
+  }
+}
+```
+
+> NOTE: This syntax differs from `"ui:col": { "className": "col-md-6", "children": ["innerField2", "inner.grandChild3"] }` in that
+> the `ui:col` will render the two children fields inside a single `<GridTemplate "className": "col-md-6",>`
+> element.
+
+## ui:condition
+
+The final grid element, `ui:condition`, allows for conditionally displaying "grid elements" within a row based on the
+current value of a field as it relates to a (list of) hard-coded value(s). There are four elements that make up a
+`ui:condition`:
+
+1. the dotted-path `field` name within the root field that makes up the left-side of the condition;
+2. the hard-coded `value` (single or list) that makes up the right-side of the condition;
+3. the `operator` that controls how the left and right sides of the condition are compared; and
+4. the `children` array that defines the "grid elements" to display if the condition passes.
+
+A `ui:condition` uses one of three `operators` when deciding if a condition passes:
+
+1. The `all` operator will pass when the right-side and left-side contains all the same value(s);
+2. the `some` operator will pass when the right-side and left-side contain as least one value in common;
+3. the `none` operator will pass when the right-side and left-side do not contain any values in common. E.g. (as JSON objects):
+
+Here is how to render an if-then-else for `field2` which is an enum that has 3 known values and supports allowing
+any other value:
+
+```json
+{
+  "ui:row": [
+    {
+      "ui:condition": {
+        "field": "field2",
+        "operator": "all",
+        "value": "value1",
+        "children": [
+          { "ui:row": [...] }
+        ],
+      }
+    },
+    {
+      "ui:condition": {
+        "field": "field2",
+        "operator": "some",
+        "value": ["value2", "value3"],
+        "children": [
+          { "ui:row": [...] }
+        ],
+      }
+    },
+    {
+      "ui:condition": {
+        "field": "field2",
+        "operator": "none",
+        "value": ["value1", "value2", "value3"],
+        "children": [
+          { "ui:row": [...] }
+        ]
+      }
+    }
+  ]
+}
+```
diff --git a/packages/docs/docs/migration-guides/v6.x upgrade guide.md b/packages/docs/docs/migration-guides/v6.x upgrade guide.md
index ad27783448..91f412cf2e 100644
--- a/packages/docs/docs/migration-guides/v6.x upgrade guide.md	
+++ b/packages/docs/docs/migration-guides/v6.x upgrade guide.md	
@@ -49,7 +49,7 @@ React 19 support is expected before the end of beta (although several developers
 
 There are 3 new packages added in RJSF version 6:
 
-- `@rjsf/daisyup`: This is new theme based on the `daisyui` toolkit
+- `@rjsf/daisyui`: This is new theme based on the `daisyui` toolkit
 - `@rjsf/react-bootstrap`: This is rename of the `bootstrap-4` theme with an upgrade to the latest version of `react-bootstrap`
 - `@rjsf/shadcn`: This is new theme based on the `shadcn` toolkit
 
diff --git a/packages/docs/docs/usage/layout-grid.md b/packages/docs/docs/usage/layout-grid.md
new file mode 100644
index 0000000000..00c02fdcda
--- /dev/null
+++ b/packages/docs/docs/usage/layout-grid.md
@@ -0,0 +1,1147 @@
+# Layout Grid
+
+Version 6 of RJSF introduced a new way of generating forms using the `UiSchema`, via the Layout Grid.
+Unlike the original method of showing each field in the JSON Schema, in order, as they appear hierarchically within the
+nested object hierarchy, the Layout Grid lets you define where each field goes on a grid in any place/order you choose.
+It even adds the ability to pass additional props to the rendering widget for each element being displayed.
+
+The Layout Grid takes full advantage of the `UiSchema`'s ability to customize the `ui:field` that is used to render a field
+or collection of fields by providing a new out-of-the-box field implementation called `LayoutGridField` that you can
+assign to the whole of the `schema` or just a piece of it. It also comes with its own "syntax" that lets you define
+a `row`, a `col`umn, and a set of `columns`. It also provides `condition`al logic that describes how a subset of the grid
+can be hidden/shown based upon the value(s) of a field. It even supports the inclusion of custom render components that
+are not associated with a field. Finally, there is built-in support for doing a named look up of data within a special
+location in the `FormContext`.
+
+Since each theme that RJSF supports has its own unique grid system, the `uiSchema` that one creates for the
+`LayoutGridField` for one theme will most likely not work for any other theme unless two themes have the exact same
+grid specification props. It also requires that one understand how to use the grid system of the theme and how it
+interplays with the `LayoutGridField`'s "syntax". In other words, it will likely take some experimentation to get the
+grid looking exactly the way you want it to.
+
+Let's break down how to use the `LayoutGridField` one step at a time.
+
+## Defining the LayoutGridField to reordering rows
+
+The `LayoutGridField` is designed to be used within the `uiSchema` via the `ui:field` syntax. It must be accompanied by
+the definition of the grid within the new `ui:layoutGrid` syntax. First let's start with a fairly simple `schema` that
+looks like:
+
+```json
+{
+  "type": "object",
+  "properties": {
+    "person": {
+      "title": "Person Info",
+      "type": "object",
+      "properties": {
+        "first": {
+          "title": "First Name",
+          "minLength": 1,
+          "maxLength": 200,
+          "type": "string"
+        },
+        "middle": {
+          "title": "Middle Name",
+          "minLength": 1,
+          "maxLength": 200,
+          "type": "string"
+        },
+        "last": {
+          "title": "Last Name",
+          "minLength": 1,
+          "maxLength": 200,
+          "type": "string"
+        }
+      },
+      "required": ["first", "last"]
+    }
+  }
+}
+```
+
+If you were to pass this `schema` to the RJSF `Form` you will end up with the following UI, shown here as a simple ASCII
+drawing:
+
+```text
+Person Info
+  First Name*
+  +------------------------------------------------------------------------------+
+  |                                                                              |
+  +------------------------------------------------------------------------------+
+
+  Middle Name
+  +------------------------------------------------------------------------------+
+  |                                                                              |
+  +------------------------------------------------------------------------------+
+
+  Last Name*
+  +------------------------------------------------------------------------------+
+  |                                                                              |
+  +------------------------------------------------------------------------------+
+```
+
+If you wanted to switch the order of the fields or remove middle name entirely, you could change the JSON schema, which
+is usually not desirable for most users. You could also use the `ui:order` feature and/or `ui:widget: "hidden"` in the
+`uiSchema` to accomplish this without changing the schema. And now you can also use the very flexible and powerful
+`LayoutGridField` field in the`uiSchema`.
+
+Now let's add a `uiSchema` that will allow us to change the order of the fields to be `Last Name`, `Middle Name` and `First Name`.
+This will highlight the first elements of the new "syntax"; `ui:layoutGrid` and `ui:row` :
+
+```json
+{
+  "ui:field": "LayoutGridField",
+  "ui:layoutGrid": {
+    "ui:row": {
+      "children": ["person.last", "person.middle", "person.first"]
+    }
+  }
+}
+```
+
+This results in the following UI using the `core` theme via the `Bootstrap 3` grid system:
+
+```text
+  Last Name*
+  +------------------------------------------------------------------------------+
+  |                                                                              |
+  +------------------------------------------------------------------------------+
+
+  Middle Name
+  +------------------------------------------------------------------------------+
+  |                                                                              |
+  +------------------------------------------------------------------------------+
+
+  First Name*
+  +------------------------------------------------------------------------------+
+  |                                                                              |
+  +------------------------------------------------------------------------------+
+```
+
+As mentioned before, another theme's grid system may render the above example differently. Most likely as three fields
+lined up next to each other. Assume all examples from here on out will be shown using the `core` theme. You may have to
+adjust the `uiSchema` for your theme to achieve the same results.
+
+### ui:layoutGrid
+
+The `LayoutGridField` will do nothing if used as a field without having the `ui:layoutGrid` object as its sibling.
+This root "syntax" keyword defines the structure of how the grid should be laid out for the field. Due to the nature of
+JSON objects, it must contain a single `ui:row` "syntax" keyword inside of which the rest of the grid is defined. Providing
+a second `ui:row` will create an invalid object.
+
+### ui:row, part 1
+
+The `ui:row` "syntax" represents a row of data in the grid. It has, at minimum, a single `children` property that
+describes what that row will render. In this first example, the children are the ids of the fields to render in order,
+as single grid elements. There is a second version of this syntax which is identical to the first in behavior:
+
+```json
+{
+  "ui:field": "LayoutGridField",
+  "ui:layoutGrid": {
+    "ui:row": ["person.last", "person.middle", "person.first"]
+  }
+}
+```
+
+Here the array is implicitly assumed to be the `children` property. Let's take a look at another example that will generate
+the exact same UI. The example below shows what happens when you use the `LayoutGridField` on a sub-object within the
+hierarchy:
+
+```json
+{
+  "person": {
+    "ui:field": "LayoutGridField",
+    "ui:layoutGrid": {
+      "ui:row": ["last", "middle", "first"]
+    }
+  }
+}
+```
+
+Here you can see the `person.` prefix on the field ids is no longer necessary. This is because the scope of the field is
+now the `person` object rather than the whole of the `schema`. You may have noticed from the example UI shown above that
+the `Person Info` header for the object disappeared. This is because we are no longer iterating through the hierarchy to
+render the object. Don't worry, there is another new field that was created to support just this use case (see next
+section).
+
+Also, if you wanted to entirely remove the `Middle Name` from your form because of a requirements change, you don't have
+to touch the JSON schema anymore. Instead you would just update the `uiSchema` as follows:
+
+```json
+{
+  "ui:field": "LayoutGridField",
+  "ui:layoutGrid": {
+    "ui:row": ["person.last", "person.first"]
+  }
+}
+```
+
+## LayoutHeaderField
+
+The `LayoutHeaderField` is another new field built into RJSF v6. Its sole purpose is to render the `title` for a collection
+of grid elements. It will read the `title` using the exact same mechanism as does the regular `Form`; first as `ui:title`
+if specified, then as `schema.title` if specified, then as `name` of the field. In order to restore the `Person Info`
+header to the example above, we have to make a few additions to the `uiSchema`:
+
+```json
+{
+  "ui:field": "LayoutGridField",
+  "ui:layoutGrid": {
+    "ui:row": ["person", "person.last", "person.middle", "person.first"]
+  },
+  "person": {
+    "ui:field": "LayoutHeaderField"
+  }
+}
+```
+
+## Defining the LayoutGridField to put the fields in a single row
+
+Now let's say the requirements changed again, and you have to show the first, middle and last name fields in a single row.
+Well, in the past, that would require quite a lot of customizing of RJSF's `core` templates. Now with the `LayoutGridField`
+it's just a matter of updating the `uiSchema` again, this time using more of the new "syntax"; `ui:col` and `ui:columns`:
+
+```json
+{
+  "ui:field": "LayoutGridField",
+  "ui:layoutGrid": {
+    "ui:row": {
+      "className": "row",
+      "children": [
+        {
+          "ui:row": [
+            {
+              "ui:col": {
+                "className": "col-xs-12",
+                "children": ["person"]
+              }
+            }
+          ]
+        },
+        {
+          "ui:row": [
+            {
+              "ui:col": {
+                "className": "col-xs-4",
+                "children": [
+                  {
+                    "name": "person.first"
+                  }
+                ]
+              }
+            },
+            {
+              "ui:col": {
+                "className": "col-xs-4",
+                "children": [
+                  {
+                    "name": "person.middle"
+                  }
+                ]
+              }
+            },
+            {
+              "ui:col": {
+                "className": "col-xs-4",
+                "children": [
+                  {
+                    "name": "person.last"
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "person": {
+    "ui:field": "LayoutHeaderField"
+  }
+}
+```
+
+Passing the above `uiSchema` to the RJSF `Form` you will end up with the following UI:
+
+```text
+Person Info
+  First Name*                   Middle Name                   Last Name*
+  +--------------------------+  +--------------------------+  +--------------------------+
+  |                          |  |                          |  |                          |
+  +--------------------------+  +--------------------------+  +--------------------------+
+```
+
+The above example uses the `core` UI theme's `Bootstrap 3` grid classes to make the `Person Info` span 12 columns within
+a row and each of the person name fields span 4 columns within a row. It also adds the "row" grid class to the outermost
+`ui:row` to make whole UI be part of a grid row.
+
+Now sometimes, depending on the grid system, you don't need to explicitly define both second-level rows, instead
+depending on the column grid behavior. Luckily the `core` theme's grid system is one of those, so the following UI
+schema will also produce the exact same result.
+
+```json
+{
+  "ui:field": "LayoutGridField",
+  "ui:layoutGrid": {
+    "ui:row": {
+      "className": "row",
+      "children": [
+        {
+          "ui:col": {
+            "className": "col-xs-12",
+            "children": ["person"]
+          }
+        },
+        {
+          "ui:columns": {
+            "className": "col-xs-4",
+            "children": ["person.first", "person.middle", "person.last"]
+          }
+        }
+      ]
+    }
+  },
+  "person": {
+    "ui:field": "LayoutHeaderField"
+  }
+}
+```
+
+Here is how the `LayoutGridField` "syntax" above is used.
+
+### ui:row, part 2
+
+As the above examples show, the `ui:row` object can be nested inside of the `children` of a `ui:row`. This signifies the
+nesting of one row inside another row. It also shows that any additional properties added to the `ui:row` object, in this
+case the `"className": "row"` will be spread onto the underlying theme's grid implementation. You may also pass other
+properties, such as `style` blocks or, in the case of other themes, properties that will affect the underlying grid system
+components.
+
+### ui:col
+
+The `ui:col` "syntax" represents a single column of data in the grid. Like `ui:row` this syntax will spread the
+`"className": "col-xs-12"` and `"className": "col-xs-4"` properties onto the underlying theme's grid implementation, as
+well as any other properties, such as `style` blocks, etc. In its most compact form, the `ui:col` can be written as
+`{ "ui:col": ["person"] }`, in a manner similar to `ui:row` where the array is implicitly assumed to be the `children`
+property.
+
+In its most expanded form, the `ui:col` contains an array of `children` in the form of objects with `"name": "<field id>"`
+as the minimum required property. Any additional properties added within the object will be passed along to the
+underlying `Widget` implementation in the `ui:options` portion of the `uiSchema`. This allows for fine-tuning any
+out-of-the-box or custom widgets. Let's take a look at an example where the `Middle Name` column hides its label adding
+a margin to take up the space once occupied by the label, and is reduced in size relative to the `First Name` and
+`Last Name`:
+
+```json
+{
+  "ui:field": "LayoutGridField",
+  "ui:layoutGrid": {
+    "ui:row": {
+      "className": "row",
+      "children": [
+        {
+          "ui:row": [
+            {
+              "ui:col": {
+                "className": "col-xs-12",
+                "children": ["person"]
+              }
+            }
+          ]
+        },
+        {
+          "ui:row": [
+            {
+              "ui:col": {
+                "className": "col-xs-5",
+                "children": ["person.first"]
+              }
+            },
+            {
+              "ui:col": {
+                "className": "col-xs-2",
+                "style": {
+                  "margin-top": "25px"
+                },
+                "children": [
+                  {
+                    "name": "person.middle",
+                    "label": false
+                  }
+                ]
+              }
+            },
+            {
+              "ui:col": {
+                "className": "col-xs-5",
+                "children": ["person.last"]
+              }
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "person": {
+    "ui:field": "LayoutHeaderField"
+  }
+}
+```
+
+Passing the above `uiSchema` to the RJSF `Form` you will end up with the following UI:
+
+```text
+Person Info
+  First Name*                                      Last Name*
+  +--------------------------------+  +---------+  +--------------------------------+
+  |                                |  |         |  |                                |
+  +--------------------------------+  +---------+  +--------------------------------+
+```
+
+### ui:columns
+
+The `ui:columns` "syntax" represents a group of columns in the grid. Like `ui:row` and `ui:col` this syntax will spread
+the properties onto the underlying theme's grid implementation (in an earlier example `"className": "col-xs-4"` ), as
+well as any other properties, such as `style` blocks, etc. It is short-hand notation for rendering a group of columns
+all with the same grid system properties. As shown in the above examples, the set of three `ui:col` definitions for
+first, middle and last names are the same as the single `ui:columns` definition with all three listed as children.
+
+In its most compact form, the `ui:col` can be written as `{ "ui:columns": ["person.first", "person.last"] }`, in a
+manner similar `ui:row` and `ui:col` where the array is implicitly assumed to be the `children` property. The
+`ui:columns` syntax also supports `children` in the form of objects with `"name": "<field id>"` as the minimum required
+property, passing along any additional properties to the underlying `Widget` as `ui:options`.
+
+## GridTemplate
+
+The concept of a theme's grid system has been mentioned several times in the documentation so far. Remember that each
+theme's grid system is unique to that theme. It is essential to understand how your theme's grid system works in order
+to know how to write the `uiSchema` to get the grid layout you want for your fields.
+
+If you want to know how your theme implements its grid system, take a look at the `GridTemplate` source code. You may
+also override your theme's `GridTemplate` with your own to fine tune how the properties you pass to the `ui:row`, `ui:col`,
+and `ui:columns` are handled. Each `ui:row` and `ui:col` will render a `GridTemplate` passing `column: false` for `ui:row`
+and `column: true` for `ui:col`. The `ui:columns` syntax will render a `GridTemplate` around each of the `children`. Any
+additional properties besides `children` will be directly passed to the `GridTemplate`.
+
+## Defining the LayoutGridField to render fields conditionally
+
+The `GridLayoutField` also supports the concept of conditionally rendering a set of fields based upon the value(s) of
+another field within the `formData`. Because the layout grid works on a field-by-field basis, it treats the render of a
+`anyOf` or `oneOf` field differently. It presents to the user ONLY the checkbox group (anyOf) or radio button group
+(oneOf). In order to render any nested fields associated with them, one has to explicitly specify them in the `uiSchema`.
+
+For the purposes of demonstrating the feature, let's work with a `schema` containing a fairly simple `oneOf` field with
+nested objects:
+
+```json
+{
+  "type": "object",
+  "properties": {
+    "name": {
+      "title": "My Name",
+      "type": "string"
+    },
+    "favorite": {
+      "title": "My Favorite Shape",
+      "discriminator": {
+        "propertyName": "shape"
+      },
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "shape": {
+              "title": "Line",
+              "type": "string",
+              "const": "line"
+            },
+            "length": {
+              "title": "Line Length",
+              "type": "number"
+            }
+          },
+          "required": ["shape", "length"]
+        },
+        {
+          "type": "object",
+          "properties": {
+            "shape": {
+              "title": "Circle",
+              "type": "string",
+              "const": "circle"
+            },
+            "radius": {
+              "title": "Radius",
+              "type": "number"
+            }
+          },
+          "required": ["shape", "radius"]
+        },
+        {
+          "type": "object",
+          "properties": {
+            "shape": {
+              "title": "Polygon",
+              "type": "string",
+              "const": "polygon"
+            },
+            "sides": {
+              "title": "# of Sides",
+              "type": "number",
+              "minimum": 3,
+              "default": 3
+            },
+            "length": {
+              "title": "Side Length",
+              "type": "number"
+            }
+          },
+          "required": ["shape", "sides"]
+        }
+      ]
+    }
+  },
+  "required": ["name"]
+}
+```
+
+If you were to pass this `schema` to the RJSF `Form` you will end up with the following UI, shown here as a simple ASCII
+drawing:
+
+```text
+My Favorite Shape
+  My Name*
+  +------------------------------------------------------------------------------+
+  |                                                                              |
+  +------------------------------------------------------------------------------+
+
+  My Favorite Shape
+    +--------------------------------------------------------------------------+
+    | My Favorite Shape option 1                                             v |
+    +--------------------------------------------------------------------------+
+
+   Favorite
+    Line*
+    +--------------------------------------------------------------------------+
+    | line                                                                     |
+    +--------------------------------------------------------------------------+
+
+    Line Length*
+    +--------------------------------------------------------------------------+
+    |                                                                          |
+    +--------------------------------------------------------------------------+
+```
+
+The second input is a dropdown with the values `My Favorite Shape option 1`, `My Favorite Shape option 2` and
+`My Favorite Shape option 3`. When you change the dropdown the other fields below it change to match the objects within
+the `oneOf` as follows:
+
+```text
+My Favorite Shape
+  My Name*
+  +------------------------------------------------------------------------------+
+  |                                                                              |
+  +------------------------------------------------------------------------------+
+
+  My Favorite Shape
+    +--------------------------------------------------------------------------+
+    | My Favorite Shape option 2                                             v |
+    +--------------------------------------------------------------------------+
+
+   Favorite
+    Circle*
+    +--------------------------------------------------------------------------+
+    | cirle                                                                    |
+    +--------------------------------------------------------------------------+
+
+    Radius*
+    +--------------------------------------------------------------------------+
+    |                                                                          |
+    +--------------------------------------------------------------------------+
+```
+
+and
+
+```text
+My Favorite Shape
+  My Name*
+  +------------------------------------------------------------------------------+
+  |                                                                              |
+  +------------------------------------------------------------------------------+
+
+  My Favorite Shape
+    +--------------------------------------------------------------------------+
+    | My Favorite Shape option 3                                             v |
+    +--------------------------------------------------------------------------+
+
+   Favorite
+    Polygon*
+    +--------------------------------------------------------------------------+
+    | polygon                                                                  |
+    +--------------------------------------------------------------------------+
+
+    # of Sides*
+    +--------------------------------------------------------------------------+
+    | 3                                                                        |
+    +--------------------------------------------------------------------------+
+
+    Side Length
+    +--------------------------------------------------------------------------+
+    |                                                                          |
+    +--------------------------------------------------------------------------+
+```
+
+> NOTE: The `LayoutGridField` does not currently work with a root-level `anyOf` or `oneOf` object since it requires that
+> everything being displayed in have a field id and they don't.
+
+Now let's add a `uiSchema` that will allow us to create a much more pleasing UI where the dropdown contains the actual
+`oneOf` values and the fields all show up on the side of the dropdown:
+
+```json
+{
+  "ui:field": "LayoutGridField",
+  "ui:layoutGrid": {
+    "ui:row": {
+      "className": "row",
+      "children": [
+        {
+          "ui:col": {
+            "className": "col-xs-12",
+            "children": ["name"]
+          }
+        },
+        {
+          "ui:col": {
+            "className": "col-xs-4",
+            "children": ["favorite"]
+          }
+        },
+        {
+          "ui:condition": {
+            "field": "favorite.shape",
+            "value": "line",
+            "operator": "all",
+            "children": [
+              {
+                "ui:col": {
+                  "className": "col-xs-4",
+                  "children": ["favorite.length"]
+                }
+              }
+            ]
+          }
+        },
+        {
+          "ui:condition": {
+            "field": "favorite.shape",
+            "value": "circle",
+            "operator": "all",
+            "children": [
+              {
+                "ui:col": {
+                  "className": "col-xs-4",
+                  "children": ["favorite.radius"]
+                }
+              }
+            ]
+          }
+        },
+        {
+          "ui:condition": {
+            "field": "favorite.shape",
+            "value": "polygon",
+            "operator": "all",
+            "children": [
+              {
+                "ui:columns": {
+                  "className": "col-xs-4",
+                  "children": ["favorite.sides", "favorite.length"]
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  },
+  "favorite": {
+    "ui:widget": "select"
+  }
+}
+```
+
+This results in the following UI using the `core` theme via the `Bootstrap 3` grid system:
+
+```text
+  My Name*
+  +--------------------------------------------------------------------------------------+
+  |                                                                                      |
+  +--------------------------------------------------------------------------------------+
+
+  My Favorite Shape*            Line Length*
+  +--------------------------+  +--------------------------+
+  | Line                   v |  |                          |
+  +--------------------------+  +--------------------------+
+```
+
+and
+
+```text
+  My Name*
+  +--------------------------------------------------------------------------------------+
+  |                                                                                      |
+  +--------------------------------------------------------------------------------------+
+
+  My Favorite Shape*            Radius*
+  +--------------------------+  +--------------------------+
+  | Circle                 v |  |                          |
+  +--------------------------+  +--------------------------+
+```
+
+and
+
+```text
+  My Name*
+  +--------------------------------------------------------------------------------------+
+  |                                                                                      |
+  +--------------------------------------------------------------------------------------+
+
+  My Favorite Shape*            # of Sides*                   Side Length
+  +--------------------------+  +--------------------------+  +--------------------------+
+  | Polygon                v |  | 3                        |  |                          |
+  +--------------------------+  +--------------------------+  +--------------------------+
+```
+
+As mentioned before, another theme's grid system may render the above example differently.
+
+### ui:condition
+
+The `ui:condition` "syntax" represents conditional rendering of data in the grid. The condition has four required
+properties, `field`, `value`, `operator` and `children`. Let's talk about each in turn.
+
+- `field`: The dotted-path name of a leaf-level field that makes up the left-side of the condition, used to get data from the `formData`
+- `value`: A single value or a list of values that make up the right-side of the condition
+- `operator`: One of the following three options that controls how the left and right sides of the condition are compared
+  1. `all`: This operator will pass when the right-side and left-side contains all the same value(s)
+  2. `some`: This operator will pass when the right-side and left-side contain as least one value in common
+  3. `none`: This operator will pass when the right-side and left-side do not contain any values in common
+- `children`: The list of `ui:row`, `ui:col` or `ui:columns` definitions to display when the condition is true
+
+In the example above, when the `favorite.shape` field value is `line` then the `favorite.length` field is displayed in
+the grid spanning 4 columns. When it is `circle`, then `favorite.radius` is displayed in the grid spanning 4 columns.
+When it is `polygon`, then `favorite.sides` and `favorite.length` are displayed in the grid, each spanning 4 columns.
+
+We leave it up to the reader to create other examples that use different `operator`s.
+
+## Other capabilities of the LayoutGridField
+
+There are a few more small features that the `LayoutGridField` supports. First, there is a `FormContext` named lookup
+capability that allows one to provide a name-mapped set of strings, components and functions in the `FormContext` inside
+of a well-known location, `layoutGridLookupMap` and then reference those names within the `uiSchema`. Second, the grid
+rendering code recognizes an alternate "syntax" for the objects in `children` arrays in order to display any random
+React element within a grid. Below are examples of them both.
+
+### Named lookup support for className
+
+Since some themes, like `mui`, support CSS-in-JS class names, one cannot hard-code the actual `className` in the
+`uiSchema` easily. That is where the name-mapped information in the `FormContext` comes into play. Let's assume that
+you are using a theme like `mui` and you need to style a `Grid` using CSS-in-JS you could do something like the following:
+
+```json uiSchema.json
+{
+  "ui:field": "LayoutGridField",
+  "ui:layoutGrid": {
+    "ui:row": {
+      "className": "GridStyle anotherClass",
+      "children": ["person.last", "person.first"]
+    }
+  }
+}
+```
+
+```tsx
+import { styled, Grid } from '@mui/material';
+import Form from '@rjsf/core';
+import { LOOKUP_MAP_NAME, FormContextType } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+
+// Import the Person Info schema from above
+import schema from './personSchema.json';
+// Import the UI Schema from the file above
+import uiSchema from './uiSchema.json';
+
+const css = {
+  STYLED_GRID: 'StyledGrid',
+};
+
+// Define the style
+const StyledGrid = styled(Grid)`
+  ${`& .${css.STYLED_GRID}`} {
+    p {
+      /* Override default presentation of <p> tags within a grid  */
+      font-weight: bold
+      color: dark-purple !important;
+    }
+  }
+`;
+
+// Add the style to the `LOOKUP_MAP_NAME` that the `LayoutGridField` uses
+const formContext: FormContextType = {
+  [LOOKUP_MAP_NAME]: {
+    GridStyle: css.STYLED_GRID,
+  },
+};
+
+render(
+  <Form schema={schema} uiSchema={uiSchema} validator={validator} formContext={formContext} />,
+  document.getElementById('app'),
+);
+```
+
+As you can see in the example, we've created a `FormContext` that has the named-lookup map containing the
+`css.STYLED_GRID` object mapped to `GridStyle`. In the `uiSchema` we then add `GridStyle` as the `className` for the
+grid rows. Under the hood, the `LayoutGridField` automatically goes through the `className` props and does a lookup of
+each class name in the `FormContext`, replacing the `GridStyle` with the generated `css.GRID_STYLE` name. And because the
+other class name in the example, `anotherClass`, is not mapped in the named-lookup map, it will passed to the
+`GridTemplate` as is. In summary, if the CSS-in-JS class is called `StyledGrid-1asd123` then the `className` property
+passed to the `GridTemplate` will be `"StyledGrid-1asd123 anotherClass"`.
+
+### Rendering a custom React element in the grid
+
+Because you have full control of how you layout your components in the grid, what do you do when you want to add an
+element to your presentation that isn't directly associated with a `schema`, like say an image? Well, that is actually
+really easy using a variant of the "syntax" for a `children` node in the `uiSchema`. Here's how:
+
+```json shapeUiSchema.json
+{
+  "ui:field": "LayoutGridField",
+  "ui:layoutGrid": {
+    "ui:row": {
+      "className": "row",
+      "children": [
+        {
+          "ui:col": {
+            "className": "col-xs-12",
+            "children": ["name"]
+          }
+        },
+        {
+          "ui:col": {
+            "className": "col-xs-4",
+            "children": ["favorite"]
+          }
+        },
+        {
+          "ui:condition": {
+            "field": "favorite.shape",
+            "value": "line",
+            "operator": "all",
+            "children": [
+              {
+                "ui:col": {
+                  "className": "col-xs-2",
+                  "children": [
+                    {
+                      "name": "",
+                      "render": "LineImageComponent",
+                      "size": "small-size"
+                    }
+                  ]
+                }
+              },
+              {
+                "ui:col": {
+                  "className": "col-xs-4",
+                  "children": ["favorite.length"]
+                }
+              }
+            ]
+          }
+        },
+        {
+          "ui:condition": {
+            "field": "favorite.shape",
+            "value": "circle",
+            "operator": "all",
+            "children": [
+              {
+                "ui:col": {
+                  "className": "col-xs-2",
+                  "children": [
+                    {
+                      "name": "",
+                      "render": "CircleImageComponent",
+                      "size": "small-size"
+                    }
+                  ]
+                }
+              },
+              {
+                "ui:col": {
+                  "className": "col-xs-4",
+                  "children": ["favorite.radius"]
+                }
+              }
+            ]
+          }
+        },
+        {
+          "ui:condition": {
+            "field": "favorite.shape",
+            "value": "polygon",
+            "operator": "all",
+            "children": [
+              {
+                "ui:col": {
+                  "className": "col-xs-2",
+                  "children": [
+                    {
+                      "name": "",
+                      "render": "PolygonImageComponent",
+                      "size": "small-size"
+                    }
+                  ]
+                }
+              },
+              {
+                "ui:columns": {
+                  "className": "col-xs-3",
+                  "children": ["favorite.sides", "favorite.length"]
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  },
+  "favorite": {
+    "ui:widget": "select"
+  }
+}
+```
+
+```tsx
+import Form from '@rjsf/core';
+import { LOOKUP_MAP_NAME, FormContextType } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+
+// Import the My Favorite Shape schema from above section
+import schema from './shapeSchema.json';
+// Import the UI Schema from the file above
+import uiSchema from './shapeUiSchema.json';
+// Now import my 3 shape React components
+import { LineShape, CircleShape, PolygonShape } from './myShapes';
+
+// Add the style to the `LOOKUP_MAP_NAME` that the `LayoutGridField` uses
+const formContext: FormContextType = {
+  [LOOKUP_MAP_NAME]: {
+    LineImageComponent: LineShape,
+    CircleImageComponent: CircleShape,
+    PolygonImageComponent: PolygonShape,
+  },
+};
+
+render(
+  <Form schema={schema} uiSchema={uiSchema} validator={validator} formContext={formContext} />,
+  document.getElementById('app'),
+);
+```
+
+As you can see in the example, we've created a `FormContext` that contains the named-lookup map containing the three
+components (`LineShape`, `CircleShape`, `PolygonShape`) mapped to the lookup keys `LineImageComponent`,
+`CircleImageComponent`, `PolygonImageComponent` respectively. In the `uiSchema`, we use the optional `render` property
+in the `children` object "syntax" to define the lookup name of the component we want to use. The `LayoutGridField` will
+then do a lookup of the `render` string. If you forget to add the `formContext` or the mapping in the `LOOKUP_NAME_MAP`
+then nothing will be rendered.
+
+If you provide an empty string as the `name` along with the `render`, then your component will be rendered only with any
+additional properties passed in the `children` object. If you provide a `name` that matches a field in the `schema`,
+then the `render` component won't be used. Otherwise, the `render` component will be passed all of the `FieldProp`s,
+including the `schema`, `uiSchema`, `idSchema`, `errorSchema`, `formData`, `registry`, etc.
+
+So our example will render the `LineShape` component with `size: 'small-size'` in the second column between the
+`My Favorite Shape` dropdown and the `Line Length` input. Also, it will render the `CircleShape` component with
+`size: 'small-size'` in the second column between the `My Favorite Shape` dropdown and the `Radius` input. Finally,
+it will render the `PolygonShape` component with `size: 'small-size'` in the second column between the
+`My Favorite Shape` dropdown and the `# of Sides` input.
+
+#### Passing components directly in uiSchema
+
+The `render` "syntax" also works if you have an object-based `uiSchema` and pass the component function directly rather
+than use a named lookup. For example:
+
+```tsx
+import Form from '@rjsf/core';
+import { LOOKUP_MAP_NAME, FormContextType, UiSchema } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+
+// Import the My Favorite Shape schema from above section
+import schema from './shapeSchema.json';
+// Now import my 3 shape React components that understand how to extract the props from `formData`
+import { LineShape, CircleShape, PolygonShape } from './myShapes';
+
+const uiSchema: UiSchema = {
+  'ui:field': 'LayoutGridField',
+  'ui:layoutGrid': {
+    'ui:row': {
+      className: 'row',
+      children: [
+        {
+          'ui:col': {
+            className: 'col-xs-12',
+            children: ['name'],
+          },
+        },
+        {
+          'ui:col': {
+            className: 'col-xs-4',
+            children: ['favorite'],
+          },
+        },
+        {
+          'ui:condition': {
+            field: 'favorite.shape',
+            value: 'line',
+            operator: 'all',
+            children: [
+              {
+                'ui:col': {
+                  className: 'col-xs-4',
+                  children: ['favorite.length'],
+                },
+              },
+              {
+                'ui:col': {
+                  className: 'col-xs-12',
+                  children: [
+                    {
+                      name: 'lineImage',
+                      render: LineShape,
+                      dataPath: 'favorite.length',
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+        {
+          'ui:condition': {
+            field: 'favorite.shape',
+            value: 'circle',
+            operator: 'all',
+            children: [
+              {
+                'ui:col': {
+                  className: 'col-xs-4',
+                  children: ['favorite.radius'],
+                },
+              },
+              {
+                'ui:col': {
+                  className: 'col-xs-12',
+                  children: [
+                    {
+                      name: 'circleShape',
+                      render: CircleShape,
+                      dataPath: 'favorite.radius',
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+        {
+          'ui:condition': {
+            field: 'favorite.shape',
+            value: 'polygon',
+            operator: 'all',
+            children: [
+              {
+                'ui:columns': {
+                  className: 'col-xs-4',
+                  children: ['favorite.sides', 'favorite.length'],
+                },
+              },
+              {
+                'ui:col': {
+                  className: 'col-xs-12',
+                  children: [
+                    {
+                      name: 'polygonShape',
+                      render: PolygonShape,
+                      dataPaths: ['favorite.sides', 'favorite.length'],
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+  favorite: {
+    'ui:widget': 'select',
+  },
+};
+
+render(
+  <Form schema={schema} uiSchema={uiSchema} validator={validator} formContext={formContext} />,
+  document.getElementById('app'),
+);
+```
+
+Let's assume that the `LineShape`, `CircleShape` and `PolygonShape` components configured above use the `dataPath[s]`
+property to extract the fields from the `formData` that is being passed to them in order to display the exact size of
+the shape. The grid above will render the `*Shape` components in a 12-wide column below the field inputs.
+
+### Other named lookup situations
+
+Other `children` properties also do named lookups. In the `shapeUiSchema.json` example above, if the `*Shape` components
+are upgraded to change the input of the `size` prop to have newer values, one could use the `FormContext` to map the
+`small-size` value to a newer value. For example, if you wanted to use the new `medium` value for the `size` prop, or
+if you wanted to programmatically control which size to use outside of the `Form` you could update the example as
+follows:
+
+```tsx
+import Form from '@rjsf/core';
+import { LOOKUP_MAP_NAME, FormContextType } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+
+// Import the My Favorite Shape schema from above section
+import schema from './shapeSchema.json';
+// Import the UI Schema from the file above
+import uiSchema from './shapeUiSchema.json';
+// Now import my 3 shape React components
+import { LineShape, CircleShape, PolygonShape } from './myShapes';
+
+const MEDIUM_SIZE = 'medium';
+
+// Add the style to the `LOOKUP_MAP_NAME` that the `LayoutGridField` uses
+const formContext: FormContextType = {
+  [LOOKUP_MAP_NAME]: {
+    LineImageComponent: LineShape,
+    CircleImageComponent: CircleShape,
+    PolygonImageComponent: PolygonShape,
+    'small-size': MEDIUM_SIZE,
+  },
+};
+
+render(
+  <Form schema={schema} uiSchema={uiSchema} validator={validator} formContext={formContext} />,
+  document.getElementById('app'),
+);
+```
+
+## So much flexibility available
+
+These examples are just a tiny fraction of the ways the `LayoutGridField` can be used. Remember, understand the theme's
+grid system and the "syntax" described above and [here](../api-reference/LayoutGridField.md). Play around, you can build
+just about any UI you want and still have it populate the JSON schema's `formData`!
+
+**ENJOY!!**
diff --git a/packages/fluentui-rc/package.json b/packages/fluentui-rc/package.json
index dded186b59..f63da9509f 100644
--- a/packages/fluentui-rc/package.json
+++ b/packages/fluentui-rc/package.json
@@ -30,29 +30,29 @@
   "type": "module",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     },
     "./dist": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./dist/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     }
   },
   "files": [
diff --git a/packages/fluentui-rc/test/__snapshots__/GridSnap.test.tsx.snap b/packages/fluentui-rc/test/__snapshots__/GridSnap.test.tsx.snap
index 09f2f57bdc..6bc382f33f 100644
--- a/packages/fluentui-rc/test/__snapshots__/GridSnap.test.tsx.snap
+++ b/packages/fluentui-rc/test/__snapshots__/GridSnap.test.tsx.snap
@@ -654,8 +654,8 @@ exports[`Complex grid renders person and address and employment in a complex gri
                         >
                           <label
                             className="fui-Label fui-Field__label ___1r7nw7g_1a9hq9n fk6fouc f19n0e5 fkhj508 f1i3iumi fclwglc fywfov9 fyacil5"
-                            htmlFor="field-r2n__control"
-                            id="field-r2n__label"
+                            htmlFor="field-r2o__control"
+                            id="field-r2o__label"
                           >
                             State
                             <span
@@ -671,7 +671,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
                             <button
                               aria-describedby="root_person_address_state__error root_person_address_state__description root_person_address_state__help"
                               aria-expanded={false}
-                              aria-labelledby="field-r2n__label"
+                              aria-labelledby="field-r2o__label"
                               aria-required={true}
                               autoFocus={false}
                               className="fui-Dropdown__button ___10ah4o2_6igl400 f122n59 f1c21dwh fre7gi1 f1358rze fqdk4by f1rvrf73 f1ewtqcl f19n0e5 f14mj54c f1k6fduh f13qh94s fk6fouc f12nh0o2 f1869bpl f1o700av fly5x3f ftqa4ok fkhj508 figsok6 f1i3iumi f1sbtcvk f11gcy0p fdghr9 f1e60jzv"
@@ -799,93 +799,99 @@ exports[`Complex grid renders person and address and employment in a complex gri
               }
             }
           >
-            <label
-              className="fui-Label ___1yevxz2_yljzsa0 fk6fouc f19n0e5 fkhj508 f1i3iumi"
-              htmlFor="root_employment"
-            >
-              Employment
-            </label>
-            <div
-              aria-describedby="root_employment__error root_employment__description root_employment__help"
-              className="fui-RadioGroup ___1o959zg_y6ivho0 f22iagw f6jr5hl"
-              id="root_employment"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="radiogroup"
-            >
-              <span
-                className="fui-Radio rm0dkue"
+            <div>
+              <div
+                className="fui-Field ___keyyzl0_1dbn5sh f13qh94s"
               >
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  checked={true}
-                  className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
-                  id="root_employment-0"
-                  name="root_employment"
-                  onChange={[Function]}
-                  type="radio"
-                  value="0"
-                />
-                <div
-                  aria-hidden={true}
-                  className="fui-Radio__indicator rwtekvw"
-                />
                 <label
-                  className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
-                  htmlFor="root_employment-0"
+                  className="fui-Label ___1yevxz2_yljzsa0 fk6fouc f19n0e5 fkhj508 f1i3iumi"
+                  htmlFor="root_employment"
                 >
-                  Company
+                  Employment
                 </label>
-              </span>
-              <span
-                className="fui-Radio rm0dkue"
-              >
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  checked={false}
-                  className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
-                  id="root_employment-1"
-                  name="root_employment"
-                  onChange={[Function]}
-                  type="radio"
-                  value="1"
-                />
                 <div
-                  aria-hidden={true}
-                  className="fui-Radio__indicator rwtekvw"
-                />
-                <label
-                  className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
-                  htmlFor="root_employment-1"
-                >
-                  Education
-                </label>
-              </span>
-              <span
-                className="fui-Radio rm0dkue"
-              >
-                <input
                   aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  checked={false}
-                  className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
-                  id="root_employment-2"
-                  name="root_employment"
+                  className="fui-RadioGroup ___1o959zg_y6ivho0 f22iagw f6jr5hl"
+                  id="root_employment"
+                  onBlur={[Function]}
                   onChange={[Function]}
-                  type="radio"
-                  value="2"
-                />
-                <div
-                  aria-hidden={true}
-                  className="fui-Radio__indicator rwtekvw"
-                />
-                <label
-                  className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
-                  htmlFor="root_employment-2"
+                  onFocus={[Function]}
+                  role="radiogroup"
                 >
-                  Other
-                </label>
-              </span>
+                  <span
+                    className="fui-Radio rm0dkue"
+                  >
+                    <input
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      checked={true}
+                      className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
+                      id="root_employment-0"
+                      name="root_employment"
+                      onChange={[Function]}
+                      type="radio"
+                      value="0"
+                    />
+                    <div
+                      aria-hidden={true}
+                      className="fui-Radio__indicator rwtekvw"
+                    />
+                    <label
+                      className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
+                      htmlFor="root_employment-0"
+                    >
+                      Company
+                    </label>
+                  </span>
+                  <span
+                    className="fui-Radio rm0dkue"
+                  >
+                    <input
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      checked={false}
+                      className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
+                      id="root_employment-1"
+                      name="root_employment"
+                      onChange={[Function]}
+                      type="radio"
+                      value="1"
+                    />
+                    <div
+                      aria-hidden={true}
+                      className="fui-Radio__indicator rwtekvw"
+                    />
+                    <label
+                      className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
+                      htmlFor="root_employment-1"
+                    >
+                      Education
+                    </label>
+                  </span>
+                  <span
+                    className="fui-Radio rm0dkue"
+                  >
+                    <input
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      checked={false}
+                      className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
+                      id="root_employment-2"
+                      name="root_employment"
+                      onChange={[Function]}
+                      type="radio"
+                      value="2"
+                    />
+                    <div
+                      aria-hidden={true}
+                      className="fui-Radio__indicator rwtekvw"
+                    />
+                    <label
+                      className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
+                      htmlFor="root_employment-2"
+                    >
+                      Other
+                    </label>
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -1028,8 +1034,8 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   >
                     <label
                       className="fui-Label fui-Field__label ___1r7nw7g_1a9hq9n fk6fouc f19n0e5 fkhj508 f1i3iumi fclwglc fywfov9 fyacil5"
-                      htmlFor="field-r32__control"
-                      id="field-r32__label"
+                      htmlFor="field-r34__control"
+                      id="field-r34__label"
                     >
                       State
                       <span
@@ -1045,7 +1051,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
                       <button
                         aria-describedby="root_employment_location_state__error root_employment_location_state__description root_employment_location_state__help"
                         aria-expanded={false}
-                        aria-labelledby="field-r32__label"
+                        aria-labelledby="field-r34__label"
                         aria-required={true}
                         autoFocus={false}
                         className="fui-Dropdown__button ___10ah4o2_6igl400 f122n59 f1c21dwh fre7gi1 f1358rze fqdk4by f1rvrf73 f1ewtqcl f19n0e5 f14mj54c f1k6fduh f13qh94s fk6fouc f12nh0o2 f1869bpl f1o700av fly5x3f ftqa4ok fkhj508 figsok6 f1i3iumi f1sbtcvk f11gcy0p fdghr9 f1e60jzv"
@@ -1782,8 +1788,8 @@ exports[`Complex grid renders person and address and employment in a complex gri
                         >
                           <label
                             className="fui-Label fui-Field__label ___1r7nw7g_1a9hq9n fk6fouc f19n0e5 fkhj508 f1i3iumi fclwglc fywfov9 fyacil5"
-                            htmlFor="field-r3m__control"
-                            id="field-r3m__label"
+                            htmlFor="field-r3o__control"
+                            id="field-r3o__label"
                           >
                             State
                             <span
@@ -1799,7 +1805,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
                             <button
                               aria-describedby="root_person_address_state__error root_person_address_state__description root_person_address_state__help"
                               aria-expanded={false}
-                              aria-labelledby="field-r3m__label"
+                              aria-labelledby="field-r3o__label"
                               aria-required={true}
                               autoFocus={false}
                               className="fui-Dropdown__button ___10ah4o2_6igl400 f122n59 f1c21dwh fre7gi1 f1358rze fqdk4by f1rvrf73 f1ewtqcl f19n0e5 f14mj54c f1k6fduh f13qh94s fk6fouc f12nh0o2 f1869bpl f1o700av fly5x3f ftqa4ok fkhj508 figsok6 f1i3iumi f1sbtcvk f11gcy0p fdghr9 f1e60jzv"
@@ -1927,93 +1933,99 @@ exports[`Complex grid renders person and address and employment in a complex gri
               }
             }
           >
-            <label
-              className="fui-Label ___1yevxz2_yljzsa0 fk6fouc f19n0e5 fkhj508 f1i3iumi"
-              htmlFor="root_employment"
-            >
-              Employment
-            </label>
-            <div
-              aria-describedby="root_employment__error root_employment__description root_employment__help"
-              className="fui-RadioGroup ___1o959zg_y6ivho0 f22iagw f6jr5hl"
-              id="root_employment"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="radiogroup"
-            >
-              <span
-                className="fui-Radio rm0dkue"
+            <div>
+              <div
+                className="fui-Field ___keyyzl0_1dbn5sh f13qh94s"
               >
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  checked={false}
-                  className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
-                  id="root_employment-0"
-                  name="root_employment"
-                  onChange={[Function]}
-                  type="radio"
-                  value="0"
-                />
-                <div
-                  aria-hidden={true}
-                  className="fui-Radio__indicator rwtekvw"
-                />
                 <label
-                  className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
-                  htmlFor="root_employment-0"
+                  className="fui-Label ___1yevxz2_yljzsa0 fk6fouc f19n0e5 fkhj508 f1i3iumi"
+                  htmlFor="root_employment"
                 >
-                  Company
+                  Employment
                 </label>
-              </span>
-              <span
-                className="fui-Radio rm0dkue"
-              >
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  checked={true}
-                  className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
-                  id="root_employment-1"
-                  name="root_employment"
-                  onChange={[Function]}
-                  type="radio"
-                  value="1"
-                />
                 <div
-                  aria-hidden={true}
-                  className="fui-Radio__indicator rwtekvw"
-                />
-                <label
-                  className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
-                  htmlFor="root_employment-1"
-                >
-                  Education
-                </label>
-              </span>
-              <span
-                className="fui-Radio rm0dkue"
-              >
-                <input
                   aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  checked={false}
-                  className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
-                  id="root_employment-2"
-                  name="root_employment"
+                  className="fui-RadioGroup ___1o959zg_y6ivho0 f22iagw f6jr5hl"
+                  id="root_employment"
+                  onBlur={[Function]}
                   onChange={[Function]}
-                  type="radio"
-                  value="2"
-                />
-                <div
-                  aria-hidden={true}
-                  className="fui-Radio__indicator rwtekvw"
-                />
-                <label
-                  className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
-                  htmlFor="root_employment-2"
+                  onFocus={[Function]}
+                  role="radiogroup"
                 >
-                  Other
-                </label>
-              </span>
+                  <span
+                    className="fui-Radio rm0dkue"
+                  >
+                    <input
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      checked={false}
+                      className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
+                      id="root_employment-0"
+                      name="root_employment"
+                      onChange={[Function]}
+                      type="radio"
+                      value="0"
+                    />
+                    <div
+                      aria-hidden={true}
+                      className="fui-Radio__indicator rwtekvw"
+                    />
+                    <label
+                      className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
+                      htmlFor="root_employment-0"
+                    >
+                      Company
+                    </label>
+                  </span>
+                  <span
+                    className="fui-Radio rm0dkue"
+                  >
+                    <input
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      checked={true}
+                      className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
+                      id="root_employment-1"
+                      name="root_employment"
+                      onChange={[Function]}
+                      type="radio"
+                      value="1"
+                    />
+                    <div
+                      aria-hidden={true}
+                      className="fui-Radio__indicator rwtekvw"
+                    />
+                    <label
+                      className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
+                      htmlFor="root_employment-1"
+                    >
+                      Education
+                    </label>
+                  </span>
+                  <span
+                    className="fui-Radio rm0dkue"
+                  >
+                    <input
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      checked={false}
+                      className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
+                      id="root_employment-2"
+                      name="root_employment"
+                      onChange={[Function]}
+                      type="radio"
+                      value="2"
+                    />
+                    <div
+                      aria-hidden={true}
+                      className="fui-Radio__indicator rwtekvw"
+                    />
+                    <label
+                      className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
+                      htmlFor="root_employment-2"
+                    >
+                      Other
+                    </label>
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -2193,8 +2205,8 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   >
                     <label
                       className="fui-Label fui-Field__label ___1r7nw7g_1a9hq9n fk6fouc f19n0e5 fkhj508 f1i3iumi fclwglc fywfov9 fyacil5"
-                      htmlFor="field-r42__control"
-                      id="field-r42__label"
+                      htmlFor="field-r45__control"
+                      id="field-r45__label"
                     >
                       State
                       <span
@@ -2210,7 +2222,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
                       <button
                         aria-describedby="root_employment_location_state__error root_employment_location_state__description root_employment_location_state__help"
                         aria-expanded={false}
-                        aria-labelledby="field-r42__label"
+                        aria-labelledby="field-r45__label"
                         aria-required={true}
                         autoFocus={false}
                         className="fui-Dropdown__button ___10ah4o2_6igl400 f122n59 f1c21dwh fre7gi1 f1358rze fqdk4by f1rvrf73 f1ewtqcl f19n0e5 f14mj54c f1k6fduh f13qh94s fk6fouc f12nh0o2 f1869bpl f1o700av fly5x3f ftqa4ok fkhj508 figsok6 f1i3iumi f1sbtcvk f11gcy0p fdghr9 f1e60jzv"
@@ -2947,8 +2959,8 @@ exports[`Complex grid renders person and address and employment in a complex gri
                         >
                           <label
                             className="fui-Label fui-Field__label ___1r7nw7g_1a9hq9n fk6fouc f19n0e5 fkhj508 f1i3iumi fclwglc fywfov9 fyacil5"
-                            htmlFor="field-r4m__control"
-                            id="field-r4m__label"
+                            htmlFor="field-r4p__control"
+                            id="field-r4p__label"
                           >
                             State
                             <span
@@ -2964,7 +2976,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
                             <button
                               aria-describedby="root_person_address_state__error root_person_address_state__description root_person_address_state__help"
                               aria-expanded={false}
-                              aria-labelledby="field-r4m__label"
+                              aria-labelledby="field-r4p__label"
                               aria-required={true}
                               autoFocus={false}
                               className="fui-Dropdown__button ___10ah4o2_6igl400 f122n59 f1c21dwh fre7gi1 f1358rze fqdk4by f1rvrf73 f1ewtqcl f19n0e5 f14mj54c f1k6fduh f13qh94s fk6fouc f12nh0o2 f1869bpl f1o700av fly5x3f ftqa4ok fkhj508 figsok6 f1i3iumi f1sbtcvk f11gcy0p fdghr9 f1e60jzv"
@@ -3092,93 +3104,99 @@ exports[`Complex grid renders person and address and employment in a complex gri
               }
             }
           >
-            <label
-              className="fui-Label ___1yevxz2_yljzsa0 fk6fouc f19n0e5 fkhj508 f1i3iumi"
-              htmlFor="root_employment"
-            >
-              Employment
-            </label>
-            <div
-              aria-describedby="root_employment__error root_employment__description root_employment__help"
-              className="fui-RadioGroup ___1o959zg_y6ivho0 f22iagw f6jr5hl"
-              id="root_employment"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="radiogroup"
-            >
-              <span
-                className="fui-Radio rm0dkue"
+            <div>
+              <div
+                className="fui-Field ___keyyzl0_1dbn5sh f13qh94s"
               >
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  checked={false}
-                  className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
-                  id="root_employment-0"
-                  name="root_employment"
-                  onChange={[Function]}
-                  type="radio"
-                  value="0"
-                />
-                <div
-                  aria-hidden={true}
-                  className="fui-Radio__indicator rwtekvw"
-                />
                 <label
-                  className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
-                  htmlFor="root_employment-0"
+                  className="fui-Label ___1yevxz2_yljzsa0 fk6fouc f19n0e5 fkhj508 f1i3iumi"
+                  htmlFor="root_employment"
                 >
-                  Company
+                  Employment
                 </label>
-              </span>
-              <span
-                className="fui-Radio rm0dkue"
-              >
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  checked={false}
-                  className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
-                  id="root_employment-1"
-                  name="root_employment"
-                  onChange={[Function]}
-                  type="radio"
-                  value="1"
-                />
                 <div
-                  aria-hidden={true}
-                  className="fui-Radio__indicator rwtekvw"
-                />
-                <label
-                  className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
-                  htmlFor="root_employment-1"
-                >
-                  Education
-                </label>
-              </span>
-              <span
-                className="fui-Radio rm0dkue"
-              >
-                <input
                   aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  checked={true}
-                  className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
-                  id="root_employment-2"
-                  name="root_employment"
+                  className="fui-RadioGroup ___1o959zg_y6ivho0 f22iagw f6jr5hl"
+                  id="root_employment"
+                  onBlur={[Function]}
                   onChange={[Function]}
-                  type="radio"
-                  value="2"
-                />
-                <div
-                  aria-hidden={true}
-                  className="fui-Radio__indicator rwtekvw"
-                />
-                <label
-                  className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
-                  htmlFor="root_employment-2"
+                  onFocus={[Function]}
+                  role="radiogroup"
                 >
-                  Other
-                </label>
-              </span>
+                  <span
+                    className="fui-Radio rm0dkue"
+                  >
+                    <input
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      checked={false}
+                      className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
+                      id="root_employment-0"
+                      name="root_employment"
+                      onChange={[Function]}
+                      type="radio"
+                      value="0"
+                    />
+                    <div
+                      aria-hidden={true}
+                      className="fui-Radio__indicator rwtekvw"
+                    />
+                    <label
+                      className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
+                      htmlFor="root_employment-0"
+                    >
+                      Company
+                    </label>
+                  </span>
+                  <span
+                    className="fui-Radio rm0dkue"
+                  >
+                    <input
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      checked={false}
+                      className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
+                      id="root_employment-1"
+                      name="root_employment"
+                      onChange={[Function]}
+                      type="radio"
+                      value="1"
+                    />
+                    <div
+                      aria-hidden={true}
+                      className="fui-Radio__indicator rwtekvw"
+                    />
+                    <label
+                      className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
+                      htmlFor="root_employment-1"
+                    >
+                      Education
+                    </label>
+                  </span>
+                  <span
+                    className="fui-Radio rm0dkue"
+                  >
+                    <input
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      checked={true}
+                      className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
+                      id="root_employment-2"
+                      name="root_employment"
+                      onChange={[Function]}
+                      type="radio"
+                      value="2"
+                    />
+                    <div
+                      aria-hidden={true}
+                      className="fui-Radio__indicator rwtekvw"
+                    />
+                    <label
+                      className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
+                      htmlFor="root_employment-2"
+                    >
+                      Other
+                    </label>
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -4042,93 +4060,99 @@ exports[`Complex grid renders person and address and employment in a complex gri
               }
             }
           >
-            <label
-              className="fui-Label ___1yevxz2_yljzsa0 fk6fouc f19n0e5 fkhj508 f1i3iumi"
-              htmlFor="root_employment"
-            >
-              Employment
-            </label>
-            <div
-              aria-describedby="root_employment__error root_employment__description root_employment__help"
-              className="fui-RadioGroup ___1o959zg_y6ivho0 f22iagw f6jr5hl"
-              id="root_employment"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              role="radiogroup"
-            >
-              <span
-                className="fui-Radio rm0dkue"
+            <div>
+              <div
+                className="fui-Field ___keyyzl0_1dbn5sh f13qh94s"
               >
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  checked={true}
-                  className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
-                  id="root_employment-0"
-                  name="root_employment"
-                  onChange={[Function]}
-                  type="radio"
-                  value="0"
-                />
-                <div
-                  aria-hidden={true}
-                  className="fui-Radio__indicator rwtekvw"
-                />
                 <label
-                  className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
-                  htmlFor="root_employment-0"
+                  className="fui-Label ___1yevxz2_yljzsa0 fk6fouc f19n0e5 fkhj508 f1i3iumi"
+                  htmlFor="root_employment"
                 >
-                  Company
+                  Employment
                 </label>
-              </span>
-              <span
-                className="fui-Radio rm0dkue"
-              >
-                <input
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  checked={false}
-                  className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
-                  id="root_employment-1"
-                  name="root_employment"
-                  onChange={[Function]}
-                  type="radio"
-                  value="1"
-                />
                 <div
-                  aria-hidden={true}
-                  className="fui-Radio__indicator rwtekvw"
-                />
-                <label
-                  className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
-                  htmlFor="root_employment-1"
-                >
-                  Education
-                </label>
-              </span>
-              <span
-                className="fui-Radio rm0dkue"
-              >
-                <input
                   aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  checked={false}
-                  className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
-                  id="root_employment-2"
-                  name="root_employment"
+                  className="fui-RadioGroup ___1o959zg_y6ivho0 f22iagw f6jr5hl"
+                  id="root_employment"
+                  onBlur={[Function]}
                   onChange={[Function]}
-                  type="radio"
-                  value="2"
-                />
-                <div
-                  aria-hidden={true}
-                  className="fui-Radio__indicator rwtekvw"
-                />
-                <label
-                  className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
-                  htmlFor="root_employment-2"
+                  onFocus={[Function]}
+                  role="radiogroup"
                 >
-                  Other
-                </label>
-              </span>
+                  <span
+                    className="fui-Radio rm0dkue"
+                  >
+                    <input
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      checked={true}
+                      className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
+                      id="root_employment-0"
+                      name="root_employment"
+                      onChange={[Function]}
+                      type="radio"
+                      value="0"
+                    />
+                    <div
+                      aria-hidden={true}
+                      className="fui-Radio__indicator rwtekvw"
+                    />
+                    <label
+                      className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
+                      htmlFor="root_employment-0"
+                    >
+                      Company
+                    </label>
+                  </span>
+                  <span
+                    className="fui-Radio rm0dkue"
+                  >
+                    <input
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      checked={false}
+                      className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
+                      id="root_employment-1"
+                      name="root_employment"
+                      onChange={[Function]}
+                      type="radio"
+                      value="1"
+                    />
+                    <div
+                      aria-hidden={true}
+                      className="fui-Radio__indicator rwtekvw"
+                    />
+                    <label
+                      className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
+                      htmlFor="root_employment-1"
+                    >
+                      Education
+                    </label>
+                  </span>
+                  <span
+                    className="fui-Radio rm0dkue"
+                  >
+                    <input
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      checked={false}
+                      className="fui-Radio__input rg1upok ___183j3wl_1dim0pv f9ma1gx"
+                      id="root_employment-2"
+                      name="root_employment"
+                      onChange={[Function]}
+                      type="radio"
+                      value="2"
+                    />
+                    <div
+                      aria-hidden={true}
+                      className="fui-Radio__indicator rwtekvw"
+                    />
+                    <label
+                      className="fui-Label fui-Radio__label ___1o91fp6_qunpvi0 fk6fouc f19n0e5 fkhj508 f1i3iumi f7nlbp4 f1kwiid1 f1vdfbxk f5b47ha fruq291 fjzwpt6 fh6j2fo"
+                      htmlFor="root_employment-2"
+                    >
+                      Other
+                    </label>
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
           <div
@@ -4271,8 +4295,8 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   >
                     <label
                       className="fui-Label fui-Field__label ___1r7nw7g_1a9hq9n fk6fouc f19n0e5 fkhj508 f1i3iumi fclwglc fywfov9 fyacil5"
-                      htmlFor="field-r23__control"
-                      id="field-r23__label"
+                      htmlFor="field-r24__control"
+                      id="field-r24__label"
                     >
                       State
                       <span
@@ -4288,7 +4312,7 @@ exports[`Complex grid renders person and address and employment in a complex gri
                       <button
                         aria-describedby="root_employment_location_state__error root_employment_location_state__description root_employment_location_state__help"
                         aria-expanded={false}
-                        aria-labelledby="field-r23__label"
+                        aria-labelledby="field-r24__label"
                         aria-required={true}
                         autoFocus={false}
                         className="fui-Dropdown__button ___10ah4o2_6igl400 f122n59 f1c21dwh fre7gi1 f1358rze fqdk4by f1rvrf73 f1ewtqcl f19n0e5 f14mj54c f1k6fduh f13qh94s fk6fouc f12nh0o2 f1869bpl f1o700av fly5x3f ftqa4ok fkhj508 figsok6 f1i3iumi f1sbtcvk f11gcy0p fdghr9 f1e60jzv"
diff --git a/packages/mui/package.json b/packages/mui/package.json
index 982a8944dd..460daccefb 100644
--- a/packages/mui/package.json
+++ b/packages/mui/package.json
@@ -8,29 +8,29 @@
   "description": "Material UI 5 theme, fields and widgets for react-jsonschema-form",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     },
     "./dist": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./dist/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     }
   },
   "files": [
diff --git a/packages/mui/test/__snapshots__/GridSnap.test.tsx.snap b/packages/mui/test/__snapshots__/GridSnap.test.tsx.snap
index f8bab2b3c1..875ce0488e 100644
--- a/packages/mui/test/__snapshots__/GridSnap.test.tsx.snap
+++ b/packages/mui/test/__snapshots__/GridSnap.test.tsx.snap
@@ -869,7 +869,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   --Grid-parent-rowSpacing: 16px;
 }
 
-.emotion-131 {
+.emotion-132 {
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
@@ -880,7 +880,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   flex-wrap: wrap;
 }
 
-.emotion-133 {
+.emotion-134 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -912,46 +912,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   color: rgba(0, 0, 0, 0.6);
 }
 
-.emotion-133::-moz-focus-inner {
+.emotion-134::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-133.Mui-disabled {
+.emotion-134.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-133 {
+  .emotion-134 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-133.Mui-disabled {
+.emotion-134.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-133:hover {
+.emotion-134:hover {
   background-color: rgba(25, 118, 210, 0.04);
 }
 
-.emotion-133.Mui-checked {
+.emotion-134.Mui-checked {
   color: #1976d2;
 }
 
 @media (hover: none) {
-  .emotion-133:hover {
+  .emotion-134:hover {
     background-color: transparent;
   }
 }
 
-.emotion-135 {
+.emotion-136 {
   position: relative;
   display: flex;
 }
 
-.emotion-136 {
+.emotion-137 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -972,7 +972,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   transform: scale(1);
 }
 
-.emotion-137 {
+.emotion-138 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -995,7 +995,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   transform: scale(1);
 }
 
-.emotion-144 {
+.emotion-145 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1018,11 +1018,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   transform: scale(0);
 }
 
-.emotion-190 {
+.emotion-191 {
   margin-top: 24px;
 }
 
-.emotion-191 {
+.emotion-192 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1069,57 +1069,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   --variant-containedBg: #1976d2;
 }
 
-.emotion-191::-moz-focus-inner {
+.emotion-192::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-191.Mui-disabled {
+.emotion-192.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-191 {
+  .emotion-192 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-191:hover {
+.emotion-192:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-191.Mui-disabled {
+.emotion-192.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-191:hover {
+.emotion-192:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-191:hover {
+  .emotion-192:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-191:active {
+.emotion-192:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-191.Mui-focusVisible {
+.emotion-192.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-191.Mui-disabled {
+.emotion-192.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-191:hover {
+  .emotion-192:hover {
     --variant-containedBg: #1565c0;
     --variant-textBg: rgba(25, 118, 210, 0.04);
     --variant-outlinedBorder: #1976d2;
@@ -1127,7 +1127,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   }
 }
 
-.emotion-191.MuiButton-loading {
+.emotion-192.MuiButton-loading {
   color: transparent;
 }
 
@@ -2153,206 +2153,212 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
                 className="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 emotion-3"
                 data-testid="1"
               >
-                <div
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  className="MuiFormGroup-root MuiFormGroup-row MuiRadioGroup-root MuiRadioGroup-row emotion-131"
-                  id="root_employment"
-                  onBlur={[Function]}
-                  onFocus={[Function]}
-                  role="radiogroup"
-                >
-                  <label
-                    className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
+                <div>
+                  <div
+                    className="MuiFormControl-root MuiFormControl-fullWidth emotion-0"
                   >
-                    <span
-                      className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary emotion-133"
+                    <div
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      className="MuiFormGroup-root MuiFormGroup-row MuiRadioGroup-root MuiRadioGroup-row emotion-132"
+                      id="root_employment"
                       onBlur={[Function]}
-                      onContextMenu={[Function]}
-                      onDragLeave={[Function]}
                       onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={null}
+                      role="radiogroup"
                     >
-                      <input
-                        checked={true}
-                        className="PrivateSwitchBase-input emotion-52"
-                        disabled={false}
-                        id="root_employment-0"
-                        name="root_employment"
-                        onChange={[Function]}
-                        required={false}
-                        type="radio"
-                        value="0"
-                      />
-                      <span
-                        className="emotion-135"
+                      <label
+                        className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
                       >
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-136"
-                          data-testid="RadioButtonUncheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        <span
+                          className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary emotion-134"
+                          onBlur={[Function]}
+                          onContextMenu={[Function]}
+                          onDragLeave={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseLeave={[Function]}
+                          onMouseUp={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
+                          tabIndex={null}
                         >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          <input
+                            checked={true}
+                            className="PrivateSwitchBase-input emotion-52"
+                            disabled={false}
+                            id="root_employment-0"
+                            name="root_employment"
+                            onChange={[Function]}
+                            required={false}
+                            type="radio"
+                            value="0"
                           />
-                        </svg>
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
-                          data-testid="RadioButtonCheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                          <span
+                            className="emotion-136"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
+                              data-testid="RadioButtonUncheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                              />
+                            </svg>
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-138"
+                              data-testid="RadioButtonCheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
+                          style={{}}
                         >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
-                      style={{}}
-                    >
-                      Company
-                    </span>
-                  </label>
-                  <label
-                    className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
-                  >
-                    <span
-                      className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-133"
-                      onBlur={[Function]}
-                      onContextMenu={[Function]}
-                      onDragLeave={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={null}
-                    >
-                      <input
-                        checked={false}
-                        className="PrivateSwitchBase-input emotion-52"
-                        disabled={false}
-                        id="root_employment-1"
-                        name="root_employment"
-                        onChange={[Function]}
-                        required={false}
-                        type="radio"
-                        value="1"
-                      />
-                      <span
-                        className="emotion-135"
+                          Company
+                        </span>
+                      </label>
+                      <label
+                        className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
                       >
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-136"
-                          data-testid="RadioButtonUncheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        <span
+                          className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-134"
+                          onBlur={[Function]}
+                          onContextMenu={[Function]}
+                          onDragLeave={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseLeave={[Function]}
+                          onMouseUp={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
+                          tabIndex={null}
                         >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          <input
+                            checked={false}
+                            className="PrivateSwitchBase-input emotion-52"
+                            disabled={false}
+                            id="root_employment-1"
+                            name="root_employment"
+                            onChange={[Function]}
+                            required={false}
+                            type="radio"
+                            value="1"
                           />
-                        </svg>
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-144"
-                          data-testid="RadioButtonCheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                          <span
+                            className="emotion-136"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
+                              data-testid="RadioButtonUncheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                              />
+                            </svg>
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-145"
+                              data-testid="RadioButtonCheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
+                          style={{}}
                         >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
-                      style={{}}
-                    >
-                      Education
-                    </span>
-                  </label>
-                  <label
-                    className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
-                  >
-                    <span
-                      className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-133"
-                      onBlur={[Function]}
-                      onContextMenu={[Function]}
-                      onDragLeave={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={null}
-                    >
-                      <input
-                        checked={false}
-                        className="PrivateSwitchBase-input emotion-52"
-                        disabled={false}
-                        id="root_employment-2"
-                        name="root_employment"
-                        onChange={[Function]}
-                        required={false}
-                        type="radio"
-                        value="2"
-                      />
-                      <span
-                        className="emotion-135"
+                          Education
+                        </span>
+                      </label>
+                      <label
+                        className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
                       >
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-136"
-                          data-testid="RadioButtonUncheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        <span
+                          className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-134"
+                          onBlur={[Function]}
+                          onContextMenu={[Function]}
+                          onDragLeave={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseLeave={[Function]}
+                          onMouseUp={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
+                          tabIndex={null}
                         >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          <input
+                            checked={false}
+                            className="PrivateSwitchBase-input emotion-52"
+                            disabled={false}
+                            id="root_employment-2"
+                            name="root_employment"
+                            onChange={[Function]}
+                            required={false}
+                            type="radio"
+                            value="2"
                           />
-                        </svg>
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-144"
-                          data-testid="RadioButtonCheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                          <span
+                            className="emotion-136"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
+                              data-testid="RadioButtonUncheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                              />
+                            </svg>
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-145"
+                              data-testid="RadioButtonCheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
+                          style={{}}
                         >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
-                      style={{}}
-                    >
-                      Other
-                    </span>
-                  </label>
+                          Other
+                        </span>
+                      </label>
+                    </div>
+                  </div>
                 </div>
               </div>
               <div
@@ -2655,10 +2661,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
     </div>
   </div>
   <div
-    className="MuiBox-root emotion-190"
+    className="MuiBox-root emotion-191"
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-191"
+      className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-192"
       disabled={null}
       id=":r1l:"
       onBlur={[Function]}
@@ -3551,7 +3557,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   --Grid-parent-rowSpacing: 16px;
 }
 
-.emotion-131 {
+.emotion-132 {
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
@@ -3562,7 +3568,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   flex-wrap: wrap;
 }
 
-.emotion-133 {
+.emotion-134 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -3594,46 +3600,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   color: rgba(0, 0, 0, 0.6);
 }
 
-.emotion-133::-moz-focus-inner {
+.emotion-134::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-133.Mui-disabled {
+.emotion-134.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-133 {
+  .emotion-134 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-133.Mui-disabled {
+.emotion-134.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-133:hover {
+.emotion-134:hover {
   background-color: rgba(25, 118, 210, 0.04);
 }
 
-.emotion-133.Mui-checked {
+.emotion-134.Mui-checked {
   color: #1976d2;
 }
 
 @media (hover: none) {
-  .emotion-133:hover {
+  .emotion-134:hover {
     background-color: transparent;
   }
 }
 
-.emotion-135 {
+.emotion-136 {
   position: relative;
   display: flex;
 }
 
-.emotion-136 {
+.emotion-137 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3654,7 +3660,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   transform: scale(1);
 }
 
-.emotion-137 {
+.emotion-138 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3677,7 +3683,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   transform: scale(0);
 }
 
-.emotion-144 {
+.emotion-145 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3700,11 +3706,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   transform: scale(1);
 }
 
-.emotion-198 {
+.emotion-199 {
   margin-top: 24px;
 }
 
-.emotion-199 {
+.emotion-200 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -3751,57 +3757,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   --variant-containedBg: #1976d2;
 }
 
-.emotion-199::-moz-focus-inner {
+.emotion-200::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-199.Mui-disabled {
+.emotion-200.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-199 {
+  .emotion-200 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-199:hover {
+.emotion-200:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-199.Mui-disabled {
+.emotion-200.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-199:hover {
+.emotion-200:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-199:hover {
+  .emotion-200:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-199:active {
+.emotion-200:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-199.Mui-focusVisible {
+.emotion-200.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-199.Mui-disabled {
+.emotion-200.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-199:hover {
+  .emotion-200:hover {
     --variant-containedBg: #1565c0;
     --variant-textBg: rgba(25, 118, 210, 0.04);
     --variant-outlinedBorder: #1976d2;
@@ -3809,7 +3815,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   }
 }
 
-.emotion-199.MuiButton-loading {
+.emotion-200.MuiButton-loading {
   color: transparent;
 }
 
@@ -4835,206 +4841,212 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
                 className="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 emotion-3"
                 data-testid="1"
               >
-                <div
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  className="MuiFormGroup-root MuiFormGroup-row MuiRadioGroup-root MuiRadioGroup-row emotion-131"
-                  id="root_employment"
-                  onBlur={[Function]}
-                  onFocus={[Function]}
-                  role="radiogroup"
-                >
-                  <label
-                    className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
+                <div>
+                  <div
+                    className="MuiFormControl-root MuiFormControl-fullWidth emotion-0"
                   >
-                    <span
-                      className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-133"
+                    <div
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      className="MuiFormGroup-root MuiFormGroup-row MuiRadioGroup-root MuiRadioGroup-row emotion-132"
+                      id="root_employment"
                       onBlur={[Function]}
-                      onContextMenu={[Function]}
-                      onDragLeave={[Function]}
                       onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={null}
+                      role="radiogroup"
                     >
-                      <input
-                        checked={false}
-                        className="PrivateSwitchBase-input emotion-52"
-                        disabled={false}
-                        id="root_employment-0"
-                        name="root_employment"
-                        onChange={[Function]}
-                        required={false}
-                        type="radio"
-                        value="0"
-                      />
-                      <span
-                        className="emotion-135"
+                      <label
+                        className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
                       >
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-136"
-                          data-testid="RadioButtonUncheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                          />
-                        </svg>
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
-                          data-testid="RadioButtonCheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        <span
+                          className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-134"
+                          onBlur={[Function]}
+                          onContextMenu={[Function]}
+                          onDragLeave={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseLeave={[Function]}
+                          onMouseUp={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
+                          tabIndex={null}
                         >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          <input
+                            checked={false}
+                            className="PrivateSwitchBase-input emotion-52"
+                            disabled={false}
+                            id="root_employment-0"
+                            name="root_employment"
+                            onChange={[Function]}
+                            required={false}
+                            type="radio"
+                            value="0"
                           />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
-                      style={{}}
-                    >
-                      Company
-                    </span>
-                  </label>
-                  <label
-                    className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
-                  >
-                    <span
-                      className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary emotion-133"
-                      onBlur={[Function]}
-                      onContextMenu={[Function]}
-                      onDragLeave={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={null}
-                    >
-                      <input
-                        checked={true}
-                        className="PrivateSwitchBase-input emotion-52"
-                        disabled={false}
-                        id="root_employment-1"
-                        name="root_employment"
-                        onChange={[Function]}
-                        required={false}
-                        type="radio"
-                        value="1"
-                      />
-                      <span
-                        className="emotion-135"
+                          <span
+                            className="emotion-136"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
+                              data-testid="RadioButtonUncheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                              />
+                            </svg>
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-138"
+                              data-testid="RadioButtonCheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
+                          style={{}}
+                        >
+                          Company
+                        </span>
+                      </label>
+                      <label
+                        className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
                       >
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-136"
-                          data-testid="RadioButtonUncheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        <span
+                          className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary emotion-134"
+                          onBlur={[Function]}
+                          onContextMenu={[Function]}
+                          onDragLeave={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseLeave={[Function]}
+                          onMouseUp={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
+                          tabIndex={null}
                         >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          <input
+                            checked={true}
+                            className="PrivateSwitchBase-input emotion-52"
+                            disabled={false}
+                            id="root_employment-1"
+                            name="root_employment"
+                            onChange={[Function]}
+                            required={false}
+                            type="radio"
+                            value="1"
                           />
-                        </svg>
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-144"
-                          data-testid="RadioButtonCheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                          <span
+                            className="emotion-136"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
+                              data-testid="RadioButtonUncheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                              />
+                            </svg>
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-145"
+                              data-testid="RadioButtonCheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
+                          style={{}}
                         >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
-                      style={{}}
-                    >
-                      Education
-                    </span>
-                  </label>
-                  <label
-                    className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
-                  >
-                    <span
-                      className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-133"
-                      onBlur={[Function]}
-                      onContextMenu={[Function]}
-                      onDragLeave={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={null}
-                    >
-                      <input
-                        checked={false}
-                        className="PrivateSwitchBase-input emotion-52"
-                        disabled={false}
-                        id="root_employment-2"
-                        name="root_employment"
-                        onChange={[Function]}
-                        required={false}
-                        type="radio"
-                        value="2"
-                      />
-                      <span
-                        className="emotion-135"
+                          Education
+                        </span>
+                      </label>
+                      <label
+                        className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
                       >
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-136"
-                          data-testid="RadioButtonUncheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        <span
+                          className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-134"
+                          onBlur={[Function]}
+                          onContextMenu={[Function]}
+                          onDragLeave={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseLeave={[Function]}
+                          onMouseUp={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
+                          tabIndex={null}
                         >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          <input
+                            checked={false}
+                            className="PrivateSwitchBase-input emotion-52"
+                            disabled={false}
+                            id="root_employment-2"
+                            name="root_employment"
+                            onChange={[Function]}
+                            required={false}
+                            type="radio"
+                            value="2"
                           />
-                        </svg>
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
-                          data-testid="RadioButtonCheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                          <span
+                            className="emotion-136"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
+                              data-testid="RadioButtonUncheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                              />
+                            </svg>
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-138"
+                              data-testid="RadioButtonCheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
+                          style={{}}
                         >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
-                      style={{}}
-                    >
-                      Other
-                    </span>
-                  </label>
+                          Other
+                        </span>
+                      </label>
+                    </div>
+                  </div>
                 </div>
               </div>
               <div
@@ -5396,10 +5408,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
     </div>
   </div>
   <div
-    className="MuiBox-root emotion-198"
+    className="MuiBox-root emotion-199"
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-199"
+      className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-200"
       disabled={null}
       id=":r27:"
       onBlur={[Function]}
@@ -6292,7 +6304,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   --Grid-parent-rowSpacing: 16px;
 }
 
-.emotion-131 {
+.emotion-132 {
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
@@ -6303,7 +6315,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   flex-wrap: wrap;
 }
 
-.emotion-133 {
+.emotion-134 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -6335,46 +6347,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   color: rgba(0, 0, 0, 0.6);
 }
 
-.emotion-133::-moz-focus-inner {
+.emotion-134::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-133.Mui-disabled {
+.emotion-134.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-133 {
+  .emotion-134 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-133.Mui-disabled {
+.emotion-134.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-133:hover {
+.emotion-134:hover {
   background-color: rgba(25, 118, 210, 0.04);
 }
 
-.emotion-133.Mui-checked {
+.emotion-134.Mui-checked {
   color: #1976d2;
 }
 
 @media (hover: none) {
-  .emotion-133:hover {
+  .emotion-134:hover {
     background-color: transparent;
   }
 }
 
-.emotion-135 {
+.emotion-136 {
   position: relative;
   display: flex;
 }
 
-.emotion-136 {
+.emotion-137 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -6395,7 +6407,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   transform: scale(1);
 }
 
-.emotion-137 {
+.emotion-138 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -6418,7 +6430,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   transform: scale(0);
 }
 
-.emotion-151 {
+.emotion-152 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -6441,7 +6453,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   transform: scale(1);
 }
 
-.emotion-158 {
+.emotion-159 {
   font-family: "Roboto","Helvetica","Arial",sans-serif;
   font-weight: 400;
   font-size: 1rem;
@@ -6460,38 +6472,38 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   border-radius: 4px;
 }
 
-.emotion-158.Mui-disabled {
+.emotion-159.Mui-disabled {
   color: rgba(0, 0, 0, 0.38);
   cursor: default;
 }
 
-.emotion-158:hover .MuiOutlinedInput-notchedOutline {
+.emotion-159:hover .MuiOutlinedInput-notchedOutline {
   border-color: rgba(0, 0, 0, 0.87);
 }
 
 @media (hover: none) {
-  .emotion-158:hover .MuiOutlinedInput-notchedOutline {
+  .emotion-159:hover .MuiOutlinedInput-notchedOutline {
     border-color: rgba(0, 0, 0, 0.23);
   }
 }
 
-.emotion-158.Mui-focused .MuiOutlinedInput-notchedOutline {
+.emotion-159.Mui-focused .MuiOutlinedInput-notchedOutline {
   border-width: 2px;
 }
 
-.emotion-158.Mui-focused .MuiOutlinedInput-notchedOutline {
+.emotion-159.Mui-focused .MuiOutlinedInput-notchedOutline {
   border-color: #1976d2;
 }
 
-.emotion-158.Mui-error .MuiOutlinedInput-notchedOutline {
+.emotion-159.Mui-error .MuiOutlinedInput-notchedOutline {
   border-color: #d32f2f;
 }
 
-.emotion-158.Mui-disabled .MuiOutlinedInput-notchedOutline {
+.emotion-159.Mui-disabled .MuiOutlinedInput-notchedOutline {
   border-color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-159 {
+.emotion-160 {
   font: inherit;
   letter-spacing: inherit;
   color: currentColor;
@@ -6513,84 +6525,84 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   padding-top: 0;
 }
 
-.emotion-159::-webkit-input-placeholder {
+.emotion-160::-webkit-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-159::-moz-placeholder {
+.emotion-160::-moz-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-159::-ms-input-placeholder {
+.emotion-160::-ms-input-placeholder {
   color: currentColor;
   opacity: 0.42;
   -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.emotion-159:focus {
+.emotion-160:focus {
   outline: 0;
 }
 
-.emotion-159:invalid {
+.emotion-160:invalid {
   box-shadow: none;
 }
 
-.emotion-159::-webkit-search-decoration {
+.emotion-160::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-159::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-160::-webkit-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-159::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-160::-moz-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-159::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-160::-ms-input-placeholder {
   opacity: 0!important;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-159:focus::-webkit-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-160:focus::-webkit-input-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-159:focus::-moz-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-160:focus::-moz-placeholder {
   opacity: 0.42;
 }
 
-label[data-shrink=false]+.MuiInputBase-formControl .emotion-159:focus::-ms-input-placeholder {
+label[data-shrink=false]+.MuiInputBase-formControl .emotion-160:focus::-ms-input-placeholder {
   opacity: 0.42;
 }
 
-.emotion-159.Mui-disabled {
+.emotion-160.Mui-disabled {
   opacity: 1;
   -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
 }
 
-.emotion-159:-webkit-autofill {
+.emotion-160:-webkit-autofill {
   -webkit-animation-duration: 5000s;
   animation-duration: 5000s;
   -webkit-animation-name: mui-auto-fill;
   animation-name: mui-auto-fill;
 }
 
-.emotion-159:-webkit-autofill {
+.emotion-160:-webkit-autofill {
   border-radius: inherit;
 }
 
-.emotion-163 {
+.emotion-164 {
   margin-top: 24px;
 }
 
-.emotion-164 {
+.emotion-165 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -6637,57 +6649,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-159:focus::-ms-input
   --variant-containedBg: #1976d2;
 }
 
-.emotion-164::-moz-focus-inner {
+.emotion-165::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-164.Mui-disabled {
+.emotion-165.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-164 {
+  .emotion-165 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-164:hover {
+.emotion-165:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-164.Mui-disabled {
+.emotion-165.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-164:hover {
+.emotion-165:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-164:hover {
+  .emotion-165:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-164:active {
+.emotion-165:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-164.Mui-focusVisible {
+.emotion-165.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-164.Mui-disabled {
+.emotion-165.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-164:hover {
+  .emotion-165:hover {
     --variant-containedBg: #1565c0;
     --variant-textBg: rgba(25, 118, 210, 0.04);
     --variant-outlinedBorder: #1976d2;
@@ -6695,7 +6707,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-159:focus::-ms-input
   }
 }
 
-.emotion-164.MuiButton-loading {
+.emotion-165.MuiButton-loading {
   color: transparent;
 }
 
@@ -7721,206 +7733,212 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-159:focus::-ms-input
                 className="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 emotion-3"
                 data-testid="1"
               >
-                <div
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  className="MuiFormGroup-root MuiFormGroup-row MuiRadioGroup-root MuiRadioGroup-row emotion-131"
-                  id="root_employment"
-                  onBlur={[Function]}
-                  onFocus={[Function]}
-                  role="radiogroup"
-                >
-                  <label
-                    className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
+                <div>
+                  <div
+                    className="MuiFormControl-root MuiFormControl-fullWidth emotion-0"
                   >
-                    <span
-                      className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-133"
+                    <div
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      className="MuiFormGroup-root MuiFormGroup-row MuiRadioGroup-root MuiRadioGroup-row emotion-132"
+                      id="root_employment"
                       onBlur={[Function]}
-                      onContextMenu={[Function]}
-                      onDragLeave={[Function]}
                       onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={null}
+                      role="radiogroup"
                     >
-                      <input
-                        checked={false}
-                        className="PrivateSwitchBase-input emotion-52"
-                        disabled={false}
-                        id="root_employment-0"
-                        name="root_employment"
-                        onChange={[Function]}
-                        required={false}
-                        type="radio"
-                        value="0"
-                      />
-                      <span
-                        className="emotion-135"
+                      <label
+                        className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
                       >
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-136"
-                          data-testid="RadioButtonUncheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        <span
+                          className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-134"
+                          onBlur={[Function]}
+                          onContextMenu={[Function]}
+                          onDragLeave={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseLeave={[Function]}
+                          onMouseUp={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
+                          tabIndex={null}
                         >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          <input
+                            checked={false}
+                            className="PrivateSwitchBase-input emotion-52"
+                            disabled={false}
+                            id="root_employment-0"
+                            name="root_employment"
+                            onChange={[Function]}
+                            required={false}
+                            type="radio"
+                            value="0"
                           />
-                        </svg>
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
-                          data-testid="RadioButtonCheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                          <span
+                            className="emotion-136"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
+                              data-testid="RadioButtonUncheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                              />
+                            </svg>
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-138"
+                              data-testid="RadioButtonCheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
+                          style={{}}
                         >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
-                      style={{}}
-                    >
-                      Company
-                    </span>
-                  </label>
-                  <label
-                    className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
-                  >
-                    <span
-                      className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-133"
-                      onBlur={[Function]}
-                      onContextMenu={[Function]}
-                      onDragLeave={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={null}
-                    >
-                      <input
-                        checked={false}
-                        className="PrivateSwitchBase-input emotion-52"
-                        disabled={false}
-                        id="root_employment-1"
-                        name="root_employment"
-                        onChange={[Function]}
-                        required={false}
-                        type="radio"
-                        value="1"
-                      />
-                      <span
-                        className="emotion-135"
+                          Company
+                        </span>
+                      </label>
+                      <label
+                        className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
                       >
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-136"
-                          data-testid="RadioButtonUncheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        <span
+                          className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-134"
+                          onBlur={[Function]}
+                          onContextMenu={[Function]}
+                          onDragLeave={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseLeave={[Function]}
+                          onMouseUp={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
+                          tabIndex={null}
                         >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          <input
+                            checked={false}
+                            className="PrivateSwitchBase-input emotion-52"
+                            disabled={false}
+                            id="root_employment-1"
+                            name="root_employment"
+                            onChange={[Function]}
+                            required={false}
+                            type="radio"
+                            value="1"
                           />
-                        </svg>
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
-                          data-testid="RadioButtonCheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                          <span
+                            className="emotion-136"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
+                              data-testid="RadioButtonUncheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                              />
+                            </svg>
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-138"
+                              data-testid="RadioButtonCheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
+                          style={{}}
                         >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
-                      style={{}}
-                    >
-                      Education
-                    </span>
-                  </label>
-                  <label
-                    className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
-                  >
-                    <span
-                      className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary emotion-133"
-                      onBlur={[Function]}
-                      onContextMenu={[Function]}
-                      onDragLeave={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={null}
-                    >
-                      <input
-                        checked={true}
-                        className="PrivateSwitchBase-input emotion-52"
-                        disabled={false}
-                        id="root_employment-2"
-                        name="root_employment"
-                        onChange={[Function]}
-                        required={false}
-                        type="radio"
-                        value="2"
-                      />
-                      <span
-                        className="emotion-135"
+                          Education
+                        </span>
+                      </label>
+                      <label
+                        className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
                       >
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-136"
-                          data-testid="RadioButtonUncheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        <span
+                          className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary emotion-134"
+                          onBlur={[Function]}
+                          onContextMenu={[Function]}
+                          onDragLeave={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseLeave={[Function]}
+                          onMouseUp={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
+                          tabIndex={null}
                         >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          <input
+                            checked={true}
+                            className="PrivateSwitchBase-input emotion-52"
+                            disabled={false}
+                            id="root_employment-2"
+                            name="root_employment"
+                            onChange={[Function]}
+                            required={false}
+                            type="radio"
+                            value="2"
                           />
-                        </svg>
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-151"
-                          data-testid="RadioButtonCheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                          <span
+                            className="emotion-136"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
+                              data-testid="RadioButtonUncheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                              />
+                            </svg>
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-152"
+                              data-testid="RadioButtonCheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
+                          style={{}}
                         >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
-                      style={{}}
-                    >
-                      Other
-                    </span>
-                  </label>
+                          Other
+                        </span>
+                      </label>
+                    </div>
+                  </div>
                 </div>
               </div>
               <div
@@ -7953,13 +7971,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-159:focus::-ms-input
                         </span>
                       </label>
                       <div
-                        className="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-multiline emotion-158"
+                        className="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-multiline emotion-159"
                         onClick={[Function]}
                       >
                         <textarea
                           aria-invalid={false}
                           autoFocus={false}
-                          className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline emotion-159"
+                          className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline emotion-160"
                           disabled={false}
                           id="root_employment_description"
                           name="root_employment_description"
@@ -7974,7 +7992,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-159:focus::-ms-input
                         />
                         <textarea
                           aria-hidden={true}
-                          className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline emotion-159"
+                          className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline emotion-160"
                           readOnly={true}
                           style={
                             {
@@ -8017,10 +8035,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-159:focus::-ms-input
     </div>
   </div>
   <div
-    className="MuiBox-root emotion-163"
+    className="MuiBox-root emotion-164"
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-164"
+      className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-165"
       disabled={null}
       id=":r2k:"
       onBlur={[Function]}
@@ -8913,7 +8931,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   --Grid-parent-rowSpacing: 16px;
 }
 
-.emotion-131 {
+.emotion-132 {
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
@@ -8924,7 +8942,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   flex-wrap: wrap;
 }
 
-.emotion-133 {
+.emotion-134 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -8956,46 +8974,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   color: rgba(0, 0, 0, 0.6);
 }
 
-.emotion-133::-moz-focus-inner {
+.emotion-134::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-133.Mui-disabled {
+.emotion-134.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-133 {
+  .emotion-134 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-133.Mui-disabled {
+.emotion-134.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-133:hover {
+.emotion-134:hover {
   background-color: rgba(25, 118, 210, 0.04);
 }
 
-.emotion-133.Mui-checked {
+.emotion-134.Mui-checked {
   color: #1976d2;
 }
 
 @media (hover: none) {
-  .emotion-133:hover {
+  .emotion-134:hover {
     background-color: transparent;
   }
 }
 
-.emotion-135 {
+.emotion-136 {
   position: relative;
   display: flex;
 }
 
-.emotion-136 {
+.emotion-137 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -9016,7 +9034,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   transform: scale(1);
 }
 
-.emotion-137 {
+.emotion-138 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -9039,7 +9057,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   transform: scale(1);
 }
 
-.emotion-144 {
+.emotion-145 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -9062,11 +9080,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   transform: scale(0);
 }
 
-.emotion-190 {
+.emotion-191 {
   margin-top: 24px;
 }
 
-.emotion-191 {
+.emotion-192 {
   display: inline-flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -9113,57 +9131,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   --variant-containedBg: #1976d2;
 }
 
-.emotion-191::-moz-focus-inner {
+.emotion-192::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-191.Mui-disabled {
+.emotion-192.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-191 {
+  .emotion-192 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-191:hover {
+.emotion-192:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-191.Mui-disabled {
+.emotion-192.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.emotion-191:hover {
+.emotion-192:hover {
   box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
 }
 
 @media (hover: none) {
-  .emotion-191:hover {
+  .emotion-192:hover {
     box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
   }
 }
 
-.emotion-191:active {
+.emotion-192:active {
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.emotion-191.Mui-focusVisible {
+.emotion-192.Mui-focusVisible {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-191.Mui-disabled {
+.emotion-192.Mui-disabled {
   color: rgba(0, 0, 0, 0.26);
   box-shadow: none;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 @media (hover: hover) {
-  .emotion-191:hover {
+  .emotion-192:hover {
     --variant-containedBg: #1565c0;
     --variant-textBg: rgba(25, 118, 210, 0.04);
     --variant-outlinedBorder: #1976d2;
@@ -9171,7 +9189,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
   }
 }
 
-.emotion-191.MuiButton-loading {
+.emotion-192.MuiButton-loading {
   color: transparent;
 }
 
@@ -10197,206 +10215,212 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
                 className="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 emotion-3"
                 data-testid="1"
               >
-                <div
-                  aria-describedby="root_employment__error root_employment__description root_employment__help"
-                  className="MuiFormGroup-root MuiFormGroup-row MuiRadioGroup-root MuiRadioGroup-row emotion-131"
-                  id="root_employment"
-                  onBlur={[Function]}
-                  onFocus={[Function]}
-                  role="radiogroup"
-                >
-                  <label
-                    className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
+                <div>
+                  <div
+                    className="MuiFormControl-root MuiFormControl-fullWidth emotion-0"
                   >
-                    <span
-                      className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary emotion-133"
+                    <div
+                      aria-describedby="root_employment__error root_employment__description root_employment__help"
+                      className="MuiFormGroup-root MuiFormGroup-row MuiRadioGroup-root MuiRadioGroup-row emotion-132"
+                      id="root_employment"
                       onBlur={[Function]}
-                      onContextMenu={[Function]}
-                      onDragLeave={[Function]}
                       onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={null}
+                      role="radiogroup"
                     >
-                      <input
-                        checked={true}
-                        className="PrivateSwitchBase-input emotion-52"
-                        disabled={false}
-                        id="root_employment-0"
-                        name="root_employment"
-                        onChange={[Function]}
-                        required={false}
-                        type="radio"
-                        value="0"
-                      />
-                      <span
-                        className="emotion-135"
+                      <label
+                        className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
                       >
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-136"
-                          data-testid="RadioButtonUncheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        <span
+                          className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary emotion-134"
+                          onBlur={[Function]}
+                          onContextMenu={[Function]}
+                          onDragLeave={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseLeave={[Function]}
+                          onMouseUp={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
+                          tabIndex={null}
                         >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          <input
+                            checked={true}
+                            className="PrivateSwitchBase-input emotion-52"
+                            disabled={false}
+                            id="root_employment-0"
+                            name="root_employment"
+                            onChange={[Function]}
+                            required={false}
+                            type="radio"
+                            value="0"
                           />
-                        </svg>
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
-                          data-testid="RadioButtonCheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                          <span
+                            className="emotion-136"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
+                              data-testid="RadioButtonUncheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                              />
+                            </svg>
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-138"
+                              data-testid="RadioButtonCheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
+                          style={{}}
                         >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
-                      style={{}}
-                    >
-                      Company
-                    </span>
-                  </label>
-                  <label
-                    className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
-                  >
-                    <span
-                      className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-133"
-                      onBlur={[Function]}
-                      onContextMenu={[Function]}
-                      onDragLeave={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={null}
-                    >
-                      <input
-                        checked={false}
-                        className="PrivateSwitchBase-input emotion-52"
-                        disabled={false}
-                        id="root_employment-1"
-                        name="root_employment"
-                        onChange={[Function]}
-                        required={false}
-                        type="radio"
-                        value="1"
-                      />
-                      <span
-                        className="emotion-135"
+                          Company
+                        </span>
+                      </label>
+                      <label
+                        className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
                       >
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-136"
-                          data-testid="RadioButtonUncheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        <span
+                          className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-134"
+                          onBlur={[Function]}
+                          onContextMenu={[Function]}
+                          onDragLeave={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseLeave={[Function]}
+                          onMouseUp={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
+                          tabIndex={null}
                         >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          <input
+                            checked={false}
+                            className="PrivateSwitchBase-input emotion-52"
+                            disabled={false}
+                            id="root_employment-1"
+                            name="root_employment"
+                            onChange={[Function]}
+                            required={false}
+                            type="radio"
+                            value="1"
                           />
-                        </svg>
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-144"
-                          data-testid="RadioButtonCheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                          <span
+                            className="emotion-136"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
+                              data-testid="RadioButtonUncheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                              />
+                            </svg>
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-145"
+                              data-testid="RadioButtonCheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
+                          style={{}}
                         >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
-                      style={{}}
-                    >
-                      Education
-                    </span>
-                  </label>
-                  <label
-                    className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
-                  >
-                    <span
-                      className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-133"
-                      onBlur={[Function]}
-                      onContextMenu={[Function]}
-                      onDragLeave={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseLeave={[Function]}
-                      onMouseUp={[Function]}
-                      onTouchEnd={[Function]}
-                      onTouchMove={[Function]}
-                      onTouchStart={[Function]}
-                      tabIndex={null}
-                    >
-                      <input
-                        checked={false}
-                        className="PrivateSwitchBase-input emotion-52"
-                        disabled={false}
-                        id="root_employment-2"
-                        name="root_employment"
-                        onChange={[Function]}
-                        required={false}
-                        type="radio"
-                        value="2"
-                      />
-                      <span
-                        className="emotion-135"
+                          Education
+                        </span>
+                      </label>
+                      <label
+                        className="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd emotion-50"
                       >
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-136"
-                          data-testid="RadioButtonUncheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                        <span
+                          className="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary MuiRadio-root MuiRadio-colorPrimary emotion-134"
+                          onBlur={[Function]}
+                          onContextMenu={[Function]}
+                          onDragLeave={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseLeave={[Function]}
+                          onMouseUp={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
+                          tabIndex={null}
                         >
-                          <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          <input
+                            checked={false}
+                            className="PrivateSwitchBase-input emotion-52"
+                            disabled={false}
+                            id="root_employment-2"
+                            name="root_employment"
+                            onChange={[Function]}
+                            required={false}
+                            type="radio"
+                            value="2"
                           />
-                        </svg>
-                        <svg
-                          aria-hidden={true}
-                          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-144"
-                          data-testid="RadioButtonCheckedIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                          <span
+                            className="emotion-136"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-137"
+                              data-testid="RadioButtonUncheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                              />
+                            </svg>
+                            <svg
+                              aria-hidden={true}
+                              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-145"
+                              data-testid="RadioButtonCheckedIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
+                          style={{}}
                         >
-                          <path
-                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      className="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label emotion-54"
-                      style={{}}
-                    >
-                      Other
-                    </span>
-                  </label>
+                          Other
+                        </span>
+                      </label>
+                    </div>
+                  </div>
                 </div>
               </div>
               <div
@@ -10699,10 +10723,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-114:focus::-ms-input
     </div>
   </div>
   <div
-    className="MuiBox-root emotion-190"
+    className="MuiBox-root emotion-191"
   >
     <button
-      className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-191"
+      className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary emotion-192"
       disabled={null}
       id=":r14:"
       onBlur={[Function]}
diff --git a/packages/playground/src/samples/layoutGrid.tsx b/packages/playground/src/samples/layoutGrid.tsx
index 59fa138382..654aadccc5 100644
--- a/packages/playground/src/samples/layoutGrid.tsx
+++ b/packages/playground/src/samples/layoutGrid.tsx
@@ -36,7 +36,7 @@ const layoutGrid: Sample = {
             type: 'string',
           },
           middle: {
-            title: 'Middle',
+            title: 'Middle Name',
             minLength: 1,
             maxLength: 200,
             type: 'string',
@@ -352,7 +352,6 @@ const layoutGrid: Sample = {
                                   {
                                     'ui:col': {
                                       xs: 24,
-                                      style: { margin: '44px 0 30px' },
                                       children: ['employment'],
                                     },
                                   },
@@ -1220,7 +1219,7 @@ const layoutGrid: Sample = {
                                   {
                                     'ui:col': {
                                       xs: 12,
-                                      style: { margin: '38px 0 6px' },
+                                      style: { margin: '6px 0 6px' },
                                       children: ['employment'],
                                     },
                                   },
@@ -1993,7 +1992,7 @@ const layoutGrid: Sample = {
                     {
                       'ui:col': {
                         className: 'col-xs-6',
-                        style: { margin: '26px 0' },
+                        style: { margin: '0 0 26px 0' },
                         children: ['employment'],
                       },
                     },
diff --git a/packages/react-bootstrap/package.json b/packages/react-bootstrap/package.json
index dc6634a937..9ef94c9f05 100644
--- a/packages/react-bootstrap/package.json
+++ b/packages/react-bootstrap/package.json
@@ -8,29 +8,29 @@
   "description": "React Bootstrap theme, fields and widgets for react-jsonschema-form, powered by react-bootstrap",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     },
     "./dist": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./dist/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     }
   },
   "files": [
diff --git a/packages/react-bootstrap/test/__snapshots__/GridSnap.test.tsx.snap b/packages/react-bootstrap/test/__snapshots__/GridSnap.test.tsx.snap
index 4f7217fb6b..4925eb3ce5 100644
--- a/packages/react-bootstrap/test/__snapshots__/GridSnap.test.tsx.snap
+++ b/packages/react-bootstrap/test/__snapshots__/GridSnap.test.tsx.snap
@@ -953,83 +953,93 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   }
                 }
               >
-                <div
-                  className="mb-0"
-                >
-                  <div
-                    className="form-check form-check-inline"
-                  >
-                    <input
-                      aria-describedby="root_employment__error root_employment__description root_employment__help"
-                      checked={true}
-                      className="form-check-input"
-                      disabled={false}
-                      id="root_employment-0"
-                      name="root_employment"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      required={false}
-                      type="radio"
-                      value="0"
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor="root_employment-0"
-                      title=""
-                    >
-                      Company
-                    </label>
-                  </div>
-                  <div
-                    className="form-check form-check-inline"
-                  >
-                    <input
-                      aria-describedby="root_employment__error root_employment__description root_employment__help"
-                      checked={false}
-                      className="form-check-input"
-                      disabled={false}
-                      id="root_employment-1"
-                      name="root_employment"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      required={false}
-                      type="radio"
-                      value="1"
-                    />
+                <div>
+                  <div>
                     <label
-                      className="form-check-label"
-                      htmlFor="root_employment-1"
-                      title=""
+                      className="form-label"
+                      htmlFor="root_employment"
                     >
-                      Education
+                      Employment
                     </label>
-                  </div>
-                  <div
-                    className="form-check form-check-inline"
-                  >
-                    <input
-                      aria-describedby="root_employment__error root_employment__description root_employment__help"
-                      checked={false}
-                      className="form-check-input"
-                      disabled={false}
-                      id="root_employment-2"
-                      name="root_employment"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      required={false}
-                      type="radio"
-                      value="2"
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor="root_employment-2"
-                      title=""
+                    <div
+                      className="mb-0"
                     >
-                      Other
-                    </label>
+                      <div
+                        className="form-check form-check-inline"
+                      >
+                        <input
+                          aria-describedby="root_employment__error root_employment__description root_employment__help"
+                          checked={true}
+                          className="form-check-input"
+                          disabled={false}
+                          id="root_employment-0"
+                          name="root_employment"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          type="radio"
+                          value="0"
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor="root_employment-0"
+                          title=""
+                        >
+                          Company
+                        </label>
+                      </div>
+                      <div
+                        className="form-check form-check-inline"
+                      >
+                        <input
+                          aria-describedby="root_employment__error root_employment__description root_employment__help"
+                          checked={false}
+                          className="form-check-input"
+                          disabled={false}
+                          id="root_employment-1"
+                          name="root_employment"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          type="radio"
+                          value="1"
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor="root_employment-1"
+                          title=""
+                        >
+                          Education
+                        </label>
+                      </div>
+                      <div
+                        className="form-check form-check-inline"
+                      >
+                        <input
+                          aria-describedby="root_employment__error root_employment__description root_employment__help"
+                          checked={false}
+                          className="form-check-input"
+                          disabled={false}
+                          id="root_employment-2"
+                          name="root_employment"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          type="radio"
+                          value="2"
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor="root_employment-2"
+                          title=""
+                        >
+                          Other
+                        </label>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -2532,83 +2542,93 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   }
                 }
               >
-                <div
-                  className="mb-0"
-                >
-                  <div
-                    className="form-check form-check-inline"
-                  >
-                    <input
-                      aria-describedby="root_employment__error root_employment__description root_employment__help"
-                      checked={false}
-                      className="form-check-input"
-                      disabled={false}
-                      id="root_employment-0"
-                      name="root_employment"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      required={false}
-                      type="radio"
-                      value="0"
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor="root_employment-0"
-                      title=""
-                    >
-                      Company
-                    </label>
-                  </div>
-                  <div
-                    className="form-check form-check-inline"
-                  >
-                    <input
-                      aria-describedby="root_employment__error root_employment__description root_employment__help"
-                      checked={true}
-                      className="form-check-input"
-                      disabled={false}
-                      id="root_employment-1"
-                      name="root_employment"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      required={false}
-                      type="radio"
-                      value="1"
-                    />
+                <div>
+                  <div>
                     <label
-                      className="form-check-label"
-                      htmlFor="root_employment-1"
-                      title=""
+                      className="form-label"
+                      htmlFor="root_employment"
                     >
-                      Education
+                      Employment
                     </label>
-                  </div>
-                  <div
-                    className="form-check form-check-inline"
-                  >
-                    <input
-                      aria-describedby="root_employment__error root_employment__description root_employment__help"
-                      checked={false}
-                      className="form-check-input"
-                      disabled={false}
-                      id="root_employment-2"
-                      name="root_employment"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      required={false}
-                      type="radio"
-                      value="2"
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor="root_employment-2"
-                      title=""
+                    <div
+                      className="mb-0"
                     >
-                      Other
-                    </label>
+                      <div
+                        className="form-check form-check-inline"
+                      >
+                        <input
+                          aria-describedby="root_employment__error root_employment__description root_employment__help"
+                          checked={false}
+                          className="form-check-input"
+                          disabled={false}
+                          id="root_employment-0"
+                          name="root_employment"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          type="radio"
+                          value="0"
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor="root_employment-0"
+                          title=""
+                        >
+                          Company
+                        </label>
+                      </div>
+                      <div
+                        className="form-check form-check-inline"
+                      >
+                        <input
+                          aria-describedby="root_employment__error root_employment__description root_employment__help"
+                          checked={true}
+                          className="form-check-input"
+                          disabled={false}
+                          id="root_employment-1"
+                          name="root_employment"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          type="radio"
+                          value="1"
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor="root_employment-1"
+                          title=""
+                        >
+                          Education
+                        </label>
+                      </div>
+                      <div
+                        className="form-check form-check-inline"
+                      >
+                        <input
+                          aria-describedby="root_employment__error root_employment__description root_employment__help"
+                          checked={false}
+                          className="form-check-input"
+                          disabled={false}
+                          id="root_employment-2"
+                          name="root_employment"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          type="radio"
+                          value="2"
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor="root_employment-2"
+                          title=""
+                        >
+                          Other
+                        </label>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -4144,83 +4164,93 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   }
                 }
               >
-                <div
-                  className="mb-0"
-                >
-                  <div
-                    className="form-check form-check-inline"
-                  >
-                    <input
-                      aria-describedby="root_employment__error root_employment__description root_employment__help"
-                      checked={false}
-                      className="form-check-input"
-                      disabled={false}
-                      id="root_employment-0"
-                      name="root_employment"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      required={false}
-                      type="radio"
-                      value="0"
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor="root_employment-0"
-                      title=""
-                    >
-                      Company
-                    </label>
-                  </div>
-                  <div
-                    className="form-check form-check-inline"
-                  >
-                    <input
-                      aria-describedby="root_employment__error root_employment__description root_employment__help"
-                      checked={false}
-                      className="form-check-input"
-                      disabled={false}
-                      id="root_employment-1"
-                      name="root_employment"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      required={false}
-                      type="radio"
-                      value="1"
-                    />
+                <div>
+                  <div>
                     <label
-                      className="form-check-label"
-                      htmlFor="root_employment-1"
-                      title=""
+                      className="form-label"
+                      htmlFor="root_employment"
                     >
-                      Education
+                      Employment
                     </label>
-                  </div>
-                  <div
-                    className="form-check form-check-inline"
-                  >
-                    <input
-                      aria-describedby="root_employment__error root_employment__description root_employment__help"
-                      checked={true}
-                      className="form-check-input"
-                      disabled={false}
-                      id="root_employment-2"
-                      name="root_employment"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      required={false}
-                      type="radio"
-                      value="2"
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor="root_employment-2"
-                      title=""
+                    <div
+                      className="mb-0"
                     >
-                      Other
-                    </label>
+                      <div
+                        className="form-check form-check-inline"
+                      >
+                        <input
+                          aria-describedby="root_employment__error root_employment__description root_employment__help"
+                          checked={false}
+                          className="form-check-input"
+                          disabled={false}
+                          id="root_employment-0"
+                          name="root_employment"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          type="radio"
+                          value="0"
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor="root_employment-0"
+                          title=""
+                        >
+                          Company
+                        </label>
+                      </div>
+                      <div
+                        className="form-check form-check-inline"
+                      >
+                        <input
+                          aria-describedby="root_employment__error root_employment__description root_employment__help"
+                          checked={false}
+                          className="form-check-input"
+                          disabled={false}
+                          id="root_employment-1"
+                          name="root_employment"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          type="radio"
+                          value="1"
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor="root_employment-1"
+                          title=""
+                        >
+                          Education
+                        </label>
+                      </div>
+                      <div
+                        className="form-check form-check-inline"
+                      >
+                        <input
+                          aria-describedby="root_employment__error root_employment__description root_employment__help"
+                          checked={true}
+                          className="form-check-input"
+                          disabled={false}
+                          id="root_employment-2"
+                          name="root_employment"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          type="radio"
+                          value="2"
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor="root_employment-2"
+                          title=""
+                        >
+                          Other
+                        </label>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -5232,83 +5262,93 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   }
                 }
               >
-                <div
-                  className="mb-0"
-                >
-                  <div
-                    className="form-check form-check-inline"
-                  >
-                    <input
-                      aria-describedby="root_employment__error root_employment__description root_employment__help"
-                      checked={true}
-                      className="form-check-input"
-                      disabled={false}
-                      id="root_employment-0"
-                      name="root_employment"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      required={false}
-                      type="radio"
-                      value="0"
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor="root_employment-0"
-                      title=""
-                    >
-                      Company
-                    </label>
-                  </div>
-                  <div
-                    className="form-check form-check-inline"
-                  >
-                    <input
-                      aria-describedby="root_employment__error root_employment__description root_employment__help"
-                      checked={false}
-                      className="form-check-input"
-                      disabled={false}
-                      id="root_employment-1"
-                      name="root_employment"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      required={false}
-                      type="radio"
-                      value="1"
-                    />
+                <div>
+                  <div>
                     <label
-                      className="form-check-label"
-                      htmlFor="root_employment-1"
-                      title=""
+                      className="form-label"
+                      htmlFor="root_employment"
                     >
-                      Education
+                      Employment
                     </label>
-                  </div>
-                  <div
-                    className="form-check form-check-inline"
-                  >
-                    <input
-                      aria-describedby="root_employment__error root_employment__description root_employment__help"
-                      checked={false}
-                      className="form-check-input"
-                      disabled={false}
-                      id="root_employment-2"
-                      name="root_employment"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      required={false}
-                      type="radio"
-                      value="2"
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor="root_employment-2"
-                      title=""
+                    <div
+                      className="mb-0"
                     >
-                      Other
-                    </label>
+                      <div
+                        className="form-check form-check-inline"
+                      >
+                        <input
+                          aria-describedby="root_employment__error root_employment__description root_employment__help"
+                          checked={true}
+                          className="form-check-input"
+                          disabled={false}
+                          id="root_employment-0"
+                          name="root_employment"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          type="radio"
+                          value="0"
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor="root_employment-0"
+                          title=""
+                        >
+                          Company
+                        </label>
+                      </div>
+                      <div
+                        className="form-check form-check-inline"
+                      >
+                        <input
+                          aria-describedby="root_employment__error root_employment__description root_employment__help"
+                          checked={false}
+                          className="form-check-input"
+                          disabled={false}
+                          id="root_employment-1"
+                          name="root_employment"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          type="radio"
+                          value="1"
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor="root_employment-1"
+                          title=""
+                        >
+                          Education
+                        </label>
+                      </div>
+                      <div
+                        className="form-check form-check-inline"
+                      >
+                        <input
+                          aria-describedby="root_employment__error root_employment__description root_employment__help"
+                          checked={false}
+                          className="form-check-input"
+                          disabled={false}
+                          id="root_employment-2"
+                          name="root_employment"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={false}
+                          type="radio"
+                          value="2"
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor="root_employment-2"
+                          title=""
+                        >
+                          Other
+                        </label>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/packages/semantic-ui/package.json b/packages/semantic-ui/package.json
index 73a31fc2d5..72e70824d7 100644
--- a/packages/semantic-ui/package.json
+++ b/packages/semantic-ui/package.json
@@ -8,29 +8,29 @@
   "description": "Semantic UI theme, fields and widgets for react-jsonschema-form",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     },
     "./dist": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./dist/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     }
   },
   "files": [
diff --git a/packages/semantic-ui/test/__snapshots__/GridSnap.test.tsx.snap b/packages/semantic-ui/test/__snapshots__/GridSnap.test.tsx.snap
index c1daea96a9..5a122b082d 100644
--- a/packages/semantic-ui/test/__snapshots__/GridSnap.test.tsx.snap
+++ b/packages/semantic-ui/test/__snapshots__/GridSnap.test.tsx.snap
@@ -1836,106 +1836,112 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   }
                 }
               >
-                <div
-                  className="inline fields"
-                >
+                <div>
                   <div
-                    className="field"
+                    className="grouped equal width fields"
                   >
                     <div
-                      className="ui checked radio checkbox"
-                      fluid={true}
-                      inverted={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
+                      className="inline fields"
                     >
-                      <input
-                        aria-describedby="root_employment__error root_employment__description root_employment__help"
-                        checked={true}
-                        className="hidden"
-                        id="root_employment-0"
-                        name="root_employment"
-                        readOnly={true}
-                        required={false}
-                        tabIndex={0}
-                        type="radio"
-                        value="0"
-                      />
-                      <label
-                        htmlFor="root_employment-0"
+                      <div
+                        className="field"
                       >
-                        Company
-                      </label>
-                    </div>
-                  </div>
-                  <div
-                    className="field"
-                  >
-                    <div
-                      className="ui radio checkbox"
-                      fluid={true}
-                      inverted={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                    >
-                      <input
-                        aria-describedby="root_employment__error root_employment__description root_employment__help"
-                        checked={false}
-                        className="hidden"
-                        id="root_employment-1"
-                        name="root_employment"
-                        readOnly={true}
-                        required={false}
-                        tabIndex={0}
-                        type="radio"
-                        value="1"
-                      />
-                      <label
-                        htmlFor="root_employment-1"
+                        <div
+                          className="ui checked radio checkbox"
+                          fluid={true}
+                          inverted={false}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                        >
+                          <input
+                            aria-describedby="root_employment__error root_employment__description root_employment__help"
+                            checked={true}
+                            className="hidden"
+                            id="root_employment-0"
+                            name="root_employment"
+                            readOnly={true}
+                            required={false}
+                            tabIndex={0}
+                            type="radio"
+                            value="0"
+                          />
+                          <label
+                            htmlFor="root_employment-0"
+                          >
+                            Company
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        className="field"
                       >
-                        Education
-                      </label>
-                    </div>
-                  </div>
-                  <div
-                    className="field"
-                  >
-                    <div
-                      className="ui radio checkbox"
-                      fluid={true}
-                      inverted={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                    >
-                      <input
-                        aria-describedby="root_employment__error root_employment__description root_employment__help"
-                        checked={false}
-                        className="hidden"
-                        id="root_employment-2"
-                        name="root_employment"
-                        readOnly={true}
-                        required={false}
-                        tabIndex={0}
-                        type="radio"
-                        value="2"
-                      />
-                      <label
-                        htmlFor="root_employment-2"
+                        <div
+                          className="ui radio checkbox"
+                          fluid={true}
+                          inverted={false}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                        >
+                          <input
+                            aria-describedby="root_employment__error root_employment__description root_employment__help"
+                            checked={false}
+                            className="hidden"
+                            id="root_employment-1"
+                            name="root_employment"
+                            readOnly={true}
+                            required={false}
+                            tabIndex={0}
+                            type="radio"
+                            value="1"
+                          />
+                          <label
+                            htmlFor="root_employment-1"
+                          >
+                            Education
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        className="field"
                       >
-                        Other
-                      </label>
+                        <div
+                          className="ui radio checkbox"
+                          fluid={true}
+                          inverted={false}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                        >
+                          <input
+                            aria-describedby="root_employment__error root_employment__description root_employment__help"
+                            checked={false}
+                            className="hidden"
+                            id="root_employment-2"
+                            name="root_employment"
+                            readOnly={true}
+                            required={false}
+                            tabIndex={0}
+                            type="radio"
+                            value="2"
+                          />
+                          <label
+                            htmlFor="root_employment-2"
+                          >
+                            Other
+                          </label>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -5075,106 +5081,112 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   }
                 }
               >
-                <div
-                  className="inline fields"
-                >
+                <div>
                   <div
-                    className="field"
+                    className="grouped equal width fields"
                   >
                     <div
-                      className="ui radio checkbox"
-                      fluid={true}
-                      inverted={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
+                      className="inline fields"
                     >
-                      <input
-                        aria-describedby="root_employment__error root_employment__description root_employment__help"
-                        checked={false}
-                        className="hidden"
-                        id="root_employment-0"
-                        name="root_employment"
-                        readOnly={true}
-                        required={false}
-                        tabIndex={0}
-                        type="radio"
-                        value="0"
-                      />
-                      <label
-                        htmlFor="root_employment-0"
+                      <div
+                        className="field"
                       >
-                        Company
-                      </label>
-                    </div>
-                  </div>
-                  <div
-                    className="field"
-                  >
-                    <div
-                      className="ui checked radio checkbox"
-                      fluid={true}
-                      inverted={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                    >
-                      <input
-                        aria-describedby="root_employment__error root_employment__description root_employment__help"
-                        checked={true}
-                        className="hidden"
-                        id="root_employment-1"
-                        name="root_employment"
-                        readOnly={true}
-                        required={false}
-                        tabIndex={0}
-                        type="radio"
-                        value="1"
-                      />
-                      <label
-                        htmlFor="root_employment-1"
+                        <div
+                          className="ui radio checkbox"
+                          fluid={true}
+                          inverted={false}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                        >
+                          <input
+                            aria-describedby="root_employment__error root_employment__description root_employment__help"
+                            checked={false}
+                            className="hidden"
+                            id="root_employment-0"
+                            name="root_employment"
+                            readOnly={true}
+                            required={false}
+                            tabIndex={0}
+                            type="radio"
+                            value="0"
+                          />
+                          <label
+                            htmlFor="root_employment-0"
+                          >
+                            Company
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        className="field"
                       >
-                        Education
-                      </label>
-                    </div>
-                  </div>
-                  <div
-                    className="field"
-                  >
-                    <div
-                      className="ui radio checkbox"
-                      fluid={true}
-                      inverted={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                    >
-                      <input
-                        aria-describedby="root_employment__error root_employment__description root_employment__help"
-                        checked={false}
-                        className="hidden"
-                        id="root_employment-2"
-                        name="root_employment"
-                        readOnly={true}
-                        required={false}
-                        tabIndex={0}
-                        type="radio"
-                        value="2"
-                      />
-                      <label
-                        htmlFor="root_employment-2"
+                        <div
+                          className="ui checked radio checkbox"
+                          fluid={true}
+                          inverted={false}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                        >
+                          <input
+                            aria-describedby="root_employment__error root_employment__description root_employment__help"
+                            checked={true}
+                            className="hidden"
+                            id="root_employment-1"
+                            name="root_employment"
+                            readOnly={true}
+                            required={false}
+                            tabIndex={0}
+                            type="radio"
+                            value="1"
+                          />
+                          <label
+                            htmlFor="root_employment-1"
+                          >
+                            Education
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        className="field"
                       >
-                        Other
-                      </label>
+                        <div
+                          className="ui radio checkbox"
+                          fluid={true}
+                          inverted={false}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                        >
+                          <input
+                            aria-describedby="root_employment__error root_employment__description root_employment__help"
+                            checked={false}
+                            className="hidden"
+                            id="root_employment-2"
+                            name="root_employment"
+                            readOnly={true}
+                            required={false}
+                            tabIndex={0}
+                            type="radio"
+                            value="2"
+                          />
+                          <label
+                            htmlFor="root_employment-2"
+                          >
+                            Other
+                          </label>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -8360,106 +8372,112 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   }
                 }
               >
-                <div
-                  className="inline fields"
-                >
+                <div>
                   <div
-                    className="field"
+                    className="grouped equal width fields"
                   >
                     <div
-                      className="ui radio checkbox"
-                      fluid={true}
-                      inverted={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
+                      className="inline fields"
                     >
-                      <input
-                        aria-describedby="root_employment__error root_employment__description root_employment__help"
-                        checked={false}
-                        className="hidden"
-                        id="root_employment-0"
-                        name="root_employment"
-                        readOnly={true}
-                        required={false}
-                        tabIndex={0}
-                        type="radio"
-                        value="0"
-                      />
-                      <label
-                        htmlFor="root_employment-0"
+                      <div
+                        className="field"
                       >
-                        Company
-                      </label>
-                    </div>
-                  </div>
-                  <div
-                    className="field"
-                  >
-                    <div
-                      className="ui radio checkbox"
-                      fluid={true}
-                      inverted={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                    >
-                      <input
-                        aria-describedby="root_employment__error root_employment__description root_employment__help"
-                        checked={false}
-                        className="hidden"
-                        id="root_employment-1"
-                        name="root_employment"
-                        readOnly={true}
-                        required={false}
-                        tabIndex={0}
-                        type="radio"
-                        value="1"
-                      />
-                      <label
-                        htmlFor="root_employment-1"
+                        <div
+                          className="ui radio checkbox"
+                          fluid={true}
+                          inverted={false}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                        >
+                          <input
+                            aria-describedby="root_employment__error root_employment__description root_employment__help"
+                            checked={false}
+                            className="hidden"
+                            id="root_employment-0"
+                            name="root_employment"
+                            readOnly={true}
+                            required={false}
+                            tabIndex={0}
+                            type="radio"
+                            value="0"
+                          />
+                          <label
+                            htmlFor="root_employment-0"
+                          >
+                            Company
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        className="field"
                       >
-                        Education
-                      </label>
-                    </div>
-                  </div>
-                  <div
-                    className="field"
-                  >
-                    <div
-                      className="ui checked radio checkbox"
-                      fluid={true}
-                      inverted={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                    >
-                      <input
-                        aria-describedby="root_employment__error root_employment__description root_employment__help"
-                        checked={true}
-                        className="hidden"
-                        id="root_employment-2"
-                        name="root_employment"
-                        readOnly={true}
-                        required={false}
-                        tabIndex={0}
-                        type="radio"
-                        value="2"
-                      />
-                      <label
-                        htmlFor="root_employment-2"
+                        <div
+                          className="ui radio checkbox"
+                          fluid={true}
+                          inverted={false}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                        >
+                          <input
+                            aria-describedby="root_employment__error root_employment__description root_employment__help"
+                            checked={false}
+                            className="hidden"
+                            id="root_employment-1"
+                            name="root_employment"
+                            readOnly={true}
+                            required={false}
+                            tabIndex={0}
+                            type="radio"
+                            value="1"
+                          />
+                          <label
+                            htmlFor="root_employment-1"
+                          >
+                            Education
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        className="field"
                       >
-                        Other
-                      </label>
+                        <div
+                          className="ui checked radio checkbox"
+                          fluid={true}
+                          inverted={false}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                        >
+                          <input
+                            aria-describedby="root_employment__error root_employment__description root_employment__help"
+                            checked={true}
+                            className="hidden"
+                            id="root_employment-2"
+                            name="root_employment"
+                            readOnly={true}
+                            required={false}
+                            tabIndex={0}
+                            type="radio"
+                            value="2"
+                          />
+                          <label
+                            htmlFor="root_employment-2"
+                          >
+                            Other
+                          </label>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -10360,106 +10378,112 @@ exports[`Complex grid renders person and address and employment in a complex gri
                   }
                 }
               >
-                <div
-                  className="inline fields"
-                >
+                <div>
                   <div
-                    className="field"
+                    className="grouped equal width fields"
                   >
                     <div
-                      className="ui checked radio checkbox"
-                      fluid={true}
-                      inverted={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
+                      className="inline fields"
                     >
-                      <input
-                        aria-describedby="root_employment__error root_employment__description root_employment__help"
-                        checked={true}
-                        className="hidden"
-                        id="root_employment-0"
-                        name="root_employment"
-                        readOnly={true}
-                        required={false}
-                        tabIndex={0}
-                        type="radio"
-                        value="0"
-                      />
-                      <label
-                        htmlFor="root_employment-0"
+                      <div
+                        className="field"
                       >
-                        Company
-                      </label>
-                    </div>
-                  </div>
-                  <div
-                    className="field"
-                  >
-                    <div
-                      className="ui radio checkbox"
-                      fluid={true}
-                      inverted={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                    >
-                      <input
-                        aria-describedby="root_employment__error root_employment__description root_employment__help"
-                        checked={false}
-                        className="hidden"
-                        id="root_employment-1"
-                        name="root_employment"
-                        readOnly={true}
-                        required={false}
-                        tabIndex={0}
-                        type="radio"
-                        value="1"
-                      />
-                      <label
-                        htmlFor="root_employment-1"
+                        <div
+                          className="ui checked radio checkbox"
+                          fluid={true}
+                          inverted={false}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                        >
+                          <input
+                            aria-describedby="root_employment__error root_employment__description root_employment__help"
+                            checked={true}
+                            className="hidden"
+                            id="root_employment-0"
+                            name="root_employment"
+                            readOnly={true}
+                            required={false}
+                            tabIndex={0}
+                            type="radio"
+                            value="0"
+                          />
+                          <label
+                            htmlFor="root_employment-0"
+                          >
+                            Company
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        className="field"
                       >
-                        Education
-                      </label>
-                    </div>
-                  </div>
-                  <div
-                    className="field"
-                  >
-                    <div
-                      className="ui radio checkbox"
-                      fluid={true}
-                      inverted={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                    >
-                      <input
-                        aria-describedby="root_employment__error root_employment__description root_employment__help"
-                        checked={false}
-                        className="hidden"
-                        id="root_employment-2"
-                        name="root_employment"
-                        readOnly={true}
-                        required={false}
-                        tabIndex={0}
-                        type="radio"
-                        value="2"
-                      />
-                      <label
-                        htmlFor="root_employment-2"
+                        <div
+                          className="ui radio checkbox"
+                          fluid={true}
+                          inverted={false}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                        >
+                          <input
+                            aria-describedby="root_employment__error root_employment__description root_employment__help"
+                            checked={false}
+                            className="hidden"
+                            id="root_employment-1"
+                            name="root_employment"
+                            readOnly={true}
+                            required={false}
+                            tabIndex={0}
+                            type="radio"
+                            value="1"
+                          />
+                          <label
+                            htmlFor="root_employment-1"
+                          >
+                            Education
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        className="field"
                       >
-                        Other
-                      </label>
+                        <div
+                          className="ui radio checkbox"
+                          fluid={true}
+                          inverted={false}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseDown={[Function]}
+                          onMouseUp={[Function]}
+                        >
+                          <input
+                            aria-describedby="root_employment__error root_employment__description root_employment__help"
+                            checked={false}
+                            className="hidden"
+                            id="root_employment-2"
+                            name="root_employment"
+                            readOnly={true}
+                            required={false}
+                            tabIndex={0}
+                            type="radio"
+                            value="2"
+                          />
+                          <label
+                            htmlFor="root_employment-2"
+                          >
+                            Other
+                          </label>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/packages/shadcn/package.json b/packages/shadcn/package.json
index 7660b8f932..cc7b3d747c 100644
--- a/packages/shadcn/package.json
+++ b/packages/shadcn/package.json
@@ -8,29 +8,29 @@
   "description": "shadcn theme, fields and widgets for react-jsonschema-form",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     },
     "./dist": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./dist/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     }
   },
   "files": [
diff --git a/packages/shadcn/test/__snapshots__/GridSnap.test.tsx.snap b/packages/shadcn/test/__snapshots__/GridSnap.test.tsx.snap
index 0734e813f0..6aab9a9646 100644
--- a/packages/shadcn/test/__snapshots__/GridSnap.test.tsx.snap
+++ b/packages/shadcn/test/__snapshots__/GridSnap.test.tsx.snap
@@ -764,182 +764,194 @@ exports[`Complex grid renders person and address and employment in a complex gri
             className="gap-2 col-span-6 row-span-1 flex items-center"
             data-testid="1"
           >
-            <div
-              className="mb-0"
-            >
+            <div>
               <div
-                aria-describedby="root_employment__error root_employment__description root_employment__help"
-                aria-orientation="horizontal"
-                aria-required={false}
-                className="gap-2 flex flex-wrap"
-                data-orientation="horizontal"
-                dir="ltr"
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                role="radiogroup"
-                style={
-                  {
-                    "outline": "none",
-                  }
-                }
-                tabIndex={0}
+                className="flex flex-col gap-2"
               >
-                <div
-                  className="flex items-center gap-2"
-                >
-                  <button
-                    aria-checked={true}
-                    className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                    data-orientation="horizontal"
-                    data-radix-collection-item=""
-                    data-state="checked"
-                    disabled={false}
-                    id="root_employment-0"
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    role="radio"
-                    tabIndex={-1}
-                    type="button"
-                    value="0"
-                  >
-                    <span
-                      className="flex items-center justify-center"
-                      data-state="checked"
-                    >
-                      <svg
-                        className="h-3.5 w-3.5 fill-primary"
-                        fill="none"
-                        height="15"
-                        viewBox="0 0 15 15"
-                        width="15"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clipRule="evenodd"
-                          d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
-                          fill="currentColor"
-                          fillRule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <input
-                    aria-hidden={true}
-                    defaultChecked={true}
-                    disabled={false}
-                    required={false}
-                    style={
-                      {
-                        "margin": 0,
-                        "opacity": 0,
-                        "pointerEvents": "none",
-                        "position": "absolute",
-                        "transform": "translateX(-100%)",
-                      }
-                    }
-                    tabIndex={-1}
-                    type="radio"
-                    value="0"
-                  />
-                  <label
-                    className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
-                    onMouseDown={[Function]}
-                  >
-                    Company
-                  </label>
-                </div>
-                <div
-                  className="flex items-center gap-2"
+                <label
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  htmlFor="root_employment"
                 >
-                  <button
-                    aria-checked={false}
-                    className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                    data-orientation="horizontal"
-                    data-radix-collection-item=""
-                    data-state="unchecked"
-                    disabled={false}
-                    id="root_employment-1"
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    role="radio"
-                    tabIndex={-1}
-                    type="button"
-                    value="1"
-                  />
-                  <input
-                    aria-hidden={true}
-                    defaultChecked={false}
-                    disabled={false}
-                    required={false}
-                    style={
-                      {
-                        "margin": 0,
-                        "opacity": 0,
-                        "pointerEvents": "none",
-                        "position": "absolute",
-                        "transform": "translateX(-100%)",
-                      }
-                    }
-                    tabIndex={-1}
-                    type="radio"
-                    value="1"
-                  />
-                  <label
-                    className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
-                    onMouseDown={[Function]}
-                  >
-                    Education
-                  </label>
-                </div>
+                  Employment
+                </label>
                 <div
-                  className="flex items-center gap-2"
+                  className="mb-0"
                 >
-                  <button
-                    aria-checked={false}
-                    className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                  <div
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    aria-orientation="horizontal"
+                    aria-required={false}
+                    className="gap-2 flex flex-wrap"
                     data-orientation="horizontal"
-                    data-radix-collection-item=""
-                    data-state="unchecked"
-                    disabled={false}
-                    id="root_employment-2"
-                    onClick={[Function]}
+                    dir="ltr"
+                    onBlur={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseDown={[Function]}
-                    role="radio"
-                    tabIndex={-1}
-                    type="button"
-                    value="2"
-                  />
-                  <input
-                    aria-hidden={true}
-                    defaultChecked={false}
-                    disabled={false}
-                    required={false}
+                    role="radiogroup"
                     style={
                       {
-                        "margin": 0,
-                        "opacity": 0,
-                        "pointerEvents": "none",
-                        "position": "absolute",
-                        "transform": "translateX(-100%)",
+                        "outline": "none",
                       }
                     }
-                    tabIndex={-1}
-                    type="radio"
-                    value="2"
-                  />
-                  <label
-                    className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
-                    onMouseDown={[Function]}
+                    tabIndex={0}
                   >
-                    Other
-                  </label>
+                    <div
+                      className="flex items-center gap-2"
+                    >
+                      <button
+                        aria-checked={true}
+                        className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                        data-orientation="horizontal"
+                        data-radix-collection-item=""
+                        data-state="checked"
+                        disabled={false}
+                        id="root_employment-0"
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                        type="button"
+                        value="0"
+                      >
+                        <span
+                          className="flex items-center justify-center"
+                          data-state="checked"
+                        >
+                          <svg
+                            className="h-3.5 w-3.5 fill-primary"
+                            fill="none"
+                            height="15"
+                            viewBox="0 0 15 15"
+                            width="15"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              clipRule="evenodd"
+                              d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+                              fill="currentColor"
+                              fillRule="evenodd"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <input
+                        aria-hidden={true}
+                        defaultChecked={true}
+                        disabled={false}
+                        required={false}
+                        style={
+                          {
+                            "margin": 0,
+                            "opacity": 0,
+                            "pointerEvents": "none",
+                            "position": "absolute",
+                            "transform": "translateX(-100%)",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="radio"
+                        value="0"
+                      />
+                      <label
+                        className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
+                        onMouseDown={[Function]}
+                      >
+                        Company
+                      </label>
+                    </div>
+                    <div
+                      className="flex items-center gap-2"
+                    >
+                      <button
+                        aria-checked={false}
+                        className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                        data-orientation="horizontal"
+                        data-radix-collection-item=""
+                        data-state="unchecked"
+                        disabled={false}
+                        id="root_employment-1"
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                        type="button"
+                        value="1"
+                      />
+                      <input
+                        aria-hidden={true}
+                        defaultChecked={false}
+                        disabled={false}
+                        required={false}
+                        style={
+                          {
+                            "margin": 0,
+                            "opacity": 0,
+                            "pointerEvents": "none",
+                            "position": "absolute",
+                            "transform": "translateX(-100%)",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="radio"
+                        value="1"
+                      />
+                      <label
+                        className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
+                        onMouseDown={[Function]}
+                      >
+                        Education
+                      </label>
+                    </div>
+                    <div
+                      className="flex items-center gap-2"
+                    >
+                      <button
+                        aria-checked={false}
+                        className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                        data-orientation="horizontal"
+                        data-radix-collection-item=""
+                        data-state="unchecked"
+                        disabled={false}
+                        id="root_employment-2"
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                        type="button"
+                        value="2"
+                      />
+                      <input
+                        aria-hidden={true}
+                        defaultChecked={false}
+                        disabled={false}
+                        required={false}
+                        style={
+                          {
+                            "margin": 0,
+                            "opacity": 0,
+                            "pointerEvents": "none",
+                            "position": "absolute",
+                            "transform": "translateX(-100%)",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="radio"
+                        value="2"
+                      />
+                      <label
+                        className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
+                        onMouseDown={[Function]}
+                      >
+                        Other
+                      </label>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -1924,217 +1936,229 @@ exports[`Complex grid renders person and address and employment in a complex gri
             className="gap-2 col-span-6 row-span-1 flex items-center"
             data-testid="1"
           >
-            <div
-              className="mb-0"
-            >
+            <div>
               <div
-                aria-describedby="root_employment__error root_employment__description root_employment__help"
-                aria-orientation="horizontal"
-                aria-required={false}
-                className="gap-2 flex flex-wrap"
-                data-orientation="horizontal"
-                dir="ltr"
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                role="radiogroup"
-                style={
-                  {
-                    "outline": "none",
-                  }
-                }
-                tabIndex={0}
+                className="flex flex-col gap-2"
               >
+                <label
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  htmlFor="root_employment"
+                >
+                  Employment
+                </label>
                 <div
-                  className="flex items-center gap-2"
+                  className="mb-0"
                 >
-                  <button
-                    aria-checked={false}
-                    className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                  <div
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    aria-orientation="horizontal"
+                    aria-required={false}
+                    className="gap-2 flex flex-wrap"
                     data-orientation="horizontal"
-                    data-radix-collection-item=""
-                    data-state="unchecked"
-                    disabled={false}
-                    id="root_employment-0"
-                    onClick={[Function]}
+                    dir="ltr"
+                    onBlur={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseDown={[Function]}
-                    role="radio"
-                    tabIndex={-1}
-                    type="button"
-                    value="0"
-                  />
-                  <input
-                    aria-hidden={true}
-                    defaultChecked={false}
-                    disabled={false}
-                    required={false}
+                    role="radiogroup"
                     style={
                       {
-                        "margin": 0,
-                        "opacity": 0,
-                        "pointerEvents": "none",
-                        "position": "absolute",
-                        "transform": "translateX(-100%)",
+                        "outline": "none",
                       }
                     }
-                    tabIndex={-1}
-                    type="radio"
-                    value="0"
-                  />
-                  <label
-                    className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
-                    onMouseDown={[Function]}
+                    tabIndex={0}
                   >
-                    Company
-                  </label>
+                    <div
+                      className="flex items-center gap-2"
+                    >
+                      <button
+                        aria-checked={false}
+                        className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                        data-orientation="horizontal"
+                        data-radix-collection-item=""
+                        data-state="unchecked"
+                        disabled={false}
+                        id="root_employment-0"
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                        type="button"
+                        value="0"
+                      />
+                      <input
+                        aria-hidden={true}
+                        defaultChecked={false}
+                        disabled={false}
+                        required={false}
+                        style={
+                          {
+                            "margin": 0,
+                            "opacity": 0,
+                            "pointerEvents": "none",
+                            "position": "absolute",
+                            "transform": "translateX(-100%)",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="radio"
+                        value="0"
+                      />
+                      <label
+                        className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
+                        onMouseDown={[Function]}
+                      >
+                        Company
+                      </label>
+                    </div>
+                    <div
+                      className="flex items-center gap-2"
+                    >
+                      <button
+                        aria-checked={true}
+                        className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                        data-orientation="horizontal"
+                        data-radix-collection-item=""
+                        data-state="checked"
+                        disabled={false}
+                        id="root_employment-1"
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                        type="button"
+                        value="1"
+                      >
+                        <span
+                          className="flex items-center justify-center"
+                          data-state="checked"
+                        >
+                          <svg
+                            className="h-3.5 w-3.5 fill-primary"
+                            fill="none"
+                            height="15"
+                            viewBox="0 0 15 15"
+                            width="15"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              clipRule="evenodd"
+                              d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+                              fill="currentColor"
+                              fillRule="evenodd"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <input
+                        aria-hidden={true}
+                        defaultChecked={true}
+                        disabled={false}
+                        required={false}
+                        style={
+                          {
+                            "margin": 0,
+                            "opacity": 0,
+                            "pointerEvents": "none",
+                            "position": "absolute",
+                            "transform": "translateX(-100%)",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="radio"
+                        value="1"
+                      />
+                      <label
+                        className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
+                        onMouseDown={[Function]}
+                      >
+                        Education
+                      </label>
+                    </div>
+                    <div
+                      className="flex items-center gap-2"
+                    >
+                      <button
+                        aria-checked={false}
+                        className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                        data-orientation="horizontal"
+                        data-radix-collection-item=""
+                        data-state="unchecked"
+                        disabled={false}
+                        id="root_employment-2"
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                        type="button"
+                        value="2"
+                      />
+                      <input
+                        aria-hidden={true}
+                        defaultChecked={false}
+                        disabled={false}
+                        required={false}
+                        style={
+                          {
+                            "margin": 0,
+                            "opacity": 0,
+                            "pointerEvents": "none",
+                            "position": "absolute",
+                            "transform": "translateX(-100%)",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="radio"
+                        value="2"
+                      />
+                      <label
+                        className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
+                        onMouseDown={[Function]}
+                      >
+                        Other
+                      </label>
+                    </div>
+                  </div>
                 </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="grid gap-2 col-span-6 row-span-1"
+            data-testid="1"
+          >
+            <div
+              className="form-group field field-string"
+            >
+              <div
+                className="flex flex-col gap-2"
+              >
+                <label
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  htmlFor="root_employment_district"
+                >
+                  District Name
+                </label>
                 <div
-                  className="flex items-center gap-2"
+                  className="p-0.5"
                 >
-                  <button
-                    aria-checked={true}
-                    className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                    data-orientation="horizontal"
-                    data-radix-collection-item=""
-                    data-state="checked"
-                    disabled={false}
-                    id="root_employment-1"
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    role="radio"
-                    tabIndex={-1}
-                    type="button"
-                    value="1"
-                  >
-                    <span
-                      className="flex items-center justify-center"
-                      data-state="checked"
-                    >
-                      <svg
-                        className="h-3.5 w-3.5 fill-primary"
-                        fill="none"
-                        height="15"
-                        viewBox="0 0 15 15"
-                        width="15"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clipRule="evenodd"
-                          d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
-                          fill="currentColor"
-                          fillRule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </button>
                   <input
-                    aria-hidden={true}
-                    defaultChecked={true}
+                    aria-describedby="root_employment_district__error root_employment_district__description root_employment_district__help"
+                    autoFocus={false}
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                     disabled={false}
-                    required={false}
-                    style={
-                      {
-                        "margin": 0,
-                        "opacity": 0,
-                        "pointerEvents": "none",
-                        "position": "absolute",
-                        "transform": "translateX(-100%)",
-                      }
-                    }
-                    tabIndex={-1}
-                    type="radio"
-                    value="1"
-                  />
-                  <label
-                    className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
-                    onMouseDown={[Function]}
-                  >
-                    Education
-                  </label>
-                </div>
-                <div
-                  className="flex items-center gap-2"
-                >
-                  <button
-                    aria-checked={false}
-                    className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                    data-orientation="horizontal"
-                    data-radix-collection-item=""
-                    data-state="unchecked"
-                    disabled={false}
-                    id="root_employment-2"
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    role="radio"
-                    tabIndex={-1}
-                    type="button"
-                    value="2"
-                  />
-                  <input
-                    aria-hidden={true}
-                    defaultChecked={false}
-                    disabled={false}
-                    required={false}
-                    style={
-                      {
-                        "margin": 0,
-                        "opacity": 0,
-                        "pointerEvents": "none",
-                        "position": "absolute",
-                        "transform": "translateX(-100%)",
-                      }
-                    }
-                    tabIndex={-1}
-                    type="radio"
-                    value="2"
-                  />
-                  <label
-                    className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
-                    onMouseDown={[Function]}
-                  >
-                    Other
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="grid gap-2 col-span-6 row-span-1"
-            data-testid="1"
-          >
-            <div
-              className="form-group field field-string"
-            >
-              <div
-                className="flex flex-col gap-2"
-              >
-                <label
-                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  htmlFor="root_employment_district"
-                >
-                  District Name
-                </label>
-                <div
-                  className="p-0.5"
-                >
-                  <input
-                    aria-describedby="root_employment_district__error root_employment_district__description root_employment_district__help"
-                    autoFocus={false}
-                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                    disabled={false}
-                    id="root_employment_district"
-                    name="root_employment_district"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder=""
-                    readOnly={false}
+                    id="root_employment_district"
+                    name="root_employment_district"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    placeholder=""
+                    readOnly={false}
                     required={false}
                     type="text"
                     value=""
@@ -3123,182 +3147,194 @@ exports[`Complex grid renders person and address and employment in a complex gri
             className="gap-2 col-span-6 row-span-1 flex items-center"
             data-testid="1"
           >
-            <div
-              className="mb-0"
-            >
+            <div>
               <div
-                aria-describedby="root_employment__error root_employment__description root_employment__help"
-                aria-orientation="horizontal"
-                aria-required={false}
-                className="gap-2 flex flex-wrap"
-                data-orientation="horizontal"
-                dir="ltr"
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                role="radiogroup"
-                style={
-                  {
-                    "outline": "none",
-                  }
-                }
-                tabIndex={0}
+                className="flex flex-col gap-2"
               >
-                <div
-                  className="flex items-center gap-2"
+                <label
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  htmlFor="root_employment"
                 >
-                  <button
-                    aria-checked={false}
-                    className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                    data-orientation="horizontal"
-                    data-radix-collection-item=""
-                    data-state="unchecked"
-                    disabled={false}
-                    id="root_employment-0"
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    role="radio"
-                    tabIndex={-1}
-                    type="button"
-                    value="0"
-                  />
-                  <input
-                    aria-hidden={true}
-                    defaultChecked={false}
-                    disabled={false}
-                    required={false}
-                    style={
-                      {
-                        "margin": 0,
-                        "opacity": 0,
-                        "pointerEvents": "none",
-                        "position": "absolute",
-                        "transform": "translateX(-100%)",
-                      }
-                    }
-                    tabIndex={-1}
-                    type="radio"
-                    value="0"
-                  />
-                  <label
-                    className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
-                    onMouseDown={[Function]}
-                  >
-                    Company
-                  </label>
-                </div>
+                  Employment
+                </label>
                 <div
-                  className="flex items-center gap-2"
+                  className="mb-0"
                 >
-                  <button
-                    aria-checked={false}
-                    className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                  <div
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    aria-orientation="horizontal"
+                    aria-required={false}
+                    className="gap-2 flex flex-wrap"
                     data-orientation="horizontal"
-                    data-radix-collection-item=""
-                    data-state="unchecked"
-                    disabled={false}
-                    id="root_employment-1"
-                    onClick={[Function]}
+                    dir="ltr"
+                    onBlur={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseDown={[Function]}
-                    role="radio"
-                    tabIndex={-1}
-                    type="button"
-                    value="1"
-                  />
-                  <input
-                    aria-hidden={true}
-                    defaultChecked={false}
-                    disabled={false}
-                    required={false}
+                    role="radiogroup"
                     style={
                       {
-                        "margin": 0,
-                        "opacity": 0,
-                        "pointerEvents": "none",
-                        "position": "absolute",
-                        "transform": "translateX(-100%)",
+                        "outline": "none",
                       }
                     }
-                    tabIndex={-1}
-                    type="radio"
-                    value="1"
-                  />
-                  <label
-                    className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
-                    onMouseDown={[Function]}
-                  >
-                    Education
-                  </label>
-                </div>
-                <div
-                  className="flex items-center gap-2"
-                >
-                  <button
-                    aria-checked={true}
-                    className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                    data-orientation="horizontal"
-                    data-radix-collection-item=""
-                    data-state="checked"
-                    disabled={false}
-                    id="root_employment-2"
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    role="radio"
-                    tabIndex={-1}
-                    type="button"
-                    value="2"
+                    tabIndex={0}
                   >
-                    <span
-                      className="flex items-center justify-center"
-                      data-state="checked"
+                    <div
+                      className="flex items-center gap-2"
                     >
-                      <svg
-                        className="h-3.5 w-3.5 fill-primary"
-                        fill="none"
-                        height="15"
-                        viewBox="0 0 15 15"
-                        width="15"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <button
+                        aria-checked={false}
+                        className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                        data-orientation="horizontal"
+                        data-radix-collection-item=""
+                        data-state="unchecked"
+                        disabled={false}
+                        id="root_employment-0"
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                        type="button"
+                        value="0"
+                      />
+                      <input
+                        aria-hidden={true}
+                        defaultChecked={false}
+                        disabled={false}
+                        required={false}
+                        style={
+                          {
+                            "margin": 0,
+                            "opacity": 0,
+                            "pointerEvents": "none",
+                            "position": "absolute",
+                            "transform": "translateX(-100%)",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="radio"
+                        value="0"
+                      />
+                      <label
+                        className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
+                        onMouseDown={[Function]}
                       >
-                        <path
-                          clipRule="evenodd"
-                          d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
-                          fill="currentColor"
-                          fillRule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <input
-                    aria-hidden={true}
-                    defaultChecked={true}
-                    disabled={false}
-                    required={false}
-                    style={
-                      {
-                        "margin": 0,
-                        "opacity": 0,
-                        "pointerEvents": "none",
-                        "position": "absolute",
-                        "transform": "translateX(-100%)",
-                      }
-                    }
-                    tabIndex={-1}
-                    type="radio"
-                    value="2"
-                  />
-                  <label
-                    className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
-                    onMouseDown={[Function]}
-                  >
-                    Other
-                  </label>
+                        Company
+                      </label>
+                    </div>
+                    <div
+                      className="flex items-center gap-2"
+                    >
+                      <button
+                        aria-checked={false}
+                        className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                        data-orientation="horizontal"
+                        data-radix-collection-item=""
+                        data-state="unchecked"
+                        disabled={false}
+                        id="root_employment-1"
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                        type="button"
+                        value="1"
+                      />
+                      <input
+                        aria-hidden={true}
+                        defaultChecked={false}
+                        disabled={false}
+                        required={false}
+                        style={
+                          {
+                            "margin": 0,
+                            "opacity": 0,
+                            "pointerEvents": "none",
+                            "position": "absolute",
+                            "transform": "translateX(-100%)",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="radio"
+                        value="1"
+                      />
+                      <label
+                        className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
+                        onMouseDown={[Function]}
+                      >
+                        Education
+                      </label>
+                    </div>
+                    <div
+                      className="flex items-center gap-2"
+                    >
+                      <button
+                        aria-checked={true}
+                        className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                        data-orientation="horizontal"
+                        data-radix-collection-item=""
+                        data-state="checked"
+                        disabled={false}
+                        id="root_employment-2"
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                        type="button"
+                        value="2"
+                      >
+                        <span
+                          className="flex items-center justify-center"
+                          data-state="checked"
+                        >
+                          <svg
+                            className="h-3.5 w-3.5 fill-primary"
+                            fill="none"
+                            height="15"
+                            viewBox="0 0 15 15"
+                            width="15"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              clipRule="evenodd"
+                              d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+                              fill="currentColor"
+                              fillRule="evenodd"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <input
+                        aria-hidden={true}
+                        defaultChecked={true}
+                        disabled={false}
+                        required={false}
+                        style={
+                          {
+                            "margin": 0,
+                            "opacity": 0,
+                            "pointerEvents": "none",
+                            "position": "absolute",
+                            "transform": "translateX(-100%)",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="radio"
+                        value="2"
+                      />
+                      <label
+                        className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
+                        onMouseDown={[Function]}
+                      >
+                        Other
+                      </label>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -4123,182 +4159,194 @@ exports[`Complex grid renders person and address and employment in a complex gri
             className="gap-2 col-span-6 row-span-1 flex items-center"
             data-testid="1"
           >
-            <div
-              className="mb-0"
-            >
+            <div>
               <div
-                aria-describedby="root_employment__error root_employment__description root_employment__help"
-                aria-orientation="horizontal"
-                aria-required={false}
-                className="gap-2 flex flex-wrap"
-                data-orientation="horizontal"
-                dir="ltr"
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                role="radiogroup"
-                style={
-                  {
-                    "outline": "none",
-                  }
-                }
-                tabIndex={0}
+                className="flex flex-col gap-2"
               >
-                <div
-                  className="flex items-center gap-2"
-                >
-                  <button
-                    aria-checked={true}
-                    className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                    data-orientation="horizontal"
-                    data-radix-collection-item=""
-                    data-state="checked"
-                    disabled={false}
-                    id="root_employment-0"
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    role="radio"
-                    tabIndex={-1}
-                    type="button"
-                    value="0"
-                  >
-                    <span
-                      className="flex items-center justify-center"
-                      data-state="checked"
-                    >
-                      <svg
-                        className="h-3.5 w-3.5 fill-primary"
-                        fill="none"
-                        height="15"
-                        viewBox="0 0 15 15"
-                        width="15"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clipRule="evenodd"
-                          d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
-                          fill="currentColor"
-                          fillRule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <input
-                    aria-hidden={true}
-                    defaultChecked={true}
-                    disabled={false}
-                    required={false}
-                    style={
-                      {
-                        "margin": 0,
-                        "opacity": 0,
-                        "pointerEvents": "none",
-                        "position": "absolute",
-                        "transform": "translateX(-100%)",
-                      }
-                    }
-                    tabIndex={-1}
-                    type="radio"
-                    value="0"
-                  />
-                  <label
-                    className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
-                    onMouseDown={[Function]}
-                  >
-                    Company
-                  </label>
-                </div>
-                <div
-                  className="flex items-center gap-2"
+                <label
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  htmlFor="root_employment"
                 >
-                  <button
-                    aria-checked={false}
-                    className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                    data-orientation="horizontal"
-                    data-radix-collection-item=""
-                    data-state="unchecked"
-                    disabled={false}
-                    id="root_employment-1"
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    role="radio"
-                    tabIndex={-1}
-                    type="button"
-                    value="1"
-                  />
-                  <input
-                    aria-hidden={true}
-                    defaultChecked={false}
-                    disabled={false}
-                    required={false}
-                    style={
-                      {
-                        "margin": 0,
-                        "opacity": 0,
-                        "pointerEvents": "none",
-                        "position": "absolute",
-                        "transform": "translateX(-100%)",
-                      }
-                    }
-                    tabIndex={-1}
-                    type="radio"
-                    value="1"
-                  />
-                  <label
-                    className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
-                    onMouseDown={[Function]}
-                  >
-                    Education
-                  </label>
-                </div>
+                  Employment
+                </label>
                 <div
-                  className="flex items-center gap-2"
+                  className="mb-0"
                 >
-                  <button
-                    aria-checked={false}
-                    className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                  <div
+                    aria-describedby="root_employment__error root_employment__description root_employment__help"
+                    aria-orientation="horizontal"
+                    aria-required={false}
+                    className="gap-2 flex flex-wrap"
                     data-orientation="horizontal"
-                    data-radix-collection-item=""
-                    data-state="unchecked"
-                    disabled={false}
-                    id="root_employment-2"
-                    onClick={[Function]}
+                    dir="ltr"
+                    onBlur={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseDown={[Function]}
-                    role="radio"
-                    tabIndex={-1}
-                    type="button"
-                    value="2"
-                  />
-                  <input
-                    aria-hidden={true}
-                    defaultChecked={false}
-                    disabled={false}
-                    required={false}
+                    role="radiogroup"
                     style={
                       {
-                        "margin": 0,
-                        "opacity": 0,
-                        "pointerEvents": "none",
-                        "position": "absolute",
-                        "transform": "translateX(-100%)",
+                        "outline": "none",
                       }
                     }
-                    tabIndex={-1}
-                    type="radio"
-                    value="2"
-                  />
-                  <label
-                    className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
-                    onMouseDown={[Function]}
+                    tabIndex={0}
                   >
-                    Other
-                  </label>
+                    <div
+                      className="flex items-center gap-2"
+                    >
+                      <button
+                        aria-checked={true}
+                        className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                        data-orientation="horizontal"
+                        data-radix-collection-item=""
+                        data-state="checked"
+                        disabled={false}
+                        id="root_employment-0"
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                        type="button"
+                        value="0"
+                      >
+                        <span
+                          className="flex items-center justify-center"
+                          data-state="checked"
+                        >
+                          <svg
+                            className="h-3.5 w-3.5 fill-primary"
+                            fill="none"
+                            height="15"
+                            viewBox="0 0 15 15"
+                            width="15"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              clipRule="evenodd"
+                              d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+                              fill="currentColor"
+                              fillRule="evenodd"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <input
+                        aria-hidden={true}
+                        defaultChecked={true}
+                        disabled={false}
+                        required={false}
+                        style={
+                          {
+                            "margin": 0,
+                            "opacity": 0,
+                            "pointerEvents": "none",
+                            "position": "absolute",
+                            "transform": "translateX(-100%)",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="radio"
+                        value="0"
+                      />
+                      <label
+                        className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
+                        onMouseDown={[Function]}
+                      >
+                        Company
+                      </label>
+                    </div>
+                    <div
+                      className="flex items-center gap-2"
+                    >
+                      <button
+                        aria-checked={false}
+                        className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                        data-orientation="horizontal"
+                        data-radix-collection-item=""
+                        data-state="unchecked"
+                        disabled={false}
+                        id="root_employment-1"
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                        type="button"
+                        value="1"
+                      />
+                      <input
+                        aria-hidden={true}
+                        defaultChecked={false}
+                        disabled={false}
+                        required={false}
+                        style={
+                          {
+                            "margin": 0,
+                            "opacity": 0,
+                            "pointerEvents": "none",
+                            "position": "absolute",
+                            "transform": "translateX(-100%)",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="radio"
+                        value="1"
+                      />
+                      <label
+                        className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
+                        onMouseDown={[Function]}
+                      >
+                        Education
+                      </label>
+                    </div>
+                    <div
+                      className="flex items-center gap-2"
+                    >
+                      <button
+                        aria-checked={false}
+                        className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                        data-orientation="horizontal"
+                        data-radix-collection-item=""
+                        data-state="unchecked"
+                        disabled={false}
+                        id="root_employment-2"
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        role="radio"
+                        tabIndex={-1}
+                        type="button"
+                        value="2"
+                      />
+                      <input
+                        aria-hidden={true}
+                        defaultChecked={false}
+                        disabled={false}
+                        required={false}
+                        style={
+                          {
+                            "margin": 0,
+                            "opacity": 0,
+                            "pointerEvents": "none",
+                            "position": "absolute",
+                            "transform": "translateX(-100%)",
+                          }
+                        }
+                        tabIndex={-1}
+                        type="radio"
+                        value="2"
+                      />
+                      <label
+                        className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 leading-tight"
+                        onMouseDown={[Function]}
+                      >
+                        Other
+                      </label>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/packages/utils/package.json b/packages/utils/package.json
index e3055c0a97..77556b0267 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -8,29 +8,29 @@
   "description": "Utility functions for @rjsf/core",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     },
     "./dist": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./dist/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     }
   },
   "files": [
diff --git a/packages/validator-ajv8/package.json b/packages/validator-ajv8/package.json
index 38e6d5e170..b9a049d91b 100644
--- a/packages/validator-ajv8/package.json
+++ b/packages/validator-ajv8/package.json
@@ -8,44 +8,44 @@
   "description": "The ajv-8 based validator for @rjsf/core",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./compileSchemaValidators": {
+      "types": "./lib/compileSchemaValidators.d.ts",
       "require": "./dist/compileSchemaValidators.js",
-      "import": "./lib/compileSchemaValidators.js",
-      "types": "./lib/compileSchemaValidators.d.ts"
+      "import": "./lib/compileSchemaValidators.js"
     },
     "./lib/compileSchemaValidators": {
+      "types": "./lib/compileSchemaValidators.d.ts",
       "require": "./dist/compileSchemaValidators.js",
-      "import": "./lib/compileSchemaValidators.js",
-      "types": "./lib/compileSchemaValidators.d.ts"
+      "import": "./lib/compileSchemaValidators.js"
     },
     "./dist/compileSchemaValidators": {
+      "types": "./lib/compileSchemaValidators.d.ts",
       "require": "./dist/compileSchemaValidators.js",
-      "import": "./lib/compileSchemaValidators.js",
-      "types": "./lib/compileSchemaValidators.d.ts"
+      "import": "./lib/compileSchemaValidators.js"
     },
     "./lib": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./lib/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     },
     "./dist": {
+      "types": "./lib/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "import": "./lib/index.js"
     },
     "./dist/*.js": {
+      "types": "./lib/*.d.ts",
       "require": "./dist/*.js",
-      "import": "./lib/*.js",
-      "types": "./lib/*.d.ts"
+      "import": "./lib/*.js"
     }
   },
   "files": [