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

package/coverage/lcov-report/src/transition/useSkeletonPlaceholder.ts.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/276</span>
+                <span class='fraction'>291/291</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">85.71% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/1</span>
+                <span class='fraction'>18/21</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">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/276</span>
+                <span class='fraction'>291/291</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>
@@ -339,558 +339,603 @@
 <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></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-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-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 { CSSProperties } from "react";</span>
-<span class="cstat-no" title="statement not covered" >import { useEffect, useMemo, useState } from "react";</span>
-<span class="cstat-no" title="statement not covered" >import { useSsr } from "../SsrProvider.js";</span>
-<span class="cstat-no" title="statement not covered" >import { bem } from "../utils/bem.js";</span>
-<span class="cstat-no" title="statement not covered" >import { randomInt } from "../utils/randomInt.js";</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >export const skeletonPlaceholder = bem("rmd-skeleton-placeholder");</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" >export interface SkeletonPlaceholderOptions {</span>
-<span class="cstat-no" title="statement not covered" >  style?: CSSProperties;</span>
-<span class="cstat-no" title="statement not covered" >  className?: string;</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >  /** @defaultValue `40` */</span>
-<span class="cstat-no" title="statement not covered" >  minPercentage?: number;</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >  /** @defaultValue `85` */</span>
-<span class="cstat-no" title="statement not covered" >  maxPercentage?: number;</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 value tp a number or length unit string to set the height with</span>
-<span class="cstat-no" title="statement not covered" >   * inline styles.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * If this is `undefined`, it will use the skeleton placeholder CSS variable</span>
-<span class="cstat-no" title="statement not covered" >   * value instead which defaults to `1.125em`</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @defaultValue `undefined`</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  height?: string | number;</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" >   * A custom width to apply to the skeleton placeholder.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * Set this value to an empty string if you want to control the width through</span>
-<span class="cstat-no" title="statement not covered" >   * SCSS.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @example</span>
-<span class="cstat-no" title="statement not covered" >   * No Inline Width CSS</span>
-<span class="cstat-no" title="statement not covered" >   * ```scss</span>
-<span class="cstat-no" title="statement not covered" >   * @use "@react-md/core";</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * .customStyles {</span>
-<span class="cstat-no" title="statement not covered" >   *   // You could use these mixins on a parent element instead which would</span>
-<span class="cstat-no" title="statement not covered" >   *   // set the height and width to all skeleton placeholders that appear as a</span>
-<span class="cstat-no" title="statement not covered" >   *   // child instead</span>
-<span class="cstat-no" title="statement not covered" >   *   // @include core.transition-set-var(skeleton-placeholder-height, 1.5rem);</span>
-<span class="cstat-no" title="statement not covered" >   *   // @include core.transition-set-var(skeleton-placeholder-width, 40%);</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   *   height: 1,5rem;</span>
-<span class="cstat-no" title="statement not covered" >   *   width: 40%;</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" >   * @example</span>
-<span class="cstat-no" title="statement not covered" >   * No Inline Width</span>
-<span class="cstat-no" title="statement not covered" >   * ```ts</span>
-<span class="cstat-no" title="statement not covered" >   * import type { ReactElement } from "@react";</span>
-<span class="cstat-no" title="statement not covered" >   * import { useSkeletonPlaceholder } from "@react-md/core";</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * import styles from "./MyComponent.module.scss";</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * export function Example(): ReactElement {</span>
-<span class="cstat-no" title="statement not covered" >   *   const skeletonProps = useSkeletonPlaceholder({</span>
-<span class="cstat-no" title="statement not covered" >   *     width: null,</span>
-<span class="cstat-no" title="statement not covered" >   *     className: styles.customStyles,</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 &lt;div {...skeletonProps} /&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" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * Set this value to a number or length unit string to set the width with</span>
-<span class="cstat-no" title="statement not covered" >   * inline styles.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @example</span>
-<span class="cstat-no" title="statement not covered" >   * Custom Inline Width</span>
-<span class="cstat-no" title="statement not covered" >   * ```ts</span>
-<span class="cstat-no" title="statement not covered" >   * import type { ReactElement } from "@react";</span>
-<span class="cstat-no" title="statement not covered" >   * import { useSkeletonPlaceholder } from "@react-md/core";</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * export function Example(): ReactElement {</span>
-<span class="cstat-no" title="statement not covered" >   *   const skeletonProps = useSkeletonPlaceholder({</span>
-<span class="cstat-no" title="statement not covered" >   *     // any of these are valid</span>
-<span class="cstat-no" title="statement not covered" >   *     // width: 40,</span>
-<span class="cstat-no" title="statement not covered" >   *     // width: "1rem",</span>
-<span class="cstat-no" title="statement not covered" >   *     // width: "1vh",</span>
-<span class="cstat-no" title="statement not covered" >   *     // width: "40%",</span>
-<span class="cstat-no" title="statement not covered" >   *     width: "1rem",</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 &lt;div {...skeletonProps} /&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" >   * If this value is `undefined`, a random percentage will be generated instead</span>
-<span class="cstat-no" title="statement not covered" >   * using the {@link minPercentage} and {@link maxPercentage} options.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * Set this value to `null` if the size should be derived from the provided</span>
-<span class="cstat-no" title="statement not covered" >   * `className` instead.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @defaultValue `randomInt({ min: minPercentage, max: maxPercentage })%`</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  width?: number | string | null;</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" >   * Settings this to `true` will prevent any of the skeleton placeholder styles</span>
-<span class="cstat-no" title="statement not covered" >   * to be applied. This is really only useful if you can prerender parts of</span>
-<span class="cstat-no" title="statement not covered" >   * your layout while waiting for the data to load.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @example</span>
-<span class="cstat-no" title="statement not covered" >   * Pre-rendered Layout</span>
-<span class="cstat-no" title="statement not covered" >   * ```tsx</span>
-<span class="cstat-no" title="statement not covered" >   * import type { ReactElement } from "@react";</span>
-<span class="cstat-no" title="statement not covered" >   * import { SkeletonPlaceholder } from "@react-md/core";</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * interface Data {</span>
-<span class="cstat-no" title="statement not covered" >   *   id: string;</span>
-<span class="cstat-no" title="statement not covered" >   *   name: string;</span>
-<span class="cstat-no" title="statement not covered" >   *   createdBy: string</span>
-<span class="cstat-no" title="statement not covered" >   *   createdOn: string;</span>
-<span class="cstat-no" title="statement not covered" >   *   modifiedBy: string;</span>
-<span class="cstat-no" title="statement not covered" >   *   modifiedOn: 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" >   * function ShowData({</span>
-<span class="cstat-no" title="statement not covered" >   *   id,</span>
-<span class="cstat-no" title="statement not covered" >   *   name,</span>
-<span class="cstat-no" title="statement not covered" >   *   createdBy,</span>
-<span class="cstat-no" title="statement not covered" >   *   createdOn,</span>
-<span class="cstat-no" title="statement not covered" >   *   modifiedBy,</span>
-<span class="cstat-no" title="statement not covered" >   *   modifiedOn,</span>
-<span class="cstat-no" title="statement not covered" >   * }: Partial&lt;Data&gt;:: ReactElement {</span>
-<span class="cstat-no" title="statement not covered" >   *   const loading =</span>
-<span class="cstat-no" title="statement not covered" >   *     !name &amp;&amp;</span>
-<span class="cstat-no" title="statement not covered" >   *     !createdBy &amp;&amp;</span>
-<span class="cstat-no" title="statement not covered" >   *     !createdOn &amp;&amp;</span>
-<span class="cstat-no" title="statement not covered" >   *     !modifiedBy &amp;&amp;</span>
-<span class="cstat-no" title="statement not covered" >   *     !modifiedOn;</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;Box grid gridClassName="custom-class-name"&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *       &lt;SkeletonPlaceholder disabled={!loading}&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *         {id}</span>
-<span class="cstat-no" title="statement not covered" >   *       &lt;/SkeletonPlaceholder&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *       &lt;SkeletonPlaceholder disabled={!loading}&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *         {name}</span>
-<span class="cstat-no" title="statement not covered" >   *       &lt;/SkeletonPlaceholder&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *       &lt;SkeletonPlaceholder disabled={!loading}&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *         {createdOn}</span>
-<span class="cstat-no" title="statement not covered" >   *       &lt;/SkeletonPlaceholder&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *       &lt;SkeletonPlaceholder disabled={!loading}&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *         {createdBy}</span>
-<span class="cstat-no" title="statement not covered" >   *       &lt;/SkeletonPlaceholder&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *       &lt;SkeletonPlaceholder disabled={!loading}&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *         {modifiedOn}</span>
-<span class="cstat-no" title="statement not covered" >   *       &lt;/SkeletonPlaceholder&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *       &lt;SkeletonPlaceholder disabled={!loading}&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *         {modifiedBy}</span>
-<span class="cstat-no" title="statement not covered" >   *       &lt;/SkeletonPlaceholder&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *     &lt;/Box&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" >   * export function Example(): ReactElement {</span>
-<span class="cstat-no" title="statement not covered" >   *   const { data } = useLoadSomeDataQuery();</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   *   const items = useMemo(() =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >   *     // if the data has been fetched, just return the data</span>
-<span class="cstat-no" title="statement not covered" >   *     if (data) {</span>
-<span class="cstat-no" title="statement not covered" >   *       return data;</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 the data does not exist, set up a skeleton of your layout by</span>
-<span class="cstat-no" title="statement not covered" >   *     // rendering a random number of items.</span>
-<span class="cstat-no" title="statement not covered" >   *     //</span>
-<span class="cstat-no" title="statement not covered" >   *     // NOTE: This is memoized so you don't create a random length each</span>
-<span class="cstat-no" title="statement not covered" >   *     // render</span>
-<span class="cstat-no" title="statement not covered" >   *     const length = randomInt({ min: 3, max: 10 })</span>
-<span class="cstat-no" title="statement not covered" >   *     return Array.from({ length }, (_, i) =&gt; ({ id: `placeholder-${i}` }));</span>
-<span class="cstat-no" title="statement not covered" >   *   }, [data])</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;List&gt;</span>
-<span class="cstat-no" title="statement not covered" >   *       {items.map((item) =&gt; &lt;ShowData {...item} /&gt;)}</span>
-<span class="cstat-no" title="statement not covered" >   *     &lt;/List&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" >   *</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" >  disabled?: 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" >export interface SkeletonPlaceholderStylingProps {</span>
-<span class="cstat-no" title="statement not covered" >  style?: CSSProperties;</span>
-<span class="cstat-no" title="statement not covered" >  className: 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" >export function useSkeletonPlaceholder(</span>
-<span class="cstat-no" title="statement not covered" >  options: SkeletonPlaceholderOptions = {}</span>
-<span class="cstat-no" title="statement not covered" >): SkeletonPlaceholderStylingProps {</span>
-<span class="cstat-no" title="statement not covered" >  const {</span>
-<span class="cstat-no" title="statement not covered" >    style: propStyle,</span>
-<span class="cstat-no" title="statement not covered" >    className,</span>
-<span class="cstat-no" title="statement not covered" >    height,</span>
-<span class="cstat-no" title="statement not covered" >    width: propWidth,</span>
-<span class="cstat-no" title="statement not covered" >    disabled = false,</span>
-<span class="cstat-no" title="statement not covered" >    minPercentage = 40,</span>
-<span class="cstat-no" title="statement not covered" >    maxPercentage = 85,</span>
-<span class="cstat-no" title="statement not covered" >  } = options;</span>
-<span class="cstat-no" title="statement not covered" >  const ssr = useSsr();</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >  const [randomPercentage, setRandomPercentage] = useState&lt;string | undefined&gt;(</span>
-<span class="cstat-no" title="statement not covered" >    () =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >      if (</span>
-<span class="cstat-no" title="statement not covered" >        typeof window === "undefined" ||</span>
-<span class="cstat-no" title="statement not covered" >        ssr ||</span>
-<span class="cstat-no" title="statement not covered" >        typeof propWidth !== "undefined"</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" >      }</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >      return `${randomInt({ min: minPercentage, max: maxPercentage })}%`;</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" >  useEffect(() =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (!ssr || disabled || typeof propWidth !== "undefined") {</span>
-<span class="cstat-no" title="statement not covered" >      return;</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" >    setRandomPercentage(</span>
-<span class="cstat-no" title="statement not covered" >      `${randomInt({ min: minPercentage, max: maxPercentage })}%`</span>
-<span class="cstat-no" title="statement not covered" >    );</span>
-<span class="cstat-no" title="statement not covered" >  }, [disabled, maxPercentage, minPercentage, propWidth, ssr]);</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >  const width = useMemo(() =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (disabled || typeof propWidth !== "undefined") {</span>
-<span class="cstat-no" title="statement not covered" >      return propWidth;</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 (ssr) {</span>
-<span class="cstat-no" title="statement not covered" >      return randomPercentage;</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 `${randomInt({ min: minPercentage, max: maxPercentage })}%`;</span>
-<span class="cstat-no" title="statement not covered" >  }, [</span>
-<span class="cstat-no" title="statement not covered" >    disabled,</span>
-<span class="cstat-no" title="statement not covered" >    maxPercentage,</span>
-<span class="cstat-no" title="statement not covered" >    minPercentage,</span>
-<span class="cstat-no" title="statement not covered" >    propWidth,</span>
-<span class="cstat-no" title="statement not covered" >    randomPercentage,</span>
-<span class="cstat-no" title="statement not covered" >    ssr,</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 style: CSSProperties | undefined = propStyle;</span>
-<span class="cstat-no" title="statement not covered" >  if (</span>
-<span class="cstat-no" title="statement not covered" >    (typeof width !== "undefined" &amp;&amp; width !== "") ||</span>
-<span class="cstat-no" title="statement not covered" >    typeof height !== "undefined"</span>
-<span class="cstat-no" title="statement not covered" >  ) {</span>
-<span class="cstat-no" title="statement not covered" >    style = {</span>
-<span class="cstat-no" title="statement not covered" >      ...style,</span>
-<span class="cstat-no" title="statement not covered" >      height: height ?? style?.height,</span>
-<span class="cstat-no" title="statement not covered" >      width: width ?? style?.width,</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" >    style,</span>
-<span class="cstat-no" title="statement not covered" >    className: cnb(className, !disabled &amp;&amp; skeletonPlaceholder()),</span>
-<span class="cstat-no" title="statement not covered" >  };</span>
-<span class="cstat-no" title="statement not covered" >}</span>
+<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></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">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">3x</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">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</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 { useEffect, useState, type CSSProperties } from "react";
+import { useSsr } from "../SsrProvider.js";
+import {
+  randomSkeletonPlaceholder,
+  skeletonPlaceholder,
+  type SkeletonPlaceholderRandomOptions,
+} from "./skeletonPlaceholderUtils.js";
+&nbsp;
+/** @remarks \@since 6.0.0 */
+export interface SkeletonPlaceholderOptions
+  extends SkeletonPlaceholderRandomOptions {
+  style?: CSSProperties;
+  className?: string;
+&nbsp;
+  /**
+   * Set this to a custom `animation-delay` value (should be in milliseconds).
+   *
+   * @example
+   * ```ts
+   * delay="200ms"
+   * ```
+   */
+  delay?: string;
+&nbsp;
+  /**
+   * Set this value tp a number or length unit string to set the height with
+   * inline styles.
+   *
+   * If this is `undefined`, it will use the skeleton placeholder CSS variable
+   * value instead which defaults to `1.125em`
+   *
+   * @defaultValue `undefined`
+   */
+  height?: string | number;
+&nbsp;
+  /**
+   * A custom width to apply to the skeleton placeholder.
+   *
+   * Set this value to an empty string if you want to control the width through
+   * SCSS.
+   *
+   * @example
+   * No Inline Width CSS
+   * ```scss
+   * @use "@react-md/core";
+   *
+   * .customStyles {
+   *   // You could use these mixins on a parent element instead which would
+   *   // set the height and width to all skeleton placeholders that appear as a
+   *   // child instead
+   *   // @include core.transition-set-var(skeleton-placeholder-height, 1.5rem);
+   *   // @include core.transition-set-var(skeleton-placeholder-width, 40%);
+   *
+   *   height: 1,5rem;
+   *   width: 40%;
+   * }
+   * ```
+   *
+   * @example
+   * No Inline Width
+   * ```ts
+   * import type { ReactElement } from "@react";
+   * import { useSkeletonPlaceholder } from "@react-md/core";
+   *
+   * import styles from "./MyComponent.module.scss";
+   *
+   * export function Example(): ReactElement {
+   *   const skeletonProps = useSkeletonPlaceholder({
+   *     width: null,
+   *     className: styles.customStyles,
+   *   });
+   *
+   *   return &lt;div {...skeletonProps} /&gt;;
+   * }
+   * ```
+   *
+   *
+   * Set this value to a number or length unit string to set the width with
+   * inline styles.
+   *
+   * @example
+   * Custom Inline Width
+   * ```ts
+   * import type { ReactElement } from "@react";
+   * import { useSkeletonPlaceholder } from "@react-md/core";
+   *
+   * export function Example(): ReactElement {
+   *   const skeletonProps = useSkeletonPlaceholder({
+   *     // any of these are valid
+   *     // width: 40,
+   *     // width: "1rem",
+   *     // width: "1vh",
+   *     // width: "40%",
+   *     width: "1rem",
+   *   });
+   *
+   *   return &lt;div {...skeletonProps} /&gt;;
+   * }
+   * ```
+   *
+   * If this value is `undefined`, a random percentage will be generated instead
+   * using the {@link minPercentage} and {@link maxPercentage} options.
+   *
+   * Set this value to `null` if the size should be derived from the provided
+   * `className` instead.
+   *
+   * @defaultValue `randomInt({ min: minPercentage, max: maxPercentage })%`
+   */
+  width?: number | string | null;
+&nbsp;
+  /**
+   * Settings this to `true` will prevent any of the skeleton placeholder styles
+   * to be applied. This is really only useful if you can prerender parts of
+   * your layout while waiting for the data to load.
+   *
+   * @example
+   * Pre-rendered Layout
+   * ```tsx
+   * import type { ReactElement } from "@react";
+   * import { SkeletonPlaceholder } from "@react-md/core";
+   *
+   * interface Data {
+   *   id: string;
+   *   name: string;
+   *   createdBy: string
+   *   createdOn: string;
+   *   modifiedBy: string;
+   *   modifiedOn: string;
+   * }
+   *
+   * function ShowData({
+   *   id,
+   *   name,
+   *   createdBy,
+   *   createdOn,
+   *   modifiedBy,
+   *   modifiedOn,
+   * }: Partial&lt;Data&gt;:: ReactElement {
+   *   const loading =
+   *     !name &amp;&amp;
+   *     !createdBy &amp;&amp;
+   *     !createdOn &amp;&amp;
+   *     !modifiedBy &amp;&amp;
+   *     !modifiedOn;
+   *
+   *   return (
+   *     &lt;Box grid gridClassName="custom-class-name"&gt;
+   *       &lt;SkeletonPlaceholder disabled={!loading}&gt;
+   *         {id}
+   *       &lt;/SkeletonPlaceholder&gt;
+   *       &lt;SkeletonPlaceholder disabled={!loading}&gt;
+   *         {name}
+   *       &lt;/SkeletonPlaceholder&gt;
+   *       &lt;SkeletonPlaceholder disabled={!loading}&gt;
+   *         {createdOn}
+   *       &lt;/SkeletonPlaceholder&gt;
+   *       &lt;SkeletonPlaceholder disabled={!loading}&gt;
+   *         {createdBy}
+   *       &lt;/SkeletonPlaceholder&gt;
+   *       &lt;SkeletonPlaceholder disabled={!loading}&gt;
+   *         {modifiedOn}
+   *       &lt;/SkeletonPlaceholder&gt;
+   *       &lt;SkeletonPlaceholder disabled={!loading}&gt;
+   *         {modifiedBy}
+   *       &lt;/SkeletonPlaceholder&gt;
+   *     &lt;/Box&gt;
+   *   );
+   * }
+   *
+   * export function Example(): ReactElement {
+   *   const { data } = useLoadSomeDataQuery();
+   *
+   *   const items = useMemo(() =&gt; {
+   *     // if the data has been fetched, just return the data
+   *     if (data) {
+   *       return data;
+   *     }
+   *
+   *     // if the data does not exist, set up a skeleton of your layout by
+   *     // rendering a random number of items.
+   *     //
+   *     // NOTE: This is memoized so you don't create a random length each
+   *     // render
+   *     const length = randomInt({ min: 3, max: 10 })
+   *     return Array.from({ length }, (_, i) =&gt; ({ id: `placeholder-${i}` }));
+   *   }, [data])
+   *
+   *   return (
+   *     &lt;List&gt;
+   *       {items.map((item) =&gt; &lt;ShowData {...item} /&gt;)}
+   *     &lt;/List&gt;
+   *   );
+   * }
+   * ```
+   *
+   * @defaultValue `false`
+   */
+  disabled?: boolean;
+}
+&nbsp;
+export interface SkeletonPlaceholderStylingProps {
+  style?: CSSProperties;
+  className: string;
+}
+&nbsp;
+export function useSkeletonPlaceholder(
+  options: SkeletonPlaceholderOptions = {}
+): SkeletonPlaceholderStylingProps {
+  const {
+    style: propStyle,
+    className,
+    height,
+    width: propWidth,
+    disabled = false,
+    delay: propDelay,
+    minDelay,
+    maxDelay,
+    minPercentage,
+    maxPercentage,
+  } = options;
+  const ssr = useSsr();
+&nbsp;
+  const isDefinedWidth = typeof propWidth !== "undefined";
+  const isDefinedDelay = typeof propDelay !== "undefined";
+  const [randomStyles, setRandomStyles] = useState&lt;CSSProperties&gt;(() =&gt; {
+    if (typeof window === "undefined" || ssr || disabled) {
+      return {};
+    }
+&nbsp;
+    return randomSkeletonPlaceholder({
+      minDelay,
+      maxDelay,
+      minPercentage,
+      maxPercentage,
+    });
+  });
+&nbsp;
+  useEffect(() =&gt; {
+    if (!ssr || disabled || (<span class="branch-0 cbranch-no" title="branch not covered" >isDefinedDelay &amp;&amp; isDefinedWidth)) {</span>
+      return;
+    }
+&nbsp;
+    setRandomStyles(
+      randomSkeletonPlaceholder({
+        minDelay,
+        maxDelay,
+        minPercentage,
+        maxPercentage,
+      })
+    );
+  }, [
+    disabled,
+    isDefinedDelay,
+    isDefinedWidth,
+    maxDelay,
+    maxPercentage,
+    minDelay,
+    minPercentage,
+    ssr,
+  ]);
+&nbsp;
+  let width = propWidth;
+  let animationDelay = propDelay;
+  if (!disabled) {
+    if (!isDefinedDelay) {
+      ({ animationDelay } = randomStyles);
+    }
+    if (!isDefinedWidth) {
+      ({ width } = randomStyles);
+    }
+  }
+&nbsp;
+  let style: CSSProperties | undefined = propStyle;
+  if (!!width || !!animationDelay || typeof height !== "undefined") {
+    style = {
+      ...style,
+      height: height ?? style?.height,
+      width: <span class="branch-0 cbranch-no" title="branch not covered" >width ?? style?.width,</span>
+      // Note: not including MozAnimationDelay and WebkitAnimationDelay since
+      // they weren't applied when they were set. Probably no longer required?
+      animationDelay: <span class="branch-0 cbranch-no" title="branch not covered" >animationDelay ?? style?.animationDelay,</span>
+    };
+  }
+&nbsp;
+  return {
+    style,
+    className: cnb(className, !disabled &amp;&amp; skeletonPlaceholder()),
+  };
+}
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -898,7 +943,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-19T01:08:26.865Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>