Chakra UI をアップデートしたら props が補完されなくなった

2021/12/14追記
v1.7.3 で修正されたのでこの対応は不要になった

---

@chakra-ui/react を v1.6.12 から v1.7.2 にアップデートしたら、 width や boxShadow など一部のプロパティが補完されなくなってしまった（新規インストールでも同様）
以下は VSCode で width プロパティを入力しているときの様子

v1.6.8

v1.7.2

issue にもあがっている
https://github.com/chakra-ui/chakra-ui/issues/5153

型定義を覗く

v1.6.8 ではこうなっているのが

v1.7.2 だとこうなっている

色々用意されていたリテラル型が全部 string にされてしまっている

解決策

公式ドキュメント を参考にテーマファイルから型定義ファイルを生成する
ポイントは出力先を /node_modules/@chakra-ui/styled-system/dist/declarations/src/theming.types.d.ts に変更すること

$ yarn add -D @chakra-ui/cli
$ yarn chakra-cli tokens /theme/index.ts --out node_modules/@chakra-ui/styled-system/dist/declarations/src/theming.types.d.ts