From 08791d17918d3730e626093952391c8604208075 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Thu, 11 Jan 2024 14:58:03 -0300
Subject: [PATCH 01/43] Add @rjsf/mui to the project

---
 docs/package-lock.json | 796 ++++++++++++++++++++++++++++++++++++++---
 docs/package.json      |   6 +
 2 files changed, 760 insertions(+), 42 deletions(-)

diff --git a/docs/package-lock.json b/docs/package-lock.json
index e0ae70f..1efd9bf 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -10,16 +10,22 @@
       "dependencies": {
         "@ai-form-toolkit/client": "file:../packages/client",
         "@ai-form-toolkit/server": "file:../packages/server",
+        "@emotion/react": "^11.11.3",
+        "@emotion/styled": "^11.11.0",
         "@mantine/code-highlight": "^7.3.2",
         "@mantine/core": "^7.3.2",
         "@mantine/dates": "^7.3.2",
         "@mantine/form": "^7.3.2",
         "@mantine/hooks": "^7.3.2",
         "@mdx-js/react": "^3.0.0",
+        "@mui/icons-material": "^5.15.4",
+        "@mui/material": "^5.15.4",
         "@next/bundle-analyzer": "^14.0.4",
         "@next/mdx": "^14.0.4",
         "@rjsf/core": "^5.15.1",
+        "@rjsf/mui": "^5.15.1",
         "@rjsf/utils": "^5.15.1",
+        "@rjsf/validator-ajv6": "^5.15.1",
         "@rjsf/validator-ajv8": "^5.15.1",
         "@tabler/icons-react": "^2.44.0",
         "@types/mdx": "^2.0.10",
@@ -96,6 +102,9 @@
     "../packages/client": {
       "name": "@ai-form-toolkit/client",
       "version": "0.0.1",
+      "devDependencies": {
+        "@types/react": "^18.2.46"
+      },
       "engines": {
         "node": ">=20"
       },
@@ -146,7 +155,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
       "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.23.4",
         "chalk": "^2.4.2"
@@ -263,7 +271,6 @@
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
       "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.22.15"
       },
@@ -318,7 +325,6 @@
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
       "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -327,7 +333,6 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
       "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -359,7 +364,6 @@
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
       "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -382,9 +386,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
-      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
+      "version": "7.23.8",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz",
+      "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -431,7 +435,6 @@
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
       "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
@@ -441,21 +444,178 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.3.tgz",
+      "integrity": "sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.3.tgz",
+      "integrity": "sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@floating-ui/core": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.1.tgz",
-      "integrity": "sha512-QgcKYwzcc8vvZ4n/5uklchy8KVdjJwcOeI+HnnTNclJjs2nYsy23DOCf+sSV1kBwD9yDAoVKCkv/gEPzgQU3Pw==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
+      "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
       "dependencies": {
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
-      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
+      "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
       "dependencies": {
-        "@floating-ui/core": "^1.4.2",
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/core": "^1.5.3",
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "node_modules/@floating-ui/react": {
@@ -473,11 +633,11 @@
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz",
-      "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.5.tgz",
+      "integrity": "sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q==",
       "dependencies": {
-        "@floating-ui/dom": "^1.5.1"
+        "@floating-ui/dom": "^1.5.4"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -485,9 +645,9 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
-      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
@@ -738,6 +898,285 @@
         "react": ">=16"
       }
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.31",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.31.tgz",
+      "integrity": "sha512-+uNbP3OHJuZVI00WyMg7xfLZotaEY7LgvYXDfONVJbrS+K9wyjCIPNfjy8r9XJn4fbHo/5ibiZqjWnU9LMNv+A==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.7",
+        "@floating-ui/react-dom": "^2.0.5",
+        "@mui/types": "^7.2.13",
+        "@mui/utils": "^5.15.4",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/base/node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.4.tgz",
+      "integrity": "sha512-0OZN9O6hAtBpx70mMNFOPaAIol/ytwZYPY+z7Rf9dK3+1Xlzwvj5/IeShJKvtp76S1qJyhPuvZg0+BGqQaUnUw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.4.tgz",
+      "integrity": "sha512-q/Yk7aokN8qGMpR7bwoDpBSeaNe6Bv7vaY9yHYodP37c64TM6ime05ueb/wgksOVszrKkNXC67E/XYbRWOoUFA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.7"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.4.tgz",
+      "integrity": "sha512-T/LGRAC+M0c+D3+y67eHwIN5bSje0TxbcJCWR0esNvU11T0QwrX3jedXItPNBwMupF2F5VWCDHBVLlFnN3+ABA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.7",
+        "@mui/base": "5.0.0-beta.31",
+        "@mui/core-downloads-tracker": "^5.15.4",
+        "@mui/system": "^5.15.4",
+        "@mui/types": "^7.2.13",
+        "@mui/utils": "^5.15.4",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.4.tgz",
+      "integrity": "sha512-9N5myIMEEQTM5WYWPGvvYADzjFo12LgJ7S+2iTZkBNOcJpUxQYM1tvYjkHCDV+t1ocMOEgjR2EfJ9Dus30dBlg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.7",
+        "@mui/utils": "^5.15.4",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.4.tgz",
+      "integrity": "sha512-vtrZUXG5XI8CNiNLcxjIirW4dEbOloR+ikfm6ePBo7jXpJdpXjVzBWetrfE+5eI0cHkKWlTptnJ2voKV8pBRfw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.7",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.4.tgz",
+      "integrity": "sha512-KCwkHajGBXPs2TK1HJjIyab4NDk0cZoBDYN/TTlXVo1qBAmCjY0vjqrlsjeoG+wrwwcezXMLs/e6OGP66fPCog==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.7",
+        "@mui/private-theming": "^5.15.4",
+        "@mui/styled-engine": "^5.15.4",
+        "@mui/types": "^7.2.13",
+        "@mui/utils": "^5.15.4",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system/node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.13",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.13.tgz",
+      "integrity": "sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.4.tgz",
+      "integrity": "sha512-E2wLQGBcs3VR52CpMRjk46cGscC4cbf3Q2uyHNaAeL36yTTm+aVNbtsTCazXtjOP4BDd8lu6VtlTpVC8Rtl4mg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.7",
+        "@types/prop-types": "^15.7.11",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/@next/bundle-analyzer": {
       "version": "14.0.4",
       "resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-14.0.4.tgz",
@@ -946,6 +1385,15 @@
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.24.tgz",
       "integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ=="
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rjsf/core": {
       "version": "5.15.1",
       "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.15.1.tgz",
@@ -965,6 +1413,23 @@
         "react": "^16.14.0 || >=17"
       }
     },
+    "node_modules/@rjsf/mui": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@rjsf/mui/-/mui-5.15.1.tgz",
+      "integrity": "sha512-NpfI8PrETjcXFl9MJuIm+IiYSF6+KWgSdglgaYupk60owizlImt/gJnUCX6IKLjaMefwv9nUtxAefpictGfScw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.7.0",
+        "@emotion/styled": "^11.6.0",
+        "@mui/icons-material": "^5.2.0",
+        "@mui/material": "^5.2.2",
+        "@rjsf/core": "^5.12.x",
+        "@rjsf/utils": "^5.12.x",
+        "react": ">=17"
+      }
+    },
     "node_modules/@rjsf/utils": {
       "version": "5.15.1",
       "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.15.1.tgz",
@@ -988,6 +1453,42 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/@rjsf/validator-ajv6": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv6/-/validator-ajv6-5.15.1.tgz",
+      "integrity": "sha512-P2OJsc7dU2GYHUGEgXY+y7Z8aoZXpMmzVCC1Qy30NBkqLNh7HA5+YQRtoFAm+Ccftx/L5vmtc0ain7daPdAOaQ==",
+      "dependencies": {
+        "ajv": "^6.12.6",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@rjsf/utils": "^5.12.x"
+      }
+    },
+    "node_modules/@rjsf/validator-ajv6/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@rjsf/validator-ajv6/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/@rjsf/validator-ajv8": {
       "version": "5.15.1",
       "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.15.1.tgz",
@@ -1252,6 +1753,11 @@
         "form-data": "^4.0.0"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
@@ -1276,6 +1782,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
@@ -1567,7 +2081,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -1579,7 +2092,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -1587,8 +2099,7 @@
     "node_modules/ansi-styles/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/aria-hidden": {
       "version": "1.2.3",
@@ -1798,6 +2309,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -1888,6 +2413,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -1930,7 +2463,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -2090,6 +2622,21 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/crypt": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
@@ -2275,6 +2822,15 @@
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -2311,6 +2867,14 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-get-iterator": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
@@ -2351,7 +2915,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -2533,9 +3096,7 @@
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "devOptional": true,
-      "peer": true
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
     "node_modules/fastq": {
       "version": "1.15.0",
@@ -2558,6 +3119,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2609,7 +3175,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2713,7 +3278,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -2773,7 +3337,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
       "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -3012,6 +3575,19 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/holy-loader": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/holy-loader/-/holy-loader-2.2.0.tgz",
@@ -3042,6 +3618,21 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -3129,6 +3720,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
     "node_modules/is-bigint": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
@@ -3174,6 +3770,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-core-module": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "dependencies": {
+        "hasown": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-date-object": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
@@ -3413,9 +4020,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "devOptional": true,
-      "peer": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema-compare": {
       "version": "0.2.2",
@@ -3471,6 +4076,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -4831,6 +5441,17 @@
         "opener": "bin/opener-bin.js"
       }
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse-entities": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
@@ -4851,6 +5472,23 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse-numeric-range": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
@@ -4867,6 +5505,19 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/periscopic": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -5251,6 +5902,21 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
@@ -5544,6 +6210,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -5828,6 +6518,11 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/sugarss": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
@@ -5848,7 +6543,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -5856,6 +6550,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
@@ -6011,7 +6716,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -6788,6 +7492,14 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/docs/package.json b/docs/package.json
index ee54a0c..d96232b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,16 +11,22 @@
   "dependencies": {
     "@ai-form-toolkit/client": "file:../packages/client",
     "@ai-form-toolkit/server": "file:../packages/server",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
     "@mantine/code-highlight": "^7.3.2",
     "@mantine/core": "^7.3.2",
     "@mantine/dates": "^7.3.2",
     "@mantine/form": "^7.3.2",
     "@mantine/hooks": "^7.3.2",
     "@mdx-js/react": "^3.0.0",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/material": "^5.15.4",
     "@next/bundle-analyzer": "^14.0.4",
     "@next/mdx": "^14.0.4",
     "@rjsf/core": "^5.15.1",
+    "@rjsf/mui": "^5.15.1",
     "@rjsf/utils": "^5.15.1",
+    "@rjsf/validator-ajv6": "^5.15.1",
     "@rjsf/validator-ajv8": "^5.15.1",
     "@tabler/icons-react": "^2.44.0",
     "@types/mdx": "^2.0.10",

From c0168dd66bad3e8804790d3ab94a0560b0a2aba5 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Thu, 11 Jan 2024 15:38:51 -0300
Subject: [PATCH 02/43] Use MUI's form instead of Mantine's

---
 docs/src/app/tutorial/form-generation/components.tsx | 2 +-
 docs/src/components/Forms/SchemaFormDemo.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/tutorial/form-generation/components.tsx b/docs/src/app/tutorial/form-generation/components.tsx
index 0b642df..e879f4e 100644
--- a/docs/src/app/tutorial/form-generation/components.tsx
+++ b/docs/src/app/tutorial/form-generation/components.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 import { CodeHighlightTabs } from '@mantine/code-highlight';
-import SchemaForm from '@/components/Forms/SchemaForm';
+import SchemaForm from '@rjsf/mui';
 
 export function BasicInputForm() {
   const [content, setContent] = useState('Name: ...\nAge: ...');
diff --git a/docs/src/components/Forms/SchemaFormDemo.tsx b/docs/src/components/Forms/SchemaFormDemo.tsx
index 08e3150..05abf8e 100644
--- a/docs/src/components/Forms/SchemaFormDemo.tsx
+++ b/docs/src/components/Forms/SchemaFormDemo.tsx
@@ -3,7 +3,7 @@ import validator from '@rjsf/validator-ajv8';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import { CodeHighlightTabs } from '@mantine/code-highlight';
 import { FormProps, IChangeEvent } from '@rjsf/core';
-import SchemaForm from './SchemaForm';
+import SchemaForm from '@rjsf/mui';
 
 export default function SchemaFormDemo({
   formSchema,

From 5193321eca651d30fe85c03dabfd6bdf3a9650c2 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Thu, 11 Jan 2024 18:15:52 -0300
Subject: [PATCH 03/43] Use MUI on tutorial basic components

---
 .../tutorial/form-assistant/components.tsx    | 70 ++++++++++---------
 .../tutorial/form-generation/components.tsx   | 35 ++++++----
 2 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/docs/src/app/tutorial/form-assistant/components.tsx b/docs/src/app/tutorial/form-assistant/components.tsx
index 0a8541e..ff39448 100644
--- a/docs/src/app/tutorial/form-assistant/components.tsx
+++ b/docs/src/app/tutorial/form-assistant/components.tsx
@@ -1,5 +1,5 @@
-import { Box, Button, Group, TextInput, Textarea } from '@mantine/core';
 import { useState } from 'react';
+import { Button, Paper, Stack, TextField } from '@mui/material';
 
 const AI_GENERATED_RECIPE =
   'Hummus quick recipe: ' +
@@ -13,17 +13,19 @@ export function BasicSingleFieldForm() {
   const [formValues, setFormValues] = useState<Record<string, string>>({ recipe: AI_GENERATED_RECIPE });
 
   return (
-    <Box mb="md" className="doc-form-example">
-      <Textarea
-        autosize
-        value={formValues.recipe}
-        onChange={(e) => setFormValues({ ...formValues, recipe: e.target.value })}
-      />
+    <Paper variant="outlined">
+      <Stack spacing={3} paddingX={2} paddingY={3}>
+        <TextField
+          multiline
+          value={formValues.recipe}
+          onChange={(e) => setFormValues({ ...formValues, recipe: e.target.value })}
+        />
 
-      <Group justify="flex-end" mt="md">
-        <Button variant="default">Autofill with GPT-4</Button>
-      </Group>
-    </Box>
+        <Button variant="outlined" sx={{ alignSelf: 'flex-start' }}>
+          Autofill with GPT-4
+        </Button>
+      </Stack>
+    </Paper>
   );
 }
 
@@ -35,29 +37,29 @@ export function BasicMultiFieldForm() {
   });
 
   return (
-    <Box mb="md" className="doc-form-example">
-      <Textarea
-        label="Recipe"
-        autosize
-        value={formValues.recipe}
-        onChange={(e) => setFormValues({ ...formValues, recipe: e.target.value })}
-        mb="xs"
-      />
-      <TextInput
-        label="Duration"
-        value={formValues.duration}
-        onChange={(e) => setFormValues({ ...formValues, duration: e.target.value })}
-        mb="xs"
-      />
-      <TextInput
-        label="Cost"
-        value={formValues.cost}
-        onChange={(e) => setFormValues({ ...formValues, duration: e.target.value })}
-      />
+    <Paper variant="outlined">
+      <Stack spacing={3} paddingX={2} paddingY={3}>
+        <TextField
+          multiline
+          label="Recipe"
+          value={formValues.recipe}
+          onChange={(e) => setFormValues({ ...formValues, recipe: e.target.value })}
+        />
+        <TextField
+          label="Duration"
+          value={formValues.duration}
+          onChange={(e) => setFormValues({ ...formValues, duration: e.target.value })}
+        />
+        <TextField
+          label="Cost"
+          value={formValues.cost}
+          onChange={(e) => setFormValues({ ...formValues, duration: e.target.value })}
+        />
 
-      <Group justify="flex-end" mt="md">
-        <Button variant="outline">Autofill with GPT-4</Button>
-      </Group>
-    </Box>
+        <Button variant="outlined" sx={{ alignSelf: 'flex-start' }}>
+          Autofill with GPT-4
+        </Button>
+      </Stack>
+    </Paper>
   );
 }
diff --git a/docs/src/app/tutorial/form-generation/components.tsx b/docs/src/app/tutorial/form-generation/components.tsx
index e879f4e..a844116 100644
--- a/docs/src/app/tutorial/form-generation/components.tsx
+++ b/docs/src/app/tutorial/form-generation/components.tsx
@@ -1,24 +1,31 @@
 'use client';
 
-import { Box, Button, Textarea } from '@mantine/core';
 import { useState } from 'react';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 import { CodeHighlightTabs } from '@mantine/code-highlight';
 import SchemaForm from '@rjsf/mui';
+import { Button, Paper, Stack, TextField } from '@mui/material';
 
 export function BasicInputForm() {
   const [content, setContent] = useState('Name: ...\nAge: ...');
   const [prompt, setPrompt] = useState('Form to fill the missing values');
 
   return (
-    <>
-      <Box mb="md" className="doc-form-example">
-        <Textarea label="Content" value={content} onChange={(event) => setContent(event.currentTarget.value)} mb="md" />
-        <Textarea label="Prompt" value={prompt} onChange={(event) => setPrompt(event.currentTarget.value)} mb="md" />
-        <Button variant="outline">Generate Form</Button>
-      </Box>
-    </>
+    <Paper variant="outlined">
+      <Stack spacing={3} paddingX={2} paddingY={3}>
+        <TextField
+          multiline
+          label="Content"
+          value={content}
+          onChange={(event) => setContent(event.currentTarget.value)}
+        />
+        <TextField multiline label="Prompt" value={prompt} onChange={(event) => setPrompt(event.currentTarget.value)} />
+        <Button variant="outlined" sx={{ alignSelf: 'flex-start' }}>
+          Generate Form
+        </Button>
+      </Stack>
+    </Paper>
   );
 }
 
@@ -50,13 +57,11 @@ const uiSchema = {
 
 export function BasicGeneratedForm() {
   return (
-    <SchemaForm
-      schema={formSchema}
-      uiSchema={uiSchema}
-      validator={validator}
-      onSubmit={() => null}
-      className="doc-form-example"
-    />
+    <Paper variant="outlined">
+      <Stack spacing={3} paddingX={2} paddingY={3}>
+        <SchemaForm schema={formSchema} uiSchema={uiSchema} validator={validator} onSubmit={() => null} />
+      </Stack>
+    </Paper>
   );
 }
 

From 348633feaad9df23b5a2b4a0db7b4bfc229cd56d Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Thu, 11 Jan 2024 18:18:04 -0300
Subject: [PATCH 04/43] Use MUI on OpenAIKeyWarning

---
 docs/src/components/Examples/OpenAIKeyWarning.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/Examples/OpenAIKeyWarning.tsx b/docs/src/components/Examples/OpenAIKeyWarning.tsx
index 3d7ac45..40c7d30 100644
--- a/docs/src/components/Examples/OpenAIKeyWarning.tsx
+++ b/docs/src/components/Examples/OpenAIKeyWarning.tsx
@@ -1,12 +1,11 @@
 'use client';
 
-import { Alert } from '@mantine/core';
-import { IconInfoCircle } from '@tabler/icons-react';
+import { Alert, AlertTitle } from '@mui/material';
 import { useEffect, useState } from 'react';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { checkOpenAIKeyExists } from '@/app/actions';
 
 export function OpenAIKeyWarning() {
-  const icon = <IconInfoCircle />;
   const [hasOpenAIKey, setHasOpenAIKey] = useState<boolean | null>(null);
 
   useEffect(() => {
@@ -20,7 +19,8 @@ export function OpenAIKeyWarning() {
   return (
     hasOpenAIKey !== null &&
     !hasOpenAIKey && (
-      <Alert variant="light" color="orange" title="Missing OpenAI API key on the server-side" icon={icon} mb="md">
+      <Alert severity="warning" icon={<InfoOutlinedIcon />}>
+        <AlertTitle sx={{ fontWeight: 'bold' }}>Missing OpenAI API key on the server-side</AlertTitle>
         This example is interactive, but it will not work without an <b>OpenAI API key</b>. Please run the <b>docs</b>{' '}
         project in your localhost and set <code>OPENAI_API_KEY</code> at the <code>docs/.env.local</code> file. Check
         README for more details.

From a44e8ff11e5604401c520a7212f9fe271b9910a1 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Thu, 11 Jan 2024 18:54:20 -0300
Subject: [PATCH 05/43] Use MUI on ExampleDocLink

---
 docs/src/app/examples/examples-data.tsx     | 34 ++++----
 docs/src/components/Docs/ExampleDocLink.tsx | 52 +++++++-----
 docs/src/components/Docs/ExampleLinks.tsx   | 13 +--
 docs/src/layout/HeaderNav/HeaderNav.tsx     | 88 ++++++++-------------
 4 files changed, 86 insertions(+), 101 deletions(-)

diff --git a/docs/src/app/examples/examples-data.tsx b/docs/src/app/examples/examples-data.tsx
index 12a5f6c..8b59e7c 100644
--- a/docs/src/app/examples/examples-data.tsx
+++ b/docs/src/app/examples/examples-data.tsx
@@ -1,14 +1,12 @@
-import {
-  IconBrain,
-  IconBulb,
-  IconCertificate,
-  IconChartGridDots,
-  IconCrystalBall,
-  IconGavel,
-  IconListCheck,
-  IconRocket,
-} from '@tabler/icons-react';
 import { ElementType } from 'react';
+import AccountTreeOutlinedIcon from '@mui/icons-material/AccountTreeOutlined';
+import ChecklistOutlinedIcon from '@mui/icons-material/ChecklistOutlined';
+import FiberSmartRecordOutlinedIcon from '@mui/icons-material/FiberSmartRecordOutlined';
+import GavelOutlinedIcon from '@mui/icons-material/GavelOutlined';
+import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
+import RocketLaunchOutlinedIcon from '@mui/icons-material/RocketLaunchOutlined';
+import TipsAndUpdatesOutlinedIcon from '@mui/icons-material/TipsAndUpdatesOutlined';
+import WorkspacePremiumOutlinedIcon from '@mui/icons-material/WorkspacePremiumOutlined';
 
 export interface ExampleDataType {
   icon: ElementType;
@@ -19,31 +17,31 @@ export interface ExampleDataType {
 
 export const generationLinksData: ExampleDataType[] = [
   {
-    icon: IconGavel,
+    icon: GavelOutlinedIcon,
     title: 'Forms for filling contracts',
     description: 'Generate forms for data collection from existing contracts',
     href: '/examples/generation/legal',
   },
   {
-    icon: IconListCheck,
+    icon: ChecklistOutlinedIcon,
     title: 'Checklists from content',
     description: 'Generate checklist forms from existing content',
     href: '/examples/generation/checklist',
   },
   {
-    icon: IconChartGridDots,
+    icon: AccountTreeOutlinedIcon,
     title: 'Forms from ER diagrams',
     description: 'Generate forms from Mermaid ER diagrams',
     href: '/examples/generation/entity-relationship',
   },
   {
-    icon: IconCertificate,
+    icon: WorkspacePremiumOutlinedIcon,
     title: 'Exam from topics',
     description: 'Generate exams from a list of topics or content',
     href: '/examples/generation/exam',
   },
   {
-    icon: IconRocket,
+    icon: RocketLaunchOutlinedIcon,
     title: 'Forms from any content',
     description: 'Generate forms from any content with GPT-4',
     href: '/examples/generation/generic',
@@ -52,19 +50,19 @@ export const generationLinksData: ExampleDataType[] = [
 
 export const assistantLinksData: ExampleDataType[] = [
   {
-    icon: IconBulb,
+    icon: TipsAndUpdatesOutlinedIcon,
     title: 'Enhance text Assistant',
     description: 'Enhance text with GPT-4',
     href: '/examples/assistant/single-field-assistant',
   },
   {
-    icon: IconBrain,
+    icon: PsychologyOutlinedIcon,
     title: 'Fill form Assistant',
     description: 'Autofill forms with GPT-4',
     href: '/examples/assistant/multi-field-assistant',
   },
   {
-    icon: IconCrystalBall,
+    icon: FiberSmartRecordOutlinedIcon,
     title: 'Generate then fill form',
     description: 'Autofill generated forms with GPT-4',
     href: '/examples/assistant/gen-with-assistant',
diff --git a/docs/src/components/Docs/ExampleDocLink.tsx b/docs/src/components/Docs/ExampleDocLink.tsx
index 78821e8..e251966 100644
--- a/docs/src/components/Docs/ExampleDocLink.tsx
+++ b/docs/src/components/Docs/ExampleDocLink.tsx
@@ -1,29 +1,39 @@
 'use client';
 
-import { Text, Group, rem, ThemeIcon, Stack, UnstyledButton, useMantineTheme } from '@mantine/core';
-import Link from 'next/link';
-import { ExampleDataType } from '@/app/examples/examples-data';
-
-import classes from './ExampleDocLink.module.css';
+import { Card, CardActionArea, Typography, Stack, Paper } from '@mui/material';
 
-export function ExampleDocLink({ item }: { item: ExampleDataType }) {
-  const theme = useMantineTheme();
+import { grey } from '@mui/material/colors';
+import { ExampleDataType } from '@/app/examples/examples-data';
 
+export function ExampleDocLink({ item, iconColor = grey[900] }: { item: ExampleDataType; iconColor?: string }) {
   return (
-    <UnstyledButton className={classes.exampleLink} key={item.title} component={Link} href={item.href}>
-      <Group p="xs">
-        <ThemeIcon size={34} variant="default" radius="md">
-          <item.icon style={{ width: rem(22), height: rem(22) }} color={theme.colors.blue[6]} />
-        </ThemeIcon>
-        <Stack align="flex-start" justify="flex-start" gap={rem(2)}>
-          <Text size="sm" fw={500}>
-            {item.title}
-          </Text>
-          <Text size="xs" c="dimmed">
-            {item.description}
-          </Text>
+    <Card key={item.title} elevation={0}>
+      <CardActionArea href={item.href} sx={{ padding: 1 }}>
+        <Stack direction="row" spacing={2}>
+          <Paper
+            elevation={0}
+            variant="outlined"
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: 40,
+              height: 40,
+              padding: 1,
+              borderRadius: '25%',
+            }}
+          >
+            <item.icon fontSize="medium" sx={{ color: iconColor }} />
+          </Paper>
+
+          <Stack>
+            <Typography variant="body2">{item.title}</Typography>
+            <Typography variant="caption" color={grey[600]}>
+              {item.description}
+            </Typography>
+          </Stack>
         </Stack>
-      </Group>
-    </UnstyledButton>
+      </CardActionArea>
+    </Card>
   );
 }
diff --git a/docs/src/components/Docs/ExampleLinks.tsx b/docs/src/components/Docs/ExampleLinks.tsx
index a674158..55443d9 100644
--- a/docs/src/components/Docs/ExampleLinks.tsx
+++ b/docs/src/components/Docs/ExampleLinks.tsx
@@ -1,11 +1,14 @@
-import { Stack } from '@mantine/core';
+import { Stack } from '@mui/material';
+import { blue } from '@mui/material/colors';
 import { ExampleDocLink } from './ExampleDocLink';
 import { ExampleDataType } from '@/app/examples/examples-data';
 
 export function ExampleLinks({ linksData }: { linksData: ExampleDataType[] }) {
-  return linksData.map((item) => (
-    <Stack>
-      <ExampleDocLink item={item} />
+  return (
+    <Stack spacing={2} paddingBottom={2}>
+      {linksData.map((item) => (
+        <ExampleDocLink item={item} iconColor={blue[600]} />
+      ))}
     </Stack>
-  ));
+  );
 }
diff --git a/docs/src/layout/HeaderNav/HeaderNav.tsx b/docs/src/layout/HeaderNav/HeaderNav.tsx
index 1655ed4..8c557c5 100644
--- a/docs/src/layout/HeaderNav/HeaderNav.tsx
+++ b/docs/src/layout/HeaderNav/HeaderNav.tsx
@@ -11,7 +11,6 @@ import {
   useMantineTheme,
   Burger,
   UnstyledButton,
-  ThemeIcon,
   Popover,
   Center,
   Divider,
@@ -19,31 +18,15 @@ import {
   Collapse,
   MantineTheme,
 } from '@mantine/core';
+import HelpCenterOutlinedIcon from '@mui/icons-material/HelpCenterOutlined';
 import { useClickOutside, useDisclosure } from '@mantine/hooks';
-import { IconChevronDown, IconHelpSquare } from '@tabler/icons-react';
+import { IconChevronDown } from '@tabler/icons-react';
 import { ReactNode, useState } from 'react';
 import Link from 'next/link';
+import { Stack } from '@mui/material';
 import classes from './HeaderNav.module.css';
-import { ExampleDataType, assistantLinksData, generationLinksData } from '@/app/examples/examples-data';
-
-const makeLinks = (theme: MantineTheme, links: ExampleDataType[], closeMenu: () => void) =>
-  links.map((item) => (
-    <UnstyledButton className={classes.subLink} key={item.title} component={Link} href={item.href} onClick={closeMenu}>
-      <Group wrap="nowrap" align="flex-start">
-        <ThemeIcon size={34} variant="default" radius="md">
-          <item.icon style={{ width: rem(22), height: rem(22) }} color={theme.colors.blue[6]} />
-        </ThemeIcon>
-        <div>
-          <Text size="sm" fw={500}>
-            {item.title}
-          </Text>
-          <Text size="xs" c="dimmed">
-            {item.description}
-          </Text>
-        </div>
-      </Group>
-    </UnstyledButton>
-  ));
+import { assistantLinksData, generationLinksData } from '@/app/examples/examples-data';
+import { ExampleDocLink } from '@/components/Docs/ExampleDocLink';
 
 type MenuType = 'tutorial' | 'assistant' | 'generation';
 
@@ -126,13 +109,11 @@ const HeaderWebMenu = ({
 };
 
 const HeaderMobileMenu = ({
-  closeDrawer,
   title,
   tutorialLink,
   theme,
   children,
 }: {
-  closeDrawer: () => void;
   title: string;
   tutorialLink: string;
   theme: MantineTheme;
@@ -151,21 +132,14 @@ const HeaderMobileMenu = ({
         </Center>
       </UnstyledButton>
       <Collapse in={linksOpened}>
-        <UnstyledButton className={classes.subLink} component={Link} href={tutorialLink} onClick={closeDrawer}>
-          <Group wrap="nowrap" align="flex-start">
-            <ThemeIcon size={34} variant="default" radius="md">
-              <IconHelpSquare style={{ width: rem(22), height: rem(22) }} color={theme.colors.blue[6]} />
-            </ThemeIcon>
-            <div>
-              <Text size="sm" fw={500}>
-                Tutorial
-              </Text>
-              <Text size="xs" c="dimmed">
-                Learn how to add {title} to your React app!
-              </Text>
-            </div>
-          </Group>
-        </UnstyledButton>
+        <ExampleDocLink
+          item={{
+            icon: HelpCenterOutlinedIcon,
+            title: 'Tutorial',
+            description: 'Learn how to add AI Form Toolkit to your React app!',
+            href: tutorialLink,
+          }}
+        />
         {children}
       </Collapse>
     </>
@@ -185,8 +159,6 @@ const HeaderNav = () => {
     closeDrawer();
   };
   const theme = useMantineTheme();
-  const generationLinks = makeLinks(theme, generationLinksData, closeAllMenus);
-  const assistantLinks = makeLinks(theme, assistantLinksData, closeAllMenus);
 
   return (
     <Box className={classes.header}>
@@ -212,7 +184,9 @@ const HeaderNav = () => {
             tutorialLink="/tutorial/form-generation/"
             theme={theme}
           >
-            {generationLinks}
+            {generationLinksData.map((item) => (
+              <ExampleDocLink item={item} />
+            ))}
           </HeaderWebMenu>
 
           <HeaderWebMenu
@@ -223,7 +197,9 @@ const HeaderNav = () => {
             tutorialLink="/tutorial/form-assistant/"
             theme={theme}
           >
-            {assistantLinks}
+            {assistantLinksData.map((item) => (
+              <ExampleDocLink item={item} />
+            ))}
           </HeaderWebMenu>
         </Group>
 
@@ -256,22 +232,20 @@ const HeaderNav = () => {
             Getting Started
           </Link>
 
-          <HeaderMobileMenu
-            closeDrawer={closeDrawer}
-            title="AI Form Generation"
-            tutorialLink="/tutorial/form-generation/"
-            theme={theme}
-          >
-            {generationLinks}
+          <HeaderMobileMenu title="AI Form Generation" tutorialLink="/tutorial/form-generation/" theme={theme}>
+            <Stack sx={{ maxWidth: '90%' }}>
+              {generationLinksData.map((item) => (
+                <ExampleDocLink item={item} />
+              ))}
+            </Stack>
           </HeaderMobileMenu>
 
-          <HeaderMobileMenu
-            closeDrawer={closeDrawer}
-            title="AI Form Assistant"
-            tutorialLink="/tutorial/form-assistant/"
-            theme={theme}
-          >
-            {assistantLinks}
+          <HeaderMobileMenu title="AI Form Assistant" tutorialLink="/tutorial/form-assistant/" theme={theme}>
+            <Stack sx={{ maxWidth: '90%' }}>
+              {assistantLinksData.map((item) => (
+                <ExampleDocLink item={item} />
+              ))}
+            </Stack>
           </HeaderMobileMenu>
 
           <Divider my="sm" />

From a422eb8a219849b9df7a6a2f1e3ad1f2ac2de493 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Thu, 11 Jan 2024 19:00:15 -0300
Subject: [PATCH 06/43] Remove unused component

---
 docs/src/components/Forms/SchemaForm.tsx | 39 ------------------------
 1 file changed, 39 deletions(-)
 delete mode 100644 docs/src/components/Forms/SchemaForm.tsx

diff --git a/docs/src/components/Forms/SchemaForm.tsx b/docs/src/components/Forms/SchemaForm.tsx
deleted file mode 100644
index 49e06eb..0000000
--- a/docs/src/components/Forms/SchemaForm.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import Form from '@rjsf/core';
-import { StrictRJSFSchema, RJSFSchema, FormContextType, Registry } from '@rjsf/utils';
-
-import {
-  AddButton,
-  BaseInputTemplate,
-  SubmitButton,
-  CopyButton,
-  MoveDownButton,
-  MoveUpButton,
-  RemoveButton,
-} from './templates';
-
-import './styles.css';
-
-export default class SchemaForm<
-  T = any,
-  S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any,
-> extends Form<T, S, F> {
-  getRegistry(): Registry<T, S, F> {
-    const registry = super.getRegistry();
-    return {
-      ...registry,
-      templates: {
-        ...registry.templates,
-        BaseInputTemplate: this.props.templates?.BaseInputTemplate ?? BaseInputTemplate,
-        ButtonTemplates: {
-          SubmitButton: this.props.templates?.ButtonTemplates?.SubmitButton ?? SubmitButton,
-          AddButton: this.props.templates?.ButtonTemplates?.AddButton ?? AddButton,
-          CopyButton: this.props.templates?.ButtonTemplates?.CopyButton ?? CopyButton,
-          MoveDownButton: this.props.templates?.ButtonTemplates?.MoveDownButton ?? MoveDownButton,
-          MoveUpButton: this.props.templates?.ButtonTemplates?.MoveUpButton ?? MoveUpButton,
-          RemoveButton: this.props.templates?.ButtonTemplates?.RemoveButton ?? RemoveButton,
-        },
-      },
-    };
-  }
-}

From 5a21121480596a8d4a60ea32f88acd3a600f77f7 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 10:29:55 -0300
Subject: [PATCH 07/43] Use MUI on mdx files

---
 .../app/tutorial/form-assistant/content.mdx   | 25 ++++++++-----------
 .../app/tutorial/form-generation/content.mdx  | 25 ++++++++-----------
 .../app/tutorial/getting-started/content.mdx  | 17 ++++++-------
 3 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/docs/src/app/tutorial/form-assistant/content.mdx b/docs/src/app/tutorial/form-assistant/content.mdx
index 514987a..360dd1c 100644
--- a/docs/src/app/tutorial/form-assistant/content.mdx
+++ b/docs/src/app/tutorial/form-assistant/content.mdx
@@ -1,5 +1,6 @@
-import { Button, Grid } from '@mantine/core';
-import Link from 'next/link';
+import { Button, Stack } from '@mui/material';
+import KeyboardDoubleArrowLeftOutlinedIcon from '@mui/icons-material/KeyboardDoubleArrowLeftOutlined';
+import KeyboardDoubleArrowRightOutlinedIcon from '@mui/icons-material/KeyboardDoubleArrowRightOutlined';
 import { BasicSingleFieldForm, BasicMultiFieldForm } from './components';
 
 # Form Assistant Tutorial
@@ -152,15 +153,11 @@ Check [the examples](/examples/#form-assistant-examples) for some ideas.
 
 Use the [advanced settings](/reference/settings/) to override prompts, AI models, etc.
 
-<Grid>
-  <Grid.Col span={6}>
-    <Button fullWidth variant="outline" component={Link} href="/tutorial/form-generation/">
-      « Form Generation
-    </Button>
-  </Grid.Col>
-  <Grid.Col span={6}>
-    <Button fullWidth variant="outline" component={Link} href="/examples/">
-      All Examples »
-    </Button>
-  </Grid.Col>
-</Grid>
+<Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+  <Button variant="outlined" startIcon={<KeyboardDoubleArrowLeftOutlinedIcon />} href="/tutorial/form-generation/">
+    <span>Form Generation</span>
+  </Button>
+  <Button variant="outlined" endIcon={<KeyboardDoubleArrowRightOutlinedIcon />} href="/examples/">
+    <span>All Examples</span>
+  </Button>
+</Stack>
diff --git a/docs/src/app/tutorial/form-generation/content.mdx b/docs/src/app/tutorial/form-generation/content.mdx
index 83a8566..aed2ade 100644
--- a/docs/src/app/tutorial/form-generation/content.mdx
+++ b/docs/src/app/tutorial/form-generation/content.mdx
@@ -1,5 +1,6 @@
-import { Button, Grid } from '@mantine/core';
-import Link from 'next/link';
+import { Button, Stack } from '@mui/material';
+import KeyboardDoubleArrowLeftOutlinedIcon from '@mui/icons-material/KeyboardDoubleArrowLeftOutlined';
+import KeyboardDoubleArrowRightOutlinedIcon from '@mui/icons-material/KeyboardDoubleArrowRightOutlined';
 import { BasicInputForm, BasicGeneratedForm, BasicGeneratedSchemas } from './components';
 
 # Form Generation Tutorial
@@ -102,15 +103,11 @@ Check [the examples](/examples/#form-generation-examples) for some ideas.
 
 Use the [advanced settings](/reference/settings/) to override prompts, AI models, etc.
 
-<Grid>
-  <Grid.Col span={6}>
-    <Button fullWidth variant="outline" component={Link} href="/tutorial/getting-started/">
-      « Getting Started
-    </Button>
-  </Grid.Col>
-  <Grid.Col span={6}>
-    <Button fullWidth variant="outline" component={Link} href="/tutorial/form-assistant/">
-      Form Assistant »
-    </Button>
-  </Grid.Col>
-</Grid>
+<Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+  <Button variant="outlined" startIcon={<KeyboardDoubleArrowLeftOutlinedIcon />} href="/tutorial/getting-started/">
+    <span>Getting Started</span>
+  </Button>
+  <Button variant="outlined" endIcon={<KeyboardDoubleArrowRightOutlinedIcon />} href="/tutorial/form-assistant/">
+    <span>Form Assistant</span>
+  </Button>
+</Stack>
diff --git a/docs/src/app/tutorial/getting-started/content.mdx b/docs/src/app/tutorial/getting-started/content.mdx
index 594e626..8e50ece 100644
--- a/docs/src/app/tutorial/getting-started/content.mdx
+++ b/docs/src/app/tutorial/getting-started/content.mdx
@@ -1,5 +1,5 @@
-import { Button, Grid } from '@mantine/core';
-import Link from 'next/link';
+import { Box, Button } from '@mui/material';
+import KeyboardDoubleArrowRightOutlinedIcon from '@mui/icons-material/KeyboardDoubleArrowRightOutlined';
 
 # Getting Started
 
@@ -55,11 +55,8 @@ Advanced settings to override prompts, AI models, etc. [are available too](/refe
 - [Form Generation](/tutorial/form-generation/) - generate forms from textual data
 - [Form Assistant](/tutorial/form-assistant/) - add autofill capabilities to forms
 
-<Grid>
-  <Grid.Col span={6}></Grid.Col>
-  <Grid.Col span={6}>
-    <Button fullWidth variant="outline" component={Link} href="/tutorial/form-generation/">
-      Form Generation »
-    </Button>
-  </Grid.Col>
-</Grid>
+<Box display="flex" justifyContent="flex-end">
+  <Button variant="outlined" endIcon={<KeyboardDoubleArrowRightOutlinedIcon />} href="/tutorial/form-generation/">
+    <span>Form Generation</span>
+  </Button>
+</Box>

From 5e2ea48b503865f18d6165cb39a9be5451c920e1 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 11:18:34 -0300
Subject: [PATCH 08/43] Add @mui/lab to the project

---
 docs/package-lock.json | 49 ++++++++++++++++++++++++++++++++++++++++++
 docs/package.json      |  1 +
 2 files changed, 50 insertions(+)

diff --git a/docs/package-lock.json b/docs/package-lock.json
index 1efd9bf..7c99f9e 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -19,6 +19,7 @@
         "@mantine/hooks": "^7.3.2",
         "@mdx-js/react": "^3.0.0",
         "@mui/icons-material": "^5.15.4",
+        "@mui/lab": "^5.0.0-alpha.160",
         "@mui/material": "^5.15.4",
         "@next/bundle-analyzer": "^14.0.4",
         "@next/mdx": "^14.0.4",
@@ -971,6 +972,54 @@
         }
       }
     },
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.160",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.160.tgz",
+      "integrity": "sha512-hMCOyjfpCHrb/ELs45baCHXICaZf3ygKY0R/phBKxxCxAX6V6Y3O9hxu2fS/Uw3LflZqUuv9TFkwVEWzq3OUkQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.7",
+        "@mui/base": "5.0.0-beta.31",
+        "@mui/system": "^5.15.4",
+        "@mui/types": "^7.2.13",
+        "@mui/utils": "^5.15.4",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": ">=5.10.11",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/lab/node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.15.4",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.4.tgz",
diff --git a/docs/package.json b/docs/package.json
index d96232b..2dab69e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,6 +20,7 @@
     "@mantine/hooks": "^7.3.2",
     "@mdx-js/react": "^3.0.0",
     "@mui/icons-material": "^5.15.4",
+    "@mui/lab": "^5.0.0-alpha.160",
     "@mui/material": "^5.15.4",
     "@next/bundle-analyzer": "^14.0.4",
     "@next/mdx": "^14.0.4",

From 5ddb75ce46ae46df3401cca87c44794e050b5de7 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 11:32:25 -0300
Subject: [PATCH 09/43] Use MUI on single field assistant page

---
 .../assistant/single-field-assistant/page.tsx | 106 ++++++++++--------
 1 file changed, 61 insertions(+), 45 deletions(-)

diff --git a/docs/src/app/examples/assistant/single-field-assistant/page.tsx b/docs/src/app/examples/assistant/single-field-assistant/page.tsx
index 17ffd92..f54b1ab 100644
--- a/docs/src/app/examples/assistant/single-field-assistant/page.tsx
+++ b/docs/src/app/examples/assistant/single-field-assistant/page.tsx
@@ -1,63 +1,79 @@
 'use client';
 
-import { Button, Group, Loader, Textarea, Title, Text, Code } from '@mantine/core';
-import { useForm } from '@mantine/form';
-import { IconBulb } from '@tabler/icons-react';
-import { useState } from 'react';
+import { ChangeEvent, FormEvent, useState } from 'react';
+import { Button, TextField, Typography, Stack } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import TipsAndUpdatesOutlinedIcon from '@mui/icons-material/TipsAndUpdatesOutlined';
 
 import { useFormAssistant } from '@ai-form-toolkit/client';
 
 export default function SingleFieldFormAssistant() {
-  const form = useForm({
-    initialValues: {
-      recipe: 'Carrot cake recipe\n\nIngredients:\n\nDirections:\n\n',
-    },
+  const [formValues, setFormValues] = useState<Record<string, string>>({
+    recipe: 'Carrot cake recipe\n\nIngredients:\n\nDirections:\n\n',
   });
   const { fillSingleField } = useFormAssistant({
     formTitle: 'Create Recipe',
-    formGetValues: () => form.values,
-    formSetValues: form.setValues,
+    formGetValues: () => formValues,
+    formSetValues: setFormValues,
   });
   const [isLoading, setIsLoading] = useState(false);
 
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setFormValues({
+      ...formValues,
+      [event.target.name]: event.target.value,
+    });
+  };
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    console.log(formValues);
+  };
+
   return (
-    <>
-      <Title mb="md" order={2}>
-        GPT-4 form assistant (single field)
-      </Title>
-      <Text mb="xs">
-        Code at <Code>docs/src/app/examples/assistant/single-field-assistant/page.tsx</Code>
-      </Text>
-      <Text mb="md">
-        This form uses the <Code>useFormAssistant</Code> hook to enable the GPT-4 autofill functionality. Click on the
+    <Stack spacing={2}>
+      <Typography variant="h4">GPT-4 form assistant (single field)</Typography>
+      <Typography variant="body1">
+        Code at <code>docs/src/app/examples/assistant/single-field-assistant/page.tsx</code>
+      </Typography>
+      <Typography variant="body1">
+        This form uses the <code>useFormAssistant</code> hook to enable the GPT-4 autofill functionality. Click on the
         button below to test it!
-      </Text>
-      <form onSubmit={form.onSubmit((values) => console.log(values))}>
-        <Textarea
-          withAsterisk
-          label="Recipe"
-          placeholder="Write a Recipe here"
-          autosize
-          minRows={10}
-          {...form.getInputProps('recipe')}
-          disabled={isLoading}
-        />
-
-        <Group justify="flex-end" mt="md">
-          <Button
-            variant="default"
-            leftSection={isLoading ? <Loader size={14} /> : <IconBulb size={14} />}
+      </Typography>
+
+      <form onSubmit={handleSubmit}>
+        <Stack spacing={2}>
+          <TextField
+            required
+            multiline
+            fullWidth
+            label="Recipe"
+            placeholder="Write a Recipe here"
+            minRows={10}
             disabled={isLoading}
-            onClick={() => {
-              setIsLoading(true);
-              fillSingleField('recipe').finally(() => setIsLoading(false));
-            }}
-          >
-            Autofill with GPT-4
-          </Button>
-          <Button type="submit">Submit</Button>
-        </Group>
+            value={formValues.recipe}
+            onChange={handleInputChange}
+          />
+
+          <Stack direction="row" spacing={2} alignSelf="flex-end">
+            <LoadingButton
+              variant="outlined"
+              loadingPosition="start"
+              loading={isLoading}
+              startIcon={<TipsAndUpdatesOutlinedIcon />}
+              onClick={() => {
+                setIsLoading(true);
+                fillSingleField('recipe').finally(() => setIsLoading(false));
+              }}
+            >
+              Autofill with GPT-4
+            </LoadingButton>
+            <Button type="submit" variant="contained">
+              Submit
+            </Button>
+          </Stack>
+        </Stack>
       </form>
-    </>
+    </Stack>
   );
 }

From b4c81b4758f960f035df672c6865b0f6787c6dbc Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 12:36:35 -0300
Subject: [PATCH 10/43] Use MUI on multi field assistant page

---
 .../assistant/multi-field-assistant/page.tsx  | 232 ++++++++++--------
 1 file changed, 123 insertions(+), 109 deletions(-)

diff --git a/docs/src/app/examples/assistant/multi-field-assistant/page.tsx b/docs/src/app/examples/assistant/multi-field-assistant/page.tsx
index 754a1ba..4568068 100644
--- a/docs/src/app/examples/assistant/multi-field-assistant/page.tsx
+++ b/docs/src/app/examples/assistant/multi-field-assistant/page.tsx
@@ -1,21 +1,10 @@
 'use client';
 
-import {
-  Autocomplete,
-  Button,
-  Group,
-  Loader,
-  TextInput,
-  Textarea,
-  Title,
-  Text,
-  Code,
-  ActionIcon,
-  List,
-} from '@mantine/core';
-import { IconBrain, IconWand } from '@tabler/icons-react';
-import { useForm } from '@mantine/form';
-import { useState } from 'react';
+import { ChangeEvent, FormEvent, useState } from 'react';
+import { Autocomplete, Box, Button, CircularProgress, IconButton, TextField, Typography, Stack } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined';
+import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
 
 import { useFormAssistant } from '@ai-form-toolkit/client';
 
@@ -23,22 +12,17 @@ const CATEGORY_CHOICES = ['Bug', 'Feature', 'Improvement'];
 const PRIORITY_CHOICES = ['High', 'Medium', 'Low'];
 
 export default function MultiFieldFormAssistant() {
-  const form = useForm({
-    initialValues: {
-      title: 'Fix N+1s in Django codebase',
-      description: 'Use prefetch...',
-      category: '',
-      priority: '',
-    },
-    validate: {
-      category: (value) => (CATEGORY_CHOICES.includes(value) ? null : 'Pick a valid category'),
-      priority: (value) => (PRIORITY_CHOICES.includes(value) ? null : 'Pick a valid priority'),
-    },
+  const [formValues, setFormValues] = useState<Record<string, string>>({
+    title: 'Fix N+1s in Django codebase',
+    description: 'Use prefetch...',
+    category: '',
+    priority: '',
   });
+
   const { fillSingleField, fillFields } = useFormAssistant({
     formTitle: 'Create Issue',
-    formGetValues: () => form.values,
-    formSetValues: form.setValues,
+    formGetValues: () => formValues,
+    formSetValues: setFormValues,
     fieldChoices: {
       category: CATEGORY_CHOICES,
       priority: PRIORITY_CHOICES,
@@ -47,92 +31,122 @@ export default function MultiFieldFormAssistant() {
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingDescription, setIsLoadingDescription] = useState(false);
 
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setFormValues({
+      ...formValues,
+      [event.target.name]: event.target.value,
+    });
+  };
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    console.log(formValues);
+  };
+
   return (
-    <>
-      <Title mb="md" order={2}>
-        GPT-4 form assistant (multi field)
-      </Title>
-      <Text mb="xs">
-        Code at <Code>docs/src/app/examples/assistant/multi-field-assistant/page.tsx</Code>
-      </Text>
-      <Text mb="xs">
-        This form uses the <Code>useFormAssistant</Code> hook to enable the GPT-4 autofill functionality in two ways:
-      </Text>
-      <List type="ordered" mb="xs">
-        <List.Item>
+    <Stack spacing={2}>
+      <Typography variant="h4">GPT-4 form assistant (multi field)</Typography>
+      <Typography variant="body1">
+        Code at <code>docs/src/app/examples/assistant/multi-field-assistant/page.tsx</code>
+      </Typography>
+      <Typography variant="body1">
+        This form uses the <code>useFormAssistant</code> hook to enable the GPT-4 autofill functionality in two ways:
+      </Typography>
+
+      <Box component="ol">
+        <Typography component="li" variant="body1">
           The &quot;magic wand&quot; button on description field can enhance whatever text you put there.
-        </List.Item>
-        <List.Item>
+        </Typography>
+        <Typography component="li" variant="body1">
           The &quot;Autofill missing with GPT-4&quot; button will fill all the missing fields in the form.
-        </List.Item>
-      </List>
-      <form onSubmit={form.onSubmit((values) => console.log(values))}>
-        <TextInput
-          withAsterisk
-          label="Title"
-          placeholder="Write the title here"
-          {...form.getInputProps('title')}
-          disabled={isLoading}
-          mb="xs"
-        />
-        <Textarea
-          withAsterisk
-          label="Description"
-          placeholder="Write the description here"
-          autosize
-          minRows={4}
-          rightSection={
-            <ActionIcon
-              variant="outline"
-              color="grey"
-              aria-label="Enhance"
-              loading={isLoadingDescription}
-              onClick={() => {
-                setIsLoadingDescription(true);
-                fillSingleField('description').finally(() => setIsLoadingDescription(false));
-              }}
-            >
-              <IconWand style={{ width: '70%', height: '70%' }} stroke={1.5} />
-            </ActionIcon>
-          }
-          {...form.getInputProps('description')}
-          disabled={isLoading}
-          mb="xs"
-        />
-        <Autocomplete
-          withAsterisk
-          label="Category"
-          placeholder="Pick a category"
-          data={CATEGORY_CHOICES}
-          {...form.getInputProps('category')}
-          disabled={isLoading}
-          mb="xs"
-        />
-        <Autocomplete
-          withAsterisk
-          label="Priority"
-          placeholder="Pick a priority"
-          data={PRIORITY_CHOICES}
-          {...form.getInputProps('priority')}
-          disabled={isLoading}
-          mb="xs"
-        />
+        </Typography>
+      </Box>
 
-        <Group justify="flex-end" mt="md">
-          <Button
-            variant="default"
-            leftSection={isLoading ? <Loader size={14} /> : <IconBrain size={14} />}
+      <form onSubmit={handleSubmit}>
+        <Stack spacing={2}>
+          <TextField
+            required
+            fullWidth
+            label="Title"
+            placeholder="Write the title here"
             disabled={isLoading}
-            onClick={() => {
-              setIsLoading(true);
-              fillFields().finally(() => setIsLoading(false));
+            value={formValues.title}
+            onChange={handleInputChange}
+          />
+          <TextField
+            required
+            multiline
+            fullWidth
+            label="Description"
+            placeholder="Write the description here"
+            minRows={4}
+            value={formValues.description}
+            onChange={handleInputChange}
+            disabled={isLoading}
+            InputProps={{
+              endAdornment: (
+                <IconButton
+                  aria-label="Enhance"
+                  size="large"
+                  disabled={isLoadingDescription}
+                  onClick={() => {
+                    setIsLoadingDescription(true);
+                    fillSingleField('description').finally(() => setIsLoadingDescription(false));
+                  }}
+                >
+                  {isLoadingDescription ? <CircularProgress size={20} color="inherit" /> : <AutoFixHighOutlinedIcon />}
+                </IconButton>
+              ),
             }}
-          >
-            Autofill missing with GPT-4
-          </Button>
-          <Button type="submit">Submit</Button>
-        </Group>
+          />
+          <Autocomplete
+            options={CATEGORY_CHOICES}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                required
+                label="Category"
+                placeholder="Pick a category"
+                value={formValues.category}
+                onChange={handleInputChange}
+                disabled={isLoading}
+              />
+            )}
+          />
+          <Autocomplete
+            options={PRIORITY_CHOICES}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                required
+                label="Priority"
+                placeholder="Pick a priority"
+                value={formValues.priority}
+                onChange={handleInputChange}
+                disabled={isLoading}
+              />
+            )}
+          />
+
+          <Stack direction="row" spacing={2} alignSelf="flex-end">
+            <LoadingButton
+              variant="outlined"
+              loadingPosition="start"
+              loading={isLoading}
+              startIcon={<PsychologyOutlinedIcon />}
+              onClick={() => {
+                setIsLoading(true);
+                fillFields().finally(() => setIsLoading(false));
+              }}
+            >
+              Autofill missing with GPT-4
+            </LoadingButton>
+            <Button type="submit" variant="contained">
+              Submit
+            </Button>
+          </Stack>
+        </Stack>
       </form>
-    </>
+    </Stack>
   );
 }

From c56ebe64ec8ed228ccd30f78dc0b4388c3ea60e7 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 14:00:22 -0300
Subject: [PATCH 11/43] Use MUI on gen with assistant page

---
 .../assistant/gen-with-assistant/page.tsx     | 90 +++++++++----------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/docs/src/app/examples/assistant/gen-with-assistant/page.tsx b/docs/src/app/examples/assistant/gen-with-assistant/page.tsx
index 3cfbab6..bf62769 100644
--- a/docs/src/app/examples/assistant/gen-with-assistant/page.tsx
+++ b/docs/src/app/examples/assistant/gen-with-assistant/page.tsx
@@ -1,9 +1,11 @@
 'use client';
 
-import { Text, Box, Button, Textarea, Title, LoadingOverlay, Loader, Center, Group, Code } from '@mantine/core';
 import { useState } from 'react';
-import { IconBrain, IconForms } from '@tabler/icons-react';
 import dedent from 'dedent';
+import { Backdrop, CircularProgress, TextField, Typography, Stack } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
+import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
 
 import { useGeneratedFormSchema, useFormAssistant } from '@ai-form-toolkit/client';
 import SchemaFormDemo from '@/components/Forms/SchemaFormDemo';
@@ -56,74 +58,72 @@ export default function ExamSchemaGenWithAssistantExample() {
   };
 
   return (
-    <>
-      <Box pos="relative" mb="md">
-        <LoadingOverlay
-          visible={isLoading}
-          loaderProps={{
-            children: (
-              <>
-                <Center>
-                  <Loader size={16} mr={8} />
-                  <Text inherit>Loading (may take up to 2 minutes)...</Text>
-                </Center>
-              </>
-            ),
-          }}
-        />
-        <Title order={2} mb="xs">
-          Generate and then autofill form:
-        </Title>
-        <Text mb="xs">
-          Code at <Code>docs/src/app/examples/assistant/gen-with-assistant/page.tsx</Code>
-        </Text>
-        <Text mb="xs">
-          This form combines <Code>useGeneratedFormSchema</Code> with <Code>useFormAssistant</Code> hooks to generate a
+    <Stack spacing={2}>
+      <Stack spacing={2}>
+        <Backdrop sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }} open={isLoading}>
+          <Stack direction="row" spacing={1}>
+            <CircularProgress color="inherit" size={20} />
+            <Typography variant="body1">Loading (may take up to 2 minutes)...</Typography>
+          </Stack>
+        </Backdrop>
+
+        <Typography variant="h4">Generate and then autofill form:</Typography>
+        <Typography variant="body1">
+          Code at <code>docs/src/app/examples/assistant/gen-with-assistant/page.tsx</code>
+        </Typography>
+        <Typography variant="body1">
+          This form combines <code>useGeneratedFormSchema</code> with <code>useFormAssistant</code> hooks to generate a
           form from content + prompt, and then support GPT-4 autofill on it.
-        </Text>
-        <Textarea
+        </Typography>
+
+        <TextField
+          multiline
+          fullWidth
           label="Full content text:"
           placeholder="Put text or HTML content here..."
-          autosize
           minRows={6}
           value={content}
           onChange={(event) => setContent(event.currentTarget.value)}
-          mb="md"
         />
-        <Textarea
+        <TextField
+          multiline
+          fullWidth
           label="Prompt:"
           placeholder={`e.g. ${defaultPrompt}`}
           value={prompt}
           onChange={(event) => setPrompt(event.currentTarget.value)}
-          mb="md"
         />
-      </Box>
-      <Group justify="flex-end" mt="md" mb="md">
+      </Stack>
+
+      <Stack direction="row" spacing={2} alignSelf="flex-end">
         {fieldToFill && (
-          <Button
-            variant="default"
-            leftSection={isLoading ? <Loader size={14} /> : <IconBrain size={14} />}
-            disabled={isLoading}
+          <LoadingButton
+            variant="outlined"
+            loadingPosition="start"
+            loading={isLoading}
+            startIcon={<PsychologyOutlinedIcon />}
             onClick={() => {
               setIsLoading(true);
               fillSingleField(fieldToFill).finally(() => setIsLoading(false));
             }}
           >
             Autofill missing with GPT-4
-          </Button>
+          </LoadingButton>
         )}
-        <Button
-          leftSection={isLoading ? <Loader color="blue" size={14} /> : <IconForms size={14} />}
-          variant="outline"
+        <LoadingButton
+          variant="outlined"
+          loadingPosition="start"
+          loading={isLoading}
+          startIcon={<ListAltOutlinedIcon />}
           onClick={() => {
             setIsLoading(true);
             generateFormSchema(content, prompt).finally(() => setIsLoading(false));
           }}
-          disabled={isLoading}
         >
           Generate Form
-        </Button>
-      </Group>
+        </LoadingButton>
+      </Stack>
+
       <SchemaFormDemo
         formSchema={formSchema}
         uiSchema={uiSchema}
@@ -133,6 +133,6 @@ export default function ExamSchemaGenWithAssistantExample() {
         // @ts-ignore
         onChange={(e) => setFormValues(e.formValues)}
       />
-    </>
+    </Stack>
   );
 }

From d0ddb39499d5b74764c489bd79c3538a4ec9ac00 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 14:46:58 -0300
Subject: [PATCH 12/43] Use MUI on gen legal page

---
 .../app/examples/generation/legal/page.tsx    | 79 +++++++++----------
 1 file changed, 38 insertions(+), 41 deletions(-)

diff --git a/docs/src/app/examples/generation/legal/page.tsx b/docs/src/app/examples/generation/legal/page.tsx
index 4194723..fa9fa95 100644
--- a/docs/src/app/examples/generation/legal/page.tsx
+++ b/docs/src/app/examples/generation/legal/page.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { Text, Box, Button, Textarea, Title, Anchor, LoadingOverlay, Loader, Center, Code } from '@mantine/core';
-import { RJSFSchema } from '@rjsf/utils';
-import { IChangeEvent } from '@rjsf/core';
 import { useState } from 'react';
-import { IconForms } from '@tabler/icons-react';
+import { Backdrop, TextField, Typography, Stack, CircularProgress, Link } from '@mui/material';
+import { IChangeEvent } from '@rjsf/core';
+import { LoadingButton } from '@mui/lab';
+import { RJSFSchema } from '@rjsf/utils';
+import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
 
 import { useGeneratedFormSchema } from '@ai-form-toolkit/client';
 import SchemaFormDemo from '@/components/Forms/SchemaFormDemo';
@@ -24,66 +25,62 @@ export default function LegalSchemaGenExample() {
   };
 
   return (
-    <>
-      <Box pos="relative" mb="md">
-        <LoadingOverlay
-          visible={isLoading}
-          loaderProps={{
-            children: (
-              <>
-                <Center>
-                  <Loader size={16} mr={8} />
-                  <Text inherit>Loading (may take up to 2 minutes)...</Text>
-                </Center>
-              </>
-            ),
-          }}
-        />
-        <Title order={2} mb="md">
-          Generate forms for data collection from existing contracts / agreements:
-        </Title>
-        <Text mb="xs">
-          Code at <Code>docs/src/app/examples/generation/legal/page.tsx</Code>
-        </Text>
-        <Textarea
+    <Stack spacing={2}>
+      <Stack spacing={2}>
+        <Backdrop sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }} open={isLoading}>
+          <Stack direction="row" spacing={1}>
+            <CircularProgress color="inherit" size={20} />
+            <Typography variant="body1">Loading (may take up to 2 minutes)...</Typography>
+          </Stack>
+        </Backdrop>
+
+        <Typography variant="h4">Generate forms for data collection from existing contracts / agreements:</Typography>
+        <Typography variant="body1">
+          Code at <code>docs/src/app/examples/generation/legal/page.tsx</code>
+        </Typography>
+
+        <TextField
+          multiline
+          fullWidth
           label="Full contract text:"
           placeholder="Put text or HTML content here..."
-          description={
+          helperText={
             <>
               If you don&apos;t have one, copy this{' '}
-              <Anchor inherit href="https://www.vertex42.com/WordTemplates/lease-agreement-template.html">
+              <Link href="https://www.vertex42.com/WordTemplates/lease-agreement-template.html" target="_blank">
                 doc
-              </Anchor>{' '}
+              </Link>{' '}
               and paste below
             </>
           }
-          autosize
           minRows={6}
           value={content}
           onChange={(event) => setContent(event.currentTarget.value)}
-          mb="md"
         />
-        <Textarea
+        <TextField
+          multiline
+          fullWidth
           label="Prompt:"
           placeholder={`e.g. ${defaultPrompt}`}
           value={prompt}
           onChange={(event) => setPrompt(event.currentTarget.value)}
-          mb="md"
         />
-      </Box>
-      <Button
-        leftSection={isLoading ? <Loader color="blue" size={14} /> : <IconForms size={14} />}
-        variant="outline"
+      </Stack>
+
+      <LoadingButton
+        variant="outlined"
+        loadingPosition="start"
+        loading={isLoading}
+        startIcon={<ListAltOutlinedIcon />}
         onClick={() => {
           setIsLoading(true);
           generateFormSchema(content, prompt).finally(() => setIsLoading(false));
         }}
-        disabled={isLoading}
-        mb="md"
+        sx={{ alignSelf: 'flex-end' }}
       >
         Generate Form
-      </Button>
+      </LoadingButton>
       <SchemaFormDemo formSchema={formSchema} uiSchema={uiSchema} onSubmit={onSubmit} />
-    </>
+    </Stack>
   );
 }

From c0804899c2de5c7ac7a08d6480e184c545fee305 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 15:04:03 -0300
Subject: [PATCH 13/43] Create LoadingBackdrop component

---
 .../assistant/gen-with-assistant/page.tsx      | 11 +++--------
 .../assistant/gen-with-assistant/styles.css    |  8 --------
 .../src/app/examples/generation/legal/page.tsx | 11 +++--------
 .../components/Examples/LoadingBackdrop.tsx    | 18 ++++++++++++++++++
 4 files changed, 24 insertions(+), 24 deletions(-)
 delete mode 100644 docs/src/app/examples/assistant/gen-with-assistant/styles.css
 create mode 100644 docs/src/components/Examples/LoadingBackdrop.tsx

diff --git a/docs/src/app/examples/assistant/gen-with-assistant/page.tsx b/docs/src/app/examples/assistant/gen-with-assistant/page.tsx
index bf62769..c8a0f7b 100644
--- a/docs/src/app/examples/assistant/gen-with-assistant/page.tsx
+++ b/docs/src/app/examples/assistant/gen-with-assistant/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import dedent from 'dedent';
-import { Backdrop, CircularProgress, TextField, Typography, Stack } from '@mui/material';
+import { TextField, Typography, Stack } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
 import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
@@ -10,7 +10,7 @@ import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
 import { useGeneratedFormSchema, useFormAssistant } from '@ai-form-toolkit/client';
 import SchemaFormDemo from '@/components/Forms/SchemaFormDemo';
 
-import './styles.css';
+import { LoadingBackdrop } from '@/components/Examples/LoadingBackdrop';
 
 export default function ExamSchemaGenWithAssistantExample() {
   const defaultContent = dedent`
@@ -60,12 +60,7 @@ export default function ExamSchemaGenWithAssistantExample() {
   return (
     <Stack spacing={2}>
       <Stack spacing={2}>
-        <Backdrop sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }} open={isLoading}>
-          <Stack direction="row" spacing={1}>
-            <CircularProgress color="inherit" size={20} />
-            <Typography variant="body1">Loading (may take up to 2 minutes)...</Typography>
-          </Stack>
-        </Backdrop>
+        <LoadingBackdrop open={isLoading} />
 
         <Typography variant="h4">Generate and then autofill form:</Typography>
         <Typography variant="body1">
diff --git a/docs/src/app/examples/assistant/gen-with-assistant/styles.css b/docs/src/app/examples/assistant/gen-with-assistant/styles.css
deleted file mode 100644
index b11dbf8..0000000
--- a/docs/src/app/examples/assistant/gen-with-assistant/styles.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.control-label {
-  font-weight: bold;
-  display: block;
-}
-
-.field-radio-group {
-  margin-bottom: 1em;
-}
diff --git a/docs/src/app/examples/generation/legal/page.tsx b/docs/src/app/examples/generation/legal/page.tsx
index fa9fa95..5831afe 100644
--- a/docs/src/app/examples/generation/legal/page.tsx
+++ b/docs/src/app/examples/generation/legal/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { Backdrop, TextField, Typography, Stack, CircularProgress, Link } from '@mui/material';
+import { TextField, Typography, Stack, Link } from '@mui/material';
 import { IChangeEvent } from '@rjsf/core';
 import { LoadingButton } from '@mui/lab';
 import { RJSFSchema } from '@rjsf/utils';
@@ -10,7 +10,7 @@ import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
 import { useGeneratedFormSchema } from '@ai-form-toolkit/client';
 import SchemaFormDemo from '@/components/Forms/SchemaFormDemo';
 
-import '../styles.css';
+import { LoadingBackdrop } from '@/components/Examples/LoadingBackdrop';
 
 export default function LegalSchemaGenExample() {
   const defaultPrompt = 'Generate a form for filling the missing fields in this contract';
@@ -27,12 +27,7 @@ export default function LegalSchemaGenExample() {
   return (
     <Stack spacing={2}>
       <Stack spacing={2}>
-        <Backdrop sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }} open={isLoading}>
-          <Stack direction="row" spacing={1}>
-            <CircularProgress color="inherit" size={20} />
-            <Typography variant="body1">Loading (may take up to 2 minutes)...</Typography>
-          </Stack>
-        </Backdrop>
+        <LoadingBackdrop open={isLoading} />
 
         <Typography variant="h4">Generate forms for data collection from existing contracts / agreements:</Typography>
         <Typography variant="body1">
diff --git a/docs/src/components/Examples/LoadingBackdrop.tsx b/docs/src/components/Examples/LoadingBackdrop.tsx
new file mode 100644
index 0000000..721aa24
--- /dev/null
+++ b/docs/src/components/Examples/LoadingBackdrop.tsx
@@ -0,0 +1,18 @@
+import { Backdrop, CircularProgress, Stack, Typography } from '@mui/material';
+
+export function LoadingBackdrop({
+  open,
+  message = 'Loading (may take up to 2 minutes)...',
+}: {
+  open: boolean;
+  message?: string;
+}) {
+  return (
+    <Backdrop sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }} open={open}>
+      <Stack direction="row" spacing={1}>
+        <CircularProgress color="inherit" size={20} />
+        {message && <Typography variant="body1">{message}</Typography>}
+      </Stack>
+    </Backdrop>
+  );
+}

From f619075884f30528d4e9246e5a387c0d51bc752b Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 15:11:13 -0300
Subject: [PATCH 14/43] Update export

---
 docs/src/app/examples/assistant/gen-with-assistant/page.tsx | 3 +--
 docs/src/app/examples/generation/legal/page.tsx             | 3 +--
 docs/src/components/Examples/LoadingBackdrop.tsx            | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/docs/src/app/examples/assistant/gen-with-assistant/page.tsx b/docs/src/app/examples/assistant/gen-with-assistant/page.tsx
index c8a0f7b..6584d28 100644
--- a/docs/src/app/examples/assistant/gen-with-assistant/page.tsx
+++ b/docs/src/app/examples/assistant/gen-with-assistant/page.tsx
@@ -8,10 +8,9 @@ import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
 import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
 
 import { useGeneratedFormSchema, useFormAssistant } from '@ai-form-toolkit/client';
+import LoadingBackdrop from '@/components/Examples/LoadingBackdrop';
 import SchemaFormDemo from '@/components/Forms/SchemaFormDemo';
 
-import { LoadingBackdrop } from '@/components/Examples/LoadingBackdrop';
-
 export default function ExamSchemaGenWithAssistantExample() {
   const defaultContent = dedent`
   Technical Requirements for the job:
diff --git a/docs/src/app/examples/generation/legal/page.tsx b/docs/src/app/examples/generation/legal/page.tsx
index 5831afe..66d621d 100644
--- a/docs/src/app/examples/generation/legal/page.tsx
+++ b/docs/src/app/examples/generation/legal/page.tsx
@@ -8,10 +8,9 @@ import { RJSFSchema } from '@rjsf/utils';
 import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
 
 import { useGeneratedFormSchema } from '@ai-form-toolkit/client';
+import LoadingBackdrop from '@/components/Examples/LoadingBackdrop';
 import SchemaFormDemo from '@/components/Forms/SchemaFormDemo';
 
-import { LoadingBackdrop } from '@/components/Examples/LoadingBackdrop';
-
 export default function LegalSchemaGenExample() {
   const defaultPrompt = 'Generate a form for filling the missing fields in this contract';
 
diff --git a/docs/src/components/Examples/LoadingBackdrop.tsx b/docs/src/components/Examples/LoadingBackdrop.tsx
index 721aa24..e6fa13e 100644
--- a/docs/src/components/Examples/LoadingBackdrop.tsx
+++ b/docs/src/components/Examples/LoadingBackdrop.tsx
@@ -1,6 +1,6 @@
 import { Backdrop, CircularProgress, Stack, Typography } from '@mui/material';
 
-export function LoadingBackdrop({
+export default function LoadingBackdrop({
   open,
   message = 'Loading (may take up to 2 minutes)...',
 }: {

From 6dd5cfb2504dd162ba905ace3c27fbd87ab593a3 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 15:11:54 -0300
Subject: [PATCH 15/43] Use MUI on gen checklist page

---
 .../examples/generation/checklist/page.tsx    | 79 ++++++++-----------
 1 file changed, 35 insertions(+), 44 deletions(-)

diff --git a/docs/src/app/examples/generation/checklist/page.tsx b/docs/src/app/examples/generation/checklist/page.tsx
index 64da349..e8a8e70 100644
--- a/docs/src/app/examples/generation/checklist/page.tsx
+++ b/docs/src/app/examples/generation/checklist/page.tsx
@@ -1,16 +1,16 @@
 'use client';
 
-import { Text, Box, Button, Textarea, Title, LoadingOverlay, Loader, Center, Anchor, Code } from '@mantine/core';
-import { RJSFSchema } from '@rjsf/utils';
-import { IChangeEvent } from '@rjsf/core';
 import { useState } from 'react';
-import { IconForms } from '@tabler/icons-react';
+import { IChangeEvent } from '@rjsf/core';
+import { Link, Stack, TextField, Typography } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import { RJSFSchema } from '@rjsf/utils';
+import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
 
 import { useGeneratedFormSchema } from '@ai-form-toolkit/client';
+import LoadingBackdrop from '@/components/Examples/LoadingBackdrop';
 import SchemaFormDemo from '@/components/Forms/SchemaFormDemo';
 
-import '../styles.css';
-
 export default function ChecklistSchemaGenExample() {
   const defaultPrompt = 'Generate a checklist with 10 points';
 
@@ -24,69 +24,60 @@ export default function ChecklistSchemaGenExample() {
   };
 
   return (
-    <>
-      <Box pos="relative" mb="md">
-        <LoadingOverlay
-          visible={isLoading}
-          loaderProps={{
-            children: (
-              <>
-                <Center>
-                  <Loader size={16} mr={8} />
-                  <Text inherit>Loading (may take up to 2 minutes)...</Text>
-                </Center>
-              </>
-            ),
-          }}
-        />
-        <Title order={2} mb="xs">
-          Generate checklists from content:
-        </Title>
-        <Text mb="xs">
-          Code at <Code>docs/src/app/examples/generation/checklist/page.tsx</Code>
-        </Text>
-        <Textarea
+    <Stack spacing={2}>
+      <Stack spacing={2}>
+        <LoadingBackdrop open={isLoading} />
+
+        <Typography variant="h4">Generate checklists from content:</Typography>
+        <Typography variant="body1">
+          Code at <code>docs/src/app/examples/generation/checklist/page.tsx</code>
+        </Typography>
+
+        <TextField
+          multiline
+          fullWidth
           label="Full content text:"
           placeholder="Put text or HTML content here..."
-          description={
+          helperText={
             <>
               If you don&apos;t have one, copy this{' '}
-              <Anchor
-                inherit
+              <Link
                 href="https://www.vinta.com.br/blog/celery-wild-tips-and-tricks-run-async-tasks-real-world"
+                target="_blank"
               >
                 blog post
-              </Anchor>{' '}
+              </Link>{' '}
               and paste below
             </>
           }
-          autosize
           minRows={6}
           value={content}
           onChange={(event) => setContent(event.currentTarget.value)}
-          mb="md"
         />
-        <Textarea
+        <TextField
+          multiline
+          fullWidth
           label="Prompt:"
           placeholder={`e.g. ${defaultPrompt}`}
           value={prompt}
           onChange={(event) => setPrompt(event.currentTarget.value)}
-          mb="md"
         />
-      </Box>
-      <Button
-        leftSection={isLoading ? <Loader color="blue" size={14} /> : <IconForms size={14} />}
-        variant="outline"
+      </Stack>
+
+      <LoadingButton
+        variant="outlined"
+        loadingPosition="start"
+        loading={isLoading}
+        startIcon={<ListAltOutlinedIcon />}
         onClick={() => {
           setIsLoading(true);
           generateFormSchema(content, prompt).finally(() => setIsLoading(false));
         }}
-        disabled={isLoading}
-        mb="md"
+        sx={{ alignSelf: 'flex-end' }}
       >
         Generate Form
-      </Button>
+      </LoadingButton>
       <SchemaFormDemo formSchema={formSchema} uiSchema={uiSchema} onSubmit={onSubmit} />
-    </>
+    </Stack>
   );
 }

From 86f276dab1a49411b9a71a4f09df2deac6a6f402 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 16:01:49 -0300
Subject: [PATCH 16/43] Use MUI on gen er page

---
 .../generation/entity-relationship/page.tsx   | 71 +++++++++----------
 1 file changed, 33 insertions(+), 38 deletions(-)

diff --git a/docs/src/app/examples/generation/entity-relationship/page.tsx b/docs/src/app/examples/generation/entity-relationship/page.tsx
index ec4b8ba..737ef21 100644
--- a/docs/src/app/examples/generation/entity-relationship/page.tsx
+++ b/docs/src/app/examples/generation/entity-relationship/page.tsx
@@ -1,13 +1,15 @@
 'use client';
 
-import { Text, Box, Button, Textarea, Title, LoadingOverlay, Loader, Center, Code } from '@mantine/core';
+import { useState } from 'react';
+import { Link, Stack, TextField, Typography } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
 import { RJSFSchema } from '@rjsf/utils';
 import { IChangeEvent } from '@rjsf/core';
-import { useState } from 'react';
-import { IconForms } from '@tabler/icons-react';
 import dedent from 'dedent';
 
 import { useGeneratedFormSchema } from '@ai-form-toolkit/client';
+import LoadingBackdrop from '@/components/Examples/LoadingBackdrop';
 import SchemaFormDemo from '@/components/Forms/SchemaFormDemo';
 
 import '../styles.css';
@@ -43,61 +45,54 @@ export default function ERSchemaGenExample() {
   };
 
   return (
-    <>
-      <Box pos="relative" mb="md">
-        <LoadingOverlay
-          visible={isLoading}
-          loaderProps={{
-            children: (
-              <>
-                <Center>
-                  <Loader size={16} mr={8} />
-                  <Text inherit>Loading (may take up to 2 minutes)...</Text>
-                </Center>
-              </>
-            ),
-          }}
-        />
-        <Title order={2} mb="xs">
+    <Stack spacing={2}>
+      <Stack spacing={2}>
+        <LoadingBackdrop open={isLoading} />
+
+        <Typography variant="h4">
           Generate forms from{' '}
-          <a href="https://mermaid.js.org/syntax/entityRelationshipDiagram.html" target="_blank" rel="noreferrer">
+          <Link href="https://mermaid.js.org/syntax/entityRelationshipDiagram.html" target="_blank" underline="hover">
             Mermaid ER diagrams
-          </a>
+          </Link>
           :
-        </Title>
-        <Text mb="xs">
-          Code at <Code>docs/src/app/examples/generation/entity-relationship/page.tsx</Code>
-        </Text>
-        <Textarea
+        </Typography>
+        <Typography variant="body1">
+          Code at <code>docs/src/app/examples/generation/entity-relationship/page.tsx</code>
+        </Typography>
+
+        <TextField
+          multiline
+          fullWidth
           label="Mermaid diagram for Entity-Relationship Model:"
           placeholder="Put Mermaid text here..."
           value={content}
-          autosize
           minRows={6}
           onChange={(event) => setContent(event.currentTarget.value)}
-          mb="md"
         />
-        <Textarea
+        <TextField
+          multiline
+          fullWidth
           label="Prompt:"
           placeholder={`e.g. ${defaultPrompt}`}
           value={prompt}
           onChange={(event) => setPrompt(event.currentTarget.value)}
-          mb="md"
         />
-      </Box>
-      <Button
-        leftSection={isLoading ? <Loader color="blue" size={14} /> : <IconForms size={14} />}
-        variant="outline"
+      </Stack>
+
+      <LoadingButton
+        variant="outlined"
+        loadingPosition="start"
+        loading={isLoading}
+        startIcon={<ListAltOutlinedIcon />}
         onClick={() => {
           setIsLoading(true);
           generateFormSchema(content, prompt).finally(() => setIsLoading(false));
         }}
-        disabled={isLoading}
-        mb="md"
+        sx={{ alignSelf: 'flex-end' }}
       >
         Generate Form
-      </Button>
+      </LoadingButton>
       <SchemaFormDemo formSchema={formSchema} uiSchema={uiSchema} onSubmit={onSubmit} />
-    </>
+    </Stack>
   );
 }

From cfee6c2e1e43716dc1ecf07cc863e4c1caa77069 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 16:05:36 -0300
Subject: [PATCH 17/43] Use MUI on gen exam page

---
 .../src/app/examples/generation/exam/page.tsx | 70 ++++++++-----------
 1 file changed, 31 insertions(+), 39 deletions(-)

diff --git a/docs/src/app/examples/generation/exam/page.tsx b/docs/src/app/examples/generation/exam/page.tsx
index 0f9459c..dfe4857 100644
--- a/docs/src/app/examples/generation/exam/page.tsx
+++ b/docs/src/app/examples/generation/exam/page.tsx
@@ -1,17 +1,18 @@
 'use client';
 
-import { Text, Box, Button, Textarea, Title, LoadingOverlay, Loader, Center, Code } from '@mantine/core';
+import { useState } from 'react';
+import { Stack, TextField, Typography } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
 import { RJSFSchema } from '@rjsf/utils';
 import { IChangeEvent } from '@rjsf/core';
-import { useState } from 'react';
-import { IconForms } from '@tabler/icons-react';
+
 import dedent from 'dedent';
 
 import { useGeneratedFormSchema } from '@ai-form-toolkit/client';
+import LoadingBackdrop from '@/components/Examples/LoadingBackdrop';
 import SchemaFormDemo from '@/components/Forms/SchemaFormDemo';
 
-import '../styles.css';
-
 export default function ExamSchemaGenExample() {
   const defaultContent = dedent`Technical Requirements for the job:
   Frontend:
@@ -41,57 +42,48 @@ export default function ExamSchemaGenExample() {
   };
 
   return (
-    <>
-      <Box pos="relative" mb="md">
-        <LoadingOverlay
-          visible={isLoading}
-          loaderProps={{
-            children: (
-              <>
-                <Center>
-                  <Loader size={16} mr={8} />
-                  <Text inherit>Loading (may take up to 2 minutes)...</Text>
-                </Center>
-              </>
-            ),
-          }}
-        />
-        <Title order={2} mb="xs">
-          Generate Exam forms:
-        </Title>
-        <Text mb="xs">
-          Code at <Code>docs/src/app/examples/generation/exam/page.tsx</Code>
-        </Text>
-        <Textarea
+    <Stack spacing={2}>
+      <Stack spacing={2}>
+        <LoadingBackdrop open={isLoading} />
+
+        <Typography variant="h4">Generate Exam forms:</Typography>
+        <Typography variant="body1">
+          Code at <code>docs/src/app/examples/generation/exam/page.tsx</code>
+        </Typography>
+
+        <TextField
+          multiline
+          fullWidth
           label="Full content text:"
           placeholder="Put text or HTML content here..."
-          autosize
           minRows={6}
           value={content}
           onChange={(event) => setContent(event.currentTarget.value)}
-          mb="md"
         />
-        <Textarea
+        <TextField
+          multiline
+          fullWidth
           label="Prompt:"
           placeholder={`e.g. ${defaultPrompt}`}
           value={prompt}
           onChange={(event) => setPrompt(event.currentTarget.value)}
-          mb="md"
         />
-      </Box>
-      <Button
-        leftSection={isLoading ? <Loader color="blue" size={14} /> : <IconForms size={14} />}
-        variant="outline"
+      </Stack>
+
+      <LoadingButton
+        variant="outlined"
+        loadingPosition="start"
+        loading={isLoading}
+        startIcon={<ListAltOutlinedIcon />}
         onClick={() => {
           setIsLoading(true);
           generateFormSchema(content, prompt).finally(() => setIsLoading(false));
         }}
-        disabled={isLoading}
-        mb="md"
+        sx={{ alignSelf: 'flex-end' }}
       >
         Generate Form
-      </Button>
+      </LoadingButton>
       <SchemaFormDemo formSchema={formSchema} uiSchema={uiSchema} onSubmit={onSubmit} />
-    </>
+    </Stack>
   );
 }

From 03db59aff707ac813fa0d51e5511bd081bae69b8 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 16:10:09 -0300
Subject: [PATCH 18/43] Use MUI on gen generic page

---
 .../app/examples/generation/generic/page.tsx  | 73 ++++++++-----------
 1 file changed, 32 insertions(+), 41 deletions(-)

diff --git a/docs/src/app/examples/generation/generic/page.tsx b/docs/src/app/examples/generation/generic/page.tsx
index 5863dfb..c586b80 100644
--- a/docs/src/app/examples/generation/generic/page.tsx
+++ b/docs/src/app/examples/generation/generic/page.tsx
@@ -1,16 +1,16 @@
 'use client';
 
-import { Text, Box, Button, Textarea, Title, LoadingOverlay, Loader, Center, Code } from '@mantine/core';
+import { useState } from 'react';
+import { TextField, Typography, Stack } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
 import { RJSFSchema } from '@rjsf/utils';
 import { IChangeEvent } from '@rjsf/core';
-import { useState } from 'react';
-import { IconForms } from '@tabler/icons-react';
 
 import { useGeneratedFormSchema } from '@ai-form-toolkit/client';
+import LoadingBackdrop from '@/components/Examples/LoadingBackdrop';
 import SchemaFormDemo from '@/components/Forms/SchemaFormDemo';
 
-import '../styles.css';
-
 export default function GenericSchemaGenExample() {
   const [content, setContent] = useState('');
   const [prompt, setPrompt] = useState('');
@@ -22,59 +22,50 @@ export default function GenericSchemaGenExample() {
   };
 
   return (
-    <>
-      <Box pos="relative" mb="md">
-        <LoadingOverlay
-          visible={isLoading}
-          loaderProps={{
-            children: (
-              <>
-                <Center>
-                  <Loader size={16} mr={8} />
-                  <Text inherit>Loading (may take up to 2 minutes)...</Text>
-                </Center>
-              </>
-            ),
-          }}
-        />
-        <Title order={2} mb="xs">
-          Generate checklists from content:
-        </Title>
-        <Text mb="xs">
-          Code at <Code>docs/src/app/examples/generation/generic/page.tsx</Code>
-        </Text>
-        <Textarea
+    <Stack spacing={2}>
+      <Stack spacing={2}>
+        <LoadingBackdrop open={isLoading} />
+
+        <Typography variant="h4">Generate checklists from content:</Typography>
+        <Typography variant="body1">
+          Code at <code>docs/src/app/examples/generation/generic/page.tsx</code>
+        </Typography>
+
+        <TextField
+          multiline
+          fullWidth
           label="Content"
-          description="Content to use for generating the form"
+          helperText="Content to use for generating the form"
           placeholder="Put text or HTML content here..."
-          autosize
           minRows={6}
           value={content}
           onChange={(event) => setContent(event.currentTarget.value)}
-          mb="md"
         />
-        <Textarea
+        <TextField
+          multiline
+          fullWidth
           label="Prompt"
-          description="Prompt to use for generating the form"
+          helperText="Prompt to use for generating the form"
           placeholder="e.g. generate a 5 question exam to ensure the reader learned this content"
           value={prompt}
           onChange={(event) => setPrompt(event.currentTarget.value)}
-          mb="md"
         />
-      </Box>
-      <Button
-        leftSection={isLoading ? <Loader color="blue" size={14} /> : <IconForms size={14} />}
-        variant="outline"
+      </Stack>
+
+      <LoadingButton
+        variant="outlined"
+        loadingPosition="start"
+        loading={isLoading}
+        startIcon={<ListAltOutlinedIcon />}
         onClick={() => {
           setIsLoading(true);
           generateFormSchema(content, prompt).finally(() => setIsLoading(false));
         }}
-        disabled={isLoading}
-        mb="md"
+        sx={{ alignSelf: 'flex-end' }}
       >
         Generate Form
-      </Button>
+      </LoadingButton>
       <SchemaFormDemo formSchema={formSchema} uiSchema={uiSchema} onSubmit={onSubmit} />
-    </>
+    </Stack>
   );
 }

From 93d1ce70f09bd168ea80eb690baf7b50348d2f84 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 17:47:20 -0300
Subject: [PATCH 19/43] Use MUI on welcome page

---
 .../src/components/Welcome/Welcome.module.css |  52 --------
 docs/src/components/Welcome/Welcome.tsx       | 119 +++++++++++-------
 2 files changed, 71 insertions(+), 100 deletions(-)
 delete mode 100644 docs/src/components/Welcome/Welcome.module.css

diff --git a/docs/src/components/Welcome/Welcome.module.css b/docs/src/components/Welcome/Welcome.module.css
deleted file mode 100644
index 4522b40..0000000
--- a/docs/src/components/Welcome/Welcome.module.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.inner {
-  display: flex;
-  justify-content: space-between;
-  padding-top: calc(var(--mantine-spacing-xl) * 4);
-  padding-bottom: calc(var(--mantine-spacing-xl) * 4);
-}
-
-.content {
-  max-width: rem(480px);
-  margin-right: calc(var(--mantine-spacing-xl) * 3);
-
-  @media (max-width: $mantine-breakpoint-md) {
-    max-width: 100%;
-    margin-right: 0;
-  }
-}
-
-.title {
-  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
-  font-family:
-    Greycliff CF,
-    var(--mantine-font-family);
-  font-size: rem(44px);
-  line-height: 1.2;
-  font-weight: 900;
-
-  @media (max-width: $mantine-breakpoint-xs) {
-    font-size: rem(28px);
-  }
-}
-
-.control {
-  @media (max-width: $mantine-breakpoint-xs) {
-    flex: 1;
-  }
-}
-
-.image {
-  width: rem(376px);
-  height: rem(356px);
-
-  @media (max-width: $mantine-breakpoint-md) {
-    display: none;
-  }
-}
-
-.highlight {
-  position: relative;
-  background-color: var(--mantine-color-blue-light);
-  border-radius: var(--mantine-radius-sm);
-  padding: rem(4px) rem(12px);
-}
diff --git a/docs/src/components/Welcome/Welcome.tsx b/docs/src/components/Welcome/Welcome.tsx
index 1e86d85..fc81fce 100644
--- a/docs/src/components/Welcome/Welcome.tsx
+++ b/docs/src/components/Welcome/Welcome.tsx
@@ -1,63 +1,86 @@
-import { Title, Text, Container, List, ThemeIcon, rem, Group, Button, Image } from '@mantine/core';
-import { IconCheck } from '@tabler/icons-react';
+import { Avatar, Box, Button, List, ListItem, ListItemText, Typography, Stack } from '@mui/material';
+import { blue, purple } from '@mui/material/colors';
+import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';
 
-import Link from 'next/link';
 import image from './image.svg';
-import classes from './Welcome.module.css';
 
 export function Welcome() {
   return (
-    <Container size="md">
-      <div className={classes.inner}>
-        <div className={classes.content}>
-          <Title className={classes.title}>
-            <span className={classes.highlight}>Supercharge</span> your <br /> forms with AI
-          </Title>
-          <Text mt="md">
+    <Box display="flex" justifyContent="center">
+      <Stack
+        direction={{ xs: 'column', sm: 'row' }}
+        spacing={{ sm: 2, md: 12 }}
+        paddingY={{ xs: 4, sm: 8, md: 16 }}
+        paddingX={3}
+        justifyContent="space-between"
+      >
+        <Stack maxWidth={456} spacing={2}>
+          <Stack>
+            <Typography variant="h3">
+              <Box component="span" borderRadius={1} paddingY={0.5} paddingX={1} sx={{ backgroundColor: blue[50] }}>
+                Supercharge
+              </Box>{' '}
+              your
+              <Typography variant="h3">forms with AI</Typography>
+            </Typography>
+          </Stack>
+
+          <Typography variant="body1">
             Build and enhance your{' '}
-            <Text span c="blue" fw="bold" inherit>
+            <Box component="span" color={blue[600]} fontWeight="bold">
               React
-            </Text>{' '}
+            </Box>{' '}
             forms with Artificial Intelligence. Integrated with{' '}
-            <Text span c="purple" fw="bold" inherit>
+            <Box component="span" color={purple[600]} fontWeight="bold">
               Next.js
-            </Text>{' '}
+            </Box>{' '}
             server actions for maximum productivity.
-          </Text>
+          </Typography>
 
-          <List
-            mt={30}
-            spacing="sm"
-            size="sm"
-            icon={
-              <ThemeIcon size={20} radius="xl">
-                <IconCheck style={{ width: rem(12), height: rem(12) }} stroke={1.5} />
-              </ThemeIcon>
-            }
-          >
-            <List.Item>
-              <b>For your Product</b> – autogenerate forms from existing content: checklists, surveys, exams, data
-              collection, you name it!
-            </List.Item>
-            <List.Item>
-              <b>For your Users</b> – help them fill your product forms with AI-powered autofill capabilities.
-            </List.Item>
+          <List>
+            <ListItem sx={{ gap: 2, p: 0 }}>
+              <Avatar sx={{ width: 24, height: 24, bgcolor: blue[600] }}>
+                <CheckOutlinedIcon fontSize="small" />
+              </Avatar>
+              <ListItemText
+                primary={
+                  <Typography variant="body2">
+                    <b>For your Product</b> – autogenerate forms from existing content: checklists, surveys, exams, data
+                    collection, you name it!
+                  </Typography>
+                }
+              />
+            </ListItem>
+            <ListItem sx={{ gap: 2, p: 0 }}>
+              <Avatar sx={{ width: 24, height: 24, bgcolor: blue[600] }}>
+                <CheckOutlinedIcon fontSize="small" />
+              </Avatar>
+              <ListItemText
+                primary={
+                  <Typography variant="body2">
+                    <b>For your Users</b> – help them fill your product forms with AI-powered autofill capabilities.
+                  </Typography>
+                }
+              />
+            </ListItem>
           </List>
 
-          <Group mt={30}>
-            <Button
-              component={Link}
-              href="/tutorial/getting-started/"
-              radius="xl"
-              size="md"
-              className={classes.control}
-            >
-              Get started
-            </Button>
-          </Group>
-        </div>
-        <Image src={image.src} className={classes.image} />
-      </div>
-    </Container>
+          <Button variant="contained" href="/tutorial/getting-started/" size="large" sx={{ alignSelf: 'flex-start' }}>
+            Get started
+          </Button>
+        </Stack>
+
+        <Box
+          component="img"
+          srcSet={image.src}
+          src={image.src}
+          width={376}
+          height={356}
+          loading="lazy"
+          alt="Person typing on laptop"
+          sx={{ display: { xs: 'none', md: 'block' } }}
+        />
+      </Stack>
+    </Box>
   );
 }

From 84c476305ebc09d3d92b54e018a10283bfbb5674 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 18:21:42 -0300
Subject: [PATCH 20/43] Use MUI on docs layout

---
 docs/src/app/docs-layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/docs-layout.tsx b/docs/src/app/docs-layout.tsx
index 333580b..3aa9122 100644
--- a/docs/src/app/docs-layout.tsx
+++ b/docs/src/app/docs-layout.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { Box, rem } from '@mantine/core';
+import { Box } from '@mui/material';
 
 import Layout from '@/layout';
 
@@ -14,7 +14,7 @@ type Props = {
 export default function DocsLayout({ children }: Props) {
   return (
     <Layout>
-      <Box maw={600} mx="auto" pb={rem(30)} px={rem(20)}>
+      <Box maxWidth={600} mx="auto" paddingY={4} paddingX={2.5}>
         {children}
       </Box>
     </Layout>

From 309fb10e14255442c9ae2bb5fc13571c6f536692 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 18:22:40 -0300
Subject: [PATCH 21/43] Create MuiThemeWrapper

---
 docs/src/MuiThemeWrapper.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 docs/src/MuiThemeWrapper.tsx

diff --git a/docs/src/MuiThemeWrapper.tsx b/docs/src/MuiThemeWrapper.tsx
new file mode 100644
index 0000000..7b371c9
--- /dev/null
+++ b/docs/src/MuiThemeWrapper.tsx
@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+const MuiThemeWrapper = ({ children }: { children: ReactNode }) => {
+  const theme = createTheme({
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            textTransform: 'none', // Disable auto-capitalization of button text
+          },
+        },
+      },
+    },
+  });
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+export default MuiThemeWrapper;

From da4b6118d830f1b8f8b4eaa67b80c7b370c5b591 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 22:30:18 -0300
Subject: [PATCH 22/43] Use MUI on schema form demo

---
 docs/src/components/Forms/SchemaFormDemo.tsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/docs/src/components/Forms/SchemaFormDemo.tsx b/docs/src/components/Forms/SchemaFormDemo.tsx
index 05abf8e..4e64df3 100644
--- a/docs/src/components/Forms/SchemaFormDemo.tsx
+++ b/docs/src/components/Forms/SchemaFormDemo.tsx
@@ -1,9 +1,9 @@
-import { Box, Title } from '@mantine/core';
 import validator from '@rjsf/validator-ajv8';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import { CodeHighlightTabs } from '@mantine/code-highlight';
 import { FormProps, IChangeEvent } from '@rjsf/core';
 import SchemaForm from '@rjsf/mui';
+import { Stack, Typography } from '@mui/material';
 
 export default function SchemaFormDemo({
   formSchema,
@@ -19,16 +19,13 @@ export default function SchemaFormDemo({
   return (
     formSchema && (
       <>
-        <Box mb="md">
-          <Title order={3} mb="xs">
-            Generated Form:
-          </Title>
+        <Stack>
+          <Typography variant="h5">Generated Form:</Typography>
           <SchemaForm schema={formSchema} uiSchema={uiSchema} validator={validator} onSubmit={onSubmit} {...props} />
-        </Box>
-        <Box mb="md">
-          <Title order={3} mb="xs">
-            Actual form code:
-          </Title>
+        </Stack>
+
+        <Stack spacing={2} paddingTop={1}>
+          <Typography variant="h5">Actual form code:</Typography>
           <CodeHighlightTabs
             code={[
               {
@@ -44,7 +41,7 @@ export default function SchemaFormDemo({
             ]}
             mb="md"
           />
-        </Box>
+        </Stack>
       </>
     )
   );

From 8a0b79bedc8ba05fa3c48d8e55c2caaee06be24a Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 23:30:05 -0300
Subject: [PATCH 23/43] Remove no longer used file

---
 docs/src/components/Forms/templates.tsx | 150 ------------------------
 1 file changed, 150 deletions(-)
 delete mode 100644 docs/src/components/Forms/templates.tsx

diff --git a/docs/src/components/Forms/templates.tsx b/docs/src/components/Forms/templates.tsx
deleted file mode 100644
index 90be9b9..0000000
--- a/docs/src/components/Forms/templates.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { ActionIcon, Button, TextInput } from '@mantine/core';
-import { ChangeEvent, FocusEvent } from 'react';
-import {
-  BaseInputTemplateProps,
-  RJSFSchema,
-  FormContextType,
-  IconButtonProps,
-  getSubmitButtonOptions,
-  SubmitButtonProps,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
-
-import './styles.css';
-import { IconArrowBarDown, IconArrowBarUp, IconCopy, IconPlus, IconTrash } from '@tabler/icons-react';
-
-export function BaseInputTemplate<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: BaseInputTemplateProps<T, S, F>,
-) {
-  const {
-    id,
-    options,
-    value,
-    type,
-    placeholder,
-    required,
-    disabled,
-    readonly,
-    autofocus,
-    onChange,
-    onChangeOverride,
-    onBlur,
-    onFocus,
-    rawErrors,
-    hideError,
-  } = props;
-  const onTextChange = ({ target: { value: val } }: ChangeEvent<HTMLInputElement>) => {
-    // Use the options.emptyValue if it is specified and newVal is also an empty string
-    onChange(val === '' ? options.emptyValue || '' : val);
-  };
-  const onTextBlur = ({ target: { value: val } }: FocusEvent<HTMLInputElement>) => onBlur(id, val);
-  const onTextFocus = ({ target: { value: val } }: FocusEvent<HTMLInputElement>) => onFocus(id, val);
-
-  const hasError = rawErrors?.length && rawErrors.length > 0 && !hideError;
-
-  return (
-    <TextInput
-      type={type}
-      id={id}
-      name={id}
-      value={value || value === 0 ? value : ''}
-      placeholder={placeholder}
-      disabled={disabled}
-      readOnly={readonly}
-      autoFocus={autofocus}
-      error={hasError ? rawErrors?.join('; ') : undefined}
-      onChange={onChangeOverride || onTextChange}
-      onBlur={onTextBlur}
-      onFocus={onTextFocus}
-      required={required}
-    />
-  );
-}
-
-export function SubmitButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
-  uiSchema,
-}: SubmitButtonProps<T, S, F>) {
-  const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions<T, S, F>(uiSchema);
-  if (norender) {
-    return null;
-  }
-  return (
-    <div>
-      <Button type="submit" {...submitButtonProps} className={submitButtonProps.className || ''}>
-        {submitText}
-      </Button>
-    </div>
-  );
-}
-
-export function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
-  className,
-  onClick,
-  disabled,
-}: IconButtonProps<T, S, F>) {
-  return (
-    <ActionIcon variant="default" aria-label="Add" className={className || ''} onClick={onClick} disabled={disabled}>
-      <IconPlus style={{ width: '70%', height: '70%' }} stroke={1.5} />
-    </ActionIcon>
-  );
-}
-
-export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
-  className,
-  onClick,
-  disabled,
-}: IconButtonProps<T, S, F>) {
-  return (
-    <ActionIcon variant="default" aria-label="Copy" className={className || ''} onClick={onClick} disabled={disabled}>
-      <IconCopy style={{ width: '70%', height: '70%' }} stroke={1.5} />
-    </ActionIcon>
-  );
-}
-
-export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
-  className,
-  onClick,
-  disabled,
-}: IconButtonProps<T, S, F>) {
-  return (
-    <ActionIcon
-      variant="default"
-      aria-label="Move down"
-      className={className || ''}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      <IconArrowBarDown style={{ width: '70%', height: '70%' }} stroke={1.5} />
-    </ActionIcon>
-  );
-}
-
-export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
-  className,
-  onClick,
-  disabled,
-}: IconButtonProps<T, S, F>) {
-  return (
-    <ActionIcon
-      variant="default"
-      aria-label="Move up"
-      className={className || ''}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      <IconArrowBarUp style={{ width: '70%', height: '70%' }} stroke={1.5} />
-    </ActionIcon>
-  );
-}
-
-export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
-  className,
-  onClick,
-  disabled,
-}: IconButtonProps<T, S, F>) {
-  return (
-    <ActionIcon variant="default" aria-label="Remove" className={className || ''} onClick={onClick} disabled={disabled}>
-      <IconTrash style={{ width: '70%', height: '70%' }} stroke={1.5} />
-    </ActionIcon>
-  );
-}

From 2cfefee7359836b722af5d195fedd80b0ae2377a Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 23:30:35 -0300
Subject: [PATCH 24/43] Use MUI on footer

---
 docs/src/layout/FooterNav/FooterNav.tsx | 32 ++++++++++++-------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/docs/src/layout/FooterNav/FooterNav.tsx b/docs/src/layout/FooterNav/FooterNav.tsx
index ee444e1..bb35245 100644
--- a/docs/src/layout/FooterNav/FooterNav.tsx
+++ b/docs/src/layout/FooterNav/FooterNav.tsx
@@ -1,22 +1,20 @@
-import { Box, Container } from '@mantine/core';
-import classes from './FooterNav.module.css';
+import { Box, Link } from '@mui/material';
+import { grey } from '@mui/material/colors';
 
 const FooterNav = () => (
-  <Box>
-    <footer className={classes.footer}>
-      <Container className={classes.inner} fluid>
-        <p>
-          © 2024{' '}
-          <a href="https://www.vinta.com.br" target="_blank" rel="noreferrer">
-            Vinta Software
-          </a>
-          {' – '}
-          <a href="https://www.vinta.com.br" target="_blank" rel="noreferrer">
-            meet the creators!
-          </a>
-        </p>
-      </Container>
-    </footer>
+  <Box sx={{ position: 'sticky', bottom: 0, backgroundColor: '#fff', borderTop: `1px solid ${grey[300]}` }}>
+    <Box component="footer">
+      <Box display="flex" alignItems="center" height={60} paddingX={4} gap={0.5}>
+        © 2024
+        <Link href="https://www.vinta.com.br" target="_blank">
+          Vinta Software
+        </Link>
+        {' – '}
+        <Link href="https://www.vinta.com.br" target="_blank">
+          meet the creators!
+        </Link>
+      </Box>
+    </Box>
   </Box>
 );
 

From 32a2743feeaddbed3cafa6b8d9c345e9c29e4362 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Fri, 12 Jan 2024 23:32:14 -0300
Subject: [PATCH 25/43] Start using MuiThemeWrapper

---
 docs/src/MuiThemeWrapper.tsx | 2 ++
 docs/src/app/layout.tsx      | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/src/MuiThemeWrapper.tsx b/docs/src/MuiThemeWrapper.tsx
index 7b371c9..52883e8 100644
--- a/docs/src/MuiThemeWrapper.tsx
+++ b/docs/src/MuiThemeWrapper.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { ReactNode } from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
index 953a426..88e0220 100644
--- a/docs/src/app/layout.tsx
+++ b/docs/src/app/layout.tsx
@@ -10,6 +10,7 @@ import {
   GeneratorArgsType,
 } from '@ai-form-toolkit/server';
 import { theme } from '@/theme';
+import MuiThemeWrapper from '@/MuiThemeWrapper';
 
 export const metadata = {
   title: `Build forms like it's ${Math.max(new Date().getFullYear(), 2024)} | AI Form Toolkit`,
@@ -45,7 +46,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           generateFormAutofillFn={myGenerateGPTFormAutofill}
           generateFormSchemaFn={myGenerateGPTFormSchema}
         />
-        <MantineProvider theme={theme}>{children}</MantineProvider>
+        <MantineProvider theme={theme}>
+          <MuiThemeWrapper>{children}</MuiThemeWrapper>
+        </MantineProvider>
       </body>
     </html>
   );

From c34a1217f89d83c5f7d8babbb9903ed31a283484 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Sat, 13 Jan 2024 15:28:01 -0300
Subject: [PATCH 26/43] Use MUI on header navbar

---
 .../components/Docs/ExampleDocLink.module.css |   5 -
 docs/src/components/Docs/ExampleDocLink.tsx   |   4 +-
 docs/src/components/Docs/ExampleLinks.tsx     |   3 +-
 docs/src/components/Forms/styles.css          |  17 -
 .../src/layout/FooterNav/FooterNav.module.css |   9 -
 .../src/layout/HeaderNav/HeaderNav.module.css |  47 ---
 docs/src/layout/HeaderNav/HeaderNav.tsx       | 372 +++++++-----------
 .../layout/HeaderNav/NavItemButtonMobile.tsx  |  41 ++
 .../layout/HeaderNav/NavItemButtonPopover.tsx |  87 ++++
 docs/src/layout/index.tsx                     |  21 +-
 10 files changed, 277 insertions(+), 329 deletions(-)
 delete mode 100644 docs/src/components/Docs/ExampleDocLink.module.css
 delete mode 100644 docs/src/components/Forms/styles.css
 delete mode 100644 docs/src/layout/FooterNav/FooterNav.module.css
 delete mode 100644 docs/src/layout/HeaderNav/HeaderNav.module.css
 create mode 100644 docs/src/layout/HeaderNav/NavItemButtonMobile.tsx
 create mode 100644 docs/src/layout/HeaderNav/NavItemButtonPopover.tsx

diff --git a/docs/src/components/Docs/ExampleDocLink.module.css b/docs/src/components/Docs/ExampleDocLink.module.css
deleted file mode 100644
index d91278e..0000000
--- a/docs/src/components/Docs/ExampleDocLink.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.exampleLink {
-  @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
-  }
-}
diff --git a/docs/src/components/Docs/ExampleDocLink.tsx b/docs/src/components/Docs/ExampleDocLink.tsx
index e251966..cf18796 100644
--- a/docs/src/components/Docs/ExampleDocLink.tsx
+++ b/docs/src/components/Docs/ExampleDocLink.tsx
@@ -2,10 +2,10 @@
 
 import { Card, CardActionArea, Typography, Stack, Paper } from '@mui/material';
 
-import { grey } from '@mui/material/colors';
+import { blue, grey } from '@mui/material/colors';
 import { ExampleDataType } from '@/app/examples/examples-data';
 
-export function ExampleDocLink({ item, iconColor = grey[900] }: { item: ExampleDataType; iconColor?: string }) {
+export function ExampleDocLink({ item, iconColor = blue[600] }: { item: ExampleDataType; iconColor?: string }) {
   return (
     <Card key={item.title} elevation={0}>
       <CardActionArea href={item.href} sx={{ padding: 1 }}>
diff --git a/docs/src/components/Docs/ExampleLinks.tsx b/docs/src/components/Docs/ExampleLinks.tsx
index 55443d9..3d2a243 100644
--- a/docs/src/components/Docs/ExampleLinks.tsx
+++ b/docs/src/components/Docs/ExampleLinks.tsx
@@ -1,5 +1,4 @@
 import { Stack } from '@mui/material';
-import { blue } from '@mui/material/colors';
 import { ExampleDocLink } from './ExampleDocLink';
 import { ExampleDataType } from '@/app/examples/examples-data';
 
@@ -7,7 +6,7 @@ export function ExampleLinks({ linksData }: { linksData: ExampleDataType[] }) {
   return (
     <Stack spacing={2} paddingBottom={2}>
       {linksData.map((item) => (
-        <ExampleDocLink item={item} iconColor={blue[600]} />
+        <ExampleDocLink item={item} />
       ))}
     </Stack>
   );
diff --git a/docs/src/components/Forms/styles.css b/docs/src/components/Forms/styles.css
deleted file mode 100644
index ad4644a..0000000
--- a/docs/src/components/Forms/styles.css
+++ /dev/null
@@ -1,17 +0,0 @@
-fieldset#root {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-fieldset#root > legend {
-  display: none;
-}
-
-#root__description {
-  margin-top: 0;
-}
-
-.form-group .field {
-  margin-bottom: var(--mantine-spacing-xs);
-}
diff --git a/docs/src/layout/FooterNav/FooterNav.module.css b/docs/src/layout/FooterNav/FooterNav.module.css
deleted file mode 100644
index 019a1bb..0000000
--- a/docs/src/layout/FooterNav/FooterNav.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.footer {
-  height: rem(60px);
-}
-
-.inner {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
diff --git a/docs/src/layout/HeaderNav/HeaderNav.module.css b/docs/src/layout/HeaderNav/HeaderNav.module.css
deleted file mode 100644
index 6598939..0000000
--- a/docs/src/layout/HeaderNav/HeaderNav.module.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.header {
-  height: rem(60px);
-  padding-left: var(--mantine-spacing-md);
-  padding-right: var(--mantine-spacing-md);
-  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-}
-
-.link {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding-left: var(--mantine-spacing-md);
-  padding-right: var(--mantine-spacing-md);
-  text-decoration: none;
-  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
-  font-weight: 500;
-  font-size: var(--mantine-font-size-sm);
-
-  @media (max-width: $mantine-breakpoint-sm) {
-    height: rem(42px);
-    width: 100%;
-  }
-
-  @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  }
-}
-
-.subLink {
-  display: flex;
-  width: 100%;
-  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
-  border-radius: var(--mantine-radius-md);
-
-  @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
-  }
-}
-
-.dropdownFooter {
-  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
-  margin: calc(var(--mantine-spacing-md) * -1);
-  margin-top: var(--mantine-spacing-sm);
-  padding: var(--mantine-spacing-md) calc(var(--mantine-spacing-md) * 2);
-  padding-bottom: var(--mantine-spacing-xl);
-  border-top: rem(1px) solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
-}
diff --git a/docs/src/layout/HeaderNav/HeaderNav.tsx b/docs/src/layout/HeaderNav/HeaderNav.tsx
index 8c557c5..caf8804 100644
--- a/docs/src/layout/HeaderNav/HeaderNav.tsx
+++ b/docs/src/layout/HeaderNav/HeaderNav.tsx
@@ -1,264 +1,166 @@
 'use client';
 
+import React from 'react';
 import {
+  AppBar,
   Box,
-  Text,
   Button,
-  Drawer,
-  Group,
-  rem,
-  ScrollArea,
-  useMantineTheme,
-  Burger,
-  UnstyledButton,
-  Popover,
-  Center,
   Divider,
-  SimpleGrid,
-  Collapse,
-  MantineTheme,
-} from '@mantine/core';
-import HelpCenterOutlinedIcon from '@mui/icons-material/HelpCenterOutlined';
-import { useClickOutside, useDisclosure } from '@mantine/hooks';
-import { IconChevronDown } from '@tabler/icons-react';
-import { ReactNode, useState } from 'react';
-import Link from 'next/link';
-import { Stack } from '@mui/material';
-import classes from './HeaderNav.module.css';
+  Drawer,
+  IconButton,
+  List,
+  ListItem,
+  Stack,
+  Toolbar,
+  Typography,
+} from '@mui/material';
+import { grey } from '@mui/material/colors';
+import MenuIcon from '@mui/icons-material/Menu';
+import CloseIcon from '@mui/icons-material/Close';
 import { assistantLinksData, generationLinksData } from '@/app/examples/examples-data';
-import { ExampleDocLink } from '@/components/Docs/ExampleDocLink';
-
-type MenuType = 'tutorial' | 'assistant' | 'generation';
-
-const HeaderWebMenu = ({
-  openedMenu,
-  setOpenedMenu,
-  name,
-  title,
-  tutorialLink,
-  theme,
-  children,
-}: {
-  openedMenu: MenuType | null;
-  setOpenedMenu: (menu: MenuType | null) => void;
-  name: MenuType;
-  title: string;
-  tutorialLink: string;
-  theme: MantineTheme;
-  children: ReactNode;
-}) => {
-  const ref = useClickOutside(() => setOpenedMenu(null));
-
-  return (
-    <Popover
-      opened={openedMenu === name}
-      width={600}
-      position="bottom"
-      radius="md"
-      shadow="md"
-      withinPortal
-      zIndex={1000000}
-    >
-      <Popover.Target>
-        <a
-          href="#"
-          className={classes.link}
-          onClick={(e) => {
-            setOpenedMenu(name);
-            e.preventDefault();
-          }}
-        >
-          <Center inline>
-            <Box component="span" mr={5}>
-              {title}
-            </Box>
-            <IconChevronDown style={{ width: rem(16), height: rem(16) }} color={theme.colors.blue[6]} />
-          </Center>
-        </a>
-      </Popover.Target>
-
-      <Popover.Dropdown style={{ overflow: 'hidden' }} ref={ref}>
-        <Group justify="space-between" px="md">
-          <Text fw={500}>{title} Examples</Text>
-        </Group>
+import NavItemButtonMobile from './NavItemButtonMobile';
+import NavItemButtonPopover, { PopoverType } from './NavItemButtonPopover';
 
-        <Divider my="sm" />
+export default function HeaderNav() {
+  // Mobile state
+  const [showMobileDrawer, setShowMobileDrawer] = React.useState(false);
 
-        <SimpleGrid cols={2} spacing={0}>
-          {children}
-        </SimpleGrid>
+  // Desktop state
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+  const [openPopover, setOpenPopover] = React.useState<PopoverType | null>(null);
 
-        <div className={classes.dropdownFooter}>
-          <Group justify="space-between">
-            <div>
-              <Text fw={500} fz="sm">
-                Tutorial
-              </Text>
-              <Text size="xs" c="dimmed">
-                Learn how to add {title} to your React app!
-              </Text>
-            </div>
-            <Button component={Link} href={tutorialLink} variant="default" onClick={() => setOpenedMenu(null)}>
-              Read the docs
-            </Button>
-          </Group>
-        </div>
-      </Popover.Dropdown>
-    </Popover>
-  );
-};
-
-const HeaderMobileMenu = ({
-  title,
-  tutorialLink,
-  theme,
-  children,
-}: {
-  title: string;
-  tutorialLink: string;
-  theme: MantineTheme;
-  children: ReactNode;
-}) => {
-  const [linksOpened, { toggle: toggleLinks }] = useDisclosure(false);
-
-  return (
-    <>
-      <UnstyledButton className={classes.link} onClick={toggleLinks}>
-        <Center inline>
-          <Box component="span" mr={5}>
-            {title}
-          </Box>
-          <IconChevronDown style={{ width: rem(16), height: rem(16) }} color={theme.colors.blue[6]} />
-        </Center>
-      </UnstyledButton>
-      <Collapse in={linksOpened}>
-        <ExampleDocLink
-          item={{
-            icon: HelpCenterOutlinedIcon,
-            title: 'Tutorial',
-            description: 'Learn how to add AI Form Toolkit to your React app!',
-            href: tutorialLink,
-          }}
-        />
-        {children}
-      </Collapse>
-    </>
-  );
-};
-
-const HeaderNav = () => {
-  // Web:
-  const [openedMenu, setOpenedMenu] = useState<MenuType | null>(null);
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>, popoverType: PopoverType) => {
+    setAnchorEl(event.currentTarget);
+    setOpenPopover(popoverType);
+  };
 
-  // Mobile:
-  const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = useDisclosure(false);
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+    setOpenPopover(null);
+  };
 
-  // Both:
-  const closeAllMenus = () => {
-    setOpenedMenu(null);
-    closeDrawer();
+  const handleDrawerToggle = () => {
+    setShowMobileDrawer(!showMobileDrawer);
   };
-  const theme = useMantineTheme();
 
   return (
-    <Box className={classes.header}>
-      <Group justify="space-between" h="100%">
-        <Text size="xl" fw={900} variant="gradient" gradient={{ from: 'blue', to: 'grape' }}>
-          <Link href="/">AI Form Toolkit</Link>
-        </Text>
-
-        <Group h="100%" gap={0} visibleFrom="sm">
-          <Link href="/" className={classes.link}>
-            Home
-          </Link>
-
-          <Link href="/tutorial/getting-started/" className={classes.link}>
-            Getting Started
-          </Link>
-
-          <HeaderWebMenu
-            openedMenu={openedMenu}
-            setOpenedMenu={setOpenedMenu}
-            name="generation"
-            title="AI Form Generation"
-            tutorialLink="/tutorial/form-generation/"
-            theme={theme}
-          >
-            {generationLinksData.map((item) => (
-              <ExampleDocLink item={item} />
-            ))}
-          </HeaderWebMenu>
+    <Box>
+      <AppBar
+        position="static"
+        color="default"
+        elevation={0}
+        sx={{ backgroundColor: '#fff', borderBottom: `1px solid ${grey[300]}` }}
+      >
+        <Toolbar>
+          <Stack direction="row" justifyContent="space-between" width="100%">
+            <Typography
+              variant="h6"
+              component="span"
+              sx={{
+                background: 'linear-gradient(#2D0FED, #9D3EC2)',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+              }}
+            >
+              <a href="/">AI Form Toolkit</a>
+            </Typography>
+
+            <Stack direction="row" spacing={{ md: 1, lg: 1.5 }} sx={{ display: { xs: 'none', md: 'flex' } }}>
+              <Button href="/">Home</Button>
+              <Button href="/tutorial/getting-started/">Getting Started</Button>
+              <NavItemButtonPopover
+                name="AI Form Generation"
+                examples={generationLinksData}
+                tutorialLink="/tutorial/form-generation/"
+                type={PopoverType.generation}
+                open={openPopover === PopoverType.generation}
+                anchorEl={anchorEl}
+                onPopoverClose={handlePopoverClose}
+                onPopoverOpen={handlePopoverOpen}
+              />
+              <NavItemButtonPopover
+                name="AI Form Assistant"
+                examples={assistantLinksData}
+                tutorialLink="/tutorial/form-assistant/"
+                type={PopoverType.assistant}
+                open={openPopover === PopoverType.assistant}
+                anchorEl={anchorEl}
+                onPopoverClose={handlePopoverClose}
+                onPopoverOpen={handlePopoverOpen}
+              />
+            </Stack>
 
-          <HeaderWebMenu
-            openedMenu={openedMenu}
-            setOpenedMenu={setOpenedMenu}
-            name="assistant"
-            title="AI Form Assistant"
-            tutorialLink="/tutorial/form-assistant/"
-            theme={theme}
+            <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+              <Button variant="contained" href="/tutorial/getting-started/">
+                Install
+              </Button>
+            </Box>
+          </Stack>
+
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            edge="start"
+            onClick={handleDrawerToggle}
+            sx={{ mr: 2, display: { md: 'none' } }}
           >
-            {assistantLinksData.map((item) => (
-              <ExampleDocLink item={item} />
-            ))}
-          </HeaderWebMenu>
-        </Group>
-
-        <Group visibleFrom="sm">
-          <Button component={Link} href="/tutorial/getting-started/">
-            Install
-          </Button>
-        </Group>
-
-        <Burger opened={drawerOpened} onClick={toggleDrawer} hiddenFrom="sm" />
-      </Group>
+            <MenuIcon />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
 
+      {/* Mobile */}
       <Drawer
-        opened={drawerOpened}
-        onClose={closeDrawer}
-        size="100%"
-        padding="md"
-        title="Navigation"
-        hiddenFrom="sm"
-        zIndex={1000000}
+        variant="temporary"
+        anchor="left"
+        open={showMobileDrawer}
+        onClose={handleDrawerToggle}
+        PaperProps={{ style: { width: '90%', height: '100%' } }}
       >
-        <ScrollArea h={`calc(100vh - ${rem(80)})`} mx="-md">
-          <Divider my="sm" />
-
-          <Link href="/" className={classes.link} onClick={closeAllMenus}>
-            Home
-          </Link>
-
-          <Link href="/tutorial/getting-started/" className={classes.link} onClick={closeAllMenus}>
-            Getting Started
-          </Link>
-
-          <HeaderMobileMenu title="AI Form Generation" tutorialLink="/tutorial/form-generation/" theme={theme}>
-            <Stack sx={{ maxWidth: '90%' }}>
-              {generationLinksData.map((item) => (
-                <ExampleDocLink item={item} />
-              ))}
+        <Box display="flex" justifyContent="flex-end" padding={1}>
+          <IconButton onClick={handleDrawerToggle}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
+
+        <Divider />
+        <List>
+          <ListItem>
+            <Button href="/">Home</Button>
+          </ListItem>
+          <ListItem>
+            <Button href="/tutorial/getting-started/">Getting Started</Button>
+          </ListItem>
+          <ListItem>
+            <Stack alignItems="flex-start">
+              <NavItemButtonMobile
+                name="AI Form Generation"
+                examples={generationLinksData}
+                tutorialLink="/tutorial/form-generation/"
+              />
             </Stack>
-          </HeaderMobileMenu>
-
-          <HeaderMobileMenu title="AI Form Assistant" tutorialLink="/tutorial/form-assistant/" theme={theme}>
-            <Stack sx={{ maxWidth: '90%' }}>
-              {assistantLinksData.map((item) => (
-                <ExampleDocLink item={item} />
-              ))}
+          </ListItem>
+          <ListItem>
+            <Stack alignItems="flex-start">
+              <NavItemButtonMobile
+                name="AI Form Assistant"
+                examples={assistantLinksData}
+                tutorialLink="/tutorial/form-assistant/"
+              />
             </Stack>
-          </HeaderMobileMenu>
+          </ListItem>
+        </List>
 
-          <Divider my="sm" />
+        <Divider />
 
-          <Group justify="center" grow pb="xl" px="md">
-            <Button component={Link} href="/tutorial/getting-started/" onClick={closeAllMenus}>
+        <List>
+          <ListItem>
+            <Button fullWidth variant="contained" href="/tutorial/getting-started/">
               Install
             </Button>
-          </Group>
-        </ScrollArea>
+          </ListItem>
+        </List>
       </Drawer>
     </Box>
   );
-};
-
-export default HeaderNav;
+}
diff --git a/docs/src/layout/HeaderNav/NavItemButtonMobile.tsx b/docs/src/layout/HeaderNav/NavItemButtonMobile.tsx
new file mode 100644
index 0000000..798f183
--- /dev/null
+++ b/docs/src/layout/HeaderNav/NavItemButtonMobile.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Button, Collapse, List } from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import HelpCenterOutlinedIcon from '@mui/icons-material/HelpCenterOutlined';
+import { ExampleDataType } from '@/app/examples/examples-data';
+import { ExampleDocLink } from '@/components/Docs/ExampleDocLink';
+
+interface Props {
+  name: string;
+  examples: ExampleDataType[];
+  tutorialLink: string;
+}
+
+const NavItemButtonMobile = ({ name, examples, tutorialLink }: Props) => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button endIcon={<KeyboardArrowDownIcon />} onClick={() => setOpen(!open)}>
+        {name}
+      </Button>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          <ExampleDocLink
+            item={{
+              icon: HelpCenterOutlinedIcon,
+              title: 'Tutorial',
+              description: 'Learn how to add AI Form Toolkit to your React app!',
+              href: tutorialLink,
+            }}
+          />
+          {examples.map((example) => (
+            <ExampleDocLink item={example} />
+          ))}
+        </List>
+      </Collapse>
+    </>
+  );
+};
+
+export default NavItemButtonMobile;
diff --git a/docs/src/layout/HeaderNav/NavItemButtonPopover.tsx b/docs/src/layout/HeaderNav/NavItemButtonPopover.tsx
new file mode 100644
index 0000000..6361331
--- /dev/null
+++ b/docs/src/layout/HeaderNav/NavItemButtonPopover.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { Button, Divider, Grid, Popover, Stack, Typography } from '@mui/material';
+import { grey } from '@mui/material/colors';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { ExampleDataType } from '@/app/examples/examples-data';
+import { ExampleDocLink } from '@/components/Docs/ExampleDocLink';
+
+export enum PopoverType {
+  generation = 'generation',
+  assistant = 'assistant',
+}
+
+interface Props {
+  name: string;
+  examples: ExampleDataType[];
+  tutorialLink: string;
+  type: PopoverType;
+  open: boolean;
+  anchorEl: HTMLElement | null;
+  onPopoverClose: () => void;
+  onPopoverOpen: (event: React.MouseEvent<HTMLElement>, popoverType: PopoverType) => void;
+}
+
+const NavItemButtonPopover = ({
+  name,
+  examples,
+  tutorialLink,
+  type,
+  open,
+  anchorEl,
+  onPopoverClose,
+  onPopoverOpen,
+}: Props) => (
+  <>
+    <Button endIcon={<KeyboardArrowDownIcon />} onClick={(event) => onPopoverOpen(event, type)}>
+      {name}
+    </Button>
+
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onPopoverClose}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'center',
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'center',
+      }}
+    >
+      <Stack paddingX={2} width={600}>
+        <Typography sx={{ p: 2 }}>{name} Examples</Typography>
+        <Divider />
+        <Grid container paddingY={2}>
+          {examples.map((example) => (
+            <Grid item xs={6} key={example.title}>
+              <ExampleDocLink item={example} />
+            </Grid>
+          ))}
+        </Grid>
+      </Stack>
+
+      <Divider />
+
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        paddingX={4}
+        paddingY={2}
+        sx={{ backgroundColor: grey[100] }}
+      >
+        <Stack>
+          <Typography variant="body2">Tutorial</Typography>
+          <Typography variant="caption" color={grey[600]}>
+            Learn how to add {name} to your React app!
+          </Typography>
+        </Stack>
+        <Button variant="outlined" href={tutorialLink} onClick={onPopoverClose}>
+          Read the docs
+        </Button>
+      </Stack>
+    </Popover>
+  </>
+);
+
+export default NavItemButtonPopover;
diff --git a/docs/src/layout/index.tsx b/docs/src/layout/index.tsx
index d4708c0..23bfdde 100644
--- a/docs/src/layout/index.tsx
+++ b/docs/src/layout/index.tsx
@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
-import { AppShell, Box, rem } from '@mantine/core';
+import { Box } from '@mui/material';
 import HeaderNav from './HeaderNav/HeaderNav';
 import FooterNav from './FooterNav/FooterNav';
 
+// NOTE: This is needed for CodeHighlightTabs to work
 import '@mantine/code-highlight/styles.css';
 
 type LayoutProps = {
@@ -11,17 +12,13 @@ type LayoutProps = {
 
 function Layout({ children }: LayoutProps) {
   return (
-    <AppShell header={{ height: 60 }} footer={{ height: 60 }}>
-      <AppShell.Header>
-        <HeaderNav />
-      </AppShell.Header>
-      <AppShell.Main pt={`calc(${rem(60)} + var(--mantine-spacing-md))`}>
-        <Box>{children}</Box>
-      </AppShell.Main>
-      <AppShell.Footer>
-        <FooterNav />
-      </AppShell.Footer>
-    </AppShell>
+    <Box display="flex" flexDirection="column" minHeight="100vh">
+      <HeaderNav />
+      <Box flexGrow={1} width="-webkit-fill-available">
+        {children}
+      </Box>
+      <FooterNav />
+    </Box>
   );
 }
 

From e2b48c76226b98a35dbe4ef53ce939fe37425b10 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Sat, 13 Jan 2024 15:35:23 -0300
Subject: [PATCH 27/43] Add missing name prop

---
 docs/src/app/examples/assistant/gen-with-assistant/page.tsx   | 2 ++
 .../src/app/examples/assistant/multi-field-assistant/page.tsx | 4 ++++
 .../app/examples/assistant/single-field-assistant/page.tsx    | 1 +
 docs/src/app/examples/generation/checklist/page.tsx           | 2 ++
 docs/src/app/examples/generation/entity-relationship/page.tsx | 2 ++
 docs/src/app/examples/generation/exam/page.tsx                | 2 ++
 docs/src/app/examples/generation/generic/page.tsx             | 2 ++
 docs/src/app/examples/generation/legal/page.tsx               | 2 ++
 8 files changed, 17 insertions(+)

diff --git a/docs/src/app/examples/assistant/gen-with-assistant/page.tsx b/docs/src/app/examples/assistant/gen-with-assistant/page.tsx
index 6584d28..0202ddb 100644
--- a/docs/src/app/examples/assistant/gen-with-assistant/page.tsx
+++ b/docs/src/app/examples/assistant/gen-with-assistant/page.tsx
@@ -73,6 +73,7 @@ export default function ExamSchemaGenWithAssistantExample() {
         <TextField
           multiline
           fullWidth
+          name="content"
           label="Full content text:"
           placeholder="Put text or HTML content here..."
           minRows={6}
@@ -82,6 +83,7 @@ export default function ExamSchemaGenWithAssistantExample() {
         <TextField
           multiline
           fullWidth
+          name="prompt"
           label="Prompt:"
           placeholder={`e.g. ${defaultPrompt}`}
           value={prompt}
diff --git a/docs/src/app/examples/assistant/multi-field-assistant/page.tsx b/docs/src/app/examples/assistant/multi-field-assistant/page.tsx
index 4568068..7a17715 100644
--- a/docs/src/app/examples/assistant/multi-field-assistant/page.tsx
+++ b/docs/src/app/examples/assistant/multi-field-assistant/page.tsx
@@ -67,6 +67,7 @@ export default function MultiFieldFormAssistant() {
           <TextField
             required
             fullWidth
+            name="title"
             label="Title"
             placeholder="Write the title here"
             disabled={isLoading}
@@ -77,6 +78,7 @@ export default function MultiFieldFormAssistant() {
             required
             multiline
             fullWidth
+            name="description"
             label="Description"
             placeholder="Write the description here"
             minRows={4}
@@ -105,6 +107,7 @@ export default function MultiFieldFormAssistant() {
               <TextField
                 {...params}
                 required
+                name="category"
                 label="Category"
                 placeholder="Pick a category"
                 value={formValues.category}
@@ -119,6 +122,7 @@ export default function MultiFieldFormAssistant() {
               <TextField
                 {...params}
                 required
+                name="priority"
                 label="Priority"
                 placeholder="Pick a priority"
                 value={formValues.priority}
diff --git a/docs/src/app/examples/assistant/single-field-assistant/page.tsx b/docs/src/app/examples/assistant/single-field-assistant/page.tsx
index f54b1ab..23eda9d 100644
--- a/docs/src/app/examples/assistant/single-field-assistant/page.tsx
+++ b/docs/src/app/examples/assistant/single-field-assistant/page.tsx
@@ -47,6 +47,7 @@ export default function SingleFieldFormAssistant() {
             required
             multiline
             fullWidth
+            name="recipe"
             label="Recipe"
             placeholder="Write a Recipe here"
             minRows={10}
diff --git a/docs/src/app/examples/generation/checklist/page.tsx b/docs/src/app/examples/generation/checklist/page.tsx
index e8a8e70..bb3e029 100644
--- a/docs/src/app/examples/generation/checklist/page.tsx
+++ b/docs/src/app/examples/generation/checklist/page.tsx
@@ -36,6 +36,7 @@ export default function ChecklistSchemaGenExample() {
         <TextField
           multiline
           fullWidth
+          name="content"
           label="Full content text:"
           placeholder="Put text or HTML content here..."
           helperText={
@@ -57,6 +58,7 @@ export default function ChecklistSchemaGenExample() {
         <TextField
           multiline
           fullWidth
+          name="prompt"
           label="Prompt:"
           placeholder={`e.g. ${defaultPrompt}`}
           value={prompt}
diff --git a/docs/src/app/examples/generation/entity-relationship/page.tsx b/docs/src/app/examples/generation/entity-relationship/page.tsx
index 737ef21..5d81d82 100644
--- a/docs/src/app/examples/generation/entity-relationship/page.tsx
+++ b/docs/src/app/examples/generation/entity-relationship/page.tsx
@@ -63,6 +63,7 @@ export default function ERSchemaGenExample() {
         <TextField
           multiline
           fullWidth
+          name="content"
           label="Mermaid diagram for Entity-Relationship Model:"
           placeholder="Put Mermaid text here..."
           value={content}
@@ -72,6 +73,7 @@ export default function ERSchemaGenExample() {
         <TextField
           multiline
           fullWidth
+          name="prompt"
           label="Prompt:"
           placeholder={`e.g. ${defaultPrompt}`}
           value={prompt}
diff --git a/docs/src/app/examples/generation/exam/page.tsx b/docs/src/app/examples/generation/exam/page.tsx
index dfe4857..46ff2a2 100644
--- a/docs/src/app/examples/generation/exam/page.tsx
+++ b/docs/src/app/examples/generation/exam/page.tsx
@@ -54,6 +54,7 @@ export default function ExamSchemaGenExample() {
         <TextField
           multiline
           fullWidth
+          name="content"
           label="Full content text:"
           placeholder="Put text or HTML content here..."
           minRows={6}
@@ -63,6 +64,7 @@ export default function ExamSchemaGenExample() {
         <TextField
           multiline
           fullWidth
+          name="prompt"
           label="Prompt:"
           placeholder={`e.g. ${defaultPrompt}`}
           value={prompt}
diff --git a/docs/src/app/examples/generation/generic/page.tsx b/docs/src/app/examples/generation/generic/page.tsx
index c586b80..e8a62cd 100644
--- a/docs/src/app/examples/generation/generic/page.tsx
+++ b/docs/src/app/examples/generation/generic/page.tsx
@@ -34,6 +34,7 @@ export default function GenericSchemaGenExample() {
         <TextField
           multiline
           fullWidth
+          name="content"
           label="Content"
           helperText="Content to use for generating the form"
           placeholder="Put text or HTML content here..."
@@ -44,6 +45,7 @@ export default function GenericSchemaGenExample() {
         <TextField
           multiline
           fullWidth
+          name="prompt"
           label="Prompt"
           helperText="Prompt to use for generating the form"
           placeholder="e.g. generate a 5 question exam to ensure the reader learned this content"
diff --git a/docs/src/app/examples/generation/legal/page.tsx b/docs/src/app/examples/generation/legal/page.tsx
index 66d621d..14ebcf0 100644
--- a/docs/src/app/examples/generation/legal/page.tsx
+++ b/docs/src/app/examples/generation/legal/page.tsx
@@ -36,6 +36,7 @@ export default function LegalSchemaGenExample() {
         <TextField
           multiline
           fullWidth
+          name="content"
           label="Full contract text:"
           placeholder="Put text or HTML content here..."
           helperText={
@@ -54,6 +55,7 @@ export default function LegalSchemaGenExample() {
         <TextField
           multiline
           fullWidth
+          name="prompt"
           label="Prompt:"
           placeholder={`e.g. ${defaultPrompt}`}
           value={prompt}

From d6a127e0d3d2e02d771b6bbdab15c12d2c545a0a Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Sat, 13 Jan 2024 16:06:32 -0300
Subject: [PATCH 28/43] Fix console warning

---
 docs/src/components/Welcome/Welcome.tsx           | 15 ++++++---------
 docs/src/layout/HeaderNav/NavItemButtonMobile.tsx |  2 +-
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/docs/src/components/Welcome/Welcome.tsx b/docs/src/components/Welcome/Welcome.tsx
index fc81fce..0048192 100644
--- a/docs/src/components/Welcome/Welcome.tsx
+++ b/docs/src/components/Welcome/Welcome.tsx
@@ -15,15 +15,12 @@ export function Welcome() {
         justifyContent="space-between"
       >
         <Stack maxWidth={456} spacing={2}>
-          <Stack>
-            <Typography variant="h3">
-              <Box component="span" borderRadius={1} paddingY={0.5} paddingX={1} sx={{ backgroundColor: blue[50] }}>
-                Supercharge
-              </Box>{' '}
-              your
-              <Typography variant="h3">forms with AI</Typography>
-            </Typography>
-          </Stack>
+          <Typography variant="h3">
+            <Box component="span" borderRadius={1} paddingY={0.5} paddingX={1} sx={{ backgroundColor: blue[50] }}>
+              Supercharge
+            </Box>{' '}
+            your forms with AI
+          </Typography>
 
           <Typography variant="body1">
             Build and enhance your{' '}
diff --git a/docs/src/layout/HeaderNav/NavItemButtonMobile.tsx b/docs/src/layout/HeaderNav/NavItemButtonMobile.tsx
index 798f183..cca5ae8 100644
--- a/docs/src/layout/HeaderNav/NavItemButtonMobile.tsx
+++ b/docs/src/layout/HeaderNav/NavItemButtonMobile.tsx
@@ -30,7 +30,7 @@ const NavItemButtonMobile = ({ name, examples, tutorialLink }: Props) => {
             }}
           />
           {examples.map((example) => (
-            <ExampleDocLink item={example} />
+            <ExampleDocLink key={example.title} item={example} />
           ))}
         </List>
       </Collapse>

From 8857b9087bc465ff21b522584200ba9dfb0a3f5c Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Mon, 15 Jan 2024 10:41:37 -0300
Subject: [PATCH 29/43] Fix drawer nav and footer styling

---
 docs/src/MuiThemeWrapper.tsx            |  1 +
 docs/src/layout/FooterNav/FooterNav.tsx |  8 ++++----
 docs/src/layout/HeaderNav/HeaderNav.tsx | 18 +++++++++++++++---
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/docs/src/MuiThemeWrapper.tsx b/docs/src/MuiThemeWrapper.tsx
index 52883e8..3a59438 100644
--- a/docs/src/MuiThemeWrapper.tsx
+++ b/docs/src/MuiThemeWrapper.tsx
@@ -9,6 +9,7 @@ const MuiThemeWrapper = ({ children }: { children: ReactNode }) => {
       MuiButton: {
         styleOverrides: {
           root: {
+            minWidth: 0, // Disable minimum width for buttons
             textTransform: 'none', // Disable auto-capitalization of button text
           },
         },
diff --git a/docs/src/layout/FooterNav/FooterNav.tsx b/docs/src/layout/FooterNav/FooterNav.tsx
index bb35245..efba622 100644
--- a/docs/src/layout/FooterNav/FooterNav.tsx
+++ b/docs/src/layout/FooterNav/FooterNav.tsx
@@ -1,10 +1,10 @@
-import { Box, Link } from '@mui/material';
+import { Box, Link, Typography } from '@mui/material';
 import { grey } from '@mui/material/colors';
 
 const FooterNav = () => (
   <Box sx={{ position: 'sticky', bottom: 0, backgroundColor: '#fff', borderTop: `1px solid ${grey[300]}` }}>
-    <Box component="footer">
-      <Box display="flex" alignItems="center" height={60} paddingX={4} gap={0.5}>
+    <Box component="footer" padding={3}>
+      <Typography variant="body2" display="flex" alignItems="center" gap={0.5}>
         © 2024
         <Link href="https://www.vinta.com.br" target="_blank">
           Vinta Software
@@ -13,7 +13,7 @@ const FooterNav = () => (
         <Link href="https://www.vinta.com.br" target="_blank">
           meet the creators!
         </Link>
-      </Box>
+      </Typography>
     </Box>
   </Box>
 );
diff --git a/docs/src/layout/HeaderNav/HeaderNav.tsx b/docs/src/layout/HeaderNav/HeaderNav.tsx
index caf8804..8ca1391 100644
--- a/docs/src/layout/HeaderNav/HeaderNav.tsx
+++ b/docs/src/layout/HeaderNav/HeaderNav.tsx
@@ -102,7 +102,7 @@ export default function HeaderNav() {
             aria-label="open drawer"
             edge="start"
             onClick={handleDrawerToggle}
-            sx={{ mr: 2, display: { md: 'none' } }}
+            sx={{ display: { md: 'none' } }}
           >
             <MenuIcon />
           </IconButton>
@@ -117,13 +117,25 @@ export default function HeaderNav() {
         onClose={handleDrawerToggle}
         PaperProps={{ style: { width: '90%', height: '100%' } }}
       >
-        <Box display="flex" justifyContent="flex-end" padding={1}>
+        <Box display="flex" justifyContent="space-between" alignItems="center" paddingY={1} paddingX={3}>
+          <Typography
+            variant="h6"
+            component="span"
+            sx={{
+              background: 'linear-gradient(#2D0FED, #9D3EC2)',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+            }}
+          >
+            <a href="/">AI Form Toolkit</a>
+          </Typography>
           <IconButton onClick={handleDrawerToggle}>
             <CloseIcon />
           </IconButton>
         </Box>
 
         <Divider />
+
         <List>
           <ListItem>
             <Button href="/">Home</Button>
@@ -154,7 +166,7 @@ export default function HeaderNav() {
         <Divider />
 
         <List>
-          <ListItem>
+          <ListItem sx={{ maxWidth: 350, marginX: 'auto' }}>
             <Button fullWidth variant="contained" href="/tutorial/getting-started/">
               Install
             </Button>

From 895edb4f460c6c91911fef55657bd0e30f383f07 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Mon, 15 Jan 2024 12:36:40 -0300
Subject: [PATCH 30/43] Fix autocomplete field management

---
 .../assistant/multi-field-assistant/page.tsx  | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/docs/src/app/examples/assistant/multi-field-assistant/page.tsx b/docs/src/app/examples/assistant/multi-field-assistant/page.tsx
index 7a17715..112194d 100644
--- a/docs/src/app/examples/assistant/multi-field-assistant/page.tsx
+++ b/docs/src/app/examples/assistant/multi-field-assistant/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEvent, FormEvent, useState } from 'react';
+import { FormEvent, useState } from 'react';
 import { Autocomplete, Box, Button, CircularProgress, IconButton, TextField, Typography, Stack } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined';
@@ -22,7 +22,11 @@ export default function MultiFieldFormAssistant() {
   const { fillSingleField, fillFields } = useFormAssistant({
     formTitle: 'Create Issue',
     formGetValues: () => formValues,
-    formSetValues: setFormValues,
+    formSetValues: (newValues: Record<string, string>) =>
+      setFormValues({
+        ...formValues,
+        ...newValues,
+      }),
     fieldChoices: {
       category: CATEGORY_CHOICES,
       priority: PRIORITY_CHOICES,
@@ -31,10 +35,10 @@ export default function MultiFieldFormAssistant() {
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingDescription, setIsLoadingDescription] = useState(false);
 
-  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (name: string, value: string | null) => {
     setFormValues({
       ...formValues,
-      [event.target.name]: event.target.value,
+      [name]: value || '',
     });
   };
 
@@ -72,7 +76,7 @@ export default function MultiFieldFormAssistant() {
             placeholder="Write the title here"
             disabled={isLoading}
             value={formValues.title}
-            onChange={handleInputChange}
+            onChange={(event) => handleInputChange('title', event.target.value)}
           />
           <TextField
             required
@@ -83,14 +87,14 @@ export default function MultiFieldFormAssistant() {
             placeholder="Write the description here"
             minRows={4}
             value={formValues.description}
-            onChange={handleInputChange}
-            disabled={isLoading}
+            onChange={(event) => handleInputChange('description', event.target.value)}
+            disabled={isLoading || isLoadingDescription}
             InputProps={{
               endAdornment: (
                 <IconButton
                   aria-label="Enhance"
                   size="large"
-                  disabled={isLoadingDescription}
+                  disabled={isLoading || isLoadingDescription}
                   onClick={() => {
                     setIsLoadingDescription(true);
                     fillSingleField('description').finally(() => setIsLoadingDescription(false));
@@ -103,6 +107,8 @@ export default function MultiFieldFormAssistant() {
           />
           <Autocomplete
             options={CATEGORY_CHOICES}
+            value={formValues.category}
+            onChange={(_, value) => handleInputChange('category', value)}
             renderInput={(params) => (
               <TextField
                 {...params}
@@ -110,14 +116,14 @@ export default function MultiFieldFormAssistant() {
                 name="category"
                 label="Category"
                 placeholder="Pick a category"
-                value={formValues.category}
-                onChange={handleInputChange}
                 disabled={isLoading}
               />
             )}
           />
           <Autocomplete
             options={PRIORITY_CHOICES}
+            value={formValues.priority}
+            onChange={(_, value) => handleInputChange('priority', value)}
             renderInput={(params) => (
               <TextField
                 {...params}
@@ -125,8 +131,6 @@ export default function MultiFieldFormAssistant() {
                 name="priority"
                 label="Priority"
                 placeholder="Pick a priority"
-                value={formValues.priority}
-                onChange={handleInputChange}
                 disabled={isLoading}
               />
             )}
@@ -138,6 +142,7 @@ export default function MultiFieldFormAssistant() {
               loadingPosition="start"
               loading={isLoading}
               startIcon={<PsychologyOutlinedIcon />}
+              disabled={isLoading || isLoadingDescription}
               onClick={() => {
                 setIsLoading(true);
                 fillFields().finally(() => setIsLoading(false));

From 8ed33ed8959e681939c719befbd9026f5c2f4b61 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Mon, 15 Jan 2024 12:39:00 -0300
Subject: [PATCH 31/43] Fix footer styling

---
 docs/src/layout/FooterNav/FooterNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/layout/FooterNav/FooterNav.tsx b/docs/src/layout/FooterNav/FooterNav.tsx
index efba622..77d0685 100644
--- a/docs/src/layout/FooterNav/FooterNav.tsx
+++ b/docs/src/layout/FooterNav/FooterNav.tsx
@@ -2,7 +2,7 @@ import { Box, Link, Typography } from '@mui/material';
 import { grey } from '@mui/material/colors';
 
 const FooterNav = () => (
-  <Box sx={{ position: 'sticky', bottom: 0, backgroundColor: '#fff', borderTop: `1px solid ${grey[300]}` }}>
+  <Box sx={{ position: 'sticky', bottom: 0, backgroundColor: '#fff', borderTop: `1px solid ${grey[300]}`, zIndex: 1 }}>
     <Box component="footer" padding={3}>
       <Typography variant="body2" display="flex" alignItems="center" gap={0.5}>
         © 2024

From 598c0cdfc7a00ac9b135778736965d986f2c1808 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Mon, 15 Jan 2024 14:59:45 -0300
Subject: [PATCH 32/43] Migrate docs styles to use MUI instead of Mantine

---
 docs/src/app/docs-layout.tsx | 87 +++++++++++++++++++++++++++++++++---
 docs/src/app/docs-styles.css | 63 --------------------------
 2 files changed, 80 insertions(+), 70 deletions(-)
 delete mode 100644 docs/src/app/docs-styles.css

diff --git a/docs/src/app/docs-layout.tsx b/docs/src/app/docs-layout.tsx
index 3aa9122..3fb27e2 100644
--- a/docs/src/app/docs-layout.tsx
+++ b/docs/src/app/docs-layout.tsx
@@ -2,21 +2,94 @@
 
 import { ReactNode } from 'react';
 import { Box } from '@mui/material';
+import { GlobalStyles } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 
 import Layout from '@/layout';
 
-import './docs-styles.css';
-
 type Props = {
   children: ReactNode;
 };
 
 export default function DocsLayout({ children }: Props) {
+  const docsMarkdownStyles = (theme: Theme) => ({
+    h1: {
+      marginTop: 0,
+      marginBottom: theme.spacing(1),
+    },
+    h2: {
+      marginTop: 0,
+      marginBottom: theme.spacing(1),
+    },
+    h3: {
+      marginTop: 0,
+      marginBottom: theme.spacing(1),
+    },
+    h4: {
+      marginTop: 0,
+      marginBottom: theme.spacing(1),
+    },
+    h5: {
+      marginTop: 0,
+      marginBottom: theme.spacing(1),
+    },
+    h6: {
+      marginTop: 0,
+      marginBottom: theme.spacing(1),
+    },
+    figure: {
+      margin: 0,
+    },
+    pre: {
+      overflowX: 'auto',
+      borderRadius: theme.shape.borderRadius,
+      padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+    },
+    'span[data-highlighted-line]': {
+      borderBottomColor: '#9333EA',
+      backgroundColor: '#6B21A880',
+      fontWeight: 700,
+      color: '#E9D5FF',
+    },
+    code: {
+      counterReset: 'line',
+      fontSize: '0.8125rem',
+    },
+    'code > [data-line]::before': {
+      counterIncrement: 'line',
+      content: 'counter(line)',
+      display: 'inline-block',
+      width: theme.spacing(1),
+      marginRight: theme.spacing(1.5),
+      textAlign: 'right',
+      color: 'gray',
+    },
+    'code[data-line-numbers-max-digits="2"] > [data-line]::before': {
+      width: theme.spacing(2),
+    },
+    'code[data-line-numbers-max-digits="3"] > [data-line]::before': {
+      width: theme.spacing(3),
+    },
+    img: {
+      width: '100%',
+      height: 'auto',
+      border: `2px solid ${theme.palette.grey[200]}`,
+    },
+    '.doc-form-example': {
+      borderRadius: theme.shape.borderRadius,
+      border: `2px solid ${theme.palette.grey[200]}`,
+      padding: theme.spacing(1),
+    },
+  });
+
   return (
-    <Layout>
-      <Box maxWidth={600} mx="auto" paddingY={4} paddingX={2.5}>
-        {children}
-      </Box>
-    </Layout>
+    <>
+      <GlobalStyles styles={docsMarkdownStyles} />
+      <Layout>
+        <Box maxWidth={600} mx="auto" paddingY={4} paddingX={2.5}>
+          {children}
+        </Box>
+      </Layout>
+    </>
   );
 }
diff --git a/docs/src/app/docs-styles.css b/docs/src/app/docs-styles.css
deleted file mode 100644
index 02111a1..0000000
--- a/docs/src/app/docs-styles.css
+++ /dev/null
@@ -1,63 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-figure {
-  margin: 0;
-}
-
-pre {
-  overflow-x: auto;
-  border-radius: var(--mantine-radius-sm);
-  padding: var(--mantine-spacing-sm) var(--mantine-spacing-xs);
-}
-
-span[data-highlighted-line] {
-  border-bottom-color: rgb(147 51 234);
-  background-color: #6b21a880;
-  font-weight: 700;
-  color: rgb(233 213 255) !important;
-}
-
-code {
-  counter-reset: line;
-  font-size: calc(0.8125rem * var(--mantine-scale));
-}
-
-code > [data-line]::before {
-  counter-increment: line;
-  content: counter(line);
-
-  /* Other styling */
-  display: inline-block;
-  width: 1rem;
-  margin-right: 1.5rem;
-  text-align: right;
-  color: gray;
-}
-
-code[data-line-numbers-max-digits='2'] > [data-line]::before {
-  width: 2rem;
-}
-
-code[data-line-numbers-max-digits='3'] > [data-line]::before {
-  width: 3rem;
-}
-
-img {
-  width: 100%;
-  height: auto;
-  border: 2px solid var(--mantine-color-gray-2);
-}
-
-.doc-form-example {
-  border-radius: var(--mantine-radius-sm);
-  border: 2px solid var(--mantine-color-gray-2);
-  padding: var(--mantine-spacing-sm);
-}

From 7cb1cba83940d624aa054f70d892c849111a7430 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Mon, 15 Jan 2024 15:00:12 -0300
Subject: [PATCH 33/43] Remove unused Mantine theme

---
 docs/src/app/layout.tsx | 3 +--
 docs/src/theme.ts       | 5 -----
 2 files changed, 1 insertion(+), 7 deletions(-)
 delete mode 100644 docs/src/theme.ts

diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
index 88e0220..5333de0 100644
--- a/docs/src/app/layout.tsx
+++ b/docs/src/app/layout.tsx
@@ -9,7 +9,6 @@ import {
   AssistantArgsType,
   GeneratorArgsType,
 } from '@ai-form-toolkit/server';
-import { theme } from '@/theme';
 import MuiThemeWrapper from '@/MuiThemeWrapper';
 
 export const metadata = {
@@ -46,7 +45,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           generateFormAutofillFn={myGenerateGPTFormAutofill}
           generateFormSchemaFn={myGenerateGPTFormSchema}
         />
-        <MantineProvider theme={theme}>
+        <MantineProvider>
           <MuiThemeWrapper>{children}</MuiThemeWrapper>
         </MantineProvider>
       </body>
diff --git a/docs/src/theme.ts b/docs/src/theme.ts
deleted file mode 100644
index 223cced..0000000
--- a/docs/src/theme.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createTheme } from '@mantine/core';
-
-export const theme = createTheme({
-  /* Put your mantine theme override here */
-});

From bc7af06c794c61420bfa638fe224984e31808f73 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Mon, 15 Jan 2024 15:08:29 -0300
Subject: [PATCH 34/43] Update docs styling

---
 docs/src/app/docs-layout.tsx | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/docs/src/app/docs-layout.tsx b/docs/src/app/docs-layout.tsx
index 3fb27e2..16ef2f0 100644
--- a/docs/src/app/docs-layout.tsx
+++ b/docs/src/app/docs-layout.tsx
@@ -14,28 +14,22 @@ type Props = {
 export default function DocsLayout({ children }: Props) {
   const docsMarkdownStyles = (theme: Theme) => ({
     h1: {
-      marginTop: 0,
-      marginBottom: theme.spacing(1),
+      marginY: theme.spacing(1),
     },
     h2: {
-      marginTop: 0,
-      marginBottom: theme.spacing(1),
+      marginY: theme.spacing(1),
     },
     h3: {
-      marginTop: 0,
-      marginBottom: theme.spacing(1),
+      marginY: theme.spacing(1),
     },
     h4: {
-      marginTop: 0,
-      marginBottom: theme.spacing(1),
+      marginY: theme.spacing(1),
     },
     h5: {
-      marginTop: 0,
-      marginBottom: theme.spacing(1),
+      marginY: theme.spacing(1),
     },
     h6: {
-      marginTop: 0,
-      marginBottom: theme.spacing(1),
+      marginY: theme.spacing(1),
     },
     figure: {
       margin: 0,
@@ -86,7 +80,7 @@ export default function DocsLayout({ children }: Props) {
     <>
       <GlobalStyles styles={docsMarkdownStyles} />
       <Layout>
-        <Box maxWidth={600} mx="auto" paddingY={4} paddingX={2.5}>
+        <Box maxWidth={600} mx="auto" paddingTop={1} paddingBottom={4} paddingX={2.5}>
           {children}
         </Box>
       </Layout>

From 93e254bbeebbd153d231f9dcc200e994c40fd791 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Tue, 16 Jan 2024 10:57:34 -0300
Subject: [PATCH 35/43] Remove remaining mantine usage

---
 docs/package-lock.json                        | 377 ++++++++++++++++++
 docs/package.json                             |   1 +
 docs/src/MuiThemeWrapper.tsx                  |  15 +-
 .../generation/entity-relationship/page.tsx   |   2 -
 docs/src/app/examples/generation/styles.css   |   8 -
 docs/src/app/layout.tsx                       |   6 +-
 .../tutorial/form-generation/components.tsx   |  20 +-
 docs/src/components/Forms/SchemaFormDemo.tsx  |  18 +-
 docs/src/components/Forms/SchemaJsonTabs.tsx  |  49 +++
 docs/src/layout/index.tsx                     |   3 -
 10 files changed, 446 insertions(+), 53 deletions(-)
 delete mode 100644 docs/src/app/examples/generation/styles.css
 create mode 100644 docs/src/components/Forms/SchemaJsonTabs.tsx

diff --git a/docs/package-lock.json b/docs/package-lock.json
index 7c99f9e..90430fd 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -36,6 +36,7 @@
         "next": "14.0.4",
         "openai": "^4.23.0",
         "react": "18.2.0",
+        "react-code-blocks": "^0.1.5",
         "react-dom": "18.2.0",
         "rehype-image-size": "^1.0.0",
         "rehype-img-size": "^1.0.1",
@@ -1844,6 +1845,11 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+    },
     "node_modules/@types/unist": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
@@ -2479,6 +2485,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001566",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001566.tgz",
@@ -2694,6 +2708,24 @@
         "node": "*"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3156,6 +3188,18 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -3200,6 +3244,14 @@
       "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.7.2.tgz",
       "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A=="
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/formdata-node": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz",
@@ -4171,6 +4223,27 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/lowlight/node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -5731,6 +5804,11 @@
         "postcss": "^8.2.1"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -5757,6 +5835,14 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5838,6 +5924,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-code-blocks": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/react-code-blocks/-/react-code-blocks-0.1.5.tgz",
+      "integrity": "sha512-p57YPvry1OY0fS/oDVfK7BBgy89jHJguyyzNbjZvMUR2/90oB0iv3D6aS/PBjuQp7JyjlRoaZ/2WRxvOyyAAEw==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.4",
+        "react-syntax-highlighter": "^15.5.0",
+        "styled-components": "^6.1.0",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -5935,6 +6038,29 @@
         }
       }
     },
+    "node_modules/react-syntax-highlighter": {
+      "version": "15.5.0",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
+      "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.27.0",
+        "refractor": "^3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
+    "node_modules/react-syntax-highlighter/node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/react-textarea-autosize": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
@@ -5966,6 +6092,166 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/refractor": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+      "dependencies": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.27.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/@types/hast": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.9.tgz",
+      "integrity": "sha512-pTHyNlaMD/oKJmS+ZZUyFUcsZeBZpC0lmGquw98CqRVNgAdJZJeD7GoeLiT6Xbx5rU9VCjSt0RwEvDgzh4obFw==",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/refractor/node_modules/character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/comma-separated-tokens": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/hast-util-parse-selector": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/refractor/node_modules/hastscript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.0.0",
+        "property-information": "^5.0.0",
+        "space-separated-tokens": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/refractor/node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "dependencies": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/prismjs": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/refractor/node_modules/property-information": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
@@ -6446,6 +6732,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shikiji": {
       "version": "0.9.10",
       "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.9.10.tgz",
@@ -6502,6 +6793,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -6545,6 +6845,75 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz",
+      "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.1",
+        "@emotion/unitless": "0.8.0",
+        "@types/stylis": "4.2.0",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.2",
+        "postcss": "8.4.31",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.1",
+        "tslib": "2.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -7535,6 +7904,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/docs/package.json b/docs/package.json
index 2dab69e..fc84d2a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -37,6 +37,7 @@
     "next": "14.0.4",
     "openai": "^4.23.0",
     "react": "18.2.0",
+    "react-code-blocks": "^0.1.5",
     "react-dom": "18.2.0",
     "rehype-image-size": "^1.0.0",
     "rehype-img-size": "^1.0.1",
diff --git a/docs/src/MuiThemeWrapper.tsx b/docs/src/MuiThemeWrapper.tsx
index 3a59438..b2c5931 100644
--- a/docs/src/MuiThemeWrapper.tsx
+++ b/docs/src/MuiThemeWrapper.tsx
@@ -2,6 +2,7 @@
 
 import { ReactNode } from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { CssBaseline } from '@mui/material';
 
 const MuiThemeWrapper = ({ children }: { children: ReactNode }) => {
   const theme = createTheme({
@@ -14,10 +15,22 @@ const MuiThemeWrapper = ({ children }: { children: ReactNode }) => {
           },
         },
       },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            textTransform: 'none', // Disable auto-capitalization of tab text
+          },
+        },
+      },
     },
   });
 
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
 };
 
 export default MuiThemeWrapper;
diff --git a/docs/src/app/examples/generation/entity-relationship/page.tsx b/docs/src/app/examples/generation/entity-relationship/page.tsx
index 5d81d82..5cd7cc8 100644
--- a/docs/src/app/examples/generation/entity-relationship/page.tsx
+++ b/docs/src/app/examples/generation/entity-relationship/page.tsx
@@ -12,8 +12,6 @@ import { useGeneratedFormSchema } from '@ai-form-toolkit/client';
 import LoadingBackdrop from '@/components/Examples/LoadingBackdrop';
 import SchemaFormDemo from '@/components/Forms/SchemaFormDemo';
 
-import '../styles.css';
-
 export default function ERSchemaGenExample() {
   const defaultContent = dedent`
   erDiagram
diff --git a/docs/src/app/examples/generation/styles.css b/docs/src/app/examples/generation/styles.css
deleted file mode 100644
index b11dbf8..0000000
--- a/docs/src/app/examples/generation/styles.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.control-label {
-  font-weight: bold;
-  display: block;
-}
-
-.field-radio-group {
-  margin-bottom: 1em;
-}
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
index 5333de0..31617d6 100644
--- a/docs/src/app/layout.tsx
+++ b/docs/src/app/layout.tsx
@@ -1,7 +1,5 @@
 import HolyLoader from 'holy-loader';
-import '@mantine/core/styles.css';
 import React, { ReactNode } from 'react';
-import { MantineProvider } from '@mantine/core';
 import { AIFormToolkitConfig } from '@ai-form-toolkit/client';
 import {
   customGenerateGPTFormAutofill,
@@ -45,9 +43,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           generateFormAutofillFn={myGenerateGPTFormAutofill}
           generateFormSchemaFn={myGenerateGPTFormSchema}
         />
-        <MantineProvider>
-          <MuiThemeWrapper>{children}</MuiThemeWrapper>
-        </MantineProvider>
+        <MuiThemeWrapper>{children}</MuiThemeWrapper>
       </body>
     </html>
   );
diff --git a/docs/src/app/tutorial/form-generation/components.tsx b/docs/src/app/tutorial/form-generation/components.tsx
index a844116..711e9e1 100644
--- a/docs/src/app/tutorial/form-generation/components.tsx
+++ b/docs/src/app/tutorial/form-generation/components.tsx
@@ -3,9 +3,9 @@
 import { useState } from 'react';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
-import { CodeHighlightTabs } from '@mantine/code-highlight';
 import SchemaForm from '@rjsf/mui';
 import { Button, Paper, Stack, TextField } from '@mui/material';
+import SchemaJsonTabs from '@/components/Forms/SchemaJsonTabs';
 
 export function BasicInputForm() {
   const [content, setContent] = useState('Name: ...\nAge: ...');
@@ -66,21 +66,5 @@ export function BasicGeneratedForm() {
 }
 
 export function BasicGeneratedSchemas() {
-  return (
-    <CodeHighlightTabs
-      code={[
-        {
-          fileName: 'JSONSchema.json',
-          code: JSON.stringify(formSchema || {}, null, 2),
-          language: 'json',
-        },
-        {
-          fileName: 'UISchema.json',
-          code: JSON.stringify(uiSchema || {}, null, 2),
-          language: 'json',
-        },
-      ]}
-      mb="md"
-    />
-  );
+  return <SchemaJsonTabs formSchema={formSchema} uiSchema={uiSchema} />;
 }
diff --git a/docs/src/components/Forms/SchemaFormDemo.tsx b/docs/src/components/Forms/SchemaFormDemo.tsx
index 4e64df3..972b0e2 100644
--- a/docs/src/components/Forms/SchemaFormDemo.tsx
+++ b/docs/src/components/Forms/SchemaFormDemo.tsx
@@ -1,9 +1,9 @@
 import validator from '@rjsf/validator-ajv8';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
-import { CodeHighlightTabs } from '@mantine/code-highlight';
 import { FormProps, IChangeEvent } from '@rjsf/core';
 import SchemaForm from '@rjsf/mui';
 import { Stack, Typography } from '@mui/material';
+import SchemaJsonTabs from './SchemaJsonTabs';
 
 export default function SchemaFormDemo({
   formSchema,
@@ -26,21 +26,7 @@ export default function SchemaFormDemo({
 
         <Stack spacing={2} paddingTop={1}>
           <Typography variant="h5">Actual form code:</Typography>
-          <CodeHighlightTabs
-            code={[
-              {
-                fileName: 'JSONSchema.json',
-                code: JSON.stringify(formSchema || {}, null, 2),
-                language: 'json',
-              },
-              {
-                fileName: 'UISchema.json',
-                code: JSON.stringify(uiSchema || {}, null, 2),
-                language: 'json',
-              },
-            ]}
-            mb="md"
-          />
+          <SchemaJsonTabs formSchema={formSchema} uiSchema={uiSchema} />
         </Stack>
       </>
     )
diff --git a/docs/src/components/Forms/SchemaJsonTabs.tsx b/docs/src/components/Forms/SchemaJsonTabs.tsx
new file mode 100644
index 0000000..e62bfa1
--- /dev/null
+++ b/docs/src/components/Forms/SchemaJsonTabs.tsx
@@ -0,0 +1,49 @@
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
+import { Box, Tab } from '@mui/material';
+import { TabContext, TabList, TabPanel } from '@mui/lab';
+import { CopyBlock } from 'react-code-blocks';
+import { SyntheticEvent, useState } from 'react';
+
+enum TabValue {
+  form = 'form',
+  ui = 'ui',
+}
+
+interface Props {
+  formSchema: RJSFSchema | null;
+  uiSchema: UiSchema<unknown, RJSFSchema> | undefined;
+}
+
+const SchemaJsonTabs = ({ formSchema, uiSchema }: Props) => {
+  const [value, setValue] = useState(TabValue.form);
+
+  const handleChange = (_: SyntheticEvent, newValue: TabValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%', fontFamily: 'monospace', fontSize: '0.8125rem' }}>
+      <TabContext value={value}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <TabList onChange={handleChange}>
+            <Tab label="JSONSchema.json" value={TabValue.form} sx={{ fontFamily: 'monospace' }} />
+            <Tab label="UISchema.json" value={TabValue.ui} sx={{ fontFamily: 'monospace' }} />
+          </TabList>
+        </Box>
+        <TabPanel value={TabValue.form}>
+          <CopyBlock
+            codeBlock
+            text={JSON.stringify(formSchema || {}, null, 2)}
+            language="json"
+            showLineNumbers={false}
+          />
+        </TabPanel>
+        <TabPanel value={TabValue.ui}>
+          <CopyBlock codeBlock text={JSON.stringify(uiSchema || {}, null, 2)} language="json" showLineNumbers={false} />
+        </TabPanel>
+      </TabContext>
+    </Box>
+  );
+};
+
+export default SchemaJsonTabs;
diff --git a/docs/src/layout/index.tsx b/docs/src/layout/index.tsx
index 23bfdde..1435831 100644
--- a/docs/src/layout/index.tsx
+++ b/docs/src/layout/index.tsx
@@ -3,9 +3,6 @@ import { Box } from '@mui/material';
 import HeaderNav from './HeaderNav/HeaderNav';
 import FooterNav from './FooterNav/FooterNav';
 
-// NOTE: This is needed for CodeHighlightTabs to work
-import '@mantine/code-highlight/styles.css';
-
 type LayoutProps = {
   children: ReactNode;
 };

From 605f4a5402c74adfc2eee55dbdade8cb06dd88a3 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Tue, 16 Jan 2024 11:06:38 -0300
Subject: [PATCH 36/43] Remove mantine-related dependencies

---
 .eslintrc.js            |   4 +-
 docs/next.config.mjs    |   1 -
 docs/package-lock.json  | 739 ----------------------------------------
 docs/package.json       |   8 -
 docs/postcss.config.cjs |  14 -
 package-lock.json       |  18 -
 package.json            |   1 -
 7 files changed, 2 insertions(+), 783 deletions(-)
 delete mode 100644 docs/postcss.config.cjs

diff --git a/.eslintrc.js b/.eslintrc.js
index 35c05f0..c118920 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,10 +1,10 @@
 module.exports = {
-  extends: ['plugin:prettier/recommended', 'mantine'],
+  extends: ['plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended'],
   env: {
     browser: true,
     es2021: true,
   },
-  plugins: ['react', 'testing-library'],
+  plugins: ['react', 'testing-library', '@typescript-eslint'],
   overrides: [
     {
       files: ['**/?(*.)+(spec|test).[jt]s?(x)'],
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 7b03b1f..9f2ca03 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -29,7 +29,6 @@ const nextConfig = {
     ignoreDuringBuilds: true,
   },
   experimental: {
-    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
     mdxRs: false,
   },
 };
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 90430fd..a13923b 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -12,11 +12,6 @@
         "@ai-form-toolkit/server": "file:../packages/server",
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
-        "@mantine/code-highlight": "^7.3.2",
-        "@mantine/core": "^7.3.2",
-        "@mantine/dates": "^7.3.2",
-        "@mantine/form": "^7.3.2",
-        "@mantine/hooks": "^7.3.2",
         "@mdx-js/react": "^3.0.0",
         "@mui/icons-material": "^5.15.4",
         "@mui/lab": "^5.0.0-alpha.160",
@@ -53,9 +48,6 @@
         "@types/node": "^20.10.4",
         "@types/react": "18.2.45",
         "babel-loader": "^9.1.3",
-        "postcss": "^8.4.32",
-        "postcss-preset-mantine": "1.11.1",
-        "postcss-simple-vars": "^7.0.1",
         "typescript": "5.3.3"
       }
     },
@@ -620,20 +612,6 @@
         "@floating-ui/utils": "^0.2.0"
       }
     },
-    "node_modules/@floating-ui/react": {
-      "version": "0.24.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.24.8.tgz",
-      "integrity": "sha512-AuYeDoaR8jtUlUXtZ1IJ/6jtBkGnSpJXbGNzokBL87VDJ8opMq1Bgrc0szhK482ReQY6KZsMoZCVSb4xwalkBA==",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.0.1",
-        "aria-hidden": "^1.2.3",
-        "tabbable": "^6.0.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
     "node_modules/@floating-ui/react-dom": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.5.tgz",
@@ -710,74 +688,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@mantine/code-highlight": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@mantine/code-highlight/-/code-highlight-7.3.2.tgz",
-      "integrity": "sha512-FtpM+lxDpgX1s8jiPdpHtmbRzjfERv6koWiNdkVQxVZQ0YTkigGjGH7mJZHJMKS3ZQJAozCqcGPZE9yICOvMjw==",
-      "dependencies": {
-        "clsx": "2.0.0",
-        "highlight.js": "^11.9.0"
-      },
-      "peerDependencies": {
-        "@mantine/core": "7.3.2",
-        "@mantine/hooks": "7.3.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      }
-    },
-    "node_modules/@mantine/core": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.3.2.tgz",
-      "integrity": "sha512-CwAuQogVLcLR7O9e1eOgi3gtk4XX6cnaqevAxzJJpIOIyCnHiQ3cEGINVXyUUjUUipBlvK3sqz3NPGJ2ekLFDQ==",
-      "dependencies": {
-        "@floating-ui/react": "^0.24.8",
-        "clsx": "2.0.0",
-        "react-number-format": "^5.3.1",
-        "react-remove-scroll": "^2.5.7",
-        "react-textarea-autosize": "8.5.3",
-        "type-fest": "^3.13.1"
-      },
-      "peerDependencies": {
-        "@mantine/hooks": "7.3.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      }
-    },
-    "node_modules/@mantine/dates": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-7.3.2.tgz",
-      "integrity": "sha512-mmP0PYpM9GYTXRhEL4Ulb+170vgW8fpGwRdVNuCCE/cyzIKHPJzaI2pEGR/i+sboH+RC1InCy/JaiDkPY6Fzlg==",
-      "dependencies": {
-        "clsx": "2.0.0"
-      },
-      "peerDependencies": {
-        "@mantine/core": "7.3.2",
-        "@mantine/hooks": "7.3.2",
-        "dayjs": ">=1.0.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      }
-    },
-    "node_modules/@mantine/form": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@mantine/form/-/form-7.3.2.tgz",
-      "integrity": "sha512-/qa1KQKVC46XWgIU190r3XM3Xld8Lsvz4L/an//TO67RnAGEdC5OCvr2JCb+fprZZi3YdxaKOkVNvP20W23qkg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "klona": "^2.0.6"
-      },
-      "peerDependencies": {
-        "react": "^18.2.0"
-      }
-    },
-    "node_modules/@mantine/hooks": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.3.2.tgz",
-      "integrity": "sha512-xgumuuI3PBWXff5N02HCI7PEy25mDEdyXDQklUYK93J6FKwpcosyZnGVitoUrV1gLtYYa9ZudeAWdhHuh/CpOg==",
-      "peerDependencies": {
-        "react": "^18.2.0"
-      }
-    },
     "node_modules/@mdx-js/loader": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-3.0.0.tgz",
@@ -1395,41 +1305,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.24",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.24.tgz",
@@ -2156,17 +2031,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
-    "node_modules/aria-hidden": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
-      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/aria-query": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
@@ -2392,18 +2256,6 @@
       "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
       "integrity": "sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA=="
     },
-    "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
-      "dependencies": {
-        "fill-range": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/browserslist": {
       "version": "4.22.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
@@ -2476,15 +2328,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/camelize": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
@@ -2598,14 +2441,6 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
-    "node_modules/clsx": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
-      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/collapse-white-space": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
@@ -2726,29 +2561,11 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
-    "node_modules/dayjs": {
-      "version": "1.11.10",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
-      "peer": true
-    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2871,11 +2688,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/detect-node-es": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
-      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
-    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -3146,48 +2958,11 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
-    "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
-    "node_modules/fastq": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
-      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
-      "dev": true,
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
     "node_modules/fault": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
@@ -3200,18 +2975,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
@@ -3313,14 +3076,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/get-nonce": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
-      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
@@ -3668,14 +3423,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/highlight.js": {
-      "version": "11.9.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
-      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -3759,14 +3506,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
@@ -3907,27 +3646,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-hexadecimal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
@@ -3947,15 +3665,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
     "node_modules/is-number-object": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
@@ -4169,14 +3878,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/klona": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -4611,15 +4312,6 @@
       "devOptional": true,
       "peer": true
     },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/micromark": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
@@ -5264,19 +4956,6 @@
         }
       ]
     },
-    "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
-      "dependencies": {
-        "braces": "^3.0.2",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -5662,148 +5341,6 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/postcss": {
-      "version": "8.4.32",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
-      "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-mixins": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-9.0.4.tgz",
-      "integrity": "sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==",
-      "dev": true,
-      "dependencies": {
-        "fast-glob": "^3.2.11",
-        "postcss-js": "^4.0.0",
-        "postcss-simple-vars": "^7.0.0",
-        "sugarss": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
-      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dev": true,
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.11"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-preset-mantine": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/postcss-preset-mantine/-/postcss-preset-mantine-1.11.1.tgz",
-      "integrity": "sha512-BMO+VzLP1X6Tm5sfmnFINpYsgVyN4LJheKz+25kT4JcPqccByIo4N0HCHI9B2zzduvdYadg6O/e+yQV7xLOs4g==",
-      "dev": true,
-      "dependencies": {
-        "postcss-mixins": "^9.0.4",
-        "postcss-nested": "^6.0.1"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.0"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
-      "dev": true,
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-simple-vars": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
-      "integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==",
-      "dev": true,
-      "engines": {
-        "node": ">=14.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.1"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -5883,26 +5420,6 @@
         "inherits": "~2.0.3"
       }
     },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -5959,85 +5476,6 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
-    "node_modules/react-number-format": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.3.1.tgz",
-      "integrity": "sha512-qpYcQLauIeEhCZUZY9jXZnnroOtdy3jYaS1zQ3M1Sr6r/KMOBEIGNIb7eKT19g2N1wbYgFgvDzs19hw5TrB8XQ==",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      },
-      "peerDependencies": {
-        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/react-remove-scroll": {
-      "version": "2.5.7",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
-      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.4",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-remove-scroll-bar": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
-      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
-      "dependencies": {
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-style-singleton": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
-      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
-      "dependencies": {
-        "get-nonce": "^1.0.0",
-        "invariant": "^2.2.4",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-syntax-highlighter": {
       "version": "15.5.0",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
@@ -6061,22 +5499,6 @@
         "node": "*"
       }
     },
-    "node_modules/react-textarea-autosize": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
-      "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.20.13",
-        "use-composed-ref": "^1.3.0",
-        "use-latest": "^1.2.1"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -6569,39 +5991,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -6941,22 +6330,6 @@
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
-    "node_modules/sugarss": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
-      "integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.3.3"
-      }
-    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -6979,11 +6352,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/tabbable": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
-    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -7138,18 +6506,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
     "node_modules/totalist": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
@@ -7182,17 +6538,6 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
-    "node_modules/type-fest": {
-      "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
-      "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/typescript": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
@@ -7425,90 +6770,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/use-callback-ref": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
-      "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-composed-ref": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
-      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/use-isomorphic-layout-effect": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
-      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-latest": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
-      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
-      "dependencies": {
-        "use-isomorphic-layout-effect": "^1.1.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-sidecar": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
-      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
-      "dependencies": {
-        "detect-node-es": "^1.1.0",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
-    },
     "node_modules/validate.io-array": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/validate.io-array/-/validate.io-array-1.0.6.tgz",
diff --git a/docs/package.json b/docs/package.json
index fc84d2a..cfa3c51 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -13,11 +13,6 @@
     "@ai-form-toolkit/server": "file:../packages/server",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mantine/code-highlight": "^7.3.2",
-    "@mantine/core": "^7.3.2",
-    "@mantine/dates": "^7.3.2",
-    "@mantine/form": "^7.3.2",
-    "@mantine/hooks": "^7.3.2",
     "@mdx-js/react": "^3.0.0",
     "@mui/icons-material": "^5.15.4",
     "@mui/lab": "^5.0.0-alpha.160",
@@ -54,9 +49,6 @@
     "@types/node": "^20.10.4",
     "@types/react": "18.2.45",
     "babel-loader": "^9.1.3",
-    "postcss": "^8.4.32",
-    "postcss-preset-mantine": "1.11.1",
-    "postcss-simple-vars": "^7.0.1",
     "typescript": "5.3.3"
   }
 }
diff --git a/docs/postcss.config.cjs b/docs/postcss.config.cjs
deleted file mode 100644
index bfba0dd..0000000
--- a/docs/postcss.config.cjs
+++ /dev/null
@@ -1,14 +0,0 @@
-module.exports = {
-  plugins: {
-    'postcss-preset-mantine': {},
-    'postcss-simple-vars': {
-      variables: {
-        'mantine-breakpoint-xs': '36em',
-        'mantine-breakpoint-sm': '48em',
-        'mantine-breakpoint-md': '62em',
-        'mantine-breakpoint-lg': '75em',
-        'mantine-breakpoint-xl': '88em',
-      },
-    },
-  },
-};
diff --git a/package-lock.json b/package-lock.json
index cb09ce8..9da58be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,6 @@
         "eslint": "^8.56.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.1.0",
-        "eslint-config-mantine": "^3.1.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jsx-a11y": "^6.8.0",
@@ -5735,23 +5734,6 @@
         "eslint-plugin-import": "^2.25.3"
       }
     },
-    "node_modules/eslint-config-mantine": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-mantine/-/eslint-config-mantine-3.1.0.tgz",
-      "integrity": "sha512-BmpIMJQvZsnngHWIBKsD9N7aqHNCRtzgOYVhGJMZdUDU2A93GVl5L4Gqsk9ynVUzfV+5LsNPC1WUr0XObc7peA==",
-      "dev": true,
-      "peerDependencies": {
-        "@typescript-eslint/eslint-plugin": "^6.8.0",
-        "@typescript-eslint/parser": "^6.8.0",
-        "eslint": "^8.51.0",
-        "eslint-config-airbnb": "19.0.4",
-        "eslint-config-airbnb-typescript": "^17.1.0",
-        "eslint-plugin-import": "^2.28.1",
-        "eslint-plugin-jsx-a11y": "^6.7.1",
-        "eslint-plugin-react": "^7.33.2",
-        "eslint-plugin-react-hooks": "^4.6.0"
-      }
-    },
     "node_modules/eslint-config-prettier": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
diff --git a/package.json b/package.json
index d16db86..9ec1b03 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
     "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-mantine": "^3.1.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",

From aa1bb985ff61f8496533b4549b9c2ab8b623f1b7 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Tue, 16 Jan 2024 11:16:03 -0300
Subject: [PATCH 37/43] Update eslint to highlight problematic imports from
 @mui packages

---
 .eslintrc.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index c118920..09cc480 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -53,5 +53,11 @@ module.exports = {
         modifiers: ['unused'],
       },
     ],
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: ['@mui/*/*/*'],
+      },
+    ],
   },
 };

From e950f875d6fae00cb1a031be1cdee0d2af2ffff0 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Tue, 16 Jan 2024 11:33:25 -0300
Subject: [PATCH 38/43] Add comment about known issue

---
 docs/src/components/Forms/SchemaJsonTabs.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/Forms/SchemaJsonTabs.tsx b/docs/src/components/Forms/SchemaJsonTabs.tsx
index e62bfa1..8e97613 100644
--- a/docs/src/components/Forms/SchemaJsonTabs.tsx
+++ b/docs/src/components/Forms/SchemaJsonTabs.tsx
@@ -1,8 +1,8 @@
-import { RJSFSchema, UiSchema } from '@rjsf/utils';
+import { SyntheticEvent, useState } from 'react';
 import { Box, Tab } from '@mui/material';
+import { atomOneLight, CopyBlock } from 'react-code-blocks';
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
-import { CopyBlock } from 'react-code-blocks';
-import { SyntheticEvent, useState } from 'react';
 
 enum TabValue {
   form = 'form',
@@ -22,6 +22,9 @@ const SchemaJsonTabs = ({ formSchema, uiSchema }: Props) => {
   };
 
   return (
+    /* INFO: There are warnings in the console about the copied/codeBlock props.
+    This is a known issue with react-code-blocks.
+    See: https://github.com/rajinwonderland/react-code-blocks/issues/138 */
     <Box sx={{ width: '100%', fontFamily: 'monospace', fontSize: '0.8125rem' }}>
       <TabContext value={value}>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
@@ -36,10 +39,17 @@ const SchemaJsonTabs = ({ formSchema, uiSchema }: Props) => {
             text={JSON.stringify(formSchema || {}, null, 2)}
             language="json"
             showLineNumbers={false}
+            theme={atomOneLight}
           />
         </TabPanel>
         <TabPanel value={TabValue.ui}>
-          <CopyBlock codeBlock text={JSON.stringify(uiSchema || {}, null, 2)} language="json" showLineNumbers={false} />
+          <CopyBlock
+            codeBlock
+            text={JSON.stringify(uiSchema || {}, null, 2)}
+            language="json"
+            showLineNumbers={false}
+            theme={atomOneLight}
+          />
         </TabPanel>
       </TabContext>
     </Box>

From b23c4204fb4b3647a3076c3381d110b3e1d840d0 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Tue, 16 Jan 2024 12:09:47 -0300
Subject: [PATCH 39/43] Create MDXProviderWrapper to map MDX and MUI

---
 docs/src/MDXProviderWrapper.tsx | 18 ++++++++++++++++++
 docs/src/app/docs-layout.tsx    | 23 -----------------------
 docs/src/app/layout.tsx         |  5 ++++-
 3 files changed, 22 insertions(+), 24 deletions(-)
 create mode 100644 docs/src/MDXProviderWrapper.tsx

diff --git a/docs/src/MDXProviderWrapper.tsx b/docs/src/MDXProviderWrapper.tsx
new file mode 100644
index 0000000..6fddde6
--- /dev/null
+++ b/docs/src/MDXProviderWrapper.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { HTMLAttributes, ReactNode } from 'react';
+import { MDXProvider } from '@mdx-js/react';
+import { Typography } from '@mui/material';
+
+const MDXProviderWrapper = ({ children }: { children: ReactNode }) => {
+  const components = {
+    h1: (props: HTMLAttributes<HTMLElement>) => <Typography component="h1" variant="h4" marginY={2} {...props} />,
+    h2: (props: HTMLAttributes<HTMLElement>) => <Typography component="h2" variant="h5" marginY={2} {...props} />,
+    h3: (props: HTMLAttributes<HTMLElement>) => <Typography component="h3" variant="h6" marginY={2} {...props} />,
+    p: (props: HTMLAttributes<HTMLElement>) => <Typography component="p" variant="body1" marginY={2} {...props} />,
+  };
+
+  return <MDXProvider components={components}>{children}</MDXProvider>;
+};
+
+export default MDXProviderWrapper;
diff --git a/docs/src/app/docs-layout.tsx b/docs/src/app/docs-layout.tsx
index 16ef2f0..c6156c9 100644
--- a/docs/src/app/docs-layout.tsx
+++ b/docs/src/app/docs-layout.tsx
@@ -13,24 +13,6 @@ type Props = {
 
 export default function DocsLayout({ children }: Props) {
   const docsMarkdownStyles = (theme: Theme) => ({
-    h1: {
-      marginY: theme.spacing(1),
-    },
-    h2: {
-      marginY: theme.spacing(1),
-    },
-    h3: {
-      marginY: theme.spacing(1),
-    },
-    h4: {
-      marginY: theme.spacing(1),
-    },
-    h5: {
-      marginY: theme.spacing(1),
-    },
-    h6: {
-      marginY: theme.spacing(1),
-    },
     figure: {
       margin: 0,
     },
@@ -69,11 +51,6 @@ export default function DocsLayout({ children }: Props) {
       height: 'auto',
       border: `2px solid ${theme.palette.grey[200]}`,
     },
-    '.doc-form-example': {
-      borderRadius: theme.shape.borderRadius,
-      border: `2px solid ${theme.palette.grey[200]}`,
-      padding: theme.spacing(1),
-    },
   });
 
   return (
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
index 31617d6..5191625 100644
--- a/docs/src/app/layout.tsx
+++ b/docs/src/app/layout.tsx
@@ -8,6 +8,7 @@ import {
   GeneratorArgsType,
 } from '@ai-form-toolkit/server';
 import MuiThemeWrapper from '@/MuiThemeWrapper';
+import MDXProviderWrapper from '@/MDXProviderWrapper';
 
 export const metadata = {
   title: `Build forms like it's ${Math.max(new Date().getFullYear(), 2024)} | AI Form Toolkit`,
@@ -43,7 +44,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           generateFormAutofillFn={myGenerateGPTFormAutofill}
           generateFormSchemaFn={myGenerateGPTFormSchema}
         />
-        <MuiThemeWrapper>{children}</MuiThemeWrapper>
+        <MuiThemeWrapper>
+          <MDXProviderWrapper>{children}</MDXProviderWrapper>
+        </MuiThemeWrapper>
       </body>
     </html>
   );

From 4a12d0f87c695074a464278aefee73f0b9439ece Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Tue, 16 Jan 2024 12:15:16 -0300
Subject: [PATCH 40/43] Add TODO comment

---
 docs/src/app/docs-layout.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/app/docs-layout.tsx b/docs/src/app/docs-layout.tsx
index c6156c9..5fb71ea 100644
--- a/docs/src/app/docs-layout.tsx
+++ b/docs/src/app/docs-layout.tsx
@@ -27,6 +27,7 @@ export default function DocsLayout({ children }: Props) {
       fontWeight: 700,
       color: '#E9D5FF',
     },
+    // TODO: Use CodeBlock component instead. Configure it on MDXProviderWrapper.
     code: {
       counterReset: 'line',
       fontSize: '0.8125rem',

From 8d4318daf83a398374f23ba81fda9c83400e557c Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Tue, 16 Jan 2024 12:29:25 -0300
Subject: [PATCH 41/43] Add mui to optimizePackageImports

---
 docs/next.config.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 9f2ca03..4c0934e 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -29,6 +29,7 @@ const nextConfig = {
     ignoreDuringBuilds: true,
   },
   experimental: {
+    optimizePackageImports: ['@mui/material', '@mui/icons-material'],
     mdxRs: false,
   },
 };

From d5219b42888276df0db3cb58cfa0baf8545987f6 Mon Sep 17 00:00:00 2001
From: Pamella Bezerra <pamella@vinta.com.br>
Date: Tue, 16 Jan 2024 12:31:56 -0300
Subject: [PATCH 42/43] Add mui to optimizePackageImports

---
 docs/next.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 4c0934e..fa0dc57 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -29,7 +29,7 @@ const nextConfig = {
     ignoreDuringBuilds: true,
   },
   experimental: {
-    optimizePackageImports: ['@mui/material', '@mui/icons-material'],
+    optimizePackageImports: ['@mui/material', '@mui/icons-material', '@mui/lab'],
     mdxRs: false,
   },
 };

From 87bc3b525a82e751eede25d24a59e82c92f409c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fl=C3=A1vio=20Juvenal?= <flavio@vinta.com.br>
Date: Tue, 16 Jan 2024 14:09:15 -0300
Subject: [PATCH 43/43] Fix code highlights

---
 docs/src/app/tutorial/form-assistant/content.mdx  | 2 +-
 docs/src/app/tutorial/form-generation/content.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/app/tutorial/form-assistant/content.mdx b/docs/src/app/tutorial/form-assistant/content.mdx
index 360dd1c..f41e255 100644
--- a/docs/src/app/tutorial/form-assistant/content.mdx
+++ b/docs/src/app/tutorial/form-assistant/content.mdx
@@ -22,7 +22,7 @@ function Form() {
 
 You can create a button to autofill the recipe field with the `useFormAssistant` hook:
 
-```jsx {5-9,16}
+```jsx {5-9,12}
 function FormWithAssistant() {
   const [formValues, setFormValues] = useState({
     recipe: 'Hummus quick recipe:\nIngredients: ...\nDirections: ...',
diff --git a/docs/src/app/tutorial/form-generation/content.mdx b/docs/src/app/tutorial/form-generation/content.mdx
index aed2ade..22dea6d 100644
--- a/docs/src/app/tutorial/form-generation/content.mdx
+++ b/docs/src/app/tutorial/form-generation/content.mdx
@@ -16,7 +16,7 @@ As long as it's text, and the AI can understand it, **AI Form Toolkit** can gene
 
 The best way to understand the form generation is to see it in action, the code and the generated forms:
 
-```jsx {12-16,31-36}
+```jsx {10,27}
 import { useState } from 'react';
 import validator from '@rjsf/validator-ajv8';
 import Form from '@rjsf/core';