All Var-typed props are implicitly Optional

For compatibility with existing Component wraps, if the type is Var and a default is not provided, mark it as Optional and set a default of None. Fix _rename_props inheritance for pydantic-v2.
cleanup unneeded init_subclass super calls
2024-03-06 12:04:12 -08:00 · 2024-03-05 21:59:59 +01:00 · 2024-03-05 21:53:44 +01:00 · 2024-03-05 21:36:41 +01:00 · 2024-03-05 21:36:41 +01:00 · 2024-03-05 21:36:41 +01:00
169 changed files with 2716 additions and 2577 deletions
--- a/integration/test_event_actions.py
+++ b/integration/test_event_actions.py
@ -25,7 +25,7 @@ def TestEventAction():
    class EventFiringComponent(rx.Component):
        """A component that fires onClick event without passing DOM event."""

-        tag = "EventFiringComponent"
+        tag: str = "EventFiringComponent"

        def _get_custom_code(self) -> str | None:
            return """
--- a/poetry.lock
+++ b/poetry.lock
@ -1,4 +1,4 @@
-# This file is automatically @generated by Poetry 1.7.1 and should not be changed by hand.
+# This file is automatically @generated by Poetry 1.8.2 and should not be changed by hand.

 [[package]]
 name = "alembic"
@ -21,6 +21,20 @@ typing-extensions = ">=4"
 [package.extras]
 tz = ["backports.zoneinfo"]

+[[package]]
+name = "annotated-types"
+version = "0.6.0"
+description = "Reusable constraint types to use with typing.Annotated"
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "annotated_types-0.6.0-py3-none-any.whl", hash = "sha256:0641064de18ba7a25dee8f96403ebc39113d0cb953a01429249d5c7564666a43"},
+    {file = "annotated_types-0.6.0.tar.gz", hash = "sha256:563339e807e53ffd9c267e99fc6d9ea23eb8443c08f112651963e24e22f84a5d"},
+]
+
+[package.dependencies]
+typing-extensions = {version = ">=4.0.0", markers = "python_version < \"3.9\""}
+
 [[package]]
 name = "anyio"
 version = "4.3.0"
@ -501,24 +515,22 @@ test = ["pytest (>=6)"]

 [[package]]
 name = "fastapi"
-version = "0.96.1"
+version = "0.110.0"
 description = "FastAPI framework, high performance, easy to learn, fast to code, ready for production"
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "fastapi-0.96.1-py3-none-any.whl", hash = "sha256:22d773ce95f14f04f8f37a0c8998fc163e67af83b65510d2879de6cbaaa10215"},
-    {file = "fastapi-0.96.1.tar.gz", hash = "sha256:5c1d243030e63089ccfc0aec69c2da6d619943917727e8e82ee502358d5119bf"},
+    {file = "fastapi-0.110.0-py3-none-any.whl", hash = "sha256:87a1f6fb632a218222c5984be540055346a8f5d8a68e8f6fb647b1dc9934de4b"},
+    {file = "fastapi-0.110.0.tar.gz", hash = "sha256:266775f0dcc95af9d3ef39bad55cff525329a931d5fd51930aadd4f428bf7ff3"},
 ]

 [package.dependencies]
-pydantic = ">=1.7.4,<1.8 || >1.8,<1.8.1 || >1.8.1,<2.0.0"
-starlette = ">=0.27.0,<0.28.0"
+pydantic = ">=1.7.4,<1.8 || >1.8,<1.8.1 || >1.8.1,<2.0.0 || >2.0.0,<2.0.1 || >2.0.1,<2.1.0 || >2.1.0,<3.0.0"
+starlette = ">=0.36.3,<0.37.0"
+typing-extensions = ">=4.8.0"

 [package.extras]
-all = ["email-validator (>=1.1.1)", "httpx (>=0.23.0)", "itsdangerous (>=1.1.0)", "jinja2 (>=2.11.2)", "orjson (>=3.2.1)", "python-multipart (>=0.0.5)", "pyyaml (>=5.3.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0)", "uvicorn[standard] (>=0.12.0)"]
-dev = ["pre-commit (>=2.17.0,<3.0.0)", "ruff (==0.0.138)", "uvicorn[standard] (>=0.12.0,<0.21.0)"]
-doc = ["mdx-include (>=1.4.1,<2.0.0)", "mkdocs (>=1.1.2,<2.0.0)", "mkdocs-markdownextradata-plugin (>=0.1.7,<0.3.0)", "mkdocs-material (>=8.1.4,<9.0.0)", "pyyaml (>=5.3.1,<7.0.0)", "typer-cli (>=0.0.13,<0.0.14)", "typer[all] (>=0.6.1,<0.8.0)"]
-test = ["anyio[trio] (>=3.2.1,<4.0.0)", "black (==23.1.0)", "coverage[toml] (>=6.5.0,<8.0)", "databases[sqlite] (>=0.3.2,<0.7.0)", "email-validator (>=1.1.1,<2.0.0)", "flask (>=1.1.2,<3.0.0)", "httpx (>=0.23.0,<0.24.0)", "isort (>=5.0.6,<6.0.0)", "mypy (==0.982)", "orjson (>=3.2.1,<4.0.0)", "passlib[bcrypt] (>=1.7.2,<2.0.0)", "peewee (>=3.13.3,<4.0.0)", "pytest (>=7.1.3,<8.0.0)", "python-jose[cryptography] (>=3.3.0,<4.0.0)", "python-multipart (>=0.0.5,<0.0.7)", "pyyaml (>=5.3.1,<7.0.0)", "ruff (==0.0.138)", "sqlalchemy (>=1.3.18,<1.4.43)", "types-orjson (==3.6.2)", "types-ujson (==5.7.0.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0,<6.0.0)"]
+all = ["email-validator (>=2.0.0)", "httpx (>=0.23.0)", "itsdangerous (>=1.1.0)", "jinja2 (>=2.11.2)", "orjson (>=3.2.1)", "pydantic-extra-types (>=2.0.0)", "pydantic-settings (>=2.0.0)", "python-multipart (>=0.0.7)", "pyyaml (>=5.3.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0)", "uvicorn[standard] (>=0.12.0)"]

 [[package]]
 name = "filelock"
@ -1385,55 +1397,113 @@ files = [

 [[package]]
 name = "pydantic"
-version = "1.10.14"
-description = "Data validation and settings management using python type hints"
+version = "2.6.3"
+description = "Data validation using Python type hints"
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "pydantic-1.10.14-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:7f4fcec873f90537c382840f330b90f4715eebc2bc9925f04cb92de593eae054"},
-    {file = "pydantic-1.10.14-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:8e3a76f571970fcd3c43ad982daf936ae39b3e90b8a2e96c04113a369869dc87"},
-    {file = "pydantic-1.10.14-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:82d886bd3c3fbeaa963692ef6b643159ccb4b4cefaf7ff1617720cbead04fd1d"},
-    {file = "pydantic-1.10.14-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:798a3d05ee3b71967844a1164fd5bdb8c22c6d674f26274e78b9f29d81770c4e"},
-    {file = "pydantic-1.10.14-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:23d47a4b57a38e8652bcab15a658fdb13c785b9ce217cc3a729504ab4e1d6bc9"},
-    {file = "pydantic-1.10.14-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:f9f674b5c3bebc2eba401de64f29948ae1e646ba2735f884d1594c5f675d6f2a"},
-    {file = "pydantic-1.10.14-cp310-cp310-win_amd64.whl", hash = "sha256:24a7679fab2e0eeedb5a8924fc4a694b3bcaac7d305aeeac72dd7d4e05ecbebf"},
-    {file = "pydantic-1.10.14-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:9d578ac4bf7fdf10ce14caba6f734c178379bd35c486c6deb6f49006e1ba78a7"},
-    {file = "pydantic-1.10.14-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:fa7790e94c60f809c95602a26d906eba01a0abee9cc24150e4ce2189352deb1b"},
-    {file = "pydantic-1.10.14-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:aad4e10efa5474ed1a611b6d7f0d130f4aafadceb73c11d9e72823e8f508e663"},
-    {file = "pydantic-1.10.14-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:1245f4f61f467cb3dfeced2b119afef3db386aec3d24a22a1de08c65038b255f"},
-    {file = "pydantic-1.10.14-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:21efacc678a11114c765eb52ec0db62edffa89e9a562a94cbf8fa10b5db5c046"},
-    {file = "pydantic-1.10.14-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:412ab4a3f6dbd2bf18aefa9f79c7cca23744846b31f1d6555c2ee2b05a2e14ca"},
-    {file = "pydantic-1.10.14-cp311-cp311-win_amd64.whl", hash = "sha256:e897c9f35281f7889873a3e6d6b69aa1447ceb024e8495a5f0d02ecd17742a7f"},
-    {file = "pydantic-1.10.14-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:d604be0f0b44d473e54fdcb12302495fe0467c56509a2f80483476f3ba92b33c"},
-    {file = "pydantic-1.10.14-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a42c7d17706911199798d4c464b352e640cab4351efe69c2267823d619a937e5"},
-    {file = "pydantic-1.10.14-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:596f12a1085e38dbda5cbb874d0973303e34227b400b6414782bf205cc14940c"},
-    {file = "pydantic-1.10.14-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:bfb113860e9288d0886e3b9e49d9cf4a9d48b441f52ded7d96db7819028514cc"},
-    {file = "pydantic-1.10.14-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:bc3ed06ab13660b565eed80887fcfbc0070f0aa0691fbb351657041d3e874efe"},
-    {file = "pydantic-1.10.14-cp37-cp37m-win_amd64.whl", hash = "sha256:ad8c2bc677ae5f6dbd3cf92f2c7dc613507eafe8f71719727cbc0a7dec9a8c01"},
-    {file = "pydantic-1.10.14-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:c37c28449752bb1f47975d22ef2882d70513c546f8f37201e0fec3a97b816eee"},
-    {file = "pydantic-1.10.14-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:49a46a0994dd551ec051986806122767cf144b9702e31d47f6d493c336462597"},
-    {file = "pydantic-1.10.14-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:53e3819bd20a42470d6dd0fe7fc1c121c92247bca104ce608e609b59bc7a77ee"},
-    {file = "pydantic-1.10.14-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:0fbb503bbbbab0c588ed3cd21975a1d0d4163b87e360fec17a792f7d8c4ff29f"},
-    {file = "pydantic-1.10.14-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:336709883c15c050b9c55a63d6c7ff09be883dbc17805d2b063395dd9d9d0022"},
-    {file = "pydantic-1.10.14-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:4ae57b4d8e3312d486e2498d42aed3ece7b51848336964e43abbf9671584e67f"},
-    {file = "pydantic-1.10.14-cp38-cp38-win_amd64.whl", hash = "sha256:dba49d52500c35cfec0b28aa8b3ea5c37c9df183ffc7210b10ff2a415c125c4a"},
-    {file = "pydantic-1.10.14-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:c66609e138c31cba607d8e2a7b6a5dc38979a06c900815495b2d90ce6ded35b4"},
-    {file = "pydantic-1.10.14-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:d986e115e0b39604b9eee3507987368ff8148222da213cd38c359f6f57b3b347"},
-    {file = "pydantic-1.10.14-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:646b2b12df4295b4c3148850c85bff29ef6d0d9621a8d091e98094871a62e5c7"},
-    {file = "pydantic-1.10.14-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:282613a5969c47c83a8710cc8bfd1e70c9223feb76566f74683af889faadc0ea"},
-    {file = "pydantic-1.10.14-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:466669501d08ad8eb3c4fecd991c5e793c4e0bbd62299d05111d4f827cded64f"},
-    {file = "pydantic-1.10.14-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:13e86a19dca96373dcf3190fcb8797d40a6f12f154a244a8d1e8e03b8f280593"},
-    {file = "pydantic-1.10.14-cp39-cp39-win_amd64.whl", hash = "sha256:08b6ec0917c30861e3fe71a93be1648a2aa4f62f866142ba21670b24444d7fd8"},
-    {file = "pydantic-1.10.14-py3-none-any.whl", hash = "sha256:8ee853cd12ac2ddbf0ecbac1c289f95882b2d4482258048079d13be700aa114c"},
-    {file = "pydantic-1.10.14.tar.gz", hash = "sha256:46f17b832fe27de7850896f3afee50ea682220dd218f7e9c88d436788419dca6"},
+    {file = "pydantic-2.6.3-py3-none-any.whl", hash = "sha256:72c6034df47f46ccdf81869fddb81aade68056003900a8724a4f160700016a2a"},
+    {file = "pydantic-2.6.3.tar.gz", hash = "sha256:e07805c4c7f5c6826e33a1d4c9d47950d7eaf34868e2690f8594d2e30241f11f"},
 ]

 [package.dependencies]
-typing-extensions = ">=4.2.0"
+annotated-types = ">=0.4.0"
+pydantic-core = "2.16.3"
+typing-extensions = ">=4.6.1"

 [package.extras]
-dotenv = ["python-dotenv (>=0.10.4)"]
-email = ["email-validator (>=1.0.3)"]
+email = ["email-validator (>=2.0.0)"]
+
+[[package]]
+name = "pydantic-core"
+version = "2.16.3"
+description = ""
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "pydantic_core-2.16.3-cp310-cp310-macosx_10_12_x86_64.whl", hash = "sha256:75b81e678d1c1ede0785c7f46690621e4c6e63ccd9192af1f0bd9d504bbb6bf4"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:9c865a7ee6f93783bd5d781af5a4c43dadc37053a5b42f7d18dc019f8c9d2bd1"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:162e498303d2b1c036b957a1278fa0899d02b2842f1ff901b6395104c5554a45"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:2f583bd01bbfbff4eaee0868e6fc607efdfcc2b03c1c766b06a707abbc856187"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:b926dd38db1519ed3043a4de50214e0d600d404099c3392f098a7f9d75029ff8"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:716b542728d4c742353448765aa7cdaa519a7b82f9564130e2b3f6766018c9ec"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:fc4ad7f7ee1a13d9cb49d8198cd7d7e3aa93e425f371a68235f784e99741561f"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:bd87f48924f360e5d1c5f770d6155ce0e7d83f7b4e10c2f9ec001c73cf475c99"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:0df446663464884297c793874573549229f9eca73b59360878f382a0fc085979"},
+    {file = "pydantic_core-2.16.3-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:4df8a199d9f6afc5ae9a65f8f95ee52cae389a8c6b20163762bde0426275b7db"},
+    {file = "pydantic_core-2.16.3-cp310-none-win32.whl", hash = "sha256:456855f57b413f077dff513a5a28ed838dbbb15082ba00f80750377eed23d132"},
+    {file = "pydantic_core-2.16.3-cp310-none-win_amd64.whl", hash = "sha256:732da3243e1b8d3eab8c6ae23ae6a58548849d2e4a4e03a1924c8ddf71a387cb"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-macosx_10_12_x86_64.whl", hash = "sha256:519ae0312616026bf4cedc0fe459e982734f3ca82ee8c7246c19b650b60a5ee4"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:b3992a322a5617ded0a9f23fd06dbc1e4bd7cf39bc4ccf344b10f80af58beacd"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8d62da299c6ecb04df729e4b5c52dc0d53f4f8430b4492b93aa8de1f541c4aac"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:2acca2be4bb2f2147ada8cac612f8a98fc09f41c89f87add7256ad27332c2fda"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:1b662180108c55dfbf1280d865b2d116633d436cfc0bba82323554873967b340"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:e7c6ed0dc9d8e65f24f5824291550139fe6f37fac03788d4580da0d33bc00c97"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a6b1bb0827f56654b4437955555dc3aeeebeddc47c2d7ed575477f082622c49e"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:e56f8186d6210ac7ece503193ec84104da7ceb98f68ce18c07282fcc2452e76f"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:936e5db01dd49476fa8f4383c259b8b1303d5dd5fb34c97de194560698cc2c5e"},
+    {file = "pydantic_core-2.16.3-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:33809aebac276089b78db106ee692bdc9044710e26f24a9a2eaa35a0f9fa70ba"},
+    {file = "pydantic_core-2.16.3-cp311-none-win32.whl", hash = "sha256:ded1c35f15c9dea16ead9bffcde9bb5c7c031bff076355dc58dcb1cb436c4721"},
+    {file = "pydantic_core-2.16.3-cp311-none-win_amd64.whl", hash = "sha256:d89ca19cdd0dd5f31606a9329e309d4fcbb3df860960acec32630297d61820df"},
+    {file = "pydantic_core-2.16.3-cp311-none-win_arm64.whl", hash = "sha256:6162f8d2dc27ba21027f261e4fa26f8bcb3cf9784b7f9499466a311ac284b5b9"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-macosx_10_12_x86_64.whl", hash = "sha256:0f56ae86b60ea987ae8bcd6654a887238fd53d1384f9b222ac457070b7ac4cff"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:c9bd22a2a639e26171068f8ebb5400ce2c1bc7d17959f60a3b753ae13c632975"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4204e773b4b408062960e65468d5346bdfe139247ee5f1ca2a378983e11388a2"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:f651dd19363c632f4abe3480a7c87a9773be27cfe1341aef06e8759599454120"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:aaf09e615a0bf98d406657e0008e4a8701b11481840be7d31755dc9f97c44053"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:8e47755d8152c1ab5b55928ab422a76e2e7b22b5ed8e90a7d584268dd49e9c6b"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:500960cb3a0543a724a81ba859da816e8cf01b0e6aaeedf2c3775d12ee49cade"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:cf6204fe865da605285c34cf1172879d0314ff267b1c35ff59de7154f35fdc2e"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:d33dd21f572545649f90c38c227cc8631268ba25c460b5569abebdd0ec5974ca"},
+    {file = "pydantic_core-2.16.3-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:49d5d58abd4b83fb8ce763be7794d09b2f50f10aa65c0f0c1696c677edeb7cbf"},
+    {file = "pydantic_core-2.16.3-cp312-none-win32.whl", hash = "sha256:f53aace168a2a10582e570b7736cc5bef12cae9cf21775e3eafac597e8551fbe"},
+    {file = "pydantic_core-2.16.3-cp312-none-win_amd64.whl", hash = "sha256:0d32576b1de5a30d9a97f300cc6a3f4694c428d956adbc7e6e2f9cad279e45ed"},
+    {file = "pydantic_core-2.16.3-cp312-none-win_arm64.whl", hash = "sha256:ec08be75bb268473677edb83ba71e7e74b43c008e4a7b1907c6d57e940bf34b6"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-macosx_10_12_x86_64.whl", hash = "sha256:b1f6f5938d63c6139860f044e2538baeee6f0b251a1816e7adb6cbce106a1f01"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:2a1ef6a36fdbf71538142ed604ad19b82f67b05749512e47f247a6ddd06afdc7"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:704d35ecc7e9c31d48926150afada60401c55efa3b46cd1ded5a01bdffaf1d48"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:d937653a696465677ed583124b94a4b2d79f5e30b2c46115a68e482c6a591c8a"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:c9803edf8e29bd825f43481f19c37f50d2b01899448273b3a7758441b512acf8"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:72282ad4892a9fb2da25defeac8c2e84352c108705c972db82ab121d15f14e6d"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7f752826b5b8361193df55afcdf8ca6a57d0232653494ba473630a83ba50d8c9"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:4384a8f68ddb31a0b0c3deae88765f5868a1b9148939c3f4121233314ad5532c"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:a4b2bf78342c40b3dc830880106f54328928ff03e357935ad26c7128bbd66ce8"},
+    {file = "pydantic_core-2.16.3-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:13dcc4802961b5f843a9385fc821a0b0135e8c07fc3d9949fd49627c1a5e6ae5"},
+    {file = "pydantic_core-2.16.3-cp38-none-win32.whl", hash = "sha256:e3e70c94a0c3841e6aa831edab1619ad5c511199be94d0c11ba75fe06efe107a"},
+    {file = "pydantic_core-2.16.3-cp38-none-win_amd64.whl", hash = "sha256:ecdf6bf5f578615f2e985a5e1f6572e23aa632c4bd1dc67f8f406d445ac115ed"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-macosx_10_12_x86_64.whl", hash = "sha256:bda1ee3e08252b8d41fa5537413ffdddd58fa73107171a126d3b9ff001b9b820"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:21b888c973e4f26b7a96491c0965a8a312e13be108022ee510248fe379a5fa23"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:be0ec334369316fa73448cc8c982c01e5d2a81c95969d58b8f6e272884df0074"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:b5b6079cc452a7c53dd378c6f881ac528246b3ac9aae0f8eef98498a75657805"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:7ee8d5f878dccb6d499ba4d30d757111847b6849ae07acdd1205fffa1fc1253c"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:7233d65d9d651242a68801159763d09e9ec96e8a158dbf118dc090cd77a104c9"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c6119dc90483a5cb50a1306adb8d52c66e447da88ea44f323e0ae1a5fcb14256"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:578114bc803a4c1ff9946d977c221e4376620a46cf78da267d946397dc9514a8"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:d8f99b147ff3fcf6b3cc60cb0c39ea443884d5559a30b1481e92495f2310ff2b"},
+    {file = "pydantic_core-2.16.3-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:4ac6b4ce1e7283d715c4b729d8f9dab9627586dafce81d9eaa009dd7f25dd972"},
+    {file = "pydantic_core-2.16.3-cp39-none-win32.whl", hash = "sha256:e7774b570e61cb998490c5235740d475413a1f6de823169b4cf94e2fe9e9f6b2"},
+    {file = "pydantic_core-2.16.3-cp39-none-win_amd64.whl", hash = "sha256:9091632a25b8b87b9a605ec0e61f241c456e9248bfdcf7abdf344fdb169c81cf"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-macosx_10_12_x86_64.whl", hash = "sha256:36fa178aacbc277bc6b62a2c3da95226520da4f4e9e206fdf076484363895d2c"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-macosx_11_0_arm64.whl", hash = "sha256:dcca5d2bf65c6fb591fff92da03f94cd4f315972f97c21975398bd4bd046854a"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:2a72fb9963cba4cd5793854fd12f4cfee731e86df140f59ff52a49b3552db241"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b60cc1a081f80a2105a59385b92d82278b15d80ebb3adb200542ae165cd7d183"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:cbcc558401de90a746d02ef330c528f2e668c83350f045833543cd57ecead1ad"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-musllinux_1_1_aarch64.whl", hash = "sha256:fee427241c2d9fb7192b658190f9f5fd6dfe41e02f3c1489d2ec1e6a5ab1e04a"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-musllinux_1_1_x86_64.whl", hash = "sha256:f4cb85f693044e0f71f394ff76c98ddc1bc0953e48c061725e540396d5c8a2e1"},
+    {file = "pydantic_core-2.16.3-pp310-pypy310_pp73-win_amd64.whl", hash = "sha256:b29eeb887aa931c2fcef5aa515d9d176d25006794610c264ddc114c053bf96fe"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-macosx_10_12_x86_64.whl", hash = "sha256:a425479ee40ff021f8216c9d07a6a3b54b31c8267c6e17aa88b70d7ebd0e5e5b"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-macosx_11_0_arm64.whl", hash = "sha256:5c5cbc703168d1b7a838668998308018a2718c2130595e8e190220238addc96f"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:99b6add4c0b39a513d323d3b93bc173dac663c27b99860dd5bf491b240d26137"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:75f76ee558751746d6a38f89d60b6228fa174e5172d143886af0f85aa306fd89"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:00ee1c97b5364b84cb0bd82e9bbf645d5e2871fb8c58059d158412fee2d33d8a"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-musllinux_1_1_aarch64.whl", hash = "sha256:287073c66748f624be4cef893ef9174e3eb88fe0b8a78dc22e88eca4bc357ca6"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-musllinux_1_1_x86_64.whl", hash = "sha256:ed25e1835c00a332cb10c683cd39da96a719ab1dfc08427d476bce41b92531fc"},
+    {file = "pydantic_core-2.16.3-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:86b3d0033580bd6bbe07590152007275bd7af95f98eaa5bd36f3da219dcd93da"},
+    {file = "pydantic_core-2.16.3.tar.gz", hash = "sha256:1cac689f80a3abab2d3c0048b29eea5751114054f032a941a32de4c852c59cad"},
+]
+
+[package.dependencies]
+typing-extensions = ">=4.6.0,<4.7.0 || >4.7.0"

 [[package]]
 name = "pygments"
@ -1746,13 +1816,13 @@ ocsp = ["cryptography (>=36.0.1)", "pyopenssl (==20.0.1)", "requests (>=2.26.0)"

 [[package]]
 name = "reflex-hosting-cli"
-version = "0.1.8"
+version = "0.1.9.dev0"
 description = "Reflex Hosting CLI"
 optional = false
 python-versions = ">=3.8,<4.0"
 files = [
-    {file = "reflex_hosting_cli-0.1.8-py3-none-any.whl", hash = "sha256:1f8372adcf2e1ec6eae75eedb2652e17a58a733a0bae1b768afb7bcd32f9452c"},
-    {file = "reflex_hosting_cli-0.1.8.tar.gz", hash = "sha256:e3326cd29058099d387974c7687011ae798419a471c35be10895535b788b4ae6"},
+    {file = "reflex_hosting_cli-0.1.9.dev0-py3-none-any.whl", hash = "sha256:1839574fca98f99d5b6c4e9ff6e8733ea2859918a9ed354b516aec5a855dd1c0"},
+    {file = "reflex_hosting_cli-0.1.9.dev0.tar.gz", hash = "sha256:bbda3779303db666026ecfc19922fe4417bd27eef97ec98d4d4a3889f1cb64d3"},
 ]

 [package.dependencies]
@ -1761,13 +1831,18 @@ httpx = ">=0.24.0,<0.26.0"
 pipdeptree = ">=2.13.1,<3.0.0"
 pipreqs = ">=0.4.13,<0.5.0"
 platformdirs = ">=3.10.0,<4.0.0"
-pydantic = ">=1.10.2,<2.0.0"
+pydantic = ">=2.6,<3.0"
 python-dateutil = ">=2.8.1"
 rich = ">=13.0.0,<14.0.0"
 tabulate = ">=0.9.0,<0.10.0"
 typer = ">=0.4.2,<1"
 websockets = ">=10.4"

+[package.source]
+type = "legacy"
+url = "https://test.pypi.org/simple"
+reference = "test"
+
 [[package]]
 name = "requests"
 version = "2.31.0"
@ -2021,13 +2096,13 @@ SQLAlchemy = ">=2.0.0,<2.1.0"

 [[package]]
 name = "starlette"
-version = "0.27.0"
+version = "0.36.3"
 description = "The little ASGI library that shines."
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "starlette-0.27.0-py3-none-any.whl", hash = "sha256:918416370e846586541235ccd38a474c08b80443ed31c578a418e2209b3eef91"},
-    {file = "starlette-0.27.0.tar.gz", hash = "sha256:6a6b0d042acb8d469a01eba54e9cda6cbd24ac602c4cd016723117d6a7e73b75"},
+    {file = "starlette-0.36.3-py3-none-any.whl", hash = "sha256:13d429aa93a61dc40bf503e8c801db1f1bca3dc706b10ef2434a36123568f044"},
+    {file = "starlette-0.36.3.tar.gz", hash = "sha256:90a671733cfb35771d8cc605e0b679d23b992f8dcfad48cc60b38cb29aeb7080"},
 ]

 [package.dependencies]
@ -2035,7 +2110,7 @@ anyio = ">=3.4.0,<5"
 typing-extensions = {version = ">=3.10.0", markers = "python_version < \"3.10\""}

 [package.extras]
-full = ["httpx (>=0.22.0)", "itsdangerous", "jinja2", "python-multipart", "pyyaml"]
+full = ["httpx (>=0.22.0)", "itsdangerous", "jinja2", "python-multipart (>=0.0.7)", "pyyaml"]

 [[package]]
 name = "starlette-admin"
@ -2569,4 +2644,4 @@ testing = ["big-O", "jaraco.functools", "jaraco.itertools", "more-itertools", "p
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.8"
-content-hash = "a63e08c3b525d056f00f54fe7de92443177d727e7557bed01c8639c6fa8a17ac"
+content-hash = "4c2a1d9ff107be80adb8170b4da4ac732ed6e6cc2680194d1f33a578ba30371c"
--- a/pyproject.toml
+++ b/pyproject.toml
@ -25,14 +25,19 @@ packages = [
    {include = "reflex"}
 ]

+[[tool.poetry.source]]
+name = "test"
+url = "https://test.pypi.org/simple/"
+priority = "explicit"
+
 [tool.poetry.dependencies]
 python = "^3.8"
 cloudpickle = "^2.2.1"
-fastapi = "^0.96.0"
+fastapi = "^0.110"
 gunicorn = "^20.1.0"
 jinja2 = "^3.1.2"
 psutil = "^5.9.4"
-pydantic = "^1.10.2"
+pydantic = "^2"
 python-multipart = "^0.0.5"
 python-socketio = "^5.7.0"
 redis = "^4.3.5"
@ -55,7 +60,7 @@ wrapt = [
    {version = "^1.11.0", python = "<3.11"},
 ]
 packaging = "^23.1"
-reflex-hosting-cli = ">=0.1.2"
+reflex-hosting-cli = {version = "0.1.9dev0", source = "test"}
 charset-normalizer = "^3.3.2"
 wheel = "^0.42.0"
 build = "^1.0.3"
--- a/reflex/base.py
+++ b/reflex/base.py
@ -6,11 +6,12 @@ from typing import Any, List, Type

 import pydantic
 from pydantic import BaseModel
-from pydantic.fields import ModelField
+from pydantic.fields import FieldInfo

 from reflex import constants


+# TODO: migrate to pydantic v2
 def validate_field_name(bases: List[Type["BaseModel"]], field_name: str) -> None:
    """Ensure that the field's name does not shadow an existing attribute of the model.

@ -35,7 +36,8 @@ def validate_field_name(bases: List[Type["BaseModel"]], field_name: str) -> None

 # monkeypatch pydantic validate_field_name method to skip validating
 # shadowed state vars when reloading app via utils.prerequisites.get_app(reload=True)
-pydantic.main.validate_field_name = validate_field_name  # type: ignore
+# TODO
+#  pydantic.main.validate_field_name = validate_field_name  # type: ignore


 class Base(pydantic.BaseModel):
@ -48,12 +50,12 @@ class Base(pydantic.BaseModel):
    frontend and backend should subclass this class.
    """

-    class Config:
-        """Pydantic config."""
-
-        arbitrary_types_allowed = True
-        use_enum_values = True
-        extra = "allow"
+    # Pydantic config
+    model_config = pydantic.ConfigDict(
+        arbitrary_types_allowed=True,
+        use_enum_values=True,
+        extra="allow",
+    )

    def json(self) -> str:
        """Convert the object to a json string.
