@react-md/core 1.0.0-next.12 → 1.0.0-next.13

package/coverage/lcov-report/autocomplete/useAutocompletev2.ts.html

@@ -700,7 +700,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 2024-03-24T20:38:45.984Z
+                at 2024-04-21T01:19:52.454Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/autocomplete/useInlineAutocomplete.ts.html

@@ -25,7 +25,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/115</span>
+                <span class='fraction'>0/123</span>
             </div>
         
             
@@ -46,7 +46,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/115</span>
+                <span class='fraction'>0/123</span>
             </div>
         
             
@@ -178,7 +178,23 @@
 <a name='L113'></a><a href='#L113'>113</a>
 <a name='L114'></a><a href='#L114'>114</a>
 <a name='L115'></a><a href='#L115'>115</a>
-<a name='L116'></a><a href='#L116'>116</a></td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span>
+<a name='L116'></a><a href='#L116'>116</a>
+<a name='L117'></a><a href='#L117'>117</a>
+<a name='L118'></a><a href='#L118'>118</a>
+<a name='L119'></a><a href='#L119'>119</a>
+<a name='L120'></a><a href='#L120'>120</a>
+<a name='L121'></a><a href='#L121'>121</a>
+<a name='L122'></a><a href='#L122'>122</a>
+<a name='L123'></a><a href='#L123'>123</a>
+<a name='L124'></a><a href='#L124'>124</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>
@@ -299,7 +315,6 @@
 <span class="cstat-no" title="statement not covered" >import { caseInsensitiveSearch } from "../searching/caseInsensitive.js";</span>
 <span class="cstat-no" title="statement not covered" >import { type WhitespaceFilter } from "../searching/types.js";</span>
 <span class="cstat-no" title="statement not covered" >import { type NonNullMutableRef, type TextExtractor } from "../types.js";</span>
-<span class="cstat-no" title="statement not covered" >import { type AutocompleteOption } from "./types.js";</span>
 <span class="cstat-no" title="statement not covered" >import { useInlineSelection } from "./useInlineSelection.js";</span>
 <span class="cstat-no" title="statement not covered" >import { defaultAutocompleteExtractor, isTextMovementEvent } from "./utils.js";</span>
 <span class="cstat-no" title="statement not covered" ></span>
@@ -307,6 +322,9 @@
 <span class="cstat-no" title="statement not covered" >  // do nothing</span>
 <span class="cstat-no" title="statement not covered" >};</span>
 <span class="cstat-no" title="statement not covered" ></span>
+<span class="cstat-no" title="statement not covered" >/**</span>
+<span class="cstat-no" title="statement not covered" > * @remarks \@since 6.0.0</span>
+<span class="cstat-no" title="statement not covered" > */</span>
 <span class="cstat-no" title="statement not covered" >export type InlineAutocompleteHandlers&lt;</span>
 <span class="cstat-no" title="statement not covered" >  E extends EditableHTMLElement = HTMLInputElement,</span>
 <span class="cstat-no" title="statement not covered" >&gt; = Pick&lt;HTMLAttributes&lt;E&gt;, "onKeyDown" | "onFocus" | "onBlur" | "onChange"&gt;;</span>
@@ -315,7 +333,7 @@
 <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 InlineAutocompleteOptions&lt;</span>
