From 3d4e8636eaebebad3cff5420a40d75d45fee14ce Mon Sep 17 00:00:00 2001
From: Prabhu Murthy <prabhu.m.murthy@gmail.com>
Date: Mon, 21 Aug 2023 10:47:16 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Refactor=20useResize=20and=20useEff?=
 =?UTF-8?q?ect=20(#56)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 coverage/clover.xml                           |  94 +++--
 coverage/cobertura-coverage.xml               |  94 +++--
 .../components/controls/button.tsx.html       |   2 +-
 .../components/controls/index.html            |   2 +-
 .../components/icons/alert.tsx.html           |   2 +-
 .../components/icons/chevron-down.tsx.html    |   2 +-
 .../components/icons/chevron-left.tsx.html    |   2 +-
 .../components/icons/chevron-right.tsx.html   |   2 +-
 .../components/icons/chevron-up.tsx.html      |   2 +-
 .../components/icons/close.tsx.html           |   2 +-
 .../components/icons/default-screen.tsx.html  |   2 +-
 .../components/icons/full-screen.tsx.html     |   2 +-
 .../lcov-report/components/icons/index.html   |   2 +-
 .../components/icons/index.ts.html            |   2 +-
 .../components/icons/maximize.tsx.html        |   2 +-
 .../components/icons/minimize.tsx.html        |   2 +-
 .../components/icons/moon.tsx.html            |   2 +-
 .../components/icons/resize.tsx.html          |   2 +-
 .../components/icons/spinner.tsx.html         |   2 +-
 .../lcov-report/components/icons/sun.tsx.html |   2 +-
 .../components/image/image.tsx.html           |   2 +-
 .../lcov-report/components/image/index.html   |   2 +-
 .../components/progress-bar/index.html        |   2 +-
 .../progress-bar/progress-bar.tsx.html        |   2 +-
 .../lcov-report/components/viewer/index.html  |   2 +-
 .../components/viewer/viewer.tsx.html         |   2 +-
 coverage/lcov-report/effects/index.html       |  32 +-
 coverage/lcov-report/effects/useKey.ts.html   | 170 +++++----
 coverage/lcov-report/effects/useStyle.ts.html |   2 +-
 coverage/lcov-report/effects/useTheme.ts.html |   2 +-
 coverage/lcov-report/index.html               |  30 +-
 coverage/lcov.info                            | 110 +++---
 package.json                                  |  14 +-
 pnpm-lock.yaml                                | 360 ++++++++----------
 src/effects/__tests__/useKey.test.ts          |  55 +++
 src/effects/useKey.ts                         |  58 +--
 src/effects/useResize.ts                      |  26 ++
 37 files changed, 614 insertions(+), 481 deletions(-)
 create mode 100644 src/effects/__tests__/useKey.test.ts

diff --git a/coverage/clover.xml b/coverage/clover.xml
index ee51436..1a8e16d 100644
--- a/coverage/clover.xml
+++ b/coverage/clover.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1692337704677" clover="3.2.0">
-  <project timestamp="1692337704677" name="All files">
-    <metrics statements="817" coveredstatements="640" conditionals="81" coveredconditionals="73" methods="25" coveredmethods="14" elements="923" coveredelements="727" complexity="0" loc="817" ncloc="817" packages="6" files="22" classes="22"/>
+<coverage generated="1692594572422" clover="3.2.0">
+  <project timestamp="1692594572422" name="All files">
+    <metrics statements="829" coveredstatements="660" conditionals="87" coveredconditionals="78" methods="25" coveredmethods="14" elements="941" coveredelements="752" complexity="0" loc="829" ncloc="829" packages="6" files="22" classes="22"/>
     <package name="components.controls">
       <metrics statements="64" coveredstatements="64" conditionals="13" coveredconditionals="12" methods="2" coveredmethods="2"/>
       <file name="button.tsx" path="C:\Users\prabh\Github\react-visual-grid\src\components\controls\button.tsx">
@@ -686,9 +686,9 @@
       </file>
     </package>
     <package name="effects">
-      <metrics statements="206" coveredstatements="195" conditionals="34" coveredconditionals="32" methods="3" coveredmethods="3"/>
+      <metrics statements="218" coveredstatements="215" conditionals="40" coveredconditionals="37" methods="3" coveredmethods="3"/>
       <file name="useKey.ts" path="C:\Users\prabh\Github\react-visual-grid\src\effects\useKey.ts">
-        <metrics statements="44" coveredstatements="35" conditionals="5" coveredconditionals="5" methods="1" coveredmethods="1"/>
+        <metrics statements="56" coveredstatements="55" conditionals="11" coveredconditionals="10" methods="1" coveredmethods="1"/>
         <line num="1" count="1" type="stmt"/>
         <line num="2" count="1" type="stmt"/>
         <line num="3" count="1" type="stmt"/>
@@ -697,42 +697,54 @@
         <line num="6" count="1" type="stmt"/>
         <line num="7" count="1" type="stmt"/>
         <line num="8" count="1" type="stmt"/>
-        <line num="9" count="7" type="cond" truecount="1" falsecount="0"/>
-        <line num="10" count="7" type="stmt"/>
-        <line num="11" count="7" type="stmt"/>
-        <line num="12" count="7" type="stmt"/>
-        <line num="13" count="0" type="stmt"/>
-        <line num="14" count="0" type="stmt"/>
-        <line num="15" count="0" type="stmt"/>
-        <line num="16" count="0" type="stmt"/>
-        <line num="17" count="0" type="stmt"/>
-        <line num="18" count="0" type="stmt"/>
-        <line num="19" count="0" type="stmt"/>
-        <line num="20" count="0" type="stmt"/>
-        <line num="21" count="0" type="stmt"/>
-        <line num="22" count="7" type="stmt"/>
-        <line num="23" count="7" type="stmt"/>
-        <line num="24" count="7" type="cond" truecount="1" falsecount="0"/>
-        <line num="25" count="14" type="cond" truecount="1" falsecount="0"/>
-        <line num="26" count="7" type="stmt"/>
-        <line num="27" count="7" type="stmt"/>
-        <line num="28" count="7" type="stmt"/>
-        <line num="29" count="7" type="stmt"/>
-        <line num="30" count="7" type="stmt"/>
-        <line num="31" count="7" type="stmt"/>
-        <line num="32" count="7" type="cond" truecount="1" falsecount="0"/>
-        <line num="33" count="7" type="cond" truecount="1" falsecount="0"/>
-        <line num="34" count="7" type="stmt"/>
-        <line num="35" count="7" type="stmt"/>
-        <line num="36" count="7" type="stmt"/>
-        <line num="37" count="7" type="stmt"/>
-        <line num="38" count="7" type="stmt"/>
-        <line num="39" count="7" type="stmt"/>
-        <line num="40" count="7" type="stmt"/>
-        <line num="41" count="7" type="stmt"/>
-        <line num="42" count="7" type="stmt"/>
-        <line num="43" count="7" type="stmt"/>
-        <line num="44" count="7" type="stmt"/>
+        <line num="9" count="12" type="cond" truecount="1" falsecount="0"/>
+        <line num="10" count="12" type="stmt"/>
+        <line num="11" count="12" type="stmt"/>
+        <line num="12" count="12" type="stmt"/>
+        <line num="13" count="12" type="stmt"/>
+        <line num="14" count="12" type="cond" truecount="1" falsecount="0"/>
+        <line num="15" count="4" type="stmt"/>
+        <line num="16" count="4" type="cond" truecount="1" falsecount="0"/>
+        <line num="17" count="2" type="cond" truecount="1" falsecount="0"/>
+        <line num="18" count="2" type="stmt"/>
+        <line num="19" count="4" type="cond" truecount="1" falsecount="0"/>
+        <line num="20" count="1" type="stmt"/>
+        <line num="21" count="1" type="stmt"/>
+        <line num="22" count="4" type="cond" truecount="1" falsecount="0"/>
+        <line num="23" count="1" type="stmt"/>
+        <line num="24" count="1" type="stmt"/>
+        <line num="25" count="4" type="cond" truecount="0" falsecount="1"/>
+        <line num="26" count="0" type="stmt"/>
+        <line num="27" count="4" type="stmt"/>
+        <line num="28" count="4" type="stmt"/>
+        <line num="29" count="12" type="stmt"/>
+        <line num="30" count="12" type="stmt"/>
+        <line num="31" count="12" type="stmt"/>
+        <line num="32" count="12" type="stmt"/>
+        <line num="33" count="12" type="stmt"/>
+        <line num="34" count="12" type="cond" truecount="1" falsecount="0"/>
+        <line num="35" count="19" type="cond" truecount="1" falsecount="0"/>
+        <line num="36" count="12" type="stmt"/>
+        <line num="37" count="12" type="stmt"/>
+        <line num="38" count="12" type="stmt"/>
+        <line num="39" count="12" type="stmt"/>
+        <line num="40" count="19" type="stmt"/>
+        <line num="41" count="12" type="stmt"/>
+        <line num="42" count="12" type="stmt"/>
+        <line num="43" count="12" type="stmt"/>
+        <line num="44" count="12" type="stmt"/>
+        <line num="45" count="12" type="cond" truecount="1" falsecount="0"/>
+        <line num="46" count="12" type="cond" truecount="1" falsecount="0"/>
+        <line num="47" count="12" type="stmt"/>
+        <line num="48" count="12" type="stmt"/>
+        <line num="49" count="12" type="stmt"/>
+        <line num="50" count="12" type="stmt"/>
+        <line num="51" count="12" type="stmt"/>
+        <line num="52" count="12" type="stmt"/>
+        <line num="53" count="12" type="stmt"/>
+        <line num="54" count="12" type="stmt"/>
+        <line num="55" count="12" type="stmt"/>
+        <line num="56" count="12" type="stmt"/>
       </file>
       <file name="useStyle.ts" path="C:\Users\prabh\Github\react-visual-grid\src\effects\useStyle.ts">
         <metrics statements="114" coveredstatements="112" conditionals="24" coveredconditionals="22" methods="1" coveredmethods="1"/>
diff --git a/coverage/cobertura-coverage.xml b/coverage/cobertura-coverage.xml
index f90a6e4..c7a798d 100644
--- a/coverage/cobertura-coverage.xml
+++ b/coverage/cobertura-coverage.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" ?>
 <!DOCTYPE coverage SYSTEM "http://cobertura.sourceforge.net/xml/coverage-04.dtd">
-<coverage lines-valid="817" lines-covered="640" line-rate="0.7833" branches-valid="81" branches-covered="73" branch-rate="0.9012" timestamp="1692337704697" complexity="0" version="0.1">
+<coverage lines-valid="829" lines-covered="660" line-rate="0.7961" branches-valid="87" branches-covered="78" branch-rate="0.8965000000000001" timestamp="1692594572451" complexity="0" version="0.1">
   <sources>
     <source>C:/Users/prabh/Github/react-visual-grid</source>
   </sources>
@@ -860,13 +860,13 @@
         </class>
       </classes>
     </package>
-    <package name="effects" line-rate="0.9466" branch-rate="0.9411">
+    <package name="effects" line-rate="0.9862000000000001" branch-rate="0.925">
       <classes>
-        <class name="useKey.ts" filename="src\effects\useKey.ts" line-rate="0.7954000000000001" branch-rate="1">
+        <class name="useKey.ts" filename="src\effects\useKey.ts" line-rate="0.9821" branch-rate="0.909">
           <methods>
-            <method name="useKey" hits="7" signature="()V">
+            <method name="useKey" hits="12" signature="()V">
               <lines>
-                <line number="9" hits="7"/>
+                <line number="9" hits="12"/>
               </lines>
             </method>
           </methods>
@@ -879,42 +879,54 @@
             <line number="6" hits="1" branch="false"/>
             <line number="7" hits="1" branch="false"/>
             <line number="8" hits="1" branch="false"/>
-            <line number="9" hits="7" branch="true" condition-coverage="100% (1/1)"/>
-            <line number="10" hits="7" branch="false"/>
-            <line number="11" hits="7" branch="false"/>
-            <line number="12" hits="7" branch="false"/>
-            <line number="13" hits="0" branch="false"/>
-            <line number="14" hits="0" branch="false"/>
-            <line number="15" hits="0" branch="false"/>
-            <line number="16" hits="0" branch="false"/>
-            <line number="17" hits="0" branch="false"/>
-            <line number="18" hits="0" branch="false"/>
-            <line number="19" hits="0" branch="false"/>
-            <line number="20" hits="0" branch="false"/>
-            <line number="21" hits="0" branch="false"/>
-            <line number="22" hits="7" branch="false"/>
-            <line number="23" hits="7" branch="false"/>
-            <line number="24" hits="7" branch="true" condition-coverage="100% (1/1)"/>
-            <line number="25" hits="14" branch="true" condition-coverage="100% (1/1)"/>
-            <line number="26" hits="7" branch="false"/>
-            <line number="27" hits="7" branch="false"/>
-            <line number="28" hits="7" branch="false"/>
-            <line number="29" hits="7" branch="false"/>
-            <line number="30" hits="7" branch="false"/>
-            <line number="31" hits="7" branch="false"/>
-            <line number="32" hits="7" branch="true" condition-coverage="100% (1/1)"/>
-            <line number="33" hits="7" branch="true" condition-coverage="100% (1/1)"/>
-            <line number="34" hits="7" branch="false"/>
-            <line number="35" hits="7" branch="false"/>
-            <line number="36" hits="7" branch="false"/>
-            <line number="37" hits="7" branch="false"/>
-            <line number="38" hits="7" branch="false"/>
-            <line number="39" hits="7" branch="false"/>
-            <line number="40" hits="7" branch="false"/>
-            <line number="41" hits="7" branch="false"/>
-            <line number="42" hits="7" branch="false"/>
-            <line number="43" hits="7" branch="false"/>
-            <line number="44" hits="7" branch="false"/>
+            <line number="9" hits="12" branch="true" condition-coverage="100% (1/1)"/>
+            <line number="10" hits="12" branch="false"/>
+            <line number="11" hits="12" branch="false"/>
+            <line number="12" hits="12" branch="false"/>
+            <line number="13" hits="12" branch="false"/>
+            <line number="14" hits="12" branch="true" condition-coverage="100% (1/1)"/>
+            <line number="15" hits="4" branch="false"/>
+            <line number="16" hits="4" branch="true" condition-coverage="100% (1/1)"/>
+            <line number="17" hits="2" branch="true" condition-coverage="100% (1/1)"/>
+            <line number="18" hits="2" branch="false"/>
+            <line number="19" hits="4" branch="true" condition-coverage="100% (1/1)"/>
+            <line number="20" hits="1" branch="false"/>
+            <line number="21" hits="1" branch="false"/>
+            <line number="22" hits="4" branch="true" condition-coverage="100% (1/1)"/>
+            <line number="23" hits="1" branch="false"/>
+            <line number="24" hits="1" branch="false"/>
+            <line number="25" hits="4" branch="true" condition-coverage="0% (0/1)"/>
+            <line number="26" hits="0" branch="false"/>
+            <line number="27" hits="4" branch="false"/>
+            <line number="28" hits="4" branch="false"/>
+            <line number="29" hits="12" branch="false"/>
+            <line number="30" hits="12" branch="false"/>
+            <line number="31" hits="12" branch="false"/>
+            <line number="32" hits="12" branch="false"/>
+            <line number="33" hits="12" branch="false"/>
+            <line number="34" hits="12" branch="true" condition-coverage="100% (1/1)"/>
+            <line number="35" hits="19" branch="true" condition-coverage="100% (1/1)"/>
+            <line number="36" hits="12" branch="false"/>
+            <line number="37" hits="12" branch="false"/>
+            <line number="38" hits="12" branch="false"/>
+            <line number="39" hits="12" branch="false"/>
+            <line number="40" hits="19" branch="false"/>
+            <line number="41" hits="12" branch="false"/>
+            <line number="42" hits="12" branch="false"/>
+            <line number="43" hits="12" branch="false"/>
+            <line number="44" hits="12" branch="false"/>
+            <line number="45" hits="12" branch="true" condition-coverage="100% (1/1)"/>
+            <line number="46" hits="12" branch="true" condition-coverage="100% (1/1)"/>
+            <line number="47" hits="12" branch="false"/>
+            <line number="48" hits="12" branch="false"/>
+            <line number="49" hits="12" branch="false"/>
+            <line number="50" hits="12" branch="false"/>
+            <line number="51" hits="12" branch="false"/>
+            <line number="52" hits="12" branch="false"/>
+            <line number="53" hits="12" branch="false"/>
+            <line number="54" hits="12" branch="false"/>
+            <line number="55" hits="12" branch="false"/>
+            <line number="56" hits="12" branch="false"/>
           </lines>
         </class>
         <class name="useStyle.ts" filename="src\effects\useStyle.ts" line-rate="0.9823999999999999" branch-rate="0.9166">
diff --git a/coverage/lcov-report/components/controls/button.tsx.html b/coverage/lcov-report/components/controls/button.tsx.html
index 6a63682..1134cd5 100644
--- a/coverage/lcov-report/components/controls/button.tsx.html
+++ b/coverage/lcov-report/components/controls/button.tsx.html
@@ -262,7 +262,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/controls/index.html b/coverage/lcov-report/components/controls/index.html
index 1827bdb..1180696 100644
--- a/coverage/lcov-report/components/controls/index.html
+++ b/coverage/lcov-report/components/controls/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/controls</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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/alert.tsx.html b/coverage/lcov-report/components/icons/alert.tsx.html
index 5f03027..69cc69a 100644
--- a/coverage/lcov-report/components/icons/alert.tsx.html
+++ b/coverage/lcov-report/components/icons/alert.tsx.html
@@ -112,7 +112,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/chevron-down.tsx.html b/coverage/lcov-report/components/icons/chevron-down.tsx.html
index 4d656b7..4d774db 100644
--- a/coverage/lcov-report/components/icons/chevron-down.tsx.html
+++ b/coverage/lcov-report/components/icons/chevron-down.tsx.html
@@ -115,7 +115,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/chevron-left.tsx.html b/coverage/lcov-report/components/icons/chevron-left.tsx.html
index 9bc96a6..a5a8de8 100644
--- a/coverage/lcov-report/components/icons/chevron-left.tsx.html
+++ b/coverage/lcov-report/components/icons/chevron-left.tsx.html
@@ -112,7 +112,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/chevron-right.tsx.html b/coverage/lcov-report/components/icons/chevron-right.tsx.html
index 82dd473..f585b2d 100644
--- a/coverage/lcov-report/components/icons/chevron-right.tsx.html
+++ b/coverage/lcov-report/components/icons/chevron-right.tsx.html
@@ -112,7 +112,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/chevron-up.tsx.html b/coverage/lcov-report/components/icons/chevron-up.tsx.html
index 3be93d5..212cccd 100644
--- a/coverage/lcov-report/components/icons/chevron-up.tsx.html
+++ b/coverage/lcov-report/components/icons/chevron-up.tsx.html
@@ -112,7 +112,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/close.tsx.html b/coverage/lcov-report/components/icons/close.tsx.html
index ee12050..724199f 100644
--- a/coverage/lcov-report/components/icons/close.tsx.html
+++ b/coverage/lcov-report/components/icons/close.tsx.html
@@ -112,7 +112,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/default-screen.tsx.html b/coverage/lcov-report/components/icons/default-screen.tsx.html
index 5e30eb2..8e670fe 100644
--- a/coverage/lcov-report/components/icons/default-screen.tsx.html
+++ b/coverage/lcov-report/components/icons/default-screen.tsx.html
@@ -118,7 +118,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/full-screen.tsx.html b/coverage/lcov-report/components/icons/full-screen.tsx.html
index 6dc5944..cf85c20 100644
--- a/coverage/lcov-report/components/icons/full-screen.tsx.html
+++ b/coverage/lcov-report/components/icons/full-screen.tsx.html
@@ -115,7 +115,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/index.html b/coverage/lcov-report/components/icons/index.html
index 714c9b9..6d586be 100644
--- a/coverage/lcov-report/components/icons/index.html
+++ b/coverage/lcov-report/components/icons/index.html
@@ -311,7 +311,7 @@ <h1><a href="../../index.html">All files</a> components/icons</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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/index.ts.html b/coverage/lcov-report/components/icons/index.ts.html
index 33b8bf7..75c39d6 100644
--- a/coverage/lcov-report/components/icons/index.ts.html
+++ b/coverage/lcov-report/components/icons/index.ts.html
@@ -112,7 +112,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/maximize.tsx.html b/coverage/lcov-report/components/icons/maximize.tsx.html
index 4c9401b..e06d525 100644
--- a/coverage/lcov-report/components/icons/maximize.tsx.html
+++ b/coverage/lcov-report/components/icons/maximize.tsx.html
@@ -112,7 +112,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/minimize.tsx.html b/coverage/lcov-report/components/icons/minimize.tsx.html
index f4dad61..9d69dd9 100644
--- a/coverage/lcov-report/components/icons/minimize.tsx.html
+++ b/coverage/lcov-report/components/icons/minimize.tsx.html
@@ -112,7 +112,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/moon.tsx.html b/coverage/lcov-report/components/icons/moon.tsx.html
index 51d16cd..09e4c5c 100644
--- a/coverage/lcov-report/components/icons/moon.tsx.html
+++ b/coverage/lcov-report/components/icons/moon.tsx.html
@@ -115,7 +115,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/resize.tsx.html b/coverage/lcov-report/components/icons/resize.tsx.html
index 3dcaf97..a18fc86 100644
--- a/coverage/lcov-report/components/icons/resize.tsx.html
+++ b/coverage/lcov-report/components/icons/resize.tsx.html
@@ -106,7 +106,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/spinner.tsx.html b/coverage/lcov-report/components/icons/spinner.tsx.html
index 3c6654c..aed5340 100644
--- a/coverage/lcov-report/components/icons/spinner.tsx.html
+++ b/coverage/lcov-report/components/icons/spinner.tsx.html
@@ -202,7 +202,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/icons/sun.tsx.html b/coverage/lcov-report/components/icons/sun.tsx.html
index 5e57172..9763d18 100644
--- a/coverage/lcov-report/components/icons/sun.tsx.html
+++ b/coverage/lcov-report/components/icons/sun.tsx.html
@@ -118,7 +118,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/image/image.tsx.html b/coverage/lcov-report/components/image/image.tsx.html
index 0abdd40..daab3a6 100644
--- a/coverage/lcov-report/components/image/image.tsx.html
+++ b/coverage/lcov-report/components/image/image.tsx.html
@@ -352,7 +352,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/image/index.html b/coverage/lcov-report/components/image/index.html
index 2fa7940..cbdb6f3 100644
--- a/coverage/lcov-report/components/image/index.html
+++ b/coverage/lcov-report/components/image/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/image</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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/progress-bar/index.html b/coverage/lcov-report/components/progress-bar/index.html
index 044ad60..bab3d0c 100644
--- a/coverage/lcov-report/components/progress-bar/index.html
+++ b/coverage/lcov-report/components/progress-bar/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/progress-bar</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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/progress-bar/progress-bar.tsx.html b/coverage/lcov-report/components/progress-bar/progress-bar.tsx.html
index 0f45e6f..e05e0bf 100644
--- a/coverage/lcov-report/components/progress-bar/progress-bar.tsx.html
+++ b/coverage/lcov-report/components/progress-bar/progress-bar.tsx.html
@@ -235,7 +235,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/viewer/index.html b/coverage/lcov-report/components/viewer/index.html
index db47269..6f9722c 100644
--- a/coverage/lcov-report/components/viewer/index.html
+++ b/coverage/lcov-report/components/viewer/index.html
@@ -101,7 +101,7 @@ <h1><a href="../../index.html">All files</a> components/viewer</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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/components/viewer/viewer.tsx.html b/coverage/lcov-report/components/viewer/viewer.tsx.html
index 42faaa2..ede5adc 100644
--- a/coverage/lcov-report/components/viewer/viewer.tsx.html
+++ b/coverage/lcov-report/components/viewer/viewer.tsx.html
@@ -529,7 +529,7 @@ <h1><a href="../../index.html">All files</a> / <a href="index.html">components/v
             <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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/index.html b/coverage/lcov-report/effects/index.html
index 465723a..69bafff 100644
--- a/coverage/lcov-report/effects/index.html
+++ b/coverage/lcov-report/effects/index.html
@@ -23,16 +23,16 @@ <h1><a href="../index.html">All files</a> effects</h1>
         <div class='clearfix'>
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">94.66% </span>
+                <span class="strong">98.62% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>195/206</span>
+                <span class='fraction'>215/218</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">94.11% </span>
+                <span class="strong">92.5% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>32/34</span>
+                <span class='fraction'>37/40</span>
             </div>
 
 
@@ -44,9 +44,9 @@ <h1><a href="../index.html">All files</a> effects</h1>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">94.66% </span>
+                <span class="strong">98.62% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>195/206</span>
+                <span class='fraction'>215/218</span>
             </div>
 
 
@@ -79,18 +79,18 @@ <h1><a href="../index.html">All files</a> effects</h1>
 </tr>
 </thead>
 <tbody><tr>
-	<td class="file medium" data-value="useKey.ts"><a href="useKey.ts.html">useKey.ts</a></td>
-	<td data-value="79.54" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 79%"></div><div class="cover-empty" style="width: 21%"></div></div>
+	<td class="file high" data-value="useKey.ts"><a href="useKey.ts.html">useKey.ts</a></td>
+	<td data-value="98.21" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 98%"></div><div class="cover-empty" style="width: 2%"></div></div>
 	</td>
-	<td data-value="79.54" class="pct medium">79.54%</td>
-	<td data-value="44" class="abs medium">35/44</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="5" class="abs high">5/5</td>
+	<td data-value="98.21" class="pct high">98.21%</td>
+	<td data-value="56" class="abs high">55/56</td>
+	<td data-value="90.9" class="pct high">90.9%</td>
+	<td data-value="11" class="abs high">10/11</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="1" class="abs high">1/1</td>
-	<td data-value="79.54" class="pct medium">79.54%</td>
-	<td data-value="44" class="abs medium">35/44</td>
+	<td data-value="98.21" class="pct high">98.21%</td>
+	<td data-value="56" class="abs high">55/56</td>
 	</tr>
 
 <tr>
@@ -131,7 +131,7 @@ <h1><a href="../index.html">All files</a> effects</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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/useKey.ts.html b/coverage/lcov-report/effects/useKey.ts.html
index 8b8ebf3..b273d16 100644
--- a/coverage/lcov-report/effects/useKey.ts.html
+++ b/coverage/lcov-report/effects/useKey.ts.html
@@ -23,16 +23,16 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
         <div class='clearfix'>
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">79.54% </span>
+                <span class="strong">98.21% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>35/44</span>
+                <span class='fraction'>55/56</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">90.9% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>5/5</span>
+                <span class='fraction'>10/11</span>
             </div>
 
 
@@ -44,9 +44,9 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">79.54% </span>
+                <span class="strong">98.21% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>35/44</span>
+                <span class='fraction'>55/56</span>
             </div>
 
 
@@ -61,7 +61,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
             </div>
         </template>
     </div>
-    <div class='status-line medium'></div>
+    <div class='status-line high'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -107,7 +107,19 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
 <a name='L42'></a><a href='#L42'>42</a>
 <a name='L43'></a><a href='#L43'>43</a>
 <a name='L44'></a><a href='#L44'>44</a>
-<a name='L45'></a><a href='#L45'>45</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L45'></a><a href='#L45'>45</a>
+<a name='L46'></a><a href='#L46'>46</a>
+<a name='L47'></a><a href='#L47'>47</a>
+<a name='L48'></a><a href='#L48'>48</a>
+<a name='L49'></a><a href='#L49'>49</a>
+<a name='L50'></a><a href='#L50'>50</a>
+<a name='L51'></a><a href='#L51'>51</a>
+<a name='L52'></a><a href='#L52'>52</a>
+<a name='L53'></a><a href='#L53'>53</a>
+<a name='L54'></a><a href='#L54'>54</a>
+<a name='L55'></a><a href='#L55'>55</a>
+<a name='L56'></a><a href='#L56'>56</a>
+<a name='L57'></a><a href='#L57'>57</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -115,81 +127,105 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">14x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
-<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">19x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">19x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useCallback, useEffect, useRef } from "react";
 &nbsp;
