Popover

const PreviewEn = () => {
  return (
    <Popover.TriggerContext>
      <Popover.Trigger>Open popover</Popover.Trigger>
      <Popover placement='top'>
        The popover provides a quick message. You can use it to show the user
        information that is relevant to the context.
      </Popover>
    </Popover.TriggerContext>
  );
};

render(<PreviewEn />)

const InteractiveEn = () => {
  return (
    <Popover.TriggerContext>
      <Popover.Trigger data-color='danger' aria-label='Delete row'>
        <TrashIcon title='Delete row' />
      </Popover.Trigger>
      <Popover data-color='danger'>
        <Paragraph>
          Are you sure you want to delete this row? This action cannot be
          undone.
        </Paragraph>
        <div
          style={{
            display: 'flex',
            gap: 'var(--ds-size-2)',
            marginTop: 'var(--ds-size-2)',
          }}
        >
          <Button data-size='sm'>Yes, delete it</Button>
          <Button data-size='sm' variant='tertiary'>
            Cancel
          </Button>
        </div>
      </Popover>
    </Popover.TriggerContext>
  );
};

render(<InteractiveEn />)

const DottedUnderlineEn = () => {
  return (
    <Popover.TriggerContext>
      <Paragraph>
        We use <Popover.Trigger inline>design tokens</Popover.Trigger> to ensure
        a consistent design.
      </Paragraph>
      <Popover data-color='neutral'>
        <Paragraph>
          <strong
            style={{
              display: 'block',
            }}
          >
            Design tokens
          </strong>
          Design tokens are a collection of variables that define the visual
          style within a design system.
        </Paragraph>
      </Popover>
    </Popover.TriggerContext>
  );
};

render(<DottedUnderlineEn />)