From 84abc336bc3849655bfd0cbe25ad3170dc270e38 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Thu, 12 Oct 2023 22:22:12 +0000
Subject: [PATCH] chore(release): 1.27.3 [skip ci]nn##
 [1.27.3](https://github.com/Headstorm/foundry-ui/compare/v1.27.2...v1.27.3)
 (2023-10-12)

### Bug Fixes

* **spotlight:** spotlight now scrolls to new targets if they are scrolled out of view ([8d7776a](https://github.com/Headstorm/foundry-ui/commit/8d7776a2c3d7aeac02f0440ae6086255ecaf0486)), closes [#476](https://github.com/Headstorm/foundry-ui/issues/476)
---
 CHANGELOG.md                                  |   7 +
 coverage/badge-branches.svg                   |   2 +-
 coverage/badge-functions.svg                  |   2 +-
 coverage/badge-lines.svg                      |   2 +-
 coverage/badge-statements.svg                 |   2 +-
 coverage/components/Avatar/Avatar.tsx.html    |   2 +-
 coverage/components/Avatar/index.html         |   2 +-
 coverage/components/Button/Button.tsx.html    |   2 +-
 coverage/components/Button/index.html         |   2 +-
 coverage/components/Card/Card.tsx.html        |   2 +-
 coverage/components/Card/index.html           |   2 +-
 .../components/Checkbox/Checkbox.tsx.html     |   2 +-
 coverage/components/Checkbox/index.html       |   2 +-
 coverage/components/Divider/Divider.tsx.html  |   2 +-
 coverage/components/Divider/index.html        |   2 +-
 .../components/Dropdown/Dropdown.tsx.html     |   2 +-
 coverage/components/Dropdown/index.html       |   2 +-
 .../InteractionFeedback.tsx.html              |   2 +-
 .../components/InteractionFeedback/index.html |   2 +-
 coverage/components/Label/Label.tsx.html      |   2 +-
 coverage/components/Label/index.html          |   2 +-
 coverage/components/Modal/Modal.tsx.html      |   2 +-
 coverage/components/Modal/index.html          |   2 +-
 .../components/Progress/Progress.tsx.html     |   2 +-
 coverage/components/Progress/index.html       |   2 +-
 .../RangeSlider/RangeSlider.tsx.html          |   2 +-
 coverage/components/RangeSlider/index.html    |   2 +-
 coverage/components/RangeSlider/types.ts.html |   2 +-
 .../components/Skeleton/Skeleton.tsx.html     |   2 +-
 coverage/components/Skeleton/index.html       |   2 +-
 .../components/Spotlight/Spotlight.tsx.html   | 229 ++++++++++++++++--
 coverage/components/Spotlight/index.html      |  38 +--
 coverage/components/Table/Table.tsx.html      |   2 +-
 coverage/components/Table/index.html          |   2 +-
 coverage/components/Table/types.ts.html       |   2 +-
 coverage/components/Tag/Tag.tsx.html          |   2 +-
 coverage/components/Tag/index.html            |   2 +-
 coverage/components/Text/Text.tsx.html        |   2 +-
 coverage/components/Text/index.html           |   2 +-
 .../components/TextInput/TextInput.tsx.html   |   2 +-
 coverage/components/TextInput/index.html      |   2 +-
 coverage/components/Toggle/Toggle.tsx.html    |   2 +-
 coverage/components/Toggle/index.html         |   2 +-
 coverage/components/commonTypes.ts.html       |   2 +-
 coverage/components/index.html                |   2 +-
 coverage/context/index.html                   |   2 +-
 coverage/context/index.tsx.html               |   2 +-
 coverage/coverage-summary.json                |   4 +-
 coverage/enums/checkboxTypes.ts.html          |   2 +-
 coverage/enums/colors.ts.html                 |   2 +-
 coverage/enums/feedbackTypes.ts.html          |   2 +-
 coverage/enums/fonts.ts.html                  |   2 +-
 coverage/enums/index.html                     |   2 +-
 coverage/enums/timings.ts.html                |   2 +-
 coverage/enums/variants.ts.html               |   2 +-
 coverage/htmlElements/index.html              |   2 +-
 coverage/htmlElements/index.tsx.html          |   2 +-
 coverage/index.html                           |  38 +--
 coverage/utils/a11y.ts.html                   |   2 +-
 coverage/utils/color.ts.html                  |   2 +-
 coverage/utils/hooks.ts.html                  |   2 +-
 coverage/utils/index.html                     |   2 +-
 coverage/utils/math.ts.html                   |   2 +-
 coverage/utils/performance.ts.html            |   2 +-
 coverage/utils/refs.ts.html                   |  14 +-
 coverage/utils/styles.ts.html                 |   2 +-
 66 files changed, 320 insertions(+), 130 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7187fdf5a..5ccab85ac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [1.27.3](https://github.com/Headstorm/foundry-ui/compare/v1.27.2...v1.27.3) (2023-10-12)
+
+
+### Bug Fixes
+
+* **spotlight:** spotlight now scrolls to new targets if they are scrolled out of view ([8d7776a](https://github.com/Headstorm/foundry-ui/commit/8d7776a2c3d7aeac02f0440ae6086255ecaf0486)), closes [#476](https://github.com/Headstorm/foundry-ui/issues/476)
+
 ## [1.27.2](https://github.com/Headstorm/foundry-ui/compare/v1.27.1...v1.27.2) (2023-08-01)
 
 
diff --git a/coverage/badge-branches.svg b/coverage/badge-branches.svg
index 0cd62d621..108105a25 100644
--- a/coverage/badge-branches.svg
+++ b/coverage/badge-branches.svg
@@ -1 +1 @@
-<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:branches: 64.88%"><title>Coverage:branches: 64.88%</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:branches</text><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="1070">Coverage:branches</text><text aria-hidden="true" x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">64.88%</text><text x="1425" y="140" transform="scale(.1)" fill="#fff" textLength="430">64.88%</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:branches: 64.27%"><title>Coverage:branches: 64.27%</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:branches</text><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="1070">Coverage:branches</text><text aria-hidden="true" x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">64.27%</text><text x="1425" y="140" transform="scale(.1)" fill="#fff" textLength="430">64.27%</text></g></svg>
\ No newline at end of file
diff --git a/coverage/badge-functions.svg b/coverage/badge-functions.svg
index 9d90881a2..fc961746f 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="170" height="20" role="img" aria-label="Coverage:functions: 67.25%"><title>Coverage:functions: 67.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="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">67.25%</text><text x="1425" y="140" transform="scale(.1)" fill="#fff" textLength="430">67.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="170" height="20" role="img" aria-label="Coverage:functions: 67.48%"><title>Coverage:functions: 67.48%</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">67.48%</text><text x="1425" y="140" transform="scale(.1)" fill="#fff" textLength="430">67.48%</text></g></svg>
\ No newline at end of file
diff --git a/coverage/badge-lines.svg b/coverage/badge-lines.svg
index ca1b6cb6e..7f7aa3898 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.65%"><title>Coverage:lines: 72.65%</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.65%</text><text x="1185" y="140" transform="scale(.1)" fill="#fff" textLength="430">72.65%</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.43%"><title>Coverage:lines: 72.43%</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.43%</text><text x="1185" y="140" transform="scale(.1)" fill="#fff" textLength="430">72.43%</text></g></svg>
\ No newline at end of file
diff --git a/coverage/badge-statements.svg b/coverage/badge-statements.svg
index 9f3e16339..9a6bfa2a6 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: 71.73%"><title>Coverage:statements: 71.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="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">71.73%</text><text x="1545" y="140" transform="scale(.1)" fill="#fff" textLength="430">71.73%</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: 71.52%"><title>Coverage:statements: 71.52%</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">71.52%</text><text x="1545" y="140" transform="scale(.1)" fill="#fff" textLength="430">71.52%</text></g></svg>
\ No newline at end of file
diff --git a/coverage/components/Avatar/Avatar.tsx.html b/coverage/components/Avatar/Avatar.tsx.html
index 60cdeb694..99d9f72b5 100644
--- a/coverage/components/Avatar/Avatar.tsx.html
+++ b/coverage/components/Avatar/Avatar.tsx.html
@@ -484,7 +484,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Avatar/index.html b/coverage/components/Avatar/index.html
index e84417a57..c04e5b68c 100644
--- a/coverage/components/Avatar/index.html
+++ b/coverage/components/Avatar/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/Avatar</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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Button/Button.tsx.html b/coverage/components/Button/Button.tsx.html
index a7eb26942..ccce4b35f 100644
--- a/coverage/components/Button/Button.tsx.html
+++ b/coverage/components/Button/Button.tsx.html
@@ -952,7 +952,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Button/index.html b/coverage/components/Button/index.html
index 8a7da3870..e482769c7 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Card/Card.tsx.html b/coverage/components/Card/Card.tsx.html
index d50f830d4..43e190850 100644
--- a/coverage/components/Card/Card.tsx.html
+++ b/coverage/components/Card/Card.tsx.html
@@ -751,7 +751,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Card/index.html b/coverage/components/Card/index.html
index 236efc32d..af2866481 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Checkbox/Checkbox.tsx.html b/coverage/components/Checkbox/Checkbox.tsx.html
index 7490ff84a..3f3b921e6 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Checkbox/index.html b/coverage/components/Checkbox/index.html
index 22489aa99..941a6d06a 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Divider/Divider.tsx.html b/coverage/components/Divider/Divider.tsx.html
index 58f33c6a3..d6602b143 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Divider/index.html b/coverage/components/Divider/index.html
index f9541114c..e69c7096e 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Dropdown/Dropdown.tsx.html b/coverage/components/Dropdown/Dropdown.tsx.html
index e5cf0cc7c..5d3a556f1 100644
--- a/coverage/components/Dropdown/Dropdown.tsx.html
+++ b/coverage/components/Dropdown/Dropdown.tsx.html
@@ -3430,7 +3430,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Dropdown/index.html b/coverage/components/Dropdown/index.html
index 36435e266..4abc802ef 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/InteractionFeedback/InteractionFeedback.tsx.html b/coverage/components/InteractionFeedback/InteractionFeedback.tsx.html
index e9db5dc58..fe1a50a51 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/InteractionFeedback/index.html b/coverage/components/InteractionFeedback/index.html
index b4beecf31..26c86cfa7 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Label/Label.tsx.html b/coverage/components/Label/Label.tsx.html
index 5c89312d5..5d290ff49 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Label/index.html b/coverage/components/Label/index.html
index 1e5e44cfb..db1856391 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Modal/Modal.tsx.html b/coverage/components/Modal/Modal.tsx.html
index 9198761b6..beca85f36 100644
--- a/coverage/components/Modal/Modal.tsx.html
+++ b/coverage/components/Modal/Modal.tsx.html
@@ -1039,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Modal/index.html b/coverage/components/Modal/index.html
index d04bc299d..1ade01f6a 100644
--- a/coverage/components/Modal/index.html
+++ b/coverage/components/Modal/index.html
@@ -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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Progress/Progress.tsx.html b/coverage/components/Progress/Progress.tsx.html
index 2a6e3db6d..6f5961d26 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Progress/index.html b/coverage/components/Progress/index.html
index 634e4dbf3..52763e8fe 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/RangeSlider/RangeSlider.tsx.html b/coverage/components/RangeSlider/RangeSlider.tsx.html
index 1d2febb93..b03b6dd90 100644
--- a/coverage/components/RangeSlider/RangeSlider.tsx.html
+++ b/coverage/components/RangeSlider/RangeSlider.tsx.html
@@ -1729,7 +1729,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/RangeSlider/index.html b/coverage/components/RangeSlider/index.html
index 828bf2afb..51aa9d62f 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/RangeSlider/types.ts.html b/coverage/components/RangeSlider/types.ts.html
index c752becd7..689616ea1 100644
--- a/coverage/components/RangeSlider/types.ts.html
+++ b/coverage/components/RangeSlider/types.ts.html
@@ -367,7 +367,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Skeleton/Skeleton.tsx.html b/coverage/components/Skeleton/Skeleton.tsx.html
index 6082414aa..ccf89b47e 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Skeleton/index.html b/coverage/components/Skeleton/index.html
index eab660171..4507f0a37 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Spotlight/Spotlight.tsx.html b/coverage/components/Spotlight/Spotlight.tsx.html
index 9fbca5c9b..ed11a8d70 100644
--- a/coverage/components/Spotlight/Spotlight.tsx.html
+++ b/coverage/components/Spotlight/Spotlight.tsx.html
@@ -23,30 +23,30 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">60% </span>
+                <span class="strong">58.06% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>30/50</span>
+                <span class='fraction'>36/62</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">56.25% </span>
+                <span class="strong">46.15% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>18/32</span>
+                <span class='fraction'>24/52</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">83.33% </span>
+                <span class="strong">87.5% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/6</span>
+                <span class='fraction'>7/8</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">58.33% </span>
+                <span class="strong">56.66% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>28/48</span>
+                <span class='fraction'>34/60</span>
             </div>
         
             
@@ -427,7 +427,77 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
 <a name='L362'></a><a href='#L362'>362</a>
 <a name='L363'></a><a href='#L363'>363</a>
 <a name='L364'></a><a href='#L364'>364</a>
-<a name='L365'></a><a href='#L365'>365</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L365'></a><a href='#L365'>365</a>
+<a name='L366'></a><a href='#L366'>366</a>
+<a name='L367'></a><a href='#L367'>367</a>
+<a name='L368'></a><a href='#L368'>368</a>
+<a name='L369'></a><a href='#L369'>369</a>
+<a name='L370'></a><a href='#L370'>370</a>
+<a name='L371'></a><a href='#L371'>371</a>
+<a name='L372'></a><a href='#L372'>372</a>
+<a name='L373'></a><a href='#L373'>373</a>
+<a name='L374'></a><a href='#L374'>374</a>
+<a name='L375'></a><a href='#L375'>375</a>
+<a name='L376'></a><a href='#L376'>376</a>
+<a name='L377'></a><a href='#L377'>377</a>
+<a name='L378'></a><a href='#L378'>378</a>
+<a name='L379'></a><a href='#L379'>379</a>
+<a name='L380'></a><a href='#L380'>380</a>
+<a name='L381'></a><a href='#L381'>381</a>
+<a name='L382'></a><a href='#L382'>382</a>
+<a name='L383'></a><a href='#L383'>383</a>
+<a name='L384'></a><a href='#L384'>384</a>
+<a name='L385'></a><a href='#L385'>385</a>
+<a name='L386'></a><a href='#L386'>386</a>
+<a name='L387'></a><a href='#L387'>387</a>
+<a name='L388'></a><a href='#L388'>388</a>
+<a name='L389'></a><a href='#L389'>389</a>
+<a name='L390'></a><a href='#L390'>390</a>
+<a name='L391'></a><a href='#L391'>391</a>
+<a name='L392'></a><a href='#L392'>392</a>
+<a name='L393'></a><a href='#L393'>393</a>
+<a name='L394'></a><a href='#L394'>394</a>
+<a name='L395'></a><a href='#L395'>395</a>
+<a name='L396'></a><a href='#L396'>396</a>
+<a name='L397'></a><a href='#L397'>397</a>
+<a name='L398'></a><a href='#L398'>398</a>
+<a name='L399'></a><a href='#L399'>399</a>
+<a name='L400'></a><a href='#L400'>400</a>
+<a name='L401'></a><a href='#L401'>401</a>
+<a name='L402'></a><a href='#L402'>402</a>
+<a name='L403'></a><a href='#L403'>403</a>
+<a name='L404'></a><a href='#L404'>404</a>
+<a name='L405'></a><a href='#L405'>405</a>
+<a name='L406'></a><a href='#L406'>406</a>
+<a name='L407'></a><a href='#L407'>407</a>
+<a name='L408'></a><a href='#L408'>408</a>
+<a name='L409'></a><a href='#L409'>409</a>
+<a name='L410'></a><a href='#L410'>410</a>
+<a name='L411'></a><a href='#L411'>411</a>
+<a name='L412'></a><a href='#L412'>412</a>
+<a name='L413'></a><a href='#L413'>413</a>
+<a name='L414'></a><a href='#L414'>414</a>
+<a name='L415'></a><a href='#L415'>415</a>
+<a name='L416'></a><a href='#L416'>416</a>
+<a name='L417'></a><a href='#L417'>417</a>
+<a name='L418'></a><a href='#L418'>418</a>
+<a name='L419'></a><a href='#L419'>419</a>
+<a name='L420'></a><a href='#L420'>420</a>
+<a name='L421'></a><a href='#L421'>421</a>
+<a name='L422'></a><a href='#L422'>422</a>
+<a name='L423'></a><a href='#L423'>423</a>
+<a name='L424'></a><a href='#L424'>424</a>
+<a name='L425'></a><a href='#L425'>425</a>
+<a name='L426'></a><a href='#L426'>426</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>
+<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>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -535,6 +605,41 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
 <span class="cline-any cline-yes">3x</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-yes">3x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&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>
+<span class="cline-any cline-no">&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-yes">3x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-no">&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>
+<span class="cline-any cline-neutral">&nbsp;</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>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -625,6 +730,8 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
 <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-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -657,6 +764,10 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
 <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>
+<span class="cline-any cline-neutral">&nbsp;</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>
@@ -709,7 +820,18 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
 <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>
+<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>
+<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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -791,11 +913,20 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
 <span class="cline-any cline-yes">1x</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></td><td class="text"><pre class="prettyprint lang-js">import React, { useEffect, useMemo } from 'react';
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, {
+  MouseEvent,
+  ReactNode,
+  RefObject,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import styled from 'styled-components';
 import { animated, useSpring } from '@react-spring/web';
 import { Portal } from 'react-portal';
 &nbsp;
+import { mergeRefs } from '../../utils/refs';
 import { SubcomponentPropsType, StyledSubcomponentType } from '../commonTypes';
 import { useScrollObserver, useWindowSizeObserver } from '../../utils/hooks';
 import { useTheme, useAnalytics } from '../../context';
@@ -841,20 +972,20 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
 export type SpotlightProps = {
   StyledContainer?: StyledSubcomponentType;
   containerProps?: SubcomponentPropsType;
-  containerRef?: React.RefObject&lt;HTMLElement&gt;;
+  containerRef?: RefObject&lt;HTMLElement&gt;;
 &nbsp;
   StyledAnnotation?: StyledSubcomponentType;
   annotationProps?: SubcomponentPropsType;
-  annotationRef?: React.RefObject&lt;HTMLElement&gt;;
+  annotationRef?: RefObject&lt;HTMLElement&gt;;
 &nbsp;
-  children?: React.ReactNode;
-  targetElement?: HTMLElement;
+  children?: ReactNode;
+  targetElement?: HTMLElement | Element;
   backgroundBlur?: string;
   backgroundDarkness?: number;
   shape?: SpotlightShapes;
   cornerRadius?: number;
   padding?: number;
-  onClick?: (e: React.MouseEvent) =&gt; void;
+  onClick?: (e: MouseEvent) =&gt; void;
   animateTargetChanges?: boolean;
   // onAnimationEnd?: ControllerProps['onRest'];
   onAnimationEnd?: () =&gt; void;
@@ -897,6 +1028,41 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
     performanceInfo: { tier: gpuTier },
     accessibilityPreferences: { prefersReducedMotion },
   } = useTheme();
+&nbsp;
+  const internalAnnotationRef: RefObject&lt;HTMLElement&gt; = useRef(null);
+&nbsp;
+  /* Scroll to new position if need-be */
+&nbsp;
+  const [isAutoScrolling, setIsAutoScrolling] = useState(false);
+&nbsp;
+  useEffect(() =&gt; {
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (targetElement) {
+      const newTargetTop = <span class="cstat-no" title="statement not covered" >targetElement?.getBoundingClientRect().top ?? 0;</span>
+      const annotationHeight = <span class="cstat-no" title="statement not covered" >internalAnnotationRef?.current?.getBoundingClientRect().height;</span>
+      // TODO: This assumes the annotation is above the target
+      // when custom above/under alignment is implemented, this logic should change
+      // (if the annotation is below the target, this should be an addition, not subtraction)
+      const offset = <span class="cstat-no" title="statement not covered" >annotationHeight ? newTargetTop - annotationHeight : newTargetTop;</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >      window.scrollBy({</span>
+        top: offset,
+        left: 0,
+        behavior: !animateTargetChanges || prefersReducedMotion ? 'auto' : 'smooth',
+      });
+&nbsp;
+<span class="cstat-no" title="statement not covered" >      setIsAutoScrolling(true);</span>
+    }
+  }, [animateTargetChanges, internalAnnotationRef, prefersReducedMotion, targetElement]);
+&nbsp;
+  useEffect(() =&gt; {
+    // check if auto scroll has completed
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (isScrolling === false &amp;&amp; isAutoScrolling === true) {
+<span class="cstat-no" title="statement not covered" >      setIsAutoScrolling(false);</span>
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isScrolling]);
+&nbsp;
+  /* Build spotlight shape */
 &nbsp;
   const rect = useMemo&lt;Pick&lt;DOMRect, 'x' | 'y' | 'width' | 'height' | 'bottom' | 'right'&gt;&gt;(() =&gt; {
     const defaultVal = {
@@ -966,6 +1132,8 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
     L ${rect.x} ${rect.y + rect.height / 2}
   `;
   const finalRectangularPath = `${outerRectPath} ${innerShapePath}`;
+&nbsp;
+  /* Setup animation */
 &nbsp;
   const [
     {
@@ -1011,10 +1179,14 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
     leftBlurHeight: rect.height + 2,
 &nbsp;
     rightBlurY: rect.y,
-    rightBlurWidth: windowWidth - rect.right,
+    rightBlurWidth: windowWidth - rect.right - padding - 4,
     rightBlurHeight: rect.height + 2,
+    immediate:
+      !animateTargetChanges ||
+      prefersReducedMotion ||
+      (<span class="branch-2 cbranch-no" title="branch not covered" >isScrolling </span>&amp;&amp; <span class="branch-3 cbranch-no" title="branch not covered" >!isAutoScrolling)</span> ||
+<span class="branch-4 cbranch-no" title="branch not covered" >      isResizing,</span>
     config: {
-      immediate: !animateTargetChanges || prefersReducedMotion || <span class="branch-2 cbranch-no" title="branch not covered" >isScrolling </span>|| <span class="branch-3 cbranch-no" title="branch not covered" >isResizing,</span>
       round: gpuTier &lt; 2 ? <span class="branch-0 cbranch-no" title="branch not covered" >1 </span>: undefined,
       ...animationSpringConfig,
     },
@@ -1030,10 +1202,10 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
       lightPath: finalRectangularPath,
       circularLightPath: circularPath,
 &nbsp;
-      annotationTransform: `translate(${rect.x}px, ${rect.y}px) translate(0%, -100%)`,
+      annotationTransform: `translate(${rect.x}px, ${rect.y}px) translate(0%, -100%)`, // TODO: change second translate to make different attach positions
 &nbsp;
       topBlurWidth: windowWidth,
-      topBlurHeight: rect.y - 1,
+      topBlurHeight: Math.max(rect.y - 1, 0),
 &nbsp;
       bottomBlurY: rect.bottom,
       bottomBlurWidth: windowWidth,
@@ -1044,10 +1216,15 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
       leftBlurHeight: rect.height + 2,
 &nbsp;
       rightBlurY: rect.y,
-      rightBlurWidth: windowWidth - rect.right,
+      rightBlurWidth: windowWidth - rect.right - padding - 4,
       rightBlurHeight: rect.height + 2,
 &nbsp;
       onRest: onAnimationEnd,
+      immediate:
+        !animateTargetChanges ||
+        prefersReducedMotion ||
+        (<span class="branch-2 cbranch-no" title="branch not covered" >isScrolling </span>&amp;&amp; <span class="branch-3 cbranch-no" title="branch not covered" >!isAutoScrolling)</span> ||
+<span class="branch-4 cbranch-no" title="branch not covered" >        isResizing,</span>
     }));
   }, [
     targetElement,
@@ -1059,6 +1236,8 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
     windowWidth,
     windowHeight,
     isScrolling,
+    scrollY,
+    isAutoScrolling,
     isResizing,
     spring,
     finalRectangularPath,
@@ -1071,9 +1250,13 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
     animateTargetChanges,
     onAnimationEnd,
     gpuTier,
+    prefersReducedMotion,
   ]);
 &nbsp;
-  const handleClick = <span class="fstat-no" title="function not covered" >(e</span>vt: React.MouseEvent) =&gt; {
+  /* Click */
+&nbsp;
+  const handleClick = <span class="fstat-no" title="function not covered" >(e</span>vt: MouseEvent) =&gt; {
+    // TODO: Rename to onClickOutside?
 <span class="cstat-no" title="statement not covered" >    handleEventWithAnalytics('Spotlight', onClick, 'onClick', evt, containerProps);</span>
   };
 &nbsp;
@@ -1141,7 +1324,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/S
       &lt;/svg&gt;
       &lt;StyledAnnotation
         style={{ transform: annotationTransform }}
-        ref={annotationRef}
+        ref={mergeRefs&lt;HTMLElement&gt;([annotationRef, internalAnnotationRef])}
         {...annotationProps}
       &gt;
         {children}
@@ -1162,7 +1345,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Spotlight/index.html b/coverage/components/Spotlight/index.html
index 0f05aa4b6..8eeaadc55 100644
--- a/coverage/components/Spotlight/index.html
+++ b/coverage/components/Spotlight/index.html
@@ -23,30 +23,30 @@ <h1><a href="../../index.html">All files</a> components/Spotlight</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">60% </span>
+                <span class="strong">58.06% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>30/50</span>
+                <span class='fraction'>36/62</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">56.25% </span>
+                <span class="strong">46.15% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>18/32</span>
+                <span class='fraction'>24/52</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">83.33% </span>
+                <span class="strong">87.5% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/6</span>
+                <span class='fraction'>7/8</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">58.33% </span>
+                <span class="strong">56.66% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>28/48</span>
+                <span class='fraction'>34/60</span>
             </div>
         
             
@@ -80,17 +80,17 @@ <h1><a href="../../index.html">All files</a> components/Spotlight</h1>
 </thead>
 <tbody><tr>
 	<td class="file medium" data-value="Spotlight.tsx"><a href="Spotlight.tsx.html">Spotlight.tsx</a></td>
-	<td data-value="60" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 60%"></div><div class="cover-empty" style="width: 40%"></div></div>
+	<td data-value="58.06" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 58%"></div><div class="cover-empty" style="width: 42%"></div></div>
 	</td>
-	<td data-value="60" class="pct medium">60%</td>
-	<td data-value="50" class="abs medium">30/50</td>
-	<td data-value="56.25" class="pct medium">56.25%</td>
-	<td data-value="32" class="abs medium">18/32</td>
-	<td data-value="83.33" class="pct high">83.33%</td>
-	<td data-value="6" class="abs high">5/6</td>
-	<td data-value="58.33" class="pct medium">58.33%</td>
-	<td data-value="48" class="abs medium">28/48</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="46.15" class="pct low">46.15%</td>
+	<td data-value="52" class="abs low">24/52</td>
+	<td data-value="87.5" class="pct high">87.5%</td>
+	<td data-value="8" class="abs high">7/8</td>
+	<td data-value="56.66" class="pct medium">56.66%</td>
+	<td data-value="60" class="abs medium">34/60</td>
 	</tr>
 
 </tbody>
@@ -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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Table/Table.tsx.html b/coverage/components/Table/Table.tsx.html
index c2169af88..7b09c1f65 100644
--- a/coverage/components/Table/Table.tsx.html
+++ b/coverage/components/Table/Table.tsx.html
@@ -2506,7 +2506,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Table/index.html b/coverage/components/Table/index.html
index 54f2638b1..40dfc0880 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Table/types.ts.html b/coverage/components/Table/types.ts.html
index fbdb15b69..9b6d6a116 100644
--- a/coverage/components/Table/types.ts.html
+++ b/coverage/components/Table/types.ts.html
@@ -451,7 +451,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Tag/Tag.tsx.html b/coverage/components/Tag/Tag.tsx.html
index 26e30635d..9984368e1 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Tag/index.html b/coverage/components/Tag/index.html
index 18ac6241c..51ce59d34 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Text/Text.tsx.html b/coverage/components/Text/Text.tsx.html
index 396251e4d..e430fc68d 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Text/index.html b/coverage/components/Text/index.html
index 101b854a6..2be276dce 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/TextInput/TextInput.tsx.html b/coverage/components/TextInput/TextInput.tsx.html
index 81cb2ebf1..cf45d79ff 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/TextInput/index.html b/coverage/components/TextInput/index.html
index 672995e42..2c1f97bf1 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Toggle/Toggle.tsx.html b/coverage/components/Toggle/Toggle.tsx.html
index 730904522..5ca307e13 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/Toggle/index.html b/coverage/components/Toggle/index.html
index 00115111e..948f6e89c 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/components/commonTypes.ts.html b/coverage/components/commonTypes.ts.html
index 1da98f355..98b36e966 100644
--- a/coverage/components/commonTypes.ts.html
+++ b/coverage/components/commonTypes.ts.html
@@ -97,7 +97,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/components/index.html b/coverage/components/index.html
index dc83cf91e..05e29df69 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/context/index.html b/coverage/context/index.html
index 8a8268eef..4676aa5f8 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/context/index.tsx.html b/coverage/context/index.tsx.html
index 4ae52e221..f115e3f95 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/coverage-summary.json b/coverage/coverage-summary.json
index 01c79b3fe..0390861f5 100644
--- a/coverage/coverage-summary.json
+++ b/coverage/coverage-summary.json
@@ -1,4 +1,4 @@
-{"total": {"lines":{"total":1196,"covered":869,"skipped":0,"pct":72.65},"statements":{"total":1231,"covered":883,"skipped":0,"pct":71.73},"functions":{"total":284,"covered":191,"skipped":0,"pct":67.25},"branches":{"total":1122,"covered":728,"skipped":0,"pct":64.88},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":100}}
+{"total": {"lines":{"total":1208,"covered":875,"skipped":0,"pct":72.43},"statements":{"total":1243,"covered":889,"skipped":0,"pct":71.52},"functions":{"total":286,"covered":193,"skipped":0,"pct":67.48},"branches":{"total":1142,"covered":734,"skipped":0,"pct":64.27},"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/Avatar/Avatar.tsx": {"lines":{"total":16,"covered":16,"skipped":0,"pct":100},"functions":{"total":4,"covered":4,"skipped":0,"pct":100},"statements":{"total":16,"covered":16,"skipped":0,"pct":100},"branches":{"total":19,"covered":17,"skipped":0,"pct":89.47}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/Button/Button.tsx": {"lines":{"total":30,"covered":28,"skipped":0,"pct":93.33},"functions":{"total":15,"covered":11,"skipped":0,"pct":73.33},"statements":{"total":30,"covered":28,"skipped":0,"pct":93.33},"branches":{"total":58,"covered":50,"skipped":0,"pct":86.2}}
@@ -13,7 +13,7 @@
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/RangeSlider/RangeSlider.tsx": {"lines":{"total":116,"covered":71,"skipped":0,"pct":61.2},"functions":{"total":32,"covered":22,"skipped":0,"pct":68.75},"statements":{"total":128,"covered":73,"skipped":0,"pct":57.03},"branches":{"total":120,"covered":59,"skipped":0,"pct":49.16}}
 ,"/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}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/Skeleton/Skeleton.tsx": {"lines":{"total":15,"covered":15,"skipped":0,"pct":100},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":15,"covered":15,"skipped":0,"pct":100},"branches":{"total":14,"covered":12,"skipped":0,"pct":85.71}}
-,"/home/runner/work/foundry-ui/foundry-ui/src/components/Spotlight/Spotlight.tsx": {"lines":{"total":48,"covered":28,"skipped":0,"pct":58.33},"functions":{"total":6,"covered":5,"skipped":0,"pct":83.33},"statements":{"total":50,"covered":30,"skipped":0,"pct":60},"branches":{"total":32,"covered":18,"skipped":0,"pct":56.25}}
+,"/home/runner/work/foundry-ui/foundry-ui/src/components/Spotlight/Spotlight.tsx": {"lines":{"total":60,"covered":34,"skipped":0,"pct":56.66},"functions":{"total":8,"covered":7,"skipped":0,"pct":87.5},"statements":{"total":62,"covered":36,"skipped":0,"pct":58.06},"branches":{"total":52,"covered":24,"skipped":0,"pct":46.15}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/Table/Table.tsx": {"lines":{"total":167,"covered":86,"skipped":0,"pct":51.49},"functions":{"total":40,"covered":19,"skipped":0,"pct":47.5},"statements":{"total":171,"covered":87,"skipped":0,"pct":50.87},"branches":{"total":204,"covered":91,"skipped":0,"pct":44.6}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/Table/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}}
 ,"/home/runner/work/foundry-ui/foundry-ui/src/components/Tag/Tag.tsx": {"lines":{"total":17,"covered":17,"skipped":0,"pct":100},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":17,"covered":17,"skipped":0,"pct":100},"branches":{"total":35,"covered":33,"skipped":0,"pct":94.28}}
diff --git a/coverage/enums/checkboxTypes.ts.html b/coverage/enums/checkboxTypes.ts.html
index fccb3af5e..010759419 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/enums/colors.ts.html b/coverage/enums/colors.ts.html
index 0f3967c06..1d518e789 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/enums/feedbackTypes.ts.html b/coverage/enums/feedbackTypes.ts.html
index 737c77d58..ffda4a041 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/enums/fonts.ts.html b/coverage/enums/fonts.ts.html
index 308519a27..7cd7f9afa 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/enums/index.html b/coverage/enums/index.html
index ca45d67b4..3b2238766 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/enums/timings.ts.html b/coverage/enums/timings.ts.html
index f7c70029c..dd301d58f 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/enums/variants.ts.html b/coverage/enums/variants.ts.html
index 809fdf7e1..af56ae906 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/htmlElements/index.html b/coverage/htmlElements/index.html
index 29bcd3eb3..d81f26d15 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/htmlElements/index.tsx.html b/coverage/htmlElements/index.tsx.html
index 01f771b70..bbd978c12 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/index.html b/coverage/index.html
index ef1e3c8ec..130c97ace 100644
--- a/coverage/index.html
+++ b/coverage/index.html
@@ -23,30 +23,30 @@ <h1>All files</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">71.73% </span>
+                <span class="strong">71.52% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>883/1231</span>
+                <span class='fraction'>889/1243</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">64.88% </span>
+                <span class="strong">64.27% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>728/1122</span>
+                <span class='fraction'>734/1142</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">67.25% </span>
+                <span class="strong">67.48% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>191/284</span>
+                <span class='fraction'>193/286</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">72.65% </span>
+                <span class="strong">72.43% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>869/1196</span>
+                <span class='fraction'>875/1208</span>
             </div>
         
             
@@ -275,17 +275,17 @@ <h1>All files</h1>
 
 <tr>
 	<td class="file medium" data-value="components/Spotlight"><a href="components/Spotlight/index.html">components/Spotlight</a></td>
-	<td data-value="60" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 60%"></div><div class="cover-empty" style="width: 40%"></div></div>
+	<td data-value="58.06" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 58%"></div><div class="cover-empty" style="width: 42%"></div></div>
 	</td>
-	<td data-value="60" class="pct medium">60%</td>
-	<td data-value="50" class="abs medium">30/50</td>
-	<td data-value="56.25" class="pct medium">56.25%</td>
-	<td data-value="32" class="abs medium">18/32</td>
-	<td data-value="83.33" class="pct high">83.33%</td>
-	<td data-value="6" class="abs high">5/6</td>
-	<td data-value="58.33" class="pct medium">58.33%</td>
-	<td data-value="48" class="abs medium">28/48</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="46.15" class="pct low">46.15%</td>
+	<td data-value="52" class="abs low">24/52</td>
+	<td data-value="87.5" class="pct high">87.5%</td>
+	<td data-value="8" class="abs high">7/8</td>
+	<td data-value="56.66" class="pct medium">56.66%</td>
+	<td data-value="60" class="abs medium">34/60</td>
 	</tr>
 
 <tr>
@@ -431,7 +431,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="prettify.js"></script>
         <script>
diff --git a/coverage/utils/a11y.ts.html b/coverage/utils/a11y.ts.html
index c80479e18..61feceeb8 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/color.ts.html b/coverage/utils/color.ts.html
index 2ee435f8f..bbd107c79 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/hooks.ts.html b/coverage/utils/hooks.ts.html
index 6f3d2c752..738f22eae 100644
--- a/coverage/utils/hooks.ts.html
+++ b/coverage/utils/hooks.ts.html
@@ -436,7 +436,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/index.html b/coverage/utils/index.html
index 339d7c431..bb26203b1 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/math.ts.html b/coverage/utils/math.ts.html
index eb03cc297..f39c5fbb0 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/performance.ts.html b/coverage/utils/performance.ts.html
index 8321d3f68..71817eb6c 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/refs.ts.html b/coverage/utils/refs.ts.html
index 33f131521..46d1325e4 100644
--- a/coverage/utils/refs.ts.html
+++ b/coverage/utils/refs.ts.html
@@ -106,13 +106,13 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">utils</a> refs.
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-yes">368x</span>
-<span class="cline-any cline-yes">368x</span>
-<span class="cline-any cline-yes">728x</span>
-<span class="cline-any cline-yes">1096x</span>
+<span class="cline-any cline-yes">371x</span>
+<span class="cline-any cline-yes">371x</span>
+<span class="cline-any cline-yes">734x</span>
+<span class="cline-any cline-yes">1102x</span>
 <span class="cline-any cline-yes">354x</span>
-<span class="cline-any cline-yes">742x</span>
-<span class="cline-any cline-yes">742x</span>
+<span class="cline-any cline-yes">748x</span>
+<span class="cline-any cline-yes">748x</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>
@@ -151,7 +151,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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/utils/styles.ts.html b/coverage/utils/styles.ts.html
index be35d9811..34cadae4a 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 2023-08-01T19:09:23.203Z
+                at 2023-10-12T22:20:23.855Z
             </div>
         <script src="../prettify.js"></script>
         <script>