-type options = {
+type Options = {
   escCB?: () =&gt; void;
   leftCB?: () =&gt; void;
   rightCB?: () =&gt; void;
 };
 &nbsp;
-export default function useKey({ escCB, leftCB, rightCB }: options) {
+export default function useKey({ escCB, leftCB, rightCB }: Options) {
   const ref = useRef&lt;HTMLDivElement | null&gt;(null);
 &nbsp;
-  const handleKeyUp = useCallback((ev: KeyboardEvent) =&gt; {
-<span class="cstat-no" title="statement not covered" >    const { key } = ev;</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >    if (key === "Escape") {</span>
-<span class="cstat-no" title="statement not covered" >      escCB?.();</span>
-<span class="cstat-no" title="statement not covered" >    } else if (key === "ArrowRight") {</span>
-<span class="cstat-no" title="statement not covered" >      rightCB?.();</span>
-<span class="cstat-no" title="statement not covered" >    } else if (key === "ArrowLeft") {</span>
-<span class="cstat-no" title="statement not covered" >      leftCB?.();</span>
-<span class="cstat-no" title="statement not covered" >    }</span>
-  }, []);
+  // Handler to manage keyup events
+  const handleKeyUp = useCallback(
+    (ev: KeyboardEvent) =&gt; {
+      switch (ev.key) {
+        case "Escape":
+          escCB?.();
+          break;
+        case "ArrowRight":
+          rightCB?.();
+          break;
+        case "ArrowLeft":
+          leftCB?.();
+          break;
+<span class="branch-0 cbranch-no" title="branch not covered" >        default:</span>
+<span class="cstat-no" title="statement not covered" >          break; // Handle any other keys if necessary</span>
+      }
+    },
+    [escCB, leftCB, rightCB]
+  ); // Dependencies added to ensure the callbacks are updated
 &nbsp;
-  const onRef = useCallback((node: HTMLDivElement) =&gt; {
-    if (node) {
-      ref.current = node;
-      node.focus();
-      node.addEventListener("keyup", handleKeyUp);
-    }
-  }, []);
+  // Callback to set ref and add the keyup event listener
+  const onRef = useCallback(
+    (node: HTMLDivElement) =&gt; {
+      if (node) {
+        ref.current = node;
+        node.focus();
+        node.addEventListener("keyup", handleKeyUp);
+      }
+    },
+    [handleKeyUp]
+  ); // Dependency added to ensure correct reference to handleKeyUp
 &nbsp;
+  // Cleanup function to remove the keyup event listener when component unmounts
   useEffect(() =&gt; {
     return () =&gt; {
       if (ref.current) {
-        const ele = ref.current as HTMLElement;
-        ele.removeEventListener("keyup", handleKeyUp);
+        ref.current.removeEventListener("keyup", handleKeyUp);
       }
     };
-  }, []);
+  }, [handleKeyUp]); // Dependency added to ensure correct reference to handleKeyUp
 &nbsp;
   return {
     onRef,
@@ -202,7 +238,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
             <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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/useStyle.ts.html b/coverage/lcov-report/effects/useStyle.ts.html
index 6ab7ba1..fb66f3c 100644
--- a/coverage/lcov-report/effects/useStyle.ts.html
+++ b/coverage/lcov-report/effects/useStyle.ts.html
@@ -412,7 +412,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
             <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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/effects/useTheme.ts.html b/coverage/lcov-report/effects/useTheme.ts.html
index a423ee1..d58d490 100644
--- a/coverage/lcov-report/effects/useTheme.ts.html
+++ b/coverage/lcov-report/effects/useTheme.ts.html
@@ -214,7 +214,7 @@ <h1><a href="../index.html">All files</a> / <a href="index.html">effects</a> use
             <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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="../prettify.js"></script>
         <script>
diff --git a/coverage/lcov-report/index.html b/coverage/lcov-report/index.html
index 9312129..988aa46 100644
--- a/coverage/lcov-report/index.html
+++ b/coverage/lcov-report/index.html
@@ -23,16 +23,16 @@ <h1>All files</h1>
         <div class='clearfix'>
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.33% </span>
+                <span class="strong">79.61% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>640/817</span>
+                <span class='fraction'>660/829</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">90.12% </span>
+                <span class="strong">89.65% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>73/81</span>
+                <span class='fraction'>78/87</span>
             </div>
 
 
@@ -44,9 +44,9 @@ <h1>All files</h1>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">78.33% </span>
+                <span class="strong">79.61% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>640/817</span>
+                <span class='fraction'>660/829</span>
             </div>
 
 
@@ -155,17 +155,17 @@ <h1>All files</h1>
 
 <tr>
 	<td class="file high" data-value="effects"><a href="effects/index.html">effects</a></td>
-	<td data-value="94.66" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 94%"></div><div class="cover-empty" style="width: 6%"></div></div>
+	<td data-value="98.62" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 98%"></div><div class="cover-empty" style="width: 2%"></div></div>
 	</td>
-	<td data-value="94.66" class="pct high">94.66%</td>
-	<td data-value="206" class="abs high">195/206</td>
-	<td data-value="94.11" class="pct high">94.11%</td>
-	<td data-value="34" class="abs high">32/34</td>
+	<td data-value="98.62" class="pct high">98.62%</td>
+	<td data-value="218" class="abs high">215/218</td>
+	<td data-value="92.5" class="pct high">92.5%</td>
+	<td data-value="40" class="abs high">37/40</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="3" class="abs high">3/3</td>
-	<td data-value="94.66" class="pct high">94.66%</td>
-	<td data-value="206" class="abs high">195/206</td>
+	<td data-value="98.62" class="pct high">98.62%</td>
+	<td data-value="218" class="abs high">215/218</td>
 	</tr>
 
 </tbody>
@@ -176,7 +176,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-18T05:48:24.579Z
+                at 2023-08-21T05:09:32.317Z
             </div>
         <script src="prettify.js"></script>
         <script>
diff --git a/coverage/lcov.info b/coverage/lcov.info
index e4fb0aa..9174360 100644
--- a/coverage/lcov.info
+++ b/coverage/lcov.info
@@ -876,7 +876,7 @@ SF:src\effects\useKey.ts
 FN:9,useKey
 FNF:1
 FNH:1
-FNDA:7,useKey
+FNDA:12,useKey
 DA:1,1
 DA:2,1
 DA:3,1
@@ -885,51 +885,69 @@ DA:5,1
 DA:6,1
 DA:7,1
 DA:8,1
-DA:9,7
-DA:10,7
-DA:11,7
-DA:12,7
-DA:13,0
-DA:14,0
-DA:15,0
-DA:16,0
-DA:17,0
-DA:18,0
-DA:19,0
-DA:20,0
-DA:21,0
-DA:22,7
-DA:23,7
-DA:24,7
-DA:25,14
-DA:26,7
-DA:27,7
-DA:28,7
-DA:29,7
-DA:30,7
-DA:31,7
-DA:32,7
-DA:33,7
-DA:34,7
-DA:35,7
-DA:36,7
-DA:37,7
-DA:38,7
-DA:39,7
-DA:40,7
-DA:41,7
-DA:42,7
-DA:43,7
-DA:44,7
-LF:44
-LH:35
-BRDA:9,0,0,7
-BRDA:24,1,0,14
-BRDA:25,2,0,7
-BRDA:32,3,0,7
-BRDA:33,4,0,7
-BRF:5
-BRH:5
+DA:9,12
+DA:10,12
+DA:11,12
+DA:12,12
+DA:13,12
+DA:14,12
+DA:15,4
+DA:16,4
+DA:17,2
+DA:18,2
+DA:19,4
+DA:20,1
+DA:21,1
+DA:22,4
+DA:23,1
+DA:24,1
+DA:25,4
+DA:26,0
+DA:27,4
+DA:28,4
+DA:29,12
+DA:30,12
+DA:31,12
+DA:32,12
+DA:33,12
+DA:34,12
+DA:35,19
+DA:36,12
+DA:37,12
+DA:38,12
+DA:39,12
+DA:40,19
+DA:41,12
+DA:42,12
+DA:43,12
+DA:44,12
+DA:45,12
+DA:46,12
+DA:47,12
+DA:48,12
+DA:49,12
+DA:50,12
+DA:51,12
+DA:52,12
+DA:53,12
+DA:54,12
+DA:55,12
+DA:56,12
+LF:56
+LH:55
+BRDA:9,0,0,12
+BRDA:14,1,0,4
+BRDA:16,2,0,2
+BRDA:17,3,0,1
+BRDA:19,4,0,1
+BRDA:22,5,0,1
+BRDA:25,6,0,0
+BRDA:34,7,0,19
+BRDA:35,8,0,12
+BRDA:45,9,0,12
+BRDA:46,10,0,12
+BRF:11
+BRH:10
 end_of_record
 TN:
 SF:src\effects\useStyle.ts
diff --git a/package.json b/package.json
index e29b39a..ef80321 100644
--- a/package.json
+++ b/package.json
@@ -76,18 +76,18 @@
     "@rollup/plugin-node-resolve": "^15.2.0",
     "@rollup/plugin-strip": "^3.0.2",
     "@rollup/plugin-terser": "^0.4.3",
-    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/jest-dom": "^6.0.1",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.3",
-    "@types/node": "^20.5.0",
+    "@types/node": "^20.5.1",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/testing-library__jest-dom": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",
     "@vitejs/plugin-react": "^4.0.4",
-    "@vitest/coverage-v8": "^0.34.1",
+    "@vitest/coverage-v8": "^0.34.2",
     "autoprefixer": "^10.4.15",
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
@@ -97,7 +97,7 @@
     "eslint": "8.47.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "2.28.0",
+    "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-n": "16.0.1",
     "eslint-plugin-promise": "6.1.1",
@@ -126,10 +126,10 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.35.0",
-    "sass": "^1.65.1",
+    "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
-    "stylelint": "^15.10.2",
+    "stylelint": "^15.10.3",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard": "^34.0.0",
@@ -138,7 +138,7 @@
     "ts-loader": "^9.4.4",
     "typescript": "^5.1.6",
     "vite": "^4.4.9",
-    "vitest": "^0.34.1",
+    "vitest": "^0.34.2",
     "webpack": "^5.88.2",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "^5.1.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 72a1446..e1431cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,8 +56,8 @@ devDependencies:
     specifier: ^0.4.3
     version: 0.4.3(rollup@3.28.0)
   '@testing-library/jest-dom':
-    specifier: ^6.0.0
-    version: 6.0.0(@types/jest@29.5.3)(jest@29.6.2)(vitest@0.34.1)
+    specifier: ^6.0.1
+    version: 6.0.1(@types/jest@29.5.3)(jest@29.6.2)(vitest@0.34.2)
   '@testing-library/react':
     specifier: ^14.0.0
     version: 14.0.0(react-dom@18.2.0)(react@18.2.0)
@@ -68,8 +68,8 @@ devDependencies:
     specifier: ^29.5.3
     version: 29.5.3
   '@types/node':
-    specifier: ^20.5.0
-    version: 20.5.0
+    specifier: ^20.5.1
+    version: 20.5.1
   '@types/react':
     specifier: ^18.2.20
     version: 18.2.20
@@ -78,7 +78,7 @@ devDependencies:
     version: 18.2.7
   '@types/testing-library__jest-dom':
     specifier: ^6.0.0
-    version: 6.0.0(@types/jest@29.5.3)(jest@29.6.2)(vitest@0.34.1)
+    version: 6.0.0(@types/jest@29.5.3)(jest@29.6.2)(vitest@0.34.2)
   '@typescript-eslint/eslint-plugin':
     specifier: ^6.4.0
     version: 6.4.0(@typescript-eslint/parser@6.4.0)(eslint@8.47.0)(typescript@5.1.6)
@@ -89,8 +89,8 @@ devDependencies:
     specifier: ^4.0.4
     version: 4.0.4(vite@4.4.9)
   '@vitest/coverage-v8':
-    specifier: ^0.34.1
-    version: 0.34.1(vitest@0.34.1)
+    specifier: ^0.34.2
+    version: 0.34.2(vitest@0.34.2)
   autoprefixer:
     specifier: ^10.4.15
     version: 10.4.15(postcss@8.4.28)
@@ -117,10 +117,10 @@ devDependencies:
     version: 9.0.0(eslint@8.47.0)
   eslint-config-standard:
     specifier: ^17.1.0
-    version: 17.1.0(eslint-plugin-import@2.28.0)(eslint-plugin-n@16.0.1)(eslint-plugin-promise@6.1.1)(eslint@8.47.0)
+    version: 17.1.0(eslint-plugin-import@2.28.1)(eslint-plugin-n@16.0.1)(eslint-plugin-promise@6.1.1)(eslint@8.47.0)
   eslint-plugin-import:
-    specifier: 2.28.0
-    version: 2.28.0(@typescript-eslint/parser@6.4.0)(eslint@8.47.0)
+    specifier: 2.28.1
+    version: 2.28.1(@typescript-eslint/parser@6.4.0)(eslint@8.47.0)
   eslint-plugin-jsx-a11y:
     specifier: ^6.7.1
     version: 6.7.1(eslint@8.47.0)
@@ -147,7 +147,7 @@ devDependencies:
     version: 8.0.3
   jest:
     specifier: ^29.6.2
-    version: 29.6.2(@types/node@20.5.0)
+    version: 29.6.2(@types/node@20.5.1)
   jsdom:
     specifier: ^22.1.0
     version: 22.1.0
@@ -206,29 +206,29 @@ devDependencies:
     specifier: ^0.35.0
     version: 0.35.0(rollup@3.28.0)(typescript@5.1.6)
   sass:
-    specifier: ^1.65.1
-    version: 1.65.1
+    specifier: ^1.66.1
+    version: 1.66.1
   sass-loader:
     specifier: ^13.3.2
-    version: 13.3.2(sass@1.65.1)(webpack@5.88.2)
+    version: 13.3.2(sass@1.66.1)(webpack@5.88.2)
   style-loader:
     specifier: ^3.3.3
     version: 3.3.3(webpack@5.88.2)
   stylelint:
-    specifier: ^15.10.2
-    version: 15.10.2
+    specifier: ^15.10.3
+    version: 15.10.3
   stylelint-config-prettier:
     specifier: ^9.0.5
-    version: 9.0.5(stylelint@15.10.2)
+    version: 9.0.5(stylelint@15.10.3)
   stylelint-config-prettier-scss:
     specifier: ^1.0.0
-    version: 1.0.0(stylelint@15.10.2)
+    version: 1.0.0(stylelint@15.10.3)
   stylelint-config-standard:
     specifier: ^34.0.0
-    version: 34.0.0(stylelint@15.10.2)
+    version: 34.0.0(stylelint@15.10.3)
   stylelint-config-standard-scss:
     specifier: ^10.0.0
-    version: 10.0.0(postcss@8.4.28)(stylelint@15.10.2)
+    version: 10.0.0(postcss@8.4.28)(stylelint@15.10.3)
   terser-webpack-plugin:
     specifier: ^5.3.9
     version: 5.3.9(webpack@5.88.2)
@@ -240,10 +240,10 @@ devDependencies:
     version: 5.1.6
   vite:
     specifier: ^4.4.9
-    version: 4.4.9(@types/node@20.5.0)(sass@1.65.1)
+    version: 4.4.9(@types/node@20.5.1)(sass@1.66.1)
   vitest:
-    specifier: ^0.34.1
-    version: 0.34.1(jsdom@22.1.0)(sass@1.65.1)
+    specifier: ^0.34.2
+    version: 0.34.2(jsdom@22.1.0)(sass@1.66.1)
   webpack:
     specifier: ^5.88.2
     version: 5.88.2(webpack-cli@5.1.4)
@@ -264,8 +264,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /@adobe/css-tools@4.3.0:
-    resolution: {integrity: sha512-+RNNcQvw2V1bmnBTPAtOLfW/9mhH2vC67+rUSi5T8EtEWt6lEnGNY2GuhZ1/YwbgikT1TkhvidCDmN5Q5YCo/w==}
+  /@adobe/css-tools@4.3.1:
+    resolution: {integrity: sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==}
     dev: true
 
   /@ampproject/remapping@2.2.1:
@@ -1731,15 +1731,6 @@ packages:
       '@csstools/css-tokenizer': 2.2.0
     dev: true
 
-  /@csstools/css-parser-algorithms@2.3.0(@csstools/css-tokenizer@2.1.1):
-    resolution: {integrity: sha512-dTKSIHHWc0zPvcS5cqGP+/TPFUJB0ekJ9dGKvMAFoNuBFhDPBt9OMGNZiIA5vTiNdGHHBeScYPXIGBMnVOahsA==}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      '@csstools/css-tokenizer': ^2.1.1
-    dependencies:
-      '@csstools/css-tokenizer': 2.1.1
-    dev: true
-
   /@csstools/css-parser-algorithms@2.3.1(@csstools/css-tokenizer@2.2.0):
     resolution: {integrity: sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==}
     engines: {node: ^14 || ^16 || >=18}
@@ -1749,27 +1740,11 @@ packages:
       '@csstools/css-tokenizer': 2.2.0
     dev: true
 
-  /@csstools/css-tokenizer@2.1.1:
-    resolution: {integrity: sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==}
-    engines: {node: ^14 || ^16 || >=18}
-    dev: true
-
   /@csstools/css-tokenizer@2.2.0:
     resolution: {integrity: sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==}
     engines: {node: ^14 || ^16 || >=18}
     dev: true
 
-  /@csstools/media-query-list-parser@2.1.2(@csstools/css-parser-algorithms@2.3.0)(@csstools/css-tokenizer@2.1.1):
-    resolution: {integrity: sha512-M8cFGGwl866o6++vIY7j1AKuq9v57cf+dGepScwCcbut9ypJNr4Cj+LLTWligYUZ0uyhEoJDKt5lvyBfh2L3ZQ==}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      '@csstools/css-parser-algorithms': ^2.3.0
-      '@csstools/css-tokenizer': ^2.1.1
-    dependencies:
-      '@csstools/css-parser-algorithms': 2.3.0(@csstools/css-tokenizer@2.1.1)
-      '@csstools/css-tokenizer': 2.1.1
-    dev: true
-
   /@csstools/media-query-list-parser@2.1.4(@csstools/css-parser-algorithms@2.3.1)(@csstools/css-tokenizer@2.2.0):
     resolution: {integrity: sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==}
     engines: {node: ^14 || ^16 || >=18}
@@ -2341,7 +2316,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       chalk: 4.1.2
       jest-message-util: 29.6.2
       jest-util: 29.6.2
@@ -2362,14 +2337,14 @@ packages:
       '@jest/test-result': 29.6.2
       '@jest/transform': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       ci-info: 3.8.0
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 29.5.0
-      jest-config: 29.6.2(@types/node@20.5.0)
+      jest-config: 29.6.2(@types/node@20.5.1)
       jest-haste-map: 29.6.2
       jest-message-util: 29.6.2
       jest-regex-util: 29.4.3
@@ -2397,7 +2372,7 @@ packages:
     dependencies:
       '@jest/fake-timers': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       jest-mock: 29.6.2
     dev: true
 
@@ -2431,7 +2406,7 @@ packages:
     dependencies:
       '@jest/types': 29.6.1
       '@sinonjs/fake-timers': 10.3.0
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       jest-message-util: 29.6.2
       jest-mock: 29.6.2
       jest-util: 29.6.2
@@ -2464,7 +2439,7 @@ packages:
       '@jest/transform': 29.6.2
       '@jest/types': 29.6.1
       '@jridgewell/trace-mapping': 0.3.19
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       chalk: 4.1.2
       collect-v8-coverage: 1.0.2
       exit: 0.1.2
@@ -2552,7 +2527,7 @@ packages:
       '@jest/schemas': 29.6.0
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       '@types/yargs': 17.0.24
       chalk: 4.1.2
     dev: true
@@ -2817,15 +2792,15 @@ packages:
       '@babel/code-frame': 7.22.10
       '@babel/runtime': 7.22.10
       '@types/aria-query': 5.0.1
-      aria-query: 5.1.3
+      aria-query: 5.3.0
       chalk: 4.1.2
       dom-accessibility-api: 0.5.16
       lz-string: 1.4.4
       pretty-format: 27.5.1
     dev: true
 
-  /@testing-library/jest-dom@6.0.0(@types/jest@29.5.3)(jest@29.6.2)(vitest@0.34.1):
-    resolution: {integrity: sha512-Ye2R3+/oM27jir8CzYPmuWdavTaKwNZcu0d22L9pO/vnOYE0wmrtpw79TQJa8H6gV8/i7yd+pLaqeLlA0rTMfg==}
+  /@testing-library/jest-dom@6.0.1(@types/jest@29.5.3)(jest@29.6.2)(vitest@0.34.2):
+    resolution: {integrity: sha512-0hx/AWrJp8EKr8LmC5jrV3Lx8TZySH7McU1Ix2czBPQnLd458CefSEGjZy7w8kaBRA6LhoPkGjoZ3yqSs338IQ==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
     peerDependencies:
       '@jest/globals': '>= 28'
@@ -2842,17 +2817,17 @@ packages:
       vitest:
         optional: true
     dependencies:
-      '@adobe/css-tools': 4.3.0
+      '@adobe/css-tools': 4.3.1
       '@babel/runtime': 7.22.10
       '@types/jest': 29.5.3
-      aria-query: 5.1.3
+      aria-query: 5.3.0
       chalk: 3.0.0
       css.escape: 1.5.1
       dom-accessibility-api: 0.5.16
-      jest: 29.6.2(@types/node@20.5.0)
+      jest: 29.6.2(@types/node@20.5.1)
       lodash: 4.17.21
       redent: 3.0.0
-      vitest: 0.34.1(jsdom@22.1.0)(sass@1.65.1)
+      vitest: 0.34.2(jsdom@22.1.0)(sass@1.66.1)
     dev: true
 
   /@testing-library/react-hooks@8.0.1(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0):
@@ -2972,20 +2947,20 @@ packages:
   /@types/fs-extra@8.1.2:
     resolution: {integrity: sha512-SvSrYXfWSc7R4eqnOzbQF4TZmfpNSM9FrSWLU3EUnWBuyZqNBOrv1B1JA3byUDPUl9z4Ab3jeZG2eDdySlgNMg==}
     dependencies:
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
     dev: true
 
   /@types/glob@7.2.0:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
     dev: true
 
   /@types/graceful-fs@4.1.6:
     resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==}
     dependencies:
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
     dev: true
 
   /@types/istanbul-lib-coverage@2.0.4:
@@ -3031,8 +3006,8 @@ packages:
     resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==}
     dev: true
 
-  /@types/node@20.5.0:
-    resolution: {integrity: sha512-Mgq7eCtoTjT89FqNoTzzXg2XvCi5VMhRV6+I2aYanc6kQCBImeNaAYRs/DyoVqk1YEUJK5gN9VO7HRIdz4Wo3Q==}
+  /@types/node@20.5.1:
+    resolution: {integrity: sha512-4tT2UrL5LBqDwoed9wZ6N3umC4Yhz3W3FloMmiiG4JwmUJWpie0c7lcnUNd4gtMKuDEO4wRVS8B6Xa0uMRsMKg==}
     dev: true
 
   /@types/normalize-package-data@2.4.1:
@@ -3077,11 +3052,11 @@ packages:
     resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==}
     dev: true
 
