Disclosure

<Disclosure summary="Vehicle details">
  <Text>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  </Text>
</Disclosure>

<Disclosure summary="Vehicle details" defaultExpanded>
  <Text>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  </Text>
</Disclosure>

<Disclosure
  summary={
    <Box direction="row" alignItems="center" justifyContent="space-between">
      <Text subStyle="emphasis">Tires</Text>
      <Badge type="success">Complete</Badge>
    </Box>
  }>
  <Text>All four tires passed the inspection.</Text>
</Disclosure>

<Disclosure
  summary={
    <Box direction="row" alignItems="center" justifyContent="space-between">
      <Text subStyle="emphasis">Vehicle details</Text>
      <IconButton
        icon={IconInfo}
        label="Vehicle information"
        onClick={(event) => event.stopPropagation()}
      />
    </Box>
  }>
  <Text>Vehicle information</Text>
</Disclosure>

function Example() {
  const [expanded, setExpanded] = React.useState(false)

  return (
    <Disclosure.Advanced
      summary={(currentExpanded, setCurrentExpanded) => (
        <Disclosure.Summary.Default
          expanded={currentExpanded}
          setExpanded={setCurrentExpanded}>
          Vehicle details
        </Disclosure.Summary.Default>
      )}
      expanded={expanded}
      onExpandedChange={setExpanded}>
      <Text>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      </Text>
    </Disclosure.Advanced>
  )
}

<Disclosure summary="Vehicle details" mode="compact">
  <Text>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  </Text>
</Disclosure>