AnimatedExpandableContainer

Application
├── Button (application-supplied trigger)
└── AnimatedExpandableContainer
    └── Content

import { useState } from 'react';
import { Button } from 'twenty-ui/primitives/input';
import { AnimatedExpandableContainer } from 'twenty-ui/primitives/layout';
import { Text } from 'twenty-ui/primitives/typography';

export const ImportDetails = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <>
      <Button
        aria-expanded={isExpanded}
        onClick={() => setIsExpanded((expanded) => !expanded)}
      >
        {isExpanded ? 'Hide import details' : 'Show import details'}
      </Button>
      <AnimatedExpandableContainer isExpanded={isExpanded}>
        <Text>Match each CSV column to a record field before importing.</Text>
      </AnimatedExpandableContainer>
    </>
  );
};