Fix docs warning sources

Author: Alek99

docs/ai_builder/features/ide.md

@@ -9,7 +9,7 @@ import reflex as rx
 ```python eval
 rx.el.div(
     rx.video(
-        url="https://www.youtube.com/embed/UAj9vUweQ5g",
+        src="https://www.youtube.com/embed/UAj9vUweQ5g",
         width="100%",
         height="400px",
     ),

docs/getting_started/introduction.md

@@ -119,11 +119,11 @@ tabs()
 
 ```python demo box
 rx.box(
-    rx._x.code_block(
+    rx.code_block(
         """import reflex as rx """,
         class_name="code-block !bg-transparent !border-none",
     ),
-    rx._x.code_block(
+    rx.code_block(
         """class State(rx.State):
     count: int = 0
 
@@ -146,7 +146,7 @@ rx.box(
         ),
         class_name="code-block",
     ),
-    rx._x.code_block(
+    rx.code_block(
         """def index():
     return rx.hstack(
         rx.button(
@@ -174,7 +174,7 @@ rx.box(
         ),
         class_name="code-block",
     ),
-    rx._x.code_block(
+    rx.code_block(
         """app = rx.App()
 app.add_page(index)""",
         background=rx.cond(

docs/library/forms/form-ll.md

@@ -143,7 +143,7 @@ In this example, the `rx.input` has an attribute `type="email"` and the `form.me
 ## Form Anatomy
 
 ```python eval
-rx._x.code_block(
+rx.code_block(
     """form.root(
     form.field(
         form.label(...),

docs/recipes/auth/login_form.md

@@ -232,8 +232,8 @@ def login_single_thirdparty() -> rx.Component:
                 width="100%",
             ),
             rx.button(
-                rx.icon(tag="github"),
-                "Sign in with Github",
+                rx.text("GH", weight="bold"),
+                "Sign in with GitHub",
                 variant="outline",
                 size="3",
                 width="100%",
@@ -318,9 +318,9 @@ def login_multiple_thirdparty() -> rx.Component:
                 width="100%",
             ),
             rx.center(
-                rx.icon_button(rx.icon(tag="github"), variant="soft", size="3"),
-                rx.icon_button(rx.icon(tag="facebook"), variant="soft", size="3"),
-                rx.icon_button(rx.icon(tag="twitter"), variant="soft", size="3"),
+                rx.icon_button(rx.text("GH", weight="bold"), variant="soft", size="3"),
+                rx.icon_button(rx.text("f", weight="bold"), variant="soft", size="3"),
+                rx.icon_button(rx.text("X", weight="bold"), variant="soft", size="3"),
                 spacing="4",
                 direction="row",
                 width="100%",

docs/recipes/auth/signup_form.md

@@ -257,8 +257,8 @@ def signup_single_thirdparty() -> rx.Component:
                 width="100%",
             ),
             rx.button(
-                rx.icon(tag="github"),
-                "Sign in with Github",
+                rx.text("GH", weight="bold"),
+                "Sign in with GitHub",
                 variant="outline",
                 size="3",
                 width="100%",
@@ -351,9 +351,9 @@ def signup_multiple_thirdparty() -> rx.Component:
                 width="100%",
             ),
             rx.center(
-                rx.icon_button(rx.icon(tag="github"), variant="soft", size="3"),
-                rx.icon_button(rx.icon(tag="facebook"), variant="soft", size="3"),
-                rx.icon_button(rx.icon(tag="twitter"), variant="soft", size="3"),
+                rx.icon_button(rx.text("GH", weight="bold"), variant="soft", size="3"),
+                rx.icon_button(rx.text("f", weight="bold"), variant="soft", size="3"),
+                rx.icon_button(rx.text("X", weight="bold"), variant="soft", size="3"),
                 spacing="4",
                 direction="row",
                 width="100%",

docs/recipes/layout/footer.md

@@ -41,16 +41,16 @@ def footer_items_2() -> rx.Component:
     )
 
 
-def social_link(icon: str, href: str) -> rx.Component:
-    return rx.link(rx.icon(icon), href=href)
+def social_link(label: str, href: str) -> rx.Component:
+    return rx.link(rx.text(label, weight="bold"), href=href)
 
 
 def socials() -> rx.Component:
     return rx.flex(
-        social_link("instagram", "/#"),
-        social_link("twitter", "/#"),
-        social_link("facebook", "/#"),
-        social_link("linkedin", "/#"),
+        social_link("IG", "/#"),
+        social_link("X", "/#"),
+        social_link("f", "/#"),
+        social_link("in", "/#"),
         spacing="3",
         justify="end",
         width="100%",
@@ -143,16 +143,16 @@ def footer_items_2() -> rx.Component:
     )
 
 
-def social_link(icon: str, href: str) -> rx.Component:
-    return rx.link(rx.icon(icon), href=href)
+def social_link(label: str, href: str) -> rx.Component:
+    return rx.link(rx.text(label, weight="bold"), href=href)
 
 
 def socials() -> rx.Component:
     return rx.flex(
-        social_link("instagram", "/#"),
-        social_link("twitter", "/#"),
-        social_link("facebook", "/#"),
-        social_link("linkedin", "/#"),
+        social_link("IG", "/#"),
+        social_link("X", "/#"),
+        social_link("f", "/#"),
+        social_link("in", "/#"),
         spacing="3",
         justify_content=["center", "center", "end"],
         width="100%",
@@ -268,16 +268,16 @@ def footer_items_3() -> rx.Component:
     )
 
 
-def social_link(icon: str, href: str) -> rx.Component:
-    return rx.link(rx.icon(icon), href=href)
+def social_link(label: str, href: str) -> rx.Component:
+    return rx.link(rx.text(label, weight="bold"), href=href)
 
 
 def socials() -> rx.Component:
     return rx.flex(
-        social_link("instagram", "/#"),
-        social_link("twitter", "/#"),
-        social_link("facebook", "/#"),
-        social_link("linkedin", "/#"),
+        social_link("IG", "/#"),
+        social_link("X", "/#"),
+        social_link("f", "/#"),
+        social_link("in", "/#"),
         spacing="3",
         justify_content=["center", "center", "end"],
         width="100%",

docs/wrapping-react/overview.md

@@ -58,6 +58,7 @@ We also have a var `color` which is the current color of the color picker.
 Since this component has interaction we must specify any event triggers that the component takes. The color picker has a single trigger `on_change` to specify when the color changes. This trigger takes in a single argument `color` which is the new color.
 
 ```python exec
+from reflex.experimental.client_state import ClientStateVar
 from reflex.components.component import NoSSRComponent
 
 
@@ -70,7 +71,7 @@ class ColorPicker(NoSSRComponent):
 
 color_picker = ColorPicker.create
 
-ColorPickerState = rx._x.client_state(default="#db114b", var_name="color")
+ColorPickerState = ClientStateVar.create(default="#db114b", var_name="color")
 ```
 
 ```python eval

packages/reflex-site-shared/src/reflex_site_shared/components/blocks/code.py

@@ -1,5 +1,7 @@
 """Code block components for documentation pages."""
 
+from reflex_components_code.shiki_code_block import code_block as shiki_code_block
+
 import reflex as rx
 import reflex_site_shared.styles.fonts as fonts
 from reflex_site_shared import styles
@@ -16,7 +18,7 @@ def _plain_code_block(code: str, language: str):
         The component.
     """
     return rx.box(
-        rx._x.code_block(
+        shiki_code_block(
             code,
             language=language,
             class_name="code-block",
@@ -88,7 +90,7 @@ def code_block_dark(code: str, language: str):
         The component.
     """
     return rx.box(
-        rx._x.code_block(
+        shiki_code_block(
             code,
             language=language,
             class_name="code-block",
@@ -132,7 +134,7 @@ def doccmdoutput(
         The styled command and its example output.
     """
     return rx.vstack(
-        rx._x.code_block(
+        shiki_code_block(
             command,
             can_copy=True,
             border_radius=styles.DOC_BORDER_RADIUS,
@@ -148,7 +150,7 @@ def doccmdoutput(
             font_family="JetBrains Mono",
             width="100%",
         ),
-        rx._x.code_block(
+        shiki_code_block(
             output,
             can_copy=False,
             border_radius="12px",

packages/reflex-site-shared/src/reflex_site_shared/components/blocks/flexdown.py

@@ -2,6 +2,7 @@
 
 # pyright: reportAttributeAccessIssue=false
 from reflex_base.constants.colors import ColorType
+from reflex_components_code.shiki_code_block import code_block as shiki_code_block
 
 import reflex as rx
 from reflex_site_shared.components.blocks.code import (
@@ -139,12 +140,12 @@ def markdown_codeblock(value: str, **props: object) -> rx.Component:
     Returns:
         The component.
     """
-    return rx._x.code_block(value, **props)
+    return shiki_code_block(value, **props)
 
 
 def markdown_with_shiki(*args, **kwargs):
     """Wrapper for the markdown component with a customized component map.
-    Uses the experimental Shiki-based code block (rx._x.code_block)
+    Uses the Shiki-based code block
     instead of the default CodeBlock component for code blocks.
 
     Note: This wrapper should be removed once the default codeblock