export default function Example() {
  const triggerCss = {
    border: "none",
    color: "$gray80",
    padding: 0,
    backgroundColor: "transparent",
    fontWeight: "normal",
    textDecoration: "underline",
    "&:hover": {
      backgroundColor: "transparent",
    },
  };
  return (
    <Box
      css={{
        display: "flex",
        gap: theme.space["500"],
      }}
    >
      <Popover.Root open={true}>
        <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
        <Popover.Portal>
          <Popover.Content width={96}>
            <Box
              css={{
                backgroundColor: theme.colors.gray500,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: theme.space["500"],
              }}
            >
              Default
            </Box>
          </Popover.Content>
        </Popover.Portal>
      </Popover.Root>
      <Popover.Root open={true}>
        <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
        <Popover.Portal>
          <Popover.Content density="compact" width={88}>
            <Box
              css={{
                backgroundColor: theme.colors.gray500,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: theme.space["500"],
              }}
            >
              Compact
            </Box>
          </Popover.Content>
        </Popover.Portal>
      </Popover.Root>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape