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

package/coverage/lcov-report/snackbar/Toast.tsx.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">99.23% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/246</span>
+                <span class='fraction'>259/261</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">50% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/1</span>
+                <span class='fraction'>6/12</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'>1/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">99.23% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/246</span>
+                <span class='fraction'>259/261</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>
@@ -309,498 +309,543 @@
 <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></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-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 {</span>
-<span class="cstat-no" title="statement not covered" >  forwardRef,</span>
-<span class="cstat-no" title="statement not covered" >  isValidElement,</span>
-<span class="cstat-no" title="statement not covered" >  type AriaRole,</span>
-<span class="cstat-no" title="statement not covered" >  type HTMLAttributes,</span>
-<span class="cstat-no" title="statement not covered" >  type ReactElement,</span>
-<span class="cstat-no" title="statement not covered" >  type ReactNode,</span>
-<span class="cstat-no" title="statement not covered" >} from "react";</span>
-<span class="cstat-no" title="statement not covered" >import { type ButtonProps } from "../button/Button.js";</span>
-<span class="cstat-no" title="statement not covered" >import {</span>
-<span class="cstat-no" title="statement not covered" >  type CSSTransitionClassNames,</span>
-<span class="cstat-no" title="statement not covered" >  type TransitionCallbacks,</span>
-<span class="cstat-no" title="statement not covered" >  type TransitionTimeout,</span>
-<span class="cstat-no" title="statement not covered" >} from "../transition/types.js";</span>
-<span class="cstat-no" title="statement not covered" >import { useScaleTransition } from "../transition/useScaleTransition.js";</span>
-<span class="cstat-no" title="statement not covered" >import { type PropsWithRef } from "../types.js";</span>
-<span class="cstat-no" title="statement not covered" >import { useEnsuredId } from "../useEnsuredId.js";</span>
-<span class="cstat-no" title="statement not covered" >import { ToastActionButton } from "./ToastActionButton.js";</span>
-<span class="cstat-no" title="statement not covered" >import { ToastCloseButton } from "./ToastCloseButton.js";</span>
-<span class="cstat-no" title="statement not covered" >import { ToastContent, type ToastContentProps } from "./ToastContent.js";</span>
-<span class="cstat-no" title="statement not covered" >import { toast, type ToastTheme } from "./toastStyles.js";</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 ConfigurableToastProps</span>
-<span class="cstat-no" title="statement not covered" >  extends HTMLAttributes&lt;HTMLDivElement&gt;,</span>
-<span class="cstat-no" title="statement not covered" >    TransitionCallbacks {</span>
-<span class="cstat-no" title="statement not covered" >  /**</span>
-<span class="cstat-no" title="statement not covered" >   * Note: this default value will only be generated in the `Toast` component.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @defaultValue `"toast-" + useId()`</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  id?: string;</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" >   * Note: This is set while creating the toast.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @defaultValue `visibleTime === null ? "alert" : undefined`</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  role?: AriaRole;</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" >   * @defaultValue `"surface"`</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  theme?: ToastTheme;</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 stack the content above the {@link action}. It is not</span>
-<span class="cstat-no" title="statement not covered" >   * recommended to enable this prop if the {@link closeButton} is enabled.</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" >  stacked?: boolean;</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" >   * If this is not provided, a `ResizeObserver` will be used to determine if</span>
-<span class="cstat-no" title="statement not covered" >   * there are multiple lines of content.</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  multiline?: boolean;</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" >   * When this is a string or React element, it will be rendered as the</span>
-<span class="cstat-no" title="statement not covered" >   * `children` within a `Button`</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  action?: ButtonProps | ReactElement | string;</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" >   * This can be used to replace the custom action button behavior.</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  actionButton?: 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" >   * @defaultValue `useIcon("close")`</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  closeIcon?: 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` if a close button should be rendered to the right of the</span>
-<span class="cstat-no" title="statement not covered" >   * `children`.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @defaultValue `!!closeButtonProps`</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  closeButton?: boolean;</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" >   * Use this prop to override most of the close button behavior. The</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  closeButtonProps?: ButtonProps;</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" >   * Any additional props that should be provided to the `&lt;div&gt;` that surrounds</span>
-<span class="cstat-no" title="statement not covered" >   * the toast `children`.</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  contentProps?: PropsWithRef&lt;ToastContentProps, HTMLDivElement&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" >   * Set this to `true` if the `children` for the toast should no longer be</span>
-<span class="cstat-no" title="statement not covered" >   * wrapped in an additional `&lt;div&gt;` that applies some toast layout styles.</span>
-<span class="cstat-no" title="statement not covered" >   * This should normally only be used for custom `Toast` implementations.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @see the `Snackbar`'s `renderToast` prop for an example.</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  disableToastContent?: boolean;</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" >   * The toast's transition timeout for entering and exiting. This is **not**</span>
-<span class="cstat-no" title="statement not covered" >   * how long the toast should remain visible.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @defaultValue `SCALE_TIMEOUT`</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  timeout?: TransitionTimeout;</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" >   * The toast's transition class names for entering and exiting.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @defaultValue `SCALE_CLASSNAMES`</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  classNames?: CSSTransitionClassNames;</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 interface ToastProps extends ConfigurableToastProps {</span>
-<span class="cstat-no" title="statement not covered" >  paused?: boolean;</span>
-<span class="cstat-no" title="statement not covered" >  visible: boolean;</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" > * **Client Component**</span>
-<span class="cstat-no" title="statement not covered" > *</span>
-<span class="cstat-no" title="statement not covered" > * This component is just used for toast styling and does not implement any of</span>
-<span class="cstat-no" title="statement not covered" > * the visibility behavior.</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 const Toast = forwardRef&lt;HTMLDivElement, ToastProps&gt;(</span>
-<span class="cstat-no" title="statement not covered" >  function Toast(props, ref) {</span>
-<span class="cstat-no" title="statement not covered" >    const {</span>
-<span class="cstat-no" title="statement not covered" >      id: propId,</span>
-<span class="cstat-no" title="statement not covered" >      className,</span>
-<span class="cstat-no" title="statement not covered" >      timeout,</span>
-<span class="cstat-no" title="statement not covered" >      classNames,</span>
-<span class="cstat-no" title="statement not covered" >      theme = "surface",</span>
-<span class="cstat-no" title="statement not covered" >      action: propAction,</span>
-<span class="cstat-no" title="statement not covered" >      actionButton: propActionButton,</span>
-<span class="cstat-no" title="statement not covered" >      paused,</span>
-<span class="cstat-no" title="statement not covered" >      visible,</span>
-<span class="cstat-no" title="statement not covered" >      closeIcon,</span>
-<span class="cstat-no" title="statement not covered" >      closeButtonProps,</span>
-<span class="cstat-no" title="statement not covered" >      closeButton = !!closeButtonProps,</span>
-<span class="cstat-no" title="statement not covered" >      contentProps,</span>
-<span class="cstat-no" title="statement not covered" >      disableToastContent,</span>
-<span class="cstat-no" title="statement not covered" >      stacked,</span>
-<span class="cstat-no" title="statement not covered" >      multiline,</span>
-<span class="cstat-no" title="statement not covered" >      onEnter,</span>
-<span class="cstat-no" title="statement not covered" >      onEntering,</span>
-<span class="cstat-no" title="statement not covered" >      onEntered,</span>
-<span class="cstat-no" title="statement not covered" >      onExit,</span>
-<span class="cstat-no" title="statement not covered" >      onExiting,</span>
-<span class="cstat-no" title="statement not covered" >      onExited,</span>
-<span class="cstat-no" title="statement not covered" >      children,</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 id = useEnsuredId(propId, "toast");</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >    let actionButton = propActionButton;</span>
-<span class="cstat-no" title="statement not covered" >    if (propAction) {</span>
-<span class="cstat-no" title="statement not covered" >      let overrides: ButtonProps = {};</span>
-<span class="cstat-no" title="statement not covered" >      let buttonChildren: ReactNode;</span>
-<span class="cstat-no" title="statement not covered" >      // have to use `any` to correctly filter out all react elements</span>
-<span class="cstat-no" title="statement not covered" >      // eslint-disable-next-line @typescript-eslint/no-explicit-any</span>
-<span class="cstat-no" title="statement not covered" >      if (isValidElement&lt;any&gt;(propAction) || typeof propAction !== "object") {</span>
-<span class="cstat-no" title="statement not covered" >        buttonChildren = propAction;</span>
-<span class="cstat-no" title="statement not covered" >      } else {</span>
-<span class="cstat-no" title="statement not covered" >        ({ children: buttonChildren, ...overrides } = propAction);</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" >      actionButton = (</span>
-<span class="cstat-no" title="statement not covered" >        &lt;ToastActionButton</span>
-<span class="cstat-no" title="statement not covered" >          theme={theme === "surface" ? "secondary" : "clear"}</span>
-<span class="cstat-no" title="statement not covered" >          reordered={stacked &amp;&amp; closeButton}</span>
-<span class="cstat-no" title="statement not covered" >          {...overrides}</span>
-<span class="cstat-no" title="statement not covered" >        &gt;</span>
-<span class="cstat-no" title="statement not covered" >          {buttonChildren}</span>
-<span class="cstat-no" title="statement not covered" >        &lt;/ToastActionButton&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" ></span>
-<span class="cstat-no" title="statement not covered" >    const action = !!actionButton;</span>
-<span class="cstat-no" title="statement not covered" >    const reordered = stacked &amp;&amp; action &amp;&amp; closeButton;</span>
-<span class="cstat-no" title="statement not covered" >    const { elementProps, rendered } = useScaleTransition({</span>
-<span class="cstat-no" title="statement not covered" >      appear: true,</span>
-<span class="cstat-no" title="statement not covered" >      nodeRef: ref,</span>
-<span class="cstat-no" title="statement not covered" >      className: toast({</span>
-<span class="cstat-no" title="statement not covered" >        className,</span>
-<span class="cstat-no" title="statement not covered" >        theme,</span>
-<span class="cstat-no" title="statement not covered" >        action,</span>
-<span class="cstat-no" title="statement not covered" >        paused,</span>
-<span class="cstat-no" title="statement not covered" >        stacked,</span>
-<span class="cstat-no" title="statement not covered" >        reordered,</span>
-<span class="cstat-no" title="statement not covered" >        closeButton,</span>
-<span class="cstat-no" title="statement not covered" >      }),</span>
-<span class="cstat-no" title="statement not covered" >      timeout,</span>
-<span class="cstat-no" title="statement not covered" >      classNames,</span>
-<span class="cstat-no" title="statement not covered" >      onEnter,</span>
-<span class="cstat-no" title="statement not covered" >      onEntering,</span>
-<span class="cstat-no" title="statement not covered" >      onEntered,</span>
-<span class="cstat-no" title="statement not covered" >      onExit,</span>
-<span class="cstat-no" title="statement not covered" >      onExiting,</span>
-<span class="cstat-no" title="statement not covered" >      onExited,</span>
-<span class="cstat-no" title="statement not covered" >      temporary: true,</span>
-<span class="cstat-no" title="statement not covered" >      transitionIn: visible,</span>
-<span class="cstat-no" title="statement not covered" >      exitedHidden: 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" >    // this might get rid of the weird popping-back-in for a split second</span>
-<span class="cstat-no" title="statement not covered" >    // that sometimes happens on mobile firefox</span>
-<span class="cstat-no" title="statement not covered" >    if (!rendered) {</span>
-<span class="cstat-no" title="statement not covered" >      return null;</span>
+<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></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">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</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">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">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">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">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">29x</span>
+<span class="cline-any cline-yes">29x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">244x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</span>
+<span class="cline-any cline-yes">273x</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 {
+  forwardRef,
+  isValidElement,
+  type AriaRole,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { type ButtonProps } from "../button/Button.js";
+import { type BackgroundColor } from "../cssUtils.js";
+import {
+  type CSSTransitionClassNames,
+  type TransitionCallbacks,
+  type TransitionTimeout,
+} from "../transition/types.js";
+import { useScaleTransition } from "../transition/useScaleTransition.js";
+import { type PropsWithRef } from "../types.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+import { ToastActionButton } from "./ToastActionButton.js";
+import { ToastCloseButton } from "./ToastCloseButton.js";
+import { ToastContent, type ToastContentProps } from "./ToastContent.js";
+import { toast, type ToastPosition } from "./toastStyles.js";
+&nbsp;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ConfigurableToastProps
+  extends HTMLAttributes&lt;HTMLDivElement&gt;,
+    TransitionCallbacks {
+  /**
+   * Note: this default value will only be generated in the `Toast` component.
+   *
+   * @defaultValue `"toast-" + useId()`
+   */
+  id?: string;
+&nbsp;
+  /**
+   * Note: This is set while creating the toast.
+   *
+   * @defaultValue `visibleTime === null ? "alert" : "status"`
+   */
+  role?: AriaRole;
+&nbsp;
+  /**
+   * @defaultValue `"surface"`
+   */
+  theme?: BackgroundColor;
+&nbsp;
+  /**
+   * Set this to `true` to stack the content above the {@link action}. It is not
+   * recommended to enable this prop if the {@link closeButton} is enabled.
+   *
+   * @defaultValue `false`
+   */
+  stacked?: boolean;
+&nbsp;
+  /**
+   * If this is not provided, a `ResizeObserver` will be used to determine if
+   * there are multiple lines of content.
+   */
+  multiline?: boolean;
+&nbsp;
+  /**
+   * The tooltips position within the viewport.
+   *
+   * @defaultValue `"bottom"`
+   */
+  position?: ToastPosition;
+&nbsp;
+  /**
+   * When this is a string or React element, it will be rendered as the
+   * `children` within a `Button`
+   */
+  action?: ButtonProps | ReactElement | string;
+&nbsp;
+  /**
+   * This can be used to replace the custom action button behavior.
+   */
+  actionButton?: ReactNode;
+&nbsp;
+  /**
+   * @defaultValue `getIcon("close")`
+   */
+  closeIcon?: ReactNode;
+&nbsp;
+  /**
+   * Set this to `true` if a close button should be rendered to the right of the
+   * `children`.
+   *
+   * @defaultValue `!!closeButtonProps`
+   */
+  closeButton?: boolean;
+&nbsp;
+  /**
+   * Use this prop to override most of the close button behavior. The
+   */
+  closeButtonProps?: ButtonProps;
+&nbsp;
+  /**
+   * Any additional props that should be provided to the `&lt;div&gt;` that surrounds
+   * the toast `children`.
+   */
+  contentProps?: PropsWithRef&lt;ToastContentProps, HTMLDivElement&gt;;
+&nbsp;
+  /**
+   * Set this to `true` if the `children` for the toast should no longer be
+   * wrapped in an additional `&lt;div&gt;` that applies some toast layout styles.
+   * This should normally only be used for custom `Toast` implementations.
+   *
+   * @see the `Snackbar`'s `renderToast` prop for an example.
+   */
+  disableToastContent?: boolean;
+&nbsp;
+  /**
+   * The toast's transition timeout for entering and exiting. This is **not**
+   * how long the toast should remain visible.
+   *
+   * @defaultValue `SCALE_TIMEOUT`
+   */
+  timeout?: TransitionTimeout;
+&nbsp;
+  /**
+   * The toast's transition class names for entering and exiting.
+   *
+   * @defaultValue `SCALE_CLASSNAMES`
+   */
+  classNames?: CSSTransitionClassNames;
+}
+&nbsp;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ToastProps extends ConfigurableToastProps {
+  paused?: boolean;
+  visible: boolean;
+}
+&nbsp;
+/**
+ * **Client Component**
+ *
+ * This component is just used for toast styling and does not implement any of
+ * the visibility behavior.
+ *
+ * @remarks \@since 6.0.0
+ */
+export const Toast = forwardRef&lt;HTMLDivElement, ToastProps&gt;(
+  function Toast(props, ref) {
+    const {
+      id: propId,
+      className,
+      timeout,
+      classNames,
+      theme = "surface",
+      action: propAction,
+      actionButton: propActionButton,
+      position,
+      paused,
+      visible,
+      closeIcon: propCloseIcon,
+      closeButtonProps,
+      closeButton = !!closeButtonProps,
+      contentProps,
+      disableToastContent,
+      stacked,
+      multiline,
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited,
+      children,
+      ...remaining
+    } = props;
+    const id = useEnsuredId(propId, "toast");
+&nbsp;
+    let actionButton = propActionButton;
+    if (propAction) {
+      let overrides: ButtonProps = {};
+      let buttonChildren: ReactNode;
+      // have to use `any` to correctly filter out all react elements
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      if (isValidElement&lt;any&gt;(propAction) || typeof propAction !== "object") {
+        buttonChildren = propAction;
+      } else {
+        ({ children: buttonChildren, ...overrides } = propAction);
+      }
+&nbsp;
+      actionButton = (
+        &lt;ToastActionButton
+          theme={theme === "surface" ? <span class="branch-0 cbranch-no" title="branch not covered" >"secondary" : "clear"}</span>
+          reordered={<span class="branch-0 cbranch-no" title="branch not covered" >stacked &amp;&amp; closeButton}</span>
+          {...overrides}
+        &gt;
+          {buttonChildren}
+        &lt;/ToastActionButton&gt;
+      );
+    }
+&nbsp;
+    let closeIcon = propCloseIcon;
+    if (typeof <span class="branch-0 cbranch-no" title="branch not covered" >closeButtonProps?.children !== "</span>undefined") <span class="branch-0 cbranch-no" title="branch not covered" >{</span>
+<span class="cstat-no" title="statement not covered" >      closeIcon = closeButtonProps.children;</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;div {...remaining} {...elementProps} id={id}&gt;</span>
-<span class="cstat-no" title="statement not covered" >        &lt;ToastContent</span>
-<span class="cstat-no" title="statement not covered" >          action={action}</span>
-<span class="cstat-no" title="statement not covered" >          stacked={stacked}</span>
-<span class="cstat-no" title="statement not covered" >          multiline={multiline}</span>
-<span class="cstat-no" title="statement not covered" >          closeButton={closeButton}</span>
-<span class="cstat-no" title="statement not covered" >          disableWrapper={disableToastContent}</span>
-<span class="cstat-no" title="statement not covered" >          {...contentProps}</span>
-<span class="cstat-no" title="statement not covered" >        &gt;</span>
-<span class="cstat-no" title="statement not covered" >          {children}</span>
-<span class="cstat-no" title="statement not covered" >        &lt;/ToastContent&gt;</span>
-<span class="cstat-no" title="statement not covered" >        {actionButton}</span>
-<span class="cstat-no" title="statement not covered" >        {closeButton &amp;&amp; (</span>
-<span class="cstat-no" title="statement not covered" >          &lt;ToastCloseButton reordered={reordered} {...closeButtonProps}&gt;</span>
-<span class="cstat-no" title="statement not covered" >            {closeIcon}</span>
-<span class="cstat-no" title="statement not covered" >          &lt;/ToastCloseButton&gt;</span>
-<span class="cstat-no" title="statement not covered" >        )}</span>
-<span class="cstat-no" title="statement not covered" >      &lt;/div&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" >);</span>
+&nbsp;
+    const action = !!actionButton;
+    const reordered = <span class="branch-0 cbranch-no" title="branch not covered" >stacked &amp;&amp; <span class="branch-0 cbranch-no" title="branch not covered" >action &amp;&amp; c</span>loseButton;</span>
+    const { elementProps, rendered } = useScaleTransition({
+      appear: true,
+      nodeRef: ref,
+      className: toast({
+        className,
+        theme,
+        action,
+        paused,
+        stacked,
+        position,
+        reordered,
+        closeButton,
+      }),
+      timeout,
+      classNames,
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited,
+      temporary: true,
+      transitionIn: visible,
+      exitedHidden: true,
+    });
+&nbsp;
+    // this might get rid of the weird popping-back-in for a split second
+    // that sometimes happens on mobile firefox
+    if (!rendered) {
+      return null;
+    }
+&nbsp;
+    return (
+      &lt;div {...remaining} {...elementProps} id={id}&gt;
+        &lt;ToastContent
+          action={action}
+          stacked={stacked}
+          multiline={multiline}
+          closeButton={closeButton}
+          disableWrapper={disableToastContent}
+          {...contentProps}
+        &gt;
+          {children}
+        &lt;/ToastContent&gt;
+        {actionButton}
+        {closeButton &amp;&amp; (
+          &lt;ToastCloseButton reordered={reordered} {...closeButtonProps}&gt;
+            {closeIcon}
+          &lt;/ToastCloseButton&gt;
+        )}
+      &lt;/div&gt;
+    );
+  }
+);
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -808,7 +853,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-23T21:43:31.437Z
+                at 2023-11-18T21:34:40.818Z
             </div>
         <script src="../prettify.js"></script>
         <script>