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> ); }