Merge pull request #2641 from reflex-dev/reflex-0.4.0

Reflex 0.4.0 🚀

.coveragerc

@@ -5,7 +5,7 @@ branch = true
 [report]
 show_missing = true
 # TODO bump back to 79
-fail_under = 70
+fail_under = 69
 precision = 2
 
 # Regexes for lines to exclude from consideration
@@ -28,4 +28,4 @@ exclude_also =
 ignore_errors = True
 
 [html]
-directory = coverage_html_report
+directory = coverage_html_report

.github/workflows/check_generated_pyi.yml

@@ -2,14 +2,14 @@ name: check-generated-pyi
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     # We don't just trigger on pyi_generator.py and the components dir, because
     # there are other things that can change the generator output
     # e.g. black version, reflex.Component, reflex.Var.
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 

.github/workflows/integration_app_harness.yml

@@ -2,11 +2,11 @@ name: integration-app-harness
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 

.github/workflows/integration_tests.yml

@@ -2,11 +2,11 @@ name: integration-tests
 
 on:
   push:
-    branches: [ main ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches: [ main ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 
@@ -125,7 +125,7 @@ jobs:
         uses: actions/checkout@v4
         with:
           repository: reflex-dev/reflex-web
-          ref: main
+          ref: reflex-0.4.0
           path: reflex-web
 
       - name: Install Requirements for reflex-web

.github/workflows/integration_tests_wsl.yml

@@ -2,11 +2,11 @@ name: integration-tests-wsl
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches: [ main ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 

.github/workflows/pre-commit.yml

@@ -2,12 +2,12 @@ name: pre-commit
 
 on:
   pull_request:
-    branches: [main]
+    branches: [ "main", "reflex-0.4.0" ]
   push:
     # Note even though this job is called "pre-commit" and runs "pre-commit", this job will run
     # also POST-commit on main also!  In case there are mishandled merge conflicts / bad auto-resolves
     # when merging into main branch.
-    branches: [main]
+    branches: [ "main", "reflex-0.4.0" ]
 
 jobs:
   pre-commit:

.github/workflows/reflex_init_in_docker_test.yml

@@ -2,12 +2,11 @@ name: reflex-init-in-docker-test
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches:
-      - main
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 

.github/workflows/unit_tests.yml

@@ -2,11 +2,11 @@ name: unit-tests
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
   pull_request:
-    branches: [ "main" ]
+    branches: [ "main", "reflex-0.4.0" ]
     paths-ignore:
       - '**/*.md'
 

README.md

@@ -72,10 +72,12 @@ Here is the complete code to create this. This is all done in one Python file!
 import reflex as rx
 import openai
 
-openai.api_key = "YOUR_API_KEY"
+openai_client = openai.OpenAI()
+
 
 class State(rx.State):
     """The app state."""
+
     prompt = ""
     image_url = ""
     processing = False
@@ -88,41 +90,40 @@ class State(rx.State):
 
         self.processing, self.complete = True, False
         yield
-        response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024")
-        self.image_url = response["data"][0]["url"]
+        response = openai_client.images.generate(
+            prompt=self.prompt, n=1, size="1024x1024"
+        )
+        self.image_url = response.data[0].url
         self.processing, self.complete = False, True
-        
 
 def index():
     return rx.center(
         rx.vstack(
-            rx.heading("DALL·E"),
-            rx.input(placeholder="Enter a prompt", on_blur=State.set_prompt),
-            rx.button(
-                "Generate Image",
-                on_click=State.get_image,
-                is_loading=State.processing,
-                width="100%",
+            rx.heading("DALL-E", font_size="1.5em"),
+            rx.input(
+                placeholder="Enter a prompt..",
+                on_blur=State.set_prompt,
+                width="25em",
             ),
+            rx.button("Generate Image", on_click=State.get_image, width="25em"),
             rx.cond(
-                State.complete,
-                     rx.image(
-                         src=State.image_url,
-                         height="25em",
-                         width="25em",
-                    )
+                State.processing,
+                rx.chakra.circular_progress(is_indeterminate=True),
+                rx.cond(
+                    State.complete,
+                    rx.image(src=State.image_url, width="20em"),
+                ),
             ),
-            padding="2em",
-            shadow="lg",
-            border_radius="lg",
+            align="center",
         ),
         width="100%",
         height="100vh",
     )
 
+
 # Add state and page to the app.
 app = rx.App()
-app.add_page(index, title="reflex:DALL·E")
+app.add_page(index, title="Reflex:DALL-E")
 ```
 
 ## Let's break this down.
@@ -156,6 +157,7 @@ class State(rx.State):
     image_url = ""
     processing = False
     complete = False
+
 ```
 
 The state defines all the variables (called vars) in an app that can change and the functions that change them.
@@ -172,8 +174,10 @@ def get_image(self):
 
     self.processing, self.complete = True, False
     yield
-    response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024")
-    self.image_url = response["data"][0]["url"]
+    response = openai_client.images.generate(
+        prompt=self.prompt, n=1, size="1024x1024"
+    )
+    self.image_url = response.data[0].url
     self.processing, self.complete = False, True
 ```
 

integration/benchmarks/test_compile_benchmark.py

@@ -43,7 +43,7 @@ def sample_small_page() -> rx.Component:
     """
     return rx.vstack(
         *[rx.button(State.count, font_size="2em") for i in range(100)],
-        spacing="1em",
+        gap="1em",
     )
 
 
@@ -62,7 +62,7 @@ def sample_large_page() -> rx.Component:
             )
             for i in range(100)
         ],
-        spacing="1em",
+        gap="1em",
     )
 
 

integration/test_background_task.py

@@ -59,11 +59,11 @@ def BackgroundTask():
 
     def index() -> rx.Component:
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 id="token", value=State.router.session.client_token, is_read_only=True
             ),
             rx.heading(State.counter, id="counter"),
-            rx.input(
+            rx.chakra.input(
                 id="iterations",
                 placeholder="Iterations",
                 value=State.iterations.to_string(),  # type: ignore

integration/test_call_script.py

@@ -142,17 +142,17 @@ def CallScript():
     @app.add_page
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=CallScriptState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.input(
+            rx.chakra.input(
                 value=CallScriptState.inline_counter.to(str),  # type: ignore
                 id="inline_counter",
                 is_read_only=True,
             ),
-            rx.input(
+            rx.chakra.input(
                 value=CallScriptState.external_counter.to(str),  # type: ignore
                 id="external_counter",
                 is_read_only=True,

integration/test_client_storage.py

@@ -55,18 +55,18 @@ def ClientSide():
 
     def index():
         return rx.fragment(
-            rx.input(
+            rx.chakra.input(
                 value=ClientSideState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.input(
+            rx.chakra.input(
                 placeholder="state var",
                 value=ClientSideState.state_var,
                 on_change=ClientSideState.set_state_var,  # type: ignore
                 id="state_var",
             ),
-            rx.input(
+            rx.chakra.input(
                 placeholder="input value",
                 value=ClientSideState.input_value,
                 on_change=ClientSideState.set_input_value,  # type: ignore

integration/test_dynamic_routes.py

@@ -35,13 +35,15 @@ def DynamicRoute():
 
     def index():
         return rx.fragment(
-            rx.input(
+            rx.chakra.input(
                 value=DynamicState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.input(value=DynamicState.page_id, is_read_only=True, id="page_id"),
-            rx.input(
+            rx.chakra.input(
+                value=DynamicState.page_id, is_read_only=True, id="page_id"
+            ),
+            rx.chakra.input(
                 value=DynamicState.router.page.raw_path,
                 is_read_only=True,
                 id="raw_path",
@@ -52,8 +54,8 @@ def DynamicRoute():
                 "next", href="/page/" + DynamicState.next_page, id="link_page_next"  # type: ignore
             ),
             rx.link("missing", href="/missing", id="link_missing"),
-            rx.list(
-                rx.foreach(DynamicState.order, lambda i: rx.list_item(rx.text(i))),  # type: ignore
+            rx.chakra.list(
+                rx.foreach(DynamicState.order, lambda i: rx.chakra.list_item(rx.text(i))),  # type: ignore
             ),
         )
 

integration/test_event_actions.py

@@ -42,7 +42,7 @@ def TestEventAction():
 
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=EventActionState.router.session.client_token,
                 is_read_only=True,
                 id="token",
@@ -121,10 +121,10 @@ def TestEventAction():
                     "custom-prevent-default"
                 ).prevent_default,
             ),
-            rx.list(
+            rx.chakra.list(
                 rx.foreach(
                     EventActionState.order,  # type: ignore
-                    rx.list_item,
+                    rx.chakra.list_item,
                 ),
             ),
             on_click=EventActionState.on_click("outer"),  # type: ignore

integration/test_event_chain.py

@@ -124,7 +124,7 @@ def EventChain():
 
     app = rx.App(state=rx.State)
 
-    token_input = rx.input(
+    token_input = rx.chakra.input(
         value=State.router.session.client_token, is_read_only=True, id="token"
     )
 
@@ -132,7 +132,9 @@ def EventChain():
     def index():
         return rx.fragment(
             token_input,
-            rx.input(value=State.interim_value, is_read_only=True, id="interim_value"),
+            rx.chakra.input(
+                value=State.interim_value, is_read_only=True, id="interim_value"
+            ),
             rx.button(
                 "Return Event",
                 id="return_event",

integration/test_form_submit.py

@@ -27,28 +27,28 @@ def FormSubmit():
     @app.add_page
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=FormState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.form(
+            rx.form.root(
                 rx.vstack(
-                    rx.input(id="name_input"),
-                    rx.hstack(rx.pin_input(length=4, id="pin_input")),
-                    rx.number_input(id="number_input"),
+                    rx.chakra.input(id="name_input"),
+                    rx.hstack(rx.chakra.pin_input(length=4, id="pin_input")),
+                    rx.chakra.number_input(id="number_input"),
                     rx.checkbox(id="bool_input"),
                     rx.switch(id="bool_input2"),
                     rx.checkbox(id="bool_input3"),
                     rx.switch(id="bool_input4"),
-                    rx.slider(id="slider_input"),
-                    rx.range_slider(id="range_input"),
-                    rx.radio_group(["option1", "option2"], id="radio_input"),
-                    rx.radio_group(FormState.var_options, id="radio_input_var"),
-                    rx.select(["option1", "option2"], id="select_input"),
-                    rx.select(FormState.var_options, id="select_input_var"),
+                    rx.slider(id="slider_input", default_value=[50], width="100%"),
+                    rx.chakra.range_slider(id="range_input"),
+                    rx.radio(["option1", "option2"], id="radio_input"),
+                    rx.radio(FormState.var_options, id="radio_input_var"),
+                    rx.chakra.select(["option1", "option2"], id="select_input"),
+                    rx.chakra.select(FormState.var_options, id="select_input_var"),
                     rx.text_area(id="text_area_input"),
-                    rx.input(
+                    rx.chakra.input(
                         id="debounce_input",
                         debounce_timeout=0,
                         on_change=rx.console_log,
@@ -80,37 +80,41 @@ def FormSubmitName():
     @app.add_page
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=FormState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.form(
+            rx.form.root(
                 rx.vstack(
-                    rx.input(name="name_input"),
-                    rx.hstack(rx.pin_input(length=4, name="pin_input")),
-                    rx.number_input(name="number_input"),
+                    rx.chakra.input(name="name_input"),
+                    rx.hstack(rx.chakra.pin_input(length=4, name="pin_input")),
+                    rx.chakra.number_input(name="number_input"),
                     rx.checkbox(name="bool_input"),
                     rx.switch(name="bool_input2"),
                     rx.checkbox(name="bool_input3"),
                     rx.switch(name="bool_input4"),
-                    rx.slider(name="slider_input"),
-                    rx.range_slider(name="range_input"),
-                    rx.radio_group(FormState.options, name="radio_input"),
-                    rx.select(FormState.options, name="select_input"),
+                    rx.slider(name="slider_input", default_value=[50], width="100%"),
+                    rx.chakra.range_slider(name="range_input"),
+                    rx.radio(FormState.options, name="radio_input"),
+                    rx.select(
+                        FormState.options,
+                        name="select_input",
+                        default_value=FormState.options[0],
+                    ),
                     rx.text_area(name="text_area_input"),
-                    rx.input_group(
-                        rx.input_left_element(rx.icon(tag="chevron_right")),
-                        rx.input(
+                    rx.chakra.input_group(
+                        rx.chakra.input_left_element(rx.icon(tag="chevron_right")),
+                        rx.chakra.input(
                             name="debounce_input",
                             debounce_timeout=0,
                             on_change=rx.console_log,
                         ),
-                        rx.input_right_element(rx.icon(tag="chevron_left")),
+                        rx.chakra.input_right_element(rx.icon(tag="chevron_left")),
                     ),
-                    rx.button_group(
+                    rx.chakra.button_group(
                         rx.button("Submit", type_="submit"),
-                        rx.icon_button(FormState.val, icon=rx.icon(tag="add")),
+                        rx.icon_button(FormState.val, icon=rx.icon(tag="plus")),
                         variant="outline",
                         is_attached=True,
                     ),
@@ -194,16 +198,16 @@ async def test_submit(driver, form_submit: AppHarness):
     for _ in range(3):
         buttons[1].click()
 
-    checkbox_input = driver.find_element(By.CLASS_NAME, "chakra-checkbox__control")
+    checkbox_input = driver.find_element(By.XPATH, "//button[@role='checkbox']")
     checkbox_input.click()
 
-    switch_input = driver.find_element(By.CLASS_NAME, "chakra-switch__track")
+    switch_input = driver.find_element(By.XPATH, "//button[@role='switch']")
     switch_input.click()
 
-    radio_buttons = driver.find_elements(By.CLASS_NAME, "chakra-radio__control")
+    radio_buttons = driver.find_elements(By.XPATH, "//button[@role='radio']")
     radio_buttons[1].click()
 
-    textarea_input = driver.find_element(By.CLASS_NAME, "chakra-textarea")
+    textarea_input = driver.find_element(By.TAG_NAME, "textarea")
     textarea_input.send_keys("Some", Keys.ENTER, "Text")
 
     debounce_input = driver.find_element(by, "debounce_input")
@@ -213,7 +217,7 @@ async def test_submit(driver, form_submit: AppHarness):
 
     prev_url = driver.current_url
 
-    submit_input = driver.find_element(By.CLASS_NAME, "chakra-button")
+    submit_input = driver.find_element(By.CLASS_NAME, "rt-Button")
     submit_input.click()
 
     async def get_form_data():

integration/test_input.py

@@ -21,16 +21,16 @@ def FullyControlledInput():
     @app.add_page
     def index():
         return rx.fragment(
-            rx.input(
+            rx.chakra.input(
                 value=State.router.session.client_token, is_read_only=True, id="token"
             ),
-            rx.input(
+            rx.chakra.input(
                 id="debounce_input_input",
                 on_change=State.set_text,  # type: ignore
                 value=State.text,
             ),
-            rx.input(value=State.text, id="value_input", is_read_only=True),
-            rx.input(on_change=State.set_text, id="on_change_input"),  # type: ignore
+            rx.chakra.input(value=State.text, id="value_input", is_read_only=True),
+            rx.chakra.input(on_change=State.set_text, id="on_change_input"),  # type: ignore
             rx.el.input(
                 value=State.text,
                 id="plain_value_input",

integration/test_login_flow.py

@@ -28,7 +28,7 @@ def LoginSample():
             yield rx.redirect("/")
 
     def index():
-        return rx.Cond.create(
+        return rx.cond(
             State.is_hydrated & State.auth_token,  # type: ignore
             rx.vstack(
                 rx.heading(State.auth_token, id="auth-token"),

integration/test_server_side_event.py

@@ -38,12 +38,12 @@ def ServerSideEvent():
     @app.add_page
     def index():
         return rx.fragment(
-            rx.input(
+            rx.chakra.input(
                 id="token", value=SSState.router.session.client_token, is_read_only=True
             ),
-            rx.input(default_value="a", id="a"),
-            rx.input(default_value="b", id="b"),
-            rx.input(default_value="c", id="c"),
+            rx.chakra.input(default_value="a", id="a"),
+            rx.chakra.input(default_value="b", id="b"),
+            rx.chakra.input(default_value="c", id="c"),
             rx.button(
                 "Clear Immediate",
                 id="clear_immediate",

integration/test_state_inheritance.py

@@ -90,7 +90,7 @@ def StateInheritance():
 
     def index() -> rx.Component:
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 id="token", value=Base1.router.session.client_token, is_read_only=True
             ),
             # Base 1

integration/test_table.py

@@ -31,13 +31,13 @@ def Table():
     @app.add_page
     def index():
         return rx.center(
-            rx.input(
+            rx.chakra.input(
                 id="token",
                 value=TableState.router.session.client_token,
                 is_read_only=True,
             ),
-            rx.table_container(
-                rx.table(
+            rx.chakra.table_container(
+                rx.chakra.table(
                     headers=TableState.headers,
                     rows=TableState.rows,
                     footers=TableState.footers,
@@ -52,36 +52,36 @@ def Table():
     @app.add_page
     def another():
         return rx.center(
-            rx.table_container(
-                rx.table(  # type: ignore
-                    rx.thead(  # type: ignore
-                        rx.tr(  # type: ignore
-                            rx.th("Name"),
-                            rx.th("Age"),
-                            rx.th("Location"),
+            rx.chakra.table_container(
+                rx.chakra.table(  # type: ignore
+                    rx.chakra.thead(  # type: ignore
+                        rx.chakra.tr(  # type: ignore
+                            rx.chakra.th("Name"),
+                            rx.chakra.th("Age"),
+                            rx.chakra.th("Location"),
                         )
                     ),
-                    rx.tbody(  # type: ignore
-                        rx.tr(  # type: ignore
-                            rx.td("John"),
-                            rx.td(30),
-                            rx.td("New York"),
+                    rx.chakra.tbody(  # type: ignore
+                        rx.chakra.tr(  # type: ignore
+                            rx.chakra.td("John"),
+                            rx.chakra.td(30),
+                            rx.chakra.td("New York"),
                         ),
-                        rx.tr(  # type: ignore
-                            rx.td("Jane"),
-                            rx.td(31),
-                            rx.td("San Francisco"),
+                        rx.chakra.tr(  # type: ignore
+                            rx.chakra.td("Jane"),
+                            rx.chakra.td(31),
+                            rx.chakra.td("San Francisco"),
                         ),
-                        rx.tr(  # type: ignore
-                            rx.td("Joe"),
-                            rx.td(32),
-                            rx.td("Los Angeles"),
+                        rx.chakra.tr(  # type: ignore
+                            rx.chakra.td("Joe"),
+                            rx.chakra.td(32),
+                            rx.chakra.td("Los Angeles"),
                         ),
                     ),
-                    rx.tfoot(  # type: ignore
-                        rx.tr(rx.td("footer1"), rx.td("footer2"), rx.td("footer3"))  # type: ignore
+                    rx.chakra.tfoot(  # type: ignore
+                        rx.chakra.tr(rx.chakra.td("footer1"), rx.chakra.td("footer2"), rx.chakra.td("footer3"))  # type: ignore
                     ),
-                    rx.table_caption("random caption"),
+                    rx.chakra.table_caption("random caption"),
                     variant="striped",
                     color_scheme="teal",
                 )

integration/test_tailwind.py

@@ -30,7 +30,7 @@ def TailwindApp(
 
     def index():
         return rx.el.div(
-            rx.text(paragraph_text, class_name=paragraph_class_name),
+            rx.chakra.text(paragraph_text, class_name=paragraph_class_name),
             rx.el.p(paragraph_text, class_name=paragraph_class_name),
             rdxt.text(paragraph_text, as_="p", class_name=paragraph_class_name),
             id="p-content",

integration/test_upload.py

@@ -41,7 +41,7 @@ def UploadFile():
 
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=UploadState.router.session.client_token,
                 is_read_only=True,
                 id="token",
@@ -61,7 +61,7 @@ def UploadFile():
             rx.box(
                 rx.foreach(
                     rx.selected_files,
-                    lambda f: rx.text(f),
+                    lambda f: rx.text(f, as_="p"),
                 ),
                 id="selected_files",
             ),
@@ -91,7 +91,7 @@ def UploadFile():
             rx.box(
                 rx.foreach(
                     rx.selected_files("secondary"),
-                    lambda f: rx.text(f),
+                    lambda f: rx.text(f, as_="p"),
                 ),
                 id="selected_files_secondary",
             ),

integration/test_var_operations.py

@@ -532,7 +532,7 @@ def VarOperations():
                 VarOperationState.html_str,
                 id="html_str",
             ),
-            rx.highlight(
+            rx.chakra.highlight(
                 "second",
                 query=[VarOperationState.str_var2],
             ),
@@ -542,14 +542,15 @@ def VarOperations():
             rx.text(rx.Var.range(0, 3).join(","), id="list_join_range4"),
             rx.box(
                 rx.foreach(
-                    rx.Var.range(0, 2), lambda x: rx.text(VarOperationState.list1[x])
+                    rx.Var.range(0, 2),
+                    lambda x: rx.text(VarOperationState.list1[x], as_="p"),
                 ),
                 id="foreach_list_arg",
             ),
             rx.box(
                 rx.foreach(
                     rx.Var.range(0, 2),
-                    lambda x, ix: rx.text(VarOperationState.list1[ix]),
+                    lambda x, ix: rx.text(VarOperationState.list1[ix], as_="p"),
                 ),
                 id="foreach_list_ix",
             ),
@@ -558,7 +559,7 @@ def VarOperations():
                     rx.Var.create_safe(list(range(0, 3))).to(list[int]),
                     lambda x: rx.foreach(
                         rx.Var.range(x),
-                        lambda y: rx.text(VarOperationState.list1[y]),
+                        lambda y: rx.text(VarOperationState.list1[y], as_="p"),
                     ),
                 ),
                 id="foreach_list_nested",

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "reflex"
-version = "0.3.10"
+version = "0.4.0"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [

reflex/.templates/apps/blank/code/blank.py

@@ -1,4 +1,5 @@
 """Welcome to Reflex! This file outlines the steps to create a basic app."""
+
 from rxconfig import config
 
 import reflex as rx
@@ -10,35 +11,25 @@ filename = f"{config.app_name}/{config.app_name}.py"
 class State(rx.State):
     """The app state."""
 
-    pass
-
 
 def index() -> rx.Component:
-    return rx.fragment(
-        rx.color_mode_button(rx.color_mode_icon(), float="right"),
+    return rx.center(
+        rx.theme_panel(),
         rx.vstack(
-            rx.heading("Welcome to Reflex!", font_size="2em"),
-            rx.box("Get started by editing ", rx.code(filename, font_size="1em")),
-            rx.link(
+            rx.heading("Welcome to Reflex!", size="9"),
+            rx.text("Get started by editing ", rx.code(filename)),
+            rx.button(
                 "Check out our docs!",
-                href=docs_url,
-                border="0.1em solid",
-                padding="0.5em",
-                border_radius="0.5em",
-                _hover={
-                    "color": rx.color_mode_cond(
-                        light="rgb(107,99,246)",
-                        dark="rgb(179, 175, 255)",
-                    )
-                },
+                on_click=lambda: rx.redirect(docs_url),
+                size="4",
             ),
-            spacing="1.5em",
+            align="center",
+            spacing="7",
             font_size="2em",
-            padding_top="10%",
         ),
+        height="100vh",
     )
 
 
-# Create app instance and add index page.
 app = rx.App()
 app.add_page(index)

reflex/.templates/apps/demo/code/demo.py

@@ -25,23 +25,27 @@ def template(main_content: Callable[[], rx.Component]) -> rx.Component:
     Returns:
         rx.Component: The template for each page of the app.
     """
-    menu_button = rx.box(
-        rx.menu(
-            rx.menu_button(
-                rx.icon(
+    menu_button = rx.chakra.box(
+        rx.chakra.menu(
+            rx.chakra.menu_button(
+                rx.chakra.icon(
                     tag="hamburger",
                     size="4em",
                     color=text_color,
                 ),
             ),
-            rx.menu_list(
-                rx.menu_item(rx.link("Home", href="/", width="100%")),
-                rx.menu_divider(),
-                rx.menu_item(
-                    rx.link("About", href="https://github.com/reflex-dev", width="100%")
+            rx.chakra.menu_list(
+                rx.chakra.menu_item(rx.chakra.link("Home", href="/", width="100%")),
+                rx.chakra.menu_divider(),
+                rx.chakra.menu_item(
+                    rx.chakra.link(
+                        "About", href="https://github.com/reflex-dev", width="100%"
+                    )
                 ),
-                rx.menu_item(
-                    rx.link("Contact", href="mailto:founders@=reflex.dev", width="100%")
+                rx.chakra.menu_item(
+                    rx.chakra.link(
+                        "Contact", href="mailto:founders@=reflex.dev", width="100%"
+                    )
                 ),
             ),
         ),
@@ -51,10 +55,10 @@ def template(main_content: Callable[[], rx.Component]) -> rx.Component:
         z_index="500",
     )
 
-    return rx.hstack(
+    return rx.chakra.hstack(
         sidebar(),
         main_content(),
-        rx.spacer(),
+        rx.chakra.spacer(),
         menu_button,
         align_items="flex-start",
         transition="left 0.5s, width 0.5s",

reflex/.templates/apps/demo/code/pages/chatapp.py

@@ -13,8 +13,8 @@ def chatapp_page() -> rx.Component:
     Returns:
         The UI for the main app.
     """
-    return rx.box(
-        rx.vstack(
+    return rx.chakra.box(
+        rx.chakra.vstack(
             navbar(),
             chat.chat(),
             chat.action_bar(),

reflex/.templates/apps/demo/code/pages/datatable.py

@@ -129,10 +129,10 @@ class DataTableState(State):
     ]
 
 
-code_show = """rx.hstack(
-    rx.divider(orientation="vertical", height="100vh", border="solid black 1px"),
-    rx.vstack(
-        rx.box(
+code_show = """rx.chakra.hstack(
+    rx.chakra.divider(orientation="vertical", height="100vh", border="solid black 1px"),
+    rx.chakra.vstack(
+        rx.chakra.box(
             rx.data_editor(
                 columns=DataTableState.cols,
                 data=DataTableState.data,
@@ -147,7 +147,7 @@ code_show = """rx.hstack(
                 height="80vh",
             ),
         ),
-        rx.spacer(),
+        rx.chakra.spacer(),
         height="100vh",
         spacing="25",
     ),
@@ -270,15 +270,15 @@ def datatable_page() -> rx.Component:
     Returns:
         rx.Component: The UI for the settings page.
     """
-    return rx.box(
-        rx.vstack(
-            rx.heading(
+    return rx.chakra.box(
+        rx.chakra.vstack(
+            rx.chakra.heading(
                 "Data Table Demo",
                 font_size="3em",
             ),
-            rx.hstack(
-                rx.vstack(
-                    rx.box(
+            rx.chakra.hstack(
+                rx.chakra.vstack(
+                    rx.chakra.box(
                         rx.data_editor(
                             columns=DataTableState.cols,
                             data=DataTableState.data,
@@ -292,20 +292,20 @@ def datatable_page() -> rx.Component:
                             width="80vw",
                         ),
                     ),
-                    rx.spacer(),
+                    rx.chakra.spacer(),
                     spacing="25",
                 ),
             ),
-            rx.tabs(
-                rx.tab_list(
-                    rx.tab("Code", style=tab_style),
-                    rx.tab("Data", style=tab_style),
-                    rx.tab("State", style=tab_style),
-                    rx.tab("Styling", style=tab_style),
+            rx.chakra.tabs(
+                rx.chakra.tab_list(
+                    rx.chakra.tab("Code", style=tab_style),
+                    rx.chakra.tab("Data", style=tab_style),
+                    rx.chakra.tab("State", style=tab_style),
+                    rx.chakra.tab("Styling", style=tab_style),
                     padding_x=0,
                 ),
-                rx.tab_panels(
-                    rx.tab_panel(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             code_show,
                             language="python",
@@ -315,7 +315,7 @@ def datatable_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             data_show,
                             language="python",
@@ -325,7 +325,7 @@ def datatable_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             state_show,
                             language="python",
@@ -335,7 +335,7 @@ def datatable_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             darkTheme_show,
                             language="python",

reflex/.templates/apps/demo/code/pages/forms.py

@@ -4,21 +4,21 @@ import reflex as rx
 from ..states.form_state import FormState, UploadState
 from ..styles import *
 
-forms_1_code = """rx.vstack(
-    rx.form(
-        rx.vstack(
-            rx.input(
+forms_1_code = """rx.chakra.vstack(
+    rx.chakra.form(
+        rx.chakra.vstack(
+            rx.chakra.input(
                 placeholder="First Name",
                 id="first_name",
             ),
-            rx.input(
+            rx.chakra.input(
                 placeholder="Last Name", id="last_name"
             ),
-            rx.hstack(
-                rx.checkbox("Checked", id="check"),
-                rx.switch("Switched", id="switch"),
+            rx.chakra.hstack(
+                rx.chakra.checkbox("Checked", id="check"),
+                rx.chakra.switch("Switched", id="switch"),
             ),
-            rx.button("Submit", 
+            rx.chakra.button("Submit", 
                        type_="submit", 
                        bg="#ecfdf5",
                        color="#047857",
@@ -27,9 +27,9 @@ forms_1_code = """rx.vstack(
         ),
         on_submit=FormState.handle_submit,
     ),
-    rx.divider(),
-    rx.heading("Results"),
-    rx.text(FormState.form_data.to_string()),
+    rx.chakra.divider(),
+    rx.chakra.heading("Results"),
+    rx.chakra.text(FormState.form_data.to_string()),
     width="100%",
 )"""
 
@@ -44,35 +44,35 @@ forms_1_state = """class FormState(rx.State):
         self.form_data = form_data"""
 
 
-forms_2_code = """rx.vstack(
+forms_2_code = """rx.chakra.vstack(
     rx.upload(
-        rx.vstack(
-            rx.button(
+        rx.chakra.vstack(
+            rx.chakra.button(
                 "Select File",
                 color=color,
                 bg="white",
                 border=f"1px solid {color}",
             ),
-            rx.text(
+            rx.chakra.text(
                 "Drag and drop files here or click to select files"
             ),
         ),
         border=f"1px dotted {color}",
         padding="5em",
     ),
-    rx.hstack(rx.foreach(rx.selected_files, rx.text)),
-    rx.button(
+    rx.chakra.hstack(rx.foreach(rx.selected_files, rx.chakra.text)),
+    rx.chakra.button(
         "Upload",
         on_click=lambda: UploadState.handle_upload(
             rx.upload_files()
         ),
     ),
-    rx.button(
+    rx.chakra.button(
         "Clear",
         on_click=rx.clear_selected_files,
     ),
     rx.foreach(
-        UploadState.img, lambda img: rx.image(src=img, width="20%", height="auto",)
+        UploadState.img, lambda img: rx.chakra.image(src=img, width="20%", height="auto",)
     ),
     padding="5em",
     width="100%",
@@ -109,25 +109,25 @@ def forms_page() -> rx.Component:
     Returns:
         rx.Component: The UI for the settings page.
     """
-    return rx.box(
-        rx.vstack(
-            rx.heading(
+    return rx.chakra.box(
+        rx.chakra.vstack(
+            rx.chakra.heading(
                 "Forms Demo",
                 font_size="3em",
             ),
-            rx.vstack(
-                rx.form(
-                    rx.vstack(
-                        rx.input(
+            rx.chakra.vstack(
+                rx.chakra.form(
+                    rx.chakra.vstack(
+                        rx.chakra.input(
                             placeholder="First Name",
                             id="first_name",
                         ),
-                        rx.input(placeholder="Last Name", id="last_name"),
-                        rx.hstack(
-                            rx.checkbox("Checked", id="check"),
-                            rx.switch("Switched", id="switch"),
+                        rx.chakra.input(placeholder="Last Name", id="last_name"),
+                        rx.chakra.hstack(
+                            rx.chakra.checkbox("Checked", id="check"),
+                            rx.chakra.switch("Switched", id="switch"),
                         ),
-                        rx.button(
+                        rx.chakra.button(
                             "Submit",
                             type_="submit",
                             bg="#ecfdf5",
@@ -137,19 +137,19 @@ def forms_page() -> rx.Component:
                     ),
                     on_submit=FormState.handle_submit,
                 ),
-                rx.divider(),
-                rx.heading("Results"),
-                rx.text(FormState.form_data.to_string()),
+                rx.chakra.divider(),
+                rx.chakra.heading("Results"),
+                rx.chakra.text(FormState.form_data.to_string()),
                 width="100%",
             ),
-            rx.tabs(
-                rx.tab_list(
-                    rx.tab("Code", style=tab_style),
-                    rx.tab("State", style=tab_style),
+            rx.chakra.tabs(
+                rx.chakra.tab_list(
+                    rx.chakra.tab("Code", style=tab_style),
+                    rx.chakra.tab("State", style=tab_style),
                     padding_x=0,
                 ),
-                rx.tab_panels(
-                    rx.tab_panel(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             forms_1_code,
                             language="python",
@@ -159,7 +159,7 @@ def forms_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             forms_1_state,
                             language="python",
@@ -177,34 +177,36 @@ def forms_page() -> rx.Component:
                 width="100%",
                 padding_top=".5em",
             ),
-            rx.heading("Upload Example", font_size="3em"),
-            rx.text("Try uploading some images and see how they look."),
-            rx.vstack(
+            rx.chakra.heading("Upload Example", font_size="3em"),
+            rx.chakra.text("Try uploading some images and see how they look."),
+            rx.chakra.vstack(
                 rx.upload(
-                    rx.vstack(
-                        rx.button(
+                    rx.chakra.vstack(
+                        rx.chakra.button(
                             "Select File",
                             color=color,
                             bg="white",
                             border=f"1px solid {color}",
                         ),
-                        rx.text("Drag and drop files here or click to select files"),
+                        rx.chakra.text(
+                            "Drag and drop files here or click to select files"
+                        ),
                     ),
                     border=f"1px dotted {color}",
                     padding="5em",
                 ),
-                rx.hstack(rx.foreach(rx.selected_files, rx.text)),
-                rx.button(
+                rx.chakra.hstack(rx.foreach(rx.selected_files, rx.chakra.text)),
+                rx.chakra.button(
                     "Upload",
                     on_click=lambda: UploadState.handle_upload(rx.upload_files()),
                 ),
-                rx.button(
+                rx.chakra.button(
                     "Clear",
                     on_click=rx.clear_selected_files,
                 ),
                 rx.foreach(
                     UploadState.img,
-                    lambda img: rx.image(
+                    lambda img: rx.chakra.image(
                         src=img,
                         width="20%",
                         height="auto",
@@ -213,14 +215,14 @@ def forms_page() -> rx.Component:
                 padding="5em",
                 width="100%",
             ),
-            rx.tabs(
-                rx.tab_list(
-                    rx.tab("Code", style=tab_style),
-                    rx.tab("State", style=tab_style),
+            rx.chakra.tabs(
+                rx.chakra.tab_list(
+                    rx.chakra.tab("Code", style=tab_style),
+                    rx.chakra.tab("State", style=tab_style),
                     padding_x=0,
                 ),
-                rx.tab_panels(
-                    rx.tab_panel(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             forms_2_code,
                             language="python",
@@ -230,7 +232,7 @@ def forms_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             forms_2_state,
                             language="python",

reflex/.templates/apps/demo/code/pages/graphing.py

@@ -56,19 +56,19 @@ graph_2_code = """rx.recharts.pie_chart(
     ),
     rx.recharts.graphing_tooltip(),
 ),
-rx.vstack(
+rx.chakra.vstack(
     rx.foreach(
         PieChartState.resource_types,
-        lambda type_, i: rx.hstack(
-            rx.button(
+        lambda type_, i: rx.chakra.hstack(
+            rx.chakra.button(
                 "-",
                 on_click=PieChartState.decrement(type_),
             ),
-            rx.text(
+            rx.chakra.text(
                 type_,
                 PieChartState.resources[i]["count"],
             ),
-            rx.button(
+            rx.chakra.button(
                 "+",
                 on_click=PieChartState.increment(type_),
             ),
@@ -111,17 +111,17 @@ def graphing_page() -> rx.Component:
     Returns:
         rx.Component: The UI for the dashboard page.
     """
-    return rx.box(
-        rx.vstack(
-            rx.heading(
+    return rx.chakra.box(
+        rx.chakra.vstack(
+            rx.chakra.heading(
                 "Graphing Demo",
                 font_size="3em",
             ),
-            rx.heading(
+            rx.chakra.heading(
                 "Composed Chart",
                 font_size="2em",
             ),
-            rx.stack(
+            rx.chakra.stack(
                 rx.recharts.composed_chart(
                     rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
                     rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
@@ -136,14 +136,14 @@ def graphing_page() -> rx.Component:
                 width="100%",
                 height="20em",
             ),
-            rx.tabs(
-                rx.tab_list(
-                    rx.tab("Code", style=tab_style),
-                    rx.tab("Data", style=tab_style),
+            rx.chakra.tabs(
+                rx.chakra.tab_list(
+                    rx.chakra.tab("Code", style=tab_style),
+                    rx.chakra.tab("Data", style=tab_style),
                     padding_x=0,
                 ),
-                rx.tab_panels(
-                    rx.tab_panel(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             graph_1_code,
                             language="python",
@@ -153,7 +153,7 @@ def graphing_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             data_1_show,
                             language="python",
@@ -171,8 +171,8 @@ def graphing_page() -> rx.Component:
                 width="100%",
                 padding_top=".5em",
             ),
-            rx.heading("Interactive Example", font_size="2em"),
-            rx.hstack(
+            rx.chakra.heading("Interactive Example", font_size="2em"),
+            rx.chakra.hstack(
                 rx.recharts.pie_chart(
                     rx.recharts.pie(
                         data=PieChartState.resources,
@@ -187,19 +187,19 @@ def graphing_page() -> rx.Component:
                     ),
                     rx.recharts.graphing_tooltip(),
                 ),
-                rx.vstack(
+                rx.chakra.vstack(
                     rx.foreach(
                         PieChartState.resource_types,
-                        lambda type_, i: rx.hstack(
-                            rx.button(
+                        lambda type_, i: rx.chakra.hstack(
+                            rx.chakra.button(
                                 "-",
                                 on_click=PieChartState.decrement(type_),
                             ),
-                            rx.text(
+                            rx.chakra.text(
                                 type_,
                                 PieChartState.resources[i]["count"],
                             ),
-                            rx.button(
+                            rx.chakra.button(
                                 "+",
                                 on_click=PieChartState.increment(type_),
                             ),
@@ -209,14 +209,14 @@ def graphing_page() -> rx.Component:
                 width="100%",
                 height="15em",
             ),
-            rx.tabs(
-                rx.tab_list(
-                    rx.tab("Code", style=tab_style),
-                    rx.tab("State", style=tab_style),
+            rx.chakra.tabs(
+                rx.chakra.tab_list(
+                    rx.chakra.tab("Code", style=tab_style),
+                    rx.chakra.tab("State", style=tab_style),
                     padding_x=0,
                 ),
-                rx.tab_panels(
-                    rx.tab_panel(
+                rx.chakra.tab_panels(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             graph_2_code,
                             language="python",
@@ -226,7 +226,7 @@ def graphing_page() -> rx.Component:
                         padding_x=0,
                         padding_y=".25em",
                     ),
-                    rx.tab_panel(
+                    rx.chakra.tab_panel(
                         rx.code_block(
                             graph_2_state,
                             language="python",

reflex/.templates/apps/demo/code/pages/home.py

@@ -10,39 +10,39 @@ def home_page() -> rx.Component:
     Returns:
         rx.Component: The UI for the home page.
     """
-    return rx.box(
-        rx.vstack(
-            rx.heading(
+    return rx.chakra.box(
+        rx.chakra.vstack(
+            rx.chakra.heading(
                 "Welcome to Reflex! 👋",
                 font_size="3em",
             ),
-            rx.text(
+            rx.chakra.text(
                 "Reflex is an open-source app framework built specifically to allow you to build web apps in pure python. 👈 Select a demo from the sidebar to see some examples of what Reflex can do!",
             ),
-            rx.heading(
+            rx.chakra.heading(
                 "Things to check out:",
                 font_size="2em",
             ),
-            rx.unordered_list(
-                rx.list_item(
+            rx.chakra.unordered_list(
+                rx.chakra.list_item(
                     "Take a look at ",
-                    rx.link(
+                    rx.chakra.link(
                         "reflex.dev",
                         href="https://reflex.dev",
                         color="rgb(107,99,246)",
                     ),
                 ),
-                rx.list_item(
+                rx.chakra.list_item(
                     "Check out our ",
-                    rx.link(
+                    rx.chakra.link(
                         "docs",
                         href="https://reflex.dev/docs/getting-started/introduction/",
                         color="rgb(107,99,246)",
                     ),
                 ),
-                rx.list_item(
+                rx.chakra.list_item(
                     "Ask a question in our ",
-                    rx.link(
+                    rx.chakra.link(
                         "community",
                         href="https://discord.gg/T5WSbC2YtQ",
                         color="rgb(107,99,246)",

reflex/.templates/apps/demo/code/sidebar.py

@@ -12,15 +12,15 @@ def sidebar_header() -> rx.Component:
     Returns:
         rx.Component: The sidebar header component.
     """
-    return rx.hstack(
-        rx.image(
+    return rx.chakra.hstack(
+        rx.chakra.image(
             src="/icon.svg",
             height="2em",
         ),
-        rx.spacer(),
-        rx.link(
-            rx.center(
-                rx.image(
+        rx.chakra.spacer(),
+        rx.chakra.link(
+            rx.chakra.center(
+                rx.chakra.image(
                     src="/github.svg",
                     height="3em",
                     padding="0.5em",
@@ -46,10 +46,10 @@ def sidebar_footer() -> rx.Component:
     Returns:
         rx.Component: The sidebar footer component.
     """
-    return rx.hstack(
-        rx.link(
-            rx.center(
-                rx.image(
+    return rx.chakra.hstack(
+        rx.chakra.link(
+            rx.chakra.center(
+                rx.chakra.image(
                     src="/paneleft.svg",
                     height="2em",
                     padding="0.5em",
@@ -65,15 +65,15 @@ def sidebar_footer() -> rx.Component:
             left=rx.cond(State.sidebar_displayed, "0px", "20.5em"),
             **overlapping_button_style,
         ),
-        rx.spacer(),
-        rx.link(
-            rx.text(
+        rx.chakra.spacer(),
+        rx.chakra.link(
+            rx.chakra.text(
                 "Docs",
             ),
             href="https://reflex.dev/docs/getting-started/introduction/",
         ),
-        rx.link(
-            rx.text(
+        rx.chakra.link(
+            rx.chakra.text(
                 "Blog",
             ),
             href="https://reflex.dev/blog/",
@@ -95,14 +95,14 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
     Returns:
         rx.Component: The sidebar item component.
     """
-    return rx.link(
-        rx.hstack(
-            rx.image(
+    return rx.chakra.link(
+        rx.chakra.hstack(
+            rx.chakra.image(
                 src=icon,
                 height="2.5em",
                 padding="0.5em",
             ),
-            rx.text(
+            rx.chakra.text(
                 text,
             ),
             bg=rx.cond(
@@ -131,10 +131,10 @@ def sidebar() -> rx.Component:
     Returns:
         rx.Component: The sidebar component.
     """
-    return rx.box(
-        rx.vstack(
+    return rx.chakra.box(
+        rx.chakra.vstack(
             sidebar_header(),
-            rx.vstack(
+            rx.chakra.vstack(
                 sidebar_item(
                     "Welcome",
                     "/github.svg",
@@ -165,7 +165,7 @@ def sidebar() -> rx.Component:
                 align_items="flex-start",
                 padding="1em",
             ),
-            rx.spacer(),
+            rx.chakra.spacer(),
             sidebar_footer(),
             height="100dvh",
         ),

reflex/.templates/apps/demo/code/styles.py

@@ -46,12 +46,12 @@ overlapping_button_style = {
 }
 
 base_style = {
-    rx.MenuButton: {
+    rx.chakra.MenuButton: {
         "width": "3em",
         "height": "3em",
         **overlapping_button_style,
     },
-    rx.MenuItem: hover_accent_bg,
+    rx.chakra.MenuItem: hover_accent_bg,
 }
 
 tab_style = {

reflex/.templates/apps/demo/code/webui/components/chat.py

@@ -14,9 +14,9 @@ def message(qa: QA) -> rx.Component:
     Returns:
         A component displaying the question/answer pair.
     """
-    return rx.box(
-        rx.box(
-            rx.text(
+    return rx.chakra.box(
+        rx.chakra.box(
+            rx.chakra.text(
                 qa.question,
                 bg=styles.border_color,
                 shadow=styles.shadow_light,
@@ -25,8 +25,8 @@ def message(qa: QA) -> rx.Component:
             text_align="right",
             margin_top="1em",
         ),
-        rx.box(
-            rx.text(
+        rx.chakra.box(
+            rx.chakra.text(
                 qa.answer,
                 bg=styles.accent_color,
                 shadow=styles.shadow_light,
@@ -45,8 +45,8 @@ def chat() -> rx.Component:
     Returns:
         A component displaying all the messages in a single conversation.
     """
-    return rx.vstack(
-        rx.box(rx.foreach(State.chats[State.current_chat], message)),
+    return rx.chakra.vstack(
+        rx.chakra.box(rx.foreach(State.chats[State.current_chat], message)),
         py="8",
         flex="1",
         width="100%",
@@ -55,7 +55,7 @@ def chat() -> rx.Component:
         align_self="center",
         overflow="hidden",
         padding_bottom="5em",
-        **styles.base_style[rx.Vstack],
+        **styles.base_style[rx.chakra.Vstack],
     )
 
 
@@ -65,12 +65,12 @@ def action_bar() -> rx.Component:
     Returns:
         The action bar to send a new message.
     """
-    return rx.box(
-        rx.vstack(
-            rx.form(
-                rx.form_control(
-                    rx.hstack(
-                        rx.input(
+    return rx.chakra.box(
+        rx.chakra.vstack(
+            rx.chakra.form(
+                rx.chakra.form_control(
+                    rx.chakra.hstack(
+                        rx.chakra.input(
                             placeholder="Type something...",
                             value=State.question,
                             on_change=State.set_question,
@@ -78,24 +78,24 @@ def action_bar() -> rx.Component:
                             _hover={"border_color": styles.accent_color},
                             style=styles.input_style,
                         ),
-                        rx.button(
+                        rx.chakra.button(
                             rx.cond(
                                 State.processing,
                                 loading_icon(height="1em"),
-                                rx.text("Send"),
+                                rx.chakra.text("Send"),
                             ),
                             type_="submit",
                             _hover={"bg": styles.accent_color},
                             style=styles.input_style,
                         ),
-                        **styles.base_style[rx.Hstack],
+                        **styles.base_style[rx.chakra.Hstack],
                     ),
                     is_disabled=State.processing,
                 ),
                 on_submit=State.process_question,
                 width="100%",
             ),
-            rx.text(
+            rx.chakra.text(
                 "ReflexGPT may return factually incorrect or misleading responses. Use discretion.",
                 font_size="xs",
                 color="#fff6",
@@ -104,7 +104,7 @@ def action_bar() -> rx.Component:
             width="100%",
             max_w="3xl",
             mx="auto",
-            **styles.base_style[rx.Vstack],
+            **styles.base_style[rx.chakra.Vstack],
         ),
         position="sticky",
         bottom="0",

reflex/.templates/apps/demo/code/webui/components/modal.py

@@ -9,13 +9,13 @@ def modal() -> rx.Component:
     Returns:
         The modal component.
     """
-    return rx.modal(
-        rx.modal_overlay(
-            rx.modal_content(
-                rx.modal_header(
-                    rx.hstack(
-                        rx.text("Create new chat"),
-                        rx.icon(
+    return rx.chakra.modal(
+        rx.chakra.modal_overlay(
+            rx.chakra.modal_content(
+                rx.chakra.modal_header(
+                    rx.chakra.hstack(
+                        rx.chakra.text("Create new chat"),
+                        rx.chakra.icon(
                             tag="close",
                             font_size="sm",
                             on_click=State.toggle_modal,
@@ -27,8 +27,8 @@ def modal() -> rx.Component:
                         justify_content="space-between",
                     )
                 ),
-                rx.modal_body(
-                    rx.input(
+                rx.chakra.modal_body(
+                    rx.chakra.input(
                         placeholder="Type something...",
                         on_blur=State.set_new_chat_name,
                         bg="#222",
@@ -36,8 +36,8 @@ def modal() -> rx.Component:
                         _placeholder={"color": "#fffa"},
                     ),
                 ),
-                rx.modal_footer(
-                    rx.button(
+                rx.chakra.modal_footer(
+                    rx.chakra.button(
                         "Create",
                         bg="#5535d4",
                         box_shadow="md",

reflex/.templates/apps/demo/code/webui/components/navbar.py

@@ -5,18 +5,18 @@ from ...webui.state import State
 
 
 def navbar():
-    return rx.box(
-        rx.hstack(
-            rx.hstack(
-                rx.icon(
+    return rx.chakra.box(
+        rx.chakra.hstack(
+            rx.chakra.hstack(
+                rx.chakra.icon(
                     tag="hamburger",
                     mr=4,
                     on_click=State.toggle_drawer,
                     cursor="pointer",
                 ),
-                rx.link(
-                    rx.box(
-                        rx.image(src="favicon.ico", width=30, height="auto"),
+                rx.chakra.link(
+                    rx.chakra.box(
+                        rx.chakra.image(src="favicon.ico", width=30, height="auto"),
                         p="1",
                         border_radius="6",
                         bg="#F0F0F0",
@@ -24,17 +24,19 @@ def navbar():
                     ),
                     href="/",
                 ),
-                rx.breadcrumb(
-                    rx.breadcrumb_item(
-                        rx.heading("ReflexGPT", size="sm"),
+                rx.chakra.breadcrumb(
+                    rx.chakra.breadcrumb_item(
+                        rx.chakra.heading("ReflexGPT", size="sm"),
                     ),
-                    rx.breadcrumb_item(
-                        rx.text(State.current_chat, size="sm", font_weight="normal"),
+                    rx.chakra.breadcrumb_item(
+                        rx.chakra.text(
+                            State.current_chat, size="sm", font_weight="normal"
+                        ),
                     ),
                 ),
             ),
-            rx.hstack(
-                rx.button(
+            rx.chakra.hstack(
+                rx.chakra.button(
                     "+ New chat",
                     bg=styles.accent_color,
                     px="4",
@@ -42,15 +44,15 @@ def navbar():
                     h="auto",
                     on_click=State.toggle_modal,
                 ),
-                rx.menu(
-                    rx.menu_button(
-                        rx.avatar(name="User", size="md"),
-                        rx.box(),
+                rx.chakra.menu(
+                    rx.chakra.menu_button(
+                        rx.chakra.avatar(name="User", size="md"),
+                        rx.chakra.box(),
                     ),
-                    rx.menu_list(
-                        rx.menu_item("Help"),
-                        rx.menu_divider(),
-                        rx.menu_item("Settings"),
+                    rx.chakra.menu_list(
+                        rx.chakra.menu_item("Help"),
+                        rx.chakra.menu_divider(),
+                        rx.chakra.menu_item("Settings"),
                     ),
                 ),
                 spacing="8",

reflex/.templates/apps/demo/code/webui/components/sidebar.py

@@ -13,16 +13,16 @@ def sidebar_chat(chat: str) -> rx.Component:
     Returns:
         The sidebar chat item.
     """
-    return rx.hstack(
-        rx.box(
+    return rx.chakra.hstack(
+        rx.chakra.box(
             chat,
             on_click=lambda: State.set_chat(chat),
             style=styles.sidebar_style,
             color=styles.icon_color,
             flex="1",
         ),
-        rx.box(
-            rx.icon(
+        rx.chakra.box(
+            rx.chakra.icon(
                 tag="delete",
                 style=styles.icon_style,
                 on_click=State.delete_chat,
@@ -40,21 +40,21 @@ def sidebar() -> rx.Component:
     Returns:
         The sidebar component.
     """
-    return rx.drawer(
-        rx.drawer_overlay(
-            rx.drawer_content(
-                rx.drawer_header(
-                    rx.hstack(
-                        rx.text("Chats"),
-                        rx.icon(
+    return rx.chakra.drawer(
+        rx.chakra.drawer_overlay(
+            rx.chakra.drawer_content(
+                rx.chakra.drawer_header(
+                    rx.chakra.hstack(
+                        rx.chakra.text("Chats"),
+                        rx.chakra.icon(
                             tag="close",
                             on_click=State.toggle_drawer,
                             style=styles.icon_style,
                         ),
                     )
                 ),
-                rx.drawer_body(
-                    rx.vstack(
+                rx.chakra.drawer_body(
+                    rx.chakra.vstack(
                         rx.foreach(State.chat_titles, lambda chat: sidebar_chat(chat)),
                         align_items="stretch",
                     )

reflex/.templates/apps/demo/code/webui/styles.py

@@ -45,43 +45,43 @@ sidebar_style = dict(
 )
 
 base_style = {
-    rx.Avatar: {
+    rx.chakra.Avatar: {
         "shadow": shadow,
         "color": text_light_color,
         # "bg": border_color,
     },
-    rx.Button: {
+    rx.chakra.Button: {
         "shadow": shadow,
         "color": text_light_color,
         "_hover": {
             "bg": accent_dark,
         },
     },
-    rx.Menu: {
+    rx.chakra.Menu: {
         "bg": bg_dark_color,
         "border": f"red",
     },
-    rx.MenuList: {
+    rx.chakra.MenuList: {
         "bg": bg_dark_color,
         "border": f"1.5px solid {bg_medium_color}",
     },
-    rx.MenuDivider: {
+    rx.chakra.MenuDivider: {
         "border": f"1px solid {bg_medium_color}",
     },
-    rx.MenuItem: {
+    rx.chakra.MenuItem: {
         "bg": bg_dark_color,
         "color": text_light_color,
     },
-    rx.DrawerContent: {
+    rx.chakra.DrawerContent: {
         "bg": bg_dark_color,
         "color": text_light_color,
         "opacity": "0.9",
     },
-    rx.Hstack: {
+    rx.chakra.Hstack: {
         "align_items": "center",
         "justify_content": "space-between",
     },
-    rx.Vstack: {
+    rx.chakra.Vstack: {
         "align_items": "stretch",
         "justify_content": "space-between",
     },

reflex/.templates/apps/sidebar/code/components/sidebar.py

@@ -11,17 +11,17 @@ def sidebar_header() -> rx.Component:
     Returns:
         The sidebar header component.
     """
-    return rx.hstack(
+    return rx.chakra.hstack(
         # The logo.
-        rx.image(
+        rx.chakra.image(
             src="/icon.svg",
             height="2em",
         ),
-        rx.spacer(),
+        rx.chakra.spacer(),
         # Link to Reflex GitHub repo.
-        rx.link(
-            rx.center(
-                rx.image(
+        rx.chakra.link(
+            rx.chakra.center(
+                rx.chakra.image(
                     src="/github.svg",
                     height="3em",
                     padding="0.5em",
@@ -47,14 +47,14 @@ def sidebar_footer() -> rx.Component:
     Returns:
         The sidebar footer component.
     """
-    return rx.hstack(
-        rx.spacer(),
-        rx.link(
-            rx.text("Docs"),
+    return rx.chakra.hstack(
+        rx.chakra.spacer(),
+        rx.chakra.link(
+            rx.chakra.text("Docs"),
             href="https://reflex.dev/docs/getting-started/introduction/",
         ),
-        rx.link(
-            rx.text("Blog"),
+        rx.chakra.link(
+            rx.chakra.text("Blog"),
             href="https://reflex.dev/blog/",
         ),
         width="100%",
@@ -79,14 +79,14 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
         (rx.State.router.page.path == "/") & text == "Home"
     )
 
-    return rx.link(
-        rx.hstack(
-            rx.image(
+    return rx.chakra.link(
+        rx.chakra.hstack(
+            rx.chakra.image(
                 src=icon,
                 height="2.5em",
                 padding="0.5em",
             ),
-            rx.text(
+            rx.chakra.text(
                 text,
             ),
             bg=rx.cond(
@@ -118,10 +118,10 @@ def sidebar() -> rx.Component:
     # Get all the decorated pages and add them to the sidebar.
     from reflex.page import get_decorated_pages
 
-    return rx.box(
-        rx.vstack(
+    return rx.chakra.box(
+        rx.chakra.vstack(
             sidebar_header(),
-            rx.vstack(
+            rx.chakra.vstack(
                 *[
                     sidebar_item(
                         text=page.get("title", page["route"].strip("/").capitalize()),
@@ -135,7 +135,7 @@ def sidebar() -> rx.Component:
                 align_items="flex-start",
                 padding="1em",
             ),
-            rx.spacer(),
+            rx.chakra.spacer(),
             sidebar_footer(),
             height="100dvh",
         ),

reflex/.templates/apps/sidebar/code/pages/dashboard.py

@@ -11,11 +11,11 @@ def dashboard() -> rx.Component:
     Returns:
         The UI for the dashboard page.
     """
-    return rx.vstack(
-        rx.heading("Dashboard", font_size="3em"),
-        rx.text("Welcome to Reflex!"),
-        rx.text(
+    return rx.chakra.vstack(
+        rx.chakra.heading("Dashboard", font_size="3em"),
+        rx.chakra.text("Welcome to Reflex!"),
+        rx.chakra.text(
             "You can edit this page in ",
-            rx.code("{your_app}/pages/dashboard.py"),
+            rx.chakra.code("{your_app}/pages/dashboard.py"),
         ),
     )

reflex/.templates/apps/sidebar/code/pages/settings.py

@@ -12,11 +12,11 @@ def settings() -> rx.Component:
     Returns:
         The UI for the settings page.
     """
-    return rx.vstack(
-        rx.heading("Settings", font_size="3em"),
-        rx.text("Welcome to Reflex!"),
-        rx.text(
+    return rx.chakra.vstack(
+        rx.chakra.heading("Settings", font_size="3em"),
+        rx.chakra.text("Welcome to Reflex!"),
+        rx.chakra.text(
             "You can edit this page in ",
-            rx.code("{your_app}/pages/settings.py"),
+            rx.chakra.code("{your_app}/pages/settings.py"),
         ),
     )

reflex/.templates/apps/sidebar/code/styles.py

@@ -36,17 +36,17 @@ overlapping_button_style = {
 }
 
 base_style = {
-    rx.MenuButton: {
+    rx.chakra.MenuButton: {
         "width": "3em",
         "height": "3em",
         **overlapping_button_style,
     },
-    rx.MenuItem: hover_accent_bg,
+    rx.chakra.MenuItem: hover_accent_bg,
 }
 
 markdown_style = {
-    "code": lambda text: rx.code(text, color="#1F1944", bg="#EAE4FD"),
-    "a": lambda text, **props: rx.link(
+    "code": lambda text: rx.chakra.code(text, color="#1F1944", bg="#EAE4FD"),
+    "a": lambda text, **props: rx.chakra.link(
         text,
         **props,
         font_weight="bold",

reflex/.templates/apps/sidebar/code/templates/template.py

@@ -25,19 +25,19 @@ def menu_button() -> rx.Component:
     """
     from reflex.page import get_decorated_pages
 
-    return rx.box(
-        rx.menu(
-            rx.menu_button(
-                rx.icon(
+    return rx.chakra.box(
+        rx.chakra.menu(
+            rx.chakra.menu_button(
+                rx.chakra.icon(
                     tag="hamburger",
                     size="4em",
                     color=styles.text_color,
                 ),
             ),
-            rx.menu_list(
+            rx.chakra.menu_list(
                 *[
-                    rx.menu_item(
-                        rx.link(
+                    rx.chakra.menu_item(
+                        rx.chakra.link(
                             page["title"],
                             href=page["route"],
                             width="100%",
@@ -45,12 +45,16 @@ def menu_button() -> rx.Component:
                     )
                     for page in get_decorated_pages()
                 ],
-                rx.menu_divider(),
-                rx.menu_item(
-                    rx.link("About", href="https://github.com/reflex-dev", width="100%")
+                rx.chakra.menu_divider(),
+                rx.chakra.menu_item(
+                    rx.chakra.link(
+                        "About", href="https://github.com/reflex-dev", width="100%"
+                    )
                 ),
-                rx.menu_item(
-                    rx.link("Contact", href="mailto:founders@=reflex.dev", width="100%")
+                rx.chakra.menu_item(
+                    rx.chakra.link(
+                        "Contact", href="mailto:founders@=reflex.dev", width="100%"
+                    )
                 ),
             ),
         ),
@@ -107,10 +111,10 @@ def template(
             on_load=on_load,
         )
         def templated_page():
-            return rx.hstack(
+            return rx.chakra.hstack(
                 sidebar(),
-                rx.box(
-                    rx.box(
+                rx.chakra.box(
+                    rx.chakra.box(
                         page_content(),
                         **styles.template_content_style,
                     ),

reflex/.templates/web/utils/state.js

@@ -599,7 +599,12 @@ export const getRefValue = (ref) => {
     return;
   }
   if (ref.current.type == "checkbox") {
-    return ref.current.checked;
+    return ref.current.checked;  // chakra
+  } else if (ref.current.className.includes("rt-CheckboxButton") || ref.current.className.includes("rt-SwitchButton")) {
+    return ref.current.ariaChecked == "true";  // radix
+  } else if (ref.current.className.includes("rt-SliderRoot")) {
+    // find the actual slider
+    return ref.current.querySelector(".rt-SliderThumb").ariaValueNow;
   } else {
     //querySelector(":checked") is needed to get value from radio_group
     return ref.current.value || (ref.current.querySelector(':checked') && ref.current.querySelector(':checked').value);

reflex/__init__.py

@@ -4,6 +4,7 @@ Anything imported here will be available in the default Reflex import as `rx.*`.
 To signal to typecheckers that something should be reexported,
 we use the Flask "import name as name" syntax.
 """
+
 from __future__ import annotations
 
 import importlib
@@ -14,235 +15,99 @@ from reflex.utils import console
 from reflex.utils.format import to_snake_case
 
 _ALL_COMPONENTS = [
-    "Accordion",
-    "AccordionButton",
-    "AccordionIcon",
-    "AccordionItem",
-    "AccordionPanel",
-    "Alert",
-    "AlertDescription",
-    "AlertDialog",
-    "AlertDialogBody",
-    "AlertDialogContent",
-    "AlertDialogFooter",
-    "AlertDialogHeader",
-    "AlertDialogOverlay",
-    "AlertIcon",
-    "AlertTitle",
-    "AspectRatio",
-    "Audio",
-    "Avatar",
-    "AvatarBadge",
-    "AvatarGroup",
-    "Badge",
-    "Box",
-    "Breadcrumb",
-    "BreadcrumbItem",
-    "BreadcrumbLink",
-    "BreadcrumbSeparator",
-    "Button",
-    "ButtonGroup",
-    "Card",
-    "CardBody",
-    "CardFooter",
-    "CardHeader",
-    "Center",
-    "Checkbox",
-    "CheckboxGroup",
-    "CircularProgress",
-    "CircularProgressLabel",
-    "Circle",
-    "Code",
-    "CodeBlock",
-    "Collapse",
-    "ColorModeButton",
-    "ColorModeIcon",
-    "ColorModeSwitch",
-    "Component",
-    "Cond",
-    "ConnectionBanner",
-    "ConnectionModal",
-    "Container",
-    "DataTable",
-    "DataEditor",
-    "DataEditorTheme",
-    "DatePicker",
-    "DateTimePicker",
-    "DebounceInput",
-    "Divider",
-    "Drawer",
-    "DrawerBody",
-    "DrawerCloseButton",
-    "DrawerContent",
-    "DrawerFooter",
-    "DrawerHeader",
-    "DrawerOverlay",
-    "Editable",
-    "EditableInput",
-    "EditablePreview",
-    "EditableTextarea",
-    "Editor",
-    "Email",
-    "Fade",
-    "Flex",
-    "Foreach",
-    "Form",
-    "FormControl",
-    "FormErrorMessage",
-    "FormHelperText",
-    "FormLabel",
-    "Fragment",
-    "Grid",
-    "GridItem",
-    "Heading",
-    "Highlight",
-    "Hstack",
-    "Html",
-    "Icon",
-    "IconButton",
-    "Image",
-    "Input",
-    "InputGroup",
-    "InputLeftAddon",
-    "InputLeftElement",
-    "InputRightAddon",
-    "InputRightElement",
-    "Kbd",
-    "Link",
-    "LinkBox",
-    "LinkOverlay",
-    "List",
-    "ListItem",
-    "Markdown",
-    "Match",
-    "Menu",
-    "MenuButton",
-    "MenuDivider",
-    "MenuGroup",
-    "MenuItem",
-    "MenuItemOption",
-    "MenuList",
-    "MenuOptionGroup",
-    "Modal",
-    "ModalBody",
-    "ModalCloseButton",
-    "ModalContent",
-    "ModalFooter",
-    "ModalHeader",
-    "ModalOverlay",
-    "Moment",
-    "MultiSelect",
-    "MultiSelectOption",
-    "NextLink",
-    "NumberDecrementStepper",
-    "NumberIncrementStepper",
-    "NumberInput",
-    "NumberInputField",
-    "NumberInputStepper",
-    "Option",
-    "OrderedList",
-    "Password",
-    "PinInput",
-    "PinInputField",
-    "Plotly",
-    "Popover",
-    "PopoverAnchor",
-    "PopoverArrow",
-    "PopoverBody",
-    "PopoverCloseButton",
-    "PopoverContent",
-    "PopoverFooter",
-    "PopoverHeader",
-    "PopoverTrigger",
-    "Progress",
-    "Radio",
-    "RadioGroup",
-    "RangeSlider",
-    "RangeSliderFilledTrack",
-    "RangeSliderThumb",
-    "RangeSliderTrack",
-    "ResponsiveGrid",
-    "ScaleFade",
-    "Script",
-    "Select",
-    "Skeleton",
-    "SkeletonCircle",
-    "SkeletonText",
-    "Slide",
-    "SlideFade",
-    "Slider",
-    "SliderFilledTrack",
-    "SliderMark",
-    "SliderThumb",
-    "SliderTrack",
-    "Spacer",
-    "Span",
-    "Spinner",
-    "Square",
-    "Stack",
-    "Stat",
-    "StatArrow",
-    "StatGroup",
-    "StatHelpText",
-    "StatLabel",
-    "StatNumber",
-    "Step",
-    "StepDescription",
-    "StepIcon",
-    "StepIndicator",
-    "StepNumber",
-    "StepSeparator",
-    "StepStatus",
-    "StepTitle",
-    "Stepper",
-    "Switch",
-    "Tab",
-    "TabList",
-    "TabPanel",
-    "TabPanels",
-    "Table",
-    "TableCaption",
-    "TableContainer",
-    "Tabs",
-    "Tag",
-    "TagCloseButton",
-    "TagLabel",
-    "TagLeftIcon",
-    "TagRightIcon",
-    "Tbody",
-    "Td",
-    "Text",
-    "TextArea",
-    "Tfoot",
-    "Th",
-    "Thead",
-    "TimePicker",
-    "Tooltip",
-    "Tr",
-    "UnorderedList",
-    "Upload",
-    "Video",
-    "VisuallyHidden",
-    "Vstack",
-    "Wrap",
-    "WrapItem",
-]
-
-_ALL_COMPONENTS += [to_snake_case(component) for component in _ALL_COMPONENTS]
-_ALL_COMPONENTS += [
-    "cancel_upload",
-    "components",
+    # Core
+    "color",
+    "cond",
+    "foreach",
+    "html",
+    "match",
     "color_mode_cond",
+    "connection_banner",
+    "connection_modal",
+    "debounce_input",
+    # Base
+    "fragment",
+    "Fragment",
+    "image",
+    "script",
+    # Responsive
     "desktop_only",
-    "mobile_only",
-    "tablet_only",
     "mobile_and_tablet",
+    "mobile_only",
     "tablet_and_desktop",
-    "selected_files",
+    "tablet_only",
+    # Upload
+    "cancel_upload",
     "clear_selected_files",
+    "get_upload_dir",
+    "get_upload_url",
+    "selected_files",
+    "upload",
+    # Radix
+    "accordion",
+    "alert_dialog",
+    "aspect_ratio",
+    "avatar",
+    "badge",
+    "blockquote",
+    "box",
+    "button",
+    "callout",
+    "card",
+    "center",
+    "checkbox",
+    "code",
+    "container",
+    "context_menu",
+    "dialog",
+    "divider",
+    "drawer",
+    "flex",
+    "form",
+    "grid",
+    "heading",
+    "hover_card",
+    "hstack",
+    "icon_button",
+    "inset",
+    "input",
+    "link",
+    "menu",
+    "popover",
+    "progress",
+    "radio",
+    "scroll_area",
+    "section",
+    "select",
+    "slider",
+    "spacer",
+    "stack",
+    "switch",
+    "table",
+    "tabs",
+    "text",
+    "text_area",
+    "theme",
+    "theme_panel",
+    "tooltip",
+    "vstack",
+    # Other
+    "code_block",
+    "data_editor",
+    "data_editor_theme",
+    "data_table",
+    "plotly",
+    "audio",
+    "video",
+    "editor",
     "EditorButtonList",
     "EditorOptions",
-    "NoSSRComponent",
+    "icon",
+    "markdown",
+    "list_item",
+    "unordered_list",
+    "ordered_list",
+    "moment",
 ]
 
 _MAPPING = {
@@ -251,12 +116,13 @@ _MAPPING = {
     "reflex.base": ["base", "Base"],
     "reflex.compiler": ["compiler"],
     "reflex.compiler.utils": ["get_asset_path"],
-    "reflex.components": _ALL_COMPONENTS + ["chakra", "next"],
-    "reflex.components.component": ["memo"],
-    "reflex.components.core": ["color"],
+    "reflex.components": _ALL_COMPONENTS,
+    "reflex.components.component": ["Component", "NoSSRComponent", "memo"],
+    "reflex.components.chakra": ["chakra"],
     "reflex.components.el": ["el"],
     "reflex.components.lucide": ["lucide"],
-    "reflex.components.radix": ["radix"],
+    "reflex.components.next": ["next"],
+    "reflex.components.radix": ["radix", "color_mode"],
     "reflex.components.recharts": ["recharts"],
     "reflex.components.moment.moment": ["MomentDelta"],
     "reflex.config": ["config", "Config", "DBConfig"],
@@ -285,7 +151,7 @@ _MAPPING = {
     "reflex.page": ["page"],
     "reflex.route": ["route"],
     "reflex.state": ["state", "var", "Cookie", "LocalStorage", "State"],
-    "reflex.style": ["style", "color_mode", "toggle_color_mode"],
+    "reflex.style": ["style", "toggle_color_mode"],
     "reflex.testing": ["testing"],
     "reflex.utils": ["utils"],
     "reflex.vars": ["vars", "cached_var", "Var"],

reflex/__init__.pyi

@@ -7,450 +7,102 @@ from reflex import base as base
 from reflex.base import Base as Base
 from reflex import compiler as compiler
 from reflex.compiler.utils import get_asset_path as get_asset_path
-from reflex.components import Accordion as Accordion
-from reflex.components import AccordionButton as AccordionButton
-from reflex.components import AccordionIcon as AccordionIcon
-from reflex.components import AccordionItem as AccordionItem
-from reflex.components import AccordionPanel as AccordionPanel
-from reflex.components import Alert as Alert
-from reflex.components import AlertDescription as AlertDescription
-from reflex.components import AlertDialog as AlertDialog
-from reflex.components import AlertDialogBody as AlertDialogBody
-from reflex.components import AlertDialogContent as AlertDialogContent
-from reflex.components import AlertDialogFooter as AlertDialogFooter
-from reflex.components import AlertDialogHeader as AlertDialogHeader
-from reflex.components import AlertDialogOverlay as AlertDialogOverlay
-from reflex.components import AlertIcon as AlertIcon
-from reflex.components import AlertTitle as AlertTitle
-from reflex.components import AspectRatio as AspectRatio
-from reflex.components import Audio as Audio
-from reflex.components import Avatar as Avatar
-from reflex.components import AvatarBadge as AvatarBadge
-from reflex.components import AvatarGroup as AvatarGroup
-from reflex.components import Badge as Badge
-from reflex.components import Box as Box
-from reflex.components import Breadcrumb as Breadcrumb
-from reflex.components import BreadcrumbItem as BreadcrumbItem
-from reflex.components import BreadcrumbLink as BreadcrumbLink
-from reflex.components import BreadcrumbSeparator as BreadcrumbSeparator
-from reflex.components import Button as Button
-from reflex.components import ButtonGroup as ButtonGroup
-from reflex.components import Card as Card
-from reflex.components import CardBody as CardBody
-from reflex.components import CardFooter as CardFooter
-from reflex.components import CardHeader as CardHeader
-from reflex.components import Center as Center
-from reflex.components import Checkbox as Checkbox
-from reflex.components import CheckboxGroup as CheckboxGroup
-from reflex.components import CircularProgress as CircularProgress
-from reflex.components import CircularProgressLabel as CircularProgressLabel
-from reflex.components import Circle as Circle
-from reflex.components import Code as Code
-from reflex.components import CodeBlock as CodeBlock
-from reflex.components import Collapse as Collapse
-from reflex.components import ColorModeButton as ColorModeButton
-from reflex.components import ColorModeIcon as ColorModeIcon
-from reflex.components import ColorModeSwitch as ColorModeSwitch
-from reflex.components import Component as Component
-from reflex.components import Cond as Cond
-from reflex.components import ConnectionBanner as ConnectionBanner
-from reflex.components import ConnectionModal as ConnectionModal
-from reflex.components import Container as Container
-from reflex.components import DataTable as DataTable
-from reflex.components import DataEditor as DataEditor
-from reflex.components import DataEditorTheme as DataEditorTheme
-from reflex.components import DatePicker as DatePicker
-from reflex.components import DateTimePicker as DateTimePicker
-from reflex.components import DebounceInput as DebounceInput
-from reflex.components import Divider as Divider
-from reflex.components import Drawer as Drawer
-from reflex.components import DrawerBody as DrawerBody
-from reflex.components import DrawerCloseButton as DrawerCloseButton
-from reflex.components import DrawerContent as DrawerContent
-from reflex.components import DrawerFooter as DrawerFooter
-from reflex.components import DrawerHeader as DrawerHeader
-from reflex.components import DrawerOverlay as DrawerOverlay
-from reflex.components import Editable as Editable
-from reflex.components import EditableInput as EditableInput
-from reflex.components import EditablePreview as EditablePreview
-from reflex.components import EditableTextarea as EditableTextarea
-from reflex.components import Editor as Editor
-from reflex.components import Email as Email
-from reflex.components import Fade as Fade
-from reflex.components import Flex as Flex
-from reflex.components import Foreach as Foreach
-from reflex.components import Form as Form
-from reflex.components import FormControl as FormControl
-from reflex.components import FormErrorMessage as FormErrorMessage
-from reflex.components import FormHelperText as FormHelperText
-from reflex.components import FormLabel as FormLabel
+from reflex.components import color as color
+from reflex.components import cond as cond
+from reflex.components import foreach as foreach
+from reflex.components import html as html
+from reflex.components import match as match
+from reflex.components import color_mode_cond as color_mode_cond
+from reflex.components import connection_banner as connection_banner
+from reflex.components import connection_modal as connection_modal
+from reflex.components import debounce_input as debounce_input
+from reflex.components import fragment as fragment
 from reflex.components import Fragment as Fragment
-from reflex.components import Grid as Grid
-from reflex.components import GridItem as GridItem
-from reflex.components import Heading as Heading
-from reflex.components import Highlight as Highlight
-from reflex.components import Hstack as Hstack
-from reflex.components import Html as Html
-from reflex.components import Icon as Icon
-from reflex.components import IconButton as IconButton
-from reflex.components import Image as Image
-from reflex.components import Input as Input
-from reflex.components import InputGroup as InputGroup
-from reflex.components import InputLeftAddon as InputLeftAddon
-from reflex.components import InputLeftElement as InputLeftElement
-from reflex.components import InputRightAddon as InputRightAddon
-from reflex.components import InputRightElement as InputRightElement
-from reflex.components import Kbd as Kbd
-from reflex.components import Link as Link
-from reflex.components import LinkBox as LinkBox
-from reflex.components import LinkOverlay as LinkOverlay
-from reflex.components import List as List
-from reflex.components import ListItem as ListItem
-from reflex.components import Markdown as Markdown
-from reflex.components import Match as Match
-from reflex.components import Menu as Menu
-from reflex.components import MenuButton as MenuButton
-from reflex.components import MenuDivider as MenuDivider
-from reflex.components import MenuGroup as MenuGroup
-from reflex.components import MenuItem as MenuItem
-from reflex.components import MenuItemOption as MenuItemOption
-from reflex.components import MenuList as MenuList
-from reflex.components import MenuOptionGroup as MenuOptionGroup
-from reflex.components import Modal as Modal
-from reflex.components import ModalBody as ModalBody
-from reflex.components import ModalCloseButton as ModalCloseButton
-from reflex.components import ModalContent as ModalContent
-from reflex.components import ModalFooter as ModalFooter
-from reflex.components import ModalHeader as ModalHeader
-from reflex.components import ModalOverlay as ModalOverlay
-from reflex.components import Moment as Moment
-from reflex.components import MultiSelect as MultiSelect
-from reflex.components import MultiSelectOption as MultiSelectOption
-from reflex.components import NextLink as NextLink
-from reflex.components import NumberDecrementStepper as NumberDecrementStepper
-from reflex.components import NumberIncrementStepper as NumberIncrementStepper
-from reflex.components import NumberInput as NumberInput
-from reflex.components import NumberInputField as NumberInputField
-from reflex.components import NumberInputStepper as NumberInputStepper
-from reflex.components import Option as Option
-from reflex.components import OrderedList as OrderedList
-from reflex.components import Password as Password
-from reflex.components import PinInput as PinInput
-from reflex.components import PinInputField as PinInputField
-from reflex.components import Plotly as Plotly
-from reflex.components import Popover as Popover
-from reflex.components import PopoverAnchor as PopoverAnchor
-from reflex.components import PopoverArrow as PopoverArrow
-from reflex.components import PopoverBody as PopoverBody
-from reflex.components import PopoverCloseButton as PopoverCloseButton
-from reflex.components import PopoverContent as PopoverContent
-from reflex.components import PopoverFooter as PopoverFooter
-from reflex.components import PopoverHeader as PopoverHeader
-from reflex.components import PopoverTrigger as PopoverTrigger
-from reflex.components import Progress as Progress
-from reflex.components import Radio as Radio
-from reflex.components import RadioGroup as RadioGroup
-from reflex.components import RangeSlider as RangeSlider
-from reflex.components import RangeSliderFilledTrack as RangeSliderFilledTrack
-from reflex.components import RangeSliderThumb as RangeSliderThumb
-from reflex.components import RangeSliderTrack as RangeSliderTrack
-from reflex.components import ResponsiveGrid as ResponsiveGrid
-from reflex.components import ScaleFade as ScaleFade
-from reflex.components import Script as Script
-from reflex.components import Select as Select
-from reflex.components import Skeleton as Skeleton
-from reflex.components import SkeletonCircle as SkeletonCircle
-from reflex.components import SkeletonText as SkeletonText
-from reflex.components import Slide as Slide
-from reflex.components import SlideFade as SlideFade
-from reflex.components import Slider as Slider
-from reflex.components import SliderFilledTrack as SliderFilledTrack
-from reflex.components import SliderMark as SliderMark
-from reflex.components import SliderThumb as SliderThumb
-from reflex.components import SliderTrack as SliderTrack
-from reflex.components import Spacer as Spacer
-from reflex.components import Span as Span
-from reflex.components import Spinner as Spinner
-from reflex.components import Square as Square
-from reflex.components import Stack as Stack
-from reflex.components import Stat as Stat
-from reflex.components import StatArrow as StatArrow
-from reflex.components import StatGroup as StatGroup
-from reflex.components import StatHelpText as StatHelpText
-from reflex.components import StatLabel as StatLabel
-from reflex.components import StatNumber as StatNumber
-from reflex.components import Step as Step
-from reflex.components import StepDescription as StepDescription
-from reflex.components import StepIcon as StepIcon
-from reflex.components import StepIndicator as StepIndicator
-from reflex.components import StepNumber as StepNumber
-from reflex.components import StepSeparator as StepSeparator
-from reflex.components import StepStatus as StepStatus
-from reflex.components import StepTitle as StepTitle
-from reflex.components import Stepper as Stepper
-from reflex.components import Switch as Switch
-from reflex.components import Tab as Tab
-from reflex.components import TabList as TabList
-from reflex.components import TabPanel as TabPanel
-from reflex.components import TabPanels as TabPanels
-from reflex.components import Table as Table
-from reflex.components import TableCaption as TableCaption
-from reflex.components import TableContainer as TableContainer
-from reflex.components import Tabs as Tabs
-from reflex.components import Tag as Tag
-from reflex.components import TagCloseButton as TagCloseButton
-from reflex.components import TagLabel as TagLabel
-from reflex.components import TagLeftIcon as TagLeftIcon
-from reflex.components import TagRightIcon as TagRightIcon
-from reflex.components import Tbody as Tbody
-from reflex.components import Td as Td
-from reflex.components import Text as Text
-from reflex.components import TextArea as TextArea
-from reflex.components import Tfoot as Tfoot
-from reflex.components import Th as Th
-from reflex.components import Thead as Thead
-from reflex.components import TimePicker as TimePicker
-from reflex.components import Tooltip as Tooltip
-from reflex.components import Tr as Tr
-from reflex.components import UnorderedList as UnorderedList
-from reflex.components import Upload as Upload
-from reflex.components import Video as Video
-from reflex.components import VisuallyHidden as VisuallyHidden
-from reflex.components import Vstack as Vstack
-from reflex.components import Wrap as Wrap
-from reflex.components import WrapItem as WrapItem
+from reflex.components import image as image
+from reflex.components import script as script
+from reflex.components import desktop_only as desktop_only
+from reflex.components import mobile_and_tablet as mobile_and_tablet
+from reflex.components import mobile_only as mobile_only
+from reflex.components import tablet_and_desktop as tablet_and_desktop
+from reflex.components import tablet_only as tablet_only
+from reflex.components import cancel_upload as cancel_upload
+from reflex.components import clear_selected_files as clear_selected_files
+from reflex.components import get_upload_dir as get_upload_dir
+from reflex.components import get_upload_url as get_upload_url
+from reflex.components import selected_files as selected_files
+from reflex.components import upload as upload
 from reflex.components import accordion as accordion
-from reflex.components import accordion_button as accordion_button
-from reflex.components import accordion_icon as accordion_icon
-from reflex.components import accordion_item as accordion_item
-from reflex.components import accordion_panel as accordion_panel
-from reflex.components import alert as alert
-from reflex.components import alert_description as alert_description
 from reflex.components import alert_dialog as alert_dialog
-from reflex.components import alert_dialog_body as alert_dialog_body
-from reflex.components import alert_dialog_content as alert_dialog_content
-from reflex.components import alert_dialog_footer as alert_dialog_footer
-from reflex.components import alert_dialog_header as alert_dialog_header
-from reflex.components import alert_dialog_overlay as alert_dialog_overlay
-from reflex.components import alert_icon as alert_icon
-from reflex.components import alert_title as alert_title
 from reflex.components import aspect_ratio as aspect_ratio
-from reflex.components import audio as audio
 from reflex.components import avatar as avatar
-from reflex.components import avatar_badge as avatar_badge
-from reflex.components import avatar_group as avatar_group
 from reflex.components import badge as badge
+from reflex.components import blockquote as blockquote
 from reflex.components import box as box
-from reflex.components import breadcrumb as breadcrumb
-from reflex.components import breadcrumb_item as breadcrumb_item
-from reflex.components import breadcrumb_link as breadcrumb_link
-from reflex.components import breadcrumb_separator as breadcrumb_separator
 from reflex.components import button as button
-from reflex.components import button_group as button_group
+from reflex.components import callout as callout
 from reflex.components import card as card
-from reflex.components import card_body as card_body
-from reflex.components import card_footer as card_footer
-from reflex.components import card_header as card_header
 from reflex.components import center as center
 from reflex.components import checkbox as checkbox
-from reflex.components import checkbox_group as checkbox_group
-from reflex.components import circular_progress as circular_progress
-from reflex.components import circular_progress_label as circular_progress_label
-from reflex.components import circle as circle
 from reflex.components import code as code
-from reflex.components import code_block as code_block
-from reflex.components import collapse as collapse
-from reflex.components import color_mode_button as color_mode_button
-from reflex.components import color_mode_icon as color_mode_icon
-from reflex.components import color_mode_switch as color_mode_switch
-from reflex.components import component as component
-from reflex.components import cond as cond
-from reflex.components import connection_banner as connection_banner
-from reflex.components import connection_modal as connection_modal
 from reflex.components import container as container
-from reflex.components import data_table as data_table
-from reflex.components import data_editor as data_editor
-from reflex.components import data_editor_theme as data_editor_theme
-from reflex.components import date_picker as date_picker
-from reflex.components import date_time_picker as date_time_picker
-from reflex.components import debounce_input as debounce_input
+from reflex.components import context_menu as context_menu
+from reflex.components import dialog as dialog
 from reflex.components import divider as divider
 from reflex.components import drawer as drawer
-from reflex.components import drawer_body as drawer_body
-from reflex.components import drawer_close_button as drawer_close_button
-from reflex.components import drawer_content as drawer_content
-from reflex.components import drawer_footer as drawer_footer
-from reflex.components import drawer_header as drawer_header
-from reflex.components import drawer_overlay as drawer_overlay
-from reflex.components import editable as editable
-from reflex.components import editable_input as editable_input
-from reflex.components import editable_preview as editable_preview
-from reflex.components import editable_textarea as editable_textarea
-from reflex.components import editor as editor
-from reflex.components import email as email
-from reflex.components import fade as fade
 from reflex.components import flex as flex
-from reflex.components import foreach as foreach
 from reflex.components import form as form
-from reflex.components import form_control as form_control
-from reflex.components import form_error_message as form_error_message
-from reflex.components import form_helper_text as form_helper_text
-from reflex.components import form_label as form_label
-from reflex.components import fragment as fragment
 from reflex.components import grid as grid
-from reflex.components import grid_item as grid_item
 from reflex.components import heading as heading
-from reflex.components import highlight as highlight
+from reflex.components import hover_card as hover_card
 from reflex.components import hstack as hstack
-from reflex.components import html as html
-from reflex.components import icon as icon
 from reflex.components import icon_button as icon_button
-from reflex.components import image as image
+from reflex.components import inset as inset
 from reflex.components import input as input
-from reflex.components import input_group as input_group
-from reflex.components import input_left_addon as input_left_addon
-from reflex.components import input_left_element as input_left_element
-from reflex.components import input_right_addon as input_right_addon
-from reflex.components import input_right_element as input_right_element
-from reflex.components import kbd as kbd
 from reflex.components import link as link
-from reflex.components import link_box as link_box
-from reflex.components import link_overlay as link_overlay
-from reflex.components import list as list
-from reflex.components import list_item as list_item
-from reflex.components import markdown as markdown
-from reflex.components import match as match
 from reflex.components import menu as menu
-from reflex.components import menu_button as menu_button
-from reflex.components import menu_divider as menu_divider
-from reflex.components import menu_group as menu_group
-from reflex.components import menu_item as menu_item
-from reflex.components import menu_item_option as menu_item_option
-from reflex.components import menu_list as menu_list
-from reflex.components import menu_option_group as menu_option_group
-from reflex.components import modal as modal
-from reflex.components import modal_body as modal_body
-from reflex.components import modal_close_button as modal_close_button
-from reflex.components import modal_content as modal_content
-from reflex.components import modal_footer as modal_footer
-from reflex.components import modal_header as modal_header
-from reflex.components import modal_overlay as modal_overlay
-from reflex.components import moment as moment
-from reflex.components import multi_select as multi_select
-from reflex.components import multi_select_option as multi_select_option
-from reflex.components import next_link as next_link
-from reflex.components import number_decrement_stepper as number_decrement_stepper
-from reflex.components import number_increment_stepper as number_increment_stepper
-from reflex.components import number_input as number_input
-from reflex.components import number_input_field as number_input_field
-from reflex.components import number_input_stepper as number_input_stepper
-from reflex.components import option as option
-from reflex.components import ordered_list as ordered_list
-from reflex.components import password as password
-from reflex.components import pin_input as pin_input
-from reflex.components import pin_input_field as pin_input_field
-from reflex.components import plotly as plotly
 from reflex.components import popover as popover
-from reflex.components import popover_anchor as popover_anchor
-from reflex.components import popover_arrow as popover_arrow
-from reflex.components import popover_body as popover_body
-from reflex.components import popover_close_button as popover_close_button
-from reflex.components import popover_content as popover_content
-from reflex.components import popover_footer as popover_footer
-from reflex.components import popover_header as popover_header
-from reflex.components import popover_trigger as popover_trigger
 from reflex.components import progress as progress
 from reflex.components import radio as radio
-from reflex.components import radio_group as radio_group
-from reflex.components import range_slider as range_slider
-from reflex.components import range_slider_filled_track as range_slider_filled_track
-from reflex.components import range_slider_thumb as range_slider_thumb
-from reflex.components import range_slider_track as range_slider_track
-from reflex.components import responsive_grid as responsive_grid
-from reflex.components import scale_fade as scale_fade
-from reflex.components import script as script
+from reflex.components import scroll_area as scroll_area
+from reflex.components import section as section
 from reflex.components import select as select
-from reflex.components import skeleton as skeleton
-from reflex.components import skeleton_circle as skeleton_circle
-from reflex.components import skeleton_text as skeleton_text
-from reflex.components import slide as slide
-from reflex.components import slide_fade as slide_fade
 from reflex.components import slider as slider
-from reflex.components import slider_filled_track as slider_filled_track
-from reflex.components import slider_mark as slider_mark
-from reflex.components import slider_thumb as slider_thumb
-from reflex.components import slider_track as slider_track
 from reflex.components import spacer as spacer
-from reflex.components import span as span
-from reflex.components import spinner as spinner
-from reflex.components import square as square
 from reflex.components import stack as stack
-from reflex.components import stat as stat
-from reflex.components import stat_arrow as stat_arrow
-from reflex.components import stat_group as stat_group
-from reflex.components import stat_help_text as stat_help_text
-from reflex.components import stat_label as stat_label
-from reflex.components import stat_number as stat_number
-from reflex.components import step as step
-from reflex.components import step_description as step_description
-from reflex.components import step_icon as step_icon
-from reflex.components import step_indicator as step_indicator
-from reflex.components import step_number as step_number
-from reflex.components import step_separator as step_separator
-from reflex.components import step_status as step_status
-from reflex.components import step_title as step_title
-from reflex.components import stepper as stepper
 from reflex.components import switch as switch
-from reflex.components import tab as tab
-from reflex.components import tab_list as tab_list
-from reflex.components import tab_panel as tab_panel
-from reflex.components import tab_panels as tab_panels
 from reflex.components import table as table
-from reflex.components import table_caption as table_caption
-from reflex.components import table_container as table_container
 from reflex.components import tabs as tabs
-from reflex.components import tag as tag
-from reflex.components import tag_close_button as tag_close_button
-from reflex.components import tag_label as tag_label
-from reflex.components import tag_left_icon as tag_left_icon
-from reflex.components import tag_right_icon as tag_right_icon
-from reflex.components import tbody as tbody
-from reflex.components import td as td
 from reflex.components import text as text
 from reflex.components import text_area as text_area
-from reflex.components import tfoot as tfoot
-from reflex.components import th as th
-from reflex.components import thead as thead
-from reflex.components import time_picker as time_picker
+from reflex.components import theme as theme
+from reflex.components import theme_panel as theme_panel
 from reflex.components import tooltip as tooltip
-from reflex.components import tr as tr
-from reflex.components import unordered_list as unordered_list
-from reflex.components import upload as upload
-from reflex.components import video as video
-from reflex.components import visually_hidden as visually_hidden
 from reflex.components import vstack as vstack
-from reflex.components import wrap as wrap
-from reflex.components import wrap_item as wrap_item
-from reflex.components import cancel_upload as cancel_upload
-from reflex import components as components
-from reflex.components import color_mode_cond as color_mode_cond
-from reflex.components import desktop_only as desktop_only
-from reflex.components import mobile_only as mobile_only
-from reflex.components import tablet_only as tablet_only
-from reflex.components import mobile_and_tablet as mobile_and_tablet
-from reflex.components import tablet_and_desktop as tablet_and_desktop
-from reflex.components import selected_files as selected_files
-from reflex.components import clear_selected_files as clear_selected_files
+from reflex.components import code_block as code_block
+from reflex.components import data_editor as data_editor
+from reflex.components import data_editor_theme as data_editor_theme
+from reflex.components import data_table as data_table
+from reflex.components import plotly as plotly
+from reflex.components import audio as audio
+from reflex.components import video as video
+from reflex.components import editor as editor
 from reflex.components import EditorButtonList as EditorButtonList
 from reflex.components import EditorOptions as EditorOptions
-from reflex.components import NoSSRComponent as NoSSRComponent
-from reflex.components import chakra as chakra
-from reflex.components import next as next
+from reflex.components import icon as icon
+from reflex.components import markdown as markdown
+from reflex.components import list_item as list_item
+from reflex.components import unordered_list as unordered_list
+from reflex.components import ordered_list as ordered_list
+from reflex.components import moment as moment
+from reflex.components.component import Component as Component
+from reflex.components.component import NoSSRComponent as NoSSRComponent
 from reflex.components.component import memo as memo
-from reflex.components.core import color as color
+from reflex.components import chakra as chakra
 from reflex.components import el as el
 from reflex.components import lucide as lucide
+from reflex.components import next as next
 from reflex.components import radix as radix
+from reflex.components.radix import color_mode as color_mode
 from reflex.components import recharts as recharts
 from reflex.components.moment.moment import MomentDelta as MomentDelta
 from reflex import config as config
@@ -488,7 +140,6 @@ from reflex.state import Cookie as Cookie
 from reflex.state import LocalStorage as LocalStorage
 from reflex.state import State as State
 from reflex import style as style
-from reflex.style import color_mode as color_mode
 from reflex.style import toggle_color_mode as toggle_color_mode
 from reflex import testing as testing
 from reflex import utils as utils

reflex/app.py

@@ -39,7 +39,11 @@ from reflex.compiler import utils as compiler_utils
 from reflex.components import connection_modal
 from reflex.components.base.app_wrap import AppWrap
 from reflex.components.base.fragment import Fragment
-from reflex.components.component import Component, ComponentStyle
+from reflex.components.component import (
+    Component,
+    ComponentStyle,
+    evaluate_style_namespaces,
+)
 from reflex.components.core.client_side_routing import (
     Default404Page,
     wait_for_client_redirect,
@@ -682,10 +686,7 @@ class App(Base):
         # Store the compile results.
         compile_results = []
 
-        # Compile the pages in parallel.
-        custom_components = set()
-        # TODO Anecdotally, processes=2 works 10% faster (cpu_count=12)
-        all_imports = {}
+        # Add the app wrappers.
         app_wrappers: Dict[tuple[int, str], Component] = {
             # Default app wrap component renders {children}
             (0, "AppWrap"): AppWrap.create()
@@ -694,6 +695,14 @@ class App(Base):
             # If a theme component was provided, wrap the app with it
             app_wrappers[(20, "Theme")] = self.theme
 
+        # Fix up the style.
+        self.style = evaluate_style_namespaces(self.style)
+
+        # Track imports and custom components found.
+        all_imports = {}
+        custom_components = set()
+
+        # Compile the pages in parallel.
         with progress, concurrent.futures.ThreadPoolExecutor() as thread_pool:
             fixed_pages = 7
             task = progress.add_task("Compiling:", total=len(self.pages) + fixed_pages)

reflex/components/__init__.py

@@ -1,16 +1,20 @@
 """Import all the components."""
 from __future__ import annotations
 
+from . import lucide
 from .base import Fragment, Script, fragment, script
-from .chakra import *
 from .component import Component
 from .component import NoSSRComponent as NoSSRComponent
 from .core import *
 from .datadisplay import *
+from .el import img as image
 from .gridjs import *
 from .markdown import *
 from .moment import *
 from .next import NextLink, next_link
 from .plotly import *
+from .radix import *
 from .react_player import *
 from .suneditor import *
+
+icon = lucide.icon

reflex/components/base/app_wrap.pyi

@@ -22,7 +22,6 @@ class AppWrap(Fragment):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]

reflex/components/base/body.pyi

@@ -20,7 +20,6 @@ class Body(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class Body(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/base/document.pyi

@@ -20,7 +20,6 @@ class NextDocumentLib(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class NextDocumentLib(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -101,7 +99,6 @@ class Html(NextDocumentLib):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -159,7 +156,6 @@ class Html(NextDocumentLib):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -182,7 +178,6 @@ class DocumentHead(NextDocumentLib):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -240,7 +235,6 @@ class DocumentHead(NextDocumentLib):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -263,7 +257,6 @@ class Main(NextDocumentLib):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -321,7 +314,6 @@ class Main(NextDocumentLib):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -344,7 +336,6 @@ class NextScript(NextDocumentLib):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -402,7 +393,6 @@ class NextScript(NextDocumentLib):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/base/fragment.pyi

@@ -20,7 +20,6 @@ class Fragment(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class Fragment(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/base/head.pyi

@@ -20,7 +20,6 @@ class NextHeadLib(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class NextHeadLib(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -101,7 +99,6 @@ class Head(NextHeadLib, MemoizationLeaf):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -159,7 +156,6 @@ class Head(NextHeadLib, MemoizationLeaf):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/base/link.pyi

@@ -23,7 +23,6 @@ class RawLink(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -83,7 +82,6 @@ class RawLink(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -113,7 +111,6 @@ class ScriptTag(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -178,7 +175,6 @@ class ScriptTag(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/base/meta.pyi

@@ -23,7 +23,6 @@ class Title(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -81,7 +80,6 @@ class Title(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -109,7 +107,6 @@ class Meta(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -172,7 +169,6 @@ class Meta(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -200,7 +196,6 @@ class Description(Meta):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -263,7 +258,6 @@ class Description(Meta):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -291,7 +285,6 @@ class Image(Meta):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -354,7 +347,6 @@ class Image(Meta):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/base/script.pyi

@@ -24,7 +24,6 @@ class Script(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -103,7 +102,6 @@ class Script(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/__init__.py

@@ -49,7 +49,6 @@ circle = Circle.create
 circular_progress = CircularProgress.create
 circular_progress_label = CircularProgressLabel.create
 code = Code.create
-code_block = CodeBlock.create
 collapse = Collapse.create
 color_mode_button = ColorModeButton.create
 color_mode_icon = ColorModeIcon.create
@@ -83,7 +82,6 @@ grid_item = GridItem.create
 heading = Heading.create
 highlight = Highlight.create
 hstack = Hstack.create
-html = Html.create
 icon = Icon.create
 icon_button = IconButton.create
 image = Image.create

reflex/components/chakra/base.pyi

@@ -24,7 +24,6 @@ class ChakraComponent(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -82,7 +81,6 @@ class ChakraComponent(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -106,7 +104,6 @@ class ChakraProvider(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -175,7 +172,6 @@ class ChakraColorModeProvider(Component):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -233,7 +229,6 @@ class ChakraColorModeProvider(Component):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/datadisplay/__init__.py

@@ -1,9 +1,7 @@
 """Data display components."""
 
 from .badge import Badge
-from .code import Code, CodeBlock
-from .code import LiteralCodeBlockTheme as LiteralCodeBlockTheme
-from .code import LiteralCodeLanguage as LiteralCodeLanguage
+from .code import Code
 from .divider import Divider
 from .keyboard_key import KeyboardKey as Kbd
 from .list import List, ListItem, OrderedList, UnorderedList

reflex/components/chakra/datadisplay/badge.pyi

@@ -28,7 +28,6 @@ class Badge(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -88,7 +87,6 @@ class Badge(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/datadisplay/code.py

@@ -1,518 +1,7 @@
 """A code component."""
-import re
-from typing import Dict, Literal, Optional, Union
-
 from reflex.components.chakra import (
     ChakraComponent,
 )
-from reflex.components.chakra.forms import Button, color_mode_cond
-from reflex.components.chakra.layout import Box
-from reflex.components.chakra.media import Icon
-from reflex.components.component import Component
-from reflex.event import set_clipboard
-from reflex.style import Style
-from reflex.utils import format, imports
-from reflex.utils.imports import ImportVar
-from reflex.vars import Var
-
-LiteralCodeBlockTheme = Literal[
-    "a11y-dark",
-    "atom-dark",
-    "cb",
-    "coldark-cold",
-    "coldark-dark",
-    "coy",
-    "coy-without-shadows",
-    "darcula",
-    "dark",
-    "dracula",
-    "duotone-dark",
-    "duotone-earth",
-    "duotone-forest",
-    "duotone-light",
-    "duotone-sea",
-    "duotone-space",
-    "funky",
-    "ghcolors",
-    "gruvbox-dark",
-    "gruvbox-light",
-    "holi-theme",
-    "hopscotch",
-    "light",  # not present in react-syntax-highlighter styles
-    "lucario",
-    "material-dark",
-    "material-light",
-    "material-oceanic",
-    "night-owl",
-    "nord",
-    "okaidia",
-    "one-dark",
-    "one-light",
-    "pojoaque",
-    "prism",
-    "shades-of-purple",
-    "solarized-dark-atom",
-    "solarizedlight",
-    "synthwave84",
-    "tomorrow",
-    "twilight",
-    "vs",
-    "vs-dark",
-    "vsc-dark-plus",
-    "xonokai",
-    "z-touch",
-]
-
-
-LiteralCodeLanguage = Literal[
-    "abap",
-    "abnf",
-    "actionscript",
-    "ada",
-    "agda",
-    "al",
-    "antlr4",
-    "apacheconf",
-    "apex",
-    "apl",
-    "applescript",
-    "aql",
-    "arduino",
-    "arff",
-    "asciidoc",
-    "asm6502",
-    "asmatmel",
-    "aspnet",
-    "autohotkey",
-    "autoit",
-    "avisynth",
-    "avro-idl",
-    "bash",
-    "basic",
-    "batch",
-    "bbcode",
-    "bicep",
-    "birb",
-    "bison",
-    "bnf",
-    "brainfuck",
-    "brightscript",
-    "bro",
-    "bsl",
-    "c",
-    "cfscript",
-    "chaiscript",
-    "cil",
-    "clike",
-    "clojure",
-    "cmake",
-    "cobol",
-    "coffeescript",
-    "concurnas",
-    "coq",
-    "core",
-    "cpp",
-    "crystal",
-    "csharp",
-    "cshtml",
-    "csp",
-    "css",
-    "css-extras",
-    "csv",
-    "cypher",
-    "d",
-    "dart",
-    "dataweave",
-    "dax",
-    "dhall",
-    "diff",
-    "django",
-    "dns-zone-file",
-    "docker",
-    "dot",
-    "ebnf",
-    "editorconfig",
-    "eiffel",
-    "ejs",
-    "elixir",
-    "elm",
-    "erb",
-    "erlang",
-    "etlua",
-    "excel-formula",
-    "factor",
-    "false",
-    "firestore-security-rules",
-    "flow",
-    "fortran",
-    "fsharp",
-    "ftl",
-    "gap",
-    "gcode",
-    "gdscript",
-    "gedcom",
-    "gherkin",
-    "git",
-    "glsl",
-    "gml",
-    "gn",
-    "go",
-    "go-module",
-    "graphql",
-    "groovy",
-    "haml",
-    "handlebars",
-    "haskell",
-    "haxe",
-    "hcl",
-    "hlsl",
-    "hoon",
-    "hpkp",
-    "hsts",
-    "http",
-    "ichigojam",
-    "icon",
-    "icu-message-format",
-    "idris",
-    "iecst",
-    "ignore",
-    "index",
-    "inform7",
-    "ini",
-    "io",
-    "j",
-    "java",
-    "javadoc",
-    "javadoclike",
-    "javascript",
-    "javastacktrace",
-    "jexl",
-    "jolie",
-    "jq",
-    "js-extras",
-    "js-templates",
-    "jsdoc",
-    "json",
-    "json5",
-    "jsonp",
-    "jsstacktrace",
-    "jsx",
-    "julia",
-    "keepalived",
-    "keyman",
-    "kotlin",
-    "kumir",
-    "kusto",
-    "latex",
-    "latte",
-    "less",
-    "lilypond",
-    "liquid",
-    "lisp",
-    "livescript",
-    "llvm",
-    "log",
-    "lolcode",
-    "lua",
-    "magma",
-    "makefile",
-    "markdown",
-    "markup",
-    "markup-templating",
-    "matlab",
-    "maxscript",
-    "mel",
-    "mermaid",
-    "mizar",
-    "mongodb",
-    "monkey",
-    "moonscript",
-    "n1ql",
-    "n4js",
-    "nand2tetris-hdl",
-    "naniscript",
-    "nasm",
-    "neon",
-    "nevod",
-    "nginx",
-    "nim",
-    "nix",
-    "nsis",
-    "objectivec",
-    "ocaml",
-    "opencl",
-    "openqasm",
-    "oz",
-    "parigp",
-    "parser",
-    "pascal",
-    "pascaligo",
-    "pcaxis",
-    "peoplecode",
-    "perl",
-    "php",
-    "php-extras",
-    "phpdoc",
-    "plsql",
-    "powerquery",
-    "powershell",
-    "processing",
-    "prolog",
-    "promql",
-    "properties",
-    "protobuf",
-    "psl",
-    "pug",
-    "puppet",
-    "pure",
-    "purebasic",
-    "purescript",
-    "python",
-    "q",
-    "qml",
-    "qore",
-    "qsharp",
-    "r",
-    "racket",
-    "reason",
-    "regex",
-    "rego",
-    "renpy",
-    "rest",
-    "rip",
-    "roboconf",
-    "robotframework",
-    "ruby",
-    "rust",
-    "sas",
-    "sass",
-    "scala",
-    "scheme",
-    "scss",
-    "shell-session",
-    "smali",
-    "smalltalk",
-    "smarty",
-    "sml",
-    "solidity",
-    "solution-file",
-    "soy",
-    "sparql",
-    "splunk-spl",
-    "sqf",
-    "sql",
-    "squirrel",
-    "stan",
-    "stylus",
-    "swift",
-    "systemd",
-    "t4-cs",
-    "t4-templating",
-    "t4-vb",
-    "tap",
-    "tcl",
-    "textile",
-    "toml",
-    "tremor",
-    "tsx",
-    "tt2",
-    "turtle",
-    "twig",
-    "typescript",
-    "typoscript",
-    "unrealscript",
-    "uorazor",
-    "uri",
-    "v",
-    "vala",
-    "vbnet",
-    "velocity",
-    "verilog",
-    "vhdl",
-    "vim",
-    "visual-basic",
-    "warpscript",
-    "wasm",
-    "web-idl",
-    "wiki",
-    "wolfram",
-    "wren",
-    "xeora",
-    "xml-doc",
-    "xojo",
-    "xquery",
-    "yaml",
-    "yang",
-    "zig",
-]
-
-
-class CodeBlock(Component):
-    """A code block."""
-
-    library = "react-syntax-highlighter@15.5.0"
-
-    tag = "PrismAsyncLight"
-
-    alias = "SyntaxHighlighter"
-
-    # The theme to use ("light" or "dark").
-    theme: Var[LiteralCodeBlockTheme] = "one-light"  # type: ignore
-
-    # The language to use.
-    language: Var[LiteralCodeLanguage] = "python"  # type: ignore
-
-    # The code to display.
-    code: Var[str]
-
-    # If this is enabled line numbers will be shown next to the code block.
-    show_line_numbers: Var[bool]
-
-    # The starting line number to use.
-    starting_line_number: Var[int]
-
-    # Whether to wrap long lines.
-    wrap_long_lines: Var[bool]
-
-    # A custom style for the code block.
-    custom_style: Dict[str, str] = {}
-
-    # Props passed down to the code tag.
-    code_tag_props: Var[Dict[str, str]]
-
-    def _get_imports(self) -> imports.ImportDict:
-        merged_imports = super()._get_imports()
-        # Get all themes from a cond literal
-        themes = re.findall(r"`(.*?)`", self.theme._var_name)
-        if not themes:
-            themes = [self.theme._var_name]
-        merged_imports = imports.merge_imports(
-            merged_imports,
-            {
-                f"react-syntax-highlighter/dist/cjs/styles/prism/{theme}": {
-                    ImportVar(
-                        tag=format.to_camel_case(theme),
-                        is_default=True,
-                        install=False,
-                    )
-                }
-                for theme in themes
-            },
-        )
-        if (
-            self.language is not None
-            and self.language._var_name in LiteralCodeLanguage.__args__  # type: ignore
-        ):
-            merged_imports = imports.merge_imports(
-                merged_imports,
-                {
-                    f"react-syntax-highlighter/dist/cjs/languages/prism/{self.language._var_name}": {
-                        ImportVar(
-                            tag=format.to_camel_case(self.language._var_name),
-                            is_default=True,
-                            install=False,
-                        )
-                    }
-                },
-            )
-        return merged_imports
-
-    def _get_custom_code(self) -> Optional[str]:
-        if (
-            self.language is not None
-            and self.language._var_name in LiteralCodeLanguage.__args__  # type: ignore
-        ):
-            return f"{self.alias}.registerLanguage('{self.language._var_name}', {format.to_camel_case(self.language._var_name)})"
-
-    @classmethod
-    def create(
-        cls,
-        *children,
-        can_copy: Optional[bool] = False,
-        copy_button: Optional[Union[bool, Component]] = None,
-        **props,
-    ):
-        """Create a text component.
-
-        Args:
-            *children: The children of the component.
-            can_copy: Whether a copy button should appears.
-            copy_button: A custom copy button to override the default one.
-            **props: The props to pass to the component.
-
-        Returns:
-            The text component.
-        """
-        # This component handles style in a special prop.
-        custom_style = props.pop("custom_style", {})
-
-        if "theme" not in props:
-            # Default color scheme responds to global color mode.
-            props["theme"] = color_mode_cond(light="one-light", dark="one-dark")
-
-        # react-syntax-highlighter doesnt have an explicit "light" or "dark" theme so we use one-light and one-dark
-        # themes respectively to ensure code compatibility.
-        if "theme" in props and not isinstance(props["theme"], Var):
-            props["theme"] = (
-                "one-light"
-                if props["theme"] == "light"
-                else "one-dark"
-                if props["theme"] == "dark"
-                else props["theme"]
-            )
-
-        if can_copy:
-            code = children[0]
-            copy_button = (  # type: ignore
-                copy_button
-                if copy_button is not None
-                else Button.create(
-                    Icon.create(tag="copy"),
-                    on_click=set_clipboard(code),
-                    style=Style({"position": "absolute", "top": "0.5em", "right": "0"}),
-                )
-            )
-            custom_style.update({"padding": "1em 3.2em 1em 1em"})
-        else:
-            copy_button = None
-
-        # Transfer style props to the custom style prop.
-        for key, value in props.items():
-            if key not in cls.get_fields():
-                custom_style[key] = value
-
-        # Carry the children (code) via props
-        if children:
-            props["code"] = children[0]
-            if not isinstance(props["code"], Var):
-                props["code"] = Var.create(props["code"], _var_is_string=True)
-
-        # Create the component.
-        code_block = super().create(
-            **props,
-            custom_style=Style(custom_style),
-        )
-
-        if copy_button:
-            return Box.create(code_block, copy_button, position="relative")
-        else:
-            return code_block
-
-    def _add_style(self, style):
-        self.custom_style.update(style)  # type: ignore
-
-    def _render(self):
-        out = super()._render()
-        predicate, qmark, value = self.theme._var_name.partition("?")
-        out.add_props(
-            style=Var.create(
-                format.to_camel_case(f"{predicate}{qmark}{value.replace('`', '')}"),
-                _var_is_local=False,
-            )
-        ).remove_props("theme", "code")
-        if self.code is not None:
-            out.special_props.add(Var.create_safe(f"children={str(self.code)}"))
-        return out
 
 
 class Code(ChakraComponent):

reflex/components/chakra/datadisplay/divider.pyi

@@ -33,7 +33,6 @@ class Divider(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -93,7 +92,6 @@ class Divider(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/datadisplay/keyboard_key.pyi

@@ -20,7 +20,6 @@ class KeyboardKey(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class KeyboardKey(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/datadisplay/list.pyi

@@ -27,7 +27,6 @@ class List(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -89,7 +88,6 @@ class List(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -109,7 +107,6 @@ class ListItem(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -167,7 +164,6 @@ class ListItem(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -194,7 +190,6 @@ class OrderedList(List):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -256,7 +251,6 @@ class OrderedList(List):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -280,7 +274,6 @@ class UnorderedList(List):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -342,7 +335,6 @@ class UnorderedList(List):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 

reflex/components/chakra/datadisplay/stat.pyi

@@ -26,7 +26,6 @@ class Stat(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -88,7 +87,6 @@ class Stat(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -108,7 +106,6 @@ class StatLabel(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -166,7 +163,6 @@ class StatLabel(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -189,7 +185,6 @@ class StatNumber(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -247,7 +242,6 @@ class StatNumber(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -270,7 +264,6 @@ class StatHelpText(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -328,7 +321,6 @@ class StatHelpText(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -352,7 +344,6 @@ class StatArrow(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -411,7 +402,6 @@ class StatArrow(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -434,7 +424,6 @@ class StatGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -492,7 +481,6 @@ class StatGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/datadisplay/table.pyi

@@ -33,7 +33,6 @@ class Table(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -99,7 +98,6 @@ class Table(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -120,7 +118,6 @@ class Thead(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -179,7 +176,6 @@ class Thead(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -203,7 +199,6 @@ class Tbody(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -262,7 +257,6 @@ class Tbody(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -285,7 +279,6 @@ class Tfoot(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -344,7 +337,6 @@ class Tfoot(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -368,7 +360,6 @@ class Tr(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -428,7 +419,6 @@ class Tr(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -449,7 +439,6 @@ class Th(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -508,7 +497,6 @@ class Th(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -532,7 +520,6 @@ class Td(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -591,7 +578,6 @@ class Td(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -615,7 +601,6 @@ class TableCaption(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -674,7 +659,6 @@ class TableCaption(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -697,7 +681,6 @@ class TableContainer(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -755,7 +738,6 @@ class TableContainer(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/datadisplay/tag.pyi

@@ -28,7 +28,6 @@ class TagLabel(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -86,7 +85,6 @@ class TagLabel(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -109,7 +107,6 @@ class TagLeftIcon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -167,7 +164,6 @@ class TagLeftIcon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -190,7 +186,6 @@ class TagRightIcon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -248,7 +243,6 @@ class TagRightIcon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -271,7 +265,6 @@ class TagCloseButton(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -329,7 +322,6 @@ class TagCloseButton(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -394,7 +386,6 @@ class Tag(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]

reflex/components/chakra/disclosure/accordion.pyi

@@ -34,7 +34,6 @@ class Accordion(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -99,7 +98,6 @@ class Accordion(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -122,7 +120,6 @@ class AccordionItem(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -183,7 +180,6 @@ class AccordionItem(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -206,7 +202,6 @@ class AccordionButton(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -264,7 +259,6 @@ class AccordionButton(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -287,7 +281,6 @@ class AccordionPanel(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -345,7 +338,6 @@ class AccordionPanel(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -368,7 +360,6 @@ class AccordionIcon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -426,7 +417,6 @@ class AccordionIcon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/disclosure/tabs.pyi

@@ -112,7 +112,6 @@ class Tabs(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -181,7 +180,6 @@ class Tabs(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -205,7 +203,6 @@ class Tab(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -267,7 +264,6 @@ class Tab(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -290,7 +286,6 @@ class TabList(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -348,7 +343,6 @@ class TabList(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -371,7 +365,6 @@ class TabPanels(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -429,7 +422,6 @@ class TabPanels(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -452,7 +444,6 @@ class TabPanel(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -510,7 +501,6 @@ class TabPanel(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/disclosure/transition.pyi

@@ -24,7 +24,6 @@ class Transition(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -84,7 +83,6 @@ class Transition(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -109,7 +107,6 @@ class Fade(Transition):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -169,7 +166,6 @@ class Fade(Transition):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -196,7 +192,6 @@ class ScaleFade(Transition):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -258,7 +253,6 @@ class ScaleFade(Transition):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -284,7 +278,6 @@ class Slide(Transition):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -345,7 +338,6 @@ class Slide(Transition):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -373,7 +365,6 @@ class SlideFade(Transition):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -436,7 +427,6 @@ class SlideFade(Transition):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -464,7 +454,6 @@ class Collapse(Transition):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -527,7 +516,6 @@ class Collapse(Transition):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/disclosure/visuallyhidden.pyi

@@ -20,7 +20,6 @@ class VisuallyHidden(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -78,7 +77,6 @@ class VisuallyHidden(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/feedback/alert.pyi

@@ -37,7 +37,6 @@ class Alert(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -100,7 +99,6 @@ class Alert(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -120,7 +118,6 @@ class AlertIcon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -178,7 +175,6 @@ class AlertIcon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -201,7 +197,6 @@ class AlertTitle(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -259,7 +254,6 @@ class AlertTitle(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -282,7 +276,6 @@ class AlertDescription(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -340,7 +333,6 @@ class AlertDescription(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/feedback/circularprogress.pyi

@@ -34,7 +34,6 @@ class CircularProgress(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -103,7 +102,6 @@ class CircularProgress(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: the props of the component.
 
@@ -123,7 +121,6 @@ class CircularProgressLabel(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -181,7 +178,6 @@ class CircularProgressLabel(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/feedback/progress.pyi

@@ -29,7 +29,6 @@ class Progress(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -94,7 +93,6 @@ class Progress(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/feedback/skeleton.pyi

@@ -26,7 +26,6 @@ class Skeleton(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -89,7 +88,6 @@ class Skeleton(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -117,7 +115,6 @@ class SkeletonCircle(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -180,7 +177,6 @@ class SkeletonCircle(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -209,7 +205,6 @@ class SkeletonText(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -273,7 +268,6 @@ class SkeletonText(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/feedback/spinner.pyi

@@ -31,7 +31,6 @@ class Spinner(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -94,7 +93,6 @@ class Spinner(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/__init__.py

@@ -7,7 +7,6 @@ from .colormodeswitch import (
     ColorModeIcon,
     ColorModeScript,
     ColorModeSwitch,
-    color_mode_cond,
 )
 from .date_picker import DatePicker
 from .date_time_picker import DateTimePicker
@@ -47,8 +46,4 @@ from .switch import Switch
 from .textarea import TextArea
 from .time_picker import TimePicker
 
-helpers = [
-    "color_mode_cond",
-]
-
-__all__ = [f for f in dir() if f[0].isupper()] + helpers  # type: ignore
+__all__ = [f for f in dir() if f[0].isupper()]  # type: ignore

reflex/components/chakra/forms/button.pyi

@@ -96,7 +96,6 @@ class Button(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -166,7 +165,6 @@ class Button(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -201,7 +199,6 @@ class ButtonGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -264,7 +261,6 @@ class ButtonGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/checkbox.pyi

@@ -85,7 +85,6 @@ class Checkbox(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -158,7 +157,6 @@ class Checkbox(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -185,7 +183,6 @@ class CheckboxGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -247,7 +244,6 @@ class CheckboxGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/colormodeswitch.py

@@ -16,40 +16,19 @@ rx.text(
 """
 from __future__ import annotations
 
-from typing import Any
-
 from reflex.components.chakra import ChakraComponent
 from reflex.components.chakra.media.icon import Icon
-from reflex.components.component import BaseComponent, Component
-from reflex.components.core.cond import Cond, cond
-from reflex.style import color_mode, toggle_color_mode
-from reflex.vars import Var
+from reflex.components.component import BaseComponent
+from reflex.components.core.cond import Cond, color_mode_cond
+from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode
 
 from .button import Button
 from .switch import Switch
 
-DEFAULT_COLOR_MODE: str = "light"
 DEFAULT_LIGHT_ICON: Icon = Icon.create(tag="sun")
 DEFAULT_DARK_ICON: Icon = Icon.create(tag="moon")
 
 
-def color_mode_cond(light: Any, dark: Any = None) -> Var | Component:
-    """Create a component or Prop based on color_mode.
-
-    Args:
-        light: The component or prop to render if color_mode is default
-        dark: The component or prop to render if color_mode is non-default
-
-    Returns:
-        The conditional component or prop.
-    """
-    return cond(
-        color_mode == DEFAULT_COLOR_MODE,
-        light,
-        dark,
-    )
-
-
 class ColorModeIcon(Cond):
     """Displays the current color mode as an icon."""
 
@@ -90,7 +69,7 @@ class ColorModeSwitch(Switch):
         """
         return Switch.create(
             *children,
-            is_checked=color_mode != DEFAULT_COLOR_MODE,
+            is_checked=color_mode != LIGHT_COLOR_MODE,
             on_change=toggle_color_mode,
             **props,
         )
@@ -121,4 +100,4 @@ class ColorModeScript(ChakraComponent):
     """Chakra color mode script."""
 
     tag = "ColorModeScript"
-    initialColorMode = "light"
+    initialColorMode = LIGHT_COLOR_MODE

reflex/components/chakra/forms/colormodeswitch.pyi

@@ -7,22 +7,17 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Any
 from reflex.components.chakra import ChakraComponent
 from reflex.components.chakra.media.icon import Icon
-from reflex.components.component import BaseComponent, Component
-from reflex.components.core.cond import Cond, cond
-from reflex.style import color_mode, toggle_color_mode
-from reflex.vars import Var
+from reflex.components.component import BaseComponent
+from reflex.components.core.cond import Cond, color_mode_cond
+from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode
 from .button import Button
 from .switch import Switch
 
-DEFAULT_COLOR_MODE: str
 DEFAULT_LIGHT_ICON: Icon
 DEFAULT_DARK_ICON: Icon
 
-def color_mode_cond(light: Any, dark: Any = None) -> Var | Component: ...
-
 class ColorModeIcon(Cond):
     @overload
     @classmethod
@@ -37,7 +32,6 @@ class ColorModeIcon(Cond):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -166,7 +160,6 @@ class ColorModeSwitch(Switch):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -238,7 +231,6 @@ class ColorModeSwitch(Switch):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props to pass to the component.
 
@@ -326,7 +318,6 @@ class ColorModeButton(Button):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -396,7 +387,6 @@ class ColorModeButton(Button):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props to pass to the component.
 
@@ -416,7 +406,6 @@ class ColorModeScript(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -474,7 +463,6 @@ class ColorModeScript(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/date_picker.pyi

@@ -41,7 +41,6 @@ class DatePicker(Input):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -121,7 +120,6 @@ class DatePicker(Input):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 

reflex/components/chakra/forms/date_time_picker.pyi

@@ -41,7 +41,6 @@ class DateTimePicker(Input):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -121,7 +120,6 @@ class DateTimePicker(Input):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 

reflex/components/chakra/forms/editable.pyi

@@ -32,7 +32,6 @@ class Editable(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -110,7 +109,6 @@ class Editable(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -133,7 +131,6 @@ class EditableInput(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -191,7 +188,6 @@ class EditableInput(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -214,7 +210,6 @@ class EditableTextarea(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -272,7 +267,6 @@ class EditableTextarea(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -295,7 +289,6 @@ class EditablePreview(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -353,7 +346,6 @@ class EditablePreview(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/email.pyi

@@ -41,7 +41,6 @@ class Email(Input):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -121,7 +120,6 @@ class Email(Input):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 

reflex/components/chakra/forms/form.pyi

@@ -38,7 +38,6 @@ class Form(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -102,7 +101,6 @@ class Form(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the form.
 
@@ -131,7 +129,6 @@ class FormControl(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -197,7 +194,6 @@ class FormControl(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the form control.
 
@@ -220,7 +216,6 @@ class FormHelperText(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -278,7 +273,6 @@ class FormHelperText(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -302,7 +296,6 @@ class FormLabel(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -361,7 +354,6 @@ class FormLabel(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -384,7 +376,6 @@ class FormErrorMessage(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -442,7 +433,6 @@ class FormErrorMessage(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/iconbutton.pyi

@@ -33,7 +33,6 @@ class IconButton(Text):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -101,7 +100,6 @@ class IconButton(Text):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/input.py

@@ -30,7 +30,7 @@ class Input(ChakraComponent):
     placeholder: Var[str]
 
     # The type of input.
-    type_: Var[LiteralInputType] = "text"  # type: ignore
+    type_: Var[LiteralInputType]
 
     # The border color when the input is invalid.
     error_border_color: Var[str]

reflex/components/chakra/forms/input.pyi

@@ -105,7 +105,6 @@ class Input(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -185,7 +184,6 @@ class Input(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -205,7 +203,6 @@ class InputGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -263,7 +260,6 @@ class InputGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -286,7 +282,6 @@ class InputLeftAddon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -344,7 +339,6 @@ class InputLeftAddon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -367,7 +361,6 @@ class InputRightAddon(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -425,7 +418,6 @@ class InputRightAddon(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -448,7 +440,6 @@ class InputLeftElement(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -506,7 +497,6 @@ class InputLeftElement(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -529,7 +519,6 @@ class InputRightElement(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -587,7 +576,6 @@ class InputRightElement(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/numberinput.pyi

@@ -55,7 +55,6 @@ class NumberInput(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -136,7 +135,6 @@ class NumberInput(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -156,7 +154,6 @@ class NumberInputField(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -214,7 +211,6 @@ class NumberInputField(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -237,7 +233,6 @@ class NumberInputStepper(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -295,7 +290,6 @@ class NumberInputStepper(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -318,7 +312,6 @@ class NumberIncrementStepper(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -376,7 +369,6 @@ class NumberIncrementStepper(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -399,7 +391,6 @@ class NumberDecrementStepper(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -457,7 +448,6 @@ class NumberDecrementStepper(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/password.pyi

@@ -41,7 +41,6 @@ class Password(Input):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -121,7 +120,6 @@ class Password(Input):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 

reflex/components/chakra/forms/pininput.pyi

@@ -49,7 +49,6 @@ class PinInput(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -131,7 +130,6 @@ class PinInput(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -156,7 +154,6 @@ class PinInputField(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -216,7 +213,6 @@ class PinInputField(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/radio.pyi

@@ -31,7 +31,6 @@ class RadioGroup(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -95,7 +94,6 @@ class RadioGroup(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -126,7 +124,6 @@ class Radio(Text):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -197,7 +194,6 @@ class Radio(Text):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/rangeslider.pyi

@@ -40,7 +40,6 @@ class RangeSlider(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -120,7 +119,6 @@ class RangeSlider(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -140,7 +138,6 @@ class RangeSliderTrack(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -198,7 +195,6 @@ class RangeSliderTrack(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -221,7 +217,6 @@ class RangeSliderFilledTrack(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -279,7 +274,6 @@ class RangeSliderFilledTrack(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -304,7 +298,6 @@ class RangeSliderThumb(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -363,7 +356,6 @@ class RangeSliderThumb(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/select.pyi

@@ -44,7 +44,6 @@ class Select(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -119,7 +118,6 @@ class Select(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -142,7 +140,6 @@ class Option(Text):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -204,7 +201,6 @@ class Option(Text):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/slider.pyi

@@ -52,7 +52,6 @@ class Slider(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -139,7 +138,6 @@ class Slider(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -159,7 +157,6 @@ class SliderTrack(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -217,7 +214,6 @@ class SliderTrack(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -240,7 +236,6 @@ class SliderFilledTrack(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -298,7 +293,6 @@ class SliderFilledTrack(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -322,7 +316,6 @@ class SliderThumb(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -381,7 +374,6 @@ class SliderThumb(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -404,7 +396,6 @@ class SliderMark(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -462,7 +453,6 @@ class SliderMark(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/chakra/forms/switch.pyi

@@ -82,7 +82,6 @@ class Switch(ChakraComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -154,7 +153,6 @@ class Switch(ChakraComponent):
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.