-<span class="cstat-no" title="statement not covered" >  T = AutocompleteOption,</span>
+<span class="cstat-no" title="statement not covered" >  T,</span>
 <span class="cstat-no" title="statement not covered" >  E extends EditableHTMLElement = HTMLInputElement,</span>
 <span class="cstat-no" title="statement not covered" >&gt; extends InlineAutocompleteHandlers&lt;E&gt; {</span>
 <span class="cstat-no" title="statement not covered" >  options: readonly T[];</span>
@@ -347,12 +365,18 @@
 <span class="cstat-no" title="statement not covered" > * @remarks \@since 6.0.0</span>
 <span class="cstat-no" title="statement not covered" > */</span>
 <span class="cstat-no" title="statement not covered" >export function useInlineAutocomplete&lt;</span>
-<span class="cstat-no" title="statement not covered" >  T extends AutocompleteOption,</span>
+<span class="cstat-no" title="statement not covered" >  T extends string,</span>
 <span class="cstat-no" title="statement not covered" >  E extends EditableHTMLElement = HTMLInputElement,</span>
 <span class="cstat-no" title="statement not covered" >&gt;(</span>
 <span class="cstat-no" title="statement not covered" >  options: Omit&lt;InlineAutocompleteOptions&lt;T, E&gt;, "extractor"&gt;</span>
 <span class="cstat-no" title="statement not covered" >): InlineAutocompleteImplementation&lt;E&gt;;</span>
 <span class="cstat-no" title="statement not covered" >export function useInlineAutocomplete&lt;</span>
+<span class="cstat-no" title="statement not covered" >  T extends { label: string },</span>
+<span class="cstat-no" title="statement not covered" >  E extends EditableHTMLElement = HTMLInputElement,</span>
+<span class="cstat-no" title="statement not covered" >&gt;(</span>
+<span class="cstat-no" title="statement not covered" >  options: InlineAutocompleteOptions&lt;T, E&gt;</span>
+<span class="cstat-no" title="statement not covered" >): InlineAutocompleteImplementation&lt;E&gt;;</span>
+<span class="cstat-no" title="statement not covered" >export function useInlineAutocomplete&lt;</span>
 <span class="cstat-no" title="statement not covered" >  T,</span>
 <span class="cstat-no" title="statement not covered" >  E extends EditableHTMLElement = HTMLInputElement,</span>
 <span class="cstat-no" title="statement not covered" >&gt;(</span>
@@ -415,7 +439,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 2024-03-24T20:38:45.984Z
+                at 2024-04-21T01:19:52.454Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/autocomplete/useInlineSelection.ts.html

@@ -25,7 +25,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/75</span>
+                <span class='fraction'>0/96</span>
             </div>
         
             
@@ -46,7 +46,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/75</span>
+                <span class='fraction'>0/96</span>
             </div>
         
             
@@ -138,7 +138,49 @@
 <a name='L73'></a><a href='#L73'>73</a>
 <a name='L74'></a><a href='#L74'>74</a>
 <a name='L75'></a><a href='#L75'>75</a>
-<a name='L76'></a><a href='#L76'>76</a></td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span>
+<a name='L76'></a><a href='#L76'>76</a>
+<a name='L77'></a><a href='#L77'>77</a>
+<a name='L78'></a><a href='#L78'>78</a>
+<a name='L79'></a><a href='#L79'>79</a>
+<a name='L80'></a><a href='#L80'>80</a>
+<a name='L81'></a><a href='#L81'>81</a>
+<a name='L82'></a><a href='#L82'>82</a>
+<a name='L83'></a><a href='#L83'>83</a>
+<a name='L84'></a><a href='#L84'>84</a>
+<a name='L85'></a><a href='#L85'>85</a>
+<a name='L86'></a><a href='#L86'>86</a>
+<a name='L87'></a><a href='#L87'>87</a>
+<a name='L88'></a><a href='#L88'>88</a>
+<a name='L89'></a><a href='#L89'>89</a>
+<a name='L90'></a><a href='#L90'>90</a>
+<a name='L91'></a><a href='#L91'>91</a>
+<a name='L92'></a><a href='#L92'>92</a>
+<a name='L93'></a><a href='#L93'>93</a>
+<a name='L94'></a><a href='#L94'>94</a>
+<a name='L95'></a><a href='#L95'>95</a>
+<a name='L96'></a><a href='#L96'>96</a>
+<a name='L97'></a><a href='#L97'>97</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>
@@ -250,6 +292,27 @@
 <span class="cstat-no" title="statement not covered" >): InlineSelectionImplementation {</span>
 <span class="cstat-no" title="statement not covered" >  const { defaultValue = "" } = options;</span>
 <span class="cstat-no" title="statement not covered" ></span>
+<span class="cstat-no" title="statement not covered" >  // TODO: I think I want to break this up so that it is:</span>
+<span class="cstat-no" title="statement not covered" >  // - prevSelection.current: { start: number; end: number }</span>
+<span class="cstat-no" title="statement not covered" >  // - typedValue.current: string;</span>
+<span class="cstat-no" title="statement not covered" >  //</span>
+<span class="cstat-no" title="statement not covered" >  // I think that will make it so I only need the `onSelect` event instead of</span>
+<span class="cstat-no" title="statement not covered" >  // onKeyDown + onChange + onSelect</span>
+<span class="cstat-no" title="statement not covered" >  //</span>
+<span class="cstat-no" title="statement not covered" >  // So the state is:</span>
+<span class="cstat-no" title="statement not covered" >  // - value</span>
+<span class="cstat-no" title="statement not covered" >  // - typedValue</span>
+<span class="cstat-no" title="statement not covered" >  // - selectionStart</span>
+<span class="cstat-no" title="statement not covered" >  // - selectionEnd</span>
+<span class="cstat-no" title="statement not covered" >  //</span>
+<span class="cstat-no" title="statement not covered" >  // I do not support controlled values for this because the selectionRange</span>
+<span class="cstat-no" title="statement not covered" >  // would need to be handled in a useEffect with an animation frame to work</span>
+<span class="cstat-no" title="statement not covered" >  // correctly. There also isn't much of a reason to control the value here</span>
+<span class="cstat-no" title="statement not covered" >  // since all autocomplete updates happen within event callbacks</span>
+<span class="cstat-no" title="statement not covered" >  //</span>
+<span class="cstat-no" title="statement not covered" >  // When the user wants to provide their own filter function that derives</span>
+<span class="cstat-no" title="statement not covered" >  // their own list of options, they should listen to the `onChange` and</span>
+<span class="cstat-no" title="statement not covered" >  // `onAutocomplete` events to update the list</span>
 <span class="cstat-no" title="statement not covered" >  const typedValue = useRef(defaultValue);</span>
 <span class="cstat-no" title="statement not covered" >  return {</span>
 <span class="cstat-no" title="statement not covered" >    typedValue,</span>
@@ -295,7 +358,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 2024-03-24T20:38:45.984Z
+                at 2024-04-21T01:19:52.454Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/autocomplete/utils.ts.html

@@ -181,7 +181,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 2024-03-24T20:38:45.984Z
+                at 2024-04-21T01:19:52.454Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/box/Box.tsx.html

@@ -25,14 +25,14 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>155/155</span>
+                <span class='fraction'>159/159</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>2/2</span>
             </div>
         
             
@@ -46,7 +46,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>155/155</span>
+                <span class='fraction'>159/159</span>
             </div>
         
             
@@ -218,9 +218,11 @@
 <a name='L153'></a><a href='#L153'>153</a>
 <a name='L154'></a><a href='#L154'>154</a>
 <a name='L155'></a><a href='#L155'>155</a>
-<a name='L156'></a><a href='#L156'>156</a></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>
+<a name='L156'></a><a href='#L156'>156</a>
+<a name='L157'></a><a href='#L157'>157</a>
+<a name='L158'></a><a href='#L158'>158</a>
+<a name='L159'></a><a href='#L159'>159</a>
+<a name='L160'></a><a href='#L160'>160</a></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>
@@ -330,56 +332,60 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</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">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
+<span class="cline-any cline-yes">163x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</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">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">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">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">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-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import type { HTMLAttributes } from "react";
-import { forwardRef } from "react";
-import type { BoxOptions } from "./styles";
-import { box } from "./styles";
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { forwardRef, type HTMLAttributes } from "react";
+import { box, type BoxOptions } from "./styles.js";
 &nbsp;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface BoxProps extends HTMLAttributes&lt;HTMLDivElement&gt;, BoxOptions {}
 &nbsp;
@@ -391,8 +397,7 @@ export interface BoxProps extends HTMLAttributes&lt;HTMLDivElement&gt;, BoxOptio
  * There are pass-through props for all of the box module styling properties
  * available by default.
  *
- * @example
- * Default Styles
+ * @example Default Styles
  * ```scss
  * .box {
  *   align-items: center;
@@ -420,8 +425,7 @@ export interface BoxProps extends HTMLAttributes&lt;HTMLDivElement&gt;, BoxOptio
  * }
  * ```
  *
- * @example
- * Default Grid Styles
+ * @example Default Grid Styles
  * ```scss
  * .box {
  *   align-items: center;
@@ -449,11 +453,10 @@ export interface BoxProps extends HTMLAttributes&lt;HTMLDivElement&gt;, BoxOptio
  * }
  * ```
  *
- * @example
- * Custom Grid
+ * @example Custom Grid
  * ```scss
  * @use "@react-md/core" with (
- *   $grids: (
+ *   $box-grids: (
  *     small: (
  *       min: 5rem,
  *     ),
@@ -484,50 +487,59 @@ export interface BoxProps extends HTMLAttributes&lt;HTMLDivElement&gt;, BoxOptio
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export const Box = forwardRef&lt;HTMLDivElement, BoxProps&gt;(function Box(
-  props,
-  ref
-) {
-  const {
-    className,
-    children,
-    align,
-    grid = false,
-    gridName = "",
-    justify,
-    stacked = false,
-    reversed = false,
-    gridColumns = "fit",
-    fullWidth = false,
-    disableWrap = false,
-    disablePadding = false,
-    ...remaining
-  } = props;
+export const Box = forwardRef&lt;HTMLDivElement, BoxProps&gt;(
+  function Box(props, ref) {
+    const {
+      className,
+      children,
+      align,
+      grid = false,
+      style: propStyle,
+      gridName = "",
+      justify,
+      stacked = false,
+      reversed = false,
+      gridColumns = "fit",
+      fullWidth = false,
+      disableWrap = false,
+      disablePadding = false,
+      ...remaining
+    } = props;
+&nbsp;
+    let style = propStyle;
+    if (typeof gridColumns === "number") {
+      style = {
+        ...propStyle,
+        "--rmd-box-columns": gridColumns,
+      };
+    }
 &nbsp;
-  return (
-    &lt;div
-      {...remaining}
-      ref={ref}
-      className={box({
-        className,
-        fullWidth,
-        grid,
-        stacked,
-        gridName,
-        gridColumns,
-        align,
-        justify,
-        reversed,
-        disableWrap,
-        disablePadding,
-      })}
-    &gt;
-      {children}
-    &lt;/div&gt;
-  );
-});
+    return (
+      &lt;div
+        {...remaining}
+        style={style}
+        ref={ref}
+        className={box({
+          className,
+          fullWidth,
+          grid,
+          stacked,
+          gridName,
+          gridColumns,
+          align,
+          justify,
+          reversed,
+          disableWrap,
+          disablePadding,
+        })}
+      &gt;
+        {children}
+      &lt;/div&gt;
+    );
+  }
+);
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -535,7 +547,7 @@ export const Box = forwardRef&lt;HTMLDivElement, BoxProps&gt;(function Box(
             <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-07-29T22:34:25.923Z
+                at 2024-04-19T21:12:49.138Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/box/index.html

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>155/155</span>
+                <span class='fraction'>338/338</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>11/11</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>2/2</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>155/155</span>
+                <span class='fraction'>338/338</span>
             </div>
         
             
@@ -84,13 +84,28 @@
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="155" class="abs high">155/155</td>
+	<td data-value="159" class="abs high">159/159</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="2" class="abs high">2/2</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="1" class="abs high">1/1</td>
 	<td data-value="100" class="pct high">100%</td>
+	<td data-value="159" class="abs high">159/159</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="styles.ts"><a href="styles.ts.html">styles.ts</a></td>
+	<td data-value="100" class="pic high">
+	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
+	</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="179" class="abs high">179/179</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="9" class="abs high">9/9</td>
+	<td data-value="100" class="pct high">100%</td>
 	<td data-value="1" class="abs high">1/1</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="155" class="abs high">155/155</td>
+	<td data-value="179" class="abs high">179/179</td>
 	</tr>
 
 </tbody>
@@ -101,7 +116,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-07-29T22:34:25.923Z
+                at 2024-04-19T21:12:49.138Z
             </div>
         <script src="../prettify.js"></script>
         <script>