Version 2.4.0

All packages

Fix issue where using @chakra-ui/react or any sub-package in a TypeScript project with "type": "module" in package.json and "moduleResolution": "Node16" in tsconfig.json cannot find the types.

@chakra-ui/card@2.1.0

Introduced new Card component

export function Basic() { return ( <Card> <CardHeader> <Heading size="md"> Customer dashboard</Heading> </CardHeader> <CardBody> <Text>View a summary of all your customers over the last month.</Text> </CardBody> <CardFooter> <Button>View here</Button> </CardFooter> </Card> ) }

export function Basic() {
  return (
    <Card>
      <CardHeader>
        <Heading size="md"> Customer dashboard</Heading>
      </CardHeader>
      <CardBody>
        <Text>View a summary of all your customers over the last month.</Text>
      </CardBody>
      <CardFooter>
        <Button>View here</Button>
      </CardFooter>
    </Card>
  )
}

@chakra-ui/system@2.3.2

Remove Dict type dependency from createStyleContext

@chakra-ui/tooltip@2.2.1

Fixed issue where dynamically changing a tooltip's isDisabled when it is open didn't have any effect.

Now, changing the isDisabled prop will close the tooltip leading to a more consistent behavior.

@chakra-ui/theme@2.2.0

Refactor theme to use CSS variables