@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/coverage/lcov-report/src/button/AsyncButton.tsx.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/137</span>
+                <span class='fraction'>320/320</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">89.74% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/1</span>
+                <span class='fraction'>35/39</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/1</span>
+                <span class='fraction'>2/2</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/137</span>
+                <span class='fraction'>320/320</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line low'></div>
+    <div class='status-line high'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -200,280 +200,829 @@
 <a name='L135'></a><a href='#L135'>135</a>
 <a name='L136'></a><a href='#L136'>136</a>
 <a name='L137'></a><a href='#L137'>137</a>
-<a name='L138'></a><a href='#L138'>138</a></td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js"><span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" ><span class="branch-0 cbranch-no" title="branch not covered" >"use client";</span></span></span>
-<span class="cstat-no" title="statement not covered" >import { cnb } from "cnbuilder";</span>
-<span class="cstat-no" title="statement not covered" >import { type MouseEvent, type ReactElement, type ReactNode } from "react";</span>
-<span class="cstat-no" title="statement not covered" >import { type BoxAlignItems } from "../box/styles.js";</span>
-<span class="cstat-no" title="statement not covered" >import { overlay } from "../overlay/overlayStyles.js";</span>
-<span class="cstat-no" title="statement not covered" >import { CircularProgress } from "../progress/CircularProgress.js";</span>
-<span class="cstat-no" title="statement not covered" >import { LinearProgress } from "../progress/LinearProgress.js";</span>
-<span class="cstat-no" title="statement not covered" >import { type ProgressTheme } from "../progress/types.js";</span>
-<span class="cstat-no" title="statement not covered" >import { useAsyncAction } from "../useAsyncAction.js";</span>
-<span class="cstat-no" title="statement not covered" >import { Button, type ButtonProps } from "./Button.js";</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >const noop = (): void =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >  // do nothing</span>
-<span class="cstat-no" title="statement not covered" >};</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >/**</span>
-<span class="cstat-no" title="statement not covered" > * @remarks \@since 6.0.0</span>
-<span class="cstat-no" title="statement not covered" > */</span>
-<span class="cstat-no" title="statement not covered" >export type AsyncButtonLoadingType =</span>
-<span class="cstat-no" title="statement not covered" >  | "circular-before"</span>
-<span class="cstat-no" title="statement not covered" >  | "circular-after"</span>
-<span class="cstat-no" title="statement not covered" >  | "circular-overlay"</span>
-<span class="cstat-no" title="statement not covered" >  | "linear-above"</span>
-<span class="cstat-no" title="statement not covered" >  | "linear-below";</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >/**</span>
-<span class="cstat-no" title="statement not covered" > * @remarks \@since 6.0.0</span>
-<span class="cstat-no" title="statement not covered" > */</span>
-<span class="cstat-no" title="statement not covered" >export interface AsyncButtonProps extends ButtonProps {</span>
-<span class="cstat-no" title="statement not covered" >  onClick?(event: MouseEvent&lt;HTMLButtonElement&gt;): Promise&lt;void&gt; | void;</span>
-<span class="cstat-no" title="statement not covered" >  loading?: boolean;</span>
-<span class="cstat-no" title="statement not covered" >  loadingType?: AsyncButtonLoadingType;</span>
-<span class="cstat-no" title="statement not covered" >  loadingChildren?: ReactNode;</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >  /**</span>
-<span class="cstat-no" title="statement not covered" >   * Set this to `true` to use the `disabled` theme while loading.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @defaultValue `false`</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  loadingDisabledTheme?: boolean;</span>
-<span class="cstat-no" title="statement not covered" >  beforeAddon?: ReactNode;</span>
-<span class="cstat-no" title="statement not covered" >  afterAddon?: ReactNode;</span>
-<span class="cstat-no" title="statement not covered" >}</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >/**</span>
-<span class="cstat-no" title="statement not covered" > * @remarks \@since 6.0.0</span>
-<span class="cstat-no" title="statement not covered" > */</span>
-<span class="cstat-no" title="statement not covered" >export function AsyncButton(props: AsyncButtonProps): ReactElement {</span>
-<span class="cstat-no" title="statement not covered" >  const {</span>
-<span class="cstat-no" title="statement not covered" >    onClick = noop,</span>
-<span class="cstat-no" title="statement not covered" >    children,</span>
-<span class="cstat-no" title="statement not covered" >    theme,</span>
-<span class="cstat-no" title="statement not covered" >    className,</span>
-<span class="cstat-no" title="statement not covered" >    disabled,</span>
-<span class="cstat-no" title="statement not covered" >    loading: propLoading = false,</span>
-<span class="cstat-no" title="statement not covered" >    loadingType = "circular-overlay",</span>
-<span class="cstat-no" title="statement not covered" >    loadingChildren: pendingChildren,</span>
-<span class="cstat-no" title="statement not covered" >    loadingDisabledTheme = false,</span>
-<span class="cstat-no" title="statement not covered" >    afterAddon: propAfterAddon,</span>
-<span class="cstat-no" title="statement not covered" >    beforeAddon: propBeforeAddon,</span>
-<span class="cstat-no" title="statement not covered" >    ...remaining</span>
-<span class="cstat-no" title="statement not covered" >  } = props;</span>
-<span class="cstat-no" title="statement not covered" >  const { handleAsync, pending } = useAsyncAction({ disabled });</span>
-<span class="cstat-no" title="statement not covered" >  const loading = pending || propLoading;</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >  let progressTheme: ProgressTheme = "current-color";</span>
-<span class="cstat-no" title="statement not covered" >  if (!theme || theme === "clear" || theme === "disabled") {</span>
-<span class="cstat-no" title="statement not covered" >    progressTheme = "primary";</span>
-<span class="cstat-no" title="statement not covered" >  }</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >  const progress = loadingType.includes("linear") ? (</span>
-<span class="cstat-no" title="statement not covered" >    &lt;LinearProgress theme={progressTheme} /&gt;</span>
-<span class="cstat-no" title="statement not covered" >  ) : (</span>
-<span class="cstat-no" title="statement not covered" >    &lt;CircularProgress theme={progressTheme} /&gt;</span>
-<span class="cstat-no" title="statement not covered" >  );</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >  let afterAddon = propAfterAddon;</span>
-<span class="cstat-no" title="statement not covered" >  let beforeAddon = propBeforeAddon;</span>
-<span class="cstat-no" title="statement not covered" >  let overlayElement: ReactNode;</span>
-<span class="cstat-no" title="statement not covered" >  let isOverlayCover = false;</span>
-<span class="cstat-no" title="statement not covered" >  switch (loadingType) {</span>
-<span class="cstat-no" title="statement not covered" >    case "circular-before":</span>
-<span class="cstat-no" title="statement not covered" >      beforeAddon = loading ? progress : propBeforeAddon;</span>
-<span class="cstat-no" title="statement not covered" >      break;</span>
-<span class="cstat-no" title="statement not covered" >    case "circular-after":</span>
-<span class="cstat-no" title="statement not covered" >      afterAddon = loading ? progress : propAfterAddon;</span>
-<span class="cstat-no" title="statement not covered" >      break;</span>
-<span class="cstat-no" title="statement not covered" >    case "circular-overlay":</span>
-<span class="cstat-no" title="statement not covered" >    case "linear-above":</span>
-<span class="cstat-no" title="statement not covered" >    case "linear-below": {</span>
-<span class="cstat-no" title="statement not covered" >      let alignItems: BoxAlignItems = "center";</span>
-<span class="cstat-no" title="statement not covered" >      if (loadingType === "linear-above") {</span>
-<span class="cstat-no" title="statement not covered" >        alignItems = "start";</span>
-<span class="cstat-no" title="statement not covered" >      } else if (loadingType === "linear-below") {</span>
-<span class="cstat-no" title="statement not covered" >        alignItems = "end";</span>
-<span class="cstat-no" title="statement not covered" >      } else {</span>
-<span class="cstat-no" title="statement not covered" >        isOverlayCover = true;</span>
-<span class="cstat-no" title="statement not covered" >      }</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >      overlayElement = loading &amp;&amp; (</span>
-<span class="cstat-no" title="statement not covered" >        &lt;span</span>
-<span class="cstat-no" title="statement not covered" >          className={overlay({</span>
-<span class="cstat-no" title="statement not covered" >            active: true,</span>
-<span class="cstat-no" title="statement not covered" >            visible: true,</span>
-<span class="cstat-no" title="statement not covered" >            absolute: true,</span>
-<span class="cstat-no" title="statement not covered" >            alignItems,</span>
-<span class="cstat-no" title="statement not covered" >          })}</span>
-<span class="cstat-no" title="statement not covered" >        &gt;</span>
-<span class="cstat-no" title="statement not covered" >          {progress}</span>
-<span class="cstat-no" title="statement not covered" >        &lt;/span&gt;</span>
-<span class="cstat-no" title="statement not covered" >      );</span>
-<span class="cstat-no" title="statement not covered" >      break;</span>
-<span class="cstat-no" title="statement not covered" >    }</span>
-<span class="cstat-no" title="statement not covered" >  }</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >  return (</span>
-<span class="cstat-no" title="statement not covered" >    &lt;Button</span>
-<span class="cstat-no" title="statement not covered" >      {...remaining}</span>
-<span class="cstat-no" title="statement not covered" >      aria-disabled={loading || undefined}</span>
-<span class="cstat-no" title="statement not covered" >      disabled={disabled}</span>
-<span class="cstat-no" title="statement not covered" >      className={cnb(</span>
-<span class="cstat-no" title="statement not covered" >        "rmd-button--async",</span>
-<span class="cstat-no" title="statement not covered" >        loading &amp;&amp; isOverlayCover &amp;&amp; "rmd-button--async-overlay",</span>
-<span class="cstat-no" title="statement not covered" >        className</span>
-<span class="cstat-no" title="statement not covered" >      )}</span>
-<span class="cstat-no" title="statement not covered" >      theme={loading &amp;&amp; loadingDisabledTheme ? "disabled" : theme}</span>
-<span class="cstat-no" title="statement not covered" >      onClick={handleAsync((event) =&gt; Promise.resolve(onClick(event)))}</span>
-<span class="cstat-no" title="statement not covered" >    &gt;</span>
-<span class="cstat-no" title="statement not covered" >      {beforeAddon}</span>
-<span class="cstat-no" title="statement not covered" >      {loading &amp;&amp; typeof pendingChildren !== "undefined"</span>
-<span class="cstat-no" title="statement not covered" >        ? pendingChildren</span>
-<span class="cstat-no" title="statement not covered" >        : children}</span>
-<span class="cstat-no" title="statement not covered" >      {afterAddon}</span>
-<span class="cstat-no" title="statement not covered" >      {overlayElement}</span>
-<span class="cstat-no" title="statement not covered" >    &lt;/Button&gt;</span>
-<span class="cstat-no" title="statement not covered" >  );</span>
-<span class="cstat-no" title="statement not covered" >}</span>
+<a name='L138'></a><a href='#L138'>138</a>
+<a name='L139'></a><a href='#L139'>139</a>
+<a name='L140'></a><a href='#L140'>140</a>
+<a name='L141'></a><a href='#L141'>141</a>
+<a name='L142'></a><a href='#L142'>142</a>
+<a name='L143'></a><a href='#L143'>143</a>
+<a name='L144'></a><a href='#L144'>144</a>
+<a name='L145'></a><a href='#L145'>145</a>
+<a name='L146'></a><a href='#L146'>146</a>
+<a name='L147'></a><a href='#L147'>147</a>
+<a name='L148'></a><a href='#L148'>148</a>
+<a name='L149'></a><a href='#L149'>149</a>
+<a name='L150'></a><a href='#L150'>150</a>
+<a name='L151'></a><a href='#L151'>151</a>
+<a name='L152'></a><a href='#L152'>152</a>
+<a name='L153'></a><a href='#L153'>153</a>
+<a name='L154'></a><a href='#L154'>154</a>
+<a name='L155'></a><a href='#L155'>155</a>
+<a name='L156'></a><a href='#L156'>156</a>
+<a name='L157'></a><a href='#L157'>157</a>
+<a name='L158'></a><a href='#L158'>158</a>
+<a name='L159'></a><a href='#L159'>159</a>
+<a name='L160'></a><a href='#L160'>160</a>
+<a name='L161'></a><a href='#L161'>161</a>
+<a name='L162'></a><a href='#L162'>162</a>
+<a name='L163'></a><a href='#L163'>163</a>
+<a name='L164'></a><a href='#L164'>164</a>
+<a name='L165'></a><a href='#L165'>165</a>
+<a name='L166'></a><a href='#L166'>166</a>
+<a name='L167'></a><a href='#L167'>167</a>
+<a name='L168'></a><a href='#L168'>168</a>
+<a name='L169'></a><a href='#L169'>169</a>
+<a name='L170'></a><a href='#L170'>170</a>
+<a name='L171'></a><a href='#L171'>171</a>
+<a name='L172'></a><a href='#L172'>172</a>
+<a name='L173'></a><a href='#L173'>173</a>
+<a name='L174'></a><a href='#L174'>174</a>
+<a name='L175'></a><a href='#L175'>175</a>
+<a name='L176'></a><a href='#L176'>176</a>
+<a name='L177'></a><a href='#L177'>177</a>
+<a name='L178'></a><a href='#L178'>178</a>
+<a name='L179'></a><a href='#L179'>179</a>
+<a name='L180'></a><a href='#L180'>180</a>
+<a name='L181'></a><a href='#L181'>181</a>
+<a name='L182'></a><a href='#L182'>182</a>
+<a name='L183'></a><a href='#L183'>183</a>
+<a name='L184'></a><a href='#L184'>184</a>
+<a name='L185'></a><a href='#L185'>185</a>
+<a name='L186'></a><a href='#L186'>186</a>
+<a name='L187'></a><a href='#L187'>187</a>
+<a name='L188'></a><a href='#L188'>188</a>
+<a name='L189'></a><a href='#L189'>189</a>
+<a name='L190'></a><a href='#L190'>190</a>
+<a name='L191'></a><a href='#L191'>191</a>
+<a name='L192'></a><a href='#L192'>192</a>
+<a name='L193'></a><a href='#L193'>193</a>
+<a name='L194'></a><a href='#L194'>194</a>
+<a name='L195'></a><a href='#L195'>195</a>
+<a name='L196'></a><a href='#L196'>196</a>
+<a name='L197'></a><a href='#L197'>197</a>
+<a name='L198'></a><a href='#L198'>198</a>
+<a name='L199'></a><a href='#L199'>199</a>
+<a name='L200'></a><a href='#L200'>200</a>
+<a name='L201'></a><a href='#L201'>201</a>
+<a name='L202'></a><a href='#L202'>202</a>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a>
+<a name='L214'></a><a href='#L214'>214</a>
+<a name='L215'></a><a href='#L215'>215</a>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</a>
+<a name='L219'></a><a href='#L219'>219</a>
+<a name='L220'></a><a href='#L220'>220</a>
+<a name='L221'></a><a href='#L221'>221</a>
+<a name='L222'></a><a href='#L222'>222</a>
+<a name='L223'></a><a href='#L223'>223</a>
+<a name='L224'></a><a href='#L224'>224</a>
+<a name='L225'></a><a href='#L225'>225</a>
+<a name='L226'></a><a href='#L226'>226</a>
+<a name='L227'></a><a href='#L227'>227</a>
+<a name='L228'></a><a href='#L228'>228</a>
+<a name='L229'></a><a href='#L229'>229</a>
+<a name='L230'></a><a href='#L230'>230</a>
+<a name='L231'></a><a href='#L231'>231</a>
+<a name='L232'></a><a href='#L232'>232</a>
+<a name='L233'></a><a href='#L233'>233</a>
+<a name='L234'></a><a href='#L234'>234</a>
+<a name='L235'></a><a href='#L235'>235</a>
+<a name='L236'></a><a href='#L236'>236</a>
+<a name='L237'></a><a href='#L237'>237</a>
+<a name='L238'></a><a href='#L238'>238</a>
+<a name='L239'></a><a href='#L239'>239</a>
+<a name='L240'></a><a href='#L240'>240</a>
+<a name='L241'></a><a href='#L241'>241</a>
+<a name='L242'></a><a href='#L242'>242</a>
+<a name='L243'></a><a href='#L243'>243</a>
+<a name='L244'></a><a href='#L244'>244</a>
+<a name='L245'></a><a href='#L245'>245</a>
+<a name='L246'></a><a href='#L246'>246</a>
+<a name='L247'></a><a href='#L247'>247</a>
+<a name='L248'></a><a href='#L248'>248</a>
+<a name='L249'></a><a href='#L249'>249</a>
+<a name='L250'></a><a href='#L250'>250</a>
+<a name='L251'></a><a href='#L251'>251</a>
+<a name='L252'></a><a href='#L252'>252</a>
+<a name='L253'></a><a href='#L253'>253</a>
+<a name='L254'></a><a href='#L254'>254</a>
+<a name='L255'></a><a href='#L255'>255</a>
+<a name='L256'></a><a href='#L256'>256</a>
+<a name='L257'></a><a href='#L257'>257</a>
+<a name='L258'></a><a href='#L258'>258</a>
+<a name='L259'></a><a href='#L259'>259</a>
+<a name='L260'></a><a href='#L260'>260</a>
+<a name='L261'></a><a href='#L261'>261</a>
+<a name='L262'></a><a href='#L262'>262</a>
+<a name='L263'></a><a href='#L263'>263</a>
+<a name='L264'></a><a href='#L264'>264</a>
+<a name='L265'></a><a href='#L265'>265</a>
+<a name='L266'></a><a href='#L266'>266</a>
+<a name='L267'></a><a href='#L267'>267</a>
+<a name='L268'></a><a href='#L268'>268</a>
+<a name='L269'></a><a href='#L269'>269</a>
+<a name='L270'></a><a href='#L270'>270</a>
+<a name='L271'></a><a href='#L271'>271</a>
+<a name='L272'></a><a href='#L272'>272</a>
+<a name='L273'></a><a href='#L273'>273</a>
+<a name='L274'></a><a href='#L274'>274</a>
+<a name='L275'></a><a href='#L275'>275</a>
+<a name='L276'></a><a href='#L276'>276</a>
+<a name='L277'></a><a href='#L277'>277</a>
+<a name='L278'></a><a href='#L278'>278</a>
+<a name='L279'></a><a href='#L279'>279</a>
+<a name='L280'></a><a href='#L280'>280</a>
+<a name='L281'></a><a href='#L281'>281</a>
+<a name='L282'></a><a href='#L282'>282</a>
+<a name='L283'></a><a href='#L283'>283</a>
+<a name='L284'></a><a href='#L284'>284</a>
+<a name='L285'></a><a href='#L285'>285</a>
+<a name='L286'></a><a href='#L286'>286</a>
+<a name='L287'></a><a href='#L287'>287</a>
+<a name='L288'></a><a href='#L288'>288</a>
+<a name='L289'></a><a href='#L289'>289</a>
+<a name='L290'></a><a href='#L290'>290</a>
+<a name='L291'></a><a href='#L291'>291</a>
+<a name='L292'></a><a href='#L292'>292</a>
+<a name='L293'></a><a href='#L293'>293</a>
+<a name='L294'></a><a href='#L294'>294</a>
+<a name='L295'></a><a href='#L295'>295</a>
+<a name='L296'></a><a href='#L296'>296</a>
+<a name='L297'></a><a href='#L297'>297</a>
+<a name='L298'></a><a href='#L298'>298</a>
+<a name='L299'></a><a href='#L299'>299</a>
+<a name='L300'></a><a href='#L300'>300</a>
+<a name='L301'></a><a href='#L301'>301</a>
+<a name='L302'></a><a href='#L302'>302</a>
+<a name='L303'></a><a href='#L303'>303</a>
+<a name='L304'></a><a href='#L304'>304</a>
+<a name='L305'></a><a href='#L305'>305</a>
+<a name='L306'></a><a href='#L306'>306</a>
+<a name='L307'></a><a href='#L307'>307</a>
+<a name='L308'></a><a href='#L308'>308</a>
+<a name='L309'></a><a href='#L309'>309</a>
+<a name='L310'></a><a href='#L310'>310</a>
+<a name='L311'></a><a href='#L311'>311</a>
+<a name='L312'></a><a href='#L312'>312</a>
+<a name='L313'></a><a href='#L313'>313</a>
+<a name='L314'></a><a href='#L314'>314</a>
+<a name='L315'></a><a href='#L315'>315</a>
+<a name='L316'></a><a href='#L316'>316</a>
+<a name='L317'></a><a href='#L317'>317</a>
+<a name='L318'></a><a href='#L318'>318</a>
+<a name='L319'></a><a href='#L319'>319</a>
+<a name='L320'></a><a href='#L320'>320</a>
+<a name='L321'></a><a href='#L321'>321</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">26x</span>
+<span class="cline-any cline-yes">26x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">22x</span>
+<span class="cline-any cline-yes">21x</span>
+<span class="cline-any cline-yes">21x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">26x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">27x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">"use client";
+import { cnb } from "cnbuilder";
+import { forwardRef, type MouseEvent, type ReactNode } from "react";
+import { type BoxAlignItems } from "../box/styles.js";
+import { overlay } from "../overlay/overlayStyles.js";
+import {
+  CircularProgress,
+  type CircularProgressProps,
+} from "../progress/CircularProgress.js";
+import {
+  LinearProgress,
+  type LinearProgressProps,
+} from "../progress/LinearProgress.js";
+import { type ProgressTheme } from "../progress/types.js";
+import { type PropsWithRef } from "../types.js";
+import { useAsyncAction } from "../useAsyncAction.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { Button, type ButtonProps } from "./Button.js";
+&nbsp;
+const noop = (): void =&gt; {
+  // do nothing
+};
+&nbsp;
+/**
+ * @remarks \@since 6.0.0
+ */
+export type AsyncButtonLoadingType =
+  | "circular-before"
+  | "circular-after"
+  | "circular-overlay"
+  | "linear-above"
+  | "linear-below";
+&nbsp;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface AsyncButtonProps extends ButtonProps {
+  /**
+   * @see {@link progressAriaLabelledBy}
+   * @defaultValue `"async-button" + useId()`
+   */
+  id?: string;
+&nbsp;
+  /**
+   * When this is defined and returns a `Promise`, the loading indicator will
+   * display until the promise has resolved.
+   *
+   * @defaultValue `() =&gt; {}`
+   */
+  onClick?(event: MouseEvent&lt;HTMLButtonElement&gt;): Promise&lt;void&gt; | void;
+&nbsp;
+  /**
+   * Set this to `true` to manually display a loading spinner.
+   *
+   * @defaultValue `false`
+   */
+  loading?: boolean;
+&nbsp;
+  /**
+   * - `"circular-overlay"` - Covers and hides the button content with a
+   *   centered circular progress
+   * - `"circular-before"` - Renders a circular progress bar before the button
+   *   content which is useful when rendering an icon before the button text.
+   *   See {@link beforeAddon} as well.
+   * - `"circular-after"` - Renders a circular progress bar before the button
+   *   content which is useful when rendering an icon after the button text.
+   *   See {@link afterAddon} as well.
+   * - `"linear-above"` - Renders a linear progress bar at the top of the button
+   *   while still displaying the button contents. Usually looks good for
+   *   outlined buttons.
+   * - `"linear-below"` - Renders a linear progress bar at the bottom of the
+   *   button while still displaying the button contents. Usually looks good for
+   *   outlined buttons.
+   *
+   * @defaultValue `"circular-overlay"`
+   */
+  loadingType?: AsyncButtonLoadingType;
+&nbsp;
+  /**
+   * Optional content to display instead of the default `children` while
+   * loading.
+   */
+  loadingChildren?: ReactNode;
+&nbsp;
+  /**
+   * Set this to `true` to use the `disabled` theme while loading.
+   *
+   * @defaultValue `false`
+   */
+  loadingDisabledTheme?: boolean;
+&nbsp;
+  /**
+   * This should be used when the {@link loadingType} is set to
+   * `"circular-before"`, an icon should appear before the other content in
+   * the button, and the loading indicator should replace the icon.
+   */
+  beforeAddon?: ReactNode;
+&nbsp;
+  /**
+   * This should be used when the {@link loadingType} is set to
+   * `"circular-after"`, an icon should appear before the other content in
+   * the button, and the loading indicator should replace the icon.
+   */
+  afterAddon?: ReactNode;
+&nbsp;
+  /**
+   * An optional label to provide to the progressbar.
+   *
+   * @see {@link progressAriaLabelledBy}
+   */
+  progressAriaLabel?: string;
+&nbsp;
+  /**
+   * @see {@link id}
+   * @defaultValue `id`
+   */
+  progressAriaLabelledBy?: string;
+&nbsp;
+  /**
+   * Any additional props to pass to the `CircularProgress` bar when the
+   * {@link loadingType} is one of the circular types.
+   */
+  linearProgressProps?: PropsWithRef&lt;LinearProgressProps, HTMLDivElement&gt;;
+&nbsp;
+  /**
+   * Any additional props to pass to the `LinearProgress` bar when the
+   * {@link loadingType} is one of the linear types.
+   */
+  circularProgressProps?: PropsWithRef&lt;CircularProgressProps, HTMLSpanElement&gt;;
+}
+&nbsp;
+/**
+ * **Client Component**
+ *
+ * The async button can be used to render a loading indicator within a button
+ * during an async task. The loading spinner can be shown either by enabling the
+ * `loading` prop or returning a promise from the `onClick` event which will
+ * continue to show the loading indicator until the promise has been resolved.
+ *
+ * @example
+ * Async onClick
+ * ```tsx
+ * import { AsyncButton } from "@react-md/core";
+ * import { useState, type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const [data, setData] = useState(null);
+ *   return (
+ *     &lt;AsyncButton
+ *       type="submit"
+ *       onClick={async () =&gt; {
+ *         const response = await fetch("/my-api");
+ *         const json = await response.json();
+ *         setData(json);
+ *       }}
+ *     &gt;
+ *       Submit
+ *     &lt;/AsyncButton&gt;
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Manual Loading State
+ * ```tsx
+ * import { AsyncButton } from "@react-md/core";
+ * import { useMutation } from "@tanstack/query";
+ * import { useState, type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { isLoading, mutate } = useMutation({
+ *     mutationFn: (newTodo) =&gt; fetch('/todos', {
+ *       method: "POST",
+ *       body: JSON.stringify(newTodo),
+ *     }),
+ *   });
+ *
+ *   return (
+ *     &lt;AsyncButton
+ *       type="submit"
+ *       loading={isLoading}
+ *       onClick={() =&gt; {
+ *         mutate({ id: Date.now(), title: "Create example" });
+ *       }}
+ *     &gt;
+ *       Create Todo
+ *     &lt;/AsyncButton&gt;
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export const AsyncButton = forwardRef&lt;HTMLButtonElement, AsyncButtonProps&gt;(
+  function AsyncButton(props, ref) {
+    const {
+      id: propId,
+      onClick = noop,
+      children,
+      floating = null,
+      theme = floating ? "secondary" : "clear",
+      themeType = floating ? "contained" : "flat",
+      buttonType = floating ? "icon" : "text",
+      className,
+      disabled,
+      loading: propLoading = false,
+      loadingType = "circular-overlay",
+      loadingChildren,
+      loadingDisabledTheme = false,
+      afterAddon: propAfterAddon,
+      beforeAddon: propBeforeAddon,
+      linearProgressProps,
+      circularProgressProps,
+      progressAriaLabel,
+      progressAriaLabelledBy: propProgressAriaLabelledBy,
+      ...remaining
+    } = props;
+    const id = useEnsuredId(propId, "async-button");
+    const { handleAsync, pending } = useAsyncAction({ disabled });
+    const loading = pending || propLoading;
+&nbsp;
+    let progressTheme: ProgressTheme = "current-color";
+    if (theme === "clear" || theme === "disabled") {
+      progressTheme = "primary";
+    }
+&nbsp;
+    let progressAriaLabelledBy = propProgressAriaLabelledBy;
+    if (
+      !progressAriaLabel &amp;&amp;
+      !<span class="branch-0 cbranch-no" title="branch not covered" >linearProgressProps?.["aria-label"] </span>&amp;&amp;
+      !<span class="branch-0 cbranch-no" title="branch not covered" >linearProgressProps?.["aria-labelledby"] </span>&amp;&amp;
+      !<span class="branch-0 cbranch-no" title="branch not covered" >circularProgressProps?.["aria-label"] </span>&amp;&amp;
+      !<span class="branch-0 cbranch-no" title="branch not covered" >circularProgressProps?.["aria-labelledby"]</span>
+    ) {
+      progressAriaLabelledBy = id;
+    }
+&nbsp;
+    const progress = loadingType.includes("linear") ? (
+      &lt;LinearProgress
+        aria-label={progressAriaLabel}
+        aria-labelledby={progressAriaLabelledBy as string}
+        {...linearProgressProps}
+        theme={progressTheme}
+      /&gt;
+    ) : (
+      &lt;CircularProgress
+        aria-label={progressAriaLabel}
+        aria-labelledby={progressAriaLabelledBy as string}
+        {...circularProgressProps}
+        theme={progressTheme}
+      /&gt;
+    );
+&nbsp;
+    let afterAddon = propAfterAddon;
+    let beforeAddon = propBeforeAddon;
+    let overlayElement: ReactNode;
+    let isOverlayCover = false;
+    switch (loadingType) {
+      case "circular-before":
+        beforeAddon = loading ? progress : propBeforeAddon;
+        break;
+      case "circular-after":
+        afterAddon = loading ? progress : propAfterAddon;
+        break;
+      case "circular-overlay":
+      case "linear-above":
+      case "linear-below": {
+        let alignItems: BoxAlignItems = "center";
+        if (loadingType === "linear-above") {
+          alignItems = "start";
+        } else if (loadingType === "linear-below") {
+          alignItems = "end";
+        } else {
+          isOverlayCover = true;
+        }
+&nbsp;
+        overlayElement = loading &amp;&amp; (
+          &lt;span
+            className={overlay({
+              active: true,
+              visible: true,
+              absolute: true,
+              align: alignItems,
+            })}
+          &gt;
+            {progress}
+          &lt;/span&gt;
+        );
+        break;
+      }
+    }
+&nbsp;
+    return (
+      &lt;Button
+        {...remaining}
+        aria-disabled={loading || undefined}
+        id={id}
+        ref={ref}
+        disabled={disabled}
+        floating={floating}
+        className={cnb(
+          "rmd-button--async",
+          loading &amp;&amp; isOverlayCover &amp;&amp; "rmd-button--async-overlay",
+          className
+        )}
+        theme={loading &amp;&amp; loadingDisabledTheme ? "disabled" : theme}
+        themeType={themeType}
+        buttonType={buttonType}
+        onClick={handleAsync((event) =&gt; Promise.resolve(onClick(event)))}
+      &gt;
+        {beforeAddon}
+        {loading &amp;&amp; typeof loadingChildren !== "undefined"
+          ? loadingChildren
+          : children}
+        {afterAddon}
+        {overlayElement}
+      &lt;/Button&gt;
+    );
+  }
+);
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -481,7 +1030,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-09-29T21:35:47.680Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>