add responsive props to radix components (#3583)

* implement basic behavior to handle both radix and css

* add all components in theme, AND change pyi to include path of reflex types

* order type annotations in pyi_generator (#3585)

* order type annotations in pyi_generator

* run pyi_generator

* classvars should not be backend vars (#3578)

* classvars should not be backend vars

* cleanup RESERVED_BACKEND_VAR_NAMES

* order type annotations in pyi_generator (#3585)

* order type annotations in pyi_generator

* run pyi_generator

* do not validate non-cached var deps (#3576)

* do not validate non-cached var deps

* further improve Exceptions for misconfigured var deps

* order type annotations in pyi_generator (#3585)

* order type annotations in pyi_generator

* run pyi_generator

* fix git merge remains

* define function globally

* use more modern annotations

* only trigger when direct value and not state

* simplify unions

* accidentally removed avatar oop

---------

Co-authored-by: benedikt-bartscher <31854409+benedikt-bartscher@users.noreply.github.com>

reflex/components/base/app_wrap.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/base/body.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/base/document.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/base/fragment.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/base/head.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/base/link.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,8 +17,8 @@ class RawLink(Component):
     def create(  # type: ignore
         cls,
         *children,
-        href: Optional[Union[Var[str], str]] = None,
-        rel: Optional[Union[Var[str], str]] = None,
+        href: Optional[Union[reflex.vars.Var[str], str]] = None,
+        rel: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -96,13 +97,13 @@ class ScriptTag(Component):
     def create(  # type: ignore
         cls,
         *children,
-        type_: Optional[Union[Var[str], str]] = None,
-        source: Optional[Union[Var[str], str]] = None,
-        integrity: Optional[Union[Var[str], str]] = None,
-        crossorigin: Optional[Union[Var[str], str]] = None,
-        referrer_policy: Optional[Union[Var[str], str]] = None,
-        is_async: Optional[Union[Var[bool], bool]] = None,
-        defer: Optional[Union[Var[bool], bool]] = None,
+        type_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        source: Optional[Union[reflex.vars.Var[str], str]] = None,
+        integrity: Optional[Union[reflex.vars.Var[str], str]] = None,
+        crossorigin: Optional[Union[reflex.vars.Var[str], str]] = None,
+        referrer_policy: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_async: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        defer: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/base/meta.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/base/script.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,8 +18,8 @@ class Script(Component):
     def create(  # type: ignore
         cls,
         *children,
-        src: Optional[Union[Var[str], str]] = None,
-        strategy: Optional[Union[Var[str], str]] = None,
+        src: Optional[Union[reflex.vars.Var[str], str]] = None,
+        strategy: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/base.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -95,7 +96,7 @@ class ChakraProvider(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        theme: Optional[Union[Var[str], str]] = None,
+        theme: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/datadisplay/badge.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -18,11 +19,11 @@ class Badge(ChakraComponent):
         *children,
         variant: Optional[
             Union[
-                Var[Literal["solid", "subtle", "outline"]],
+                reflex.vars.Var[Literal["solid", "subtle", "outline"]],
                 Literal["solid", "subtle", "outline"],
             ]
         ] = None,
-        color_scheme: Optional[Union[Var[str], str]] = None,
+        color_scheme: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/datadisplay/code.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/chakra/datadisplay/divider.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -21,12 +22,14 @@ class Divider(ChakraComponent):
         *children,
         orientation: Optional[
             Union[
-                Var[Literal["horizontal", "vertical"]],
+                reflex.vars.Var[Literal["horizontal", "vertical"]],
                 Literal["horizontal", "vertical"],
             ]
         ] = None,
         variant: Optional[
-            Union[Var[Literal["solid", "dashed"]], Literal["solid", "dashed"]]
+            Union[
+                reflex.vars.Var[Literal["solid", "dashed"]], Literal["solid", "dashed"]
+            ]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,

reflex/components/chakra/datadisplay/keyboard_key.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/chakra/datadisplay/list.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -18,10 +19,10 @@ class List(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        items: Optional[Union[Var[list], list]] = None,
-        spacing: Optional[Union[Var[str], str]] = None,
-        style_position: Optional[Union[Var[str], str]] = None,
-        style_type: Optional[Union[Var[str], str]] = None,
+        items: Optional[Union[reflex.vars.Var[list], list]] = None,
+        spacing: Optional[Union[reflex.vars.Var[str], str]] = None,
+        style_position: Optional[Union[reflex.vars.Var[str], str]] = None,
+        style_type: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -178,10 +179,10 @@ class OrderedList(List):
     def create(  # type: ignore
         cls,
         *children,
-        items: Optional[Union[Var[list], list]] = None,
-        spacing: Optional[Union[Var[str], str]] = None,
-        style_position: Optional[Union[Var[str], str]] = None,
-        style_type: Optional[Union[Var[str], str]] = None,
+        items: Optional[Union[reflex.vars.Var[list], list]] = None,
+        spacing: Optional[Union[reflex.vars.Var[str], str]] = None,
+        style_position: Optional[Union[reflex.vars.Var[str], str]] = None,
+        style_type: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -262,10 +263,10 @@ class UnorderedList(List):
     def create(  # type: ignore
         cls,
         *children,
-        items: Optional[Union[Var[list], list]] = None,
-        spacing: Optional[Union[Var[str], str]] = None,
-        style_position: Optional[Union[Var[str], str]] = None,
-        style_type: Optional[Union[Var[str], str]] = None,
+        items: Optional[Union[reflex.vars.Var[list], list]] = None,
+        spacing: Optional[Union[reflex.vars.Var[str], str]] = None,
+        style_position: Optional[Union[reflex.vars.Var[str], str]] = None,
+        style_type: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/datadisplay/stat.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -329,7 +330,7 @@ class StatArrow(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        type_: Optional[Union[Var[str], str]] = None,
+        type_: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/datadisplay/table.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -24,10 +25,10 @@ class Table(ChakraComponent):
         headers=None,
         rows=None,
         footers=None,
-        color_scheme: Optional[Union[Var[str], str]] = None,
-        variant: Optional[Union[Var[str], str]] = None,
-        size: Optional[Union[Var[str], str]] = None,
-        placement: Optional[Union[Var[str], str]] = None,
+        color_scheme: Optional[Union[reflex.vars.Var[str], str]] = None,
+        variant: Optional[Union[reflex.vars.Var[str], str]] = None,
+        size: Optional[Union[reflex.vars.Var[str], str]] = None,
+        placement: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -436,7 +437,7 @@ class Th(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        is_numeric: Optional[Union[Var[bool], bool]] = None,
+        is_numeric: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -514,7 +515,7 @@ class Td(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        is_numeric: Optional[Union[Var[bool], bool]] = None,
+        is_numeric: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -592,7 +593,7 @@ class TableCaption(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        placement: Optional[Union[Var[str], str]] = None,
+        placement: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/datadisplay/tag.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -332,7 +333,7 @@ class Tag(ChakraComponent):
         close_button: Optional[Component] = None,
         color_scheme: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "gray",
                         "red",
@@ -361,11 +362,11 @@ class Tag(ChakraComponent):
             ]
         ] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg"]], Literal["sm", "md", "lg"]]
+            Union[reflex.vars.Var[Literal["sm", "md", "lg"]], Literal["sm", "md", "lg"]]
         ] = None,
         variant: Optional[
             Union[
-                Var[Literal["solid", "subtle", "outline"]],
+                reflex.vars.Var[Literal["solid", "subtle", "outline"]],
                 Literal["solid", "subtle", "outline"],
             ]
         ] = None,

reflex/components/chakra/disclosure/accordion.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -20,15 +21,15 @@ class Accordion(ChakraComponent):
         *children,
         items=None,
         icon_pos="right",
-        allow_multiple: Optional[Union[Var[bool], bool]] = None,
-        allow_toggle: Optional[Union[Var[bool], bool]] = None,
+        allow_multiple: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        allow_toggle: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         default_index: Optional[
-            Union[Var[Optional[List[int]]], Optional[List[int]]]
+            Union[reflex.vars.Var[Optional[List[int]]], List[int]]
         ] = None,
         index: Optional[
-            Union[Var[Union[List[int], int]], Union[List[int], int]]
+            Union[reflex.vars.Var[Union[List[int], int]], int, List[int]]
         ] = None,
-        reduce_motion: Optional[Union[Var[bool], bool]] = None,
+        reduce_motion: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -112,9 +113,9 @@ class AccordionItem(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        id_: Optional[Union[Var[str], str]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_focusable: Optional[Union[Var[bool], bool]] = None,
+        id_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_focusable: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/disclosure/tabs.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -26,19 +27,19 @@ class Tabs(ChakraComponent):
         items: Optional[List[Tuple[str, str]]] = None,
         align: Optional[
             Union[
-                Var[Literal["center", "end", "start"]],
+                reflex.vars.Var[Literal["center", "end", "start"]],
                 Literal["center", "end", "start"],
             ]
         ] = None,
-        default_index: Optional[Union[Var[int], int]] = None,
-        id_: Optional[Union[Var[str], str]] = None,
-        is_fitted: Optional[Union[Var[bool], bool]] = None,
-        is_lazy: Optional[Union[Var[bool], bool]] = None,
-        is_manual: Optional[Union[Var[bool], bool]] = None,
-        orientation: Optional[Union[Var[str], str]] = None,
+        default_index: Optional[Union[reflex.vars.Var[int], int]] = None,
+        id_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_fitted: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_lazy: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_manual: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        orientation: Optional[Union[reflex.vars.Var[str], str]] = None,
         variant: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "line",
                         "enclosed",
@@ -60,7 +61,7 @@ class Tabs(ChakraComponent):
         ] = None,
         color_scheme: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "none",
                         "gray",
@@ -106,7 +107,7 @@ class Tabs(ChakraComponent):
                 ],
             ]
         ] = None,
-        index: Optional[Union[Var[int], int]] = None,
+        index: Optional[Union[reflex.vars.Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -194,10 +195,10 @@ class Tab(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_selected: Optional[Union[Var[bool], bool]] = None,
-        id_: Optional[Union[Var[str], str]] = None,
-        panel_id: Optional[Union[Var[str], str]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_selected: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        id_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        panel_id: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/disclosure/transition.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,8 +18,8 @@ class Transition(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        in_: Optional[Union[Var[bool], bool]] = None,
-        unmount_on_exit: Optional[Union[Var[bool], bool]] = None,
+        in_: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        unmount_on_exit: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -97,8 +98,8 @@ class Fade(Transition):
     def create(  # type: ignore
         cls,
         *children,
-        in_: Optional[Union[Var[bool], bool]] = None,
-        unmount_on_exit: Optional[Union[Var[bool], bool]] = None,
+        in_: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        unmount_on_exit: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -177,10 +178,10 @@ class ScaleFade(Transition):
     def create(  # type: ignore
         cls,
         *children,
-        initial_scale: Optional[Union[Var[float], float]] = None,
-        reverse: Optional[Union[Var[bool], bool]] = None,
-        in_: Optional[Union[Var[bool], bool]] = None,
-        unmount_on_exit: Optional[Union[Var[bool], bool]] = None,
+        initial_scale: Optional[Union[reflex.vars.Var[float], float]] = None,
+        reverse: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        in_: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        unmount_on_exit: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -261,9 +262,9 @@ class Slide(Transition):
     def create(  # type: ignore
         cls,
         *children,
-        direction: Optional[Union[Var[str], str]] = None,
-        in_: Optional[Union[Var[bool], bool]] = None,
-        unmount_on_exit: Optional[Union[Var[bool], bool]] = None,
+        direction: Optional[Union[reflex.vars.Var[str], str]] = None,
+        in_: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        unmount_on_exit: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -343,11 +344,11 @@ class SlideFade(Transition):
     def create(  # type: ignore
         cls,
         *children,
-        offsetX: Optional[Union[Var[Union[int, str]], Union[int, str]]] = None,
-        offsetY: Optional[Union[Var[Union[int, str]], Union[int, str]]] = None,
-        reverse: Optional[Union[Var[bool], bool]] = None,
-        in_: Optional[Union[Var[bool], bool]] = None,
-        unmount_on_exit: Optional[Union[Var[bool], bool]] = None,
+        offsetX: Optional[Union[reflex.vars.Var[Union[int, str]], str, int]] = None,
+        offsetY: Optional[Union[reflex.vars.Var[Union[int, str]], str, int]] = None,
+        reverse: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        in_: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        unmount_on_exit: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -429,11 +430,13 @@ class Collapse(Transition):
     def create(  # type: ignore
         cls,
         *children,
-        animateOpacity: Optional[Union[Var[bool], bool]] = None,
-        endingHeight: Optional[Union[Var[str], str]] = None,
-        startingHeight: Optional[Union[Var[Union[int, str]], Union[int, str]]] = None,
-        in_: Optional[Union[Var[bool], bool]] = None,
-        unmount_on_exit: Optional[Union[Var[bool], bool]] = None,
+        animateOpacity: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        endingHeight: Optional[Union[reflex.vars.Var[str], str]] = None,
+        startingHeight: Optional[
+            Union[reflex.vars.Var[Union[int, str]], str, int]
+        ] = None,
+        in_: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        unmount_on_exit: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/disclosure/visuallyhidden.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/chakra/feedback/alert.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -22,13 +23,15 @@ class Alert(ChakraComponent):
         desc=None,
         status: Optional[
             Union[
-                Var[Literal["success", "info", "warning", "error"]],
+                reflex.vars.Var[Literal["success", "info", "warning", "error"]],
                 Literal["success", "info", "warning", "error"],
             ]
         ] = None,
         variant: Optional[
             Union[
-                Var[Literal["subtle", "left-accent", "top-accent", "solid"]],
+                reflex.vars.Var[
+                    Literal["subtle", "left-accent", "top-accent", "solid"]
+                ],
                 Literal["subtle", "left-accent", "top-accent", "solid"],
             ]
         ] = None,

reflex/components/chakra/feedback/circularprogress.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -19,16 +20,16 @@ class CircularProgress(ChakraComponent):
         cls,
         *children,
         label=None,
-        cap_is_round: Optional[Union[Var[bool], bool]] = None,
-        is_indeterminate: Optional[Union[Var[bool], bool]] = None,
-        max_: Optional[Union[Var[int], int]] = None,
-        min_: Optional[Union[Var[int], int]] = None,
-        thickness: Optional[Union[Var[Union[int, str]], Union[int, str]]] = None,
-        track_color: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[int], int]] = None,
-        value_text: Optional[Union[Var[str], str]] = None,
-        color: Optional[Union[Var[str], str]] = None,
-        size: Optional[Union[Var[str], str]] = None,
+        cap_is_round: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_indeterminate: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        max_: Optional[Union[reflex.vars.Var[int], int]] = None,
+        min_: Optional[Union[reflex.vars.Var[int], int]] = None,
+        thickness: Optional[Union[reflex.vars.Var[Union[int, str]], str, int]] = None,
+        track_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[int], int]] = None,
+        value_text: Optional[Union[reflex.vars.Var[str], str]] = None,
+        color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        size: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/feedback/progress.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,13 +18,13 @@ class Progress(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        has_stripe: Optional[Union[Var[bool], bool]] = None,
-        is_animated: Optional[Union[Var[bool], bool]] = None,
-        is_indeterminate: Optional[Union[Var[bool], bool]] = None,
-        max_: Optional[Union[Var[int], int]] = None,
-        min_: Optional[Union[Var[int], int]] = None,
-        value: Optional[Union[Var[Union[float, int]], Union[float, int]]] = None,
-        color_scheme: Optional[Union[Var[str], str]] = None,
+        has_stripe: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_animated: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_indeterminate: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        max_: Optional[Union[reflex.vars.Var[int], int]] = None,
+        min_: Optional[Union[reflex.vars.Var[int], int]] = None,
+        value: Optional[Union[reflex.vars.Var[Union[float, int]], int, float]] = None,
+        color_scheme: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/feedback/skeleton.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,11 +17,11 @@ class Skeleton(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        end_color: Optional[Union[Var[str], str]] = None,
-        fade_duration: Optional[Union[Var[float], float]] = None,
-        is_loaded: Optional[Union[Var[bool], bool]] = None,
-        speed: Optional[Union[Var[float], float]] = None,
-        start_color: Optional[Union[Var[str], str]] = None,
+        end_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        fade_duration: Optional[Union[reflex.vars.Var[float], float]] = None,
+        is_loaded: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        speed: Optional[Union[reflex.vars.Var[float], float]] = None,
+        start_color: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -102,11 +103,11 @@ class SkeletonCircle(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        end_color: Optional[Union[Var[str], str]] = None,
-        fade_duration: Optional[Union[Var[float], float]] = None,
-        is_loaded: Optional[Union[Var[bool], bool]] = None,
-        speed: Optional[Union[Var[float], float]] = None,
-        start_color: Optional[Union[Var[str], str]] = None,
+        end_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        fade_duration: Optional[Union[reflex.vars.Var[float], float]] = None,
+        is_loaded: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        speed: Optional[Union[reflex.vars.Var[float], float]] = None,
+        start_color: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -188,12 +189,12 @@ class SkeletonText(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        end_color: Optional[Union[Var[str], str]] = None,
-        fade_duration: Optional[Union[Var[float], float]] = None,
-        is_loaded: Optional[Union[Var[bool], bool]] = None,
-        speed: Optional[Union[Var[float], float]] = None,
-        start_color: Optional[Union[Var[str], str]] = None,
-        no_of_lines: Optional[Union[Var[int], int]] = None,
+        end_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        fade_duration: Optional[Union[reflex.vars.Var[float], float]] = None,
+        is_loaded: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        speed: Optional[Union[reflex.vars.Var[float], float]] = None,
+        start_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        no_of_lines: Optional[Union[reflex.vars.Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/feedback/spinner.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,13 +17,13 @@ class Spinner(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        empty_color: Optional[Union[Var[str], str]] = None,
-        label: Optional[Union[Var[str], str]] = None,
-        speed: Optional[Union[Var[str], str]] = None,
-        thickness: Optional[Union[Var[int], int]] = None,
+        empty_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        label: Optional[Union[reflex.vars.Var[str], str]] = None,
+        speed: Optional[Union[reflex.vars.Var[str], str]] = None,
+        thickness: Optional[Union[reflex.vars.Var[int], int]] = None,
         size: Optional[
             Union[
-                Var[Literal["sm", "md", "lg", "xs", "xl"]],
+                reflex.vars.Var[Literal["sm", "md", "lg", "xs", "xl"]],
                 Literal["sm", "md", "lg", "xs", "xl"],
             ]
         ] = None,

reflex/components/chakra/forms/button.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -23,24 +24,29 @@ class Button(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        icon_spacing: Optional[Union[Var[int], int]] = None,
-        is_active: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_full_width: Optional[Union[Var[bool], bool]] = None,
-        is_loading: Optional[Union[Var[bool], bool]] = None,
-        loading_text: Optional[Union[Var[str], str]] = None,
+        icon_spacing: Optional[Union[reflex.vars.Var[int], int]] = None,
+        is_active: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_full_width: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_loading: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        loading_text: Optional[Union[reflex.vars.Var[str], str]] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg", "xs"]], Literal["sm", "md", "lg", "xs"]]
+            Union[
+                reflex.vars.Var[Literal["sm", "md", "lg", "xs"]],
+                Literal["sm", "md", "lg", "xs"],
+            ]
         ] = None,
         variant: Optional[
             Union[
-                Var[Literal["ghost", "outline", "solid", "link", "unstyled"]],
+                reflex.vars.Var[
+                    Literal["ghost", "outline", "solid", "link", "unstyled"]
+                ],
                 Literal["ghost", "outline", "solid", "link", "unstyled"],
             ]
         ] = None,
         color_scheme: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "none",
                         "gray",
@@ -87,10 +93,10 @@ class Button(ChakraComponent):
             ]
         ] = None,
         spinner_placement: Optional[
-            Union[Var[Literal["start", "end"]], Literal["start", "end"]]
+            Union[reflex.vars.Var[Literal["start", "end"]], Literal["start", "end"]]
         ] = None,
-        type_: Optional[Union[Var[str], str]] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        type_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -179,15 +185,20 @@ class ButtonGroup(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        is_attached: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        spacing: Optional[Union[Var[int], int]] = None,
+        is_attached: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        spacing: Optional[Union[reflex.vars.Var[int], int]] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg", "xs"]], Literal["sm", "md", "lg", "xs"]]
+            Union[
+                reflex.vars.Var[Literal["sm", "md", "lg", "xs"]],
+                Literal["sm", "md", "lg", "xs"],
+            ]
         ] = None,
         variant: Optional[
             Union[
-                Var[Literal["ghost", "outline", "solid", "link", "unstyled"]],
+                reflex.vars.Var[
+                    Literal["ghost", "outline", "solid", "link", "unstyled"]
+                ],
                 Literal["ghost", "outline", "solid", "link", "unstyled"],
             ]
         ] = None,

reflex/components/chakra/forms/checkbox.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -19,7 +20,7 @@ class Checkbox(ChakraComponent):
         *children,
         color_scheme: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "none",
                         "gray",
@@ -66,18 +67,18 @@ class Checkbox(ChakraComponent):
             ]
         ] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg"]], Literal["sm", "md", "lg"]]
-        ] = None,
-        is_checked: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_focusable: Optional[Union[Var[bool], bool]] = None,
-        is_indeterminate: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = None,
-        spacing: Optional[Union[Var[str], str]] = None,
+            Union[reflex.vars.Var[Literal["sm", "md", "lg"]], Literal["sm", "md", "lg"]]
+        ] = None,
+        is_checked: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_focusable: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_indeterminate: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        spacing: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -169,10 +170,10 @@ class CheckboxGroup(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        value: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_native: Optional[Union[Var[bool], bool]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        default_value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_native: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/colormodeswitch.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -24,7 +25,7 @@ class ColorModeIcon(Cond):
     def create(  # type: ignore
         cls,
         *children,
-        cond: Optional[Union[Var[Any], Any]] = None,
+        cond: Optional[Union[reflex.vars.Var[Any], Any]] = None,
         comp1: Optional[BaseComponent] = None,
         comp2: Optional[BaseComponent] = None,
         style: Optional[Style] = None,
@@ -97,19 +98,19 @@ class ColorModeSwitch(Switch):
     def create(  # type: ignore
         cls,
         *children,
-        is_checked: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_focusable: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = None,
-        spacing: Optional[Union[Var[str], str]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
+        is_checked: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_focusable: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        spacing: Optional[Union[reflex.vars.Var[str], str]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
         color_scheme: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "none",
                         "gray",
@@ -245,24 +246,29 @@ class ColorModeButton(Button):
     def create(  # type: ignore
         cls,
         *children,
-        icon_spacing: Optional[Union[Var[int], int]] = None,
-        is_active: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_full_width: Optional[Union[Var[bool], bool]] = None,
-        is_loading: Optional[Union[Var[bool], bool]] = None,
-        loading_text: Optional[Union[Var[str], str]] = None,
+        icon_spacing: Optional[Union[reflex.vars.Var[int], int]] = None,
+        is_active: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_full_width: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_loading: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        loading_text: Optional[Union[reflex.vars.Var[str], str]] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg", "xs"]], Literal["sm", "md", "lg", "xs"]]
+            Union[
+                reflex.vars.Var[Literal["sm", "md", "lg", "xs"]],
+                Literal["sm", "md", "lg", "xs"],
+            ]
         ] = None,
         variant: Optional[
             Union[
-                Var[Literal["ghost", "outline", "solid", "link", "unstyled"]],
+                reflex.vars.Var[
+                    Literal["ghost", "outline", "solid", "link", "unstyled"]
+                ],
                 Literal["ghost", "outline", "solid", "link", "unstyled"],
             ]
         ] = None,
         color_scheme: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "none",
                         "gray",
@@ -309,10 +315,10 @@ class ColorModeButton(Button):
             ]
         ] = None,
         spinner_placement: Optional[
-            Union[Var[Literal["start", "end"]], Literal["start", "end"]]
+            Union[reflex.vars.Var[Literal["start", "end"]], Literal["start", "end"]]
         ] = None,
-        type_: Optional[Union[Var[str], str]] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        type_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/date_picker.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,26 +17,29 @@ class DatePicker(Input):
     def create(  # type: ignore
         cls,
         *children,
-        type_: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
-        error_border_color: Optional[Union[Var[str], str]] = None,
-        focus_border_color: Optional[Union[Var[str], str]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
+        type_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        default_value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
+        error_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        focus_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         variant: Optional[
             Union[
-                Var[Literal["outline", "filled", "flushed", "unstyled"]],
+                reflex.vars.Var[Literal["outline", "filled", "flushed", "unstyled"]],
                 Literal["outline", "filled", "flushed", "unstyled"],
             ]
         ] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg", "xs"]], Literal["sm", "md", "lg", "xs"]]
+            Union[
+                reflex.vars.Var[Literal["sm", "md", "lg", "xs"]],
+                Literal["sm", "md", "lg", "xs"],
+            ]
         ] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/date_time_picker.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,26 +17,29 @@ class DateTimePicker(Input):
     def create(  # type: ignore
         cls,
         *children,
-        type_: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
-        error_border_color: Optional[Union[Var[str], str]] = None,
-        focus_border_color: Optional[Union[Var[str], str]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
+        type_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        default_value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
+        error_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        focus_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         variant: Optional[
             Union[
-                Var[Literal["outline", "filled", "flushed", "unstyled"]],
+                reflex.vars.Var[Literal["outline", "filled", "flushed", "unstyled"]],
                 Literal["outline", "filled", "flushed", "unstyled"],
             ]
         ] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg", "xs"]], Literal["sm", "md", "lg", "xs"]]
+            Union[
+                reflex.vars.Var[Literal["sm", "md", "lg", "xs"]],
+                Literal["sm", "md", "lg", "xs"],
+            ]
         ] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/editable.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,14 +18,14 @@ class Editable(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_preview_focusable: Optional[Union[Var[bool], bool]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
-        select_all_on_focus: Optional[Union[Var[bool], bool]] = None,
-        start_with_edit_view: Optional[Union[Var[bool], bool]] = None,
-        submit_on_blur: Optional[Union[Var[bool], bool]] = None,
-        value: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_preview_focusable: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
+        select_all_on_focus: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        start_with_edit_view: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        submit_on_blur: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        default_value: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/email.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,26 +17,29 @@ class Email(Input):
     def create(  # type: ignore
         cls,
         *children,
-        type_: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
-        error_border_color: Optional[Union[Var[str], str]] = None,
-        focus_border_color: Optional[Union[Var[str], str]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
+        type_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        default_value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
+        error_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        focus_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         variant: Optional[
             Union[
-                Var[Literal["outline", "filled", "flushed", "unstyled"]],
+                reflex.vars.Var[Literal["outline", "filled", "flushed", "unstyled"]],
                 Literal["outline", "filled", "flushed", "unstyled"],
             ]
         ] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg", "xs"]], Literal["sm", "md", "lg", "xs"]]
+            Union[
+                reflex.vars.Var[Literal["sm", "md", "lg", "xs"]],
+                Literal["sm", "md", "lg", "xs"],
+            ]
         ] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/form.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -18,73 +19,83 @@ class Form(ChakraComponent, HTMLForm):
     def create(  # type: ignore
         cls,
         *children,
-        as_: Optional[Union[Var[str], str]] = None,
+        as_: Optional[Union[reflex.vars.Var[str], str]] = None,
         accept: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         accept_charset: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         action: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_complete: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enc_type: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         method: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        name: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        name: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         no_validate: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         target: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        reset_on_submit: Optional[Union[Var[bool], bool]] = None,
-        handle_submit_unique_name: Optional[Union[Var[str], str]] = None,
+        reset_on_submit: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        handle_submit_unique_name: Optional[Union[reflex.vars.Var[str], str]] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -197,10 +208,10 @@ class FormControl(ChakraComponent):
         input=None,
         help_text=None,
         error_message=None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -364,7 +375,7 @@ class FormLabel(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        html_for: Optional[Union[Var[str], str]] = None,
+        html_for: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/iconbutton.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -18,16 +19,16 @@ class IconButton(Text):
     def create(  # type: ignore
         cls,
         *children,
-        type: Optional[Union[Var[str], str]] = None,
-        aria_label: Optional[Union[Var[str], str]] = None,
+        type: Optional[Union[reflex.vars.Var[str], str]] = None,
+        aria_label: Optional[Union[reflex.vars.Var[str], str]] = None,
         icon: Optional[Component] = None,
-        is_active: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_loading: Optional[Union[Var[bool], bool]] = None,
-        is_round: Optional[Union[Var[bool], bool]] = None,
-        spinner: Optional[Union[Var[str], str]] = None,
-        as_: Optional[Union[Var[str], str]] = None,
-        no_of_lines: Optional[Union[Var[int], int]] = None,
+        is_active: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_loading: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_round: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        spinner: Optional[Union[reflex.vars.Var[str], str]] = None,
+        as_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        no_of_lines: Optional[Union[reflex.vars.Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/input.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -27,12 +28,12 @@ class Input(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        value: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        default_value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
         type_: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "button",
                         "checkbox",
@@ -84,22 +85,25 @@ class Input(ChakraComponent):
                 ],
             ]
         ] = None,
-        error_border_color: Optional[Union[Var[str], str]] = None,
-        focus_border_color: Optional[Union[Var[str], str]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
+        error_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        focus_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         variant: Optional[
             Union[
-                Var[Literal["outline", "filled", "flushed", "unstyled"]],
+                reflex.vars.Var[Literal["outline", "filled", "flushed", "unstyled"]],
                 Literal["outline", "filled", "flushed", "unstyled"],
             ]
         ] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg", "xs"]], Literal["sm", "md", "lg", "xs"]]
+            Union[
+                reflex.vars.Var[Literal["sm", "md", "lg", "xs"]],
+                Literal["sm", "md", "lg", "xs"],
+            ]
         ] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/numberinput.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -23,31 +24,34 @@ class NumberInput(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        value: Optional[Union[Var[Number], Number]] = None,
-        allow_mouse_wheel: Optional[Union[Var[bool], bool]] = None,
-        clamped_value_on_blur: Optional[Union[Var[bool], bool]] = None,
-        default_value: Optional[Union[Var[Number], Number]] = None,
-        error_border_color: Optional[Union[Var[str], str]] = None,
-        focus_border_color: Optional[Union[Var[str], str]] = None,
-        focus_input_on_change: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
-        is_valid_character: Optional[Union[Var[str], str]] = None,
-        keep_within_range: Optional[Union[Var[bool], bool]] = None,
-        max_: Optional[Union[Var[Number], Number]] = None,
-        min_: Optional[Union[Var[Number], Number]] = None,
+        value: Optional[Union[reflex.vars.Var[Number], Number]] = None,
+        allow_mouse_wheel: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        clamped_value_on_blur: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        default_value: Optional[Union[reflex.vars.Var[Number], Number]] = None,
+        error_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        focus_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        focus_input_on_change: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_valid_character: Optional[Union[reflex.vars.Var[str], str]] = None,
+        keep_within_range: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        max_: Optional[Union[reflex.vars.Var[Number], Number]] = None,
+        min_: Optional[Union[reflex.vars.Var[Number], Number]] = None,
         variant: Optional[
             Union[
-                Var[Literal["outline", "filled", "flushed", "unstyled"]],
+                reflex.vars.Var[Literal["outline", "filled", "flushed", "unstyled"]],
                 Literal["outline", "filled", "flushed", "unstyled"],
             ]
         ] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg", "xs"]], Literal["sm", "md", "lg", "xs"]]
+            Union[
+                reflex.vars.Var[Literal["sm", "md", "lg", "xs"]],
+                Literal["sm", "md", "lg", "xs"],
+            ]
         ] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/password.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,26 +17,29 @@ class Password(Input):
     def create(  # type: ignore
         cls,
         *children,
-        type_: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
-        error_border_color: Optional[Union[Var[str], str]] = None,
-        focus_border_color: Optional[Union[Var[str], str]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
+        type_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        default_value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
+        error_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        focus_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         variant: Optional[
             Union[
-                Var[Literal["outline", "filled", "flushed", "unstyled"]],
+                reflex.vars.Var[Literal["outline", "filled", "flushed", "unstyled"]],
                 Literal["outline", "filled", "flushed", "unstyled"],
             ]
         ] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg", "xs"]], Literal["sm", "md", "lg", "xs"]]
+            Union[
+                reflex.vars.Var[Literal["sm", "md", "lg", "xs"]],
+                Literal["sm", "md", "lg", "xs"],
+            ]
         ] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/pininput.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -23,26 +24,26 @@ class PinInput(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        value: Optional[Union[Var[str], str]] = None,
-        auto_focus: Optional[Union[Var[bool], bool]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
-        error_border_color: Optional[Union[Var[str], str]] = None,
-        focus_border_color: Optional[Union[Var[str], str]] = None,
-        id_: Optional[Union[Var[str], str]] = None,
-        length: Optional[Union[Var[int], int]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        manage_focus: Optional[Union[Var[bool], bool]] = None,
-        mask: Optional[Union[Var[bool], bool]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
-        type_: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        auto_focus: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        default_value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        error_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        focus_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        id_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        length: Optional[Union[reflex.vars.Var[int], int]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        manage_focus: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        mask: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
+        type_: Optional[Union[reflex.vars.Var[str], str]] = None,
         variant: Optional[
             Union[
-                Var[Literal["outline", "filled", "flushed", "unstyled"]],
+                reflex.vars.Var[Literal["outline", "filled", "flushed", "unstyled"]],
                 Literal["outline", "filled", "flushed", "unstyled"],
             ]
         ] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -146,8 +147,8 @@ class PinInputField(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        index: Optional[Union[Var[int], int]] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        index: Optional[Union[reflex.vars.Var[int], int]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/radio.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -22,9 +23,9 @@ class RadioGroup(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        value: Optional[Union[Var[Any], Any]] = None,
-        default_value: Optional[Union[Var[Any], Any]] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[Any], Any]] = None,
+        default_value: Optional[Union[reflex.vars.Var[Any], Any]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -107,17 +108,17 @@ class Radio(Text):
     def create(  # type: ignore
         cls,
         *children,
-        value: Optional[Union[Var[Any], Any]] = None,
-        default_value: Optional[Union[Var[Any], Any]] = None,
-        color_scheme: Optional[Union[Var[str], str]] = None,
-        default_checked: Optional[Union[Var[bool], bool]] = None,
-        is_checked: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
-        as_: Optional[Union[Var[str], str]] = None,
-        no_of_lines: Optional[Union[Var[int], int]] = None,
+        value: Optional[Union[reflex.vars.Var[Any], Any]] = None,
+        default_value: Optional[Union[reflex.vars.Var[Any], Any]] = None,
+        color_scheme: Optional[Union[reflex.vars.Var[str], str]] = None,
+        default_checked: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_checked: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        as_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        no_of_lines: Optional[Union[reflex.vars.Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/rangeslider.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -21,19 +22,19 @@ class RangeSlider(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        value: Optional[Union[Var[List[int]], List[int]]] = None,
-        default_value: Optional[Union[Var[List[int]], List[int]]] = None,
+        value: Optional[Union[reflex.vars.Var[List[int]], List[int]]] = None,
+        default_value: Optional[Union[reflex.vars.Var[List[int]], List[int]]] = None,
         direction: Optional[
-            Union[Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]
-        ] = None,
-        focus_thumb_on_change: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_reversed: Optional[Union[Var[bool], bool]] = None,
-        min_: Optional[Union[Var[int], int]] = None,
-        max_: Optional[Union[Var[int], int]] = None,
-        min_steps_between_thumbs: Optional[Union[Var[int], int]] = None,
-        name: Optional[Union[Var[str], str]] = None,
+            Union[reflex.vars.Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]
+        ] = None,
+        focus_thumb_on_change: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_reversed: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        min_: Optional[Union[reflex.vars.Var[int], int]] = None,
+        max_: Optional[Union[reflex.vars.Var[int], int]] = None,
+        min_steps_between_thumbs: Optional[Union[reflex.vars.Var[int], int]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -285,7 +286,7 @@ class RangeSliderThumb(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        index: Optional[Union[Var[int], int]] = None,
+        index: Optional[Union[reflex.vars.Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/select.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -22,22 +23,22 @@ class Select(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        value: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
-        error_border_color: Optional[Union[Var[str], str]] = None,
-        focus_border_color: Optional[Union[Var[str], str]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        default_value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
+        error_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        focus_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         variant: Optional[
             Union[
-                Var[Literal["outline", "filled", "flushed", "unstyled"]],
+                reflex.vars.Var[Literal["outline", "filled", "flushed", "unstyled"]],
                 Literal["outline", "filled", "flushed", "unstyled"],
             ]
         ] = None,
-        size: Optional[Union[Var[str], str]] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        size: Optional[Union[reflex.vars.Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -131,9 +132,9 @@ class Option(Text):
     def create(  # type: ignore
         cls,
         *children,
-        value: Optional[Union[Var[Any], Any]] = None,
-        as_: Optional[Union[Var[str], str]] = None,
-        no_of_lines: Optional[Union[Var[int], int]] = None,
+        value: Optional[Union[reflex.vars.Var[Any], Any]] = None,
+        as_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        no_of_lines: Optional[Union[reflex.vars.Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/slider.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -21,31 +22,31 @@ class Slider(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        value: Optional[Union[Var[int], int]] = None,
-        color_scheme: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[int], int]] = None,
+        value: Optional[Union[reflex.vars.Var[int], int]] = None,
+        color_scheme: Optional[Union[reflex.vars.Var[str], str]] = None,
+        default_value: Optional[Union[reflex.vars.Var[int], int]] = None,
         direction: Optional[
-            Union[Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]
-        ] = None,
-        focus_thumb_on_change: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_reversed: Optional[Union[Var[bool], bool]] = None,
-        min_: Optional[Union[Var[int], int]] = None,
-        max_: Optional[Union[Var[int], int]] = None,
-        step: Optional[Union[Var[int], int]] = None,
-        min_steps_between_thumbs: Optional[Union[Var[int], int]] = None,
+            Union[reflex.vars.Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]
+        ] = None,
+        focus_thumb_on_change: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_reversed: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        min_: Optional[Union[reflex.vars.Var[int], int]] = None,
+        max_: Optional[Union[reflex.vars.Var[int], int]] = None,
+        step: Optional[Union[reflex.vars.Var[int], int]] = None,
+        min_steps_between_thumbs: Optional[Union[reflex.vars.Var[int], int]] = None,
         orientation: Optional[
             Union[
-                Var[Literal["horizontal", "vertical"]],
+                reflex.vars.Var[Literal["horizontal", "vertical"]],
                 Literal["horizontal", "vertical"],
             ]
         ] = None,
-        min_h: Optional[Union[Var[str], str]] = None,
-        min_w: Optional[Union[Var[str], str]] = None,
-        max_h: Optional[Union[Var[str], str]] = None,
-        max_w: Optional[Union[Var[str], str]] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        min_h: Optional[Union[reflex.vars.Var[str], str]] = None,
+        min_w: Optional[Union[reflex.vars.Var[str], str]] = None,
+        max_h: Optional[Union[reflex.vars.Var[str], str]] = None,
+        max_w: Optional[Union[reflex.vars.Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -303,7 +304,7 @@ class SliderThumb(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        box_size: Optional[Union[Var[str], str]] = None,
+        box_size: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/switch.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,19 +18,19 @@ class Switch(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        is_checked: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_focusable: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = None,
-        spacing: Optional[Union[Var[str], str]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
+        is_checked: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_focusable: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        spacing: Optional[Union[reflex.vars.Var[str], str]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
         color_scheme: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "none",
                         "gray",

reflex/components/chakra/forms/textarea.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -19,22 +20,22 @@ class TextArea(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        value: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
-        error_border_color: Optional[Union[Var[str], str]] = None,
-        focus_border_color: Optional[Union[Var[str], str]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        default_value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
+        error_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        focus_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         variant: Optional[
             Union[
-                Var[Literal["outline", "filled", "flushed", "unstyled"]],
+                reflex.vars.Var[Literal["outline", "filled", "flushed", "unstyled"]],
                 Literal["outline", "filled", "flushed", "unstyled"],
             ]
         ] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/forms/time_picker.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,26 +17,29 @@ class TimePicker(Input):
     def create(  # type: ignore
         cls,
         *children,
-        type_: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
-        error_border_color: Optional[Union[Var[str], str]] = None,
-        focus_border_color: Optional[Union[Var[str], str]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_invalid: Optional[Union[Var[bool], bool]] = None,
-        is_read_only: Optional[Union[Var[bool], bool]] = None,
-        is_required: Optional[Union[Var[bool], bool]] = None,
+        type_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        default_value: Optional[Union[reflex.vars.Var[str], str]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
+        error_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        focus_border_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_invalid: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_read_only: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_required: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         variant: Optional[
             Union[
-                Var[Literal["outline", "filled", "flushed", "unstyled"]],
+                reflex.vars.Var[Literal["outline", "filled", "flushed", "unstyled"]],
                 Literal["outline", "filled", "flushed", "unstyled"],
             ]
         ] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg", "xs"]], Literal["sm", "md", "lg", "xs"]]
+            Union[
+                reflex.vars.Var[Literal["sm", "md", "lg", "xs"]],
+                Literal["sm", "md", "lg", "xs"],
+            ]
         ] = None,
-        name: Optional[Union[Var[str], str]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/layout/aspect_ratio.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,7 +17,7 @@ class AspectRatio(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        ratio: Optional[Union[Var[float], float]] = None,
+        ratio: Optional[Union[reflex.vars.Var[float], float]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/layout/box.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,9 +18,9 @@ class Box(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        element: Optional[Union[Var[str], str]] = None,
-        src: Optional[Union[Var[str], str]] = None,
-        alt: Optional[Union[Var[str], str]] = None,
+        element: Optional[Union[reflex.vars.Var[str], str]] = None,
+        src: Optional[Union[reflex.vars.Var[str], str]] = None,
+        alt: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/layout/card.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -253,12 +254,12 @@ class Card(ChakraComponent):
         *children,
         header: Optional[Component] = None,
         footer: Optional[Component] = None,
-        align: Optional[Union[Var[str], str]] = None,
-        direction: Optional[Union[Var[str], str]] = None,
-        justify: Optional[Union[Var[str], str]] = None,
+        align: Optional[Union[reflex.vars.Var[str], str]] = None,
+        direction: Optional[Union[reflex.vars.Var[str], str]] = None,
+        justify: Optional[Union[reflex.vars.Var[str], str]] = None,
         color_scheme: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "none",
                         "gray",
@@ -305,11 +306,11 @@ class Card(ChakraComponent):
             ]
         ] = None,
         size: Optional[
-            Union[Var[Literal["sm", "md", "lg"]], Literal["sm", "md", "lg"]]
+            Union[reflex.vars.Var[Literal["sm", "md", "lg"]], Literal["sm", "md", "lg"]]
         ] = None,
         variant: Optional[
             Union[
-                Var[Literal["outline", "filled", "elevated", "unstyled"]],
+                reflex.vars.Var[Literal["outline", "filled", "elevated", "unstyled"]],
                 Literal["outline", "filled", "elevated", "unstyled"],
             ]
         ] = None,

reflex/components/chakra/layout/center.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/chakra/layout/container.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,7 +17,7 @@ class Container(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        center_content: Optional[Union[Var[bool], bool]] = None,
+        center_content: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/layout/flex.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,15 +18,17 @@ class Flex(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        align: Optional[Union[Var[str], str]] = None,
-        basis: Optional[Union[Var[str], str]] = None,
+        align: Optional[Union[reflex.vars.Var[str], str]] = None,
+        basis: Optional[Union[reflex.vars.Var[str], str]] = None,
         direction: Optional[
-            Union[Var[Union[List[str], str]], Union[List[str], str]]
+            Union[reflex.vars.Var[Union[List[str], str]], str, List[str]]
         ] = None,
-        grow: Optional[Union[Var[str], str]] = None,
-        justify: Optional[Union[Var[str], str]] = None,
-        wrap: Optional[Union[Var[Union[List[str], str]], Union[List[str], str]]] = None,
-        shrink: Optional[Union[Var[str], str]] = None,
+        grow: Optional[Union[reflex.vars.Var[str], str]] = None,
+        justify: Optional[Union[reflex.vars.Var[str], str]] = None,
+        wrap: Optional[
+            Union[reflex.vars.Var[Union[List[str], str]], str, List[str]]
+        ] = None,
+        shrink: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/layout/grid.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,13 +18,13 @@ class Grid(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        auto_columns: Optional[Union[Var[str], str]] = None,
-        auto_flow: Optional[Union[Var[str], str]] = None,
-        auto_rows: Optional[Union[Var[str], str]] = None,
-        column: Optional[Union[Var[str], str]] = None,
-        row: Optional[Union[Var[str], str]] = None,
-        template_columns: Optional[Union[Var[str], str]] = None,
-        template_rows: Optional[Union[Var[str], str]] = None,
+        auto_columns: Optional[Union[reflex.vars.Var[str], str]] = None,
+        auto_flow: Optional[Union[reflex.vars.Var[str], str]] = None,
+        auto_rows: Optional[Union[reflex.vars.Var[str], str]] = None,
+        column: Optional[Union[reflex.vars.Var[str], str]] = None,
+        row: Optional[Union[reflex.vars.Var[str], str]] = None,
+        template_columns: Optional[Union[reflex.vars.Var[str], str]] = None,
+        template_rows: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -107,13 +108,13 @@ class GridItem(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        area: Optional[Union[Var[str], str]] = None,
-        col_end: Optional[Union[Var[str], str]] = None,
-        col_start: Optional[Union[Var[int], int]] = None,
-        col_span: Optional[Union[Var[int], int]] = None,
-        row_end: Optional[Union[Var[str], str]] = None,
-        row_start: Optional[Union[Var[int], int]] = None,
-        row_span: Optional[Union[Var[int], int]] = None,
+        area: Optional[Union[reflex.vars.Var[str], str]] = None,
+        col_end: Optional[Union[reflex.vars.Var[str], str]] = None,
+        col_start: Optional[Union[reflex.vars.Var[int], int]] = None,
+        col_span: Optional[Union[reflex.vars.Var[int], int]] = None,
+        row_end: Optional[Union[reflex.vars.Var[str], str]] = None,
+        row_start: Optional[Union[reflex.vars.Var[int], int]] = None,
+        row_span: Optional[Union[reflex.vars.Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -197,19 +198,19 @@ class ResponsiveGrid(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        auto_columns: Optional[Union[Var[str], str]] = None,
-        auto_flow: Optional[Union[Var[str], str]] = None,
-        auto_rows: Optional[Union[Var[str], str]] = None,
-        column: Optional[Union[Var[str], str]] = None,
-        row: Optional[Union[Var[str], str]] = None,
-        columns: Optional[Union[Var[List[int]], List[int]]] = None,
-        min_child_width: Optional[Union[Var[str], str]] = None,
-        spacing: Optional[Union[Var[str], str]] = None,
-        spacing_x: Optional[Union[Var[str], str]] = None,
-        spacing_y: Optional[Union[Var[str], str]] = None,
-        template_areas: Optional[Union[Var[str], str]] = None,
-        template_columns: Optional[Union[Var[str], str]] = None,
-        template_rows: Optional[Union[Var[str], str]] = None,
+        auto_columns: Optional[Union[reflex.vars.Var[str], str]] = None,
+        auto_flow: Optional[Union[reflex.vars.Var[str], str]] = None,
+        auto_rows: Optional[Union[reflex.vars.Var[str], str]] = None,
+        column: Optional[Union[reflex.vars.Var[str], str]] = None,
+        row: Optional[Union[reflex.vars.Var[str], str]] = None,
+        columns: Optional[Union[reflex.vars.Var[List[int]], List[int]]] = None,
+        min_child_width: Optional[Union[reflex.vars.Var[str], str]] = None,
+        spacing: Optional[Union[reflex.vars.Var[str], str]] = None,
+        spacing_x: Optional[Union[reflex.vars.Var[str], str]] = None,
+        spacing_y: Optional[Union[reflex.vars.Var[str], str]] = None,
+        template_areas: Optional[Union[reflex.vars.Var[str], str]] = None,
+        template_columns: Optional[Union[reflex.vars.Var[str], str]] = None,
+        template_rows: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/layout/spacer.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/chakra/layout/stack.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,19 +18,20 @@ class Stack(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        align_items: Optional[Union[Var[str], str]] = None,
+        align_items: Optional[Union[reflex.vars.Var[str], str]] = None,
         direction: Optional[
             Union[
-                Var[Union[List[str], Literal["row", "column"]]],
-                Union[List[str], Literal["row", "column"]],
+                reflex.vars.Var[Union[List[str], Literal["row", "column"]]],
+                Literal["row", "column"],
+                List[str],
             ]
         ] = None,
-        is_inline: Optional[Union[Var[bool], bool]] = None,
-        justify_content: Optional[Union[Var[str], str]] = None,
-        should_wrap_children: Optional[Union[Var[bool], bool]] = None,
-        spacing: Optional[Union[Var[str], str]] = None,
-        wrap: Optional[Union[Var[str], str]] = None,
-        justify: Optional[Union[Var[str], str]] = None,
+        is_inline: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        justify_content: Optional[Union[reflex.vars.Var[str], str]] = None,
+        should_wrap_children: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        spacing: Optional[Union[reflex.vars.Var[str], str]] = None,
+        wrap: Optional[Union[reflex.vars.Var[str], str]] = None,
+        justify: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -114,19 +116,20 @@ class Hstack(Stack):
     def create(  # type: ignore
         cls,
         *children,
-        align_items: Optional[Union[Var[str], str]] = None,
+        align_items: Optional[Union[reflex.vars.Var[str], str]] = None,
         direction: Optional[
             Union[
-                Var[Union[List[str], Literal["row", "column"]]],
-                Union[List[str], Literal["row", "column"]],
+                reflex.vars.Var[Union[List[str], Literal["row", "column"]]],
+                Literal["row", "column"],
+                List[str],
             ]
         ] = None,
-        is_inline: Optional[Union[Var[bool], bool]] = None,
-        justify_content: Optional[Union[Var[str], str]] = None,
-        should_wrap_children: Optional[Union[Var[bool], bool]] = None,
-        spacing: Optional[Union[Var[str], str]] = None,
-        wrap: Optional[Union[Var[str], str]] = None,
-        justify: Optional[Union[Var[str], str]] = None,
+        is_inline: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        justify_content: Optional[Union[reflex.vars.Var[str], str]] = None,
+        should_wrap_children: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        spacing: Optional[Union[reflex.vars.Var[str], str]] = None,
+        wrap: Optional[Union[reflex.vars.Var[str], str]] = None,
+        justify: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -211,19 +214,20 @@ class Vstack(Stack):
     def create(  # type: ignore
         cls,
         *children,
-        align_items: Optional[Union[Var[str], str]] = None,
+        align_items: Optional[Union[reflex.vars.Var[str], str]] = None,
         direction: Optional[
             Union[
-                Var[Union[List[str], Literal["row", "column"]]],
-                Union[List[str], Literal["row", "column"]],
+                reflex.vars.Var[Union[List[str], Literal["row", "column"]]],
+                Literal["row", "column"],
+                List[str],
             ]
         ] = None,
-        is_inline: Optional[Union[Var[bool], bool]] = None,
-        justify_content: Optional[Union[Var[str], str]] = None,
-        should_wrap_children: Optional[Union[Var[bool], bool]] = None,
-        spacing: Optional[Union[Var[str], str]] = None,
-        wrap: Optional[Union[Var[str], str]] = None,
-        justify: Optional[Union[Var[str], str]] = None,
+        is_inline: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        justify_content: Optional[Union[reflex.vars.Var[str], str]] = None,
+        should_wrap_children: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        spacing: Optional[Union[reflex.vars.Var[str], str]] = None,
+        wrap: Optional[Union[reflex.vars.Var[str], str]] = None,
+        justify: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/layout/wrap.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -18,13 +19,13 @@ class Wrap(ChakraComponent):
         cls,
         *children,
         items=None,
-        align: Optional[Union[Var[str], str]] = None,
-        direction: Optional[Union[Var[str], str]] = None,
-        justify: Optional[Union[Var[str], str]] = None,
-        should_wrap_children: Optional[Union[Var[bool], bool]] = None,
-        spacing: Optional[Union[Var[str], str]] = None,
-        spacing_x: Optional[Union[Var[str], str]] = None,
-        spacing_y: Optional[Union[Var[str], str]] = None,
+        align: Optional[Union[reflex.vars.Var[str], str]] = None,
+        direction: Optional[Union[reflex.vars.Var[str], str]] = None,
+        justify: Optional[Union[reflex.vars.Var[str], str]] = None,
+        should_wrap_children: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        spacing: Optional[Union[reflex.vars.Var[str], str]] = None,
+        spacing_x: Optional[Union[reflex.vars.Var[str], str]] = None,
+        spacing_y: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/media/avatar.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,16 +18,18 @@ class Avatar(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        icon: Optional[Union[Var[str], str]] = None,
-        icon_label: Optional[Union[Var[str], str]] = None,
-        ignore_fallback: Optional[Union[Var[bool], bool]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        show_border: Optional[Union[Var[bool], bool]] = None,
-        src: Optional[Union[Var[str], str]] = None,
-        src_set: Optional[Union[Var[str], str]] = None,
+        icon: Optional[Union[reflex.vars.Var[str], str]] = None,
+        icon_label: Optional[Union[reflex.vars.Var[str], str]] = None,
+        ignore_fallback: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        name: Optional[Union[reflex.vars.Var[str], str]] = None,
+        show_border: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        src: Optional[Union[reflex.vars.Var[str], str]] = None,
+        src_set: Optional[Union[reflex.vars.Var[str], str]] = None,
         size: Optional[
             Union[
-                Var[Literal["sm", "md", "lg", "xl", "xs", "2xl", "full", "2xs"]],
+                reflex.vars.Var[
+                    Literal["sm", "md", "lg", "xl", "xs", "2xl", "full", "2xs"]
+                ],
                 Literal["sm", "md", "lg", "xl", "xs", "2xl", "full", "2xs"],
             ]
         ] = None,
@@ -193,8 +196,8 @@ class AvatarGroup(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        max_: Optional[Union[Var[int], int]] = None,
-        spacing: Optional[Union[Var[int], int]] = None,
+        max_: Optional[Union[reflex.vars.Var[int], int]] = None,
+        spacing: Optional[Union[reflex.vars.Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/media/icon.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/chakra/media/image.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -19,19 +20,19 @@ class Image(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        align: Optional[Union[Var[str], str]] = None,
+        align: Optional[Union[reflex.vars.Var[str], str]] = None,
         fallback: Optional[Component] = None,
-        fallback_src: Optional[Union[Var[str], str]] = None,
-        fit: Optional[Union[Var[str], str]] = None,
-        html_height: Optional[Union[Var[str], str]] = None,
-        html_width: Optional[Union[Var[str], str]] = None,
-        ignore_fallback: Optional[Union[Var[bool], bool]] = None,
+        fallback_src: Optional[Union[reflex.vars.Var[str], str]] = None,
+        fit: Optional[Union[reflex.vars.Var[str], str]] = None,
+        html_height: Optional[Union[reflex.vars.Var[str], str]] = None,
+        html_width: Optional[Union[reflex.vars.Var[str], str]] = None,
+        ignore_fallback: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         loading: Optional[
-            Union[Var[Literal["eager", "lazy"]], Literal["eager", "lazy"]]
+            Union[reflex.vars.Var[Literal["eager", "lazy"]], Literal["eager", "lazy"]]
         ] = None,
-        src: Optional[Union[Var[Any], Any]] = None,
-        alt: Optional[Union[Var[str], str]] = None,
-        src_set: Optional[Union[Var[str], str]] = None,
+        src: Optional[Union[reflex.vars.Var[Any], Any]] = None,
+        alt: Optional[Union[reflex.vars.Var[str], str]] = None,
+        src_set: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/navigation/breadcrumb.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -20,8 +21,8 @@ class Breadcrumb(ChakraComponent):
         cls,
         *children,
         items=None,
-        separator: Optional[Union[Var[str], str]] = None,
-        separator_margin: Optional[Union[Var[str], str]] = None,
+        separator: Optional[Union[reflex.vars.Var[str], str]] = None,
+        separator_margin: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -105,10 +106,10 @@ class BreadcrumbItem(ChakraComponent):
         *children,
         label=None,
         href=None,
-        is_current_page: Optional[Union[Var[bool], bool]] = None,
-        is_last_child: Optional[Union[Var[bool], bool]] = None,
-        separator: Optional[Union[Var[str], str]] = None,
-        spacing: Optional[Union[Var[str], str]] = None,
+        is_current_page: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_last_child: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        separator: Optional[Union[reflex.vars.Var[str], str]] = None,
+        spacing: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -267,12 +268,12 @@ class BreadcrumbLink(Link):
     def create(  # type: ignore
         cls,
         *children,
-        is_current_page: Optional[Union[Var[bool], bool]] = None,
-        rel: Optional[Union[Var[str], str]] = None,
-        href: Optional[Union[Var[str], str]] = None,
-        text: Optional[Union[Var[str], str]] = None,
-        as_: Optional[Union[Var[str], str]] = None,
-        is_external: Optional[Union[Var[bool], bool]] = None,
+        is_current_page: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        rel: Optional[Union[reflex.vars.Var[str], str]] = None,
+        href: Optional[Union[reflex.vars.Var[str], str]] = None,
+        text: Optional[Union[reflex.vars.Var[str], str]] = None,
+        as_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_external: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/navigation/link.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -22,11 +23,11 @@ class Link(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        rel: Optional[Union[Var[str], str]] = None,
-        href: Optional[Union[Var[str], str]] = None,
-        text: Optional[Union[Var[str], str]] = None,
-        as_: Optional[Union[Var[str], str]] = None,
-        is_external: Optional[Union[Var[bool], bool]] = None,
+        rel: Optional[Union[reflex.vars.Var[str], str]] = None,
+        href: Optional[Union[reflex.vars.Var[str], str]] = None,
+        text: Optional[Union[reflex.vars.Var[str], str]] = None,
+        as_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_external: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/navigation/linkoverlay.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,8 +17,8 @@ class LinkOverlay(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        is_external: Optional[Union[Var[bool], bool]] = None,
-        href: Optional[Union[Var[str], str]] = None,
+        is_external: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        href: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/navigation/stepper.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -21,13 +22,13 @@ class Stepper(ChakraComponent):
         items: Optional[List[Tuple]] = None,
         orientation: Optional[
             Union[
-                Var[Literal["vertical", "horizontal"]],
+                reflex.vars.Var[Literal["vertical", "horizontal"]],
                 Literal["vertical", "horizontal"],
             ]
         ] = None,
         colorScheme: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "none",
                         "gray",
@@ -73,8 +74,8 @@ class Stepper(ChakraComponent):
                 ],
             ]
         ] = None,
-        index: Optional[Union[Var[int], int]] = None,
-        size: Optional[Union[Var[str], str]] = None,
+        index: Optional[Union[reflex.vars.Var[int], int]] = None,
+        size: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -613,9 +614,9 @@ class StepStatus(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        active: Optional[Union[Var[str], str]] = None,
-        complete: Optional[Union[Var[str], str]] = None,
-        incomplete: Optional[Union[Var[str], str]] = None,
+        active: Optional[Union[reflex.vars.Var[str], str]] = None,
+        complete: Optional[Union[reflex.vars.Var[str], str]] = None,
+        incomplete: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/overlay/alertdialog.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -23,20 +24,20 @@ class AlertDialog(ChakraComponent):
         body=None,
         footer=None,
         close_button=None,
-        is_open: Optional[Union[Var[bool], bool]] = None,
-        least_destructive_ref: Optional[Union[Var[str], str]] = None,
-        allow_pinch_zoom: Optional[Union[Var[bool], bool]] = None,
-        auto_focus: Optional[Union[Var[bool], bool]] = None,
-        block_scroll_on_mount: Optional[Union[Var[bool], bool]] = None,
-        close_on_esc: Optional[Union[Var[bool], bool]] = None,
-        close_on_overlay_click: Optional[Union[Var[bool], bool]] = None,
-        is_centered: Optional[Union[Var[bool], bool]] = None,
-        lock_focus_across_frames: Optional[Union[Var[bool], bool]] = None,
-        preserve_scroll_bar_gap: Optional[Union[Var[bool], bool]] = None,
-        return_focus_on_close: Optional[Union[Var[bool], bool]] = None,
+        is_open: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        least_destructive_ref: Optional[Union[reflex.vars.Var[str], str]] = None,
+        allow_pinch_zoom: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        auto_focus: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        block_scroll_on_mount: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        close_on_esc: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        close_on_overlay_click: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_centered: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        lock_focus_across_frames: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        preserve_scroll_bar_gap: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        return_focus_on_close: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         size: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "sm",
                         "md",
@@ -55,7 +56,7 @@ class AlertDialog(ChakraComponent):
                 ],
             ]
         ] = None,
-        use_inert: Optional[Union[Var[bool], bool]] = None,
+        use_inert: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/overlay/drawer.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -27,29 +28,29 @@ class Drawer(ChakraComponent):
         body=None,
         footer=None,
         close_button=None,
-        is_open: Optional[Union[Var[bool], bool]] = None,
-        allow_pinch_zoom: Optional[Union[Var[bool], bool]] = None,
-        auto_focus: Optional[Union[Var[bool], bool]] = None,
-        block_scroll_on_mount: Optional[Union[Var[bool], bool]] = None,
-        close_on_esc: Optional[Union[Var[bool], bool]] = None,
-        close_on_overlay_click: Optional[Union[Var[bool], bool]] = None,
-        is_centered: Optional[Union[Var[bool], bool]] = None,
-        is_full_height: Optional[Union[Var[bool], bool]] = None,
-        lock_focus_across_frames: Optional[Union[Var[bool], bool]] = None,
-        placement: Optional[Union[Var[str], str]] = None,
-        preserve_scroll_bar_gap: Optional[Union[Var[bool], bool]] = None,
-        return_focus_on_close: Optional[Union[Var[bool], bool]] = None,
+        is_open: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        allow_pinch_zoom: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        auto_focus: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        block_scroll_on_mount: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        close_on_esc: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        close_on_overlay_click: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_centered: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_full_height: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        lock_focus_across_frames: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        placement: Optional[Union[reflex.vars.Var[str], str]] = None,
+        preserve_scroll_bar_gap: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        return_focus_on_close: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         size: Optional[
             Union[
-                Var[Literal["sm", "md", "lg", "xs", "xl", "full"]],
+                reflex.vars.Var[Literal["sm", "md", "lg", "xs", "xl", "full"]],
                 Literal["sm", "md", "lg", "xs", "xl", "full"],
             ]
         ] = None,
-        use_inert: Optional[Union[Var[bool], bool]] = None,
-        variant: Optional[Union[Var[str], str]] = None,
+        use_inert: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        variant: Optional[Union[reflex.vars.Var[str], str]] = None,
         color_scheme: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "none",
                         "gray",

reflex/components/chakra/overlay/menu.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -27,25 +28,28 @@ class Menu(ChakraComponent):
         *children,
         button: Optional[Component] = None,
         items: Optional[List] = None,
-        arrow_padding: Optional[Union[Var[int], int]] = None,
-        auto_select: Optional[Union[Var[bool], bool]] = None,
-        boundary: Optional[Union[Var[str], str]] = None,
-        close_on_blur: Optional[Union[Var[bool], bool]] = None,
-        close_on_select: Optional[Union[Var[bool], bool]] = None,
-        default_is_open: Optional[Union[Var[bool], bool]] = None,
+        arrow_padding: Optional[Union[reflex.vars.Var[int], int]] = None,
+        auto_select: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        boundary: Optional[Union[reflex.vars.Var[str], str]] = None,
+        close_on_blur: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        close_on_select: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        default_is_open: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         direction: Optional[
-            Union[Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]
-        ] = None,
-        flip: Optional[Union[Var[bool], bool]] = None,
-        gutter: Optional[Union[Var[int], int]] = None,
-        is_lazy: Optional[Union[Var[bool], bool]] = None,
-        lazy_behavior: Optional[Union[Var[str], str]] = None,
-        is_open: Optional[Union[Var[bool], bool]] = None,
-        match_width: Optional[Union[Var[bool], bool]] = None,
-        placement: Optional[Union[Var[str], str]] = None,
-        prevent_overflow: Optional[Union[Var[bool], bool]] = None,
+            Union[reflex.vars.Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]
+        ] = None,
+        flip: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        gutter: Optional[Union[reflex.vars.Var[int], int]] = None,
+        is_lazy: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        lazy_behavior: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_open: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        match_width: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        placement: Optional[Union[reflex.vars.Var[str], str]] = None,
+        prevent_overflow: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         strategy: Optional[
-            Union[Var[Literal["fixed", "absolute"]], Literal["fixed", "absolute"]]
+            Union[
+                reflex.vars.Var[Literal["fixed", "absolute"]],
+                Literal["fixed", "absolute"],
+            ]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -147,8 +151,8 @@ class MenuButton(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        variant: Optional[Union[Var[str], str]] = None,
-        as_: Optional[Union[Var[str], str]] = None,
+        variant: Optional[Union[reflex.vars.Var[str], str]] = None,
+        as_: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -305,11 +309,11 @@ class MenuItem(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        close_on_select: Optional[Union[Var[bool], bool]] = None,
-        command: Optional[Union[Var[str], str]] = None,
-        command_spacing: Optional[Union[Var[int], int]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_focusable: Optional[Union[Var[bool], bool]] = None,
+        close_on_select: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        command: Optional[Union[reflex.vars.Var[str], str]] = None,
+        command_spacing: Optional[Union[reflex.vars.Var[int], int]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_focusable: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -391,16 +395,19 @@ class MenuItemOption(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        close_on_select: Optional[Union[Var[bool], bool]] = None,
-        command: Optional[Union[Var[str], str]] = None,
-        command_spacing: Optional[Union[Var[int], int]] = None,
-        is_checked: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_focusable: Optional[Union[Var[bool], bool]] = None,
+        close_on_select: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        command: Optional[Union[reflex.vars.Var[str], str]] = None,
+        command_spacing: Optional[Union[reflex.vars.Var[int], int]] = None,
+        is_checked: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_focusable: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         type_: Optional[
-            Union[Var[Literal["checkbox", "radio"]], Literal["checkbox", "radio"]]
+            Union[
+                reflex.vars.Var[Literal["checkbox", "radio"]],
+                Literal["checkbox", "radio"],
+            ]
         ] = None,
-        value: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -562,9 +569,12 @@ class MenuOptionGroup(ChakraComponent):
         cls,
         *children,
         type_: Optional[
-            Union[Var[Literal["checkbox", "radio"]], Literal["checkbox", "radio"]]
+            Union[
+                reflex.vars.Var[Literal["checkbox", "radio"]],
+                Literal["checkbox", "radio"],
+            ]
         ] = None,
-        value: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/overlay/modal.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -26,24 +27,24 @@ class Modal(ChakraComponent):
         body: Optional[Union[Component, str]] = None,
         footer: Optional[Union[Component, str]] = None,
         close_button: Optional[Component] = None,
-        is_open: Optional[Union[Var[bool], bool]] = None,
-        allow_pinch_zoom: Optional[Union[Var[bool], bool]] = None,
-        auto_focus: Optional[Union[Var[bool], bool]] = None,
-        block_scroll_on_mount: Optional[Union[Var[bool], bool]] = None,
-        close_on_esc: Optional[Union[Var[bool], bool]] = None,
-        close_on_overlay_click: Optional[Union[Var[bool], bool]] = None,
-        is_centered: Optional[Union[Var[bool], bool]] = None,
-        lock_focus_across_frames: Optional[Union[Var[bool], bool]] = None,
-        motion_preset: Optional[Union[Var[str], str]] = None,
-        preserve_scroll_bar_gap: Optional[Union[Var[bool], bool]] = None,
-        return_focus_on_close: Optional[Union[Var[bool], bool]] = None,
+        is_open: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        allow_pinch_zoom: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        auto_focus: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        block_scroll_on_mount: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        close_on_esc: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        close_on_overlay_click: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_centered: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        lock_focus_across_frames: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        motion_preset: Optional[Union[reflex.vars.Var[str], str]] = None,
+        preserve_scroll_bar_gap: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        return_focus_on_close: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         size: Optional[
             Union[
-                Var[Literal["xs", "sm", "md", "lg", "xl", "full"]],
+                reflex.vars.Var[Literal["xs", "sm", "md", "lg", "xl", "full"]],
                 Literal["xs", "sm", "md", "lg", "xl", "full"],
             ]
         ] = None,
-        use_inert: Optional[Union[Var[bool], bool]] = None,
+        use_inert: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/overlay/popover.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -28,29 +29,32 @@ class Popover(ChakraComponent):
         body=None,
         footer=None,
         use_close_button=False,
-        arrow_padding: Optional[Union[Var[int], int]] = None,
-        arrow_shadow_color: Optional[Union[Var[str], str]] = None,
-        arrow_size: Optional[Union[Var[int], int]] = None,
-        auto_focus: Optional[Union[Var[bool], bool]] = None,
-        boundary: Optional[Union[Var[str], str]] = None,
-        close_on_blur: Optional[Union[Var[bool], bool]] = None,
-        close_on_esc: Optional[Union[Var[bool], bool]] = None,
-        default_is_open: Optional[Union[Var[bool], bool]] = None,
+        arrow_padding: Optional[Union[reflex.vars.Var[int], int]] = None,
+        arrow_shadow_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        arrow_size: Optional[Union[reflex.vars.Var[int], int]] = None,
+        auto_focus: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        boundary: Optional[Union[reflex.vars.Var[str], str]] = None,
+        close_on_blur: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        close_on_esc: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        default_is_open: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         direction: Optional[
-            Union[Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]
-        ] = None,
-        flip: Optional[Union[Var[bool], bool]] = None,
-        gutter: Optional[Union[Var[int], int]] = None,
-        id_: Optional[Union[Var[str], str]] = None,
-        is_lazy: Optional[Union[Var[bool], bool]] = None,
-        lazy_behavior: Optional[Union[Var[str], str]] = None,
-        is_open: Optional[Union[Var[bool], bool]] = None,
-        match_width: Optional[Union[Var[bool], bool]] = None,
-        placement: Optional[Union[Var[str], str]] = None,
-        prevent_overflow: Optional[Union[Var[bool], bool]] = None,
-        return_focus_on_close: Optional[Union[Var[bool], bool]] = None,
+            Union[reflex.vars.Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]
+        ] = None,
+        flip: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        gutter: Optional[Union[reflex.vars.Var[int], int]] = None,
+        id_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_lazy: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        lazy_behavior: Optional[Union[reflex.vars.Var[str], str]] = None,
+        is_open: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        match_width: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        placement: Optional[Union[reflex.vars.Var[str], str]] = None,
+        prevent_overflow: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        return_focus_on_close: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         strategy: Optional[
-            Union[Var[Literal["fixed", "absolute"]], Literal["fixed", "absolute"]]
+            Union[
+                reflex.vars.Var[Literal["fixed", "absolute"]],
+                Literal["fixed", "absolute"],
+            ]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,

reflex/components/chakra/overlay/tooltip.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,25 +18,25 @@ class Tooltip(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        arrow_padding: Optional[Union[Var[int], int]] = None,
-        arrow_shadow_color: Optional[Union[Var[str], str]] = None,
-        arrow_size: Optional[Union[Var[int], int]] = None,
-        delay: Optional[Union[Var[int], int]] = None,
-        close_on_click: Optional[Union[Var[bool], bool]] = None,
-        close_on_esc: Optional[Union[Var[bool], bool]] = None,
-        close_on_mouse_down: Optional[Union[Var[bool], bool]] = None,
-        default_is_open: Optional[Union[Var[bool], bool]] = None,
+        arrow_padding: Optional[Union[reflex.vars.Var[int], int]] = None,
+        arrow_shadow_color: Optional[Union[reflex.vars.Var[str], str]] = None,
+        arrow_size: Optional[Union[reflex.vars.Var[int], int]] = None,
+        delay: Optional[Union[reflex.vars.Var[int], int]] = None,
+        close_on_click: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        close_on_esc: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        close_on_mouse_down: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        default_is_open: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         direction: Optional[
-            Union[Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]
-        ] = None,
-        gutter: Optional[Union[Var[int], int]] = None,
-        has_arrow: Optional[Union[Var[bool], bool]] = None,
-        is_disabled: Optional[Union[Var[bool], bool]] = None,
-        is_open: Optional[Union[Var[bool], bool]] = None,
-        label: Optional[Union[Var[str], str]] = None,
-        open_delay: Optional[Union[Var[int], int]] = None,
-        placement: Optional[Union[Var[str], str]] = None,
-        should_wrap_children: Optional[Union[Var[bool], bool]] = None,
+            Union[reflex.vars.Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]
+        ] = None,
+        gutter: Optional[Union[reflex.vars.Var[int], int]] = None,
+        has_arrow: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        is_open: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        label: Optional[Union[reflex.vars.Var[str], str]] = None,
+        open_delay: Optional[Union[reflex.vars.Var[int], int]] = None,
+        placement: Optional[Union[reflex.vars.Var[str], str]] = None,
+        should_wrap_children: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/typography/heading.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,10 +17,12 @@ class Heading(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        as_: Optional[Union[Var[str], str]] = None,
+        as_: Optional[Union[reflex.vars.Var[str], str]] = None,
         size: Optional[
             Union[
-                Var[Literal["lg", "md", "sm", "xs", "xl", "2xl", "3xl", "4xl"]],
+                reflex.vars.Var[
+                    Literal["lg", "md", "sm", "xs", "xl", "2xl", "3xl", "4xl"]
+                ],
                 Literal["lg", "md", "sm", "xs", "xl", "2xl", "3xl", "4xl"],
             ]
         ] = None,

reflex/components/chakra/typography/highlight.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -18,8 +19,8 @@ class Highlight(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        query: Optional[Union[Var[List[str]], List[str]]] = None,
-        styles: Optional[Union[Var[Dict], Dict]] = None,
+        query: Optional[Union[reflex.vars.Var[List[str]], List[str]]] = None,
+        styles: Optional[Union[reflex.vars.Var[Dict], Dict]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/typography/span.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,7 +17,7 @@ class Span(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        as_: Optional[Union[Var[str], str]] = None,
+        as_: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/chakra/typography/text.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -16,8 +17,8 @@ class Text(ChakraComponent):
     def create(  # type: ignore
         cls,
         *children,
-        as_: Optional[Union[Var[str], str]] = None,
-        no_of_lines: Optional[Union[Var[int], int]] = None,
+        as_: Optional[Union[reflex.vars.Var[str], str]] = None,
+        no_of_lines: Optional[Union[reflex.vars.Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/component.py

@@ -441,7 +441,7 @@ class Component(BaseComponent, ABC):
                 ) or (
                     # Else just check if the passed var type is valid.
                     not passed_types
-                    and not types._issubclass(passed_type, expected_type)
+                    and not types._issubclass(passed_type, expected_type, value)
                 ):
                     value_name = value._var_name if isinstance(value, Var) else value
                     raise TypeError(

reflex/components/core/banner.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -41,7 +42,7 @@ class WebsocketTargetURL(Bare):
     def create(  # type: ignore
         cls,
         *children,
-        contents: Optional[Union[Var[str], str]] = None,
+        contents: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -111,13 +112,13 @@ class ConnectionToaster(Toaster):
     def create(  # type: ignore
         cls,
         *children,
-        theme: Optional[Union[Var[str], str]] = None,
-        rich_colors: Optional[Union[Var[bool], bool]] = None,
-        expand: Optional[Union[Var[bool], bool]] = None,
-        visible_toasts: Optional[Union[Var[int], int]] = None,
+        theme: Optional[Union[reflex.vars.Var[str], str]] = None,
+        rich_colors: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        expand: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        visible_toasts: Optional[Union[reflex.vars.Var[int], int]] = None,
         position: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "top-left",
                         "top-center",
@@ -137,15 +138,15 @@ class ConnectionToaster(Toaster):
                 ],
             ]
         ] = None,
-        close_button: Optional[Union[Var[bool], bool]] = None,
-        offset: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        hotkey: Optional[Union[Var[str], str]] = None,
-        invert: Optional[Union[Var[bool], bool]] = None,
-        toast_options: Optional[Union[Var[ToastProps], ToastProps]] = None,
-        gap: Optional[Union[Var[int], int]] = None,
-        loading_icon: Optional[Union[Var[Icon], Icon]] = None,
-        pause_when_page_is_hidden: Optional[Union[Var[bool], bool]] = None,
+        close_button: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        offset: Optional[Union[reflex.vars.Var[str], str]] = None,
+        dir: Optional[Union[reflex.vars.Var[str], str]] = None,
+        hotkey: Optional[Union[reflex.vars.Var[str], str]] = None,
+        invert: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        toast_options: Optional[Union[reflex.vars.Var[ToastProps], ToastProps]] = None,
+        gap: Optional[Union[reflex.vars.Var[int], int]] = None,
+        loading_icon: Optional[Union[reflex.vars.Var[Icon], Icon]] = None,
+        pause_when_page_is_hidden: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -374,7 +375,7 @@ class WifiOffPulse(Icon):
     def create(  # type: ignore
         cls,
         *children,
-        size: Optional[Union[Var[int], int]] = None,
+        size: Optional[Union[reflex.vars.Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -455,44 +456,52 @@ class ConnectionPulser(Div):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,

reflex/components/core/breakpoints.py

@@ -1,8 +1,11 @@
 """Breakpoints utility."""
 
-from typing import Optional, Tuple
+from __future__ import annotations
+
+from typing import Dict, Tuple, TypeVar, Union
 
 breakpoints_values = ["30em", "48em", "62em", "80em", "96em"]
+breakpoint_names = ["xs", "sm", "md", "lg", "xl"]
 
 
 def set_breakpoints(values: Tuple[str, str, str, str, str]):
@@ -15,19 +18,41 @@ def set_breakpoints(values: Tuple[str, str, str, str, str]):
     breakpoints_values.extend(values)
 
 
-class Breakpoints(dict):
+K = TypeVar("K")
+V = TypeVar("V")
+
+
+class Breakpoints(Dict[K, V]):
     """A responsive styling helper."""
 
+    def factorize(self):
+        """Removes references to breakpoints names and instead replaces them with their corresponding values.
+
+        Returns:
+            The factorized breakpoints.
+        """
+        return Breakpoints(
+            {
+                (
+                    breakpoints_values[breakpoint_names.index(k)]
+                    if k in breakpoint_names
+                    else ("0px" if k == "initial" else k)
+                ): v
+                for k, v in self.items()
+                if v is not None
+            }
+        )
+
     @classmethod
     def create(
         cls,
-        custom: Optional[dict] = None,
-        initial=None,
-        xs=None,
-        sm=None,
-        md=None,
-        lg=None,
-        xl=None,
+        custom: Dict[K, V] | None = None,
+        initial: V | None = None,
+        xs: V | None = None,
+        sm: V | None = None,
+        md: V | None = None,
+        lg: V | None = None,
+        xl: V | None = None,
     ):
         """Create a new instance of the helper. Only provide a custom component OR use named props.
 
@@ -57,10 +82,14 @@ class Breakpoints(dict):
             return Breakpoints(
                 {
                     k: v
-                    for k, v in zip(["0px", *breakpoints_values], thresholds)
+                    for k, v in zip(["initial", *breakpoint_names], thresholds)
                     if v is not None
                 }
             )
 
 
 breakpoints = Breakpoints.create
+
+T = TypeVar("T")
+
+Responsive = Union[T, Breakpoints[str, T]]

reflex/components/core/client_side_routing.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -100,7 +101,7 @@ class Default404Page(Component):
     def create(  # type: ignore
         cls,
         *children,
-        status_code: Optional[Union[Var[int], int]] = None,
+        status_code: Optional[Union[reflex.vars.Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/core/clipboard.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -21,9 +22,12 @@ class Clipboard(Fragment):
     def create(  # type: ignore
         cls,
         *children,
-        targets: Optional[Union[Var[List[str]], List[str]]] = None,
+        targets: Optional[Union[reflex.vars.Var[List[str]], List[str]]] = None,
         on_paste_event_actions: Optional[
-            Union[Var[Dict[str, Union[bool, int]]], Dict[str, Union[bool, int]]]
+            Union[
+                reflex.vars.Var[Dict[str, Union[bool, int]]],
+                Dict[str, Union[bool, int]],
+            ]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,

reflex/components/core/debounce.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -21,15 +22,17 @@ class DebounceInput(Component):
     def create(  # type: ignore
         cls,
         *children,
-        min_length: Optional[Union[Var[int], int]] = None,
-        debounce_timeout: Optional[Union[Var[int], int]] = None,
-        force_notify_by_enter: Optional[Union[Var[bool], bool]] = None,
-        force_notify_on_blur: Optional[Union[Var[bool], bool]] = None,
+        min_length: Optional[Union[reflex.vars.Var[int], int]] = None,
+        debounce_timeout: Optional[Union[reflex.vars.Var[int], int]] = None,
+        force_notify_by_enter: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        force_notify_on_blur: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         value: Optional[
-            Union[Var[Union[float, int, str]], Union[float, int, str]]
+            Union[reflex.vars.Var[Union[float, int, str]], str, int, float]
+        ] = None,
+        input_ref: Optional[Union[reflex.vars.Var[str], str]] = None,
+        element: Optional[
+            Union[reflex.vars.Var[Type[Component]], Type[Component]]
         ] = None,
-        input_ref: Optional[Union[Var[str], str]] = None,
-        element: Optional[Union[Var[Type[Component]], Type[Component]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/core/html.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -18,47 +19,55 @@ class Html(Div):
         cls,
         *children,
         dangerouslySetInnerHTML: Optional[
-            Union[Var[Dict[str, str]], Dict[str, str]]
+            Union[reflex.vars.Var[Dict[str, str]], Dict[str, str]]
         ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,

reflex/components/core/upload.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -127,16 +128,16 @@ class Upload(MemoizationLeaf):
         cls,
         *children,
         accept: Optional[
-            Union[Var[Optional[Dict[str, List]]], Optional[Dict[str, List]]]
-        ] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        max_files: Optional[Union[Var[int], int]] = None,
-        max_size: Optional[Union[Var[int], int]] = None,
-        min_size: Optional[Union[Var[int], int]] = None,
-        multiple: Optional[Union[Var[bool], bool]] = None,
-        no_click: Optional[Union[Var[bool], bool]] = None,
-        no_drag: Optional[Union[Var[bool], bool]] = None,
-        no_keyboard: Optional[Union[Var[bool], bool]] = None,
+            Union[reflex.vars.Var[Optional[Dict[str, List]]], Dict[str, List]]
+        ] = None,
+        disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        max_files: Optional[Union[reflex.vars.Var[int], int]] = None,
+        max_size: Optional[Union[reflex.vars.Var[int], int]] = None,
+        min_size: Optional[Union[reflex.vars.Var[int], int]] = None,
+        multiple: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        no_click: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        no_drag: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        no_keyboard: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -226,16 +227,16 @@ class StyledUpload(Upload):
         cls,
         *children,
         accept: Optional[
-            Union[Var[Optional[Dict[str, List]]], Optional[Dict[str, List]]]
-        ] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        max_files: Optional[Union[Var[int], int]] = None,
-        max_size: Optional[Union[Var[int], int]] = None,
-        min_size: Optional[Union[Var[int], int]] = None,
-        multiple: Optional[Union[Var[bool], bool]] = None,
-        no_click: Optional[Union[Var[bool], bool]] = None,
-        no_drag: Optional[Union[Var[bool], bool]] = None,
-        no_keyboard: Optional[Union[Var[bool], bool]] = None,
+            Union[reflex.vars.Var[Optional[Dict[str, List]]], Dict[str, List]]
+        ] = None,
+        disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        max_files: Optional[Union[reflex.vars.Var[int], int]] = None,
+        max_size: Optional[Union[reflex.vars.Var[int], int]] = None,
+        min_size: Optional[Union[reflex.vars.Var[int], int]] = None,
+        multiple: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        no_click: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        no_drag: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        no_keyboard: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -325,16 +326,16 @@ class UploadNamespace(ComponentNamespace):
     def __call__(
         *children,
         accept: Optional[
-            Union[Var[Optional[Dict[str, List]]], Optional[Dict[str, List]]]
-        ] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        max_files: Optional[Union[Var[int], int]] = None,
-        max_size: Optional[Union[Var[int], int]] = None,
-        min_size: Optional[Union[Var[int], int]] = None,
-        multiple: Optional[Union[Var[bool], bool]] = None,
-        no_click: Optional[Union[Var[bool], bool]] = None,
-        no_drag: Optional[Union[Var[bool], bool]] = None,
-        no_keyboard: Optional[Union[Var[bool], bool]] = None,
+            Union[reflex.vars.Var[Optional[Dict[str, List]]], Dict[str, List]]
+        ] = None,
+        disabled: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        max_files: Optional[Union[reflex.vars.Var[int], int]] = None,
+        max_size: Optional[Union[reflex.vars.Var[int], int]] = None,
+        min_size: Optional[Union[reflex.vars.Var[int], int]] = None,
+        multiple: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        no_click: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        no_drag: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        no_keyboard: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/datadisplay/code.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -361,7 +362,7 @@ class CodeBlock(Component):
         copy_button: Optional[Union[Component, bool]] = None,
         theme: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "a11y-dark",
                         "atom-dark",
@@ -461,7 +462,7 @@ class CodeBlock(Component):
         ] = None,
         language: Optional[
             Union[
-                Var[
+                reflex.vars.Var[
                     Literal[
                         "abap",
                         "abnf",
@@ -1027,12 +1028,14 @@ class CodeBlock(Component):
                 ],
             ]
         ] = None,
-        code: Optional[Union[Var[str], str]] = None,
-        show_line_numbers: Optional[Union[Var[bool], bool]] = None,
-        starting_line_number: Optional[Union[Var[int], int]] = None,
-        wrap_long_lines: Optional[Union[Var[bool], bool]] = None,
+        code: Optional[Union[reflex.vars.Var[str], str]] = None,
+        show_line_numbers: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        starting_line_number: Optional[Union[reflex.vars.Var[int], int]] = None,
+        wrap_long_lines: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         custom_style: Optional[Dict[str, Union[str, Var, Color]]] = None,
-        code_tag_props: Optional[Union[Var[Dict[str, str]], Dict[str, str]]] = None,
+        code_tag_props: Optional[
+            Union[reflex.vars.Var[Dict[str, str]], Dict[str, str]]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/datadisplay/dataeditor.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -90,48 +91,50 @@ class DataEditor(NoSSRComponent):
     def create(  # type: ignore
         cls,
         *children,
-        rows: Optional[Union[Var[int], int]] = None,
+        rows: Optional[Union[reflex.vars.Var[int], int]] = None,
         columns: Optional[
-            Union[Var[List[Dict[str, Any]]], List[Dict[str, Any]]]
-        ] = None,
-        data: Optional[Union[Var[List[List[Any]]], List[List[Any]]]] = None,
-        get_cell_content: Optional[Union[Var[str], str]] = None,
-        get_cell_for_selection: Optional[Union[Var[bool], bool]] = None,
-        on_paste: Optional[Union[Var[bool], bool]] = None,
-        draw_focus_ring: Optional[Union[Var[bool], bool]] = None,
-        fixed_shadow_x: Optional[Union[Var[bool], bool]] = None,
-        fixed_shadow_y: Optional[Union[Var[bool], bool]] = None,
-        freeze_columns: Optional[Union[Var[int], int]] = None,
-        group_header_height: Optional[Union[Var[int], int]] = None,
-        header_height: Optional[Union[Var[int], int]] = None,
-        max_column_auto_width: Optional[Union[Var[int], int]] = None,
-        max_column_width: Optional[Union[Var[int], int]] = None,
-        min_column_width: Optional[Union[Var[int], int]] = None,
-        row_height: Optional[Union[Var[int], int]] = None,
+            Union[reflex.vars.Var[List[Dict[str, Any]]], List[Dict[str, Any]]]
+        ] = None,
+        data: Optional[Union[reflex.vars.Var[List[List[Any]]], List[List[Any]]]] = None,
+        get_cell_content: Optional[Union[reflex.vars.Var[str], str]] = None,
+        get_cell_for_selection: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        on_paste: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        draw_focus_ring: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        fixed_shadow_x: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        fixed_shadow_y: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        freeze_columns: Optional[Union[reflex.vars.Var[int], int]] = None,
+        group_header_height: Optional[Union[reflex.vars.Var[int], int]] = None,
+        header_height: Optional[Union[reflex.vars.Var[int], int]] = None,
+        max_column_auto_width: Optional[Union[reflex.vars.Var[int], int]] = None,
+        max_column_width: Optional[Union[reflex.vars.Var[int], int]] = None,
+        min_column_width: Optional[Union[reflex.vars.Var[int], int]] = None,
+        row_height: Optional[Union[reflex.vars.Var[int], int]] = None,
         row_markers: Optional[
             Union[
-                Var[Literal["none", "number", "checkbox", "both", "clickable-number"]],
+                reflex.vars.Var[
+                    Literal["none", "number", "checkbox", "both", "clickable-number"]
+                ],
                 Literal["none", "number", "checkbox", "both", "clickable-number"],
             ]
         ] = None,
-        row_marker_start_index: Optional[Union[Var[int], int]] = None,
-        row_marker_width: Optional[Union[Var[int], int]] = None,
-        smooth_scroll_x: Optional[Union[Var[bool], bool]] = None,
-        smooth_scroll_y: Optional[Union[Var[bool], bool]] = None,
-        vertical_border: Optional[Union[Var[bool], bool]] = None,
+        row_marker_start_index: Optional[Union[reflex.vars.Var[int], int]] = None,
+        row_marker_width: Optional[Union[reflex.vars.Var[int], int]] = None,
+        smooth_scroll_x: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        smooth_scroll_y: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        vertical_border: Optional[Union[reflex.vars.Var[bool], bool]] = None,
         column_select: Optional[
             Union[
-                Var[Literal["none", "single", "multi"]],
+                reflex.vars.Var[Literal["none", "single", "multi"]],
                 Literal["none", "single", "multi"],
             ]
         ] = None,
-        prevent_diagonal_scrolling: Optional[Union[Var[bool], bool]] = None,
-        overscroll_x: Optional[Union[Var[int], int]] = None,
-        overscroll_y: Optional[Union[Var[int], int]] = None,
-        scroll_offset_x: Optional[Union[Var[int], int]] = None,
-        scroll_offset_y: Optional[Union[Var[int], int]] = None,
+        prevent_diagonal_scrolling: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        overscroll_x: Optional[Union[reflex.vars.Var[int], int]] = None,
+        overscroll_y: Optional[Union[reflex.vars.Var[int], int]] = None,
+        scroll_offset_x: Optional[Union[reflex.vars.Var[int], int]] = None,
+        scroll_offset_y: Optional[Union[reflex.vars.Var[int], int]] = None,
         theme: Optional[
-            Union[Var[Union[DataEditorTheme, Dict]], Union[DataEditorTheme, Dict]]
+            Union[reflex.vars.Var[Union[DataEditorTheme, Dict]], DataEditorTheme, Dict]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,

reflex/components/el/element.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/el/elements/base.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -18,44 +19,52 @@ class BaseHTML(Element):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,

reflex/components/el/elements/metadata.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -18,49 +19,59 @@ class Base(BaseHTML):
     def create(  # type: ignore
         cls,
         *children,
-        href: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
+        href: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
         target: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -155,44 +166,52 @@ class Head(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -287,65 +306,79 @@ class Link(BaseHTML):
         cls,
         *children,
         cross_origin: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        href: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        href: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         href_lang: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         integrity: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         media: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         referrer_policy: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        rel: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        rel: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         sizes: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        type: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        type: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -440,54 +473,64 @@ class Meta(BaseHTML):
         cls,
         *children,
         char_set: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         http_equiv: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        name: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        name: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -658,7 +701,7 @@ class StyleEl(Element):
         cls,
         *children,
         media: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,

reflex/components/el/elements/other.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,46 +18,56 @@ class Details(BaseHTML):
     def create(  # type: ignore
         cls,
         *children,
-        open: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
+        open: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -151,46 +162,56 @@ class Dialog(BaseHTML):
     def create(  # type: ignore
         cls,
         *children,
-        open: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
+        open: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -286,44 +307,52 @@ class Summary(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -418,44 +447,52 @@ class Slot(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -550,44 +587,52 @@ class Template(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -682,44 +727,52 @@ class Math(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -814,47 +867,55 @@ class Html(BaseHTML):
         cls,
         *children,
         manifest: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,

reflex/components/el/elements/scripts.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -18,44 +19,52 @@ class Canvas(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -150,44 +159,52 @@ class Noscript(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -282,67 +299,79 @@ class Script(BaseHTML):
         cls,
         *children,
         async_: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         char_set: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         cross_origin: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         defer: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         integrity: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         language: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         referrer_policy: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        src: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        type: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        src: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        type: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,

reflex/components/el/elements/sectioning.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -17,44 +18,52 @@ class Body(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -149,44 +158,52 @@ class Address(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -281,44 +298,52 @@ class Article(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -413,44 +438,52 @@ class Aside(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -545,44 +578,52 @@ class Footer(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -677,44 +718,52 @@ class Header(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -809,44 +858,52 @@ class H1(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -941,44 +998,52 @@ class H2(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -1073,44 +1138,52 @@ class H3(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -1205,44 +1278,52 @@ class H4(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -1337,44 +1418,52 @@ class H5(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -1469,44 +1558,52 @@ class H6(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -1601,44 +1698,52 @@ class Main(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -1733,44 +1838,52 @@ class Nav(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -1865,44 +1978,52 @@ class Section(BaseHTML):
         cls,
         *children,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,

reflex/components/el/elements/tables.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -18,47 +19,55 @@ class Caption(BaseHTML):
         cls,
         *children,
         align: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -154,48 +163,58 @@ class Col(BaseHTML):
         cls,
         *children,
         align: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        span: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        span: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -292,48 +311,58 @@ class Colgroup(BaseHTML):
         cls,
         *children,
         align: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        span: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        span: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -430,50 +459,58 @@ class Table(BaseHTML):
         cls,
         *children,
         align: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         summary: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -570,47 +607,55 @@ class Tbody(BaseHTML):
         cls,
         *children,
         align: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -706,56 +751,64 @@ class Td(BaseHTML):
         cls,
         *children,
         align: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         col_span: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         headers: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         row_span: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -854,47 +907,55 @@ class Tfoot(BaseHTML):
         cls,
         *children,
         align: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -990,59 +1051,67 @@ class Th(BaseHTML):
         cls,
         *children,
         align: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         col_span: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         headers: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         row_span: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         scope: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -1142,47 +1211,55 @@ class Thead(BaseHTML):
         cls,
         *children,
         align: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -1278,47 +1355,55 @@ class Tr(BaseHTML):
         cls,
         *children,
         align: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         access_key: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         auto_capitalize: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         content_editable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         context_menu: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        dir: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         draggable: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         enter_key_hint: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         hidden: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         input_mode: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         item_prop: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        lang: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        role: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        slot: Optional[
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
-        lang: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        role: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
-        slot: Optional[Union[Var[Union[bool, int, str]], Union[bool, int, str]]] = None,
         spell_check: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         tab_index: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         title: Optional[
-            Union[Var[Union[bool, int, str]], Union[bool, int, str]]
+            Union[reflex.vars.Var[Union[bool, int, str]], str, int, bool]
         ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,

reflex/components/gridjs/datatable.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -98,11 +99,13 @@ class DataTable(Gridjs):
         cls,
         *children,
         data: Optional[Any] = None,
-        columns: Optional[Union[Var[List], List]] = None,
-        search: Optional[Union[Var[bool], bool]] = None,
-        sort: Optional[Union[Var[bool], bool]] = None,
-        resizable: Optional[Union[Var[bool], bool]] = None,
-        pagination: Optional[Union[Var[Union[Dict, bool]], Union[Dict, bool]]] = None,
+        columns: Optional[Union[reflex.vars.Var[List], List]] = None,
+        search: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        sort: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        resizable: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        pagination: Optional[
+            Union[reflex.vars.Var[Union[Dict, bool]], bool, Dict]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/lucide/icon.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -93,7 +94,7 @@ class Icon(LucideIconComponent):
     def create(  # type: ignore
         cls,
         *children,
-        size: Optional[Union[Var[int], int]] = None,
+        size: Optional[Union[reflex.vars.Var[int], int]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/markdown/markdown.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/moment/moment.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -32,26 +33,26 @@ class Moment(NoSSRComponent):
     def create(  # type: ignore
         cls,
         *children,
-        interval: Optional[Union[Var[int], int]] = None,
-        format: Optional[Union[Var[str], str]] = None,
-        trim: Optional[Union[Var[bool], bool]] = None,
-        parse: Optional[Union[Var[str], str]] = None,
-        add: Optional[Union[Var[MomentDelta], MomentDelta]] = None,
-        subtract: Optional[Union[Var[MomentDelta], MomentDelta]] = None,
-        from_now: Optional[Union[Var[bool], bool]] = None,
-        from_now_during: Optional[Union[Var[int], int]] = None,
-        to_now: Optional[Union[Var[bool], bool]] = None,
-        with_title: Optional[Union[Var[bool], bool]] = None,
-        title_format: Optional[Union[Var[str], str]] = None,
-        diff: Optional[Union[Var[str], str]] = None,
-        decimal: Optional[Union[Var[bool], bool]] = None,
-        unit: Optional[Union[Var[str], str]] = None,
-        duration: Optional[Union[Var[str], str]] = None,
-        date: Optional[Union[Var[str], str]] = None,
-        duration_from_now: Optional[Union[Var[bool], bool]] = None,
-        unix: Optional[Union[Var[bool], bool]] = None,
-        local: Optional[Union[Var[bool], bool]] = None,
-        tz: Optional[Union[Var[str], str]] = None,
+        interval: Optional[Union[reflex.vars.Var[int], int]] = None,
+        format: Optional[Union[reflex.vars.Var[str], str]] = None,
+        trim: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        parse: Optional[Union[reflex.vars.Var[str], str]] = None,
+        add: Optional[Union[reflex.vars.Var[MomentDelta], MomentDelta]] = None,
+        subtract: Optional[Union[reflex.vars.Var[MomentDelta], MomentDelta]] = None,
+        from_now: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        from_now_during: Optional[Union[reflex.vars.Var[int], int]] = None,
+        to_now: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        with_title: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        title_format: Optional[Union[reflex.vars.Var[str], str]] = None,
+        diff: Optional[Union[reflex.vars.Var[str], str]] = None,
+        decimal: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        unit: Optional[Union[reflex.vars.Var[str], str]] = None,
+        duration: Optional[Union[reflex.vars.Var[str], str]] = None,
+        date: Optional[Union[reflex.vars.Var[str], str]] = None,
+        duration_from_now: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        unix: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        local: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        tz: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/next/base.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style

reflex/components/next/image.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from typing import Any, Dict, Literal, Optional, Union, overload
+import reflex
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
@@ -21,18 +22,18 @@ class Image(NextComponent):
         *children,
         width: Optional[Union[int, str]] = None,
         height: Optional[Union[int, str]] = None,
-        src: Optional[Union[Var[Any], Any]] = None,
-        alt: Optional[Union[Var[str], str]] = None,
-        loader: Optional[Union[Var[Any], Any]] = None,
-        fill: Optional[Union[Var[bool], bool]] = None,
-        sizes: Optional[Union[Var[str], str]] = None,
-        quality: Optional[Union[Var[int], int]] = None,
-        priority: Optional[Union[Var[bool], bool]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
+        src: Optional[Union[reflex.vars.Var[Any], Any]] = None,
+        alt: Optional[Union[reflex.vars.Var[str], str]] = None,
+        loader: Optional[Union[reflex.vars.Var[Any], Any]] = None,
+        fill: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        sizes: Optional[Union[reflex.vars.Var[str], str]] = None,
+        quality: Optional[Union[reflex.vars.Var[int], int]] = None,
+        priority: Optional[Union[reflex.vars.Var[bool], bool]] = None,
+        placeholder: Optional[Union[reflex.vars.Var[str], str]] = None,
         loading: Optional[
-            Union[Var[Literal["lazy", "eager"]], Literal["lazy", "eager"]]
+            Union[reflex.vars.Var[Literal["lazy", "eager"]], Literal["lazy", "eager"]]
         ] = None,
-        blurDataURL: Optional[Union[Var[str], str]] = None,
+        blurDataURL: Optional[Union[reflex.vars.Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,