-  /@types/testing-library__jest-dom@6.0.0(@types/jest@29.5.3)(jest@29.6.2)(vitest@0.34.1):
+  /@types/testing-library__jest-dom@6.0.0(@types/jest@29.5.3)(jest@29.6.2)(vitest@0.34.2):
     resolution: {integrity: sha512-bnreXCgus6IIadyHNlN/oI5FfX4dWgvGhOPvpr7zzCYDGAPIfvyIoAozMBINmhmsVuqV0cncejF2y5KC7ScqOg==}
     deprecated: This is a stub types definition. @testing-library/jest-dom provides its own type definitions, so you do not need this installed.
     dependencies:
-      '@testing-library/jest-dom': 6.0.0(@types/jest@29.5.3)(jest@29.6.2)(vitest@0.34.1)
+      '@testing-library/jest-dom': 6.0.1(@types/jest@29.5.3)(jest@29.6.2)(vitest@0.34.2)
     transitivePeerDependencies:
       - '@jest/globals'
       - '@types/jest'
@@ -3240,13 +3215,13 @@ packages:
       '@babel/plugin-transform-react-jsx-self': 7.22.5(@babel/core@7.22.10)
       '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.22.10)
       react-refresh: 0.14.0
-      vite: 4.4.9(@types/node@20.5.0)(sass@1.65.1)
+      vite: 4.4.9(@types/node@20.5.1)(sass@1.66.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitest/coverage-v8@0.34.1(vitest@0.34.1):
-    resolution: {integrity: sha512-lRgUwjTMr8idXEbUPSNH4jjRZJXJCVY3BqUa+LDXyJVe3pldxYMn/r0HMqatKUGTp0Kyf1j5LfFoY6kRqRp7jw==}
+  /@vitest/coverage-v8@0.34.2(vitest@0.34.2):
+    resolution: {integrity: sha512-3VuDZPeGGd1zWtc0Tdj9cHSbFc8IQ0ffnWp9MlhItOkziN6HEf219meZ9cZheg/hJXrXb+Fi2bMu7GeCAfL4yA==}
     peerDependencies:
       vitest: '>=0.32.0 <1'
     dependencies:
@@ -3258,46 +3233,46 @@ packages:
       istanbul-reports: 3.1.6
       magic-string: 0.30.2
       picocolors: 1.0.0
-      std-env: 3.3.3
+      std-env: 3.4.0
       test-exclude: 6.0.0
       v8-to-istanbul: 9.1.0
-      vitest: 0.34.1(jsdom@22.1.0)(sass@1.65.1)
+      vitest: 0.34.2(jsdom@22.1.0)(sass@1.66.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitest/expect@0.34.1:
-    resolution: {integrity: sha512-q2CD8+XIsQ+tHwypnoCk8Mnv5e6afLFvinVGCq3/BOT4kQdVQmY6rRfyKkwcg635lbliLPqbunXZr+L1ssUWiQ==}
+  /@vitest/expect@0.34.2:
+    resolution: {integrity: sha512-EZm2dMNlLyIfDMha17QHSQcg2KjeAZaXd65fpPzXY5bvnfx10Lcaz3N55uEe8PhF+w4pw+hmrlHLLlRn9vkBJg==}
     dependencies:
-      '@vitest/spy': 0.34.1
-      '@vitest/utils': 0.34.1
+      '@vitest/spy': 0.34.2
+      '@vitest/utils': 0.34.2
       chai: 4.3.7
     dev: true
 
-  /@vitest/runner@0.34.1:
-    resolution: {integrity: sha512-YfQMpYzDsYB7yqgmlxZ06NI4LurHWfrH7Wy3Pvf/z/vwUSgq1zLAb1lWcItCzQG+NVox+VvzlKQrYEXb47645g==}
+  /@vitest/runner@0.34.2:
+    resolution: {integrity: sha512-8ydGPACVX5tK3Dl0SUwxfdg02h+togDNeQX3iXVFYgzF5odxvaou7HnquALFZkyVuYskoaHUOqOyOLpOEj5XTA==}
     dependencies:
-      '@vitest/utils': 0.34.1
+      '@vitest/utils': 0.34.2
       p-limit: 4.0.0
       pathe: 1.1.1
     dev: true
 
-  /@vitest/snapshot@0.34.1:
-    resolution: {integrity: sha512-0O9LfLU0114OqdF8lENlrLsnn024Tb1CsS9UwG0YMWY2oGTQfPtkW+B/7ieyv0X9R2Oijhi3caB1xgGgEgclSQ==}
+  /@vitest/snapshot@0.34.2:
+    resolution: {integrity: sha512-qhQ+xy3u4mwwLxltS4Pd4SR+XHv4EajiTPNY3jkIBLUApE6/ce72neJPSUQZ7bL3EBuKI+NhvzhGj3n5baRQUQ==}
     dependencies:
       magic-string: 0.30.2
       pathe: 1.1.1
       pretty-format: 29.6.2
     dev: true
 
-  /@vitest/spy@0.34.1:
-    resolution: {integrity: sha512-UT4WcI3EAPUNO8n6y9QoEqynGGEPmmRxC+cLzneFFXpmacivjHZsNbiKD88KUScv5DCHVDgdBsLD7O7s1enFcQ==}
+  /@vitest/spy@0.34.2:
+    resolution: {integrity: sha512-yd4L9OhfH6l0Av7iK3sPb3MykhtcRN5c5K5vm1nTbuN7gYn+yvUVVsyvzpHrjqS7EWqn9WsPJb7+0c3iuY60tA==}
     dependencies:
       tinyspy: 2.1.1
     dev: true
 
-  /@vitest/utils@0.34.1:
-    resolution: {integrity: sha512-/ql9dsFi4iuEbiNcjNHQWXBum7aL8pyhxvfnD9gNtbjR9fUKAjxhj4AA3yfLXg6gJpMGGecvtF8Au2G9y3q47Q==}
+  /@vitest/utils@0.34.2:
+    resolution: {integrity: sha512-Lzw+kAsTPubhoQDp1uVAOP6DhNia1GMDsI9jgB0yMn+/nDaPieYQ88lKqz/gGjSHL4zwOItvpehec9OY+rS73w==}
     dependencies:
       diff-sequences: 29.4.3
       loupe: 2.3.6
@@ -3662,6 +3637,12 @@ packages:
       deep-equal: 2.2.0
     dev: true
 
+  /aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+    dependencies:
+      dequal: 2.0.3
+    dev: true
+
   /array-buffer-byte-length@1.0.0:
     resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
     dependencies:
@@ -4005,7 +3986,7 @@ packages:
       acorn-jsx: 5.3.2(acorn@6.4.2)
       chalk: 2.4.2
       magic-string: 0.25.9
-      minimist: 1.2.7
+      minimist: 1.2.8
       regexpu-core: 4.5.4
     dev: true
 
@@ -4021,7 +4002,7 @@ packages:
   /builtins@5.0.1:
     resolution: {integrity: sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==}
     dependencies:
-      semver: 7.5.4
+      semver: 7.5.3
     dev: true
 
   /cac@6.7.14:
@@ -4764,6 +4745,11 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
+  /dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+    dev: true
+
   /detect-newline@3.1.0:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
@@ -5079,7 +5065,7 @@ packages:
       eslint: 8.47.0
     dev: true
 
-  /eslint-config-standard@17.1.0(eslint-plugin-import@2.28.0)(eslint-plugin-n@16.0.1)(eslint-plugin-promise@6.1.1)(eslint@8.47.0):
+  /eslint-config-standard@17.1.0(eslint-plugin-import@2.28.1)(eslint-plugin-n@16.0.1)(eslint-plugin-promise@6.1.1)(eslint@8.47.0):
     resolution: {integrity: sha512-IwHwmaBNtDK4zDHQukFDW5u/aTb8+meQWZvNFWkiGmbWjD6bqyuSSBxxXKkCftCUzc1zwCH2m/baCNDLGmuO5Q==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -5089,7 +5075,7 @@ packages:
       eslint-plugin-promise: ^6.0.0
     dependencies:
       eslint: 8.47.0
-      eslint-plugin-import: 2.28.0(@typescript-eslint/parser@6.4.0)(eslint@8.47.0)
+      eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.4.0)(eslint@8.47.0)
       eslint-plugin-n: 16.0.1(eslint@8.47.0)
       eslint-plugin-promise: 6.1.1(eslint@8.47.0)
     dev: true
@@ -5144,8 +5130,8 @@ packages:
       eslint: 8.47.0
     dev: true
 
-  /eslint-plugin-import@2.28.0(@typescript-eslint/parser@6.4.0)(eslint@8.47.0):
-    resolution: {integrity: sha512-B8s/n+ZluN7sxj9eUf7/pRFERX0r5bnFA2dCaLHy2ZeaQEAz0k+ZZkFWRFHJAqxfxQDx6KLv9LeIki7cFdwW+Q==}
+  /eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.4.0)(eslint@8.47.0):
+    resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==}
     engines: {node: '>=4'}
     peerDependencies:
       '@typescript-eslint/parser': '*'