@ -63,7 +65,9 @@ class Base(pydantic.BaseModel):
        """
        from reflex.utils.serializers import serialize

-        return self.__config__.json_dumps(self.dict(), default=serialize)
+        return self.__pydantic_serializer__.to_json(
+            value=self, fallback=serialize
+        ).decode()

    def set(self, **kwargs):
        """Set multiple fields and return the object.
@ -85,7 +89,7 @@ class Base(pydantic.BaseModel):
        Returns:
            The fields of the object.
        """
-        return cls.__fields__
+        return cls.model_fields

    @classmethod
    def add_field(cls, var: Any, default_value: Any):
@ -97,14 +101,9 @@ class Base(pydantic.BaseModel):
            var: The variable to add a pydantic field for.
            default_value: The default value of the field
        """
-        new_field = ModelField.infer(
-            name=var._var_name,
-            value=default_value,
-            annotation=var._var_type,
-            class_validators=None,
-            config=cls.__config__,
-        )
-        cls.__fields__.update({var._var_name: new_field})
+        field_info = FieldInfo(default=default_value, annotation=var._var_type)
+        cls.model_fields.update({var._var_name: field_info})
+        cls.model_rebuild(force=True)

    def get_value(self, key: str) -> Any:
        """Get the value of a field.
@ -115,7 +114,7 @@ class Base(pydantic.BaseModel):
        Returns:
            The value of the field.
        """
-        if isinstance(key, str) and key in self.__fields__:
+        if isinstance(key, str) and key in self.get_fields():
            # Seems like this function signature was wrong all along?
            # If the user wants a field that we know of, get it and pass it off to _get_value
            key = getattr(self, key)
--- a/reflex/compiler/utils.py
+++ b/reflex/compiler/utils.py
@ -4,8 +4,7 @@ from __future__ import annotations
 import os
 from typing import Any, Callable, Dict, Optional, Type, Union
 from urllib.parse import urlparse
