• The items to be listed should be passed as props to the component to allow reusability across segments & IDEs, which will be used to show the list of items in the segment in a Tree format
• Each item would be an Entity item component along with a left space and/or collapsible icon for toggle.
• Clicking on the collapsible icon - expands or hides the content. Clicking anywhere else - selects that tree component and doesn’t expand or hide contents.
• Collapsible is just an icon not an icon button
• On open/close state collapsible icon should change direction
• Add hover, active, error, focus, disabled states to be same as that of an entity item
• We have to override the EntityItems padding on the left to be 4px instead of 8px
• Spacing 4+X*10=padding-left(px). X-level of nesting (if it’s 0 than use 0px padding)
• Tree will not support descriptions for entity items
• Replace the current implementation on UI segment section with this new component

Design:
https://www.figma.com/design/sz08OJt2VrEgxQ8eToFIqG/ADS2.0---Components?node-id=8954-7244&t=3OyrB1zCOHGDQEA8-0