Repository: reflex-dev/reflex

Issue:
Markdown is not being rendered correctly
**Describe the bug**
Markdown is not being rendered correctly.

**To Reproduce**
Steps to reproduce the behavior:

```
import reflex as rx

def index() -> rx.Component:
    return rx.markdown("""Large Language Models (LLMs) are a type of artificial intelligence (AI) model designed to understand, generate, and translate text. They are trained on vast datasets comprising large volumes of text from the internet, books, articles, and other written content, allowing them to learn patterns, relationships, and the nuances of human language. This broad training enables them to perform a variety of tasks related to natural language processing (NLP) and natural language understanding (NLU), such as text generation, summarization, translation, question answering, and more. Some of the most well-known LLMs include OpenAI's GPT (Generative Pre-trained Transformer) series, Google's BERT (Bidirectional Encoder Representations from Transformers), and others like XLNet, T5, and ELMo.

Key aspects of LLMs include:

1. **Architecture:** LLMs predominantly use transformer architectures, first introduced in the paper "Attention Is All You Need" by Vaswani et al. in 2017. Transformers are designed to handle sequential data and are particularly effective for tasks involving natural language.

2. **Pre-training and Fine-tuning:** LLMs undergo two main phases of training. The first phase, pre-training, involves learning from a large corpus of text data. This is where the model learns about language patterns, syntax, semantics, and general world knowledge. The second phase, fine-tuning, involves training the pre-trained model on a smaller, task-specific dataset to specialize its abilities for specific applications.

3. **Generative Capabilities:** Some LLMs, especially those like GPT-3, are generative models, which means they can produce coherent and contextually relevant text based on the input they receive. This is useful for creating content, completing text, and generating human-like responses to questions.

4. **Applications:** LLMs have a broad range of applications, including but not limited to chatbots, content creation, language translation, sentiment analysis, legal document analysis, and educational tools. Their ability to understand and generate human-like text makes them valuable tools in numerous fields.

5. **Ethical and Societal Implications:** While LLMs hold immense potential, they also raise important ethical and societal concerns. Bias in training data can lead to biased outputs, and their ability to generate believable content has implications for misinformation, privacy, and security. As a result, there's a growing discussion around the ethical use, regulation, and governance of these technologies.


LLMs have rapidly evolved, becoming more sophisticated and capable with each iteration. As research in the field progresses, these models are expected to become even more powerful and versatile, further blurring the lines between human and machine-generated content.



### Applications

- **Natural Language Understanding (NLU)**: Understanding the meaning of text, such as sentiment analysis or extracting structured data from unstructured text.
- **Natural Language Generation (NLG)**: Generating human-like text based on a given input, used for creating content, generating code from descriptions, or conversational agents.
- **Translation**: Translating text between languages with a high degree of fluency.

### Challenges and Ethical Considerations

- **Bias and Fairness**: LLMs can inherit and amplify biases present in their training data, leading to outputs that might be sexist, racist, or offensive in other ways.
- **Misinformation**: The ability of LLMs to generate convincing text makes them potential tools for creating misleading information or deepfake content.
- **Energy Consumption**: The training of large models requires significant computational resources, leading to concerns about the environmental impact of developing increasingly large models.


### Applications

- **Content Generation:** Creating textual content for articles, stories, code, and more.
- **Language Translation:** Translating text from one language to another with high accuracy.
- **Text Summarization:** Condensing long pieces of text into shorter summaries.
- **Conversational Agents:** Powering chatbots and virtual assistants to conduct conversations with humans in a natural manner.
- **Sentiment Analysis:** Identifying and categorizing opinions expressed in text to understand attitudes.
  
### Challenges and Considerations

- **Bias and Fairness:** LLMs can inadvertently learn and perpetuate biases present in the training data, raising ethical concerns about fairness and representation.
  
- **Interpretability:** Due to their complexity, the decisions made by LLMs can be challenging to interpret, making it hard to understand how they arrive at certain conclusions.
  
- **Resource Intensity:** Training and operating these models require substantial computational resources, leading to considerations about environmental impact and accessibility for researchers and organizations with limited resources.""")


app = rx.App()
app.add_page(index)
```

**Expected behavior**
The numbers in the numbered list should not be on their own lines and the last few bullets should not be on their own lines.

