feat: extract the provider for the tooltip

package-lock.json

@@ -14,7 +14,7 @@
         "@radix-ui/react-checkbox": "1.1.4",
         "@radix-ui/react-dropdown-menu": "2.0.6",
         "@radix-ui/react-slider": "1.2.3",
-        "@radix-ui/react-tooltip": "1.0.7",
+        "@radix-ui/react-tooltip": "1.2.8",
         "@types/howler": "2.2.10",
         "@types/react": "^18.2.25",
         "@types/react-dom": "^18.2.10",
@@ -25,7 +25,7 @@
         "framer-motion": "10.16.4",
         "howler": "2.2.4",
         "js-confetti": "0.12.0",
-        "motion": "12.23.12",
+        "motion": "12.23.24",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hotkeys-hook": "3.2.1",
@@ -5124,29 +5124,29 @@
       }
     },
     "node_modules/@radix-ui/react-tooltip": {
-      "version": "1.0.7",
+      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
-      "integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.1.3",
-        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.2.8",
-        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.1.5",
-        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.2.3",
-        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
-        "@radix-ui/react-visually-hidden": "1.0.3"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -5157,6 +5157,340 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -5192,6 +5526,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-escape-keydown": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
@@ -5279,18 +5646,18 @@
       }
     },
     "node_modules/@radix-ui/react-visually-hidden": {
-      "version": "1.0.3",
+      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
-      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "2.1.3"
-        "@radix-ui/react-primitive": "1.0.3"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -5301,6 +5668,62 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/rect": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
@@ -20734,12 +21157,12 @@
       }
     },
     "node_modules/motion": {
-      "version": "12.23.12",
+      "version": "12.23.24",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.12.tgz",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.24.tgz",
-      "integrity": "sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==",
+      "integrity": "sha512-Rc5E7oe2YZ72N//S3QXGzbnXgqNrTESv8KKxABR20q2FLch9gHLo0JLyYo2hZ238bZ9Gx6cWhj9VO0IgwbMjCw==",
       "license": "MIT",
       "dependencies": {
-        "framer-motion": "^12.23.12",
+        "framer-motion": "^12.23.24",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -20760,9 +21183,9 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.23.12",
+      "version": "12.23.23",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
-      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
       "license": "MIT",
       "dependencies": {
         "motion-utils": "^12.23.6"
@@ -20775,12 +21198,12 @@
       "license": "MIT"
     },
     "node_modules/motion/node_modules/framer-motion": {
-      "version": "12.23.12",
+      "version": "12.23.24",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
-      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.23.12",
+        "motion-dom": "^12.23.23",
         "motion-utils": "^12.23.6",
         "tslib": "^2.4.0"
       },

package.json

@@ -30,7 +30,7 @@
     "@radix-ui/react-checkbox": "1.1.4",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-slider": "1.2.3",
-    "@radix-ui/react-tooltip": "1.0.7",
+    "@radix-ui/react-tooltip": "1.2.8",
     "@types/howler": "2.2.10",
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.10",
@@ -41,7 +41,7 @@
     "framer-motion": "10.16.4",
     "howler": "2.2.4",
     "js-confetti": "0.12.0",
-    "motion": "12.23.12",
+    "motion": "12.23.24",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "3.2.1",

src/components/buttons/unselect/unselect.tsx

@@ -41,30 +41,31 @@ export function UnselectButton() {
             initial="hidden"
             variants={variants}
           >
-            <Tooltip
+            <Tooltip.Provider delayDuration={0}>
-              showDelay={0}
+              <Tooltip
-              content={
+                content={
-                hasHistory
-                  ? 'Restore unselected sounds.'
-                  : 'Unselect all sounds.'
-              }
-            >
-              <button
-                disabled={noSelected && !hasHistory}
-                aria-label={
                   hasHistory
-                    ? 'Restore Unselected Sounds'
+                    ? 'Restore unselected sounds.'
-                    : 'Unselect All Sounds'
+                    : 'Unselect all sounds.'
                 }
-                className={cn(
-                  styles.unselectButton,
-                  noSelected && !hasHistory && styles.disabled,
-                )}
-                onClick={handleToggle}
               >
-                {hasHistory ? <BiUndo /> : <BiTrash />}
+                <button
-              </button>
+                  disabled={noSelected && !hasHistory}
-            </Tooltip>
+                  aria-label={
+                    hasHistory
+                      ? 'Restore Unselected Sounds'
+                      : 'Unselect All Sounds'
+                  }
+                  className={cn(
+                    styles.unselectButton,
+                    noSelected && !hasHistory && styles.disabled,
+                  )}
+                  onClick={handleToggle}
+                >
+                  {hasHistory ? <BiUndo /> : <BiTrash />}
+                </button>
+              </Tooltip>
+            </Tooltip.Provider>
           </motion.div>
         )}
       </AnimatePresence>

src/components/shuffle/shuffle.tsx

@@ -9,14 +9,16 @@ export function Shuffle() {
   const shuffle = useSoundStore(state => state.shuffle);
 
   return (
-    <Tooltip content="Shuffle sounds" showDelay={0}>
+    <Tooltip.Provider delayDuration={0}>
-      <button
+      <Tooltip content="Shuffle sounds">
-        aria-label="Shuffle sounds"
+        <button
-        className={styles.button}
+          aria-label="Shuffle sounds"
-        onClick={shuffle}
+          className={styles.button}
-      >
+          onClick={shuffle}
-        <BiShuffle />
+        >
-      </button>
+          <BiShuffle />
-    </Tooltip>
+        </button>
+      </Tooltip>
+    </Tooltip.Provider>
   );
 }

src/components/toolbox/generics/button/button.tsx

@@ -20,14 +20,16 @@ export function Button({
   tooltip,
 }: ButtonProps) {
   return (
-    <Tooltip content={tooltip} placement="bottom" showDelay={0}>
+    <Tooltip.Provider delayDuration={0}>
-      <button
+      <Tooltip content={tooltip} placement="bottom">
-        className={cn(styles.button, smallIcon && styles.smallIcon)}
+        <button
-        disabled={disabled}
+          className={cn(styles.button, smallIcon && styles.smallIcon)}
-        onClick={onClick}
+          disabled={disabled}
-      >
+          onClick={onClick}
-        {icon}
+        >
-      </button>
+          {icon}
-    </Tooltip>
+        </button>
+      </Tooltip>
+    </Tooltip.Provider>
   );
 }

src/components/toolbox/notepad/button/button.tsx

@@ -20,7 +20,7 @@ export function Button({
   tooltip,
 }: ButtonProps) {
   return (
-    <Tooltip content={tooltip} placement="bottom" showDelay={0}>
+    <Tooltip content={tooltip} placement="bottom">
       <button
         className={cn(
           styles.button,

src/components/toolbox/notepad/notepad.tsx

@@ -12,6 +12,7 @@ import { useCopy } from '@/hooks/use-copy';
 import { download } from '@/helpers/download';
 
 import styles from './notepad.module.css';
+import { Tooltip } from '@/components/tooltip';
 
 interface NotepadProps {
   onClose: () => void;
@@ -50,23 +51,25 @@ export function Notepad({ onClose, show }: NotepadProps) {
       <header className={styles.header}>
         <h2 className={styles.label}>Your Note</h2>
         <div className={styles.buttons}>
-          <Button
+          <Tooltip.Provider delayDuration={0}>
-            icon={copying ? <FaCheck /> : <LuCopy />}
+            <Button
-            tooltip="Copy Note"
+              icon={copying ? <FaCheck /> : <LuCopy />}
-            onClick={() => copy(note)}
+              tooltip="Copy Note"
-          />
+              onClick={() => copy(note)}
-          <Button
+            />
-            icon={<LuDownload />}
+            <Button
-            tooltip="Download Note"
+              icon={<LuDownload />}
-            onClick={() => download('Moodit Note.txt', note)}
+              tooltip="Download Note"
-          />
+              onClick={() => download('Moodit Note.txt', note)}
-          <Button
+            />
-            critical={!history}
+            <Button
-            icon={history ? <FaUndo /> : <BiTrash />}
+              critical={!history}
-            recommended={!!history}
+              icon={history ? <FaUndo /> : <BiTrash />}
-            tooltip={history ? 'Restore Note' : 'Clear Note'}
+              recommended={!!history}
-            onClick={() => (history ? restore() : clear())}
+              tooltip={history ? 'Restore Note' : 'Clear Note'}
-          />
+              onClick={() => (history ? restore() : clear())}
+            />
+          </Tooltip.Provider>
         </div>
       </header>
 

src/components/tooltip/tooltip.tsx

@@ -24,14 +24,12 @@ interface TooltipProps {
   children: JSX.Element;
   content: string;
   placement?: Placement;
-  showDelay?: number;
 }
 
 export function Tooltip({
   children,
   content,
   placement = 'top',
-  showDelay = 500,
 }: TooltipProps) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -52,35 +50,56 @@ export function Tooltip({
   const variants = mix(fade(), slide!);
 
   return (
-    <TooltipPrimitive.Provider delayDuration={showDelay}>
+    <TooltipPrimitive.Root open={isOpen} onOpenChange={o => setIsOpen(o)}>
-      <TooltipPrimitive.Root open={isOpen} onOpenChange={o => setIsOpen(o)}>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
 
-        <AnimatePresence>
+      <AnimatePresence>
-          {isOpen && (
+        {isOpen && (
-            <TooltipPrimitive.Portal forceMount>
+          <TooltipPrimitive.Portal forceMount>
-              <TooltipPrimitive.Content
+            <TooltipPrimitive.Content
-                align={align}
+              align={align}
-                asChild
+              asChild
+              className={styles.tooltip}
+              collisionPadding={8}
+              side={side}
+              sideOffset={12}
+            >
+              <motion.div
+                animate="show"
                 className={styles.tooltip}
-                collisionPadding={8}
+                exit="hidden"
-                side={side}
+                initial="hidden"
-                sideOffset={12}
+                variants={variants}
               >
-                <motion.div
+                {content}
-                  animate="show"
+              </motion.div>
-                  className={styles.tooltip}
+            </TooltipPrimitive.Content>
-                  exit="hidden"
+          </TooltipPrimitive.Portal>
-                  initial="hidden"
+        )}
-                  variants={variants}
+      </AnimatePresence>
-                >
+    </TooltipPrimitive.Root>
-                  {content}
+  );
-                </motion.div>
+}
-              </TooltipPrimitive.Content>
+
-            </TooltipPrimitive.Portal>
+interface TooltipProviderProps {
-          )}
+  children: React.ReactNode;
-        </AnimatePresence>
+  delayDuration?: number;
-      </TooltipPrimitive.Root>
+  skipDelayDuration?: number;
+}
+
+function Provider({
+  children,
+  delayDuration = 500,
+  skipDelayDuration = 0,
+}: TooltipProviderProps) {
+  return (
+    <TooltipPrimitive.Provider
+      delayDuration={delayDuration}
+      skipDelayDuration={skipDelayDuration}
+    >
+      {children}
     </TooltipPrimitive.Provider>
   );
 }
+
+Tooltip.Provider = Provider;