@@ -5171,7 +5157,6 @@ packages:
       object.fromentries: 2.0.6
       object.groupby: 1.0.0
       object.values: 1.1.6
-      resolve: 1.22.4
       semver: 6.3.1
       tsconfig-paths: 3.14.2
     transitivePeerDependencies:
@@ -5460,7 +5445,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/expect-utils': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       jest-get-type: 29.4.3
       jest-matcher-utils: 29.6.1
       jest-message-util: 29.6.1
@@ -5472,7 +5457,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/expect-utils': 29.6.2
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       jest-get-type: 29.4.3
       jest-matcher-utils: 29.6.2
       jest-message-util: 29.6.2
@@ -5494,17 +5479,6 @@ packages:
       micromatch: 4.0.5
     dev: true
 
-  /fast-glob@3.3.0:
-    resolution: {integrity: sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==}
-    engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-    dev: true
-
   /fast-glob@3.3.1:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
@@ -5831,7 +5805,7 @@ packages:
       '@types/glob': 7.2.0
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.0
+      fast-glob: 3.3.1
       glob: 7.2.3
       ignore: 5.2.4
       merge2: 1.4.1
@@ -6484,7 +6458,7 @@ packages:
       '@jest/expect': 29.6.2
       '@jest/test-result': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       chalk: 4.1.2
       co: 4.6.0
       dedent: 1.5.1
