diff --git a/CHANGELOG.md b/CHANGELOG.md
index 527113613..50f39671a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## [1.20.1](https://github.com/Headstorm/foundry-ui/compare/v1.20.0...v1.20.1) (2022-06-30)
+
+
+### Bug Fixes
+
+* **modal underlay:** set the default background color to a translucent black instead of opaque black ([8f625b5](https://github.com/Headstorm/foundry-ui/commit/8f625b5da7bf89f32c44a3a87a91fea23682384b))
+* **modal underlay:** use theme hook in subcomponent so the subcomponent is portable outside of Modal ([b50d70c](https://github.com/Headstorm/foundry-ui/commit/b50d70c533119695f0bf08bf32cbb28d084bbd2a))
+
 # [1.20.0](https://github.com/Headstorm/foundry-ui/compare/v1.19.2...v1.20.0) (2022-06-24)
 
 
diff --git a/coverage/badge-functions.svg b/coverage/badge-functions.svg
index 0ba745c3a..1a6deb6dc 100644
--- a/coverage/badge-functions.svg
+++ b/coverage/badge-functions.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="164" height="20" role="img" aria-label="Coverage:functions: 66.3%"><title>Coverage:functions: 66.3%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="164" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="47" height="20" fill="#e05d44"/><rect width="164" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="1070">Coverage:functions</text><text aria-hidden="true" x="1395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="370">66.3%</text><text x="1395" y="140" transform="scale(.1)" fill="#fff" textLength="370">66.3%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20" role="img" aria-label="Coverage:functions: 66.17%"><title>Coverage:functions: 66.17%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="1070">Coverage:functions</text><text aria-hidden="true" x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">66.17%</text><text x="1425" y="140" transform="scale(.1)" fill="#fff" textLength="430">66.17%</text></g></svg>
\ No newline at end of file
diff --git a/coverage/badge-lines.svg b/coverage/badge-lines.svg
index 157a2cd54..7a9603239 100644
--- a/coverage/badge-lines.svg
+++ b/coverage/badge-lines.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20" role="img" aria-label="Coverage:lines: 72.75%"><title>Coverage:lines: 72.75%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="53" height="20" fill="#e05d44"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" fill="#fff" textLength="830">Coverage:lines</text><text aria-hidden="true" x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">72.75%</text><text x="1185" y="140" transform="scale(.1)" fill="#fff" textLength="430">72.75%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20" role="img" aria-label="Coverage:lines: 72.73%"><title>Coverage:lines: 72.73%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="53" height="20" fill="#e05d44"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" fill="#fff" textLength="830">Coverage:lines</text><text aria-hidden="true" x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">72.73%</text><text x="1185" y="140" transform="scale(.1)" fill="#fff" textLength="430">72.73%</text></g></svg>
\ No newline at end of file
diff --git a/coverage/badge-statements.svg b/coverage/badge-statements.svg
index 45f65b115..4b2f7f86f 100644
--- a/coverage/badge-statements.svg
+++ b/coverage/badge-statements.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20" role="img" aria-label="Coverage:statements: 72.25%"><title>Coverage:statements: 72.25%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="53" height="20" fill="#e05d44"/><rect width="182" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" fill="#fff" textLength="1190">Coverage:statements</text><text aria-hidden="true" x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">72.25%</text><text x="1545" y="140" transform="scale(.1)" fill="#fff" textLength="430">72.25%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20" role="img" aria-label="Coverage:statements: 72.23%"><title>Coverage:statements: 72.23%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="53" height="20" fill="#e05d44"/><rect width="182" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" fill="#fff" textLength="1190">Coverage:statements</text><text aria-hidden="true" x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">72.23%</text><text x="1545" y="140" transform="scale(.1)" fill="#fff" textLength="430">72.23%</text></g></svg>
\ No newline at end of file
diff --git a/coverage/components/Button/Button.tsx.html b/coverage/components/Button/Button.tsx.html
index 7380961b2..c83d4b424 100644
--- a/coverage/components/Button/Button.tsx.html
+++ b/coverage/components/Button/Button.tsx.html
@@ -919,7 +919,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/B
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Button/index.html b/coverage/components/Button/index.html
index 82d787023..20244db16 100644
--- a/coverage/components/Button/index.html
+++ b/coverage/components/Button/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Button</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Card/Card.tsx.html b/coverage/components/Card/Card.tsx.html
index 6bc84f538..8cc22ab55 100644
--- a/coverage/components/Card/Card.tsx.html
+++ b/coverage/components/Card/Card.tsx.html
@@ -748,7 +748,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/C
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Card/index.html b/coverage/components/Card/index.html
index 516f58273..379ce92cd 100644
--- a/coverage/components/Card/index.html
+++ b/coverage/components/Card/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Card</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Checkbox/Checkbox.tsx.html b/coverage/components/Checkbox/Checkbox.tsx.html
index 462b57575..9ecafd39e 100644
--- a/coverage/components/Checkbox/Checkbox.tsx.html
+++ b/coverage/components/Checkbox/Checkbox.tsx.html
@@ -871,7 +871,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/C
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Checkbox/index.html b/coverage/components/Checkbox/index.html
index 97f1e1971..7cac3a7f3 100644
--- a/coverage/components/Checkbox/index.html
+++ b/coverage/components/Checkbox/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Checkbox</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Divider/Divider.tsx.html b/coverage/components/Divider/Divider.tsx.html
index 87b92ca52..1750b031a 100644
--- a/coverage/components/Divider/Divider.tsx.html
+++ b/coverage/components/Divider/Divider.tsx.html
@@ -283,7 +283,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/D
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Divider/index.html b/coverage/components/Divider/index.html
index 6703ea509..237eba6bc 100644
--- a/coverage/components/Divider/index.html
+++ b/coverage/components/Divider/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Divider</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Dropdown/Dropdown.tsx.html b/coverage/components/Dropdown/Dropdown.tsx.html
index 10e70032a..350ba1d77 100644
--- a/coverage/components/Dropdown/Dropdown.tsx.html
+++ b/coverage/components/Dropdown/Dropdown.tsx.html
@@ -3103,7 +3103,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/D
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Dropdown/index.html b/coverage/components/Dropdown/index.html
index f7f6d5d48..1b2108b61 100644
--- a/coverage/components/Dropdown/index.html
+++ b/coverage/components/Dropdown/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Dropdown</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/InteractionFeedback/InteractionFeedback.tsx.html b/coverage/components/InteractionFeedback/InteractionFeedback.tsx.html
index 17607222c..c543f7921 100644
--- a/coverage/components/InteractionFeedback/InteractionFeedback.tsx.html
+++ b/coverage/components/InteractionFeedback/InteractionFeedback.tsx.html
@@ -499,7 +499,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/I
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/InteractionFeedback/index.html b/coverage/components/InteractionFeedback/index.html
index 31f1749a1..df3f60aaf 100644
--- a/coverage/components/InteractionFeedback/index.html
+++ b/coverage/components/InteractionFeedback/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/InteractionFeedback</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Label/Label.tsx.html b/coverage/components/Label/Label.tsx.html
index 9504e20d1..80f182c50 100644
--- a/coverage/components/Label/Label.tsx.html
+++ b/coverage/components/Label/Label.tsx.html
@@ -484,7 +484,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/L
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Label/index.html b/coverage/components/Label/index.html
index f3705e976..892f26914 100644
--- a/coverage/components/Label/index.html
+++ b/coverage/components/Label/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Label</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Modal/Modal.tsx.html b/coverage/components/Modal/Modal.tsx.html
index 79be8a231..c0483a9b4 100644
--- a/coverage/components/Modal/Modal.tsx.html
+++ b/coverage/components/Modal/Modal.tsx.html
@@ -23,9 +23,9 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/M
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">57.81% </span>
+                <span class="strong">57.14% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>37/64</span>
+                <span class='fraction'>36/63</span>
             </div>
         
             
@@ -37,16 +37,16 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/M
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">40% </span>
+                <span class="strong">36.84% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>8/20</span>
+                <span class='fraction'>7/19</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">58.06% </span>
+                <span class="strong">57.37% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>36/62</span>
+                <span class='fraction'>35/61</span>
             </div>
         
             
@@ -386,11 +386,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/M
 <a name='L321'></a><a href='#L321'>321</a>
 <a name='L322'></a><a href='#L322'>322</a>
 <a name='L323'></a><a href='#L323'>323</a>
-<a name='L324'></a><a href='#L324'>324</a>
-<a name='L325'></a><a href='#L325'>325</a>
-<a name='L326'></a><a href='#L326'>326</a>
-<a name='L327'></a><a href='#L327'>327</a>
-<a name='L328'></a><a href='#L328'>328</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L324'></a><a href='#L324'>324</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -413,10 +409,6 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/M
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -735,23 +727,19 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/M
 import Button from '../Button/Button';
 import { AnimatedDiv } from '../../htmlElements';
 import { SubcomponentPropsType, StyledSubcomponentType } from '../commonTypes';
-import { FoundryColorsType, useAnalytics, useTheme } from '../../context';
+import { useAnalytics, useTheme } from '../../context';
 &nbsp;
-const Underlay = styled(AnimatedDiv)&lt;{
-  colors: FoundryColorsType;
-}&gt;`
-  ${({ colors }) =&gt; `
-    height: 100%;
-    width: 100%;
+const Underlay = styled(AnimatedDiv)`
+  height: 100%;
+  width: 100%;
 &nbsp;
-    background-color: ${colors.black};
+  background-color: rgba(0, 0, 0, 0.5);
 &nbsp;
-    position: fixed;
-    top: 0;
-    left: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
 &nbsp;
-    z-index: 1000;
-  `}
+  z-index: 1000;
 `;
 &nbsp;
 const Container = styled(AnimatedDiv)`
@@ -1051,7 +1039,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/M
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Modal/index.html b/coverage/components/Modal/index.html
index d6fbb671f..62fea1f2a 100644
--- a/coverage/components/Modal/index.html
+++ b/coverage/components/Modal/index.html
@@ -23,9 +23,9 @@ <h1><a href="../../index.html">All files</a> components/Modal</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">57.81% </span>
+                <span class="strong">57.14% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>37/64</span>
+                <span class='fraction'>36/63</span>
             </div>
         
             
@@ -37,16 +37,16 @@ <h1><a href="../../index.html">All files</a> components/Modal</h1>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">40% </span>
+                <span class="strong">36.84% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>8/20</span>
+                <span class='fraction'>7/19</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">58.06% </span>
+                <span class="strong">57.37% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>36/62</span>
+                <span class='fraction'>35/61</span>
             </div>
         
             
@@ -80,17 +80,17 @@ <h1><a href="../../index.html">All files</a> components/Modal</h1>
 </thead>
 <tbody><tr>
 	<td class="file medium" data-value="Modal.tsx"><a href="Modal.tsx.html">Modal.tsx</a></td>
-	<td data-value="57.81" class="pic medium">
+	<td data-value="57.14" class="pic medium">
 	<div class="chart"><div class="cover-fill" style="width: 57%"></div><div class="cover-empty" style="width: 43%"></div></div>
 	</td>
-	<td data-value="57.81" class="pct medium">57.81%</td>
-	<td data-value="64" class="abs medium">37/64</td>
+	<td data-value="57.14" class="pct medium">57.14%</td>
+	<td data-value="63" class="abs medium">36/63</td>
 	<td data-value="58.33" class="pct medium">58.33%</td>
 	<td data-value="36" class="abs medium">21/36</td>
-	<td data-value="40" class="pct low">40%</td>
-	<td data-value="20" class="abs low">8/20</td>
-	<td data-value="58.06" class="pct medium">58.06%</td>
-	<td data-value="62" class="abs medium">36/62</td>
+	<td data-value="36.84" class="pct low">36.84%</td>
+	<td data-value="19" class="abs low">7/19</td>
+	<td data-value="57.37" class="pct medium">57.37%</td>
+	<td data-value="61" class="abs medium">35/61</td>
 	</tr>
 
 </tbody>
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Modal</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Progress/Progress.tsx.html b/coverage/components/Progress/Progress.tsx.html
index c78b2e078..f52d74885 100644
--- a/coverage/components/Progress/Progress.tsx.html
+++ b/coverage/components/Progress/Progress.tsx.html
@@ -181,7 +181,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/P
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Progress/index.html b/coverage/components/Progress/index.html
index b0c096826..e66de82ea 100644
--- a/coverage/components/Progress/index.html
+++ b/coverage/components/Progress/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Progress</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/RangeSlider/RangeSlider.tsx.html b/coverage/components/RangeSlider/RangeSlider.tsx.html
index 90f5f9f55..d54edd743 100644
--- a/coverage/components/RangeSlider/RangeSlider.tsx.html
+++ b/coverage/components/RangeSlider/RangeSlider.tsx.html
@@ -1756,7 +1756,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/R
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/RangeSlider/index.html b/coverage/components/RangeSlider/index.html
index 758928485..e897a7c8e 100644
--- a/coverage/components/RangeSlider/index.html
+++ b/coverage/components/RangeSlider/index.html
@@ -116,7 +116,7 @@ <h1><a href="../../index.html">All files</a> components/RangeSlider</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/RangeSlider/types.ts.html b/coverage/components/RangeSlider/types.ts.html
index eeaed3e01..766b526e9 100644
--- a/coverage/components/RangeSlider/types.ts.html
+++ b/coverage/components/RangeSlider/types.ts.html
@@ -298,7 +298,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/R
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Skeleton/Skeleton.tsx.html b/coverage/components/Skeleton/Skeleton.tsx.html
index acd1bb64f..270a06c1a 100644
--- a/coverage/components/Skeleton/Skeleton.tsx.html
+++ b/coverage/components/Skeleton/Skeleton.tsx.html
@@ -448,7 +448,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Skeleton/index.html b/coverage/components/Skeleton/index.html
index 167cdd4c9..704a84f38 100644
--- a/coverage/components/Skeleton/index.html
+++ b/coverage/components/Skeleton/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Skeleton</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Spotlight/Spotlight.tsx.html b/coverage/components/Spotlight/Spotlight.tsx.html
index cf312331d..291b0c0f8 100644
--- a/coverage/components/Spotlight/Spotlight.tsx.html
+++ b/coverage/components/Spotlight/Spotlight.tsx.html
@@ -1162,7 +1162,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Spotlight/index.html b/coverage/components/Spotlight/index.html
index 9d1c2ecfa..ad3e3dc23 100644
--- a/coverage/components/Spotlight/index.html
+++ b/coverage/components/Spotlight/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Spotlight</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Table/Table.tsx.html b/coverage/components/Table/Table.tsx.html
index 7205a5c7f..a7839456e 100644
--- a/coverage/components/Table/Table.tsx.html
+++ b/coverage/components/Table/Table.tsx.html
@@ -2254,7 +2254,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/T
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Table/index.html b/coverage/components/Table/index.html
index bab0716fd..a29f88c3d 100644
--- a/coverage/components/Table/index.html
+++ b/coverage/components/Table/index.html
@@ -116,7 +116,7 @@ <h1><a href="../../index.html">All files</a> components/Table</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Table/types.ts.html b/coverage/components/Table/types.ts.html
index eaaa5e75d..27e3f6d5f 100644
--- a/coverage/components/Table/types.ts.html
+++ b/coverage/components/Table/types.ts.html
@@ -313,7 +313,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/T
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Tag/Tag.tsx.html b/coverage/components/Tag/Tag.tsx.html
index 4ce4c66cc..7b5ad7eb9 100644
--- a/coverage/components/Tag/Tag.tsx.html
+++ b/coverage/components/Tag/Tag.tsx.html
@@ -646,7 +646,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/T
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Tag/index.html b/coverage/components/Tag/index.html
index 875fb17ac..7fb4460fd 100644
--- a/coverage/components/Tag/index.html
+++ b/coverage/components/Tag/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Tag</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Text/Text.tsx.html b/coverage/components/Text/Text.tsx.html
index b02d0c17b..af17ca2ef 100644
--- a/coverage/components/Text/Text.tsx.html
+++ b/coverage/components/Text/Text.tsx.html
@@ -466,7 +466,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/T
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Text/index.html b/coverage/components/Text/index.html
index 0c7758a66..ab837bd46 100644
--- a/coverage/components/Text/index.html
+++ b/coverage/components/Text/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Text</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/TextInput/TextInput.tsx.html b/coverage/components/TextInput/TextInput.tsx.html
index 9047469e9..b641818e9 100644
--- a/coverage/components/TextInput/TextInput.tsx.html
+++ b/coverage/components/TextInput/TextInput.tsx.html
@@ -1165,7 +1165,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/T
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/TextInput/index.html b/coverage/components/TextInput/index.html
index 106b797d7..eb0a2d58c 100644
--- a/coverage/components/TextInput/index.html
+++ b/coverage/components/TextInput/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/TextInput</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Toggle/Toggle.tsx.html b/coverage/components/Toggle/Toggle.tsx.html
index bc9938541..85289923f 100644
--- a/coverage/components/Toggle/Toggle.tsx.html
+++ b/coverage/components/Toggle/Toggle.tsx.html
@@ -748,7 +748,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/T
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Toggle/index.html b/coverage/components/Toggle/index.html
index b9a58491e..e45e0853b 100644
--- a/coverage/components/Toggle/index.html
+++ b/coverage/components/Toggle/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Toggle</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/commonTypes.ts.html b/coverage/components/commonTypes.ts.html
index 159511f23..450374fb1 100644
--- a/coverage/components/commonTypes.ts.html
+++ b/coverage/components/commonTypes.ts.html
@@ -85,7 +85,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">components</a>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/components/index.html b/coverage/components/index.html
index 5ae392d25..f3809770a 100644
--- a/coverage/components/index.html
+++ b/coverage/components/index.html
@@ -101,7 +101,7 @@ <h1><a href="../index.html">All files</a> components</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/context/index.html b/coverage/context/index.html
index 9f70c151c..9e97c0ba7 100644
--- a/coverage/context/index.html
+++ b/coverage/context/index.html
@@ -101,7 +101,7 @@ <h1><a href="../index.html">All files</a> context</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/context/index.tsx.html b/coverage/context/index.tsx.html
index 24a02e0e2..c402934ac 100644
--- a/coverage/context/index.tsx.html
+++ b/coverage/context/index.tsx.html
@@ -712,7 +712,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">context</a> ind
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/coverage-summary.json b/coverage/coverage-summary.json
index 10972cdf5..9a49743cc 100644
--- a/coverage/coverage-summary.json
+++ b/coverage/coverage-summary.json
@@ -1,4 +1,4 @@
-{"total": {"lines":{"total":1149,"covered":836,"skipped":0,"pct":72.75},"statements":{"total":1175,"covered":849,"skipped":0,"pct":72.25},"functions":{"total":273,"covered":181,"skipped":0,"pct":66.3},"branches":{"total":1075,"covered":673,"skipped":0,"pct":62.6},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":100}}
+{"total": {"lines":{"total":1148,"covered":835,"skipped":0,"pct":72.73},"statements":{"total":1174,"covered":848,"skipped":0,"pct":72.23},"functions":{"total":272,"covered":180,"skipped":0,"pct":66.17},"branches":{"total":1075,"covered":673,"skipped":0,"pct":62.6},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":100}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/commonTypes.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/Button/Button.tsx": {"lines":{"total":28,"covered":26,"skipped":0,"pct":92.85},"functions":{"total":14,"covered":9,"skipped":0,"pct":64.28},"statements":{"total":28,"covered":26,"skipped":0,"pct":92.85},"branches":{"total":58,"covered":50,"skipped":0,"pct":86.2}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/Card/Card.tsx": {"lines":{"total":30,"covered":29,"skipped":0,"pct":96.66},"functions":{"total":7,"covered":5,"skipped":0,"pct":71.42},"statements":{"total":30,"covered":29,"skipped":0,"pct":96.66},"branches":{"total":32,"covered":28,"skipped":0,"pct":87.5}}
@@ -7,7 +7,7 @@
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/Dropdown/Dropdown.tsx": {"lines":{"total":271,"covered":207,"skipped":0,"pct":76.38},"functions":{"total":60,"covered":43,"skipped":0,"pct":71.66},"statements":{"total":275,"covered":209,"skipped":0,"pct":76},"branches":{"total":235,"covered":154,"skipped":0,"pct":65.53}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/InteractionFeedback/InteractionFeedback.tsx": {"lines":{"total":33,"covered":32,"skipped":0,"pct":96.96},"functions":{"total":14,"covered":11,"skipped":0,"pct":78.57},"statements":{"total":38,"covered":35,"skipped":0,"pct":92.1},"branches":{"total":15,"covered":13,"skipped":0,"pct":86.66}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/Label/Label.tsx": {"lines":{"total":28,"covered":25,"skipped":0,"pct":89.28},"functions":{"total":3,"covered":2,"skipped":0,"pct":66.66},"statements":{"total":28,"covered":25,"skipped":0,"pct":89.28},"branches":{"total":32,"covered":25,"skipped":0,"pct":78.12}}
-,"/home/runner/work/foundry-ui/foundry-ui/src/components/Modal/Modal.tsx": {"lines":{"total":62,"covered":36,"skipped":0,"pct":58.06},"functions":{"total":20,"covered":8,"skipped":0,"pct":40},"statements":{"total":64,"covered":37,"skipped":0,"pct":57.81},"branches":{"total":36,"covered":21,"skipped":0,"pct":58.33}}
+,"/home/runner/work/foundry-ui/foundry-ui/src/components/Modal/Modal.tsx": {"lines":{"total":61,"covered":35,"skipped":0,"pct":57.37},"functions":{"total":19,"covered":7,"skipped":0,"pct":36.84},"statements":{"total":63,"covered":36,"skipped":0,"pct":57.14},"branches":{"total":36,"covered":21,"skipped":0,"pct":58.33}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/Progress/Progress.tsx": {"lines":{"total":4,"covered":4,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":4,"covered":4,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/RangeSlider/RangeSlider.tsx": {"lines":{"total":109,"covered":71,"skipped":0,"pct":65.13},"functions":{"total":29,"covered":19,"skipped":0,"pct":65.51},"statements":{"total":111,"covered":72,"skipped":0,"pct":64.86},"branches":{"total":118,"covered":62,"skipped":0,"pct":52.54}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/RangeSlider/types.ts": {"lines":{"total":0,"covered":0,"skipped":0,"pct":100},"functions":{"total":0,"covered":0,"skipped":0,"pct":100},"statements":{"total":0,"covered":0,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}}
diff --git a/coverage/enums/checkboxTypes.ts.html b/coverage/enums/checkboxTypes.ts.html
index f7cda9528..9ecbe48a7 100644
--- a/coverage/enums/checkboxTypes.ts.html
+++ b/coverage/enums/checkboxTypes.ts.html
@@ -97,7 +97,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">enums</a> check
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/enums/colors.ts.html b/coverage/enums/colors.ts.html
index 8cd5243ac..5829c1a29 100644
--- a/coverage/enums/colors.ts.html
+++ b/coverage/enums/colors.ts.html
@@ -154,7 +154,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">enums</a> color
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/enums/feedbackTypes.ts.html b/coverage/enums/feedbackTypes.ts.html
index 5cda67a3d..383ae1417 100644
--- a/coverage/enums/feedbackTypes.ts.html
+++ b/coverage/enums/feedbackTypes.ts.html
@@ -88,7 +88,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">enums</a> feedb
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/enums/fonts.ts.html b/coverage/enums/fonts.ts.html
index 1fcfa59c5..b1570c4cb 100644
--- a/coverage/enums/fonts.ts.html
+++ b/coverage/enums/fonts.ts.html
@@ -85,7 +85,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">enums</a> fonts
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/enums/index.html b/coverage/enums/index.html
index 0cbb3bdbb..a7be7157e 100644
--- a/coverage/enums/index.html
+++ b/coverage/enums/index.html
@@ -176,7 +176,7 @@ <h1><a href="../index.html">All files</a> enums</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/enums/timings.ts.html b/coverage/enums/timings.ts.html
index f87e27a4a..0b41eabca 100644
--- a/coverage/enums/timings.ts.html
+++ b/coverage/enums/timings.ts.html
@@ -97,7 +97,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">enums</a> timin
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/enums/variants.ts.html b/coverage/enums/variants.ts.html
index 9e3be9f41..659bc3346 100644
--- a/coverage/enums/variants.ts.html
+++ b/coverage/enums/variants.ts.html
@@ -91,7 +91,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">enums</a> varia
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/htmlElements/index.html b/coverage/htmlElements/index.html
index 9b6381428..f9f222a49 100644
--- a/coverage/htmlElements/index.html
+++ b/coverage/htmlElements/index.html
@@ -101,7 +101,7 @@ <h1><a href="../index.html">All files</a> htmlElements</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/htmlElements/index.tsx.html b/coverage/htmlElements/index.tsx.html
index 343985d8b..ad1752a7d 100644
--- a/coverage/htmlElements/index.tsx.html
+++ b/coverage/htmlElements/index.tsx.html
@@ -130,7 +130,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">htmlElements</a
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/index.html b/coverage/index.html
index 143c98f29..fdec37211 100644
--- a/coverage/index.html
+++ b/coverage/index.html
@@ -23,9 +23,9 @@ <h1>All files</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">72.25% </span>
+                <span class="strong">72.23% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>849/1175</span>
+                <span class='fraction'>848/1174</span>
             </div>
         
             
@@ -37,16 +37,16 @@ <h1>All files</h1>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">66.3% </span>
+                <span class="strong">66.17% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>181/273</span>
+                <span class='fraction'>180/272</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">72.75% </span>
+                <span class="strong">72.73% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>836/1149</span>
+                <span class='fraction'>835/1148</span>
             </div>
         
             
@@ -200,17 +200,17 @@ <h1>All files</h1>
 
 <tr>
 	<td class="file medium" data-value="components/Modal"><a href="components/Modal/index.html">components/Modal</a></td>
-	<td data-value="57.81" class="pic medium">
+	<td data-value="57.14" class="pic medium">
 	<div class="chart"><div class="cover-fill" style="width: 57%"></div><div class="cover-empty" style="width: 43%"></div></div>
 	</td>
-	<td data-value="57.81" class="pct medium">57.81%</td>
-	<td data-value="64" class="abs medium">37/64</td>
+	<td data-value="57.14" class="pct medium">57.14%</td>
+	<td data-value="63" class="abs medium">36/63</td>
 	<td data-value="58.33" class="pct medium">58.33%</td>
 	<td data-value="36" class="abs medium">21/36</td>
-	<td data-value="40" class="pct low">40%</td>
-	<td data-value="20" class="abs low">8/20</td>
-	<td data-value="58.06" class="pct medium">58.06%</td>
-	<td data-value="62" class="abs medium">36/62</td>
+	<td data-value="36.84" class="pct low">36.84%</td>
+	<td data-value="19" class="abs low">7/19</td>
+	<td data-value="57.37" class="pct medium">57.37%</td>
+	<td data-value="61" class="abs medium">35/61</td>
 	</tr>
 
 <tr>
@@ -416,7 +416,7 @@ <h1>All files</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="prettify.js"></script>
         <script>
diff --git a/coverage/utils/a11y.ts.html b/coverage/utils/a11y.ts.html
index b845b0de4..a9380844a 100644
--- a/coverage/utils/a11y.ts.html
+++ b/coverage/utils/a11y.ts.html
@@ -142,7 +142,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">utils</a> a11y.
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/color.ts.html b/coverage/utils/color.ts.html
index 631857bc6..907d6ee29 100644
--- a/coverage/utils/color.ts.html
+++ b/coverage/utils/color.ts.html
@@ -247,7 +247,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">utils</a> color
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/hooks.ts.html b/coverage/utils/hooks.ts.html
index b99797783..5654595ab 100644
--- a/coverage/utils/hooks.ts.html
+++ b/coverage/utils/hooks.ts.html
@@ -433,7 +433,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">utils</a> hooks
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/index.html b/coverage/utils/index.html
index 6fd1b23f9..8abe64d6b 100644
--- a/coverage/utils/index.html
+++ b/coverage/utils/index.html
@@ -191,7 +191,7 @@ <h1><a href="../index.html">All files</a> utils</h1>
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/math.ts.html b/coverage/utils/math.ts.html
index b286b8e8f..918147fe2 100644
--- a/coverage/utils/math.ts.html
+++ b/coverage/utils/math.ts.html
@@ -112,7 +112,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">utils</a> math.
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/performance.ts.html b/coverage/utils/performance.ts.html
index 1cd3ac784..70d2026c6 100644
--- a/coverage/utils/performance.ts.html
+++ b/coverage/utils/performance.ts.html
@@ -112,7 +112,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">utils</a> perfo
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/refs.ts.html b/coverage/utils/refs.ts.html
index bc1da2211..056249a05 100644
--- a/coverage/utils/refs.ts.html
+++ b/coverage/utils/refs.ts.html
@@ -145,7 +145,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">utils</a> refs.
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/styles.ts.html b/coverage/utils/styles.ts.html
index bf7424b65..dca8f5e25 100644
--- a/coverage/utils/styles.ts.html
+++ b/coverage/utils/styles.ts.html
@@ -481,7 +481,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">utils</a> style
             <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 Fri Jun 24 2022 19:00:57 GMT+0000 (Coordinated Universal Time)
+                at Thu Jun 30 2022 18:03:33 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>