**Screenshots**
This is how the markdown text is rendered when using Reflex:
![image](https://github.com/reflex-dev/reflex/assets/110377310/9d111b8d-19f6-4f02-8231-9f98cf1a10c5)
![image](https://github.com/reflex-dev/reflex/assets/110377310/e69abc5f-3147-4109-b99a-398384eddada)

This is the correct rendering of the markdown text:
![image](https://github.com/reflex-dev/reflex/assets/110377310/9ed33673-6e71-4708-8fa8-799df013e6fd)


**Specifics (please complete the following information):**
 - Python Version: 3.11.6
 - Reflex Version: 0.4.5

 
**Additional context**
Here is the react-markdown reference implementation to see how markdown text should be rendered: https://remarkjs.github.io/react-markdown/



Discussion:

Patch:
diff --git a/reflex/components/radix/themes/layout/list.py b/reflex/components/radix/themes/layout/list.py
index 825d818de38..958740ea34d 100644
--- a/reflex/components/radix/themes/layout/list.py
+++ b/reflex/components/radix/themes/layout/list.py
@@ -4,15 +4,12 @@
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.foreach import Foreach
-from reflex.components.el.elements.typography import Li
+from reflex.components.el.elements.typography import Li, Ol, Ul
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.themes.typography.text import Text
 from reflex.style import Style
 from reflex.vars import Var
 
-from .base import LayoutComponent
-from .flex import Flex
-
 LiteralListStyleTypeUnordered = Literal[
     "none",
     "disc",
@@ -38,9 +35,11 @@
 ]
 
 
-class BaseList(Flex, LayoutComponent):
+class BaseList(Component):
     """Base class for ordered and unordered lists."""
 
+    tag = "ul"
+
     # The style of the list. Default to "none".
     list_style_type: Var[
         Union[LiteralListStyleTypeUnordered, LiteralListStyleTypeOrdered]
@@ -70,10 +69,9 @@ def create(
                 children = [Foreach.create(items, ListItem.create)]
             else:
                 children = [ListItem.create(item) for item in items]
-        # props["list_style_type"] = list_style_type
+        props["list_style_position"] = "outside"
         props["direction"] = "column"
         style = props.setdefault("style", {})
-        style["list_style_position"] = "outside"
         style["list_style_type"] = list_style_type
         if "gap" in props:
             style["gap"] = props["gap"]
@@ -83,15 +81,17 @@ def _apply_theme(self, theme: Component):
         self.style = Style(
             {
                 "direction": "column",
-                "list_style_position": "outside",
+                "list_style_position": "inside",
                 **self.style,
             }
         )
 
 
-class UnorderedList(BaseList):
+class UnorderedList(BaseList, Ul):
     """Display an unordered list."""
 
+    tag = "ul"
+
     @classmethod
     def create(
         cls,
@@ -112,14 +112,17 @@ def create(
             The list component.
 
         """
+        props["margin_left"] = props.get("margin_left", "1.5rem")
         return super().create(
             *children, items=items, list_style_type=list_style_type, **props
         )
 
 
-class OrderedList(BaseList):
+class OrderedList(BaseList, Ol):
     """Display an ordered list."""
 
+    tag = "ol"
+
     @classmethod
     def create(
         cls,
@@ -140,6 +143,7 @@ def create(
             The list component.
 
         """
+        props["margin_left"] = props.get("margin_left", "1.5rem")
         return super().create(
             *children, items=items, list_style_type=list_style_type, **props
         )
diff --git a/reflex/components/radix/themes/layout/list.pyi b/reflex/components/radix/themes/layout/list.pyi
index 140d48a55a9..382e5aaf528 100644
--- a/reflex/components/radix/themes/layout/list.pyi
+++ b/reflex/components/radix/themes/layout/list.pyi
@@ -10,13 +10,11 @@ from reflex.style import Style
 from typing import Iterable, Literal, Optional, Union
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.foreach import Foreach
-from reflex.components.el.elements.typography import Li
+from reflex.components.el.elements.typography import Li, Ol, Ul
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.themes.typography.text import Text
 from reflex.style import Style
 from reflex.vars import Var
-from .base import LayoutComponent
-from .flex import Flex
 
 LiteralListStyleTypeUnordered = Literal["none", "disc", "circle", "square"]
 LiteralListStyleTypeOrdered = Literal[
@@ -36,7 +34,7 @@ LiteralListStyleTypeOrdered = Literal[
     "katakana",
 ]
 
-class BaseList(Flex, LayoutComponent):
+class BaseList(Component):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -87,163 +85,6 @@ class BaseList(Flex, LayoutComponent):
                 ],
             ]
         ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        direction: Optional[
-            Union[
-                Var[Literal["row", "column", "row-reverse", "column-reverse"]],
-                Literal["row", "column", "row-reverse", "column-reverse"],
-            ]
-        ] = None,
-        align: Optional[
-            Union[
-                Var[Literal["start", "center", "end", "baseline", "stretch"]],
-                Literal["start", "center", "end", "baseline", "stretch"],
-            ]
-        ] = None,
-        justify: Optional[
-            Union[
-                Var[Literal["start", "center", "end", "between"]],
-                Literal["start", "center", "end", "between"],
-            ]
-        ] = None,
-        wrap: Optional[
-            Union[
-                Var[Literal["nowrap", "wrap", "wrap-reverse"]],
-                Literal["nowrap", "wrap", "wrap-reverse"],
-            ]
-        ] = None,
-        spacing: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        access_key: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        auto_capitalize: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        content_editable: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        context_menu: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        draggable: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        enter_key_hint: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        hidden: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        input_mode: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        item_prop: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        spell_check: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        tab_index: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        title: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        p: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        px: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        py: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pt: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pr: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pb: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pl: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        shrink: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
-        grow: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
-        m: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mx: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        my: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mt: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mr: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mb: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        ml: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -303,44 +144,6 @@ class BaseList(Flex, LayoutComponent):
             *children: The children of the component.
             items: A list of items to add to the list.
             list_style_type: The style of the list. Default to "none".
-            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
-            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
-            justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
-            wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
-            spacing: Gap between children: "0" - "9"
-            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
-            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
-            content_editable: Indicates whether the element's content is editable.
-            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
-            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
-            draggable: Defines whether the element can be dragged.
-            enter_key_hint: Hints what media types the media element is able to play.
-            hidden: Defines whether the element is hidden.
-            input_mode: Defines the type of the element.
-            item_prop: Defines the name of the element for metadata purposes.
-            lang: Defines the language used in the element.
-            role: Defines the role of the element.
-            slot: Assigns a slot in a shadow DOM shadow tree to an element.
-            spell_check: Defines whether the element may be checked for spelling errors.
-            tab_index: Defines the position of the current element in the tabbing order.
-            title: Defines a tooltip for the element.
-            p: Padding: "0" - "9"
-            px: Padding horizontal: "0" - "9"
-            py: Padding vertical: "0" - "9"
-            pt: Padding top: "0" - "9"
-            pr: Padding right: "0" - "9"
-            pb: Padding bottom: "0" - "9"
-            pl: Padding left: "0" - "9"
-            shrink: Whether the element will take up the smallest possible space: "0" | "1"
-            grow: Whether the element will take up the largest possible space: "0" | "1"
-            m: Margin: "0" - "9"
-            mx: Margin horizontal: "0" - "9"
-            my: Margin vertical: "0" - "9"
-            mt: Margin top: "0" - "9"
-            mr: Margin right: "0" - "9"
-            mb: Margin bottom: "0" - "9"
-            ml: Margin left: "0" - "9"
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -355,7 +158,7 @@ class BaseList(Flex, LayoutComponent):
         """
         ...
 
-class UnorderedList(BaseList):
+class UnorderedList(BaseList, Ul):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -363,37 +166,6 @@ class UnorderedList(BaseList):
         *children,
         items: Optional[Union[Var[Iterable], Iterable]] = None,
         list_style_type: Optional[Literal["none", "disc", "circle", "square"]] = "disc",
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        direction: Optional[
-            Union[
-                Var[Literal["row", "column", "row-reverse", "column-reverse"]],
-                Literal["row", "column", "row-reverse", "column-reverse"],
-            ]
-        ] = None,
-        align: Optional[
-            Union[
-                Var[Literal["start", "center", "end", "baseline", "stretch"]],
-                Literal["start", "center", "end", "baseline", "stretch"],
-            ]
-        ] = None,
-        justify: Optional[
-            Union[
-                Var[Literal["start", "center", "end", "between"]],
-                Literal["start", "center", "end", "between"],
-            ]
-        ] = None,
-        wrap: Optional[
-            Union[
-                Var[Literal["nowrap", "wrap", "wrap-reverse"]],
-                Literal["nowrap", "wrap", "wrap-reverse"],
-            ]
-        ] = None,
-        spacing: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -434,92 +206,6 @@ class UnorderedList(BaseList):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        p: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        px: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        py: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pt: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pr: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pb: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pl: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        shrink: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
-        grow: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
-        m: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mx: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        my: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mt: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mr: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mb: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        ml: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -579,12 +265,6 @@ class UnorderedList(BaseList):
             *children: The children of the component.
             items: A list of items to add to the list.
             list_style_type: The style of the list.
-            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
-            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
-            justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
-            wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
-            spacing: Gap between children: "0" - "9"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -601,22 +281,6 @@ class UnorderedList(BaseList):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            p: Padding: "0" - "9"
-            px: Padding horizontal: "0" - "9"
-            py: Padding vertical: "0" - "9"
-            pt: Padding top: "0" - "9"
-            pr: Padding right: "0" - "9"
-            pb: Padding bottom: "0" - "9"
-            pl: Padding left: "0" - "9"
-            shrink: Whether the element will take up the smallest possible space: "0" | "1"
-            grow: Whether the element will take up the largest possible space: "0" | "1"
-            m: Margin: "0" - "9"
-            mx: Margin horizontal: "0" - "9"
-            my: Margin vertical: "0" - "9"
-            mt: Margin top: "0" - "9"
-            mr: Margin right: "0" - "9"
-            mb: Margin bottom: "0" - "9"
-            ml: Margin left: "0" - "9"
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -631,7 +295,7 @@ class UnorderedList(BaseList):
         """
         ...
 
-class OrderedList(BaseList):
+class OrderedList(BaseList, Ol):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -656,37 +320,13 @@ class OrderedList(BaseList):
                 "katakana",
             ]
         ] = "decimal",
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        direction: Optional[
-            Union[
-                Var[Literal["row", "column", "row-reverse", "column-reverse"]],
-                Literal["row", "column", "row-reverse", "column-reverse"],
-            ]
-        ] = None,
-        align: Optional[
-            Union[
-                Var[Literal["start", "center", "end", "baseline", "stretch"]],
-                Literal["start", "center", "end", "baseline", "stretch"],
-            ]
-        ] = None,
-        justify: Optional[
-            Union[
-                Var[Literal["start", "center", "end", "between"]],
-                Literal["start", "center", "end", "between"],
-            ]
-        ] = None,
-        wrap: Optional[
-            Union[
-                Var[Literal["nowrap", "wrap", "wrap-reverse"]],
-                Literal["nowrap", "wrap", "wrap-reverse"],
-            ]
+        reversed: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        spacing: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
+        start: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
+        type: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
         access_key: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -727,92 +367,6 @@ class OrderedList(BaseList):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
-        p: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        px: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        py: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pt: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pr: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pb: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pl: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        shrink: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
-        grow: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
-        m: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mx: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        my: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mt: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mr: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mb: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        ml: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -872,12 +426,9 @@ class OrderedList(BaseList):
             *children: The children of the component.
             items: A list of items to add to the list.
             list_style_type: The style of the list.
-            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
-            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
-            justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
-            wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
-            spacing: Gap between children: "0" - "9"
+            reversed: Reverses the order of the list.
+            start: Specifies the start value of the first list item in an ordered list.
+            type: Specifies the kind of marker to use in the list (letters or numbers).
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -894,22 +445,6 @@ class OrderedList(BaseList):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
-            p: Padding: "0" - "9"
-            px: Padding horizontal: "0" - "9"
-            py: Padding vertical: "0" - "9"
-            pt: Padding top: "0" - "9"
-            pr: Padding right: "0" - "9"
-            pb: Padding bottom: "0" - "9"
-            pl: Padding left: "0" - "9"
-            shrink: Whether the element will take up the smallest possible space: "0" | "1"
-            grow: Whether the element will take up the largest possible space: "0" | "1"
-            m: Margin: "0" - "9"
-            mx: Margin horizontal: "0" - "9"
-            my: Margin vertical: "0" - "9"
-            mt: Margin top: "0" - "9"
-            mr: Margin right: "0" - "9"
-            mb: Margin bottom: "0" - "9"
-            ml: Margin left: "0" - "9"
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -1110,163 +645,6 @@ class List(ComponentNamespace):
                 ],
             ]
         ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        direction: Optional[
-            Union[
-                Var[Literal["row", "column", "row-reverse", "column-reverse"]],
-                Literal["row", "column", "row-reverse", "column-reverse"],
-            ]
-        ] = None,
-        align: Optional[
-            Union[
-                Var[Literal["start", "center", "end", "baseline", "stretch"]],
-                Literal["start", "center", "end", "baseline", "stretch"],
-            ]
-        ] = None,
-        justify: Optional[
-            Union[
-                Var[Literal["start", "center", "end", "between"]],
-                Literal["start", "center", "end", "between"],
-            ]
-        ] = None,
-        wrap: Optional[
-            Union[
-                Var[Literal["nowrap", "wrap", "wrap-reverse"]],
-                Literal["nowrap", "wrap", "wrap-reverse"],
-            ]
-        ] = None,
-        spacing: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        access_key: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        auto_capitalize: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        content_editable: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        context_menu: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        draggable: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        enter_key_hint: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        hidden: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        input_mode: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        item_prop: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        spell_check: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        tab_index: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        title: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        p: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        px: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        py: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pt: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pr: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pb: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        pl: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        shrink: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
-        grow: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
-        m: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mx: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        my: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mt: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mr: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        mb: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
-        ml: Optional[
-            Union[
-                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-            ]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -1326,44 +704,6 @@ class List(ComponentNamespace):
             *children: The children of the component.
             items: A list of items to add to the list.
             list_style_type: The style of the list. Default to "none".
-            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
-            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
-            justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
-            wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
-            spacing: Gap between children: "0" - "9"
-            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
-            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
-            content_editable: Indicates whether the element's content is editable.
-            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
-            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
-            draggable: Defines whether the element can be dragged.
-            enter_key_hint: Hints what media types the media element is able to play.
-            hidden: Defines whether the element is hidden.
-            input_mode: Defines the type of the element.
-            item_prop: Defines the name of the element for metadata purposes.
-            lang: Defines the language used in the element.
-            role: Defines the role of the element.
-            slot: Assigns a slot in a shadow DOM shadow tree to an element.
-            spell_check: Defines whether the element may be checked for spelling errors.
-            tab_index: Defines the position of the current element in the tabbing order.
-            title: Defines a tooltip for the element.
-            p: Padding: "0" - "9"
-            px: Padding horizontal: "0" - "9"
-            py: Padding vertical: "0" - "9"
-            pt: Padding top: "0" - "9"
-            pr: Padding right: "0" - "9"
-            pb: Padding bottom: "0" - "9"
-            pl: Padding left: "0" - "9"
-            shrink: Whether the element will take up the smallest possible space: "0" | "1"
-            grow: Whether the element will take up the largest possible space: "0" | "1"
-            m: Margin: "0" - "9"
-            mx: Margin horizontal: "0" - "9"
-            my: Margin vertical: "0" - "9"
-            mt: Margin top: "0" - "9"
-            mr: Margin right: "0" - "9"
-            mb: Margin bottom: "0" - "9"
-            ml: Margin left: "0" - "9"
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.


Test patch:
diff --git a/tests/components/typography/test_markdown.py b/tests/components/typography/test_markdown.py
index 2d7a07537de..6aff1811067 100644
--- a/tests/components/typography/test_markdown.py
+++ b/tests/components/typography/test_markdown.py
@@ -14,8 +14,8 @@
         ("h5", "Heading"),
         ("h6", "Heading"),
         ("p", "Text"),
-        ("ul", "Flex"),
-        ("ol", "Flex"),
+        ("ul", "ul"),
+        ("ol", "ol"),
         ("li", "li"),
         ("a", "Link"),
         ("code", "Code"),