Style "theorems" as callouts?

[mcanouil]

I saw #1925 and it gave me the idea to use the "callout" class to style the "Theorems and Proofs" divs.
Although, the results was not the one I expected because of TypeScript/Lua processing, i.e., "callouts" divs are processed in a specific way, so when combined with #exr- leads to a funny results.

How would someone apply callouts styling to "Theorems and Proofs" (preferably without having to create new classes or copy/paste callout to "theorem")?

See the qmd file and html code produced

---
title: "Untitled"
format: html
callout-important-caption: ''
---

::: {#exr-1 .callout-important icon=false}
Compute: 25 + 17.
:::

::: {#exr-2 .callout-important icon=false}
Let a = 25 and b = 17.

Compute: a + b.
:::

<div id="exr-1" class="callout-important callout callout-style-default no-icon callout-captioned theorem exercise">
  <div class="callout-header d-flex align-content-center">
    <span class="theorem-title"><strong>Exercise 2 </strong></span>
    <div class="callout-icon-container">
      <i class="callout-icon no-icon"></i>
    </div>
    <div class="callout-caption-container flex-fill">

    </div>
  </div>
  <div id="exr-1" class="callout-body-container callout-body theorem exercise">
    <p><span class="theorem-title"><strong>Exercise 1 </strong></span></p>
    <p>Compute: 25 + 17.</p>
  </div>
</div>

[mcanouil]

See https://quarto.org/docs/prerelease/1.3/ast.html#overview