@@ -6505,7 +6479,7 @@ packages:
       - supports-color
     dev: true
 
-  /jest-cli@29.6.2(@types/node@20.5.0):
+  /jest-cli@29.6.2(@types/node@20.5.1):
     resolution: {integrity: sha512-TT6O247v6dCEX2UGHGyflMpxhnrL0DNqP2fRTKYm3nJJpCTfXX3GCMQPGFjXDoj0i5/Blp3jriKXFgdfmbYB6Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -6522,7 +6496,7 @@ packages:
       exit: 0.1.2
       graceful-fs: 4.2.11
       import-local: 3.1.0
-      jest-config: 29.6.2(@types/node@20.5.0)
+      jest-config: 29.6.2(@types/node@20.5.1)
       jest-util: 29.6.2
       jest-validate: 29.6.2
       prompts: 2.4.2
@@ -6534,7 +6508,7 @@ packages:
       - ts-node
     dev: true
 
-  /jest-config@29.6.2(@types/node@20.5.0):
+  /jest-config@29.6.2(@types/node@20.5.1):
     resolution: {integrity: sha512-VxwFOC8gkiJbuodG9CPtMRjBUNZEHxwfQXmIudSTzFWxaci3Qub1ddTRbFNQlD/zUeaifLndh/eDccFX4wCMQw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -6549,7 +6523,7 @@ packages:
       '@babel/core': 7.22.10
       '@jest/test-sequencer': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       babel-jest: 29.6.2(@babel/core@7.22.10)
       chalk: 4.1.2
       ci-info: 3.8.0
@@ -6581,7 +6555,7 @@ packages:
       chalk: 4.1.2
       diff-sequences: 29.4.3
       jest-get-type: 29.4.3
-      pretty-format: 29.6.2
+      pretty-format: 29.6.1
     dev: true
 
   /jest-diff@29.6.2:
@@ -6619,7 +6593,7 @@ packages:
       '@jest/environment': 29.6.2
       '@jest/fake-timers': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       jest-mock: 29.6.2
       jest-util: 29.6.2
     dev: true
@@ -6635,7 +6609,7 @@ packages:
     dependencies:
       '@jest/types': 29.6.1
       '@types/graceful-fs': 4.1.6
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -6663,7 +6637,7 @@ packages:
       chalk: 4.1.2
       jest-diff: 29.6.1
       jest-get-type: 29.4.3
-      pretty-format: 29.6.2
+      pretty-format: 29.6.1
     dev: true
 
   /jest-matcher-utils@29.6.2:
@@ -6686,7 +6660,7 @@ packages:
       chalk: 4.1.2
       graceful-fs: 4.2.11
       micromatch: 4.0.5
-      pretty-format: 29.6.2
+      pretty-format: 29.6.1
       slash: 3.0.0
       stack-utils: 2.0.6
     dev: true
@@ -6711,7 +6685,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       jest-util: 29.6.2
     dev: true
 
@@ -6766,7 +6740,7 @@ packages:
       '@jest/test-result': 29.6.2
       '@jest/transform': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       chalk: 4.1.2
       emittery: 0.13.1
       graceful-fs: 4.2.11
@@ -6797,7 +6771,7 @@ packages:
       '@jest/test-result': 29.6.2
       '@jest/transform': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       chalk: 4.1.2
       cjs-module-lexer: 1.2.3
       collect-v8-coverage: 1.0.2
@@ -6849,7 +6823,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       chalk: 4.1.2
       ci-info: 3.8.0
       graceful-fs: 4.2.11
@@ -6861,7 +6835,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       chalk: 4.1.2
       ci-info: 3.8.0
       graceful-fs: 4.2.11
@@ -6886,7 +6860,7 @@ packages:
     dependencies:
       '@jest/test-result': 29.6.2
       '@jest/types': 29.6.1
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.13.1
@@ -6898,7 +6872,7 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true
@@ -6907,13 +6881,13 @@ packages:
     resolution: {integrity: sha512-l3ccBOabTdkng8I/ORCkADz4eSMKejTYv1vB/Z83UiubqhC1oQ5Li6dWCyqOIvSifGjUBxuvxvlm6KGK2DtuAQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       jest-util: 29.6.2
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: true
 
-  /jest@29.6.2(@types/node@20.5.0):
+  /jest@29.6.2(@types/node@20.5.1):
     resolution: {integrity: sha512-8eQg2mqFbaP7CwfsTpCxQ+sHzw1WuNWL5UUvjnWP4hx2riGz9fPSzYOaU5q8/GqWn1TfgZIVTqYJygbGbWAANg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -6926,7 +6900,7 @@ packages:
       '@jest/core': 29.6.2
       '@jest/types': 29.6.1
       import-local: 3.1.0
-      jest-cli: 29.6.2(@types/node@20.5.0)
+      jest-cli: 29.6.2(@types/node@20.5.1)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -7081,8 +7055,8 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /known-css-properties@0.27.0:
-    resolution: {integrity: sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==}
+  /known-css-properties@0.28.0:
+    resolution: {integrity: sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==}
     dev: true
 
   /language-subtag-registry@0.3.22:
@@ -7426,10 +7400,6 @@ packages:
       kind-of: 6.0.3
     dev: true
 
-  /minimist@1.2.7:
-    resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
-    dev: true
-
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: true
@@ -8408,7 +8378,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       postcss: 8.4.28
-      postcss-selector-parser: 6.0.11
+      postcss-selector-parser: 6.0.13
     dev: true
 
   /postcss-modules-values@4.0.0(postcss@8.4.28):
@@ -8862,14 +8832,6 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-selector-parser@6.0.11:
-    resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==}
-    engines: {node: '>=4'}
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-    dev: true
-
   /postcss-selector-parser@6.0.13:
     resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
     engines: {node: '>=4'}
@@ -9466,7 +9428,7 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
-  /sass-loader@13.3.2(sass@1.65.1)(webpack@5.88.2):
+  /sass-loader@13.3.2(sass@1.66.1)(webpack@5.88.2):
     resolution: {integrity: sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==}
     engines: {node: '>= 14.15.0'}
     peerDependencies:
@@ -9486,12 +9448,12 @@ packages:
         optional: true
     dependencies:
       neo-async: 2.6.2
-      sass: 1.65.1
+      sass: 1.66.1
       webpack: 5.88.2(webpack-cli@5.1.4)
     dev: true
 
-  /sass@1.65.1:
-    resolution: {integrity: sha512-9DINwtHmA41SEd36eVPQ9BJKpn7eKDQmUHmpI0y5Zv2Rcorrh0zS+cFrt050hdNbmmCNKTW3hV5mWfuegNRsEA==}
+  /sass@1.66.1:
+    resolution: {integrity: sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
@@ -9746,8 +9708,8 @@ packages:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
     dev: true
 
-  /std-env@3.3.3:
-    resolution: {integrity: sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==}
+  /std-env@3.4.0:
+    resolution: {integrity: sha512-YqHeQIIQ8r1VtUZOTOyjsAXAsjr369SplZ5rlQaiJTBsvodvPSCME7vuz8pnQltbQ0Cw0lyFo5Q8uyNwYQ58Xw==}
     dev: true
 
   /stop-iteration-iterator@1.0.0:
@@ -9928,27 +9890,27 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /stylelint-config-prettier-scss@1.0.0(stylelint@15.10.2):
+  /stylelint-config-prettier-scss@1.0.0(stylelint@15.10.3):
     resolution: {integrity: sha512-Gr2qLiyvJGKeDk0E/+awNTrZB/UtNVPLqCDOr07na/sLekZwm26Br6yYIeBYz3ulsEcQgs5j+2IIMXCC+wsaQA==}
     engines: {node: 14.* || 16.* || >= 18}
     hasBin: true
     peerDependencies:
       stylelint: '>=15.0.0'
     dependencies:
-      stylelint: 15.10.2
+      stylelint: 15.10.3
     dev: true
 
-  /stylelint-config-prettier@9.0.5(stylelint@15.10.2):
+  /stylelint-config-prettier@9.0.5(stylelint@15.10.3):
     resolution: {integrity: sha512-U44lELgLZhbAD/xy/vncZ2Pq8sh2TnpiPvo38Ifg9+zeioR+LAkHu0i6YORIOxFafZoVg0xqQwex6e6F25S5XA==}
     engines: {node: '>= 12'}
     hasBin: true
     peerDependencies:
       stylelint: '>= 11.x < 15'
     dependencies:
-      stylelint: 15.10.2
+      stylelint: 15.10.3
     dev: true
 
-  /stylelint-config-recommended-scss@12.0.0(postcss@8.4.28)(stylelint@15.10.2):
+  /stylelint-config-recommended-scss@12.0.0(postcss@8.4.28)(stylelint@15.10.3):
     resolution: {integrity: sha512-5Bb2mlGy6WLa30oNeKpZvavv2lowJUsUJO25+OA68GFTemlwd1zbFsL7q0bReKipOSU3sG47hKneZ6Nd+ctrFA==}
     peerDependencies:
       postcss: ^8.3.3
@@ -9959,29 +9921,29 @@ packages:
     dependencies:
       postcss: 8.4.28
       postcss-scss: 4.0.7(postcss@8.4.28)
-      stylelint: 15.10.2
-      stylelint-config-recommended: 12.0.0(stylelint@15.10.2)
-      stylelint-scss: 5.0.1(stylelint@15.10.2)
+      stylelint: 15.10.3
+      stylelint-config-recommended: 12.0.0(stylelint@15.10.3)
+      stylelint-scss: 5.0.1(stylelint@15.10.3)
     dev: true
 
-  /stylelint-config-recommended@12.0.0(stylelint@15.10.2):
+  /stylelint-config-recommended@12.0.0(stylelint@15.10.3):
     resolution: {integrity: sha512-x6x8QNARrGO2sG6iURkzqL+Dp+4bJorPMMRNPScdvaUK8PsynriOcMW7AFDKqkWAS5wbue/u8fUT/4ynzcmqdQ==}
     peerDependencies:
       stylelint: ^15.5.0
     dependencies:
-      stylelint: 15.10.2
+      stylelint: 15.10.3
     dev: true
 
-  /stylelint-config-recommended@13.0.0(stylelint@15.10.2):
+  /stylelint-config-recommended@13.0.0(stylelint@15.10.3):
     resolution: {integrity: sha512-EH+yRj6h3GAe/fRiyaoO2F9l9Tgg50AOFhaszyfov9v6ayXJ1IkSHwTxd7lB48FmOeSGDPLjatjO11fJpmarkQ==}
     engines: {node: ^14.13.1 || >=16.0.0}
     peerDependencies:
       stylelint: ^15.10.0
     dependencies:
-      stylelint: 15.10.2
+      stylelint: 15.10.3
     dev: true
 
-  /stylelint-config-standard-scss@10.0.0(postcss@8.4.28)(stylelint@15.10.2):
+  /stylelint-config-standard-scss@10.0.0(postcss@8.4.28)(stylelint@15.10.3):
     resolution: {integrity: sha512-bChBEo1p3xUVWh/wenJI+josoMk21f2yuLDGzGjmKYcALfl2u3DFltY+n4UHswYiXghqXaA8mRh+bFy/q1hQlg==}
     peerDependencies:
       postcss: ^8.3.3
@@ -9991,31 +9953,31 @@ packages:
         optional: true
     dependencies:
       postcss: 8.4.28
-      stylelint: 15.10.2
-      stylelint-config-recommended-scss: 12.0.0(postcss@8.4.28)(stylelint@15.10.2)
-      stylelint-config-standard: 33.0.0(stylelint@15.10.2)
+      stylelint: 15.10.3
+      stylelint-config-recommended-scss: 12.0.0(postcss@8.4.28)(stylelint@15.10.3)
+      stylelint-config-standard: 33.0.0(stylelint@15.10.3)
     dev: true
 
-  /stylelint-config-standard@33.0.0(stylelint@15.10.2):
+  /stylelint-config-standard@33.0.0(stylelint@15.10.3):
     resolution: {integrity: sha512-eyxnLWoXImUn77+ODIuW9qXBDNM+ALN68L3wT1lN2oNspZ7D9NVGlNHb2QCUn4xDug6VZLsh0tF8NyoYzkgTzg==}
     peerDependencies:
       stylelint: ^15.5.0
     dependencies:
-      stylelint: 15.10.2
-      stylelint-config-recommended: 12.0.0(stylelint@15.10.2)
+      stylelint: 15.10.3
+      stylelint-config-recommended: 12.0.0(stylelint@15.10.3)
     dev: true
 
-  /stylelint-config-standard@34.0.0(stylelint@15.10.2):
+  /stylelint-config-standard@34.0.0(stylelint@15.10.3):
     resolution: {integrity: sha512-u0VSZnVyW9VSryBG2LSO+OQTjN7zF9XJaAJRX/4EwkmU0R2jYwmBSN10acqZisDitS0CLiEiGjX7+Hrq8TAhfQ==}
     engines: {node: ^14.13.1 || >=16.0.0}
     peerDependencies:
       stylelint: ^15.10.0
     dependencies:
-      stylelint: 15.10.2
-      stylelint-config-recommended: 13.0.0(stylelint@15.10.2)
+      stylelint: 15.10.3
+      stylelint-config-recommended: 13.0.0(stylelint@15.10.3)
     dev: true
 
-  /stylelint-scss@5.0.1(stylelint@15.10.2):
+  /stylelint-scss@5.0.1(stylelint@15.10.3):
     resolution: {integrity: sha512-n87iCRZrr2J7//I/QFsDXxFLnHKw633U4qvWZ+mOW6KDAp/HLj06H+6+f9zOuTYy+MdGdTuCSDROCpQIhw5fvQ==}
     peerDependencies:
       stylelint: ^14.5.1 || ^15.0.0
@@ -10024,17 +9986,17 @@ packages:
       postcss-resolve-nested-selector: 0.1.1
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
-      stylelint: 15.10.2
+      stylelint: 15.10.3
     dev: true
 
-  /stylelint@15.10.2:
-    resolution: {integrity: sha512-UxqSb3hB74g4DTO45QhUHkJMjKKU//lNUAOWyvPBVPZbCknJ5HjOWWZo+UDuhHa9FLeVdHBZXxu43eXkjyIPWg==}
+  /stylelint@15.10.3:
+    resolution: {integrity: sha512-aBQMMxYvFzJJwkmg+BUUg3YfPyeuCuKo2f+LOw7yYbU8AZMblibwzp9OV4srHVeQldxvSFdz0/Xu8blq2AesiA==}
     engines: {node: ^14.13.1 || >=16.0.0}
     hasBin: true
     dependencies:
-      '@csstools/css-parser-algorithms': 2.3.0(@csstools/css-tokenizer@2.1.1)
-      '@csstools/css-tokenizer': 2.1.1
-      '@csstools/media-query-list-parser': 2.1.2(@csstools/css-parser-algorithms@2.3.0)(@csstools/css-tokenizer@2.1.1)
+      '@csstools/css-parser-algorithms': 2.3.1(@csstools/css-tokenizer@2.2.0)
+      '@csstools/css-tokenizer': 2.2.0
+      '@csstools/media-query-list-parser': 2.1.4(@csstools/css-parser-algorithms@2.3.1)(@csstools/css-tokenizer@2.2.0)
       '@csstools/selector-specificity': 3.0.0(postcss-selector-parser@6.0.13)
       balanced-match: 2.0.0
       colord: 2.9.3
@@ -10042,7 +10004,7 @@ packages:
       css-functions-list: 3.2.0
       css-tree: 2.3.1
       debug: 4.3.4
-      fast-glob: 3.3.0
+      fast-glob: 3.3.1
       fastest-levenshtein: 1.0.16
       file-entry-cache: 6.0.1
       global-modules: 2.0.0
@@ -10053,7 +10015,7 @@ packages:
       import-lazy: 4.0.0
       imurmurhash: 0.1.4
       is-plain-object: 5.0.0
-      known-css-properties: 0.27.0
+      known-css-properties: 0.28.0
       mathml-tag-names: 2.1.3
       meow: 10.1.5
       micromatch: 4.0.5
@@ -10518,8 +10480,8 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite-node@0.34.1(@types/node@20.5.0)(sass@1.65.1):
-    resolution: {integrity: sha512-odAZAL9xFMuAg8aWd7nSPT+hU8u2r9gU3LRm9QKjxBEF2rRdWpMuqkrkjvyVQEdNFiBctqr2Gg4uJYizm5Le6w==}
+  /vite-node@0.34.2(@types/node@20.5.1)(sass@1.66.1):
+    resolution: {integrity: sha512-JtW249Zm3FB+F7pQfH56uWSdlltCo1IOkZW5oHBzeQo0iX4jtC7o1t9aILMGd9kVekXBP2lfJBEQt9rBh07ebA==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     dependencies:
@@ -10528,7 +10490,7 @@ packages:
       mlly: 1.4.0
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.4.9(@types/node@20.5.0)(sass@1.65.1)
+      vite: 4.4.9(@types/node@20.5.1)(sass@1.66.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -10540,7 +10502,7 @@ packages:
       - terser
     dev: true
 
-  /vite@4.4.9(@types/node@20.5.0)(sass@1.65.1):
+  /vite@4.4.9(@types/node@20.5.1)(sass@1.66.1):
     resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -10568,17 +10530,17 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.5.0
+      '@types/node': 20.5.1
       esbuild: 0.18.20
       postcss: 8.4.28
       rollup: 3.28.0
-      sass: 1.65.1
+      sass: 1.66.1
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vitest@0.34.1(jsdom@22.1.0)(sass@1.65.1):
-    resolution: {integrity: sha512-G1PzuBEq9A75XSU88yO5G4vPT20UovbC/2osB2KEuV/FisSIIsw7m5y2xMdB7RsAGHAfg2lPmp2qKr3KWliVlQ==}
+  /vitest@0.34.2(jsdom@22.1.0)(sass@1.66.1):
+    resolution: {integrity: sha512-WgaIvBbjsSYMq/oiMlXUI7KflELmzM43BEvkdC/8b5CAod4ryAiY2z8uR6Crbi5Pjnu5oOmhKa9sy7uk6paBxQ==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     peerDependencies:
@@ -10610,12 +10572,12 @@ packages:
     dependencies:
       '@types/chai': 4.3.5
       '@types/chai-subset': 1.3.3
-      '@types/node': 20.5.0
-      '@vitest/expect': 0.34.1
-      '@vitest/runner': 0.34.1
-      '@vitest/snapshot': 0.34.1
-      '@vitest/spy': 0.34.1
-      '@vitest/utils': 0.34.1
+      '@types/node': 20.5.1
+      '@vitest/expect': 0.34.2
+      '@vitest/runner': 0.34.2
+      '@vitest/snapshot': 0.34.2
+      '@vitest/spy': 0.34.2
+      '@vitest/utils': 0.34.2
       acorn: 8.10.0
       acorn-walk: 8.2.0
       cac: 6.7.14
@@ -10626,12 +10588,12 @@ packages:
       magic-string: 0.30.2
       pathe: 1.1.1
       picocolors: 1.0.0
-      std-env: 3.3.3
+      std-env: 3.4.0
       strip-literal: 1.3.0
       tinybench: 2.5.0
       tinypool: 0.7.0
-      vite: 4.4.9(@types/node@20.5.0)(sass@1.65.1)
-      vite-node: 0.34.1(@types/node@20.5.0)(sass@1.65.1)
+      vite: 4.4.9(@types/node@20.5.1)(sass@1.66.1)
+      vite-node: 0.34.2(@types/node@20.5.1)(sass@1.66.1)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
diff --git a/src/effects/__tests__/useKey.test.ts b/src/effects/__tests__/useKey.test.ts
new file mode 100644
index 0000000..7c1b134
--- /dev/null
+++ b/src/effects/__tests__/useKey.test.ts
@@ -0,0 +1,55 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import useKey from "../useKey"; // Adjust the path to your hook
+import { describe, expect, it, vi } from "vitest";
+
+describe("useKey hook", () => {
+  it("should handle Escape key press", () => {
+    const escCB = vi.fn();
+    const { result } = renderHook(() => useKey({ escCB }));
+    const div = document.createElement("div");
+    act(() => result.current.onRef(div));
+    const event = new KeyboardEvent("keyup", { key: "Escape" });
+    div.dispatchEvent(event);
+    expect(escCB).toHaveBeenCalled();
+  });
+
+  it("should handle ArrowRight key press", () => {
+    const rightCB = vi.fn();
+    const { result } = renderHook(() => useKey({ rightCB }));
+    const div = document.createElement("div");
+    act(() => result.current.onRef(div));
+    const event = new KeyboardEvent("keyup", { key: "ArrowRight" });
+    div.dispatchEvent(event);
+    expect(rightCB).toHaveBeenCalled();
+  });
+
+  it("should handle ArrowLeft key press", () => {
+    const leftCB = vi.fn();
+    const { result } = renderHook(() => useKey({ leftCB }));
+    const div = document.createElement("div");
+    act(() => result.current.onRef(div));
+    const event = new KeyboardEvent("keyup", { key: "ArrowLeft" });
+    div.dispatchEvent(event);
+    expect(leftCB).toHaveBeenCalled();
+  });
+
+  it("should not call callbacks if not provided", () => {
+    const { result } = renderHook(() => useKey({}));
+    const div = document.createElement("div");
+    act(() => result.current.onRef(div));
+    const event = new KeyboardEvent("keyup", { key: "Escape" });
+    div.dispatchEvent(event);
+    // No error should occur, and no callbacks should be called
+  });
+
+  it("should clean up event listener on unmount", () => {
+    const escCB = vi.fn();
+    const { result, unmount } = renderHook(() => useKey({ escCB }));
+    const div = document.createElement("div");
+    act(() => result.current.onRef(div));
+    unmount();
+    const event = new KeyboardEvent("keyup", { key: "Escape" });
+    div.dispatchEvent(event);
+    expect(escCB).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/effects/useKey.ts b/src/effects/useKey.ts
index 81bd1b8..dc51219 100644
--- a/src/effects/useKey.ts
+++ b/src/effects/useKey.ts
@@ -1,42 +1,54 @@
 import { useCallback, useEffect, useRef } from "react";
 
-type options = {
+type Options = {
   escCB?: () => void;
   leftCB?: () => void;
   rightCB?: () => void;
 };
 
-export default function useKey({ escCB, leftCB, rightCB }: options) {
+export default function useKey({ escCB, leftCB, rightCB }: Options) {
   const ref = useRef<HTMLDivElement | null>(null);
 
-  const handleKeyUp = useCallback((ev: KeyboardEvent) => {
-    const { key } = ev;
-
-    if (key === "Escape") {
-      escCB?.();
-    } else if (key === "ArrowRight") {
-      rightCB?.();
-    } else if (key === "ArrowLeft") {
-      leftCB?.();
-    }
-  }, []);
+  // Handler to manage keyup events
+  const handleKeyUp = useCallback(
+    (ev: KeyboardEvent) => {
+      switch (ev.key) {
+        case "Escape":
+          escCB?.();
+          break;
+        case "ArrowRight":
+          rightCB?.();
+          break;
+        case "ArrowLeft":
+          leftCB?.();
+          break;
+        default:
+          break; // Handle any other keys if necessary
+      }
+    },
+    [escCB, leftCB, rightCB]
+  ); // Dependencies added to ensure the callbacks are updated
 
-  const onRef = useCallback((node: HTMLDivElement) => {
-    if (node) {
-      ref.current = node;
-      node.focus();
-      node.addEventListener("keyup", handleKeyUp);
-    }
-  }, []);
+  // Callback to set ref and add the keyup event listener
+  const onRef = useCallback(
+    (node: HTMLDivElement) => {
+      if (node) {
+        ref.current = node;
+        node.focus();
+        node.addEventListener("keyup", handleKeyUp);
+      }
+    },
+    [handleKeyUp]
+  ); // Dependency added to ensure correct reference to handleKeyUp
 
+  // Cleanup function to remove the keyup event listener when component unmounts
   useEffect(() => {
     return () => {
       if (ref.current) {
-        const ele = ref.current as HTMLElement;
-        ele.removeEventListener("keyup", handleKeyUp);
+        ref.current.removeEventListener("keyup", handleKeyUp);
       }
     };
-  }, []);
+  }, [handleKeyUp]); // Dependency added to ensure correct reference to handleKeyUp
 
   return {
     onRef,
diff --git a/src/effects/useResize.ts b/src/effects/useResize.ts
index 981c8c0..0f21698 100644
--- a/src/effects/useResize.ts
+++ b/src/effects/useResize.ts
@@ -1,3 +1,13 @@
+/**
+ * useResize
+ * @property {HTMLElement} target - The target element to be resized.
+ * @property {() => void} onResizeEnded - Function to handle resize end.
+ * @property {() => void} onResizeStarted - Function to handle resize start.
+ * @property {number} minWidth - Minimum width allowed for resizing.
+ * @property {number} minHeight - Minimum height allowed for resizing.
+ * @property {HTMLElement} dragRef - The element used to initiate drag.
+ */
+
 import { useCallback, useEffect, useRef } from "react";
 import { Dimension, ResizeOptions } from "./models";
 
@@ -9,19 +19,29 @@ export default function useResize({
   minHeight = 300,
   dragRef,
 }: ResizeOptions) {
+  // Store whether pointer is clicked or not
   const clicked = useRef(false);
+
+  // Reference to the target element to be resized
   const ref = useRef<HTMLElement | null>(null);
+
+  // Reference to the current bounding rectangle of the target element
   const rect = useRef<DOMRect>();
 
+  // Store the current dimensions during resizing
   const activeDimension = useRef<Dimension>({ height: 0, width: 0 });
+
+  // Store whether the resizing has started
   const resizeStarted = useRef<boolean>(false);
 
+  // Callback for when pointer is pressed down
   const pointerDown = useCallback((ev: MouseEvent) => {
     ev.preventDefault();
     ev.stopPropagation();
     clicked.current = true;
   }, []);
 
+  // Callback for when pointer is released
   const pointerUp = useCallback((ev: MouseEvent) => {
     ev.preventDefault();
     clicked.current = false;
@@ -33,20 +53,24 @@ export default function useResize({
   }, []);
 
   useEffect(() => {
+    // Set the target element and its initial bounding rectangle
     if (target) {
       ref.current = target;
       rect.current = target.getBoundingClientRect();
 
+      // Attach the pointerup event to the document
       document.addEventListener("pointerup", pointerUp);
     }
   }, [target]);
 
   useEffect(() => {
+    // Attach the pointerdown event to the specified drag reference
     if (dragRef) {
       dragRef.addEventListener("pointerdown", pointerDown);
     }
   }, [dragRef]);
 
+  // Callback for when the pointer moves
   const handlePointerMove = useCallback((ev: PointerEvent) => {
     ev.preventDefault();
     ev.stopPropagation();
@@ -83,8 +107,10 @@ export default function useResize({
   }, []);
 
   useEffect(() => {
+    // Attach the pointermove event to the window during resizing
     window.addEventListener("pointermove", handlePointerMove);
 
+    // Detach events when unmounting or changing target
     return () => {
       window.removeEventListener("pointermove", handlePointerMove);