"Received `*` for a non-boolean attribute `*`. " warning when styling the Box component

[Hokid]

Steps to reproduce

Steps:

1. Style the Box component with the styled fn:

import { styled } from '@pigment-css/react';
import Box from '@pigment-css/react/Box';

export const StyledBox = styled(Box)<{ bool?: boolean }>({
  color: 'red',
  variants: [
    {
      props: { bool: true },
      style: {
        color: 'blue'
      }
    }
  ]
})

2. Use the StyledBox component somewhere:

...
<StyledBox bool>
  Content
</StyledBox>
...

Current behavior

I see the following warning:

Received `true` for a non-boolean attribute `bool`.

If you want to write it to the DOM, pass a string instead: bool="true" or bool={value.toString()}.

Expected behavior

No warnings

Context

Styling the Box component

Your environment

npx @mui/envinfo

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
  Binaries:
    Node: 20.19.2 - ~/.nvm/versions/node/v20.19.2/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.19.2/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.204
  npmPackages:
    @emotion/react:  11.14.0 
    @emotion/styled:  11.14.0 
    @mui/core-downloads-tracker:  7.1.0 
    @mui/icons-material: 7.1.0 => 7.1.0 
    @mui/material: 7.1.0 => 7.1.0 
    @mui/material-pigment-css: 7.1.0 => 7.1.0 
    @mui/private-theming:  6.4.9 
    @mui/styled-engine:  6.4.11 
    @mui/system:  6.4.11 
    @mui/types:  7.2.24 
    @mui/utils:  6.4.9 
    @pigment-css/nextjs-plugin: 0.0.30 => 0.0.30 
    @pigment-css/react: 0.0.30 => 0.0.30 
    @pigment-css/unplugin:  0.0.30 
    @types/react: ^19 => 19.1.2 
    react: ^19.0.0 => 19.1.0 
    react-dom: ^19.0.0 => 19.1.0 
    typescript: ^5 => 5.8.3 

Search keywords: styled, non-boolean, Box