[Bug] TypeError ao importar arquivos de estilização

Quando copiei o conteúdo da aula 3.4, me deparei com o seguinte erro em components.js:

TypeError: Cannot read properties of undefined (reading 'focus')
    at focus (src/theme/components.js:50:16)
  48 | export function Box({
  49 |   as,
> 50 |   styleSheet: { focus, hover, srOnly, ...styleSheet },
     |                ^
  51 |   ...props
  52 | }) {
  53 |   const Tag = as || 'div';
 ⨯ src/theme/components.js (50:17) @ focus
 ⨯ TypeError: Cannot read properties of undefined (reading 'focus')
    at Box (./src/theme/components.js:62:34)
  48 | export function Box({
  49 |   as,
> 50 |   styleSheet: { focus, hover, srOnly, ...styleSheet },
     |                 ^
  51 |   ...props
  52 | }) {
  53 |   const Tag = as || 'div';
 ⨯ src/theme/components.js (50:17) @ focus
 ⨯ TypeError: Cannot read properties of undefined (reading 'focus')
    at focus (src/theme/components.js:50:16)
  48 | export function Box({
  49 |   as,
> 50 |   styleSheet: { focus, hover, srOnly, ...styleSheet },
     |                ^
  51 |   ...props
  52 | }) {
  53 |   const Tag = as || 'div'; {
  page: '/'
}
  48 | export function Box({
  49 |   as,
> 50 |   styleSheet: { focus, hover, srOnly, ...styleSheet },
     |                 ^
  51 |   ...props
  52 | }) {
  53 |   const Tag = as || 'div';