-
-from pydantic.fields import ModelField
+from pydantic.fields import FieldInfo

 from reflex import constants
 from reflex.components.base import (
@ -149,7 +148,7 @@ def compile_state(state: Type[BaseState]) -> dict:


 def _compile_client_storage_field(
-    field: ModelField,
+    field: FieldInfo,
 ) -> tuple[Type[Cookie] | Type[LocalStorage] | None, dict[str, Any] | None]:
    """Compile the given cookie or local_storage field.

@ -162,8 +161,10 @@ def _compile_client_storage_field(
    for field_type in (Cookie, LocalStorage):
        if isinstance(field.default, field_type):
            cs_obj = field.default
-        elif isinstance(field.type_, type) and issubclass(field.type_, field_type):
-            cs_obj = field.type_()
+        elif isinstance(field.annotation, type) and issubclass(
+            field.annotation, field_type
+        ):
+            cs_obj = field.annotation()
        else:
            continue
        return field_type, cs_obj.options()
@ -188,7 +189,7 @@ def _compile_client_storage_recursive(
    cookies = {}
    local_storage = {}
    state_name = state.get_full_name()
-    for name, field in state.__fields__.items():
+    for name, field in state.model_fields.items():
        if name in state.inherited_vars:
            # only include vars defined in this state
            continue
--- a/reflex/components/base/bare.py
+++ b/reflex/components/base/bare.py
@ -1,7 +1,7 @@
 """A bare component."""
 from __future__ import annotations

-from typing import Any, Iterator
+from typing import Any, Iterator, Optional

 from reflex.components.component import Component
 from reflex.components.tags import Tag
@ -12,7 +12,7 @@ from reflex.vars import Var
 class Bare(Component):
    """A component with no tag."""

-    contents: Var[str]
+    contents: Optional[Var[str]] = None

    @classmethod
    def create(cls, contents: Any) -> Component:
@ -27,7 +27,7 @@ class Bare(Component):
        if isinstance(contents, Var) and contents._var_data:
            contents = contents.to(str)
        else:
-            contents = str(contents)
+            contents = Var.create(str(contents))
        return cls(contents=contents)  # type: ignore

    def _render(self) -> Tag:
--- a/reflex/components/base/body.py
+++ b/reflex/components/base/body.py
@ -6,4 +6,4 @@ from reflex.components.component import Component
 class Body(Component):
    """A body component."""

-    tag = "body"
+    tag: str = "body"
--- a/reflex/components/base/document.py
+++ b/reflex/components/base/document.py
@ -8,30 +8,30 @@ from reflex.components.component import Component
 class NextDocumentLib(Component):
    """Root document components."""

-    library = "next/document"
+    library: str = "next/document"


 class Html(NextDocumentLib):
    """The document html."""

-    tag = "Html"
+    tag: str = "Html"

-    lang: Optional[str]
+    lang: Optional[str] = None


 class DocumentHead(NextDocumentLib):
    """The document head."""

-    tag = "Head"
+    tag: str = "Head"


 class Main(NextDocumentLib):
    """The document main section."""

-    tag = "Main"
+    tag: str = "Main"


 class NextScript(NextDocumentLib):
    """The document main scripts."""

-    tag = "NextScript"
+    tag: str = "NextScript"
--- a/reflex/components/base/fragment.py
+++ b/reflex/components/base/fragment.py
@ -5,5 +5,5 @@ from reflex.components.component import Component
 class Fragment(Component):
    """A React fragment to return multiple components from a function without wrapping it in a container."""

-    library = "react"
-    tag = "Fragment"
+    library: str = "react"
+    tag: str = "Fragment"
--- a/reflex/components/base/head.py
+++ b/reflex/components/base/head.py
@ -6,12 +6,12 @@ from reflex.components.component import Component, MemoizationLeaf
 class NextHeadLib(Component):
    """Header components."""

-    library = "next/head"
+    library: str = "next/head"


 class Head(NextHeadLib, MemoizationLeaf):
    """Head Component."""

-    tag = "NextHead"
+    tag: str = "NextHead"

-    is_default = True
+    is_default: bool = True
--- a/reflex/components/base/link.py
+++ b/reflex/components/base/link.py
@ -1,5 +1,5 @@
 """Display the title of the current page."""
-
+from typing import Optional

 from reflex.components.component import Component
 from reflex.vars import Var
@ -8,37 +8,37 @@ from reflex.vars import Var
 class RawLink(Component):
    """A component that displays the title of the current page."""

-    tag = "link"
+    tag: str = "link"

    # The href.
-    href: Var[str]
+    href: Optional[Var[str]] = None

    # The type of link.
-    rel: Var[str]
+    rel: Optional[Var[str]] = None


 class ScriptTag(Component):
    """A script tag with the specified type and source."""

-    tag = "script"
+    tag: str = "script"

    # The type of script represented.
-    type_: Var[str]
+    type_: Optional[Var[str]] = None

    # The URI of an external script.
-    source: Var[str]
+    source: Optional[Var[str]] = None

    # Metadata to verify the content of the script.
-    integrity: Var[str]
+    integrity: Optional[Var[str]] = None

    # Whether to allow cross-origin requests.
-    crossorigin: Var[str]
+    crossorigin: Optional[Var[str]] = None

    # Indicates which referrer to send when fetching the script.
-    referrer_policy: Var[str]
+    referrer_policy: Optional[Var[str]] = None

    # Whether to asynchronously load the script.
-    is_async: Var[bool]
+    is_async: Optional[Var[bool]] = None

    # Whether to defer loading the script.
-    defer: Var[bool]
+    defer: Optional[Var[bool]] = None
--- a/reflex/components/base/meta.py
+++ b/reflex/components/base/meta.py
@ -11,7 +11,7 @@ from reflex.components.component import Component
 class Title(Component):
    """A component that displays the title of the current page."""

-    tag = "title"
+    tag: str = "title"

    def render(self) -> dict:
        """Render the title component.
@ -29,7 +29,7 @@ class Title(Component):
 class Meta(Component):
    """A component that displays metadata for the current page."""

-    tag = "meta"
+    tag: str = "meta"

    # The description of character encoding.
    char_set: Optional[str] = None
--- a/reflex/components/base/script.py
+++ b/reflex/components/base/script.py
@ -1,10 +1,9 @@
 """Next.js script wrappers and inline script functionality.
-
-https://nextjs.org/docs/app/api-reference/components/script
+https://nextjs.org/docs/app/api-reference/components/script.
 """
 from __future__ import annotations

-from typing import Any, Union
+from typing import Any, Optional, Union

 from reflex.components.component import Component
 from reflex.vars import Var
@ -20,12 +19,12 @@ class Script(Component):
    HTML <script> tag which does not work when rendering a component.
    """

-    library = "next/script"
-    tag = "Script"
-    is_default = True
+    library: str = "next/script"
+    tag: str = "Script"
+    is_default: bool = True

    # Required unless inline script is used
-    src: Var[str]
+    src: Optional[Var[str]] = None

    # When the script will execute: afterInteractive | beforeInteractive | lazyOnload
    strategy: Var[str] = "afterInteractive"  # type: ignore
--- a/reflex/components/chakra/base.py
+++ b/reflex/components/chakra/base.py
@ -2,7 +2,7 @@
 from __future__ import annotations

 from functools import lru_cache
-from typing import List, Literal
+from typing import List, Literal, Optional

 from reflex.components.component import Component
 from reflex.utils import imports
@ -12,7 +12,7 @@ from reflex.vars import Var
 class ChakraComponent(Component):
    """A component that wraps a Chakra component."""

-    library = "@chakra-ui/react@2.6.1"
+    library: str = "@chakra-ui/react@2.6.1"
    lib_dependencies: List[str] = [
        "@chakra-ui/system@2.5.7",
        "framer-motion@10.16.4",
@ -53,9 +53,9 @@ class ChakraComponent(Component):
 class ChakraProvider(ChakraComponent):
    """Top level Chakra provider must be included in any app using chakra components."""

-    tag = "ChakraProvider"
+    tag: str = "ChakraProvider"

-    theme: Var[str]
+    theme: Optional[Var[str]] = None

    @classmethod
    def create(cls) -> Component:
@ -70,7 +70,7 @@ class ChakraProvider(ChakraComponent):

    def _get_imports(self) -> imports.ImportDict:
        _imports = super()._get_imports()
-        _imports.setdefault(self.__fields__["library"].default, []).append(
+        _imports.setdefault(self.model_fields["library"].default, []).append(
            imports.ImportVar(tag="extendTheme", is_default=False),
        )
        _imports.setdefault("/utils/theme.js", []).append(
@ -92,9 +92,9 @@ chakra_provider = ChakraProvider.create()
 class ChakraColorModeProvider(Component):
    """Next-themes integration for chakra colorModeProvider."""

-    library = "/components/reflex/chakra_color_mode_provider.js"
-    tag = "ChakraColorModeProvider"
-    is_default = True
+    library: str = "/components/reflex/chakra_color_mode_provider.js"
+    tag: str = "ChakraColorModeProvider"
+    is_default: bool = True


 chakra_color_mode_provider = ChakraColorModeProvider.create()
--- a/reflex/components/chakra/datadisplay/badge.py
+++ b/reflex/components/chakra/datadisplay/badge.py
@ -1,4 +1,5 @@
 """Badge component."""
+from typing import Optional

 from reflex.components.chakra import ChakraComponent, LiteralVariant
 from reflex.vars import Var
@ -7,10 +8,10 @@ from reflex.vars import Var
 class Badge(ChakraComponent):
    """A badge component."""

-    tag = "Badge"
+    tag: str = "Badge"

    # Variant of the badge ("solid" | "subtle" | "outline")
-    variant: Var[LiteralVariant]
+    variant: Optional[Var[LiteralVariant]] = None

    # The color of the badge
-    color_scheme: Var[str]
+    color_scheme: Optional[Var[str]] = None
--- a/reflex/components/chakra/datadisplay/code.py
+++ b/reflex/components/chakra/datadisplay/code.py
@ -7,4 +7,4 @@ from reflex.components.chakra import (
 class Code(ChakraComponent):
    """Used to display inline code."""

-    tag = "Code"
+    tag: str = "Code"
--- a/reflex/components/chakra/datadisplay/divider.py
+++ b/reflex/components/chakra/datadisplay/divider.py
@ -1,5 +1,5 @@
 """A line to divide parts of the layout."""
-from typing import Literal
+from typing import Literal, Optional

 from reflex.components.chakra import ChakraComponent, LiteralDividerVariant
 from reflex.vars import Var
@ -10,10 +10,10 @@ LiteralLayout = Literal["horizontal", "vertical"]
 class Divider(ChakraComponent):
    """Dividers are used to visually separate content in a list or group."""

-    tag = "Divider"
+    tag: str = "Divider"

    # Pass the orientation prop and set it to either horizontal or vertical. If the vertical orientation is used, make sure that the parent element is assigned a height.
-    orientation: Var[LiteralLayout]
+    orientation: Optional[Var[LiteralLayout]] = None

    # Variant of the divider ("solid" | "dashed")
-    variant: Var[LiteralDividerVariant]
+    variant: Optional[Var[LiteralDividerVariant]] = None
--- a/reflex/components/chakra/datadisplay/keyboard_key.py
+++ b/reflex/components/chakra/datadisplay/keyboard_key.py
@ -6,4 +6,4 @@ from reflex.components.chakra import ChakraComponent
 class KeyboardKey(ChakraComponent):
    """Display a keyboard key text."""

-    tag = "Kbd"
+    tag: str = "Kbd"
--- a/reflex/components/chakra/datadisplay/list.py
+++ b/reflex/components/chakra/datadisplay/list.py
@ -1,26 +1,38 @@
 """List components."""
-
 from __future__ import annotations

+from typing import Optional
+
 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.components.core.foreach import Foreach
 from reflex.vars import Var

-
 class List(ChakraComponent):
    """Display a list of items."""

-    tag = "List"
+    tag: str = "List"

    # The space between each list item
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None

    # Shorthand prop for listStylePosition
-    style_position: Var[str]
+    style_position: Optional[Var[str]] = None

    # Shorthand prop for listStyleType
-    style_type: Var[str]
+    style_type: Optional[Var[str]] = None
+
+    @classmethod
+    def __class_getitem__(cls, item):
+        """This method is just a hacky workaround to stop pydantic v2 from complaining.
+
+        Args:
+            item: The type of the list items.
+
+        Returns:
+            The list component.
+        """
+        return cls

    @classmethod
    def create(
@ -47,16 +59,16 @@ class List(ChakraComponent):
 class ListItem(ChakraComponent):
    """A single list item."""

-    tag = "ListItem"
+    tag: str = "ListItem"


 class OrderedList(List):
    """An ordered list component with numbers."""

-    tag = "OrderedList"
+    tag: str = "OrderedList"


 class UnorderedList(List):
    """An unordered list component with bullets."""

-    tag = "UnorderedList"
+    tag: str = "UnorderedList"
--- a/reflex/components/chakra/datadisplay/stat.py
+++ b/reflex/components/chakra/datadisplay/stat.py
@ -1,4 +1,5 @@
 """Statistics components."""
+from typing import Optional

 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
@ -8,7 +9,7 @@ from reflex.vars import Var
 class Stat(ChakraComponent):
    """The Stat component is used to display some statistics. It can take in a label, a number and a help text."""

-    tag = "Stat"
+    tag: str = "Stat"

    @classmethod
    def create(
@ -50,31 +51,31 @@ class Stat(ChakraComponent):
 class StatLabel(ChakraComponent):
    """A stat label component."""

-    tag = "StatLabel"
+    tag: str = "StatLabel"


 class StatNumber(ChakraComponent):
    """The stat to display."""

-    tag = "StatNumber"
+    tag: str = "StatNumber"


 class StatHelpText(ChakraComponent):
    """A helper text to display under the stat."""

-    tag = "StatHelpText"
+    tag: str = "StatHelpText"


 class StatArrow(ChakraComponent):
    """A stat arrow component indicating the direction of change."""

-    tag = "StatArrow"
+    tag: str = "StatArrow"

    # The type of arrow, either increase or decrease.
-    type_: Var[str]
+    type_: Optional[Var[str]] = None


 class StatGroup(ChakraComponent):
    """A stat group component to evenly space out the stats."""

-    tag = "StatGroup"
+    tag: str = "StatGroup"
--- a/reflex/components/chakra/datadisplay/table.py
+++ b/reflex/components/chakra/datadisplay/table.py
@ -1,5 +1,5 @@
 """Table components."""
-from typing import List, Tuple
+from typing import List, Optional, Tuple

 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
@ -11,19 +11,19 @@ from reflex.vars import Var
 class Table(ChakraComponent):
    """A table component."""

-    tag = "Table"
+    tag: str = "Table"

    # The color scheme of the table
-    color_scheme: Var[str]
+    color_scheme: Optional[Var[str]] = None

    # The variant of the table style to use
-    variant: Var[str]
+    variant: Optional[Var[str]] = None

    # The size of the table
-    size: Var[str]
+    size: Optional[Var[str]] = None

    # The placement of the table caption.
-    placement: Var[str]
+    placement: Optional[Var[str]] = None

    @classmethod
    def create(
@ -62,7 +62,7 @@ class Table(ChakraComponent):
 class Thead(ChakraComponent):
    """A table header component."""

-    tag = "Thead"
+    tag: str = "Thead"

    # invalid children components
    _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot"]
@ -114,7 +114,7 @@ class Thead(ChakraComponent):
 class Tbody(ChakraComponent):
    """A table body component."""

-    tag = "Tbody"
+    tag: str = "Tbody"

    # invalid children components
    _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot", "Td", "Th"]
@ -188,7 +188,7 @@ class Tbody(ChakraComponent):
 class Tfoot(ChakraComponent):
    """A table footer component."""

-    tag = "Tfoot"
+    tag: str = "Tfoot"

    # invalid children components
    _invalid_children: List[str] = ["Tbody", "Thead", "Td", "Th", "Tfoot"]
@ -237,7 +237,7 @@ class Tfoot(ChakraComponent):
 class Tr(ChakraComponent):
    """A table row component."""

-    tag = "Tr"
+    tag: str = "Tr"

    # invalid children components
    _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot", "Tr"]
@ -268,37 +268,37 @@ class Tr(ChakraComponent):
 class Th(ChakraComponent):
    """A table header cell component."""

-    tag = "Th"
+    tag: str = "Th"

    # invalid children components
    _invalid_children: List[str] = ["Tbody", "Thead", "Tr", "Td", "Th"]

    # Aligns the cell content to the right.
-    is_numeric: Var[bool]
+    is_numeric: Optional[Var[bool]] = None


 class Td(ChakraComponent):
    """A table data cell component."""

-    tag = "Td"
+    tag: str = "Td"

    # invalid children components
    _invalid_children: List[str] = ["Tbody", "Thead"]

    # Aligns the cell content to the right.
-    is_numeric: Var[bool]
+    is_numeric: Optional[Var[bool]] = None


 class TableCaption(ChakraComponent):
    """A table caption component."""

-    tag = "TableCaption"
+    tag: str = "TableCaption"

    # The placement of the table caption. This sets the `caption-side` CSS attribute.
-    placement: Var[str]
+    placement: Optional[Var[str]] = None


 class TableContainer(ChakraComponent):
    """The table container component renders a div that wraps the table component."""

-    tag = "TableContainer"
+    tag: str = "TableContainer"
--- a/reflex/components/chakra/datadisplay/tag.py
+++ b/reflex/components/chakra/datadisplay/tag.py
@ -14,47 +14,47 @@ from reflex.vars import Var
 class TagLabel(ChakraComponent):
    """The label of the tag."""

-    tag = "TagLabel"
+    tag: str = "TagLabel"


 class TagLeftIcon(ChakraComponent):
    """The left icon of the tag."""

-    tag = "TagLeftIcon"
+    tag: str = "TagLeftIcon"


 class TagRightIcon(ChakraComponent):
    """The right icon of the tag."""

-    tag = "TagRightIcon"
+    tag: str = "TagRightIcon"


 class TagCloseButton(ChakraComponent):
    """The close button of the tag."""

-    tag = "TagCloseButton"
+    tag: str = "TagCloseButton"


 class Tag(ChakraComponent):
    """The parent wrapper that provides context for its children."""

-    tag = "Tag"
+    tag: str = "Tag"

    # The visual color appearance of the tag.
    # options: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" |
    #  "cyan" | "purple" | "pink"
    # default: "gray"
-    color_scheme: Var[LiteralTagColorScheme]
+    color_scheme: Optional[Var[LiteralTagColorScheme]] = None

    # The size of the tag
    # options: "sm" | "md" | "lg"
    # default: "md"
-    size: Var[LiteralTagSize]
+    size: Optional[Var[LiteralTagSize]] = None

    # The variant of the tag
    # options: "solid" | "subtle" | "outline"
    # default: "solid"
-    variant: Var[LiteralVariant]
+    variant: Optional[Var[LiteralVariant]] = None

    @classmethod
    def create(
--- a/reflex/components/chakra/disclosure/accordion.py
+++ b/reflex/components/chakra/disclosure/accordion.py
@ -1,5 +1,4 @@
 """Container to stack elements with spacing."""
-
 from typing import List, Optional, Union

 from reflex.components.chakra import ChakraComponent
@ -10,22 +9,22 @@ from reflex.vars import Var
 class Accordion(ChakraComponent):
    """The wrapper that uses cloneElement to pass props to AccordionItem children."""

-    tag = "Accordion"
+    tag: str = "Accordion"

    # If true, multiple accordion items can be expanded at once.
-    allow_multiple: Var[bool]
+    allow_multiple: Optional[Var[bool]] = None

    # If true, any expanded accordion item can be collapsed again.
-    allow_toggle: Var[bool]
+    allow_toggle: Optional[Var[bool]] = None

    # The initial index(es) of the expanded accordion item(s).
-    default_index: Var[Optional[List[int]]]
+    default_index: Optional[Var[Optional[List[int]]]] = None

    # The index(es) of the expanded accordion item
-    index: Var[Union[int, List[int]]]
+    index: Optional[Var[Union[int, List[int]]]] = None

    # If true, height animation and transitions will be disabled.
-    reduce_motion: Var[bool]
+    reduce_motion: Optional[Var[bool]] = None

    @classmethod
    def create(
@ -80,31 +79,31 @@ class Accordion(ChakraComponent):
 class AccordionItem(ChakraComponent):
    """A single accordion item."""

-    tag = "AccordionItem"
+    tag: str = "AccordionItem"

    # A unique id for the accordion item.
-    id_: Var[str]
+    id_: Optional[Var[str]] = None

    # If true, the accordion item will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the accordion item will be focusable.
-    is_focusable: Var[bool]
+    is_focusable: Optional[Var[bool]] = None


 class AccordionButton(ChakraComponent):
    """The button that toggles the expand/collapse state of the accordion item. This button must be wrapped in an element with role heading."""

-    tag = "AccordionButton"
+    tag: str = "AccordionButton"


 class AccordionPanel(ChakraComponent):
    """The container for the details to be revealed."""

-    tag = "AccordionPanel"
+    tag: str = "AccordionPanel"


 class AccordionIcon(ChakraComponent):
    """A chevron-down icon that rotates based on the expanded/collapsed state."""

-    tag = "AccordionIcon"
+    tag: str = "AccordionIcon"
--- a/reflex/components/chakra/disclosure/tabs.py
+++ b/reflex/components/chakra/disclosure/tabs.py
@ -1,5 +1,4 @@
 """Tab components."""
-
 from typing import List, Optional, Tuple

 from reflex.components.chakra import (
@ -15,37 +14,37 @@ from reflex.vars import Var
 class Tabs(ChakraComponent):
    """An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern. Tabs, provides context and state for all components."""

-    tag = "Tabs"
+    tag: str = "Tabs"

    # The alignment of the tabs ("center" | "end" | "start").
-    align: Var[LiteralTagAlign]
+    align: Optional[Var[LiteralTagAlign]] = None

    # The initial index of the selected tab (in uncontrolled mode).
-    default_index: Var[int]
+    default_index: Optional[Var[int]] = None

    # The id of the tab.
-    id_: Var[str]
+    id_: Optional[Var[str]] = None

    # If true, tabs will stretch to width of the tablist.
-    is_fitted: Var[bool]
+    is_fitted: Optional[Var[bool]] = None

    # Performance booster. If true, rendering of the tab panel's will be deferred until it is selected.
-    is_lazy: Var[bool]
+    is_lazy: Optional[Var[bool]] = None

    # If true, the tabs will be manually activated and display its panel by pressing Space or Enter. If false, the tabs will be automatically activated and their panel is displayed when they receive focus.
-    is_manual: Var[bool]
+    is_manual: Optional[Var[bool]] = None

    # The orientation of the tab list.
-    orientation: Var[str]
+    orientation: Optional[Var[str]] = None

    # "line" | "enclosed" | "enclosed-colored" | "soft-rounded" | "solid-rounded" | "unstyled"
-    variant: Var[LiteralTabsVariant]
+    variant: Optional[Var[LiteralTabsVariant]] = None

    # The color scheme of the tabs.
-    color_scheme: Var[LiteralColorScheme]
+    color_scheme: Optional[Var[LiteralColorScheme]] = None

    # Index of the selected tab (in controlled mode).
-    index: Var[int]
+    index: Optional[Var[int]] = None

    @classmethod
    def create(
@ -76,19 +75,19 @@ class Tabs(ChakraComponent):
 class Tab(ChakraComponent):
    """An element that serves as a label for one of the tab panels and can be activated to display that panel.."""

-    tag = "Tab"
+    tag: str = "Tab"

    # If true, the Tab won't be toggleable.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the Tab will be selected.
-    is_selected: Var[bool]
+    is_selected: Optional[Var[bool]] = None

    # The id of the tab.
-    id_: Var[str]
+    id_: Optional[Var[str]] = None

    # The id of the panel.
-    panel_id: Var[str]
+    panel_id: Optional[Var[str]] = None

    _valid_parents: List[str] = ["TabList"]

@ -96,7 +95,7 @@ class Tab(ChakraComponent):
 class TabList(ChakraComponent):
    """Wrapper for the Tab components."""

-    tag = "TabList"
+    tag: str = "TabList"

    _valid_parents: List[str] = ["Tabs"]

@ -104,7 +103,7 @@ class TabList(ChakraComponent):
 class TabPanels(ChakraComponent):
    """Wrapper for the Tab components."""

-    tag = "TabPanels"
+    tag: str = "TabPanels"

    _valid_parents: List[str] = ["Tabs"]

@ -112,6 +111,6 @@ class TabPanels(ChakraComponent):
 class TabPanel(ChakraComponent):
    """An element that contains the content associated with a tab."""

-    tag = "TabPanel"
+    tag: str = "TabPanel"

    _valid_parents: List[str] = ["TabPanels"]
--- a/reflex/components/chakra/disclosure/transition.py
+++ b/reflex/components/chakra/disclosure/transition.py
@ -1,5 +1,5 @@
 """A transition Component."""
-from typing import Union
+from typing import Optional, Union

 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@ -9,64 +9,64 @@ class Transition(ChakraComponent):
    """Base componemt of all transitions."""

    # Show the component; triggers when enter or exit states
-    in_: Var[bool]
+    in_: Optional[Var[bool]] = None

    # If true, the element will unmount when `in={false}` and animation is done
-    unmount_on_exit: Var[bool]
+    unmount_on_exit: Optional[Var[bool]] = None


 class Fade(Transition):
    """Fade component cab be used show and hide content of your app."""

-    tag = "Fade"
+    tag: str = "Fade"


 class ScaleFade(Transition):
    """Fade component can be scaled and reverse your app."""

-    tag = "ScaleFade"
+    tag: str = "ScaleFade"

    # The initial scale of the element
-    initial_scale: Var[float]
+    initial_scale: Optional[Var[float]] = None

    # If true, the element will transition back to exit state
-    reverse: Var[bool]
+    reverse: Optional[Var[bool]] = None


 class Slide(Transition):
    """Side can be used show content below your app."""

-    tag = "Slide"
+    tag: str = "Slide"

    # The direction to slide from
-    direction: Var[str]
+    direction: Optional[Var[str]] = None


 class SlideFade(Transition):
    """SlideFade component."""

-    tag = "SlideFade"
+    tag: str = "SlideFade"

    # The offset on the horizontal or x axis
-    offsetX: Var[Union[str, int]]
+    offsetX: Optional[Var[Union[str, int]]] = None

    # The offset on the vertical or y axis
-    offsetY: Var[Union[str, int]]
+    offsetY: Optional[Var[Union[str, int]]] = None

    # If true, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out
-    reverse: Var[bool]
+    reverse: Optional[Var[bool]] = None


 class Collapse(Transition):
    """Collapse component can collapse some content."""

-    tag = "Collapse"
+    tag: str = "Collapse"

    # If true, the opacity of the content will be animated
-    animateOpacity: Var[bool]
+    animateOpacity: Optional[Var[bool]] = None

    # The height you want the content in its expanded state.
-    endingHeight: Var[str]
+    endingHeight: Optional[Var[str]] = None

    # The height you want the content in its collapsed state.
-    startingHeight: Var[Union[str, int]]
+    startingHeight: Optional[Var[Union[str, int]]] = None
--- a/reflex/components/chakra/disclosure/visuallyhidden.py
+++ b/reflex/components/chakra/disclosure/visuallyhidden.py
@ -6,4 +6,4 @@ from reflex.components.chakra import ChakraComponent
 class VisuallyHidden(ChakraComponent):
    """A component that visually hides content while still allowing it to be read by screen readers."""

-    tag = "VisuallyHidden"
+    tag: str = "VisuallyHidden"
--- a/reflex/components/chakra/feedback/alert.py
+++ b/reflex/components/chakra/feedback/alert.py
@ -1,4 +1,5 @@
 """Alert components."""
+from typing import Optional

 from reflex.components.chakra import (
    ChakraComponent,
@ -12,13 +13,13 @@ from reflex.vars import Var
 class Alert(ChakraComponent):
    """An alert feedback box."""

-    tag = "Alert"
+    tag: str = "Alert"

    # The status of the alert ("success" | "info" | "warning" | "error")
-    status: Var[LiteralStatus]
+    status: Optional[Var[LiteralStatus]] = None

    # "subtle" | "left-accent" | "top-accent" | "solid"
-    variant: Var[LiteralAlertVariant]
+    variant: Optional[Var[LiteralAlertVariant]] = None

    @classmethod
    def create(
@ -53,16 +54,16 @@ class Alert(ChakraComponent):
 class AlertIcon(ChakraComponent):
    """An icon displayed in the alert."""

-    tag = "AlertIcon"
+    tag: str = "AlertIcon"


 class AlertTitle(ChakraComponent):
    """The title of the alert."""

-    tag = "AlertTitle"
+    tag: str = "AlertTitle"


 class AlertDescription(ChakraComponent):
    """AlertDescription composes the Box component."""

-    tag = "AlertDescription"
+    tag: str = "AlertDescription"
--- a/reflex/components/chakra/feedback/circularprogress.py
+++ b/reflex/components/chakra/feedback/circularprogress.py
@ -1,5 +1,5 @@
 """Container to stack elements with spacing."""
-from typing import Union
+from typing import Optional, Union

 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
@ -9,37 +9,37 @@ from reflex.vars import Var
 class CircularProgress(ChakraComponent):
    """The CircularProgress component is used to indicate the progress for determinate and indeterminate processes."""

-    tag = "CircularProgress"
+    tag: str = "CircularProgress"

    # If true, the cap of the progress indicator will be rounded.
-    cap_is_round: Var[bool]
+    cap_is_round: Optional[Var[bool]] = None

    # If true, the progress will be indeterminate and the value prop will be ignored
-    is_indeterminate: Var[bool]
+    is_indeterminate: Optional[Var[bool]] = None

    # Maximum value defining 100% progress made (must be higher than 'min')
-    max_: Var[int]
+    max_: Optional[Var[int]] = None

    # Minimum value defining 'no progress' (must be lower than 'max')
-    min_: Var[int]
+    min_: Optional[Var[int]] = None

    # This defines the stroke width of the svg circle.
-    thickness: Var[Union[str, int]]
+    thickness: Optional[Var[Union[str, int]]] = None

    # The color name of the progress track. Use a color key in the theme object
-    track_color: Var[str]
+    track_color: Optional[Var[str]] = None

    # Current progress (must be between min/max).
-    value: Var[int]
+    value: Optional[Var[int]] = None

    # The desired valueText to use in place of the value.
-    value_text: Var[str]
+    value_text: Optional[Var[str]] = None

    # The color name of the progress bar
-    color: Var[str]
+    color: Optional[Var[str]] = None

    # The size of the circular progress
-    size: Var[str]
+    size: Optional[Var[str]] = None

    @classmethod
    def create(cls, *children, label=None, **props) -> Component:
@ -64,4 +64,4 @@ class CircularProgress(ChakraComponent):
 class CircularProgressLabel(ChakraComponent):
    """Label of CircularProcess."""

-    tag = "CircularProgressLabel"
+    tag: str = "CircularProgressLabel"
--- a/reflex/components/chakra/feedback/progress.py
+++ b/reflex/components/chakra/feedback/progress.py
@ -1,6 +1,5 @@
 """Container to stack elements with spacing."""
-
-from typing import Union
+from typing import Optional, Union

 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@ -9,25 +8,25 @@ from reflex.vars import Var
 class Progress(ChakraComponent):
    """A bar to display progress."""

-    tag = "Progress"
+    tag: str = "Progress"

    # If true, the progress bar will show stripe
-    has_stripe: Var[bool]
+    has_stripe: Optional[Var[bool]] = None

    # If true, and has_stripe is true, the stripes will be animated
-    is_animated: Var[bool]
+    is_animated: Optional[Var[bool]] = None

    # If true, the progress will be indeterminate and the value prop will be ignored
-    is_indeterminate: Var[bool]
+    is_indeterminate: Optional[Var[bool]] = None

    # The maximum value of the progress
-    max_: Var[int]
+    max_: Optional[Var[int]] = None

    # The minimum value of the progress
-    min_: Var[int]
+    min_: Optional[Var[int]] = None

    # The value of the progress indicator. If undefined the progress bar will be in indeterminate state
-    value: Var[Union[int, float]]
+    value: Optional[Var[Union[int, float]]] = None

    # The color scheme of the progress bar.
-    color_scheme: Var[str]
+    color_scheme: Optional[Var[str]] = None
--- a/reflex/components/chakra/feedback/skeleton.py
+++ b/reflex/components/chakra/feedback/skeleton.py
@ -1,4 +1,5 @@
 """Container to stack elements with spacing."""
+from typing import Optional

 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@ -7,64 +8,64 @@ from reflex.vars import Var
 class Skeleton(ChakraComponent):
    """Skeleton is used to display the loading state of some components. You can use it as a standalone component. Or to wrap another component to take the same height and width."""

-    tag = "Skeleton"
+    tag: str = "Skeleton"

    # The color at the animation end
-    end_color: Var[str]
+    end_color: Optional[Var[str]] = None

    # The fadeIn duration in seconds
-    fade_duration: Var[float]
+    fade_duration: Optional[Var[float]] = None

    # If true, it'll render its children with a nice fade transition
-    is_loaded: Var[bool]
+    is_loaded: Optional[Var[bool]] = None

    # The animation speed in seconds
-    speed: Var[float]
+    speed: Optional[Var[float]] = None

    # The color at the animation start
-    start_color: Var[str]
+    start_color: Optional[Var[str]] = None


 class SkeletonCircle(ChakraComponent):
    """SkeletonCircle is used to display the loading state of some components."""

-    tag = "SkeletonCircle"
+    tag: str = "SkeletonCircle"

    # The color at the animation end
-    end_color: Var[str]
+    end_color: Optional[Var[str]] = None

    # The fadeIn duration in seconds
-    fade_duration: Var[float]
+    fade_duration: Optional[Var[float]] = None

    # If true, it'll render its children with a nice fade transition
-    is_loaded: Var[bool]
+    is_loaded: Optional[Var[bool]] = None

    # The animation speed in seconds
-    speed: Var[float]
+    speed: Optional[Var[float]] = None

    # The color at the animation start
-    start_color: Var[str]
+    start_color: Optional[Var[str]] = None


 class SkeletonText(ChakraComponent):
    """SkeletonText is used to display the loading state of some components."""

-    tag = "SkeletonText"
+    tag: str = "SkeletonText"

    # The color at the animation end
-    end_color: Var[str]
+    end_color: Optional[Var[str]] = None

    # The fadeIn duration in seconds
-    fade_duration: Var[float]
+    fade_duration: Optional[Var[float]] = None

    # If true, it'll render its children with a nice fade transition
-    is_loaded: Var[bool]
+    is_loaded: Optional[Var[bool]] = None

    # The animation speed in seconds
-    speed: Var[float]
+    speed: Optional[Var[float]] = None

    # The color at the animation start
-    start_color: Var[str]
+    start_color: Optional[Var[str]] = None

    # Number is lines of text.
-    no_of_lines: Var[int]
+    no_of_lines: Optional[Var[int]] = None
--- a/reflex/components/chakra/feedback/spinner.py
+++ b/reflex/components/chakra/feedback/spinner.py
@ -1,4 +1,5 @@
 """Container to stack elements with spacing."""
+from typing import Optional

 from reflex.components.chakra import ChakraComponent, LiteralSpinnerSize
 from reflex.vars import Var
@ -7,19 +8,19 @@ from reflex.vars import Var
 class Spinner(ChakraComponent):
    """The component that spins."""

-    tag = "Spinner"
+    tag: str = "Spinner"

    # The color of the empty area in the spinner
-    empty_color: Var[str]
+    empty_color: Optional[Var[str]] = None

    # For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.
-    label: Var[str]
+    label: Optional[Var[str]] = None

    # The speed of the spinner must be as a string and in seconds '1s'. Default is '0.45s'.
-    speed: Var[str]
+    speed: Optional[Var[str]] = None

    # The thickness of the spinner.
-    thickness: Var[int]
+    thickness: Optional[Var[int]] = None

    # "xs" | "sm" | "md" | "lg" | "xl"
-    size: Var[LiteralSpinnerSize]
+    size: Optional[Var[LiteralSpinnerSize]] = None
--- a/reflex/components/chakra/forms/button.py
+++ b/reflex/components/chakra/forms/button.py
@ -1,5 +1,5 @@
 """A button component."""
-from typing import List
+from typing import List, Optional

 from reflex.components.chakra import (
    ChakraComponent,
@ -14,69 +14,69 @@ from reflex.vars import Var
 class Button(ChakraComponent):
    """The Button component is used to trigger an event or event, such as submitting a form, opening a dialog, canceling an event, or performing a delete operation."""

-    tag = "Button"
+    tag: str = "Button"

    # The space between the button icon and label.
-    icon_spacing: Var[int]
+    icon_spacing: Optional[Var[int]] = None

    # If true, the button will be styled in its active state.
-    is_active: Var[bool]
+    is_active: Optional[Var[bool]] = None

    # If true, the button will be styled in its disabled state.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the button will take up the full width of its container.
-    is_full_width: Var[bool]
+    is_full_width: Optional[Var[bool]] = None

    # If true, the button will show a spinner.
-    is_loading: Var[bool]
+    is_loading: Optional[Var[bool]] = None

    # The label to show in the button when isLoading is true If no text is passed, it only shows the spinner.
-    loading_text: Var[str]
+    loading_text: Optional[Var[str]] = None

    # "lg" | "md" | "sm" | "xs"
-    size: Var[LiteralButtonSize]
+    size: Optional[Var[LiteralButtonSize]] = None

    # "ghost" | "outline" | "solid" | "link" | "unstyled"
-    variant: Var[LiteralButtonVariant]
+    variant: Optional[Var[LiteralButtonVariant]] = None

    # Built in color scheme for ease of use.
    # Options:
    # "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan"
    # | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
-    color_scheme: Var[LiteralColorScheme]
+    color_scheme: Optional[Var[LiteralColorScheme]] = None

    # Position of the loading spinner.
    # Options:
    # "start" | "end"
-    spinner_placement: Var[LiteralSpinnerPlacement]
+    spinner_placement: Optional[Var[LiteralSpinnerPlacement]] = None

    # The type of button.
-    type_: Var[str]
+    type_: Optional[Var[str]] = None

    # Components that are not allowed as children.
    _invalid_children: List[str] = ["Button", "MenuButton"]

    # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None


 class ButtonGroup(ChakraComponent):
    """A group of buttons."""

-    tag = "ButtonGroup"
+    tag: str = "ButtonGroup"

    # If true, the borderRadius of button that are direct children will be altered to look flushed together.
-    is_attached: Var[bool]
+    is_attached: Optional[Var[bool]] = None

    # If true, all wrapped button will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # The spacing between the buttons.
-    spacing: Var[int]
+    spacing: Optional[Var[int]] = None

    # "lg" | "md" | "sm" | "xs"
-    size: Var[LiteralButtonSize]
+    size: Optional[Var[LiteralButtonSize]] = None

    # "ghost" | "outline" | "solid" | "link" | "unstyled"
-    variant: Var[LiteralButtonVariant]
+    variant: Optional[Var[LiteralButtonVariant]] = None
--- a/reflex/components/chakra/forms/checkbox.py
+++ b/reflex/components/chakra/forms/checkbox.py
@ -1,7 +1,7 @@
 """A checkbox component."""
 from __future__ import annotations

-from typing import Any, Union
+from typing import Any, Optional, Union

 from reflex.components.chakra import (
    ChakraComponent,
@ -15,46 +15,46 @@ from reflex.vars import Var
 class Checkbox(ChakraComponent):
    """The Checkbox component is used in forms when a user needs to select multiple values from several options."""

-    tag = "Checkbox"
+    tag: str = "Checkbox"

    # Color scheme for checkbox.
    # Options:
    # "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan"
    # | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
-    color_scheme: Var[LiteralColorScheme]
+    color_scheme: Optional[Var[LiteralColorScheme]] = None

    # "sm" | "md" | "lg"
-    size: Var[LiteralTagSize]
+    size: Optional[Var[LiteralTagSize]] = None

    # If true, the checkbox will be checked.
-    is_checked: Var[bool]
+    is_checked: Optional[Var[bool]] = None

    # If true, the checkbox will be disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true and is_disabled is passed, the checkbox will remain tabbable but not interactive
-    is_focusable: Var[bool]
+    is_focusable: Optional[Var[bool]] = None

    # If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox and does not modify the is_checked var.
-    is_indeterminate: Var[bool]
+    is_indeterminate: Optional[Var[bool]] = None

    # If true, the checkbox is marked as invalid. Changes style of unchecked state.
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None

    # If true, the checkbox will be readonly
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None

    # If true, the checkbox input is marked as required, and required attribute will be added
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None

    # The name of the input field in a checkbox (Useful for form submission).
-    name: Var[str]
+    name: Optional[Var[str]] = None

    # The value of the input field when checked (use is_checked prop for a bool)
    value: Var[str] = Var.create("true")  # type: ignore

    # The spacing between the checkbox and its label text (0.5rem)
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers that pass the component's value to the handler.
@ -71,16 +71,16 @@ class Checkbox(ChakraComponent):
 class CheckboxGroup(ChakraComponent):
    """A group of checkboxes."""

-    tag = "CheckboxGroup"
+    tag: str = "CheckboxGroup"

    # The value of the checkbox group
-    value: Var[str]
+    value: Optional[Var[str]] = None

    # The initial value of the checkbox group
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None

    # If true, all wrapped checkbox inputs will be disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, input elements will receive checked attribute instead of isChecked. This assumes, you're using native radio inputs
-    is_native: Var[bool]
+    is_native: Optional[Var[bool]] = None
--- a/reflex/components/chakra/forms/colormodeswitch.py
+++ b/reflex/components/chakra/forms/colormodeswitch.py
@ -99,5 +99,5 @@ class ColorModeButton(Button):
 class ColorModeScript(ChakraComponent):
    """Chakra color mode script."""

-    tag = "ColorModeScript"
-    initialColorMode = LIGHT_COLOR_MODE
+    tag: str = "ColorModeScript"
+    initialColorMode: str = LIGHT_COLOR_MODE
--- a/reflex/components/chakra/forms/editable.py
+++ b/reflex/components/chakra/forms/editable.py
@ -1,7 +1,7 @@
 """An editable component."""
 from __future__ import annotations

-from typing import Any, Union
+from typing import Any, Optional, Union

 from reflex.components.chakra import ChakraComponent
 from reflex.constants import EventTriggers
@ -11,31 +11,31 @@ from reflex.vars import Var
 class Editable(ChakraComponent):
    """The wrapper component that provides context value."""

-    tag = "Editable"
+    tag: str = "Editable"

    # If true, the Editable will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the read only view, has a tabIndex set to 0 so it can receive focus via the keyboard or click.
-    is_preview_focusable: Var[bool]
+    is_preview_focusable: Optional[Var[bool]] = None

    # The placeholder text when the value is empty.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None

    # If true, the input's text will be highlighted on focus.
-    select_all_on_focus: Var[bool]
+    select_all_on_focus: Optional[Var[bool]] = None

    # If true, the Editable will start with edit mode by default.
-    start_with_edit_view: Var[bool]
+    start_with_edit_view: Optional[Var[bool]] = None

    # If true, it'll update the value onBlur and turn off the edit mode.
-    submit_on_blur: Var[bool]
+    submit_on_blur: Optional[Var[bool]] = None

    # The value of the Editable in both edit & preview mode
-    value: Var[str]
+    value: Optional[Var[str]] = None

    # The initial value of the Editable in both edit and preview mode.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers that pass the component's value to the handler.
@ -55,16 +55,16 @@ class Editable(ChakraComponent):
 class EditableInput(ChakraComponent):
    """The edit view of the component. It shows when you click or focus on the text."""

-    tag = "EditableInput"
+    tag: str = "EditableInput"


 class EditableTextarea(ChakraComponent):
    """Use the textarea element to handle multi line text input in an editable context."""

-    tag = "EditableTextarea"
+    tag: str = "EditableTextarea"


 class EditablePreview(ChakraComponent):
    """The read-only view of the component."""

-    tag = "EditablePreview"
+    tag: str = "EditablePreview"
--- a/reflex/components/chakra/forms/form.py
+++ b/reflex/components/chakra/forms/form.py
@ -2,7 +2,7 @@
 from __future__ import annotations

 from hashlib import md5
-from typing import Any, Dict, Iterator
+from typing import Any, Dict, Iterator, Optional

 from jinja2 import Environment

@ -36,7 +36,7 @@ HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
 class Form(ChakraComponent):
    """A form component."""

-    tag = "Box"
+    tag: str = "Box"

    # What the form renders to.
    as_: Var[str] = "form"  # type: ignore
@ -45,7 +45,7 @@ class Form(ChakraComponent):
    reset_on_submit: Var[bool] = False  # type: ignore

    # The name used to make this form's submit handler function unique
-    handle_submit_unique_name: Var[str]
+    handle_submit_unique_name: Optional[Var[str]] = None

    @classmethod
    def create(cls, *children, **props) -> Component:
@ -151,22 +151,22 @@ class Form(ChakraComponent):
 class FormControl(ChakraComponent):
    """Provide context to form components."""

-    tag = "FormControl"
+    tag: str = "FormControl"

    # If true, the form control will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the form control will be invalid.
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None

    # If true, the form control will be readonly
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None

    # If true, the form control will be required.
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None

    # The label text used to inform users as to what information is requested for a text field.
-    label: Var[str]
+    label: Optional[Var[str]] = None

    @classmethod
    def create(
@ -216,19 +216,19 @@ class FormControl(ChakraComponent):
 class FormHelperText(ChakraComponent):
    """A form helper text component."""

-    tag = "FormHelperText"
+    tag: str = "FormHelperText"


 class FormLabel(ChakraComponent):
    """A form label component."""

-    tag = "FormLabel"
+    tag: str = "FormLabel"

    # Link
-    html_for: Var[str]
+    html_for: Optional[Var[str]] = None


 class FormErrorMessage(ChakraComponent):
    """A form error message component."""

-    tag = "FormErrorMessage"
+    tag: str = "FormErrorMessage"
--- a/reflex/components/chakra/forms/iconbutton.py
+++ b/reflex/components/chakra/forms/iconbutton.py
@ -1,5 +1,4 @@
 """An icon button component."""
-
 from typing import Optional

 from reflex.components.chakra.typography.text import Text
@ -10,29 +9,29 @@ from reflex.vars import Var
 class IconButton(Text):
    """A button with an icon."""

-    tag = "IconButton"
-    library = "@chakra-ui/button@2.1.0"
+    tag: str = "IconButton"
+    library: str = "@chakra-ui/button@2.1.0"

    # The type of button.
-    type: Var[str]
+    type: Optional[Var[str]] = None

    #  A label that describes the button
-    aria_label: Var[str]
+    aria_label: Optional[Var[str]] = None

    # The icon to be used in the button.
-    icon: Optional[Component]
+    icon: Optional[Component] = None

    # If true, the button will be styled in its active state.
-    is_active: Var[bool]
+    is_active: Optional[Var[bool]] = None

    # If true, the button will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the button will show a spinner.
-    is_loading: Var[bool]
+    is_loading: Optional[Var[bool]] = None

    # If true, the button will be perfectly round. Else, it'll be slightly round
-    is_round: Var[bool]
+    is_round: Optional[Var[bool]] = None

    # Replace the spinner component when isLoading is set to true
-    spinner: Var[str]
+    spinner: Optional[Var[str]] = None
--- a/reflex/components/chakra/forms/input.py
+++ b/reflex/components/chakra/forms/input.py
@ -1,6 +1,5 @@
 """An input component."""
-
-from typing import Any, Dict
+from typing import Any, Dict, Optional

 from reflex.components.chakra import (
    ChakraComponent,
@ -18,46 +17,46 @@ from reflex.vars import Var
 class Input(ChakraComponent):
    """The Input component is a component that is used to get user input in a text field."""

-    tag = "Input"
+    tag: str = "Input"

    # State var to bind the input.
-    value: Var[str]
+    value: Optional[Var[str]] = None

    # The default value of the input.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None

    # The placeholder text.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None

    # The type of input.
-    type_: Var[LiteralInputType]
+    type_: Optional[Var[LiteralInputType]] = None

    # The border color when the input is invalid.
-    error_border_color: Var[str]
+    error_border_color: Optional[Var[str]] = None

    # The border color when the input is focused.
-    focus_border_color: Var[str]
+    focus_border_color: Optional[Var[str]] = None

    # If true, the form control will be disabled. This has 2 side effects - The FormLabel will have `data-disabled` attribute - The form element (e.g, Input) will be disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the form control will be invalid. This has 2 side effects - The FormLabel and FormErrorIcon will have `data-invalid` set to true - The form element (e.g, Input) will have `aria-invalid` set to true
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None

    # If true, the form control will be readonly.
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None

    # If true, the form control will be required. This has 2 side effects - The FormLabel will show a required indicator - The form element (e.g, Input) will have `aria-required` set to true
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None

    # "outline" | "filled" | "flushed" | "unstyled"
-    variant: Var[LiteralInputVariant]
+    variant: Optional[Var[LiteralInputVariant]] = None

    # "lg" | "md" | "sm" | "xs"
-    size: Var[LiteralButtonSize]
+    size: Optional[Var[LiteralButtonSize]] = None

    # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None

    def _get_imports(self) -> imports.ImportDict:
        return imports.merge_imports(
@ -100,7 +99,7 @@ class Input(ChakraComponent):
 class InputGroup(ChakraComponent):
    """The InputGroup component is a component that is used to group a set of inputs."""

-    tag = "InputGroup"
+    tag: str = "InputGroup"

    _memoization_mode = MemoizationMode(recursive=False)

@ -108,22 +107,22 @@ class InputGroup(ChakraComponent):
 class InputLeftAddon(ChakraComponent):
    """The InputLeftAddon component is a component that is used to add an addon to the left of an input."""

-    tag = "InputLeftAddon"
+    tag: str = "InputLeftAddon"


 class InputRightAddon(ChakraComponent):
    """The InputRightAddon component is a component that is used to add an addon to the right of an input."""

-    tag = "InputRightAddon"
+    tag: str = "InputRightAddon"


 class InputLeftElement(ChakraComponent):
    """The InputLeftElement component is a component that is used to add an element to the left of an input."""

-    tag = "InputLeftElement"
+    tag: str = "InputLeftElement"


 class InputRightElement(ChakraComponent):
    """The InputRightElement component is a component that is used to add an element to the right of an input."""

-    tag = "InputRightElement"
+    tag: str = "InputRightElement"
--- a/reflex/components/chakra/forms/multiselect.py
+++ b/reflex/components/chakra/forms/multiselect.py
@ -46,24 +46,24 @@ class Select(Component):
    Props added by chakra-react-select are marked with "[chakra]".
    """

-    library = "chakra-react-select@4.7.5"
-    tag = "Select"
-    alias = "MultiSelect"
+    library: str = "chakra-react-select@4.7.5"
+    tag: str = "Select"
+    alias: str = "MultiSelect"

    # Focus the control when it is mounted
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None

    # Remove the currently focused option when the user presses backspace
    #  when Select isClearable or isMulti
-    backspace_removes_value: Var[bool]
+    backspace_removes_value: Optional[Var[bool]] = None

    # Remove focus from the input when the user selects an option
    # (handy for dismissing the keyboard on touch devices)
-    blur_input_on_select: Var[bool]
+    blur_input_on_select: Optional[Var[bool]] = None

    # When the user reaches the top/bottom of the menu,
    # prevent scroll on the scroll-parent
-    capture_menu_scroll: Var[bool]
+    capture_menu_scroll: Optional[Var[bool]] = None

    # [chakra]
    # To use the chakraStyles prop, first,
@ -101,13 +101,13 @@ class Select(Component):
    # - placeholder - Box
    # - singleValue - Box
    # - valueContainer - Box
-    chakra_styles: Var[str]
+    chakra_styles: Optional[Var[str]] = None

    # Close the select menu when the user selects an option
-    close_menu_on_select: Var[bool]
+    close_menu_on_select: Optional[Var[bool]] = None

    # If true, close the select menu when the user scrolls the document/body.
-    close_menu_on_scroll: Var[bool]
+    close_menu_on_scroll: Optional[Var[bool]] = None

    # [chakra]
    # The visual color appearance of the component
@ -116,117 +116,117 @@ class Select(Component):
    #  "purple" | "pink" | "linkedin" | "facebook" | "messenger" |
    #  "whatsapp" | "twitter" | "telegram"
    # default: "gray"
-    color_scheme: Var[str]
+    color_scheme: Optional[Var[str]] = None

    # This complex object includes all the compositional components
    # that are used in react-select. If you wish to overwrite a component,
    # pass in an object with the appropriate namespace.
    # If you only wish to restyle a component,
    # we recommend using the styles prop instead.
-    components: Var[Dict[str, Component]]
+    components: Optional[Var[Dict[str, Component]]] = None

    # Whether the value of the select, e.g. SingleValue,
    # should be displayed in the control.
-    control_should_render_value: Var[bool]
+    control_should_render_value: Optional[Var[bool]] = None

    # Delimiter used to join multiple values into a single HTML Input value
-    delimiter: Var[str]
+    delimiter: Optional[Var[str]] = None

    # [chakra]
    # Colors the component border with the given chakra color string on error state
    # default: "red.500"
-    error_border_color: Var[str]
+    error_border_color: Optional[Var[str]] = None

    # Clear all values when the user presses escape AND the menu is closed
-    escape_clears_value: Var[bool]
+    escape_clears_value: Optional[Var[bool]] = None

    # [chakra]
    # Colors the component border with the given chakra color string on focus
    # default: "blue.500"
-    focus_border_color: Var[str]
+    focus_border_color: Optional[Var[str]] = None

    # Sets the form attribute on the input
-    form: Var[str]
+    form: Optional[Var[str]] = None

    # Hide the selected option from the menu
-    hide_selected_options: Var[bool]
+    hide_selected_options: Optional[Var[bool]] = None

    # The id to set on the SelectContainer component.
-    # id: Var[str]
+    # id: Optional[Var[str]] = None

    # The value of the search input
-    input_value: Var[str]
+    input_value: Optional[Var[str]] = None

    # The id of the search input
-    input_id: Var[str]
+    input_id: Optional[Var[str]] = None

    # Is the select value clearable
-    is_clearable: Var[bool]
+    is_clearable: Optional[Var[bool]] = None

    # Is the select disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # [chakra]
    # Style component in the chakra invalid style
    # default: False
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None

    # Support multiple selected options
-    is_multi: Var[bool]
+    is_multi: Optional[Var[bool]] = None

    # [chakra]
    # Style component as disabled (chakra style)
    # default: False
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None

    # Is the select direction right-to-left
-    is_rtl: Var[bool]
+    is_rtl: Optional[Var[bool]] = None

    # Whether to enable search functionality
-    is_searchable: Var[bool]
+    is_searchable: Optional[Var[bool]] = None

    # Minimum height of the menu before flipping
-    min_menu_height: Var[int]
+    min_menu_height: Optional[Var[int]] = None

    # Maximum height of the menu before scrolling
-    max_menu_height: Var[int]
+    max_menu_height: Optional[Var[int]] = None

    # Default placement of the menu in relation to the control.
    # 'auto' will flip when there isn't enough space below the control.
    # options: "bottom" | "auto" | "top"
-    menu_placement: Var[str]
+    menu_placement: Optional[Var[str]] = None

    # The CSS position value of the menu,
    #  when "fixed" extra layout management is required
    # options: "absolute" | "fixed"
-    menu_position: Var[str]
+    menu_position: Optional[Var[str]] = None

    # Whether to block scroll events when the menu is open
-    menu_should_block_scroll: Var[bool]
+    menu_should_block_scroll: Optional[Var[bool]] = None

    # Whether the menu should be scrolled into view when it opens
-    menu_should_scroll_into_view: Var[bool]
+    menu_should_scroll_into_view: Optional[Var[bool]] = None

    # Name of the HTML Input (optional - without this, no input will be rendered)
-    name: Var[str]
+    name: Optional[Var[str]] = None

    # Allows control of whether the menu is opened when the Select is focused
-    open_menu_on_focus: Var[bool]
+    open_menu_on_focus: Optional[Var[bool]] = None

    # Allows control of whether the menu is opened when the Select is clicked
-    open_menu_on_click: Var[bool]
+    open_menu_on_click: Optional[Var[bool]] = None

    # Array of options that populate the select menu
-    options: Var[List[Dict]]
+    options: Optional[Var[List[Dict]]] = None

    # Number of options to jump in menu when page{up|down} keys are used
-    page_size: Var[int]
+    page_size: Optional[Var[int]] = None

    # Placeholder for the select value
-    placeholder: Var[Optional[str]]
+    placeholder: Optional[Var[Optional[str]]] = None

    # Marks the value-holding input as required for form validation
-    required: Var[bool]
+    required: Optional[Var[bool]] = None

    # [chakra]
    # If you choose to stick with the default selectedOptionStyle="color",
@ -239,7 +239,7 @@ class Select(Component):
    # If you would like to use a specific color for the background that's not a part of your theme,
    # use the chakraStyles prop to customize it.
    # default: "blue"
-    selected_option_color_scheme: Var[str]
+    selected_option_color_scheme: Optional[Var[str]] = None

    # [chakra]
    # The default option "color" will style a selected option
@ -253,28 +253,28 @@ class Select(Component):
    # if hide_selected_options=False is also passed.
    # options: "color" | "check"
    # default: "color"
-    selected_option_style: Var[str]
+    selected_option_style: Optional[Var[str]] = None

    # [chakra]
    # The size of the component.
    # options: "sm" | "md" | "lg"
    # default: "md"
-    size: Var[str]
+    size: Optional[Var[str]] = None

    # Sets the tabIndex attribute on the input
-    tab_index: Var[int]
+    tab_index: Optional[Var[int]] = None

    # Select the currently focused option when the user presses tab
-    tab_selects_value: Var[bool]
+    tab_selects_value: Optional[Var[bool]] = None

    # [chakra]
    # Variant of multi-select tags
    # options: "subtle" | "solid" | "outline"
    # default: "subtle"
-    tag_variant: Var[str]
+    tag_variant: Optional[Var[str]] = None

    # Remove all non-essential styles
-    unstyled: Var[bool]
+    unstyled: Optional[Var[bool]] = None

    # [chakra]
    # If this prop is passed,
@ -287,7 +287,7 @@ class Select(Component):
    # However, as this button only appears when isMulti is passed,
    # using this style could make more sense for a single select.
    # default: False
-    use_basic_style: Var[bool]
+    use_basic_style: Optional[Var[bool]] = None

    # [chakra]
    # The variant of the Select. If no variant is passed,
@ -295,7 +295,7 @@ class Select(Component):
    # If your component theme for Input is not modified, it will be outline.
    # options: "outline" | "filled" | "flushed" | "unstyled"
    # default: "outline"
-    variant: Var[str]
+    variant: Optional[Var[str]] = None

    # How the options should be displayed in the menu.
    menu_position: Var[str] = "fixed"  # type: ignore
@ -348,7 +348,7 @@ class Select(Component):
                    converted_options.append(Option(label=str(option), value=option))
                else:
                    converted_options.append(option)
-            props["options"] = [o.dict() for o in converted_options]
+            props["options"] = [o.model_dump() for o in converted_options]
        else:
            props["options"] = options
        return super().create(*[], **props)
--- a/reflex/components/chakra/forms/numberinput.py
+++ b/reflex/components/chakra/forms/numberinput.py
@ -1,7 +1,6 @@
 """A number input component."""
-
 from numbers import Number
-from typing import Any, Dict
+from typing import Any, Dict, Optional

 from reflex.components.chakra import (
    ChakraComponent,
@ -16,64 +15,64 @@ from reflex.vars import Var
 class NumberInput(ChakraComponent):
    """The wrapper that provides context and logic to the components."""

-    tag = "NumberInput"
+    tag: str = "NumberInput"

    # State var to bind the input.
-    value: Var[Number]
+    value: Optional[Var[Number]] = None

    # If true, the input's value will change based on mouse wheel.
-    allow_mouse_wheel: Var[bool]
+    allow_mouse_wheel: Optional[Var[bool]] = None

    # This controls the value update when you blur out of the input. - If true and the value is greater than max, the value will be reset to max - Else, the value remains the same.
-    clamped_value_on_blur: Var[bool]
+    clamped_value_on_blur: Optional[Var[bool]] = None

    # The initial value of the counter. Should be less than max and greater than min
-    default_value: Var[Number]
+    default_value: Optional[Var[Number]] = None

    # The border color when the input is invalid.
-    error_border_color: Var[str]
+    error_border_color: Optional[Var[str]] = None

    # The border color when the input is focused.
-    focus_border_color: Var[str]
+    focus_border_color: Optional[Var[str]] = None

    # If true, the input will be focused as you increment or decrement the value with the stepper
-    focus_input_on_change: Var[bool]
+    focus_input_on_change: Optional[Var[bool]] = None

    # Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices ("text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal")
-    # input_mode: Var[LiteralInputNumberMode]
+    # input_mode: Optional[Var[LiteralInputNumberMode]] = None

    # Whether the input should be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the input will have `aria-invalid` set to true
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None

    # If true, the input will be in readonly mode
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None

    # Whether the input is required
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None

    # Whether the pressed key should be allowed in the input. The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\-.]$/
-    is_valid_character: Var[str]
+    is_valid_character: Optional[Var[str]] = None

    # This controls the value update behavior in general. - If true and you use the stepper or up/down arrow keys, the value will not exceed the max or go lower than min - If false, the value will be allowed to go out of range.
-    keep_within_range: Var[bool]
+    keep_within_range: Optional[Var[bool]] = None

    # The maximum value of the counter
-    max_: Var[Number]
+    max_: Optional[Var[Number]] = None

    # The minimum value of the counter
-    min_: Var[Number]
+    min_: Optional[Var[Number]] = None

    # "outline" | "filled" | "flushed" | "unstyled"
-    variant: Var[LiteralInputVariant]
+    variant: Optional[Var[LiteralInputVariant]] = None

    # "lg" | "md" | "sm" | "xs"
-    size: Var[LiteralButtonSize]
+    size: Optional[Var[LiteralButtonSize]] = None

    # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None

    def get_event_triggers(self) -> Dict[str, Any]:
        """Get the event triggers that pass the component's value to the handler.
@ -116,22 +115,22 @@ class NumberInput(ChakraComponent):
 class NumberInputField(ChakraComponent):
    """The input field itself."""

-    tag = "NumberInputField"
+    tag: str = "NumberInputField"


 class NumberInputStepper(ChakraComponent):
    """The wrapper for the input's stepper buttons."""

-    tag = "NumberInputStepper"
+    tag: str = "NumberInputStepper"


 class NumberIncrementStepper(ChakraComponent):
    """The button to increment the value of the input."""

-    tag = "NumberIncrementStepper"
+    tag: str = "NumberIncrementStepper"


 class NumberDecrementStepper(ChakraComponent):
    """The button to decrement the value of the input."""

-    tag = "NumberDecrementStepper"
+    tag: str = "NumberDecrementStepper"
--- a/reflex/components/chakra/forms/pininput.py
+++ b/reflex/components/chakra/forms/pininput.py
@ -15,52 +15,52 @@ from reflex.vars import Var
 class PinInput(ChakraComponent):
    """The component that provides context to all the pin-input fields."""

-    tag = "PinInput"
+    tag: str = "PinInput"

    # State var to bind the the input.
-    value: Var[str]
+    value: Optional[Var[str]] = None

    # If true, the pin input receives focus on mount
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None

    # The default value of the pin input
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None

    # The border color when the input is invalid.
-    error_border_color: Var[str]
+    error_border_color: Optional[Var[str]] = None

    # The border color when the input is focused.
-    focus_border_color: Var[str]
+    focus_border_color: Optional[Var[str]] = None

    # The top-level id string that will be applied to the input fields. The index of the input will be appended to this top-level id.
-    id_: Var[str]
+    id_: Optional[Var[str]] = None

    # The length of the number input.
-    length: Var[int]
+    length: Optional[Var[int]] = None

    # If true, the pin input component is put in the disabled state
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the pin input component is put in the invalid state
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None

    # If true, focus will move automatically to the next input once filled
-    manage_focus: Var[bool]
+    manage_focus: Optional[Var[bool]] = None

    # If true, the input's value will be masked just like `type=password`
-    mask: Var[bool]
+    mask: Optional[Var[bool]] = None

    # The placeholder for the pin input
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None

    # The type of values the pin-input should allow ("number" | "alphanumeric").
-    type_: Var[str]
+    type_: Optional[Var[str]] = None

    # "outline" | "flushed" | "filled" | "unstyled"
-    variant: Var[LiteralInputVariant]
+    variant: Optional[Var[LiteralInputVariant]] = None

    # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None

    def _get_imports(self) -> ImportDict:
        """Include PinInputField explicitly because it may not be a child component at compile time.
@ -164,14 +164,14 @@ class PinInput(ChakraComponent):
 class PinInputField(ChakraComponent):
    """The text field that user types in - must be a direct child of PinInput."""

-    tag = "PinInputField"
+    tag: str = "PinInputField"

    # the position of the PinInputField inside the PinInput.
    # Default to None because it is assigned by PinInput when created.
    index: Optional[Var[int]] = None

    # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None

    @classmethod
    def for_length(cls, length: Var | int, **props) -> Var:
--- a/reflex/components/chakra/forms/radio.py
+++ b/reflex/components/chakra/forms/radio.py
@ -1,7 +1,5 @@
 """A radio component."""
-
-
-from typing import Any, Dict, List, Union
+from typing import Any, Dict, List, Optional, Union

 from reflex.components.chakra import ChakraComponent
 from reflex.components.chakra.typography.text import Text
@ -15,16 +13,16 @@ from reflex.vars import Var
 class RadioGroup(ChakraComponent):
    """A grouping of individual radio options."""

-    tag = "RadioGroup"
+    tag: str = "RadioGroup"

    # State var to bind the the input.
-    value: Var[Any]
+    value: Optional[Var[Any]] = None

    # The default value.
-    default_value: Var[Any]
+    default_value: Optional[Var[Any]] = None

    # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None

    def get_event_triggers(self) -> Dict[str, Union[Var, Any]]:
        """Get the event triggers that pass the component's value to the handler.
@ -62,34 +60,34 @@ class RadioGroup(ChakraComponent):
 class Radio(Text):
    """Radios are used when only one choice may be selected in a series of options."""

-    tag = "Radio"
+    tag: str = "Radio"

    # Value of radio.
-    value: Var[Any]
+    value: Optional[Var[Any]] = None

    # The default value.
-    default_value: Var[Any]
+    default_value: Optional[Var[Any]] = None

    # The color scheme.
-    color_scheme: Var[str]
+    color_scheme: Optional[Var[str]] = None

    # If true, the radio will be initially checked.
-    default_checked: Var[bool]
+    default_checked: Optional[Var[bool]] = None

    # If true, the radio will be checked. You'll need to pass onChange to update its value (since it is now controlled)
-    is_checked: Var[bool]
+    is_checked: Optional[Var[bool]] = None

    # If true, the radio will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the radio button will be invalid. This also sets `aria-invalid` to true.
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None

    # If true, the radio will be read-only
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None

    # If true, the radio button will be required. This also sets `aria-required` to true.
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None

    @classmethod
    def create(cls, *children, **props) -> Component:
--- a/reflex/components/chakra/forms/rangeslider.py
+++ b/reflex/components/chakra/forms/rangeslider.py
@ -13,40 +13,40 @@ from reflex.vars import Var
 class RangeSlider(ChakraComponent):
    """The RangeSlider is a multi thumb slider used to select a range of related values. A common use-case of this component is a price range picker that allows a user to set the minimum and maximum price."""

-    tag = "RangeSlider"
+    tag: str = "RangeSlider"

    # State var to bind the the input.
-    value: Var[List[int]]
+    value: Optional[Var[List[int]]] = None

    # The default values.
-    default_value: Var[List[int]]
+    default_value: Optional[Var[List[int]]] = None

    # The writing mode ("ltr" | "rtl")
-    direction: Var[LiteralChakraDirection]
+    direction: Optional[Var[LiteralChakraDirection]] = None

    # If false, the slider handle will not capture focus when value changes.
-    focus_thumb_on_change: Var[bool]
+    focus_thumb_on_change: Optional[Var[bool]] = None

    # If true, the slider will be disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the slider will be in `read-only` state.
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None

    # If true, the value will be incremented or decremented in reverse.
-    is_reversed: Var[bool]
+    is_reversed: Optional[Var[bool]] = None

    # The minimum value of the slider.
-    min_: Var[int]
+    min_: Optional[Var[int]] = None

    # The maximum value of the slider.
-    max_: Var[int]
+    max_: Optional[Var[int]] = None

    # The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
-    min_steps_between_thumbs: Var[int]
+    min_steps_between_thumbs: Optional[Var[int]] = None

    # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers that pass the component's value to the handler.
@ -121,22 +121,22 @@ class RangeSlider(ChakraComponent):
 class RangeSliderTrack(ChakraComponent):
    """A range slider track."""

-    tag = "RangeSliderTrack"
+    tag: str = "RangeSliderTrack"


 class RangeSliderFilledTrack(ChakraComponent):
    """A filled range slider track."""

-    tag = "RangeSliderFilledTrack"
+    tag: str = "RangeSliderFilledTrack"


 class RangeSliderThumb(ChakraComponent):
    """A range slider thumb."""

-    tag = "RangeSliderThumb"
+    tag: str = "RangeSliderThumb"

    # The position of the thumb.
-    index: Var[int]
+    index: Optional[Var[int]] = None

    def _get_ref_hook(self) -> Optional[str]:
        # hook is None because RangeSlider is handling it.
--- a/reflex/components/chakra/forms/select.py
+++ b/reflex/components/chakra/forms/select.py
@ -1,6 +1,5 @@
 """A select component."""
-
-from typing import Any, Dict, List, Union
+from typing import Any, Dict, List, Optional, Union

 from reflex.components.chakra import ChakraComponent, LiteralInputVariant
 from reflex.components.chakra.typography.text import Text
@ -14,40 +13,40 @@ from reflex.vars import Var
 class Select(ChakraComponent):
    """Select component is a component that allows users pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead."""

-    tag = "Select"
+    tag: str = "Select"

    # State var to bind the select.
-    value: Var[str]
+    value: Optional[Var[str]] = None

    # The default value of the select.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None

    # The placeholder text.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None

    # The border color when the select is invalid.
-    error_border_color: Var[str]
+    error_border_color: Optional[Var[str]] = None

    # The border color when the select is focused.
-    focus_border_color: Var[str]
+    focus_border_color: Optional[Var[str]] = None

    # If true, the select will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the form control will be invalid. This has 2 side effects: - The FormLabel and FormErrorIcon will have `data-invalid` set to true - The form element (e.g, Input) will have `aria-invalid` set to true
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None

    # If true, the form control will be required. This has 2 side effects: - The FormLabel will show a required indicator - The form element (e.g, Input) will have `aria-required` set to true
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None

    # "outline" | "filled" | "flushed" | "unstyled"
-    variant: Var[LiteralInputVariant]
+    variant: Optional[Var[LiteralInputVariant]] = None

    # The size of the select.
-    size: Var[str]
+    size: Optional[Var[str]] = None

    # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None

    def get_event_triggers(self) -> Dict[str, Union[Var, Any]]:
        """Get the event triggers that pass the component's value to the handler.
@ -88,9 +87,9 @@ class Select(ChakraComponent):
 class Option(Text):
    """A select option."""

-    tag = "option"
+    tag: str = "option"

-    value: Var[Any]
+    value: Optional[Var[Any]] = None

    @classmethod
    def create(cls, *children, **props) -> Component:
--- a/reflex/components/chakra/forms/slider.py
+++ b/reflex/components/chakra/forms/slider.py
@ -1,7 +1,7 @@
 """A slider component."""
 from __future__ import annotations

-from typing import Any, Literal, Union
+from typing import Any, Literal, Optional, Union

 from reflex.components.chakra import ChakraComponent, LiteralChakraDirection
 from reflex.components.component import Component
@ -14,61 +14,61 @@ LiteralLayout = Literal["horizontal", "vertical"]
 class Slider(ChakraComponent):
    """The wrapper that provides context and functionality for all children."""

-    tag = "Slider"
+    tag: str = "Slider"

    # State var to bind the input.
-    value: Var[int]
+    value: Optional[Var[int]] = None

    # The color scheme.
-    color_scheme: Var[str]
+    color_scheme: Optional[Var[str]] = None

    # The placeholder text.
-    default_value: Var[int]
+    default_value: Optional[Var[int]] = None

    # The writing mode ("ltr" | "rtl")
-    direction: Var[LiteralChakraDirection]
+    direction: Optional[Var[LiteralChakraDirection]] = None

    # If false, the slider handle will not capture focus when value changes.
-    focus_thumb_on_change: Var[bool]
+    focus_thumb_on_change: Optional[Var[bool]] = None

    # If true, the slider will be disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the slider will be in `read-only` state.
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None

    # If true, the value will be incremented or decremented in reverse.
-    is_reversed: Var[bool]
+    is_reversed: Optional[Var[bool]] = None

    # The minimum value of the slider.
-    min_: Var[int]
+    min_: Optional[Var[int]] = None

    # The maximum value of the slider.
-    max_: Var[int]
+    max_: Optional[Var[int]] = None

    # The step in which increments/decrements have to be made
-    step: Var[int]
+    step: Optional[Var[int]] = None

    # The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
-    min_steps_between_thumbs: Var[int]
+    min_steps_between_thumbs: Optional[Var[int]] = None

    # Oreintation of the slider vertical | horizontal.
-    orientation: Var[LiteralLayout]
+    orientation: Optional[Var[LiteralLayout]] = None

    # Minimum height of the slider.
-    min_h: Var[str]
+    min_h: Optional[Var[str]] = None

    # Minimum width of the slider.
-    min_w: Var[str]
+    min_w: Optional[Var[str]] = None

    # Maximum height of the slider.
-    max_h: Var[str]
+    max_h: Optional[Var[str]] = None

    # Maximum width of the slider.
-    max_w: Var[str]
+    max_w: Optional[Var[str]] = None

    # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers that pass the component's value to the handler.
@ -109,25 +109,25 @@ class Slider(ChakraComponent):
 class SliderTrack(ChakraComponent):
    """The empty part of the slider that shows the track."""

-    tag = "SliderTrack"
+    tag: str = "SliderTrack"


 class SliderFilledTrack(ChakraComponent):
    """The filled part of the slider."""

-    tag = "SliderFilledTrack"
+    tag: str = "SliderFilledTrack"


 class SliderThumb(ChakraComponent):
    """The handle that's used to change the slider value."""

-    tag = "SliderThumb"
+    tag: str = "SliderThumb"

    # The size of the thumb.
-    box_size: Var[str]
+    box_size: Optional[Var[str]] = None


 class SliderMark(ChakraComponent):
    """The label or mark that shows names for specific slider values."""

-    tag = "SliderMark"
+    tag: str = "SliderMark"
--- a/reflex/components/chakra/forms/switch.py
+++ b/reflex/components/chakra/forms/switch.py
@ -1,7 +1,7 @@
 """A switch component."""
 from __future__ import annotations

-from typing import Any, Union
+from typing import Any, Optional, Union

 from reflex.components.chakra import ChakraComponent, LiteralColorScheme
 from reflex.constants import EventTriggers
@ -11,40 +11,40 @@ from reflex.vars import Var
 class Switch(ChakraComponent):
    """Toggleable switch component."""

-    tag = "Switch"
+    tag: str = "Switch"

    # If true, the switch will be checked. You'll need to set an on_change event handler to update its value (since it is now controlled)
-    is_checked: Var[bool]
+    is_checked: Optional[Var[bool]] = None

    # If true, the switch will be disabled
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true and is_disabled prop is set, the switch will remain tabbable but not interactive.
-    is_focusable: Var[bool]
+    is_focusable: Optional[Var[bool]] = None

    # If true, the switch is marked as invalid. Changes style of unchecked state.
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None

    # If true, the switch will be readonly
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None

    # If true, the switch will be required
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None

    # The name of the input field in a switch (Useful for form submission).
-    name: Var[str]
+    name: Optional[Var[str]] = None

    # The value of the input field when checked (use is_checked prop for a bool)
    value: Var[str] = Var.create(True)  # type: ignore

    # The spacing between the switch and its label text (0.5rem)
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None

    # The placeholder text.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None

    # The color scheme of the switch (e.g. "blue", "green", "red", etc.)
-    color_scheme: Var[LiteralColorScheme]
+    color_scheme: Optional[Var[LiteralColorScheme]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers that pass the component's value to the handler.
--- a/reflex/components/chakra/forms/textarea.py
+++ b/reflex/components/chakra/forms/textarea.py
@ -1,7 +1,7 @@
 """A textarea component."""
 from __future__ import annotations

-from typing import Any, Union
+from typing import Any, Optional, Union

 from reflex.components.chakra import ChakraComponent, LiteralInputVariant
 from reflex.components.component import Component
@ -13,40 +13,40 @@ from reflex.vars import Var
 class TextArea(ChakraComponent):
    """A text area component."""

-    tag = "Textarea"
+    tag: str = "Textarea"

    # State var to bind the input.
-    value: Var[str]
+    value: Optional[Var[str]] = None

    # The default value of the textarea.
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None

    # The placeholder text.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None

    # The border color when the input is invalid.
-    error_border_color: Var[str]
+    error_border_color: Optional[Var[str]] = None

    # The border color when the input is focused.
-    focus_border_color: Var[str]
+    focus_border_color: Optional[Var[str]] = None

    # If true, the form control will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the form control will be invalid.
-    is_invalid: Var[bool]
+    is_invalid: Optional[Var[bool]] = None

    # If true, the form control will be read-only.
-    is_read_only: Var[bool]
+    is_read_only: Optional[Var[bool]] = None

    # If true, the form control will be required.
-    is_required: Var[bool]
+    is_required: Optional[Var[bool]] = None

    # "outline" | "filled" | "flushed" | "unstyled"
-    variant: Var[LiteralInputVariant]
+    variant: Optional[Var[LiteralInputVariant]] = None

    # The name of the form field
-    name: Var[str]
+    name: Optional[Var[str]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers that pass the component's value to the handler.
--- a/reflex/components/chakra/layout/aspect_ratio.py
+++ b/reflex/components/chakra/layout/aspect_ratio.py
@ -1,4 +1,5 @@
 """A AspectRatio component."""
+from typing import Optional

 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@ -7,7 +8,7 @@ from reflex.vars import Var
 class AspectRatio(ChakraComponent):
    """AspectRatio component is used to embed responsive videos and maps, etc."""

-    tag = "AspectRatio"
+    tag: str = "AspectRatio"

    # The aspect ratio of the Box
-    ratio: Var[float]
+    ratio: Optional[Var[float]] = None
--- a/reflex/components/chakra/layout/box.py
+++ b/reflex/components/chakra/layout/box.py
@ -1,4 +1,5 @@
 """A box component that can contain other components."""
+from typing import Optional

 from reflex.components.chakra import ChakraComponent
 from reflex.components.tags import Tag
@ -8,16 +9,16 @@ from reflex.vars import Var
 class Box(ChakraComponent):
    """A generic container component that can contain other components."""

-    tag = "Box"
+    tag: str = "Box"

    # The type element to render. You can specify an image, video, or any other HTML element such as iframe.
-    element: Var[str]
+    element: Optional[Var[str]] = None

    # The source of the content.
-    src: Var[str]
+    src: Optional[Var[str]] = None

    # The alt text of the content.
-    alt: Var[str]
+    alt: Optional[Var[str]] = None

    def _render(self) -> Tag:
        return (
--- a/reflex/components/chakra/layout/card.py
+++ b/reflex/components/chakra/layout/card.py
@ -1,5 +1,4 @@
 """Chakra Card component."""
-
 from typing import Optional

 from reflex.components.chakra import (
@ -15,51 +14,51 @@ from reflex.vars import Var
 class CardHeader(ChakraComponent):
    """The wrapper that contains a card's header."""

-    tag = "CardHeader"
+    tag: str = "CardHeader"


 class CardBody(ChakraComponent):
    """The wrapper that houses the card's main content."""

-    tag = "CardBody"
+    tag: str = "CardBody"


 class CardFooter(ChakraComponent):
    """The footer that houses the card actions."""

-    tag = "CardFooter"
+    tag: str = "CardFooter"


 class Card(ChakraComponent):
    """The parent wrapper that provides context for its children."""

-    tag = "Card"
+    tag: str = "Card"

    # [required] The flex alignment of the card
-    align: Var[str]
+    align: Optional[Var[str]] = None

    # [required] The flex direction of the card
-    direction: Var[str]
+    direction: Optional[Var[str]] = None

    # [required] The flex distribution of the card
-    justify: Var[str]
+    justify: Optional[Var[str]] = None

    # The visual color appearance of the component.
    # options: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" |
    #  "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" |
    #  "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
    # default: "gray"
-    color_scheme: Var[LiteralColorScheme]
+    color_scheme: Optional[Var[LiteralColorScheme]] = None

    # The size of the Card
    # options: "sm" | "md" | "lg"
    # default: "md"
-    size: Var[LiteralTagSize]
+    size: Optional[Var[LiteralTagSize]] = None

    # The variant of the Card
    # options: "elevated" | "outline" | "filled" | "unstyled"
    # default: "elevated"
-    variant: Var[LiteralCardVariant]
+    variant: Optional[Var[LiteralCardVariant]] = None

    @classmethod
    def create(
--- a/reflex/components/chakra/layout/center.py
+++ b/reflex/components/chakra/layout/center.py
@ -6,16 +6,16 @@ from reflex.components.chakra import ChakraComponent
 class Center(ChakraComponent):
    """A box that centers its contents."""

-    tag = "Center"
+    tag: str = "Center"


 class Square(ChakraComponent):
    """A centered square container."""

-    tag = "Square"
+    tag: str = "Square"


 class Circle(ChakraComponent):
    """A square container with round border-radius."""

-    tag = "Circle"
+    tag: str = "Circle"
--- a/reflex/components/chakra/layout/container.py
+++ b/reflex/components/chakra/layout/container.py
@ -1,4 +1,5 @@
 """A flexbox container."""
+from typing import Optional

 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@ -7,7 +8,7 @@ from reflex.vars import Var
 class Container(ChakraComponent):
    """A flexbox container that centers its children and sets a max width."""

-    tag = "Container"
+    tag: str = "Container"

    # If true, container will center its children regardless of their width.
-    center_content: Var[bool]
+    center_content: Optional[Var[bool]] = None
--- a/reflex/components/chakra/layout/flex.py
+++ b/reflex/components/chakra/layout/flex.py
@ -1,6 +1,5 @@
 """A reflexive container component."""
-
-from typing import List, Union
+from typing import List, Optional, Union

 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@ -9,25 +8,25 @@ from reflex.vars import Var
 class Flex(ChakraComponent):
    """A reflexive container component."""

-    tag = "Flex"
+    tag: str = "Flex"

    # How to align items in the flex.
-    align: Var[str]
+    align: Optional[Var[str]] = None

    # Shorthand for flexBasis style prop
-    basis: Var[str]
+    basis: Optional[Var[str]] = None

    # Shorthand for flexDirection style prop
-    direction: Var[Union[str, List[str]]]
+    direction: Optional[Var[Union[str, List[str]]]] = None

    # Shorthand for flexGrow style prop
-    grow: Var[str]
+    grow: Optional[Var[str]] = None

    # The way to justify the items.
-    justify: Var[str]
+    justify: Optional[Var[str]] = None

    # Shorthand for flexWrap style prop
-    wrap: Var[Union[str, List[str]]]
+    wrap: Optional[Var[Union[str, List[str]]]] = None

    # Shorthand for flexShrink style prop
-    shrink: Var[str]
+    shrink: Optional[Var[str]] = None
--- a/reflex/components/chakra/layout/grid.py
+++ b/reflex/components/chakra/layout/grid.py
@ -1,6 +1,5 @@
 """Container to stack elements with spacing."""
-
-from typing import List
+from typing import List, Optional

 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@ -9,117 +8,117 @@ from reflex.vars import Var
 class Grid(ChakraComponent):
    """A grid component."""

-    tag = "Grid"
+    tag: str = "Grid"

    # Shorthand prop for gridAutoColumns to provide automatic column sizing based on content.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)_
-    auto_columns: Var[str]
+    auto_columns: Optional[Var[str]] = None

    # Shorthand prop for gridAutoFlow to specify exactly how
    # auto-placed items get flowed into the grid.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)_
-    auto_flow: Var[str]
+    auto_flow: Optional[Var[str]] = None

    # Shorthand prop for gridAutoRows.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)_
-    auto_rows: Var[str]
+    auto_rows: Optional[Var[str]] = None

    # Shorthand prop for gridColumn.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)_
-    column: Var[str]
+    column: Optional[Var[str]] = None

    # Shorthand prop for gridRow.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)_
-    row: Var[str]
+    row: Optional[Var[str]] = None

    # Shorthand prop for gridTemplateColumns.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)_
-    template_columns: Var[str]
+    template_columns: Optional[Var[str]] = None

    # Shorthand prop for gridTemplateRows.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)_
-    template_rows: Var[str]
+    template_rows: Optional[Var[str]] = None


 class GridItem(ChakraComponent):
    """Used as a child of Grid to control the span, and start positions within the grid."""

-    tag = "GridItem"
+    tag: str = "GridItem"

    # Shorthand prop for gridArea
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)_
-    area: Var[str]
+    area: Optional[Var[str]] = None

    # Shorthand prop for gridColumnEnd
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end)_
-    col_end: Var[str]
+    col_end: Optional[Var[str]] = None

    # The column number the grid item should start.
-    col_start: Var[int]
+    col_start: Optional[Var[int]] = None

    # The number of columns the grid item should span.
-    col_span: Var[int]
+    col_span: Optional[Var[int]] = None

    # Shorthand prop for gridRowEnd
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end)_
-    row_end: Var[str]
+    row_end: Optional[Var[str]] = None

    # The row number the grid item should start.
-    row_start: Var[int]
+    row_start: Optional[Var[int]] = None

    # The number of rows the grid item should span.
-    row_span: Var[int]
+    row_span: Optional[Var[int]] = None


 class ResponsiveGrid(ChakraComponent):
    """A responsive grid component."""

-    tag = "SimpleGrid"
+    tag: str = "SimpleGrid"

    # Shorthand prop for gridAutoColumns to provide automatic column sizing based on content.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)_
-    auto_columns: Var[str]
+    auto_columns: Optional[Var[str]] = None

    # Shorthand prop for gridAutoFlow to specify exactly how
    # auto-placed items get flowed into the grid.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow)_
-    auto_flow: Var[str]
+    auto_flow: Optional[Var[str]] = None

    # Shorthand prop for gridAutoRows.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows)_
-    auto_rows: Var[str]
+    auto_rows: Optional[Var[str]] = None

    # Shorthand prop for gridColumn.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)_
-    column: Var[str]
+    column: Optional[Var[str]] = None

    # Shorthand prop for gridRow.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)_
-    row: Var[str]
+    row: Optional[Var[str]] = None

    # A list that defines the number of columns for each breakpoint.
-    columns: Var[List[int]]
+    columns: Optional[Var[List[int]]] = None

    # The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.
-    min_child_width: Var[str]
+    min_child_width: Optional[Var[str]] = None

    # The gap between the grid items
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None

    # The column gap between the grid items
-    spacing_x: Var[str]
+    spacing_x: Optional[Var[str]] = None

    # The row gap between the grid items
-    spacing_y: Var[str]
+    spacing_y: Optional[Var[str]] = None

    # Shorthand prop for gridTemplateAreas
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)_
-    template_areas: Var[str]
+    template_areas: Optional[Var[str]] = None

    # Shorthand prop for gridTemplateColumns.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)_
-    template_columns: Var[str]
+    template_columns: Optional[Var[str]] = None

    # Shorthand prop for gridTemplateRows.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)_
-    template_rows: Var[str]
+    template_rows: Optional[Var[str]] = None
--- a/reflex/components/chakra/layout/spacer.py
+++ b/reflex/components/chakra/layout/spacer.py
@ -6,4 +6,4 @@ from reflex.components.chakra import ChakraComponent
 class Spacer(ChakraComponent):
    """A flexible space component."""

-    tag = "Spacer"
+    tag: str = "Spacer"
--- a/reflex/components/chakra/layout/stack.py
+++ b/reflex/components/chakra/layout/stack.py
@ -1,6 +1,5 @@
 """Container to stack elements with spacing."""
-
-from typing import List, Union
+from typing import List, Optional, Union

 from reflex.components.chakra import ChakraComponent, LiteralStackDirection
 from reflex.vars import Var
@ -9,40 +8,40 @@ from reflex.vars import Var
 class Stack(ChakraComponent):
    """Container to stack elements with spacing."""

-    tag = "Stack"
+    tag: str = "Stack"

    # Shorthand for alignItems style prop
-    align_items: Var[str]
+    align_items: Optional[Var[str]] = None

    # The direction to stack the items.
-    direction: Var[Union[LiteralStackDirection, List[str]]]
+    direction: Optional[Var[Union[LiteralStackDirection, List[str]]]] = None

    # If true the items will be stacked horizontally.
-    is_inline: Var[bool]
+    is_inline: Optional[Var[bool]] = None

    # Shorthand for justifyContent style prop
-    justify_content: Var[str]
+    justify_content: Optional[Var[str]] = None

    # If true, the children will be wrapped in a Box, and the Box will take the spacing props
-    should_wrap_children: Var[bool]
+    should_wrap_children: Optional[Var[bool]] = None

    # The space between each stack item
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None

    # Shorthand for flexWrap style prop
-    wrap: Var[str]
+    wrap: Optional[Var[str]] = None

    # Alignment of contents.
-    justify: Var[str]
+    justify: Optional[Var[str]] = None


 class Hstack(Stack):
    """Stack items horizontally."""

-    tag = "HStack"
+    tag: str = "HStack"


 class Vstack(Stack):
    """Stack items vertically."""

-    tag = "VStack"
+    tag: str = "VStack"
--- a/reflex/components/chakra/layout/wrap.py
+++ b/reflex/components/chakra/layout/wrap.py
@ -1,4 +1,5 @@
 """Container to stack elements with spacing."""
+from typing import Optional

 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
@ -8,28 +9,28 @@ from reflex.vars import Var
 class Wrap(ChakraComponent):
    """Layout component used to add space between elements and wrap automatically if there isn't enough space."""

-    tag = "Wrap"
+    tag: str = "Wrap"

    # How to align the items.
-    align: Var[str]
+    align: Optional[Var[str]] = None

    # The flex direction of the wrap.
-    direction: Var[str]
+    direction: Optional[Var[str]] = None

    # How to justify the items.
-    justify: Var[str]
+    justify: Optional[Var[str]] = None

    # Whether to wrap children in `rx.wrap_item`.
-    should_wrap_children: Var[bool]
+    should_wrap_children: Optional[Var[bool]] = None

    # The spacing between the items.
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None

    # The horizontal spacing between the items.
-    spacing_x: Var[str]
+    spacing_x: Optional[Var[str]] = None

    # The vertical spacing between the items.
-    spacing_y: Var[str]
+    spacing_y: Optional[Var[str]] = None

    @classmethod
    def create(cls, *children, items=None, **props) -> Component:
@ -54,4 +55,4 @@ class Wrap(ChakraComponent):
 class WrapItem(ChakraComponent):
    """Item of the Wrap component."""

-    tag = "WrapItem"
+    tag: str = "WrapItem"
--- a/reflex/components/chakra/media/avatar.py
+++ b/reflex/components/chakra/media/avatar.py
@ -1,7 +1,7 @@
 """Avatar components."""
 from __future__ import annotations

-from typing import Any, Union
+from typing import Any, Optional, Union

 from reflex.components.chakra import ChakraComponent, LiteralAvatarSize
 from reflex.vars import Var
@ -10,31 +10,31 @@ from reflex.vars import Var
 class Avatar(ChakraComponent):
    """The image that represents the user."""

-    tag = "Avatar"
+    tag: str = "Avatar"

    # The default avatar used as fallback when name, and src is not specified.
-    icon: Var[str]
+    icon: Optional[Var[str]] = None

    # The label of the icon.
-    icon_label: Var[str]
+    icon_label: Optional[Var[str]] = None

    # If true, opt out of the avatar's fallback logic and renders the img at all times.
-    ignore_fallback: Var[bool]
+    ignore_fallback: Optional[Var[bool]] = None

    # The name of the person in the avatar.
-    name: Var[str]
+    name: Optional[Var[str]] = None

    # If true, the Avatar will show a border around it. Best for a group of avatars.
-    show_border: Var[bool]
+    show_border: Optional[Var[bool]] = None

    # The image url of the Avatar.
-    src: Var[str]
+    src: Optional[Var[str]] = None

    # List of sources to use for different screen resolutions.
-    src_set: Var[str]
+    src_set: Optional[Var[str]] = None

    # "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"
-    size: Var[LiteralAvatarSize]
+    size: Optional[Var[LiteralAvatarSize]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers for the component.
@ -51,16 +51,16 @@ class Avatar(ChakraComponent):
 class AvatarBadge(ChakraComponent):
    """A wrapper that displays its content on the right corner of the avatar."""

-    tag = "AvatarBadge"
+    tag: str = "AvatarBadge"


 class AvatarGroup(ChakraComponent):
    """A wrapper to stack multiple Avatars together."""

-    tag = "AvatarGroup"
+    tag: str = "AvatarGroup"

    # The maximum number of visible avatars.
-    max_: Var[int]
+    max_: Optional[Var[int]] = None

    # The space between the avatars in the group.
-    spacing: Var[int]
+    spacing: Optional[Var[int]] = None
--- a/reflex/components/chakra/media/icon.py
+++ b/reflex/components/chakra/media/icon.py
@ -8,13 +8,13 @@ from reflex.utils import format
 class ChakraIconComponent(ChakraComponent):
    """A component that wraps a Chakra icon component."""

-    library = "@chakra-ui/icons@2.0.19"
+    library: str = "@chakra-ui/icons@2.0.19"


 class Icon(ChakraIconComponent):
    """An image icon."""

-    tag = "None"
+    tag: str = "None"

    @classmethod
    def create(cls, *children, **props):
--- a/reflex/components/chakra/media/image.py
+++ b/reflex/components/chakra/media/image.py
@ -11,43 +11,43 @@ from reflex.vars import Var
 class Image(ChakraComponent):
    """Display an image."""

-    tag = "Image"
-    alias = "ChakraImage"
+    tag: str = "Image"
+    alias: str = "ChakraImage"
    # How to align the image within its bounds. It maps to css `object-position` property.
-    align: Var[str]
+    align: Optional[Var[str]] = None

    # Fallback Reflex component to show if image is loading or image fails.
    fallback: Optional[Component] = None

    # Fallback image src to show if image is loading or image fails.
-    fallback_src: Var[str]
+    fallback_src: Optional[Var[str]] = None

    # How the image to fit within its bounds. It maps to css `object-fit` property.
-    fit: Var[str]
+    fit: Optional[Var[str]] = None

    # The native HTML height attribute to the passed to the img.
-    html_height: Var[str]
+    html_height: Optional[Var[str]] = None

    # The native HTML width attribute to the passed to the img.
-    html_width: Var[str]
+    html_width: Optional[Var[str]] = None

    # If true, opt out of the fallbackSrc logic and use as img.
-    ignore_fallback: Var[bool]
+    ignore_fallback: Optional[Var[bool]] = None

    # "eager" | "lazy"
-    loading: Var[LiteralImageLoading]
+    loading: Optional[Var[LiteralImageLoading]] = None

    # The path/url to the image or PIL image object.
-    src: Var[Any]
+    src: Optional[Var[Any]] = None

    # The alt text of the image.
-    alt: Var[str]
+    alt: Optional[Var[str]] = None

    # Provide multiple sources for an image, allowing the browser
    # to select the most appropriate source based on factors like
    # screen resolution and device capabilities.
    # Learn more _[here](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)_
-    src_set: Var[str]
+    src_set: Optional[Var[str]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers for the component.
--- a/reflex/components/chakra/navigation/breadcrumb.py
+++ b/reflex/components/chakra/navigation/breadcrumb.py
@ -1,4 +1,5 @@
 """Breadcrumb components."""
+from typing import Optional

 from reflex.components.chakra import ChakraComponent
 from reflex.components.chakra.navigation.link import Link
@ -10,13 +11,13 @@ from reflex.vars import Var
 class Breadcrumb(ChakraComponent):
    """The parent container for breadcrumbs."""

-    tag = "Breadcrumb"
+    tag: str = "Breadcrumb"

    # The visual separator between each breadcrumb item
-    separator: Var[str]
+    separator: Optional[Var[str]] = None

    # The left and right margin applied to the separator
-    separator_margin: Var[str]
+    separator_margin: Optional[Var[str]] = None

    @classmethod
    def create(cls, *children, items=None, **props) -> Component:
@ -51,19 +52,19 @@ class Breadcrumb(ChakraComponent):
 class BreadcrumbItem(ChakraComponent):
    """Individual breadcrumb element containing a link and a divider."""

-    tag = "BreadcrumbItem"
+    tag: str = "BreadcrumbItem"

    # Is the current page of the breadcrumb.
-    is_current_page: Var[bool]
+    is_current_page: Optional[Var[bool]] = None

    # Is the last child of the breadcrumb.
-    is_last_child: Var[bool]
+    is_last_child: Optional[Var[bool]] = None

    # The visual separator between each breadcrumb item
-    separator: Var[str]
+    separator: Optional[Var[str]] = None

    # The left and right margin applied to the separator
-    spacing: Var[str]
+    spacing: Optional[Var[str]] = None

    @classmethod
    def create(cls, *children, label=None, href=None, **props):
@ -86,13 +87,13 @@ class BreadcrumbItem(ChakraComponent):
 class BreadcrumbSeparator(ChakraComponent):
    """The visual separator between each breadcrumb."""

-    tag = "BreadcrumbSeparator"
+    tag: str = "BreadcrumbSeparator"


 class BreadcrumbLink(Link):
    """The breadcrumb link."""

-    tag = "BreadcrumbLink"
+    tag: str = "BreadcrumbLink"

    # Is the current page of the breadcrumb.
-    is_current_page: Var[bool]
+    is_current_page: Optional[Var[bool]] = None
--- a/reflex/components/chakra/navigation/link.py
+++ b/reflex/components/chakra/navigation/link.py
@ -1,5 +1,5 @@
 """A link component."""
-
+from typing import Optional

 from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
@ -13,22 +13,22 @@ next_link = NextLink.create()
 class Link(ChakraComponent):
    """Link to another page."""

-    tag = "Link"
+    tag: str = "Link"

    # The rel.
-    rel: Var[str]
+    rel: Optional[Var[str]] = None

    # The page to link to.
-    href: Var[str]
+    href: Optional[Var[str]] = None

    # The text to display.
-    text: Var[str]
+    text: Optional[Var[str]] = None

    # What the link renders to.
    as_: Var[str] = BaseVar.create(value="{NextLink}", _var_is_local=False)  # type: ignore

    # If true, the link will open in new tab.
-    is_external: Var[bool]
+    is_external: Optional[Var[bool]] = None

    def _get_imports(self) -> imports.ImportDict:
        return {**super()._get_imports(), **next_link._get_imports()}
--- a/reflex/components/chakra/navigation/linkoverlay.py
+++ b/reflex/components/chakra/navigation/linkoverlay.py
@ -1,4 +1,5 @@
 """Link overlay components."""
+from typing import Optional

 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
@ -7,16 +8,16 @@ from reflex.vars import Var
 class LinkOverlay(ChakraComponent):
    """Wraps child component in a link."""

-    tag = "LinkOverlay"
+    tag: str = "LinkOverlay"

    # If true, the link will open in new tab
-    is_external: Var[bool]
+    is_external: Optional[Var[bool]] = None

    # Href of the link overlay.
-    href: Var[str]
+    href: Optional[Var[str]] = None


 class LinkBox(ChakraComponent):
    """The LinkBox lifts any nested links to the top using z-index to ensure proper keyboard navigation between links."""

-    tag = "LinkBox"
+    tag: str = "LinkBox"
--- a/reflex/components/chakra/navigation/stepper.py
+++ b/reflex/components/chakra/navigation/stepper.py
@ -1,5 +1,4 @@
 """A component to indicate progress through a multi-step process."""
-
 from typing import List, Literal, Optional, Tuple

 from reflex.components.chakra import ChakraComponent, LiteralColorScheme
@ -10,21 +9,21 @@ from reflex.vars import Var
 class Stepper(ChakraComponent):
    """The parent container for a stepper."""

-    tag = "Stepper"
+    tag: str = "Stepper"

-    orientation: Var[Literal["vertical", "horizontal"]]
+    orientation: Optional[Var[Literal["vertical", "horizontal"]]] = None

    # The color scheme to use for the stepper; default is blue.
-    colorScheme: Var[LiteralColorScheme]
+    colorScheme: Optional[Var[LiteralColorScheme]] = None

    # Chakra provides a useSteps hook to control the stepper.
    # Instead, use an integer state value to set progress in the stepper.

    # The index of the current step.
-    index: Var[int]
+    index: Optional[Var[int]] = None

    # The size of the steps in the stepper.
-    size: Var[str]
+    size: Optional[Var[str]] = None

    @classmethod
    def create(
@ -58,37 +57,37 @@ class Stepper(ChakraComponent):
 class Step(ChakraComponent):
    """A component for an individual step in the stepper."""

-    tag = "Step"
+    tag: str = "Step"


 class StepDescription(ChakraComponent):
    """The description text for a step component."""

-    tag = "StepDescription"
+    tag: str = "StepDescription"


 class StepIcon(ChakraComponent):
    """The icon displayed in a step indicator component."""

-    tag = "StepIcon"
+    tag: str = "StepIcon"


 class StepIndicator(ChakraComponent):
    """The component displaying the status of a step."""

-    tag = "StepIndicator"
+    tag: str = "StepIndicator"


 class StepNumber(ChakraComponent):
    """The number of a step displayed in a step indicator component."""

-    tag = "StepNumber"
+    tag: str = "StepNumber"


 class StepSeparator(ChakraComponent):
    """The component separting steps."""

-    tag = "StepSeparator"
+    tag: str = "StepSeparator"


 class StepStatus(ChakraComponent):
@ -98,16 +97,16 @@ class StepStatus(ChakraComponent):
    # active, complete, and incomplete should also be able to accept StepIcon or StepNumber components
    # currently, these props only support strings

-    active: Var[str]
+    active: Optional[Var[str]] = None

-    complete: Var[str]
+    complete: Optional[Var[str]] = None

-    incomplete: Var[str]
+    incomplete: Optional[Var[str]] = None

-    tag = "StepStatus"
+    tag: str = "StepStatus"


 class StepTitle(ChakraComponent):
    """The title text for a step component."""

-    tag = "StepTitle"
+    tag: str = "StepTitle"
--- a/reflex/components/chakra/overlay/alertdialog.py
+++ b/reflex/components/chakra/overlay/alertdialog.py
@ -1,7 +1,7 @@
 """Alert dialog components."""
 from __future__ import annotations

-from typing import Any, Union
+from typing import Any, Optional, Union

 from reflex.components.chakra import ChakraComponent, LiteralAlertDialogSize
 from reflex.components.chakra.media.icon import Icon
@ -12,46 +12,46 @@ from reflex.vars import Var
 class AlertDialog(ChakraComponent):
    """Provides context and state for the dialog."""

-    tag = "AlertDialog"
+    tag: str = "AlertDialog"

    # If true, the modal will be open.
-    is_open: Var[bool]
+    is_open: Optional[Var[bool]] = None

    # The least destructive element to focus when the dialog opens.
-    least_destructive_ref: Var[str]
+    least_destructive_ref: Optional[Var[str]] = None

    # Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. Defaults to false.
-    allow_pinch_zoom: Var[bool]
+    allow_pinch_zoom: Optional[Var[bool]] = None

    # If true, the modal will autofocus the first enabled and interactive element within the ModalContent
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None

    # If true, scrolling will be disabled on the body when the modal opens.
-    block_scroll_on_mount: Var[bool]
+    block_scroll_on_mount: Optional[Var[bool]] = None

    # If true, the modal will close when the Esc key is pressed
-    close_on_esc: Var[bool]
+    close_on_esc: Optional[Var[bool]] = None

    # If true, the modal will close when the overlay is clicked
-    close_on_overlay_click: Var[bool]
+    close_on_overlay_click: Optional[Var[bool]] = None

    # If true, the modal will be centered on screen.
-    is_centered: Var[bool]
+    is_centered: Optional[Var[bool]] = None

    # Enables aggressive focus capturing within iframes. If true, keep focus in the lock, no matter where lock is active. If false, allows focus to move outside of iframe.
-    lock_focus_across_frames: Var[bool]
+    lock_focus_across_frames: Optional[Var[bool]] = None

    # If true, a `padding-right` will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens
-    preserve_scroll_bar_gap: Var[bool]
+    preserve_scroll_bar_gap: Optional[Var[bool]] = None

    # If true, the modal will return focus to the element that triggered it when it closes.
-    return_focus_on_close: Var[bool]
+    return_focus_on_close: Optional[Var[bool]] = None

    # "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"
-    size: Var[LiteralAlertDialogSize]
+    size: Optional[Var[LiteralAlertDialogSize]] = None

    # If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**
-    use_inert: Var[bool]
+    use_inert: Optional[Var[bool]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers for the component.
@ -122,34 +122,34 @@ class AlertDialog(ChakraComponent):
 class AlertDialogBody(ChakraComponent):
    """Should contain the description announced by screen readers."""

-    tag = "AlertDialogBody"
+    tag: str = "AlertDialogBody"


 class AlertDialogHeader(ChakraComponent):
    """Should contain the title announced by screen readers."""

-    tag = "AlertDialogHeader"
+    tag: str = "AlertDialogHeader"


 class AlertDialogFooter(ChakraComponent):
    """Should contain the events of the dialog."""

-    tag = "AlertDialogFooter"
+    tag: str = "AlertDialogFooter"


 class AlertDialogContent(ChakraComponent):
    """The wrapper for the alert dialog's content."""

-    tag = "AlertDialogContent"
+    tag: str = "AlertDialogContent"


 class AlertDialogOverlay(ChakraComponent):
    """The dimmed overlay behind the dialog."""

-    tag = "AlertDialogOverlay"
+    tag: str = "AlertDialogOverlay"


 class AlertDialogCloseButton(ChakraComponent):
    """The button that closes the dialog."""

-    tag = "AlertDialogCloseButton"
+    tag: str = "AlertDialogCloseButton"
--- a/reflex/components/chakra/overlay/drawer.py
+++ b/reflex/components/chakra/overlay/drawer.py
@ -1,7 +1,7 @@
 """Container to stack elements with spacing."""
 from __future__ import annotations

-from typing import Any, Union
+from typing import Any, Optional, Union

 from reflex.components.chakra import (
    ChakraComponent,
@ -16,58 +16,58 @@ from reflex.vars import Var
 class Drawer(ChakraComponent):
    """A drawer component."""

-    tag = "Drawer"
+    tag: str = "Drawer"

    # If true, the modal will be open.
-    is_open: Var[bool]
+    is_open: Optional[Var[bool]] = None

    # Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. Defaults to false.
-    allow_pinch_zoom: Var[bool]
+    allow_pinch_zoom: Optional[Var[bool]] = None

    # If true, the modal will autofocus the first enabled and interactive element within the ModalContent
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None

    # If true, scrolling will be disabled on the body when the modal opens.
-    block_scroll_on_mount: Var[bool]
+    block_scroll_on_mount: Optional[Var[bool]] = None

    # If true, the modal will close when the Esc key is pressed
-    close_on_esc: Var[bool]
+    close_on_esc: Optional[Var[bool]] = None

    # If true, the modal will close when the overlay is clicked
-    close_on_overlay_click: Var[bool]
+    close_on_overlay_click: Optional[Var[bool]] = None

    # If true, the modal will be centered on screen.
-    is_centered: Var[bool]
+    is_centered: Optional[Var[bool]] = None

    # If true and drawer's placement is top or bottom, the drawer will occupy the viewport height (100vh)
-    is_full_height: Var[bool]
+    is_full_height: Optional[Var[bool]] = None

    # Enables aggressive focus capturing within iframes. - If true: keep focus in the lock, no matter where lock is active - If false: allows focus to move outside of iframe
-    lock_focus_across_frames: Var[bool]
+    lock_focus_across_frames: Optional[Var[bool]] = None

    # The placement of the drawer
-    placement: Var[str]
+    placement: Optional[Var[str]] = None

    # If true, a `padding-right` will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens
-    preserve_scroll_bar_gap: Var[bool]
+    preserve_scroll_bar_gap: Optional[Var[bool]] = None

    # If true, the modal will return focus to the element that triggered it when it closes.
-    return_focus_on_close: Var[bool]
+    return_focus_on_close: Optional[Var[bool]] = None

    # "xs" | "sm" | "md" | "lg" | "xl" | "full"
-    size: Var[LiteralDrawerSize]
+    size: Optional[Var[LiteralDrawerSize]] = None

    # A11y: If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**
-    use_inert: Var[bool]
+    use_inert: Optional[Var[bool]] = None

    # Variant of drawer
-    variant: Var[str]
+    variant: Optional[Var[str]] = None

    # Color scheme of the Drawer
    # Options:
    # "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan"
    # | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
-    color_scheme: Var[LiteralColorScheme]
+    color_scheme: Optional[Var[LiteralColorScheme]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers for the component.
@ -137,34 +137,34 @@ class Drawer(ChakraComponent):
 class DrawerBody(ChakraComponent):
    """Drawer body."""

-    tag = "DrawerBody"
+    tag: str = "DrawerBody"


 class DrawerHeader(ChakraComponent):
    """Drawer header."""

-    tag = "DrawerHeader"
+    tag: str = "DrawerHeader"


 class DrawerFooter(ChakraComponent):
    """Drawer footer."""

-    tag = "DrawerFooter"
+    tag: str = "DrawerFooter"


 class DrawerOverlay(ChakraComponent):
    """Drawer overlay."""

-    tag = "DrawerOverlay"
+    tag: str = "DrawerOverlay"


 class DrawerContent(ChakraComponent):
    """Drawer content."""

-    tag = "DrawerContent"
+    tag: str = "DrawerContent"


 class DrawerCloseButton(ChakraComponent):
    """Drawer close button."""

-    tag = "DrawerCloseButton"
+    tag: str = "DrawerCloseButton"
--- a/reflex/components/chakra/overlay/menu.py
+++ b/reflex/components/chakra/overlay/menu.py
@ -17,55 +17,55 @@ from reflex.vars import Var
 class Menu(ChakraComponent):
    """The wrapper component provides context, state, and focus management."""

-    tag = "Menu"
+    tag: str = "Menu"

    # The padding required to prevent the arrow from reaching the very edge of the popper.
-    arrow_padding: Var[int]
+    arrow_padding: Optional[Var[int]] = None

    # If true, the first enabled menu item will receive focus and be selected when the menu opens.
-    auto_select: Var[bool]
+    auto_select: Optional[Var[bool]] = None

    # The boundary area for the popper. Used within the preventOverflow modifier
-    boundary: Var[str]
+    boundary: Optional[Var[str]] = None

    # If true, the menu will close when you click outside the menu list
-    close_on_blur: Var[bool]
+    close_on_blur: Optional[Var[bool]] = None

    # If true, the menu will close when a menu item is clicked
-    close_on_select: Var[bool]
+    close_on_select: Optional[Var[bool]] = None

    # If by default the menu is open.
-    default_is_open: Var[bool]
+    default_is_open: Optional[Var[bool]] = None

    # If rtl, popper placement positions will be flipped i.e. 'top-right' will become 'top-left' and vice-verse ("ltr" | "rtl")
-    direction: Var[LiteralChakraDirection]
+    direction: Optional[Var[LiteralChakraDirection]] = None

    # If true, the popper will change its placement and flip when it's about to overflow its boundary area.
-    flip: Var[bool]
+    flip: Optional[Var[bool]] = None

    # The distance or margin between the reference and popper. It is used internally to create an offset modifier. NB: If you define offset prop, it'll override the gutter.
-    gutter: Var[int]
+    gutter: Optional[Var[int]] = None

    # Performance 🚀: If true, the MenuItem rendering will be deferred until the menu is open.
-    is_lazy: Var[bool]
+    is_lazy: Optional[Var[bool]] = None

    # Performance 🚀: The lazy behavior of menu's content when not visible. Only works when `isLazy={true}` - "unmount": The menu's content is always unmounted when not open. - "keepMounted": The menu's content initially unmounted, but stays mounted when menu is open.
-    lazy_behavior: Var[str]
+    lazy_behavior: Optional[Var[str]] = None

    # Determines if the menu is open or not.
-    is_open: Var[bool]
+    is_open: Optional[Var[bool]] = None

    # If true, the popper will match the width of the reference at all times. It's useful for autocomplete, `date-picker` and select patterns.
-    match_width: Var[bool]
+    match_width: Optional[Var[bool]] = None

    # The placement of the popper relative to its reference.
-    placement: Var[str]
+    placement: Optional[Var[str]] = None

    # If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.
-    prevent_overflow: Var[bool]
+    prevent_overflow: Optional[Var[bool]] = None

    # The CSS positioning strategy to use. ("fixed" | "absolute")
-    strategy: Var[LiteralMenuStrategy]
+    strategy: Optional[Var[LiteralMenuStrategy]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers for the component.
@ -115,22 +115,22 @@ class Menu(ChakraComponent):
 class MenuButton(ChakraComponent):
    """The trigger for the menu list. Must be a direct child of Menu."""

-    tag = "MenuButton"
+    tag: str = "MenuButton"

    # The variant of the menu button.
-    variant: Var[str]
+    variant: Optional[Var[str]] = None

    # Components that are not allowed as children.
    _invalid_children: List[str] = ["Button", "MenuButton"]

    # The tag to use for the menu button.
-    as_: Var[str]
+    as_: Optional[Var[str]] = None


 class MenuList(ChakraComponent):
    """The wrapper for the menu items. Must be a direct child of Menu."""

-    tag = "MenuList"
+    tag: str = "MenuList"

    @classmethod
    def create(cls, *children, items: Optional[list] = None, **props) -> Component:
@ -157,73 +157,73 @@ class MenuList(ChakraComponent):
 class MenuItem(ChakraComponent):
    """The trigger that handles menu selection. Must be a direct child of a MenuList."""

-    tag = "MenuItem"
+    tag: str = "MenuItem"

    # Overrides the parent menu's closeOnSelect prop.
-    close_on_select: Var[bool]
+    close_on_select: Optional[Var[bool]] = None

    # Right-aligned label text content, useful for displaying hotkeys.
-    command: Var[str]
+    command: Optional[Var[str]] = None

    # The spacing between the command and menu item's label.
-    command_spacing: Var[int]
+    command_spacing: Optional[Var[int]] = None

    # If true, the menuitem will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true and the menuitem is disabled, it'll remain keyboard-focusable
-    is_focusable: Var[bool]
+    is_focusable: Optional[Var[bool]] = None


 class MenuItemOption(ChakraComponent):
    """The checkable menu item, to be used with MenuOptionGroup."""

-    tag = "MenuItemOption"
+    tag: str = "MenuItemOption"

    # Overrides the parent menu's closeOnSelect prop.
-    close_on_select: Var[bool]
+    close_on_select: Optional[Var[bool]] = None

    # Right-aligned label text content, useful for displaying hotkeys.
-    command: Var[str]
+    command: Optional[Var[str]] = None

    # The spacing between the command and menu item's label.
-    command_spacing: Var[int]
+    command_spacing: Optional[Var[int]] = None

    # Determines if menu item is checked.
-    is_checked: Var[bool]
+    is_checked: Optional[Var[bool]] = None

    # If true, the menuitem will be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true and the menuitem is disabled, it'll remain keyboard-focusable
-    is_focusable: Var[bool]
+    is_focusable: Optional[Var[bool]] = None

    # "checkbox" | "radio"
-    type_: Var[LiteralMenuOption]
+    type_: Optional[Var[LiteralMenuOption]] = None

    # Value of the menu item.
-    value: Var[str]
+    value: Optional[Var[str]] = None


 class MenuGroup(ChakraComponent):
    """A wrapper to group related menu items."""

-    tag = "MenuGroup"
+    tag: str = "MenuGroup"


 class MenuOptionGroup(ChakraComponent):
    """A wrapper for checkable menu items (radio and checkbox)."""

-    tag = "MenuOptionGroup"
+    tag: str = "MenuOptionGroup"

    # "checkbox" | "radio"
-    type_: Var[LiteralMenuOption]
+    type_: Optional[Var[LiteralMenuOption]] = None

    # Value of the option group.
-    value: Var[str]
+    value: Optional[Var[str]] = None


 class MenuDivider(ChakraComponent):
    """A visual separator for menu items and groups."""

-    tag = "MenuDivider"
+    tag: str = "MenuDivider"
--- a/reflex/components/chakra/overlay/modal.py
+++ b/reflex/components/chakra/overlay/modal.py
@ -14,46 +14,46 @@ ModalSizes = Literal["xs", "sm", "md", "lg", "xl", "full"]
 class Modal(ChakraComponent):
    """The wrapper that provides context for its children."""

-    tag = "Modal"
+    tag: str = "Modal"

    # If true, the modal will be open.
-    is_open: Var[bool]
+    is_open: Optional[Var[bool]] = None

    # Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. Defaults to false.
-    allow_pinch_zoom: Var[bool]
+    allow_pinch_zoom: Optional[Var[bool]] = None

    # If true, the modal will autofocus the first enabled and interactive element within the ModalContent
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None

    # If true, scrolling will be disabled on the body when the modal opens.
-    block_scroll_on_mount: Var[bool]
+    block_scroll_on_mount: Optional[Var[bool]] = None

    # If true, the modal will close when the Esc key is pressed
-    close_on_esc: Var[bool]
+    close_on_esc: Optional[Var[bool]] = None

    # If true, the modal will close when the overlay is clicked
-    close_on_overlay_click: Var[bool]
+    close_on_overlay_click: Optional[Var[bool]] = None

    # If true, the modal will be centered on screen.
-    is_centered: Var[bool]
+    is_centered: Optional[Var[bool]] = None

    # Enables aggressive focus capturing within iframes. - If true: keep focus in the lock, no matter where lock is active - If false: allows focus to move outside of iframe
-    lock_focus_across_frames: Var[bool]
+    lock_focus_across_frames: Optional[Var[bool]] = None

    # The transition that should be used for the modal
-    motion_preset: Var[str]
+    motion_preset: Optional[Var[str]] = None

    # If true, a `padding-right` will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens
-    preserve_scroll_bar_gap: Var[bool]
+    preserve_scroll_bar_gap: Optional[Var[bool]] = None

    # If true, the modal will return focus to the element that triggered it when it closes.
-    return_focus_on_close: Var[bool]
+    return_focus_on_close: Optional[Var[bool]] = None

    # "xs" | "sm" | "md" | "lg" | "xl" | "full"
-    size: Var[ModalSizes]
+    size: Optional[Var[ModalSizes]] = None

    # A11y: If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**
-    use_inert: Var[bool]
+    use_inert: Optional[Var[bool]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers for the component.
@ -133,34 +133,34 @@ class Modal(ChakraComponent):
 class ModalOverlay(ChakraComponent):
    """The dimmed overlay behind the modal dialog."""

-    tag = "ModalOverlay"
+    tag: str = "ModalOverlay"


 class ModalHeader(ChakraComponent):
    """The header that labels the modal dialog."""

-    tag = "ModalHeader"
+    tag: str = "ModalHeader"


 class ModalFooter(ChakraComponent):
    """The footer that houses the modal events."""

-    tag = "ModalFooter"
+    tag: str = "ModalFooter"


 class ModalContent(ChakraComponent):
    """The container for the modal dialog's content."""

-    tag = "ModalContent"
+    tag: str = "ModalContent"


 class ModalBody(ChakraComponent):
    """The wrapper that houses the modal's main content."""

-    tag = "ModalBody"
+    tag: str = "ModalBody"


 class ModalCloseButton(ChakraComponent):
    """The button that closes the modal."""

-    tag = "ModalCloseButton"
+    tag: str = "ModalCloseButton"
--- a/reflex/components/chakra/overlay/popover.py
+++ b/reflex/components/chakra/overlay/popover.py
@ -1,7 +1,7 @@
 """Popover components."""
 from __future__ import annotations

-from typing import Any, Union
+from typing import Any, Optional, Union

 from reflex.components.chakra import (
    ChakraComponent,
@ -16,70 +16,70 @@ from reflex.vars import Var
 class Popover(ChakraComponent):
    """The wrapper that provides props, state, and context to its children."""

-    tag = "Popover"
+    tag: str = "Popover"

    # The padding required to prevent the arrow from reaching the very edge of the popper.
-    arrow_padding: Var[int]
+    arrow_padding: Optional[Var[int]] = None

    # The `box-shadow` of the popover arrow
-    arrow_shadow_color: Var[str]
+    arrow_shadow_color: Optional[Var[str]] = None

    # The size of the popover arrow
-    arrow_size: Var[int]
+    arrow_size: Optional[Var[int]] = None

    # If true, focus will be transferred to the first interactive element when the popover opens
-    auto_focus: Var[bool]
+    auto_focus: Optional[Var[bool]] = None

    # The boundary area for the popper. Used within the preventOverflow modifier
-    boundary: Var[str]
+    boundary: Optional[Var[str]] = None

    # If true, the popover will close when you blur out it by clicking outside or tabbing out
-    close_on_blur: Var[bool]
+    close_on_blur: Optional[Var[bool]] = None

    # If true, the popover will close when you hit the Esc key
-    close_on_esc: Var[bool]
+    close_on_esc: Optional[Var[bool]] = None

    # If true, the popover will be initially opened.
-    default_is_open: Var[bool]
+    default_is_open: Optional[Var[bool]] = None

    # Theme direction ltr or rtl. Popper's placement will be set accordingly
-    direction: Var[LiteralChakraDirection]
+    direction: Optional[Var[LiteralChakraDirection]] = None

    # If true, the popper will change its placement and flip when it's about to overflow its boundary area.
-    flip: Var[bool]
+    flip: Optional[Var[bool]] = None

    # The distance or margin between the reference and popper. It is used internally to create an offset modifier. NB: If you define offset prop, it'll override the gutter.
-    gutter: Var[int]
+    gutter: Optional[Var[int]] = None

    # The html id attribute of the popover. If not provided, we generate a unique id. This id is also used to auto-generate the `aria-labelledby` and `aria-describedby` attributes that points to the PopoverHeader and PopoverBody
-    id_: Var[str]
+    id_: Optional[Var[str]] = None

    # Performance 🚀: If true, the PopoverContent rendering will be deferred until the popover is open.
-    is_lazy: Var[bool]
+    is_lazy: Optional[Var[bool]] = None

    # Performance 🚀: The lazy behavior of popover's content when not visible. Only works when `isLazy={true}` - "unmount": The popover's content is always unmounted when not open. - "keepMounted": The popover's content initially unmounted, but stays mounted when popover is open.
-    lazy_behavior: Var[str]
+    lazy_behavior: Optional[Var[str]] = None

    # If true, the popover will be opened in controlled mode.
-    is_open: Var[bool]
+    is_open: Optional[Var[bool]] = None

    # If true, the popper will match the width of the reference at all times. It's useful for autocomplete, `date-picker` and select patterns.
-    match_width: Var[bool]
+    match_width: Optional[Var[bool]] = None

    # The placement of the popover. It's used internally by Popper.js.
-    placement: Var[str]
+    placement: Optional[Var[str]] = None

    # If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.
-    prevent_overflow: Var[bool]
+    prevent_overflow: Optional[Var[bool]] = None

    # If true, focus will be returned to the element that triggers the popover when it closes
-    return_focus_on_close: Var[bool]
+    return_focus_on_close: Optional[Var[bool]] = None

    # The CSS positioning strategy to use. ("fixed" | "absolute")
-    strategy: Var[LiteralMenuStrategy]
+    strategy: Optional[Var[LiteralMenuStrategy]] = None

    # The interaction that triggers the popover. hover - means the popover will open when you hover with mouse or focus with keyboard on the popover trigger click - means the popover will open on click or press Enter to Space on keyboard ("click" | "hover")
-    trigger: Var[LiteralPopOverTrigger]
+    trigger: Optional[Var[LiteralPopOverTrigger]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers for the component.
@ -144,46 +144,46 @@ class Popover(ChakraComponent):
 class PopoverContent(ChakraComponent):
    """The popover itself."""

-    tag = "PopoverContent"
+    tag: str = "PopoverContent"


 class PopoverHeader(ChakraComponent):
    """The header of the popover."""

-    tag = "PopoverHeader"
+    tag: str = "PopoverHeader"


 class PopoverFooter(ChakraComponent):
    """Display a popover footer."""

-    tag = "PopoverFooter"
+    tag: str = "PopoverFooter"


 class PopoverBody(ChakraComponent):
    """The body of the popover."""

-    tag = "PopoverBody"
+    tag: str = "PopoverBody"


 class PopoverArrow(ChakraComponent):
    """A visual arrow that points to the reference (or trigger)."""

-    tag = "PopoverArrow"
+    tag: str = "PopoverArrow"


 class PopoverCloseButton(ChakraComponent):
    """A button to close the popover."""

-    tag = "PopoverCloseButton"
+    tag: str = "PopoverCloseButton"


 class PopoverAnchor(ChakraComponent):
    """Used to wrap the position-reference element."""

-    tag = "PopoverAnchor"
+    tag: str = "PopoverAnchor"


 class PopoverTrigger(ChakraComponent):
    """Used to wrap the reference (or trigger) element."""

-    tag = "PopoverTrigger"
+    tag: str = "PopoverTrigger"
--- a/reflex/components/chakra/overlay/tooltip.py
+++ b/reflex/components/chakra/overlay/tooltip.py
@ -1,7 +1,7 @@
 """Tooltip components."""
 from __future__ import annotations

-from typing import Any, Union
+from typing import Any, Optional, Union

 from reflex.components.chakra import ChakraComponent, LiteralChakraDirection
 from reflex.vars import Var
@ -10,58 +10,58 @@ from reflex.vars import Var
 class Tooltip(ChakraComponent):
    """A tooltip message to appear."""

-    tag = "Tooltip"
+    tag: str = "Tooltip"

    # The padding required to prevent the arrow from reaching the very edge of the popper.
-    arrow_padding: Var[int]
+    arrow_padding: Optional[Var[int]] = None

    # The color of the arrow shadow.
-    arrow_shadow_color: Var[str]
+    arrow_shadow_color: Optional[Var[str]] = None

    # Size of the arrow.
-    arrow_size: Var[int]
+    arrow_size: Optional[Var[int]] = None

    # Delay (in ms) before hiding the tooltip
-    delay: Var[int]
+    delay: Optional[Var[int]] = None

    # If true, the tooltip will hide on click
-    close_on_click: Var[bool]
+    close_on_click: Optional[Var[bool]] = None

    # If true, the tooltip will hide on pressing Esc key
-    close_on_esc: Var[bool]
+    close_on_esc: Optional[Var[bool]] = None

    # If true, the tooltip will hide while the mouse is down
-    close_on_mouse_down: Var[bool]
+    close_on_mouse_down: Optional[Var[bool]] = None

    # If true, the tooltip will be initially shown
-    default_is_open: Var[bool]
+    default_is_open: Optional[Var[bool]] = None

    # Theme direction ltr or rtl. Popper's placement will be set accordingly
-    direction: Var[LiteralChakraDirection]
+    direction: Optional[Var[LiteralChakraDirection]] = None

    # The distance or margin between the reference and popper. It is used internally to create an offset modifier. NB: If you define offset prop, it'll override the gutter.
-    gutter: Var[int]
+    gutter: Optional[Var[int]] = None

    # If true, the tooltip will show an arrow tip
-    has_arrow: Var[bool]
+    has_arrow: Optional[Var[bool]] = None

    # If true, the tooltip with be disabled.
-    is_disabled: Var[bool]
+    is_disabled: Optional[Var[bool]] = None

    # If true, the tooltip will be open.
-    is_open: Var[bool]
+    is_open: Optional[Var[bool]] = None

    # The label of the tooltip
-    label: Var[str]
+    label: Optional[Var[str]] = None

    # Delay (in ms) before showing the tooltip
-    open_delay: Var[int]
+    open_delay: Optional[Var[int]] = None

    # The placement of the popper relative to its reference.
-    placement: Var[str]
+    placement: Optional[Var[str]] = None

    # If true, the tooltip will wrap its children in a `<span/>` with `tabIndex=0`
-    should_wrap_children: Var[bool]
+    should_wrap_children: Optional[Var[bool]] = None

    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
        """Get the event triggers for the component.
--- a/reflex/components/chakra/typography/heading.py
+++ b/reflex/components/chakra/typography/heading.py
@ -1,5 +1,5 @@
 """A heading component."""
-
+from typing import Optional

 from reflex.components.chakra import ChakraComponent, LiteralHeadingSize
 from reflex.vars import Var
@ -8,10 +8,10 @@ from reflex.vars import Var
 class Heading(ChakraComponent):
    """A page heading."""

-    tag = "Heading"
+    tag: str = "Heading"

    # Override the tag. The default tag is `<h2>`.
-    as_: Var[str]
+    as_: Optional[Var[str]] = None

    # "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs"
-    size: Var[LiteralHeadingSize]
+    size: Optional[Var[LiteralHeadingSize]] = None
--- a/reflex/components/chakra/typography/highlight.py
+++ b/reflex/components/chakra/typography/highlight.py
@ -1,6 +1,5 @@
 """A highlight component."""
-
-from typing import Dict, List
+from typing import Dict, List, Optional

 from reflex.components.chakra import ChakraComponent
 from reflex.components.tags import Tag
@ -10,10 +9,10 @@ from reflex.vars import Var
 class Highlight(ChakraComponent):
    """Highlights a specific part of a string."""

-    tag = "Highlight"
+    tag: str = "Highlight"

    # A query for the text to highlight. Can be a string or a list of strings.
-    query: Var[List[str]]
+    query: Optional[Var[List[str]]] = None

    # The style of the content.
    # Note: styles and style are different prop.
--- a/reflex/components/chakra/typography/span.py
+++ b/reflex/components/chakra/typography/span.py
@ -8,7 +8,7 @@ from reflex.vars import Var
 class Span(ChakraComponent):
    """Render an inline span of text."""

-    tag = "Text"
+    tag: str = "Text"

    # Override the tag. The default tag is `<span>`.
    as_: Var[str] = "span"  # type: ignore
--- a/reflex/components/chakra/typography/text.py
+++ b/reflex/components/chakra/typography/text.py
@ -1,6 +1,8 @@
 """A text component."""
 from __future__ import annotations

+from typing import Optional
+
 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var

@ -8,10 +10,10 @@ from reflex.vars import Var
 class Text(ChakraComponent):
    """Render a paragraph of text."""

-    tag = "Text"
+    tag: str = "Text"

    # Override the tag. The default tag is `<p>`.
-    as_: Var[str]
+    as_: Optional[Var[str]] = None

    # Truncate text after a specific number of lines. It will render an ellipsis when the text exceeds the width of the viewport or max_width prop.
-    no_of_lines: Var[int]
+    no_of_lines: Optional[Var[int]] = None
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@ -1,5 +1,4 @@
 """Base component definitions."""
-
 from __future__ import annotations

 import copy
@ -19,8 +18,12 @@ from typing import (
    Set,
    Type,
    Union,
+    get_args,
 )

+from pydantic.fields import ModelPrivateAttr
+from pydantic_core._pydantic_core import PydanticUndefinedType
+
 from reflex.base import Base
 from reflex.compiler.templates import STATEFUL_COMPONENT
 from reflex.components.tags import Tag
@ -199,35 +202,43 @@ class Component(BaseComponent, ABC):
    _memoization_mode: MemoizationMode = MemoizationMode()

    @classmethod
-    def __init_subclass__(cls, **kwargs):
+    def __pydantic_init_subclass__(cls):
        """Set default properties.

        Args:
            **kwargs: The kwargs to pass to the superclass.
        """
-        super().__init_subclass__(**kwargs)
-
        # Get all the props for the component.
        props = cls.get_props()

        # Convert fields to props, setting default values.
-        for field in cls.get_fields().values():
+        for field_name, field in cls.get_fields().items():
            # If the field is not a component prop, skip it.
-            if field.name not in props:
+            if field_name not in props:
                continue

            # Set default values for any props.
-            if types._issubclass(field.type_, Var):
-                field.required = False
-                field.default = Var.create(field.default)
+            if types._issubclass(field.annotation, Var):
+                if not isinstance(field.default, PydanticUndefinedType):
+                    # Wrap all given default values in Var
+                    field.default = Var.create(field.default)
+
+                # Var type fields are implicitly Optional
+                if field.is_required():
+                    field.annotation = Optional[field.annotation]
+                    field.default = None

        # Ensure renamed props from parent classes are applied to the subclass.
-        if cls._rename_props:
+        if cls._rename_props.default:
            inherited_rename_props = {}
            for parent in reversed(cls.mro()):
-                if issubclass(parent, Component) and parent._rename_props:
-                    inherited_rename_props.update(parent._rename_props)
-            cls._rename_props = inherited_rename_props
+                if issubclass(parent, Component) and isinstance(
+                    parent._rename_props, ModelPrivateAttr
+                ):
+                    inherited_rename_props.update(parent._rename_props.default)
+            cls._rename_props.default = inherited_rename_props
+
+        cls.model_rebuild(force=True)

    def __init__(self, *args, **kwargs):
        """Initialize the component.
@ -271,11 +282,18 @@ class Component(BaseComponent, ABC):
                field_type = EventChain
            elif key in props:
                # Set the field type.
-                field_type = fields[key].type_
+                field_type = fields[key].annotation

            else:
                continue

+            # unwrap Optional from field_type
+            field_type = (
+                typing.get_args(field_type)[0]
+                if types.is_optional(field_type)
+                else field_type
+            )
+
            # Check whether the key is a component prop.
            if types._issubclass(field_type, Var):
                try:
@ -286,7 +304,7 @@ class Component(BaseComponent, ABC):
                    if kwargs[key] is None:
                        raise TypeError

-                    expected_type = fields[key].outer_type_.__args__[0]
+                    expected_type = get_args(field_type)[0]
                    # validate literal fields.
                    types.validate_literal(
                        key, value, expected_type, type(self).__name__
@ -301,7 +319,7 @@ class Component(BaseComponent, ABC):
                except TypeError:
                    # If it is not a valid var, check the base types.
                    passed_type = type(value)
-                    expected_type = fields[key].outer_type_
+                    expected_type = field_type
                if not types._issubclass(passed_type, expected_type):
                    value_name = value._var_name if isinstance(value, Var) else value
                    raise TypeError(
@ -581,7 +599,7 @@ class Component(BaseComponent, ABC):
            name
            for name, field in cls.get_fields().items()
            if name in cls.get_props()
-            and types._issubclass(field.outer_type_, Component)
+            and types._issubclass(field.annotation, Component)
        }

    @classmethod
@ -1232,7 +1250,7 @@ class CustomComponent(Component):
    """A custom user-defined component."""

    # Use the components library.
-    library = f"/{Dirs.COMPONENTS_PATH}"
+    library: str = f"/{Dirs.COMPONENTS_PATH}"

    # The function that creates the component.
    component_fn: Callable[..., Component] = Component.create
@ -1379,7 +1397,7 @@ class CustomComponent(Component):


 def custom_component(
-    component_fn: Callable[..., Component]
+    component_fn: Callable[..., Component],
 ) -> Callable[..., CustomComponent]:
    """Create a custom component from a function.

@ -1841,7 +1859,7 @@ class MemoizationLeaf(Component):
        """
        comp = super().create(*children, **props)
        if comp.get_hooks():
-            comp._memoization_mode = cls._memoization_mode.copy(
+            comp._memoization_mode = comp._memoization_mode.model_copy(
                update={"disposition": MemoizationDisposition.ALWAYS}
            )
        return comp
--- a/reflex/components/core/client_side_routing.py
+++ b/reflex/components/core/client_side_routing.py
@ -20,8 +20,8 @@ route_not_found: Var = Var.create_safe(constants.ROUTE_NOT_FOUND)
 class ClientSideRouting(Component):
    """The client-side routing component."""

-    library = "/utils/client_side_routing"
-    tag = "useClientSideRouting"
+    library: str = "/utils/client_side_routing"
+    tag: str = "useClientSideRouting"

    def _get_hooks(self) -> str:
        """Get the hooks to render.
@ -61,8 +61,8 @@ def wait_for_client_redirect(component) -> Component:
 class Default404Page(Component):
    """The NextJS default 404 page."""

-    library = "next/error"
-    tag = "Error"
-    is_default = True
+    library: str = "next/error"
+    tag: str = "Error"
+    is_default: bool = True

    status_code: Var[int] = 404  # type: ignore
--- a/reflex/components/core/cond.py
+++ b/reflex/components/core/cond.py
@ -21,7 +21,7 @@ class Cond(MemoizationLeaf):
    """Render one of two components based on a condition."""

    # The cond to determine which component to render.
-    cond: Var[Any]
+    cond: Optional[Var[Any]] = None

    # The component to render if the cond is true.
    comp1: BaseComponent = None  # type: ignore
--- a/reflex/components/core/debounce.py
+++ b/reflex/components/core/debounce.py
@ -1,7 +1,7 @@
 """Wrapper around react-debounce-input."""
 from __future__ import annotations

-from typing import Any, Type
+from typing import Any, Optional, Type

 from reflex.components.component import Component
 from reflex.constants import EventTriggers
@ -18,29 +18,29 @@ class DebounceInput(Component):
    is experiencing high latency.
    """

-    library = "react-debounce-input@3.3.0"
-    tag = "DebounceInput"
+    library: str = "react-debounce-input@3.3.0"
+    tag: str = "DebounceInput"

    # Minimum input characters before triggering the on_change event
-    min_length: Var[int]
+    min_length: Optional[Var[int]] = None

    # Time to wait between end of input and triggering on_change
    debounce_timeout: Var[int] = DEFAULT_DEBOUNCE_TIMEOUT  # type: ignore

    # If true, notify when Enter key is pressed
-    force_notify_by_enter: Var[bool]
+    force_notify_by_enter: Optional[Var[bool]] = None

    # If true, notify when form control loses focus
-    force_notify_on_blur: Var[bool]
+    force_notify_on_blur: Optional[Var[bool]] = None

    # If provided, create a fully-controlled input
-    value: Var[str]
+    value: Optional[Var[str]] = None

    # The ref to attach to the created input
-    input_ref: Var[str]
+    input_ref: Optional[Var[str]] = None

    # The element to wrap
-    element: Var[Type[Component]]
+    element: Optional[Var[Type[Component]]] = None

    @classmethod
    def create(cls, *children: Component, **props: Any) -> Component:
--- a/reflex/components/core/foreach.py
+++ b/reflex/components/core/foreach.py
@ -18,7 +18,7 @@ class Foreach(Component):
    _memoization_mode = MemoizationMode(recursive=False)

    # The iterable to create components from.
-    iterable: Var[Iterable]
+    iterable: Optional[Var[Iterable]] = None

    # A function from the render args to the component.
    render_fn: Callable = Fragment.create
--- a/reflex/components/core/html.py
+++ b/reflex/components/core/html.py
@ -1,5 +1,5 @@
 """A html component."""
-from typing import Dict
+from typing import Dict, Optional

 from reflex.components.el.elements.typography import Div
 from reflex.vars import Var
@ -13,7 +13,7 @@ class Html(Div):
    """

    # The HTML to render.
-    dangerouslySetInnerHTML: Var[Dict[str, str]]
+    dangerouslySetInnerHTML: Optional[Var[Dict[str, str]]] = None

    @classmethod
    def create(cls, *children, **props):
--- a/reflex/components/core/match.py
+++ b/reflex/components/core/match.py
@ -1,5 +1,4 @@
 """rx.match."""
-
 import textwrap
 from typing import Any, Dict, List, Optional, Tuple, Union

@ -17,7 +16,7 @@ class Match(MemoizationLeaf):
    """Match cases based on a condition."""

    # The condition to determine which case to match.
-    cond: Var[Any]
+    cond: Optional[Var[Any]] = None

    # The list of match cases to be matched.
    match_cases: List[Any] = []
--- a/reflex/components/core/upload.py
+++ b/reflex/components/core/upload.py
@ -157,47 +157,47 @@ def _on_drop_spec(files: Var):
 class UploadFilesProvider(Component):
    """AppWrap component that provides a dict of selected files by ID via useContext."""

-    library = f"/{Dirs.CONTEXTS_PATH}"
-    tag = "UploadFilesProvider"
+    library: str = f"/{Dirs.CONTEXTS_PATH}"
+    tag: str = "UploadFilesProvider"


 class Upload(MemoizationLeaf):
    """A file upload component."""

-    library = "react-dropzone@14.2.3"
+    library: str = "react-dropzone@14.2.3"

-    tag = "ReactDropzone"
+    tag: str = "ReactDropzone"

-    is_default = True
+    is_default: bool = True

    # The list of accepted file types. This should be a dictionary of MIME types as keys and array of file formats as
    # values.
    # supported MIME types: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
-    accept: Var[Optional[Dict[str, List]]]
+    accept: Optional[Var[Optional[Dict[str, List]]]] = None

    # Whether the dropzone is disabled.
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None

    # The maximum number of files that can be uploaded.
-    max_files: Var[int]
+    max_files: Optional[Var[int]] = None

    # The maximum file size (bytes) that can be uploaded.
-    max_size: Var[int]
+    max_size: Optional[Var[int]] = None

    # The minimum file size (bytes) that can be uploaded.
-    min_size: Var[int]
+    min_size: Optional[Var[int]] = None

    # Whether to allow multiple files to be uploaded.
    multiple: Var[bool] = True  # type: ignore

    # Whether to disable click to upload.
-    no_click: Var[bool]
+    no_click: Optional[Var[bool]] = None

    # Whether to disable drag and drop.
-    no_drag: Var[bool]
+    no_drag: Optional[Var[bool]] = None

    # Whether to disable using the space/enter keys to upload.
-    no_keyboard: Var[bool]
+    no_keyboard: Optional[Var[bool]] = None

    # Marked True when any Upload component is created.
    is_used: ClassVar[bool] = False
--- a/reflex/components/datadisplay/code.py
+++ b/reflex/components/datadisplay/code.py
@ -348,11 +348,11 @@ LiteralCodeLanguage = Literal[
 class CodeBlock(Component):
    """A code block."""

-    library = "react-syntax-highlighter@15.5.0"
+    library: str = "react-syntax-highlighter@15.5.0"

-    tag = "PrismAsyncLight"
+    tag: str = "PrismAsyncLight"

-    alias = "SyntaxHighlighter"
+    alias: str = "SyntaxHighlighter"

    # The theme to use ("light" or "dark").
    theme: Var[LiteralCodeBlockTheme] = "one-light"  # type: ignore
@ -361,22 +361,22 @@ class CodeBlock(Component):
    language: Var[LiteralCodeLanguage] = "python"  # type: ignore

    # The code to display.
-    code: Var[str]
+    code: Optional[Var[str]] = None

    # If this is enabled line numbers will be shown next to the code block.
-    show_line_numbers: Var[bool]
+    show_line_numbers: Optional[Var[bool]] = None

    # The starting line number to use.
-    starting_line_number: Var[int]
+    starting_line_number: Optional[Var[int]] = None

    # Whether to wrap long lines.
-    wrap_long_lines: Var[bool]
+    wrap_long_lines: Optional[Var[bool]] = None

    # A custom style for the code block.
    custom_style: Dict[str, str] = {}

    # Props passed down to the code tag.
-    code_tag_props: Var[Dict[str, str]]
+    code_tag_props: Optional[Var[Dict[str, str]]] = None

    def _get_imports(self) -> imports.ImportDict:
        merged_imports = super()._get_imports()
--- a/reflex/components/datadisplay/dataeditor.py
+++ b/reflex/components/datadisplay/dataeditor.py
@ -106,8 +106,8 @@ class DataEditorTheme(Base):
 class DataEditor(NoSSRComponent):
    """The DataEditor Component."""

-    tag = "DataEditor"
-    is_default = True
+    tag: str = "DataEditor"
+    is_default: bool = True
    library: str = "@glideapps/glide-data-grid@^5.3.0"
    lib_dependencies: List[str] = [
        "lodash@^4.17.21",
@ -116,94 +116,94 @@ class DataEditor(NoSSRComponent):
    ]

    # Number of rows.
-    rows: Var[int]
+    rows: Optional[Var[int]] = None

    # Headers of the columns for the data grid.
-    columns: Var[List[Dict[str, Any]]]
+    columns: Optional[Var[List[Dict[str, Any]]]] = None

    # The data.
-    data: Var[List[List[Any]]]
+    data: Optional[Var[List[List[Any]]]] = None

    # The name of the callback used to find the data to display.
-    get_cell_content: Var[str]
+    get_cell_content: Optional[Var[str]] = None

    # Allow selection for copying.
-    get_cell_for_selection: Var[bool]
+    get_cell_for_selection: Optional[Var[bool]] = None

    # Allow paste.
-    on_paste: Var[bool]
+    on_paste: Optional[Var[bool]] = None

    # Controls the drawing of the focus ring.
-    draw_focus_ring: Var[bool]
+    draw_focus_ring: Optional[Var[bool]] = None

    # Enables or disables the overlay shadow when scrolling horizontally.
-    fixed_shadow_x: Var[bool]
+    fixed_shadow_x: Optional[Var[bool]] = None

    # Enables or disables the overlay shadow when scrolling vertically.
-    fixed_shadow_y: Var[bool]
+    fixed_shadow_y: Optional[Var[bool]] = None

    # The number of columns which should remain in place when scrolling horizontally. Doesn't include rowMarkers.
-    freeze_columns: Var[int]
+    freeze_columns: Optional[Var[int]] = None

    # Controls the header of the group header row.
-    group_header_height: Var[int]
+    group_header_height: Optional[Var[int]] = None

    # Controls the height of the header row.
-    header_height: Var[int]
+    header_height: Optional[Var[int]] = None

    # Additional header icons:
    # header_icons: Var[Any] # (TODO: must be a map of name: svg)

    # The maximum width a column can be automatically sized to.
-    max_column_auto_width: Var[int]
+    max_column_auto_width: Optional[Var[int]] = None

    # The maximum width a column can be resized to.
-    max_column_width: Var[int]
+    max_column_width: Optional[Var[int]] = None

    # The minimum width a column can be resized to.
-    min_column_width: Var[int]
+    min_column_width: Optional[Var[int]] = None

    # Determins the height of each row.
-    row_height: Var[int]
+    row_height: Optional[Var[int]] = None

    # Kind of row markers.
-    row_markers: Var[LiteralRowMarker]
+    row_markers: Optional[Var[LiteralRowMarker]] = None

    # Changes the starting index for row markers.
-    row_marker_start_index: Var[int]
+    row_marker_start_index: Optional[Var[int]] = None

    # Sets the width of row markers in pixels, if unset row markers will automatically size.
-    row_marker_width: Var[int]
+    row_marker_width: Optional[Var[int]] = None

    # Enable horizontal smooth scrolling.
-    smooth_scroll_x: Var[bool]
+    smooth_scroll_x: Optional[Var[bool]] = None

    # Enable vertical smooth scrolling.
-    smooth_scroll_y: Var[bool]
+    smooth_scroll_y: Optional[Var[bool]] = None

    # Controls the drawing of the left hand vertical border of a column. If set to a boolean value it controls all borders.
    vertical_border: Var[bool]  # TODO: support a mapping (dict[int, bool])

    # Allow columns selections. ("none", "single", "multi")
-    column_select: Var[Literal["none", "single", "multi"]]
+    column_select: Optional[Var[Literal["none", "single", "multi"]]] = None

    # Prevent diagonal scrolling.
-    prevent_diagonal_scrolling: Var[bool]
+    prevent_diagonal_scrolling: Optional[Var[bool]] = None

    # Allow to scroll past the limit of the actual content on the horizontal axis.
-    overscroll_x: Var[int]
+    overscroll_x: Optional[Var[int]] = None

    # Allow to scroll past the limit of the actual content on the vertical axis.
-    overscroll_y: Var[int]
+    overscroll_y: Optional[Var[int]] = None

    # Initial scroll offset on the horizontal axis.
-    scroll_offset_x: Var[int]
+    scroll_offset_x: Optional[Var[int]] = None

    # Initial scroll offset on the vertical axis.
-    scroll_offset_y: Var[int]
+    scroll_offset_y: Optional[Var[int]] = None

    # global theme
-    theme: Var[Union[DataEditorTheme, Dict]]
+    theme: Optional[Var[Union[DataEditorTheme, Dict]]] = None

    def _get_imports(self):
        return imports.merge_imports(
--- a/reflex/components/el/elements/base.py
+++ b/reflex/components/el/elements/base.py
@ -1,5 +1,4 @@
-"""Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union

 from reflex.components.el.element import Element
 from reflex.vars import Var as Var
@ -9,49 +8,49 @@ class BaseHTML(Element):
    """Base class for common attributes."""

    #  Provides a hint for generating a keyboard shortcut for the current element.
-    access_key: Var[Union[str, int, bool]]
+    access_key: Optional[Var[Union[str, int, bool]]] = None

    # Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
-    auto_capitalize: Var[Union[str, int, bool]]
+    auto_capitalize: Optional[Var[Union[str, int, bool]]] = None

    # Indicates whether the element's content is editable.
-    content_editable: Var[Union[str, int, bool]]
+    content_editable: Optional[Var[Union[str, int, bool]]] = None

    # Defines the ID of a <menu> element which will serve as the element's context menu.
-    context_menu: Var[Union[str, int, bool]]
+    context_menu: Optional[Var[Union[str, int, bool]]] = None

    # Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
-    dir: Var[Union[str, int, bool]]
+    dir: Optional[Var[Union[str, int, bool]]] = None

    # Defines whether the element can be dragged.
-    draggable: Var[Union[str, int, bool]]
+    draggable: Optional[Var[Union[str, int, bool]]] = None

    # Hints what media types the media element is able to play.
-    enter_key_hint: Var[Union[str, int, bool]]
+    enter_key_hint: Optional[Var[Union[str, int, bool]]] = None

    # Defines whether the element is hidden.
-    hidden: Var[Union[str, int, bool]]
+    hidden: Optional[Var[Union[str, int, bool]]] = None

    # Defines the type of the element.
-    input_mode: Var[Union[str, int, bool]]
+    input_mode: Optional[Var[Union[str, int, bool]]] = None

    # Defines the name of the element for metadata purposes.
-    item_prop: Var[Union[str, int, bool]]
+    item_prop: Optional[Var[Union[str, int, bool]]] = None

    # Defines the language used in the element.
-    lang: Var[Union[str, int, bool]]
+    lang: Optional[Var[Union[str, int, bool]]] = None

    # Defines the role of the element.
-    role: Var[Union[str, int, bool]]
+    role: Optional[Var[Union[str, int, bool]]] = None

    # Assigns a slot in a shadow DOM shadow tree to an element.
-    slot: Var[Union[str, int, bool]]
+    slot: Optional[Var[Union[str, int, bool]]] = None

    # Defines whether the element may be checked for spelling errors.
-    spell_check: Var[Union[str, int, bool]]
+    spell_check: Optional[Var[Union[str, int, bool]]] = None

    # Defines the position of the current element in the tabbing order.
-    tab_index: Var[Union[str, int, bool]]
+    tab_index: Optional[Var[Union[str, int, bool]]] = None

    # Defines a tooltip for the element.
-    title: Var[Union[str, int, bool]]
+    title: Optional[Var[Union[str, int, bool]]] = None
--- a/reflex/components/el/elements/forms.py
+++ b/reflex/components/el/elements/forms.py
@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Any, Dict, Union
+from typing import Any, Dict, Optional, Union

 from reflex.components.el.element import Element
 from reflex.constants.event import EventTriggers
@ -11,200 +11,200 @@ from .base import BaseHTML
 class Button(BaseHTML):
    """Display the button element."""

-    tag = "button"
+    tag: str = "button"

    # Automatically focuses the button when the page loads
-    auto_focus: Var[Union[str, int, bool]]
+    auto_focus: Optional[Var[Union[str, int, bool]]] = None

    # Disables the button
-    disabled: Var[bool]
+    disabled: Optional[Var[bool]] = None

    # Associates the button with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None

    # URL to send the form data to (for type="submit" buttons)
-    form_action: Var[Union[str, int, bool]]
+    form_action: Optional[Var[Union[str, int, bool]]] = None

    # How the form data should be encoded when submitting to the server (for type="submit" buttons)
-    form_enc_type: Var[Union[str, int, bool]]
+    form_enc_type: Optional[Var[Union[str, int, bool]]] = None

    # HTTP method to use for sending form data (for type="submit" buttons)
-    form_method: Var[Union[str, int, bool]]
+    form_method: Optional[Var[Union[str, int, bool]]] = None

    # Bypasses form validation when submitting (for type="submit" buttons)
-    form_no_validate: Var[Union[str, int, bool]]
+    form_no_validate: Optional[Var[Union[str, int, bool]]] = None

    # Specifies where to display the response after submitting the form (for type="submit" buttons)
-    form_target: Var[Union[str, int, bool]]
+    form_target: Optional[Var[Union[str, int, bool]]] = None

    # Name of the button, used when sending form data
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None

    # Type of the button (submit, reset, or button)
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None

    # Value of the button, used when sending form data
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None


 class Datalist(BaseHTML):
    """Display the datalist element."""

-    tag = "datalist"
+    tag: str = "datalist"
    # No unique attributes, only common ones are inherited


 class Fieldset(Element):
    """Display the fieldset element."""

-    tag = "fieldset"
+    tag: str = "fieldset"

    # Disables all the form control descendants of the fieldset
-    disabled: Var[Union[str, int, bool]]
+    disabled: Optional[Var[Union[str, int, bool]]] = None

    # Associates the fieldset with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None

    # Name of the fieldset, used for scripting
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None


 class Form(BaseHTML):
    """Display the form element."""

-    tag = "form"
+    tag: str = "form"

    # MIME types the server accepts for file upload
-    accept: Var[Union[str, int, bool]]
+    accept: Optional[Var[Union[str, int, bool]]] = None

    # Character encodings to be used for form submission
-    accept_charset: Var[Union[str, int, bool]]
+    accept_charset: Optional[Var[Union[str, int, bool]]] = None

    # URL where the form's data should be submitted
-    action: Var[Union[str, int, bool]]
+    action: Optional[Var[Union[str, int, bool]]] = None

    # Whether the form should have autocomplete enabled
-    auto_complete: Var[Union[str, int, bool]]
+    auto_complete: Optional[Var[Union[str, int, bool]]] = None

    # Encoding type for the form data when submitted
-    enc_type: Var[Union[str, int, bool]]
+    enc_type: Optional[Var[Union[str, int, bool]]] = None

    # HTTP method to use for form submission
-    method: Var[Union[str, int, bool]]
+    method: Optional[Var[Union[str, int, bool]]] = None

    # Name of the form
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None

    # Indicates that the form should not be validated on submit
-    no_validate: Var[Union[str, int, bool]]
+    no_validate: Optional[Var[Union[str, int, bool]]] = None

    # Where to display the response after submitting the form
-    target: Var[Union[str, int, bool]]
+    target: Optional[Var[Union[str, int, bool]]] = None


 class Input(BaseHTML):
    """Display the input element."""

-    tag = "input"
+    tag: str = "input"

    # Accepted types of files when the input is file type
-    accept: Var[Union[str, int, bool]]
+    accept: Optional[Var[Union[str, int, bool]]] = None

    # Alternate text for input type="image"
-    alt: Var[Union[str, int, bool]]
+    alt: Optional[Var[Union[str, int, bool]]] = None

    # Whether the input should have autocomplete enabled
-    auto_complete: Var[Union[str, int, bool]]
+    auto_complete: Optional[Var[Union[str, int, bool]]] = None

    # Automatically focuses the input when the page loads
-    auto_focus: Var[Union[str, int, bool]]
+    auto_focus: Optional[Var[Union[str, int, bool]]] = None

    # Captures media from the user (camera or microphone)
-    capture: Var[Union[str, int, bool]]
+    capture: Optional[Var[Union[str, int, bool]]] = None

    # Indicates whether the input is checked (for checkboxes and radio buttons)
-    checked: Var[Union[str, int, bool]]
+    checked: Optional[Var[Union[str, int, bool]]] = None

    # The initial value (for checkboxes and radio buttons)
-    default_checked: Var[bool]
+    default_checked: Optional[Var[bool]] = None

    # The initial value for a text field
-    default_value: Var[str]
+    default_value: Optional[Var[str]] = None

    # Name part of the input to submit in 'dir' and 'name' pair when form is submitted
-    dirname: Var[Union[str, int, bool]]
+    dirname: Optional[Var[Union[str, int, bool]]] = None

    # Disables the input
-    disabled: Var[Union[str, int, bool]]
+    disabled: Optional[Var[Union[str, int, bool]]] = None

    # Associates the input with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None

    # URL to send the form data to (for type="submit" buttons)
-    form_action: Var[Union[str, int, bool]]
+    form_action: Optional[Var[Union[str, int, bool]]] = None

    # How the form data should be encoded when submitting to the server (for type="submit" buttons)
-    form_enc_type: Var[Union[str, int, bool]]
+    form_enc_type: Optional[Var[Union[str, int, bool]]] = None

    # HTTP method to use for sending form data (for type="submit" buttons)
-    form_method: Var[Union[str, int, bool]]
+    form_method: Optional[Var[Union[str, int, bool]]] = None

    # Bypasses form validation when submitting (for type="submit" buttons)
-    form_no_validate: Var[Union[str, int, bool]]
+    form_no_validate: Optional[Var[Union[str, int, bool]]] = None

    # Specifies where to display the response after submitting the form (for type="submit" buttons)
-    form_target: Var[Union[str, int, bool]]
+    form_target: Optional[Var[Union[str, int, bool]]] = None

    # References a datalist for suggested options
-    list: Var[Union[str, int, bool]]
+    list: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the maximum value for the input
-    max: Var[Union[str, int, bool]]
+    max: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the maximum number of characters allowed in the input
-    max_length: Var[Union[str, int, bool]]
+    max_length: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the minimum number of characters required in the input
-    min_length: Var[Union[str, int, bool]]
+    min_length: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the minimum value for the input
-    min: Var[Union[str, int, bool]]
+    min: Optional[Var[Union[str, int, bool]]] = None

    # Indicates whether multiple values can be entered in an input of the type email or file
-    multiple: Var[Union[str, int, bool]]
+    multiple: Optional[Var[Union[str, int, bool]]] = None

    # Name of the input, used when sending form data
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None

    # Regex pattern the input's value must match to be valid
-    pattern: Var[Union[str, int, bool]]
+    pattern: Optional[Var[Union[str, int, bool]]] = None

    # Placeholder text in the input
-    placeholder: Var[Union[str, int, bool]]
+    placeholder: Optional[Var[Union[str, int, bool]]] = None

    # Indicates whether the input is read-only
-    read_only: Var[Union[str, int, bool]]
+    read_only: Optional[Var[Union[str, int, bool]]] = None

    # Indicates that the input is required
-    required: Var[Union[str, int, bool]]
+    required: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the visible width of a text control
-    size: Var[Union[str, int, bool]]
+    size: Optional[Var[Union[str, int, bool]]] = None

    # URL for image inputs
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the legal number intervals for an input
-    step: Var[Union[str, int, bool]]
+    step: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the type of input
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None

    # Name of the image map used with the input
-    use_map: Var[Union[str, int, bool]]
+    use_map: Optional[Var[Union[str, int, bool]]] = None

    # Value of the input
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None

    def get_event_triggers(self) -> Dict[str, Any]:
        """Get the event triggers that pass the component's value to the handler.
@ -225,137 +225,137 @@ class Input(BaseHTML):
 class Label(BaseHTML):
    """Display the label element."""

-    tag = "label"
+    tag: str = "label"

    # ID of a form control with which the label is associated
-    html_for: Var[Union[str, int, bool]]
+    html_for: Optional[Var[Union[str, int, bool]]] = None

    # Associates the label with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None


 class Legend(BaseHTML):
    """Display the legend element."""

-    tag = "legend"
+    tag: str = "legend"
    # No unique attributes, only common ones are inherited


 class Meter(BaseHTML):
    """Display the meter element."""

-    tag = "meter"
+    tag: str = "meter"

    # Associates the meter with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None

    # High limit of range (above this is considered high value)
-    high: Var[Union[str, int, bool]]
+    high: Optional[Var[Union[str, int, bool]]] = None

    # Low limit of range (below this is considered low value)
-    low: Var[Union[str, int, bool]]
+    low: Optional[Var[Union[str, int, bool]]] = None

    # Maximum value of the range
-    max: Var[Union[str, int, bool]]
+    max: Optional[Var[Union[str, int, bool]]] = None

    # Minimum value of the range
-    min: Var[Union[str, int, bool]]
+    min: Optional[Var[Union[str, int, bool]]] = None

    # Optimum value in the range
-    optimum: Var[Union[str, int, bool]]
+    optimum: Optional[Var[Union[str, int, bool]]] = None

    # Current value of the meter
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None


 class Optgroup(BaseHTML):
    """Display the optgroup element."""

-    tag = "optgroup"
+    tag: str = "optgroup"

    # Disables the optgroup
-    disabled: Var[Union[str, int, bool]]
+    disabled: Optional[Var[Union[str, int, bool]]] = None

    # Label for the optgroup
-    label: Var[Union[str, int, bool]]
+    label: Optional[Var[Union[str, int, bool]]] = None


 class Option(BaseHTML):
    """Display the option element."""

-    tag = "option"
+    tag: str = "option"

    # Disables the option
-    disabled: Var[Union[str, int, bool]]
+    disabled: Optional[Var[Union[str, int, bool]]] = None

    # Label for the option, if the text is not the label
-    label: Var[Union[str, int, bool]]
+    label: Optional[Var[Union[str, int, bool]]] = None

    # Indicates that the option is initially selected
-    selected: Var[Union[str, int, bool]]
+    selected: Optional[Var[Union[str, int, bool]]] = None

    # Value to be sent as form data
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None


 class Output(BaseHTML):
    """Display the output element."""

-    tag = "output"
+    tag: str = "output"

    # Associates the output with one or more elements (by their IDs)
-    html_for: Var[Union[str, int, bool]]
+    html_for: Optional[Var[Union[str, int, bool]]] = None

    # Associates the output with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None

    # Name of the output element for form submission
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None


 class Progress(BaseHTML):
    """Display the progress element."""

-    tag = "progress"
+    tag: str = "progress"

    # Associates the progress element with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None

    # Maximum value of the progress indicator
-    max: Var[Union[str, int, bool]]
+    max: Optional[Var[Union[str, int, bool]]] = None

    # Current value of the progress indicator
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None


 class Select(BaseHTML):
    """Display the select element."""

-    tag = "select"
+    tag: str = "select"

    # Whether the form control should have autocomplete enabled
-    auto_complete: Var[Union[str, int, bool]]
+    auto_complete: Optional[Var[Union[str, int, bool]]] = None

    # Automatically focuses the select when the page loads
-    auto_focus: Var[Union[str, int, bool]]
+    auto_focus: Optional[Var[Union[str, int, bool]]] = None

    # Disables the select control
-    disabled: Var[Union[str, int, bool]]
+    disabled: Optional[Var[Union[str, int, bool]]] = None

    # Associates the select with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None

    # Indicates that multiple options can be selected
-    multiple: Var[Union[str, int, bool]]
+    multiple: Optional[Var[Union[str, int, bool]]] = None

    # Name of the select, used when submitting the form
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None

    # Indicates that the select control must have a selected option
-    required: Var[Union[str, int, bool]]
+    required: Optional[Var[Union[str, int, bool]]] = None

    # Number of visible options in a drop-down list
-    size: Var[Union[str, int, bool]]
+    size: Optional[Var[Union[str, int, bool]]] = None

    def get_event_triggers(self) -> Dict[str, Any]:
        """Get the event triggers that pass the component's value to the handler.
@ -372,52 +372,52 @@ class Select(BaseHTML):
 class Textarea(BaseHTML):
    """Display the textarea element."""

-    tag = "textarea"
+    tag: str = "textarea"

    # Whether the form control should have autocomplete enabled
-    auto_complete: Var[Union[str, int, bool]]
+    auto_complete: Optional[Var[Union[str, int, bool]]] = None

    # Automatically focuses the textarea when the page loads
-    auto_focus: Var[Union[str, int, bool]]
+    auto_focus: Optional[Var[Union[str, int, bool]]] = None

    # Visible width of the text control, in average character widths
-    cols: Var[Union[str, int, bool]]
+    cols: Optional[Var[Union[str, int, bool]]] = None

    # Name part of the textarea to submit in 'dir' and 'name' pair when form is submitted
-    dirname: Var[Union[str, int, bool]]
+    dirname: Optional[Var[Union[str, int, bool]]] = None

    # Disables the textarea
-    disabled: Var[Union[str, int, bool]]
+    disabled: Optional[Var[Union[str, int, bool]]] = None

    # Associates the textarea with a form (by id)
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None

    # Maximum number of characters allowed in the textarea
-    max_length: Var[Union[str, int, bool]]
+    max_length: Optional[Var[Union[str, int, bool]]] = None

    # Minimum number of characters required in the textarea
-    min_length: Var[Union[str, int, bool]]
+    min_length: Optional[Var[Union[str, int, bool]]] = None

    # Name of the textarea, used when submitting the form
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None

    # Placeholder text in the textarea
-    placeholder: Var[Union[str, int, bool]]
+    placeholder: Optional[Var[Union[str, int, bool]]] = None

    # Indicates whether the textarea is read-only
-    read_only: Var[Union[str, int, bool]]
+    read_only: Optional[Var[Union[str, int, bool]]] = None

    # Indicates that the textarea is required
-    required: Var[Union[str, int, bool]]
+    required: Optional[Var[Union[str, int, bool]]] = None

    # Visible number of lines in the text control
-    rows: Var[Union[str, int, bool]]
+    rows: Optional[Var[Union[str, int, bool]]] = None

    # The controlled value of the textarea, read only unless used with on_change
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None

    # How the text in the textarea is to be wrapped when submitting the form
-    wrap: Var[Union[str, int, bool]]
+    wrap: Optional[Var[Union[str, int, bool]]] = None

    def get_event_triggers(self) -> Dict[str, Any]:
        """Get the event triggers that pass the component's value to the handler.
--- a/reflex/components/el/elements/inline.py
+++ b/reflex/components/el/elements/inline.py
@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union

 from reflex.vars import Var

@ -9,202 +9,202 @@ from .base import BaseHTML
 class A(BaseHTML):  # Inherits common attributes from BaseMeta
    """Display the 'a' element."""

-    tag = "a"
+    tag: str = "a"

    # Specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.
-    download: Var[Union[str, int, bool]]
+    download: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the URL of the page the link goes to
-    href: Var[Union[str, int, bool]]
+    href: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the language of the linked document
-    href_lang: Var[Union[str, int, bool]]
+    href_lang: Optional[Var[Union[str, int, bool]]] = None

    # Specifies what media/device the linked document is optimized for
-    media: Var[Union[str, int, bool]]
+    media: Optional[Var[Union[str, int, bool]]] = None

    # Specifies which referrer is sent when fetching the resource
-    ping: Var[Union[str, int, bool]]
+    ping: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the relationship between the current document and the linked document
-    referrer_policy: Var[Union[str, int, bool]]
+    referrer_policy: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the relationship between the linked document and the current document
-    rel: Var[Union[str, int, bool]]
+    rel: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the shape of the area
-    shape: Var[Union[str, int, bool]]
+    shape: Optional[Var[Union[str, int, bool]]] = None

    # Specifies where to open the linked document
-    target: Var[Union[str, int, bool]]
+    target: Optional[Var[Union[str, int, bool]]] = None


 class Abbr(BaseHTML):
    """Display the abbr element."""

-    tag = "abbr"
+    tag: str = "abbr"


 class B(BaseHTML):
    """Display the b element."""

-    tag = "b"
+    tag: str = "b"


 class Bdi(BaseHTML):
    """Display the bdi element."""

-    tag = "bdi"
+    tag: str = "bdi"


 class Bdo(BaseHTML):
    """Display the bdo element."""

-    tag = "bdo"
+    tag: str = "bdo"


 class Br(BaseHTML):
    """Display the br element."""

-    tag = "br"
+    tag: str = "br"


 class Cite(BaseHTML):
    """Display the cite element."""

-    tag = "cite"
+    tag: str = "cite"


 class Code(BaseHTML):
    """Display the code element."""

-    tag = "code"
+    tag: str = "code"


 class Data(BaseHTML):
    """Display the data element."""

-    tag = "data"
+    tag: str = "data"

    # Specifies the machine-readable translation of the data element.
-    value: Var[Union[str, int, bool]]
+    value: Optional[Var[Union[str, int, bool]]] = None


 class Dfn(BaseHTML):
    """Display the dfn element."""

-    tag = "dfn"
+    tag: str = "dfn"


 class Em(BaseHTML):
    """Display the em element."""

-    tag = "em"
+    tag: str = "em"


 class I(BaseHTML):  # noqa: E742
    """Display the i element."""

-    tag = "i"
+    tag: str = "i"


 class Kbd(BaseHTML):
    """Display the kbd element."""

-    tag = "kbd"
+    tag: str = "kbd"


 class Mark(BaseHTML):
    """Display the mark element."""

-    tag = "mark"
+    tag: str = "mark"


 class Q(BaseHTML):
    """Display the q element."""

-    tag = "q"
+    tag: str = "q"

    # Specifies the source URL of the quote.
-    cite: Var[Union[str, int, bool]]
+    cite: Optional[Var[Union[str, int, bool]]] = None


 class Rp(BaseHTML):
    """Display the rp element."""

-    tag = "rp"
+    tag: str = "rp"


 class Rt(BaseHTML):
    """Display the rt element."""

-    tag = "rt"
+    tag: str = "rt"


 class Ruby(BaseHTML):
    """Display the ruby element."""

-    tag = "ruby"
+    tag: str = "ruby"


 class S(BaseHTML):
    """Display the s element."""

-    tag = "s"
+    tag: str = "s"


 class Samp(BaseHTML):
    """Display the samp element."""

-    tag = "samp"
+    tag: str = "samp"


 class Small(BaseHTML):
    """Display the small element."""

-    tag = "small"
+    tag: str = "small"


 class Span(BaseHTML):
    """Display the span element."""

-    tag = "span"
+    tag: str = "span"


 class Strong(BaseHTML):
    """Display the strong element."""

-    tag = "strong"
+    tag: str = "strong"


 class Sub(BaseHTML):
    """Display the sub element."""

-    tag = "sub"
+    tag: str = "sub"


 class Sup(BaseHTML):
    """Display the sup element."""

-    tag = "sup"
+    tag: str = "sup"


 class Time(BaseHTML):
    """Display the time element."""

-    tag = "time"
+    tag: str = "time"

    # Specifies the date and/or time of the element.
-    date_time: Var[Union[str, int, bool]]
+    date_time: Optional[Var[Union[str, int, bool]]] = None


 class U(BaseHTML):
    """Display the u element."""

-    tag = "u"
+    tag: str = "u"


 class Wbr(BaseHTML):
    """Display the wbr element."""

-    tag = "wbr"
+    tag: str = "wbr"
--- a/reflex/components/el/elements/media.py
+++ b/reflex/components/el/elements/media.py
@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Any, Union
+from typing import Any, Optional, Union

 from reflex.vars import Var as Var

@ -9,291 +9,291 @@ from .base import BaseHTML
 class Area(BaseHTML):
    """Display the area element."""

-    tag = "area"
+    tag: str = "area"

    # Alternate text for the area, used for accessibility
-    alt: Var[Union[str, int, bool]]
+    alt: Optional[Var[Union[str, int, bool]]] = None

    # Coordinates to define the shape of the area
-    coords: Var[Union[str, int, bool]]
+    coords: Optional[Var[Union[str, int, bool]]] = None

    # Specifies that the target will be downloaded when clicked
-    download: Var[Union[str, int, bool]]
+    download: Optional[Var[Union[str, int, bool]]] = None

    # Hyperlink reference for the area
-    href: Var[Union[str, int, bool]]
+    href: Optional[Var[Union[str, int, bool]]] = None

    # Language of the linked resource
-    href_lang: Var[Union[str, int, bool]]
+    href_lang: Optional[Var[Union[str, int, bool]]] = None

    # Specifies what media/device the linked resource is optimized for
-    media: Var[Union[str, int, bool]]
+    media: Optional[Var[Union[str, int, bool]]] = None

    # A list of URLs to be notified if the user follows the hyperlink
-    ping: Var[Union[str, int, bool]]
+    ping: Optional[Var[Union[str, int, bool]]] = None

    # Specifies which referrer information to send with the link
-    referrer_policy: Var[Union[str, int, bool]]
+    referrer_policy: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the relationship of the target object to the link object
-    rel: Var[Union[str, int, bool]]
+    rel: Optional[Var[Union[str, int, bool]]] = None

    # Defines the shape of the area (rectangle, circle, polygon)
-    shape: Var[Union[str, int, bool]]
+    shape: Optional[Var[Union[str, int, bool]]] = None

    # Specifies where to open the linked document
-    target: Var[Union[str, int, bool]]
+    target: Optional[Var[Union[str, int, bool]]] = None


 class Audio(BaseHTML):
    """Display the audio element."""

-    tag = "audio"
+    tag: str = "audio"

    # Specifies that the audio will start playing as soon as it is ready
-    auto_play: Var[Union[str, int, bool]]
+    auto_play: Optional[Var[Union[str, int, bool]]] = None

    # Represents the time range of the buffered media
-    buffered: Var[Union[str, int, bool]]
+    buffered: Optional[Var[Union[str, int, bool]]] = None

    # Displays the standard audio controls
-    controls: Var[Union[str, int, bool]]
+    controls: Optional[Var[Union[str, int, bool]]] = None

    # Configures the CORS requests for the element
-    cross_origin: Var[Union[str, int, bool]]
+    cross_origin: Optional[Var[Union[str, int, bool]]] = None

    # Specifies that the audio will loop
-    loop: Var[Union[str, int, bool]]
+    loop: Optional[Var[Union[str, int, bool]]] = None

    # Indicates whether the audio is muted by default
-    muted: Var[Union[str, int, bool]]
+    muted: Optional[Var[Union[str, int, bool]]] = None

    # Specifies how the audio file should be preloaded
-    preload: Var[Union[str, int, bool]]
+    preload: Optional[Var[Union[str, int, bool]]] = None

    # URL of the audio to play
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None


 class Img(BaseHTML):
    """Display the img element."""

-    tag = "img"
+    tag: str = "img"

    # Image alignment with respect to its surrounding elements
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None

    # Alternative text for the image
-    alt: Var[Union[str, int, bool]]
+    alt: Optional[Var[Union[str, int, bool]]] = None

    # Configures the CORS requests for the image
-    cross_origin: Var[Union[str, int, bool]]
+    cross_origin: Optional[Var[Union[str, int, bool]]] = None

    # How the image should be decoded
-    decoding: Var[Union[str, int, bool]]
+    decoding: Optional[Var[Union[str, int, bool]]] = None

    # Specifies an intrinsic size for the image
-    intrinsicsize: Var[Union[str, int, bool]]
+    intrinsicsize: Optional[Var[Union[str, int, bool]]] = None

    # Whether the image is a server-side image map
-    ismap: Var[Union[str, int, bool]]
+    ismap: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the loading behavior of the image
-    loading: Var[Union[str, int, bool]]
+    loading: Optional[Var[Union[str, int, bool]]] = None

    # Referrer policy for the image
-    referrer_policy: Var[Union[str, int, bool]]
+    referrer_policy: Optional[Var[Union[str, int, bool]]] = None

    # Sizes of the image for different layouts
-    sizes: Var[Union[str, int, bool]]
+    sizes: Optional[Var[Union[str, int, bool]]] = None

    # URL of the image to display
-    src: Var[Any]
+    src: Optional[Var[Any]] = None

    # A set of source sizes and URLs for responsive images
-    src_set: Var[Union[str, int, bool]]
+    src_set: Optional[Var[Union[str, int, bool]]] = None

    # The name of the map to use with the image
-    use_map: Var[Union[str, int, bool]]
+    use_map: Optional[Var[Union[str, int, bool]]] = None


 class Map(BaseHTML):
    """Display the map element."""

-    tag = "map"
+    tag: str = "map"

    # Name of the map, referenced by the 'usemap' attribute in 'img' and 'object' elements
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None


 class Track(BaseHTML):
    """Display the track element."""

-    tag = "track"
+    tag: str = "track"

    # Indicates that the track should be enabled unless the user's preferences indicate otherwise
-    default: Var[Union[str, int, bool]]
+    default: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the kind of text track
-    kind: Var[Union[str, int, bool]]
+    kind: Optional[Var[Union[str, int, bool]]] = None

    # Title of the text track, used by the browser when listing available text tracks
-    label: Var[Union[str, int, bool]]
+    label: Optional[Var[Union[str, int, bool]]] = None

    # URL of the track file
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None

    # Language of the track text data
-    src_lang: Var[Union[str, int, bool]]
+    src_lang: Optional[Var[Union[str, int, bool]]] = None


 class Video(BaseHTML):
    """Display the video element."""

-    tag = "video"
+    tag: str = "video"

    # Specifies that the video will start playing as soon as it is ready
-    auto_play: Var[Union[str, int, bool]]
+    auto_play: Optional[Var[Union[str, int, bool]]] = None

    # Represents the time range of the buffered media
-    buffered: Var[Union[str, int, bool]]
+    buffered: Optional[Var[Union[str, int, bool]]] = None

    # Displays the standard video controls
-    controls: Var[Union[str, int, bool]]
+    controls: Optional[Var[Union[str, int, bool]]] = None

    # Configures the CORS requests for the video
-    cross_origin: Var[Union[str, int, bool]]
+    cross_origin: Optional[Var[Union[str, int, bool]]] = None

    # Specifies that the video will loop
-    loop: Var[Union[str, int, bool]]
+    loop: Optional[Var[Union[str, int, bool]]] = None

    # Indicates whether the video is muted by default
-    muted: Var[Union[str, int, bool]]
+    muted: Optional[Var[Union[str, int, bool]]] = None

    # Indicates that the video should play 'inline', inside its element's playback area
-    plays_inline: Var[Union[str, int, bool]]
+    plays_inline: Optional[Var[Union[str, int, bool]]] = None

    # URL of an image to show while the video is downloading, or until the user hits the play button
-    poster: Var[Union[str, int, bool]]
+    poster: Optional[Var[Union[str, int, bool]]] = None

    # Specifies how the video file should be preloaded
-    preload: Var[Union[str, int, bool]]
+    preload: Optional[Var[Union[str, int, bool]]] = None

    # URL of the video to play
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None


 class Embed(BaseHTML):
    """Display the embed element."""

-    tag = "embed"
+    tag: str = "embed"

    # URL of the embedded content
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None

    # Media type of the embedded content
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None


 class Iframe(BaseHTML):
    """Display the iframe element."""

-    tag = "iframe"
+    tag: str = "iframe"

    # Alignment of the iframe within the page or surrounding elements
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None

    # Permissions policy for the iframe
-    allow: Var[Union[str, int, bool]]
+    allow: Optional[Var[Union[str, int, bool]]] = None

    # Content Security Policy to apply to the iframe's content
-    csp: Var[Union[str, int, bool]]
+    csp: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the loading behavior of the iframe
-    loading: Var[Union[str, int, bool]]
+    loading: Optional[Var[Union[str, int, bool]]] = None

    # Name of the iframe, used as a target for hyperlinks and forms
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None

    # Referrer policy for the iframe
-    referrer_policy: Var[Union[str, int, bool]]
+    referrer_policy: Optional[Var[Union[str, int, bool]]] = None

    # Security restrictions for the content in the iframe
-    sandbox: Var[Union[str, int, bool]]
+    sandbox: Optional[Var[Union[str, int, bool]]] = None

    # URL of the document to display in the iframe
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None

    # HTML content to embed directly within the iframe
-    src_doc: Var[Union[str, int, bool]]
+    src_doc: Optional[Var[Union[str, int, bool]]] = None


 class Object(BaseHTML):
    """Display the object element."""

-    tag = "object"
+    tag: str = "object"

    # URL of the data to be used by the object
-    data: Var[Union[str, int, bool]]
+    data: Optional[Var[Union[str, int, bool]]] = None

    # Associates the object with a form element
-    form: Var[Union[str, int, bool]]
+    form: Optional[Var[Union[str, int, bool]]] = None

    # Name of the object, used for scripting or as a target for forms and links
-    name: Var[Union[str, int, bool]]
+    name: Optional[Var[Union[str, int, bool]]] = None

    # Media type of the data specified in the data attribute
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None

    # Name of an image map to use with the object
-    use_map: Var[Union[str, int, bool]]
+    use_map: Optional[Var[Union[str, int, bool]]] = None


 class Picture(BaseHTML):
    """Display the picture element."""

-    tag = "picture"
+    tag: str = "picture"
    # No unique attributes, only common ones are inherited


 class Portal(BaseHTML):
    """Display the portal element."""

-    tag = "portal"
+    tag: str = "portal"
    # No unique attributes, only common ones are inherited


 class Source(BaseHTML):
    """Display the source element."""

-    tag = "source"
+    tag: str = "source"

    # Media query indicating what device the linked resource is optimized for
-    media: Var[Union[str, int, bool]]
+    media: Optional[Var[Union[str, int, bool]]] = None

    # Sizes of the source for different layouts
-    sizes: Var[Union[str, int, bool]]
+    sizes: Optional[Var[Union[str, int, bool]]] = None

    # URL of the media file or an image for the element to use
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None

    # A set of source sizes and URLs for responsive images
-    src_set: Var[Union[str, int, bool]]
+    src_set: Optional[Var[Union[str, int, bool]]] = None

    # Media type of the source
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None


 class Svg(BaseHTML):
    """Display the svg element."""

-    tag = "svg"
+    tag: str = "svg"


 class Path(BaseHTML):
    """Display the path element."""

-    tag = "path"
+    tag: str = "path"

    # Defines the shape of the path
-    d: Var[Union[str, int, bool]]
+    d: Optional[Var[Union[str, int, bool]]] = None
--- a/reflex/components/el/elements/metadata.py
+++ b/reflex/components/el/elements/metadata.py
@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union

 from reflex.components.el.element import Element
 from reflex.vars import Var as Var
@ -10,46 +10,46 @@ from .base import BaseHTML
 class Base(BaseHTML):  # noqa: E742
    """Display the base element."""

-    tag = "base"
+    tag: str = "base"

-    tag = "base"
-    href: Var[Union[str, int, bool]]
-    target: Var[Union[str, int, bool]]
+    tag: str = "base"
+    href: Optional[Var[Union[str, int, bool]]] = None
+    target: Optional[Var[Union[str, int, bool]]] = None


 class Head(BaseHTML):  # noqa: E742
    """Display the head element."""

-    tag = "head"
+    tag: str = "head"


 class Link(BaseHTML):  # noqa: E742
    """Display the link element."""

-    tag = "link"
+    tag: str = "link"

-    cross_origin: Var[Union[str, int, bool]]
-    href: Var[Union[str, int, bool]]
-    href_lang: Var[Union[str, int, bool]]
-    integrity: Var[Union[str, int, bool]]
-    media: Var[Union[str, int, bool]]
-    referrer_policy: Var[Union[str, int, bool]]
-    rel: Var[Union[str, int, bool]]
-    sizes: Var[Union[str, int, bool]]
-    type: Var[Union[str, int, bool]]
+    cross_origin: Optional[Var[Union[str, int, bool]]] = None
+    href: Optional[Var[Union[str, int, bool]]] = None
+    href_lang: Optional[Var[Union[str, int, bool]]] = None
+    integrity: Optional[Var[Union[str, int, bool]]] = None
+    media: Optional[Var[Union[str, int, bool]]] = None
+    referrer_policy: Optional[Var[Union[str, int, bool]]] = None
+    rel: Optional[Var[Union[str, int, bool]]] = None
+    sizes: Optional[Var[Union[str, int, bool]]] = None
+    type: Optional[Var[Union[str, int, bool]]] = None


 class Meta(BaseHTML):  # Inherits common attributes from BaseHTML
    """Display the meta element."""

-    tag = "meta"
-    char_set: Var[Union[str, int, bool]]
-    content: Var[Union[str, int, bool]]
-    http_equiv: Var[Union[str, int, bool]]
-    name: Var[Union[str, int, bool]]
+    tag: str = "meta"
+    char_set: Optional[Var[Union[str, int, bool]]] = None
+    content: Optional[Var[Union[str, int, bool]]] = None
+    http_equiv: Optional[Var[Union[str, int, bool]]] = None
+    name: Optional[Var[Union[str, int, bool]]] = None


 class Title(Element):  # noqa: E742
    """Display the title element."""

-    tag = "title"
+    tag: str = "title"
--- a/reflex/components/el/elements/other.py
+++ b/reflex/components/el/elements/other.py
@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union

 from reflex.vars import Var as Var

@ -9,53 +9,53 @@ from .base import BaseHTML
 class Details(BaseHTML):
    """Display the details element."""

-    tag = "details"
+    tag: str = "details"

    # Indicates whether the details will be visible (expanded) to the user
-    open: Var[Union[str, int, bool]]
+    open: Optional[Var[Union[str, int, bool]]] = None


 class Dialog(BaseHTML):
    """Display the dialog element."""

-    tag = "dialog"
+    tag: str = "dialog"

    # Indicates whether the dialog is active and can be interacted with
-    open: Var[Union[str, int, bool]]
+    open: Optional[Var[Union[str, int, bool]]] = None


 class Summary(BaseHTML):
    """Display the summary element."""

-    tag = "summary"
+    tag: str = "summary"
    # No unique attributes, only common ones are inherited; used as a summary or caption for a <details> element


 class Slot(BaseHTML):
    """Display the slot element."""

-    tag = "slot"
+    tag: str = "slot"
    # No unique attributes, only common ones are inherited; used as a placeholder inside a web component


 class Template(BaseHTML):
    """Display the template element."""

-    tag = "template"
+    tag: str = "template"
    # No unique attributes, only common ones are inherited; used for declaring fragments of HTML that can be cloned and inserted in the document


 class Math(BaseHTML):
    """Display the math element."""

-    tag = "math"
+    tag: str = "math"
    # No unique attributes, only common ones are inherited; used for displaying mathematical expressions


 class Html(BaseHTML):
    """Display the html element."""

-    tag = "html"
+    tag: str = "html"

    # Specifies the URL of the document's cache manifest (obsolete in HTML5)
-    manifest: Var[Union[str, int, bool]]
+    manifest: Optional[Var[Union[str, int, bool]]] = None
--- a/reflex/components/el/elements/scripts.py
+++ b/reflex/components/el/elements/scripts.py
@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union

 from reflex.vars import Var as Var

@ -9,44 +9,44 @@ from .base import BaseHTML
 class Canvas(BaseHTML):
    """Display the canvas element."""

-    tag = "canvas"
+    tag: str = "canvas"


 class Noscript(BaseHTML):
    """Display the noscript element."""

-    tag = "noscript"
+    tag: str = "noscript"
    # No unique attributes, only common ones are inherited


 class Script(BaseHTML):
    """Display the script element."""

-    tag = "script"
+    tag: str = "script"

    # Indicates that the script should be executed asynchronously
-    async_: Var[Union[str, int, bool]]
+    async_: Optional[Var[Union[str, int, bool]]] = None

    # Character encoding of the external script
-    char_set: Var[Union[str, int, bool]]
+    char_set: Optional[Var[Union[str, int, bool]]] = None

    # Configures the CORS requests for the script
-    cross_origin: Var[Union[str, int, bool]]
+    cross_origin: Optional[Var[Union[str, int, bool]]] = None

    # Indicates that the script should be executed after the page has finished parsing
-    defer: Var[Union[str, int, bool]]
+    defer: Optional[Var[Union[str, int, bool]]] = None

    # Security feature allowing browsers to verify what they fetch
-    integrity: Var[Union[str, int, bool]]
+    integrity: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the scripting language used in the type attribute
-    language: Var[Union[str, int, bool]]
+    language: Optional[Var[Union[str, int, bool]]] = None

    # Specifies which referrer information to send when fetching the script
-    referrer_policy: Var[Union[str, int, bool]]
+    referrer_policy: Optional[Var[Union[str, int, bool]]] = None

    # URL of an external script
-    src: Var[Union[str, int, bool]]
+    src: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the MIME type of the script
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None
--- a/reflex/components/el/elements/sectioning.py
+++ b/reflex/components/el/elements/sectioning.py
@ -8,88 +8,88 @@ from .base import BaseHTML
 class Body(BaseHTML):  # noqa: E742
    """Display the body element."""

-    tag = "body"
+    tag: str = "body"


 class Address(BaseHTML):  # noqa: E742
    """Display the address element."""

-    tag = "address"
+    tag: str = "address"


 class Article(BaseHTML):  # noqa: E742
    """Display the article element."""

-    tag = "article"
+    tag: str = "article"


 class Aside(BaseHTML):  # noqa: E742
    """Display the aside element."""

-    tag = "aside"
+    tag: str = "aside"


 class Footer(BaseHTML):  # noqa: E742
    """Display the footer element."""

-    tag = "footer"
+    tag: str = "footer"


 class Header(BaseHTML):  # noqa: E742
    """Display the header element."""

-    tag = "header"
+    tag: str = "header"


 class H1(BaseHTML):  # noqa: E742
    """Display the h1 element."""

-    tag = "h1"
+    tag: str = "h1"


 class H2(BaseHTML):  # noqa: E742
    """Display the h1 element."""

-    tag = "h2"
+    tag: str = "h2"


 class H3(BaseHTML):  # noqa: E742
    """Display the h1 element."""

-    tag = "h3"
+    tag: str = "h3"


 class H4(BaseHTML):  # noqa: E742
    """Display the h1 element."""

-    tag = "h4"
+    tag: str = "h4"


 class H5(BaseHTML):  # noqa: E742
    """Display the h1 element."""

-    tag = "h5"
+    tag: str = "h5"


 class H6(BaseHTML):  # noqa: E742
    """Display the h1 element."""

-    tag = "h6"
+    tag: str = "h6"


 class Main(BaseHTML):  # noqa: E742
    """Display the main element."""

-    tag = "main"
+    tag: str = "main"


 class Nav(BaseHTML):  # noqa: E742
    """Display the nav element."""

-    tag = "nav"
+    tag: str = "nav"


 class Section(BaseHTML):  # noqa: E742
    """Display the section element."""

-    tag = "section"
+    tag: str = "section"
--- a/reflex/components/el/elements/tables.py
+++ b/reflex/components/el/elements/tables.py
@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union

 from reflex.vars import Var as Var

@ -9,118 +9,118 @@ from .base import BaseHTML
 class Caption(BaseHTML):
    """Display the caption element."""

-    tag = "caption"
+    tag: str = "caption"

    # Alignment of the caption
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None


 class Col(BaseHTML):
    """Display the col element."""

-    tag = "col"
+    tag: str = "col"

    # Alignment of the content within the column
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None

    # Number of columns the col element spans
-    span: Var[Union[str, int, bool]]
+    span: Optional[Var[Union[str, int, bool]]] = None


 class Colgroup(BaseHTML):
    """Display the colgroup element."""

-    tag = "colgroup"
+    tag: str = "colgroup"

    # Alignment of the content within the column group
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None

    # Number of columns the colgroup element spans
-    span: Var[Union[str, int, bool]]
+    span: Optional[Var[Union[str, int, bool]]] = None


 class Table(BaseHTML):
    """Display the table element."""

-    tag = "table"
+    tag: str = "table"

    # Alignment of the table
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None

    # Provides a summary of the table's purpose and structure
-    summary: Var[Union[str, int, bool]]
+    summary: Optional[Var[Union[str, int, bool]]] = None


 class Tbody(BaseHTML):
    """Display the tbody element."""

-    tag = "tbody"
+    tag: str = "tbody"

    # Alignment of the content within the table body
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None


 class Td(BaseHTML):
    """Display the td element."""

-    tag = "td"
+    tag: str = "td"

    # Alignment of the content within the table cell
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None

    # Number of columns a cell should span
-    col_span: Var[Union[str, int, bool]]
+    col_span: Optional[Var[Union[str, int, bool]]] = None

    # IDs of the headers associated with this cell
-    headers: Var[Union[str, int, bool]]
+    headers: Optional[Var[Union[str, int, bool]]] = None

    # Number of rows a cell should span
-    row_span: Var[Union[str, int, bool]]
+    row_span: Optional[Var[Union[str, int, bool]]] = None


 class Tfoot(BaseHTML):
    """Display the tfoot element."""

-    tag = "tfoot"
+    tag: str = "tfoot"

    # Alignment of the content within the table footer
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None


 class Th(BaseHTML):
    """Display the th element."""

-    tag = "th"
+    tag: str = "th"

    # Alignment of the content within the table header cell
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None

    # Number of columns a header cell should span
-    col_span: Var[Union[str, int, bool]]
+    col_span: Optional[Var[Union[str, int, bool]]] = None

    # IDs of the headers associated with this header cell
-    headers: Var[Union[str, int, bool]]
+    headers: Optional[Var[Union[str, int, bool]]] = None

    # Number of rows a header cell should span
-    row_span: Var[Union[str, int, bool]]
+    row_span: Optional[Var[Union[str, int, bool]]] = None

    # Scope of the header cell (row, col, rowgroup, colgroup)
-    scope: Var[Union[str, int, bool]]
+    scope: Optional[Var[Union[str, int, bool]]] = None


 class Thead(BaseHTML):
    """Display the thead element."""

-    tag = "thead"
+    tag: str = "thead"

    # Alignment of the content within the table header
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None


 class Tr(BaseHTML):
    """Display the tr element."""

-    tag = "tr"
+    tag: str = "tr"

    # Alignment of the content within the table row
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None
--- a/reflex/components/el/elements/typography.py
+++ b/reflex/components/el/elements/typography.py
@ -1,5 +1,5 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Optional, Union

 from reflex.vars import Var as Var

@ -9,118 +9,118 @@ from .base import BaseHTML
 class Blockquote(BaseHTML):
    """Display the blockquote element."""

-    tag = "blockquote"
+    tag: str = "blockquote"

    # Define the title of a work.
-    cite: Var[Union[str, int, bool]]
+    cite: Optional[Var[Union[str, int, bool]]] = None


 class Dd(BaseHTML):
    """Display the dd element."""

-    tag = "dd"
+    tag: str = "dd"


 class Div(BaseHTML):
    """Display the div element."""

-    tag = "div"
+    tag: str = "div"


 class Dl(BaseHTML):
    """Display the dl element."""

-    tag = "dl"
+    tag: str = "dl"


 class Dt(BaseHTML):
    """Display the dt element."""

-    tag = "dt"
+    tag: str = "dt"


 class Figcaption(BaseHTML):
    """Display the figcaption element."""

-    tag = "figcaption"
+    tag: str = "figcaption"


 class Hr(BaseHTML):
    """Display the hr element."""

-    tag = "hr"
+    tag: str = "hr"

    # Used to specify the alignment of text content of The Element. this attribute is used in all elements.
-    align: Var[Union[str, int, bool]]
+    align: Optional[Var[Union[str, int, bool]]] = None


 class Li(BaseHTML):
    """Display the li element."""

-    tag = "li"
+    tag: str = "li"


 class Menu(BaseHTML):
    """Display the menu element."""

-    tag = "menu"
+    tag: str = "menu"

    # Specifies that the menu element is a context menu.
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None


 class Ol(BaseHTML):
    """Display the ol element."""

-    tag = "ol"
+    tag: str = "ol"

    # Reverses the order of the list.
-    reversed: Var[Union[str, int, bool]]
+    reversed: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the start value of the first list item in an ordered list.
-    start: Var[Union[str, int, bool]]
+    start: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the kind of marker to use in the list (letters or numbers).
-    type: Var[Union[str, int, bool]]
+    type: Optional[Var[Union[str, int, bool]]] = None


 class P(BaseHTML):
    """Display the p element."""

-    tag = "p"
+    tag: str = "p"


 class Pre(BaseHTML):
    """Display the pre element."""

-    tag = "pre"
+    tag: str = "pre"


 class Ul(BaseHTML):
    """Display the ul element."""

-    tag = "ul"
+    tag: str = "ul"


 class Ins(BaseHTML):
    """Display the ins element."""

-    tag = "ins"
+    tag: str = "ins"

    # Specifies the URL of the document that explains the reason why the text was inserted/changed.
-    cite: Var[Union[str, int, bool]]
+    cite: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the date and time of when the text was inserted/changed.
-    date_time: Var[Union[str, int, bool]]
+    date_time: Optional[Var[Union[str, int, bool]]] = None


 class Del(BaseHTML):
    """Display the del element."""

-    tag = "del"
+    tag: str = "del"

    # Specifies the URL of the document that explains the reason why the text was deleted.
-    cite: Var[Union[str, int, bool]]
+    cite: Optional[Var[Union[str, int, bool]]] = None

    # Specifies the date and time of when the text was deleted.
-    date_time: Var[Union[str, int, bool]]
+    date_time: Optional[Var[Union[str, int, bool]]] = None
--- a/reflex/components/gridjs/datatable.py
+++ b/reflex/components/gridjs/datatable.py
@ -1,8 +1,7 @@
 """Table components."""
-
 from __future__ import annotations

-from typing import Any, Dict, List, Union
+from typing import Any, Dict, List, Optional, Union

 from reflex.components.component import Component
 from reflex.components.tags import Tag
@ -14,7 +13,7 @@ from reflex.vars import BaseVar, ComputedVar, Var
 class Gridjs(Component):
    """A component that wraps a nivo bar component."""

-    library = "gridjs-react@6.0.1"
+    library: str = "gridjs-react@6.0.1"

    lib_dependencies: List[str] = ["gridjs@6.0.6"]

@ -22,28 +21,28 @@ class Gridjs(Component):
 class DataTable(Gridjs):
    """A data table component."""

-    tag = "Grid"
+    tag: str = "Grid"

-    alias = "DataTableGrid"
+    alias: str = "DataTableGrid"

    # The data to display. Either a list of lists or a pandas dataframe.
    data: Any

    # The list of columns to display. Required if data is a list and should not be provided
    # if the data field is a dataframe
-    columns: Var[List]
+    columns: Optional[Var[List]] = None

    # Enable a search bar.
-    search: Var[bool]
+    search: Optional[Var[bool]] = None

    # Enable sorting on columns.
-    sort: Var[bool]
+    sort: Optional[Var[bool]] = None

    # Enable resizable columns.
-    resizable: Var[bool]
+    resizable: Optional[Var[bool]] = None

    # Enable pagination.
-    pagination: Var[Union[bool, Dict]]
+    pagination: Optional[Var[Union[bool, Dict]]] = None

    @classmethod
    def create(cls, *children, **props):
--- a/reflex/components/lucide/icon.py
+++ b/reflex/components/lucide/icon.py
@ -1,5 +1,7 @@
 """Lucide Icon component."""

+from typing import Optional
+
 from reflex.components.component import Component
 from reflex.style import Style
 from reflex.utils import format
@ -9,16 +11,16 @@ from reflex.vars import Var
 class LucideIconComponent(Component):
    """Lucide Icon Component."""

-    library = "lucide-react@0.314.0"
+    library: str = "lucide-react@0.314.0"


 class Icon(LucideIconComponent):
    """An Icon component."""

-    tag = "None"
+    tag: str = "None"

    # The size of the icon in pixels.
-    size: Var[int]
+    size: Optional[Var[int]] = None

    @classmethod
    def create(cls, *children, **props) -> Component:
--- a/reflex/components/markdown/markdown.py
+++ b/reflex/components/markdown/markdown.py
@ -75,11 +75,11 @@ def get_base_component_map() -> dict[str, Callable]:
 class Markdown(Component):
    """A markdown component."""

-    library = "react-markdown@8.0.7"
+    library: str = "react-markdown@8.0.7"

-    tag = "ReactMarkdown"
+    tag: str = "ReactMarkdown"

-    is_default = True
+    is_default: bool = True

    # The component map from a tag to a lambda that creates a component.
    component_map: Dict[str, Any] = {}
--- a/reflex/components/moment/moment.py
+++ b/reflex/components/moment/moment.py
@ -1,5 +1,4 @@
 """Moment component for humanized date rendering."""
-
 from typing import Any, Dict, List, Optional

 from reflex.base import Base
@ -26,69 +25,69 @@ class Moment(NoSSRComponent):
    """The Moment component."""

    tag: str = "Moment"
-    is_default = True
+    is_default: bool = True
    library: str = "react-moment"
    lib_dependencies: List[str] = ["moment"]

    # How often the date update (how often time update / 0 to disable).
-    interval: Var[int]
+    interval: Optional[Var[int]] = None

    # Formats the date according to the given format string.
-    format: Var[str]
+    format: Optional[Var[str]] = None

    # When formatting duration time, the largest-magnitude tokens are automatically trimmed when they have no value.
-    trim: Var[bool]
+    trim: Optional[Var[bool]] = None

    #  Use the parse attribute to tell moment how to parse the given date when non-standard.
-    parse: Var[str]
+    parse: Optional[Var[str]] = None

    # Add a delta to the base date (keys are "years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds")
-    add: Var[MomentDelta]
+    add: Optional[Var[MomentDelta]] = None

    # Subtract a delta to the base date (keys are "years", "quarters", "months", "weeks", "days", "hours", "minutes", "seconds")
-    subtract: Var[MomentDelta]
+    subtract: Optional[Var[MomentDelta]] = None

    # Displays the date as the time from now, e.g. "5 minutes ago".
-    from_now: Var[bool]
+    from_now: Optional[Var[bool]] = None

    # Setting fromNowDuring will display the relative time as with fromNow but just during its value in milliseconds, after that format will be used instead.
-    from_now_during: Var[int]
+    from_now_during: Optional[Var[int]] = None

    # Similar to fromNow, but gives the opposite interval.
-    to_now: Var[bool]
+    to_now: Optional[Var[bool]] = None

    # Adds a title attribute to the element with the complete date.
-    with_title: Var[bool]
+    with_title: Optional[Var[bool]] = None

    # How the title date is formatted when using the withTitle attribute.
-    title_format: Var[str]
+    title_format: Optional[Var[str]] = None

    # Show the different between this date and the rendered child.
-    diff: Var[str]
+    diff: Optional[Var[str]] = None

    # Display the diff as decimal.
-    decimal: Var[bool]
+    decimal: Optional[Var[bool]] = None

    # Display the diff in given unit.
-    unit: Var[str]
+    unit: Optional[Var[str]] = None

    # Shows the duration (elapsed time) between two dates. duration property should be behind date property time-wise.
-    duration: Var[str]
+    duration: Optional[Var[str]] = None

    # The date to display (also work if passed as children).
-    date: Var[str]
+    date: Optional[Var[str]] = None

    # Shows the duration (elapsed time) between now and the provided datetime.
-    duration_from_now: Var[bool]
+    duration_from_now: Optional[Var[bool]] = None

    # Tells Moment to parse the given date value as a unix timestamp.
-    unix: Var[bool]
+    unix: Optional[Var[bool]] = None

    # Outputs the result in local time.
-    local: Var[bool]
+    local: Optional[Var[bool]] = None

    # Display the date in the given timezone.
-    tz: Var[str]
+    tz: Optional[Var[str]] = None

    def _get_imports(self) -> imports.ImportDict:
        merged_imports = super()._get_imports()
--- a/reflex/components/next/image.py
+++ b/reflex/components/next/image.py
@ -1,5 +1,4 @@
 """Image component from next/image."""
-
 from typing import Any, Dict, Literal, Optional, Union

 from reflex.utils import types
@ -11,48 +10,48 @@ from .base import NextComponent
 class Image(NextComponent):
    """Display an image."""

-    tag = "Image"
-    library = "next/image"
-    is_default = True
+    tag: str = "Image"
+    library: str = "next/image"
+    is_default: bool = True

    # This can be either an absolute external URL, or an internal path
-    src: Var[Any]
+    src: Optional[Var[Any]] = None

    # Represents the rendered width in pixels, so it will affect how large the image appears.
-    width: Var[Any]
+    width: Optional[Var[Any]] = None

    # Represents the rendered height in pixels, so it will affect how large the image appears.
-    height: Var[Any]
+    height: Optional[Var[Any]] = None

    # Used to describe the image for screen readers and search engines.
-    alt: Var[str]
+    alt: Optional[Var[str]] = None

    # A custom function used to resolve image URLs.
-    loader: Var[Any]
+    loader: Optional[Var[Any]] = None

    # A boolean that causes the image to fill the parent element, which is useful when the width and height are unknown. Default to True
-    fill: Var[bool]
+    fill: Optional[Var[bool]] = None

    # A string, similar to a media query, that provides information about how wide the image will be at different breakpoints.
-    sizes: Var[str]
+    sizes: Optional[Var[str]] = None

    # The quality of the optimized image, an integer between 1 and 100, where 100 is the best quality and therefore largest file size. Defaults to 75.
-    quality: Var[int]
+    quality: Optional[Var[int]] = None

    # When true, the image will be considered high priority and preload. Lazy loading is automatically disabled for images using priority.
-    priority: Var[bool]
+    priority: Optional[Var[bool]] = None

    # A placeholder to use while the image is loading. Possible values are blur, empty, or data:image/.... Defaults to empty.
-    placeholder: Var[str]
+    placeholder: Optional[Var[str]] = None

    # Allows passing CSS styles to the underlying image element.
-    # style: Var[Any]
+    # style: Optional[Var[Any]] = None

    # The loading behavior of the image. Defaults to lazy. Can hurt performance, recommended to use `priority` instead.
-    loading: Var[Literal["lazy", "eager"]]
+    loading: Optional[Var[Literal["lazy", "eager"]]] = None

    # A Data URL to be used as a placeholder image before the src image successfully loads. Only takes effect when combined with placeholder="blur".
-    blurDataURL: Var[str]
+    blurDataURL: Optional[Var[str]] = None

    def get_event_triggers(self) -> Dict[str, Any]:
        """The event triggers of the component.
--- a/reflex/components/next/link.py
+++ b/reflex/components/next/link.py
@ -1,5 +1,7 @@
 """A link component."""

+from typing import Optional
+
 from reflex.components.component import Component
 from reflex.vars import Var

@ -7,14 +9,14 @@ from reflex.vars import Var
 class NextLink(Component):
    """Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>."""

-    library = "next/link"
+    library: str = "next/link"

-    tag = "NextLink"
+    tag: str = "NextLink"

-    is_default = True
+    is_default: bool = True

    # The page to link to.
-    href: Var[str]
+    href: Optional[Var[str]] = None

    # Whether to pass the href prop to the child.
    pass_href: Var[bool] = True  # type: ignore
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Masen Furer	586601b169	All Var-typed props are implicitly Optional For compatibility with existing Component wraps, if the type is Var and a default is not provided, mark it as Optional and set a default of None. Fix _rename_props inheritance for pydantic-v2.	2024-03-06 12:04:12 -08:00
Benedikt Bartscher	cdc2f4f6e0	cleanup unneeded init_subclass super calls	2024-03-05 21:59:59 +01:00
Benedikt Bartscher	6d96a94d82	fix chakra list, allow Tag.tag to be None in validation	2024-03-05 21:53:44 +01:00
Benedikt Bartscher	16a7c1ff51	fix bug in memoization mode copy	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	be0a77a66f	pydantic_init_subclass	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	30df32bd16	add default value for new lang prop in Html	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	7ac184f98b	rebuild pydantic model after dropping id field	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	bcd29a10e6	use typing.get_args instead of __args__	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	3c30ceb7f7	new regex missed f-strings	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	16b838dfb1	format component.library black	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	bcaab3015d	add Component.alias str type annotation	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	16b7baef80	add Component.library str type annotation	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	f44d0edc38	add Component.is_default bool type annotation	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	935286b464	add Component.tag str type annotation	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	7534b2caf2	my regex was not smart enough	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	99c28f8433	add proper pydantic v2 FieldInfo annotation	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	32bc17b757	minor IconButton default value fix	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	db3c791603	add hint for VarData deserialization	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	0240541d0b	migrate pydantic config classes to ConfigDict	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	b3593537be	fix VarData json loads	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	b565e8934a	dict -> model_dump and field_info fixes	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	b65c34b212	update_forward_refs -> model_rebuild	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	45cb36f59a	pydantic copy is deprecated in favor of model_copy	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	37c360e786	fix init_subclass for pydantic v2, add some missing type hints, format black	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	80f02753ba	add some missing type hints to test state vars	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	4380cd266d	fix pydantic _get_value for MutableProxy	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	7789118af3	prevent calling __bool__ for is_hydrated	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	211f9f3598	fix auto-var conversion	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	78db90d695	forgot to migrate one type_ to annotation	2024-03-05 21:36:41 +01:00
Benedikt Bartscher	d0f15c591d	optionalize all Var props without defaults	2024-03-05 21:36:39 +01:00
Benedikt Bartscher	fd5a5b97f2	Bare.contents should be a Var	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	1c89f012b6	optionalize some Component props	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	6d3809efcb	ModelField doesn't exist in pydantic v2	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	8c7dd39f02	fix EventSpec args type annotation for pydantic v2	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	80a25d6b29	add missing type annotation for initialColorMode	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	4d497e0053	hacky workaround to allow __class_getitem__ with pydantic	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	1abc57c68b	fix default value for theme in ChakraProvider	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	5c584da4ef	add missing default values to icon and link	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	7f8a457d74	migrate to field.annotation and fix default var wrapping for undefined	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	c057f2e3f3	minor pydantic fixups	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	2def8b97e7	FieldInfo has no name anymore	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	faebd22185	black fixes	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	a5d197c2fb	serialization fixes	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	6291c39fd7	minor state fixes, and var serialization	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	fd32942eb4	parse_obj is deprecated in favor of model_validate	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	66f1e21576	fix backend vars	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	67c81489cf	migrate remaining __fields__ to model_fields	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	ce06bf0114	migrate config to pydantic v2	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	8b2d0b40bc	outer_type_ -> annotation	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	95f9b12829	types adjustments	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	8e692cd305	state adjustments	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	25d05856f9	prepare base	2024-03-05 21:35:53 +01:00
Benedikt Bartscher	0b4b7c0d12	bump reflex_hosting_cli, pydantic and fastapi deps	2024-03-05 21:35:52 +01:00